@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 10.6667vw;
}

/**
 * 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 */
}

/**
 * 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;
  width: 100%;
}

/**
 * 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],
[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: 0.2667vw dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 0.2667vw solid #c0c0c0;
  margin: 0 0.5333vw;
  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: -0.5333vw; /* 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;
}

/**
 * Remove the shadow in iOS.
 */
[type=text] {
  -webkit-appearance: none;
}

[type=password] {
  -webkit-appearance: none;
}

[type=tel] {
  -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,
menu {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */
template {
  display: none;
}

/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}

body {
  font-family: Roboto, "游ゴシック", YuGothic, "Yu Gothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, "メイリオ", Meiryo, sans-serif;
  transition: z-index 0ms 5.28455ms;
  margin: 0;
}

a {
  text-decoration: none;
}

pre {
  background-color: transparent;
  border: none;
  padding: 4.2667vw 0;
}

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

/*
見出し

ページ内で見出しとして機能する要素のスタイル群です。

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

Styleguide 1.1
*/
/*
見出し

商品紹介等で利用される、一般的な見出しのスタイルです。

ex [商品詳細ページ　商品見出し部分](http://demo3.ec-cube.net/products/detail/27)

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

Styleguide 1.1.1
*/
.ec-headingTitle {
  margin: 0 0 2.1333vw;
  font-size: 8.5333vw;
  font-weight: normal;
  color: #333333;
}

/*
ページヘッダ

各種ページで用いられるページヘッダのデザインです。

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

Markup:
.ec-pageHeader
  h1 利用規約

Styleguide 1.1.2
*/
.ec-pageHeader h1 {
  margin: 0 0 2.1333vw;
  border-bottom: 0.2667vw dotted #ccc;
  border-top: 0.2667vw solid #ccc;
  padding: 2.1333vw 0 3.2vw;
  font-size: 4.2667vw;
  font-weight: bold;
}

/*
サブ見出し
利用規約など、文字主体のページで用いられるサブ見出しです。
ex [利用規約ページ サブ見出し部分](http://demo3.ec-cube.net/help/agreement)

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

Styleguide 1.1.3
*/
.ec-heading {
  margin: 6.4vw 0;
}

/*
サブ見出し(太字)
文字主体のページで用いられるサブ見出しの太字のスタイルです。
ex [プライバシーポリシー サブ見出し部分](http://demo3.ec-cube.net/help/privacy)

Markup:
.ec-heading-bold 個人情報の定義

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

/*
背景付き見出し
マイページ注文履歴等で用いられる背景付きの見出しです。
ex [ご注文履歴詳細　背景付き見出し部分](http://demo3.ec-cube.net/mypage/history/1063)

Markup:
.ec-rectHeading
  h2 配送情報
.ec-rectHeading
  h2 お支払について

Styleguide 1.1.5
*/
.ec-rectHeading h1,
.ec-rectHeading h2,
.ec-rectHeading h3,
.ec-rectHeading h4,
.ec-rectHeading h5,
.ec-rectHeading h6 {
  background: #f3f3f3;
  padding: 2.1333vw 3.2vw;
  font-size: 5.3333vw;
  font-weight: bold;
}

/*
メッセージ見出し
ユーザが行った操作に対する、完了報告やエラー表示のページで使用される見出しのスタイルです。
ex [注文完了 ログイン後、カートに商品を入れ注文完了まで行う](http://demo3.ec-cube.net/shopping/)

Markup:
.ec-reportHeading
  h2 ご注文ありがとうございました

Styleguide 1.1.6
*/
.ec-reportHeading {
  width: 100%;
  border-top: 0.2667vw dotted #ccc;
  margin: 5.3333vw 0 8vw;
  padding: 0;
  text-align: center;
  font-size: 6.4vw;
  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: 6.4vw;
}

/*
文字装飾
文字装飾をするためのスタイル群です。

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

Styleguide 1.2
*/
/*
テキストリンク
テキストリンクのスタイルです。

Markup:
a(href="#").ec-link さくらのクラウド

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

.ec-link:hover {
  color: #33a8d0;
  text-decoration: none;
}

/*
テキスト（太字）
テキストを太くするためのスタイルです。
Markup:
p.ec-font-bold この季節にぴったりな商品をご用意しました

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

/*
テキスト（グレー）
テキストをグレーにするためのスタイルです。

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

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

/*
テキスト（赤）
テキストを赤にするためのスタイルです。

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

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

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

/*
フォントサイズ
フォントサイズを指定するためのスタイルです。

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

Styleguide 1.2.5
*/
.ec-font-size-1 {
  font-size: 3.2vw;
}

.ec-font-size-2 {
  font-size: 3.7333vw;
}

.ec-font-size-3 {
  font-size: 4.2667vw;
}

.ec-font-size-4 {
  font-size: 5.3333vw;
}

.ec-font-size-5 {
  font-size: 8.5333vw;
}

.ec-font-size-6 {
  font-size: 10.6667vw;
}

/*
テキスト水平位置
テキストをセンタリングするためのスタイルです。

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

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

/*
価格テキスト
価格を表示するテキストです。
価格文字にスペースを取るほか、税込み等の表示を小さくする効果もあります。
spanを用いたインライン要素として利用します。

Markup:
div(style="color:#DE5D50;font-size:7.4667vw")
    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: 4.8vw;
  font-weight: bold;
}

.ec-price .ec-price__price {
  display: inline-block;
  padding: 0 0.3em;
  font-size: 4.8vw;
  font-weight: bold;
}

.ec-price .ec-price__tax {
  font-size: 3.2vw;
}

/*
テキストの位置
テキストや、入れ子にしたインライン要素を
「左揃え」「中央揃え」「右揃え」に設定することができます。

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

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

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

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

/*
メッセージテキスト
ユーザが行った操作に対する、完了報告やエラー表示のページで使用されるテキストのスタイルです。
ex [注文完了 （ログイン後、カートに商品を入れ注文完了まで行う）](http://demo3.ec-cube.net/shopping/)

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


Styleguide 1.2.9
*/
.ec-reportDescription {
  margin-bottom: 8.5333vw;
  text-align: center;
  font-size: 4.2667vw;
  line-height: 1.4;
}

/*
テキスト下部のスペース
テキストの下に余白を追加することができます。 .ec-para-normalで4.2667vwの余白をつけることができます。

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

Styleguide 1.2.10
*/
.ec-para-normal {
  margin-bottom: 4.2667vw;
}

/*
リスト
シンプルなリストを構成するためのスタイル群です。

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

Styleguide 1.3
*/
/*
水平定義リスト
シンプルな定義リストのスタイルを定義します。
dl要素を用いてコーディングします。
ex [当サイトについて　水平定義リスト部分](http://demo3.ec-cube.net/help/about)

Markup:
dl.ec-definitions
    dt 店名
    dd EC-CUBE3 DEMO SHOP
dl.ec-definitions
    dt 会社名
    dd EC-CUBE3
dl.ec-definitions--soft
    dt 所在地
    dd 〒 550-0001

Styleguide 1.3.1
*/
.ec-definitions,
.ec-definitions--soft {
  margin: 1.3333vw 0;
  display: block;
}

.ec-definitions dt,
.ec-definitions--soft dt,
.ec-definitions dd,
.ec-definitions--soft dd {
  display: inline-block;
  margin: 0;
}

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

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

/*
下線つき定義リスト
線が添えられた定義リストのスタイルを定義します。
dl要素を用いてコーディングします。
ex [当サイトについて　下線つき定義リスト](http://demo3.ec-cube.net/help/about)

Markup:
.ec-borderedDefs
  dl
    dt 店名
    dd EC-CUBE3 DEMO SHOP
  dl
    dt 会社名
    dd EC-CUBE3
  dl
    dt 所在地
    dd 〒550 - 0001

Styleguide 1.3.2
*/
.pc_only {
  display: none;
}

.ec-borderedDefs {
  width: 100%;
  border-top: 0.2667vw dotted #ccc;
  margin-bottom: 4.2667vw;
}

.ec-borderedDefs dl {
  display: flex;
  border-bottom: 0.2667vw dotted #ccc;
  margin: 0;
  padding: 2.6667vw 0 0;
  flex-wrap: wrap;
}

.ec-borderedDefs dt,
.ec-borderedDefs dd {
  padding: 0;
}

.ec-borderedDefs dt {
  font-weight: normal;
  width: 100% !important;
  padding-top: 0;
  position: relative;
}

.ec-borderedDefs dd {
  padding: 0;
  width: 100%;
  line-height: 2.5;
}

.ec-contactRoleCustom .ec-borderedDefs p {
  margin-bottom: 1.3vw !important;
}

.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 2.1333vw 0;
}

.ec-list-chilled dt,
.ec-list-chilled dd {
  display: table-cell;
  border-bottom: 0.2667vw dotted #ccc;
  padding: 0;
}

.ec-list-chilled dt {
  width: 30%;
}

.ec-list-chilled dd {
  padding: 0;
}

/*
ボーダーリスト
線が添えられたリストを表示します。
ex [当サイトについて　ボーダーリスト](http://demo3.ec-cube.net/help/about)

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


Styleguide 1.3.3
*/
.ec-borderedList {
  width: 100%;
  border-top: 0;
  list-style: none;
  padding: 0;
}

.ec-borderedList li {
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 2.1333vw 0;
}

.ec-list-chilled dt,
.ec-list-chilled dd {
  display: table-cell;
  border-bottom: 0.2667vw dotted #ccc;
  padding: 4.2667vw 0;
}

.ec-list-chilled dt {
  width: 30%;
}

.ec-list-chilled dd {
  padding: 4.2667vw;
}

/*
ボタンサイズ
ボタンサイズを変更するスタイル群です。

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

Styleguide 2.1
*/
/*
通常ボタン
インラインの要素としてボタンを定義出来ます。
ex [トップページ　ボタン部分](http://demo3.ec-cube.net/)

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

Styleguide 2.1.1
*/
.ec-inlineBtn {
  width: 13vw;
  margin-bottom: 0;
  font-weight: bold;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  padding: 3.3vw 0;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-inlineBtn {
  width: 15vw;
  margin-right: 3vw;
  padding: 3vw 0;
}

.ec-inlineBtn:focus,
.ec-inlineBtn.focus,
.ec-inlineBtn:active:focus,
.ec-inlineBtn:active.focus,
.ec-inlineBtn.active:focus,
.ec-inlineBtn.active.focus {
  outline: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-inlineBtn:hover,
.ec-inlineBtn:focus,
.ec-inlineBtn.focus {
  color: #333333;
  text-decoration: none;
}

.ec-inlineBtn:active,
.ec-inlineBtn.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn.disabled,
.ec-inlineBtn[disabled],
fieldset[disabled] .ec-inlineBtn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-inlineBtn:focus,
.ec-inlineBtn.focus {
  color: #333333;
  background-color: #d7dfe3;
  border-color: #8c8c8c;
}

.ec-inlineBtn:hover {
  color: #333333;
  background-color: #d7dfe3;
  border-color: #adadad;
}

.ec-inlineBtn:active,
.ec-inlineBtn.active,
.open > .ec-inlineBtn.dropdown-toggle {
  color: #333333;
  background-color: #d7dfe3;
  background-image: none;
  border-color: #adadad;
}

.ec-inlineBtn:active:hover,
.ec-inlineBtn:active:focus,
.ec-inlineBtn:active.focus,
.ec-inlineBtn.active:hover,
.ec-inlineBtn.active:focus,
.ec-inlineBtn.active.focus,
.open > .ec-inlineBtn.dropdown-toggle:hover,
.open > .ec-inlineBtn.dropdown-toggle:focus,
.open > .ec-inlineBtn.dropdown-toggle.focus {
  color: #333333;
  background-color: #c2ced4;
  border-color: #8c8c8c;
}

.ec-inlineBtn.disabled:hover,
.ec-inlineBtn.disabled:focus,
.ec-inlineBtn.disabled.focus,
.ec-inlineBtn[disabled]:hover,
.ec-inlineBtn[disabled]:focus,
.ec-inlineBtn[disabled].focus,
fieldset[disabled] .ec-inlineBtn:hover,
fieldset[disabled] .ec-inlineBtn:focus,
fieldset[disabled] .ec-inlineBtn.focus {
  background-color: #f5f7f8;
  border-color: #ccc;
}

.ec-inlineBtn .badge {
  color: #f5f7f8;
  background-color: #333333;
}

.ec-inlineBtn .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

.ec-inlineBtn--primary {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid #5cb1b1;
  white-space: nowrap;
  padding: 2.6667vw 4.2667vw;
  font-size: 3.7333vw;
  line-height: 1.42857;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  color: #fff;
  background-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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-inlineBtn--primary:hover,
.ec-inlineBtn--primary:focus,
.ec-inlineBtn--primary.focus {
  color: #333333;
  text-decoration: none;
}

.ec-inlineBtn--primary:active,
.ec-inlineBtn--primary.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--primary.disabled,
.ec-inlineBtn--primary[disabled],
fieldset[disabled] .ec-inlineBtn--primary {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-inlineBtn--primary:focus,
.ec-inlineBtn--primary.focus {
  color: #fff;
  background-color: #479393;
  border-color: #2e6060;
}

.ec-inlineBtn--primary:hover {
  color: #fff;
  background-color: #479393;
  border-color: #438d8d;
}

.ec-inlineBtn--primary:active,
.ec-inlineBtn--primary.active,
.open > .ec-inlineBtn--primary.dropdown-toggle {
  color: #fff;
  background-color: #479393;
  background-image: none;
  border-color: #438d8d;
}

.ec-inlineBtn--primary:active:hover,
.ec-inlineBtn--primary:active:focus,
.ec-inlineBtn--primary:active.focus,
.ec-inlineBtn--primary.active:hover,
.ec-inlineBtn--primary.active:focus,
.ec-inlineBtn--primary.active.focus,
.open > .ec-inlineBtn--primary.dropdown-toggle:hover,
.open > .ec-inlineBtn--primary.dropdown-toggle:focus,
.open > .ec-inlineBtn--primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #3b7b7b;
  border-color: #2e6060;
}

.ec-inlineBtn--primary.disabled:hover,
.ec-inlineBtn--primary.disabled:focus,
.ec-inlineBtn--primary.disabled.focus,
.ec-inlineBtn--primary[disabled]:hover,
.ec-inlineBtn--primary[disabled]:focus,
.ec-inlineBtn--primary[disabled].focus,
fieldset[disabled] .ec-inlineBtn--primary:hover,
fieldset[disabled] .ec-inlineBtn--primary:focus,
fieldset[disabled] .ec-inlineBtn--primary.focus {
  background-color: #5cb1b1;
  border-color: #5cb1b1;
}

.ec-inlineBtn--primary .badge {
  color: #5cb1b1;
  background-color: #fff;
}

.ec-inlineBtn--primary .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

.ec-inlineBtn--action {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid #de5d50;
  white-space: nowrap;
  padding: 2.6667vw 4.2667vw;
  font-size: 3.7333vw;
  line-height: 1.42857;
  border-radius: 0;
  user-select: none;
  text-decoration: none;
  color: #fff;
  background-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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-inlineBtn--action:hover,
.ec-inlineBtn--action:focus,
.ec-inlineBtn--action.focus {
  color: #333333;
  text-decoration: none;
}

.ec-inlineBtn--action:active,
.ec-inlineBtn--action.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--action.disabled,
.ec-inlineBtn--action[disabled],
fieldset[disabled] .ec-inlineBtn--action {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-inlineBtn--action:focus,
.ec-inlineBtn--action.focus {
  color: #fff;
  background-color: #d33828;
  border-color: #93271c;
}

.ec-inlineBtn--action:hover {
  color: #fff;
  background-color: #d33828;
  border-color: #cb3526;
}

.ec-inlineBtn--action:active,
.ec-inlineBtn--action.active,
.open > .ec-inlineBtn--action.dropdown-toggle {
  color: #fff;
  background-color: #d33828;
  background-image: none;
  border-color: #cb3526;
}

.ec-inlineBtn--action:active:hover,
.ec-inlineBtn--action:active:focus,
.ec-inlineBtn--action:active.focus,
.ec-inlineBtn--action.active:hover,
.ec-inlineBtn--action.active:focus,
.ec-inlineBtn--action.active.focus,
.open > .ec-inlineBtn--action.dropdown-toggle:hover,
.open > .ec-inlineBtn--action.dropdown-toggle:focus,
.open > .ec-inlineBtn--action.dropdown-toggle.focus {
  color: #fff;
  background-color: #b53022;
  border-color: #93271c;
}

.ec-inlineBtn--action.disabled:hover,
.ec-inlineBtn--action.disabled:focus,
.ec-inlineBtn--action.disabled.focus,
.ec-inlineBtn--action[disabled]:hover,
.ec-inlineBtn--action[disabled]:focus,
.ec-inlineBtn--action[disabled].focus,
fieldset[disabled] .ec-inlineBtn--action:hover,
fieldset[disabled] .ec-inlineBtn--action:focus,
fieldset[disabled] .ec-inlineBtn--action.focus {
  background-color: #de5d50;
  border-color: #de5d50;
}

.ec-inlineBtn--action .badge {
  color: #de5d50;
  background-color: #fff;
}

.ec-inlineBtn--action .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

.ec-inlineBtn--cancel {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid #333;
  white-space: nowrap;
  padding: 2.6667vw 4.2667vw;
  font-size: 3.7333vw;
  line-height: 1.42857;
  border-radius: 0;
  user-select: none;
  text-decoration: none;
  color: #fff;
  background-color: #333333;
}

.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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-inlineBtn--cancel:hover,
.ec-inlineBtn--cancel:focus,
.ec-inlineBtn--cancel.focus {
  color: #333333;
  text-decoration: none;
}

.ec-inlineBtn--cancel:active,
.ec-inlineBtn--cancel.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--cancel.disabled,
.ec-inlineBtn--cancel[disabled],
fieldset[disabled] .ec-inlineBtn--cancel {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-inlineBtn--cancel:focus,
.ec-inlineBtn--cancel.focus {
  color: #fff;
  background-color: #3b3b47;
  border-color: #18181d;
}

.ec-inlineBtn--cancel:hover {
  color: #fff;
  background-color: #3b3b47;
  border-color: #363642;
}

.ec-inlineBtn--cancel:active,
.ec-inlineBtn--cancel.active,
.open > .ec-inlineBtn--cancel.dropdown-toggle {
  color: #fff;
  background-color: #3b3b47;
  background-image: none;
  border-color: #363642;
}

.ec-inlineBtn--cancel:active:hover,
.ec-inlineBtn--cancel:active:focus,
.ec-inlineBtn--cancel:active.focus,
.ec-inlineBtn--cancel.active:hover,
.ec-inlineBtn--cancel.active:focus,
.ec-inlineBtn--cancel.active.focus,
.open > .ec-inlineBtn--cancel.dropdown-toggle:hover,
.open > .ec-inlineBtn--cancel.dropdown-toggle:focus,
.open > .ec-inlineBtn--cancel.dropdown-toggle.focus {
  color: #fff;
  background-color: #2b2b34;
  border-color: #18181d;
}

.ec-inlineBtn--cancel.disabled:hover,
.ec-inlineBtn--cancel.disabled:focus,
.ec-inlineBtn--cancel.disabled.focus,
.ec-inlineBtn--cancel[disabled]:hover,
.ec-inlineBtn--cancel[disabled]:focus,
.ec-inlineBtn--cancel[disabled].focus,
fieldset[disabled] .ec-inlineBtn--cancel:hover,
fieldset[disabled] .ec-inlineBtn--cancel:focus,
fieldset[disabled] .ec-inlineBtn--cancel.focus {
  background-color: #333333;
  border-color: #333333;
}

.ec-inlineBtn--cancel .badge {
  color: #333333;
  background-color: #fff;
}

.ec-inlineBtn--cancel .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

/*
ブロックボタン（全幅）
ボタンサイズは em で指定するため、テキストサイズの変更でボタンサイズを変更できます。
ex [商品詳細ページ　カートボタン部分](http://demo3.ec-cube.net/products/detail/30)

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

Styleguide 2.1.2
*/
.ec-blockBtn {
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid #ccc;
  white-space: nowrap;
  padding: 0 4.2667vw;
  font-size: 3.7333vw;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  color: #333333;
  background-color: #f5f7f8;
  display: block;
  width: 100%;
  height: 14.9333vw;
  line-height: 14.9333vw;
}

.ec-blockBtn:focus,
.ec-blockBtn.focus,
.ec-blockBtn:active:focus,
.ec-blockBtn:active.focus,
.ec-blockBtn.active:focus,
.ec-blockBtn.active.focus {
  outline: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-blockBtn:hover,
.ec-blockBtn:focus,
.ec-blockBtn.focus {
  color: #333333;
  text-decoration: none;
}

.ec-blockBtn:active,
.ec-blockBtn.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-blockBtn.disabled,
.ec-blockBtn[disabled],
fieldset[disabled] .ec-blockBtn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-blockBtn:focus,
.ec-blockBtn.focus {
  color: #333333;
  background-color: #d7dfe3;
  border-color: #8c8c8c;
}

.ec-blockBtn:hover {
  color: #333333;
  background-color: #d7dfe3;
  border-color: #adadad;
}

.ec-blockBtn:active,
.ec-blockBtn.active,
.open > .ec-blockBtn.dropdown-toggle {
  color: #333333;
  background-color: #d7dfe3;
  background-image: none;
  border-color: #adadad;
}

.ec-blockBtn:active:hover,
.ec-blockBtn:active:focus,
.ec-blockBtn:active.focus,
.ec-blockBtn.active:hover,
.ec-blockBtn.active:focus,
.ec-blockBtn.active.focus,
.open > .ec-blockBtn.dropdown-toggle:hover,
.open > .ec-blockBtn.dropdown-toggle:focus,
.open > .ec-blockBtn.dropdown-toggle.focus {
  color: #333333;
  background-color: #c2ced4;
  border-color: #8c8c8c;
}

.ec-blockBtn.disabled:hover,
.ec-blockBtn.disabled:focus,
.ec-blockBtn.disabled.focus,
.ec-blockBtn[disabled]:hover,
.ec-blockBtn[disabled]:focus,
.ec-blockBtn[disabled].focus,
fieldset[disabled] .ec-blockBtn:hover,
fieldset[disabled] .ec-blockBtn:focus,
fieldset[disabled] .ec-blockBtn.focus {
  background-color: #f5f7f8;
  border-color: #ccc;
}

.ec-blockBtn .badge {
  color: #f5f7f8;
  background-color: #333333;
}

.ec-blockBtn .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

.ec-blockBtn--primary {
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid #5cb1b1;
  white-space: nowrap;
  padding: 0 4.2667vw;
  font-size: 3.7333vw;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  color: #fff;
  background-color: #5cb1b1;
  display: block;
  width: 100%;
  height: 14.9333vw;
  line-height: 14.9333vw;
}

.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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-blockBtn--primary:hover,
.ec-blockBtn--primary:focus,
.ec-blockBtn--primary.focus {
  color: #333333;
  text-decoration: none;
}

.ec-blockBtn--primary:active,
.ec-blockBtn--primary.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--primary.disabled,
.ec-blockBtn--primary[disabled],
fieldset[disabled] .ec-blockBtn--primary {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-blockBtn--primary:focus,
.ec-blockBtn--primary.focus {
  color: #fff;
  background-color: #479393;
  border-color: #2e6060;
}

.ec-blockBtn--primary:hover {
  color: #fff;
  background-color: #479393;
  border-color: #438d8d;
}

.ec-blockBtn--primary:active,
.ec-blockBtn--primary.active,
.open > .ec-blockBtn--primary.dropdown-toggle {
  color: #fff;
  background-color: #479393;
  background-image: none;
  border-color: #438d8d;
}

.ec-blockBtn--primary:active:hover,
.ec-blockBtn--primary:active:focus,
.ec-blockBtn--primary:active.focus,
.ec-blockBtn--primary.active:hover,
.ec-blockBtn--primary.active:focus,
.ec-blockBtn--primary.active.focus,
.open > .ec-blockBtn--primary.dropdown-toggle:hover,
.open > .ec-blockBtn--primary.dropdown-toggle:focus,
.open > .ec-blockBtn--primary.dropdown-toggle.focus {
  color: #fff;
  background-color: #3b7b7b;
  border-color: #2e6060;
}

.ec-blockBtn--primary.disabled:hover,
.ec-blockBtn--primary.disabled:focus,
.ec-blockBtn--primary.disabled.focus,
.ec-blockBtn--primary[disabled]:hover,
.ec-blockBtn--primary[disabled]:focus,
.ec-blockBtn--primary[disabled].focus,
fieldset[disabled] .ec-blockBtn--primary:hover,
fieldset[disabled] .ec-blockBtn--primary:focus,
fieldset[disabled] .ec-blockBtn--primary.focus {
  background-color: #5cb1b1;
  border-color: #5cb1b1;
}

.ec-blockBtn--primary .badge {
  color: #5cb1b1;
  background-color: #fff;
}

.ec-blockBtn--primary .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

.ec-blockBtn--action: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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-blockBtn--action:hover,
.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus {
  color: #333333;
  text-decoration: none;
}

.ec-blockBtn--action:active,
.ec-blockBtn--action.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--action.disabled,
.ec-blockBtn--action[disabled],
fieldset[disabled] .ec-blockBtn--action {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-blockBtn--action:focus,
.ec-blockBtn--action.focus {
  color: #fff;
  background-color: #d33828;
  border-color: #93271c;
}

.ec-blockBtn--action:hover {
  color: #fff;
  background-color: #d33828;
  border-color: #cb3526;
}

.ec-blockBtn--action:active,
.ec-blockBtn--action.active,
.open > .ec-blockBtn--action.dropdown-toggle {
  color: #fff;
  background-color: #d33828;
  background-image: none;
  border-color: #cb3526;
}

.ec-blockBtn--action:active:hover,
.ec-blockBtn--action:active:focus,
.ec-blockBtn--action:active.focus,
.ec-blockBtn--action.active:hover,
.ec-blockBtn--action.active:focus,
.ec-blockBtn--action.active.focus,
.open > .ec-blockBtn--action.dropdown-toggle:hover,
.open > .ec-blockBtn--action.dropdown-toggle:focus,
.open > .ec-blockBtn--action.dropdown-toggle.focus {
  color: #fff;
  background-color: #b53022;
  border-color: #93271c;
}

.ec-blockBtn--action.disabled:hover,
.ec-blockBtn--action.disabled:focus,
.ec-blockBtn--action.disabled.focus,
.ec-blockBtn--action[disabled]:hover,
.ec-blockBtn--action[disabled]:focus,
.ec-blockBtn--action[disabled].focus,
fieldset[disabled] .ec-blockBtn--action:hover,
fieldset[disabled] .ec-blockBtn--action:focus,
fieldset[disabled] .ec-blockBtn--action.focus {
  background-color: #de5d50;
  border-color: #de5d50;
}

.ec-blockBtn--action .badge {
  color: #de5d50;
  background-color: #fff;
}

.ec-blockBtn--action .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

.ec-blockBtn--cancel: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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-blockBtn--cancel:hover,
.ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel.focus {
  color: #333333;
  text-decoration: none;
}

.ec-blockBtn--cancel:active,
.ec-blockBtn--cancel.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--cancel.disabled,
.ec-blockBtn--cancel[disabled],
fieldset[disabled] .ec-blockBtn--cancel {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-blockBtn--cancel:focus,
.ec-blockBtn--cancel.focus {
  color: #fff;
  background-color: #3b3b47;
  border-color: #18181d;
}

.ec-blockBtn--cancel:hover {
  color: #fff;
  background-color: #3b3b47;
  border-color: #363642;
}

.ec-blockBtn--cancel:active,
.ec-blockBtn--cancel.active,
.open > .ec-blockBtn--cancel.dropdown-toggle {
  color: #fff;
  background-color: #3b3b47;
  background-image: none;
  border-color: #363642;
}

.ec-blockBtn--cancel:active:hover,
.ec-blockBtn--cancel:active:focus,
.ec-blockBtn--cancel:active.focus,
.ec-blockBtn--cancel.active:hover,
.ec-blockBtn--cancel.active:focus,
.ec-blockBtn--cancel.active.focus,
.open > .ec-blockBtn--cancel.dropdown-toggle:hover,
.open > .ec-blockBtn--cancel.dropdown-toggle:focus,
.open > .ec-blockBtn--cancel.dropdown-toggle.focus {
  color: #fff;
  background-color: #2b2b34;
  border-color: #18181d;
}

.ec-blockBtn--cancel.disabled:hover,
.ec-blockBtn--cancel.disabled:focus,
.ec-blockBtn--cancel.disabled.focus,
.ec-blockBtn--cancel[disabled]:hover,
.ec-blockBtn--cancel[disabled]:focus,
.ec-blockBtn--cancel[disabled].focus,
fieldset[disabled] .ec-blockBtn--cancel:hover,
fieldset[disabled] .ec-blockBtn--cancel:focus,
fieldset[disabled] .ec-blockBtn--cancel.focus {
  background-color: #333333;
  border-color: #333333;
}

.ec-blockBtn--cancel .badge {
  color: #333333;
  background-color: #fff;
}

.ec-blockBtn--cancel .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

/*
アイコンボタン
SVGアイコンを用いたアイコンボタンです。

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

Styleguide 2.2
*/
/*
アイコンボタン
閉じるなどSVGアイコンを用いたボタン装飾で利用します。
ex [ログイン画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/login)

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

Styleguide 2.2.1
*/
.ec-closeBtn {
  cursor: pointer;
}

.ec-closeBtn .ec-icon img {
  display: inline-block;
  margin-right: 1.3333vw;
  width: 1em;
  height: 1em;
  position: relative;
  top: -0.2667vw;
  vertical-align: middle;
}

/*
アイコンボタン(○)
閉じるなどSVGアイコンを用いたボタン装飾で利用します。
ex [ログイン画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/login)
ex [お届け先編集画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/delivery)

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

Styleguide 2.2.2
*/
.ec-closeBtn--circle {
  display: block;
  border: 0 none;
  padding: 0;
  margin: 0;
  text-shadow: none;
  box-shadow: none;
  border-radius: 50%;
  background: #b8bec4;
  cursor: pointer;
  width: 10.6667vw;
  min-width: 10.6667vw;
  max-width: 10.6667vw;
  height: 10.6667vw;
  line-height: 10.6667vw;
  vertical-align: middle;
  position: relative;
  text-align: center;
}

.ec-closeBtn--circle .ec-icon img {
  display: block;
  margin-top: -0.5em;
  margin-left: -0.5em;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
}

/*
その他のボタン
通常のボタンや、アイコンボタン以外のボタンを定義します。

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

Styleguide 2.3
*/
/*
ページトップボタン
ページトップボタンを表示します
ex [商品詳細ページ　カートボタン部分](http://demo3.ec-cube.net/products/detail/30)

Markup:
.ec-blockTopBtn

Styleguide 2.3.1
*/
.ec-blockTopBtn {
  display: none;
  position: fixed;
  width: 32vw;
  height: 10.6667vw;
  right: 0;
  bottom: 2.6667vw;
  cursor: pointer;
  color: #ffffff;
  text-align: center;
  line-height: 10.6667vw;
  opacity: 0.8;
  background-color: #9da3a9;
}

/*
フォーム部品(テキスト)
テキストや数値の入力項目に関する要素を定義します。

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


Styleguide 3.1
*/
/*
フォーム
`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。
ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

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

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

.ec-input input[type=radio],
.ec-halfInput input[type=radio],
.ec-numberInput input[type=radio],
.ec-zipInput input[type=radio],
.ec-telInput input[type=radio],
.ec-select input[type=radio],
.ec-birth input[type=radio],
.ec-input input[type=checkbox],
.ec-halfInput input[type=checkbox],
.ec-numberInput input[type=checkbox],
.ec-zipInput input[type=checkbox],
.ec-telInput input[type=checkbox],
.ec-select input[type=checkbox],
.ec-birth input[type=checkbox] {
  margin: 0.2667vw \9 0 0;
  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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.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: 9.0667vw;
  padding: 1.6vw 3.2vw;
  font-size: 4.2667vw;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 0.2667vw solid #ccc;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 0.8vw;
}

.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 0.2667vw 0.2667vw rgba(0, 0, 0, 0.075), 0 0 2.1333vw rgba(102, 175, 233, 0.6);
}

.ec-input input::-moz-placeholder,
.ec-halfInput input::-moz-placeholder,
.ec-numberInput input::-moz-placeholder,
.ec-zipInput input::-moz-placeholder,
.ec-telInput input::-moz-placeholder,
.ec-select input::-moz-placeholder,
.ec-birth input::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.ec-input input:-ms-input-placeholder,
.ec-halfInput input:-ms-input-placeholder,
.ec-numberInput input:-ms-input-placeholder,
.ec-zipInput input:-ms-input-placeholder,
.ec-telInput input:-ms-input-placeholder,
.ec-select input:-ms-input-placeholder,
.ec-birth input:-ms-input-placeholder {
  color: #999;
}

.ec-input input::-webkit-input-placeholder,
.ec-halfInput input::-webkit-input-placeholder,
.ec-numberInput input::-webkit-input-placeholder,
.ec-zipInput input::-webkit-input-placeholder,
.ec-telInput input::-webkit-input-placeholder,
.ec-select input::-webkit-input-placeholder,
.ec-birth input::-webkit-input-placeholder {
  color: #999;
}

.ec-input input::-ms-expand,
.ec-halfInput input::-ms-expand,
.ec-numberInput input::-ms-expand,
.ec-zipInput input::-ms-expand,
.ec-telInput input::-ms-expand,
.ec-select input::-ms-expand,
.ec-birth input::-ms-expand {
  border: 0;
  background-color: transparent;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
.ec-input input[readonly],
.ec-halfInput input[readonly],
.ec-numberInput input[readonly],
.ec-zipInput input[readonly],
.ec-telInput input[readonly],
.ec-select input[readonly],
.ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
  background-color: #eeeeee;
  opacity: 1;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
  cursor: not-allowed;
}

.ec-input select,
.ec-halfInput select,
.ec-numberInput select,
.ec-zipInput select,
.ec-telInput select,
.ec-select select,
.ec-birth select {
  display: block;
  width: 100%;
  height: 9.0667vw;
  padding: 1.6vw 3.2vw;
  font-size: 4.2667vw;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 0.2667vw solid #ccc;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 0.8vw;
}

.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 0.2667vw 0.2667vw rgba(0, 0, 0, 0.075), 0 0 2.1333vw rgba(102, 175, 233, 0.6);
}

.ec-input select::-moz-placeholder,
.ec-halfInput select::-moz-placeholder,
.ec-numberInput select::-moz-placeholder,
.ec-zipInput select::-moz-placeholder,
.ec-telInput select::-moz-placeholder,
.ec-select select::-moz-placeholder,
.ec-birth select::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.ec-input select:-ms-input-placeholder,
.ec-halfInput select:-ms-input-placeholder,
.ec-numberInput select:-ms-input-placeholder,
.ec-zipInput select:-ms-input-placeholder,
.ec-telInput select:-ms-input-placeholder,
.ec-select select:-ms-input-placeholder,
.ec-birth select:-ms-input-placeholder {
  color: #999;
}

.ec-input select::-webkit-input-placeholder,
.ec-halfInput select::-webkit-input-placeholder,
.ec-numberInput select::-webkit-input-placeholder,
.ec-zipInput select::-webkit-input-placeholder,
.ec-telInput select::-webkit-input-placeholder,
.ec-select select::-webkit-input-placeholder,
.ec-birth select::-webkit-input-placeholder {
  color: #999;
}

.ec-input select::-ms-expand,
.ec-halfInput select::-ms-expand,
.ec-numberInput select::-ms-expand,
.ec-zipInput select::-ms-expand,
.ec-telInput select::-ms-expand,
.ec-select select::-ms-expand,
.ec-birth select::-ms-expand {
  border: 0;
  background-color: transparent;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
.ec-input select[readonly],
.ec-halfInput select[readonly],
.ec-numberInput select[readonly],
.ec-zipInput select[readonly],
.ec-telInput select[readonly],
.ec-select select[readonly],
.ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
  background-color: #eeeeee;
  opacity: 1;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
  cursor: not-allowed;
}

.ec-input textarea,
.ec-halfInput textarea,
.ec-numberInput textarea,
.ec-zipInput textarea,
.ec-telInput textarea,
.ec-select textarea,
.ec-birth textarea {
  display: block;
  width: 100%;
  height: 9.0667vw;
  padding: 1.6vw 3.2vw;
  font-size: 3.2vw;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 0.2667vw solid #ccc;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 0.8vw;
}

.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 0.2667vw 0.2667vw rgba(0, 0, 0, 0.075), 0 0 2.1333vw rgba(102, 175, 233, 0.6);
}

.ec-input textarea::-moz-placeholder,
.ec-halfInput textarea::-moz-placeholder,
.ec-numberInput textarea::-moz-placeholder,
.ec-zipInput textarea::-moz-placeholder,
.ec-telInput textarea::-moz-placeholder,
.ec-select textarea::-moz-placeholder,
.ec-birth textarea::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.ec-input textarea:-ms-input-placeholder,
.ec-halfInput textarea:-ms-input-placeholder,
.ec-numberInput textarea:-ms-input-placeholder,
.ec-zipInput textarea:-ms-input-placeholder,
.ec-telInput textarea:-ms-input-placeholder,
.ec-select textarea:-ms-input-placeholder,
.ec-birth textarea:-ms-input-placeholder {
  color: #999;
}

.ec-input textarea::-webkit-input-placeholder,
.ec-halfInput textarea::-webkit-input-placeholder,
.ec-numberInput textarea::-webkit-input-placeholder,
.ec-zipInput textarea::-webkit-input-placeholder,
.ec-telInput textarea::-webkit-input-placeholder,
.ec-select textarea::-webkit-input-placeholder,
.ec-birth textarea::-webkit-input-placeholder {
  color: #999;
}

.ec-input textarea::-ms-expand,
.ec-halfInput textarea::-ms-expand,
.ec-numberInput textarea::-ms-expand,
.ec-zipInput textarea::-ms-expand,
.ec-telInput textarea::-ms-expand,
.ec-select textarea::-ms-expand,
.ec-birth textarea::-ms-expand {
  border: 0;
  background-color: transparent;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
.ec-input textarea[readonly],
.ec-halfInput textarea[readonly],
.ec-numberInput textarea[readonly],
.ec-zipInput textarea[readonly],
.ec-telInput textarea[readonly],
.ec-select textarea[readonly],
.ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
  background-color: #eeeeee;
  opacity: 1;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
  cursor: not-allowed;
}

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

.ec-input input,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input,
.ec-select input,
.ec-birth input {
  height: 10.6667vw;
  margin-bottom: 2.6667vw;
}

.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: 26.6667vw;
}

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

.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: 1.3333vw;
  border-color: #cf3f34;
  background: #fdf1f0;
}

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

.ec-input {
  max-width: none;
}

/*
フォーム（text２つ）
姓名など2つ入力させたい入力項目で使用します。
入力フォームを半分で用意したいときにも利用可能です。
ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

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

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

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

/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面　数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)

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

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

/*
郵便番号フォーム
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面　郵便番号部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.4
*/
.ec-zipInput {
  display: inline-block;
}

.ec-zipInput input {
  display: inline-block;
  text-align: left;
  width: auto;
  max-width: 8em;
  font-size: 4.2667vw;
}

.ec-zipInput span {
  display: inline-block;
  padding: 0 1.3333vw 0 0.8vw;
  margin-left: 1.3333vw;
}

.ec-zipInputHelp .ec-zipInputHelp__icon {
  display: inline-block;
  margin-top: -2.6667vw;
  width: 5.3333vw;
  height: 5.3333vw;
  background: #333333;
  border-radius: 50%;
  font-size: 3.4667vw;
  position: relative;
  top: -1.6vw;
}

.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
  width: 1em;
  height: 1em;
  position: relative;
  left: 0.8vw;
  top: 0.8vw;
}

.ec-zipAuto {
  margin-bottom: 4.2667vw;
}

.ec-zipAuto .ec-inlineBtn {
  font-weight: normal;
}

/*
電話番号ボタン
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面　電話番号部分](http://demo3.ec-cube.net/mypage/change)

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

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

/*
フォーム部品(テキスト)
テキストや数値の入力項目に関する要素を定義します。

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


Styleguide 3.1
*/
/*
フォーム
`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。
ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

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

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

.ec-input input[type=radio],
.ec-halfInput input[type=radio],
.ec-numberInput input[type=radio],
.ec-zipInput input[type=radio],
.ec-telInput input[type=radio],
.ec-select input[type=radio],
.ec-birth input[type=radio],
.ec-input input[type=checkbox],
.ec-halfInput input[type=checkbox],
.ec-numberInput input[type=checkbox],
.ec-zipInput input[type=checkbox],
.ec-telInput input[type=checkbox],
.ec-select input[type=checkbox],
.ec-birth input[type=checkbox] {
  margin: 0.2667vw \9 0 0;
  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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.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: 9.0667vw;
  padding: 1.6vw 3.2vw;
  font-size: 4.2667vw;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 0.2667vw solid #ccc;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 0.8vw;
}

.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 0.2667vw 0.2667vw rgba(0, 0, 0, 0.075), 0 0 2.1333vw rgba(102, 175, 233, 0.6);
}

.ec-input input::-moz-placeholder,
.ec-halfInput input::-moz-placeholder,
.ec-numberInput input::-moz-placeholder,
.ec-zipInput input::-moz-placeholder,
.ec-telInput input::-moz-placeholder,
.ec-select input::-moz-placeholder,
.ec-birth input::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.ec-input input:-ms-input-placeholder,
.ec-halfInput input:-ms-input-placeholder,
.ec-numberInput input:-ms-input-placeholder,
.ec-zipInput input:-ms-input-placeholder,
.ec-telInput input:-ms-input-placeholder,
.ec-select input:-ms-input-placeholder,
.ec-birth input:-ms-input-placeholder {
  color: #999;
}

.ec-input input::-webkit-input-placeholder,
.ec-halfInput input::-webkit-input-placeholder,
.ec-numberInput input::-webkit-input-placeholder,
.ec-zipInput input::-webkit-input-placeholder,
.ec-telInput input::-webkit-input-placeholder,
.ec-select input::-webkit-input-placeholder,
.ec-birth input::-webkit-input-placeholder {
  color: #999;
}

.ec-input input::-ms-expand,
.ec-halfInput input::-ms-expand,
.ec-numberInput input::-ms-expand,
.ec-zipInput input::-ms-expand,
.ec-telInput input::-ms-expand,
.ec-select input::-ms-expand,
.ec-birth input::-ms-expand {
  border: 0;
  background-color: transparent;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
.ec-input input[readonly],
.ec-halfInput input[readonly],
.ec-numberInput input[readonly],
.ec-zipInput input[readonly],
.ec-telInput input[readonly],
.ec-select input[readonly],
.ec-birth input[readonly],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
  background-color: #eeeeee;
  opacity: 1;
}

.ec-input input[disabled],
.ec-halfInput input[disabled],
.ec-numberInput input[disabled],
.ec-zipInput input[disabled],
.ec-telInput input[disabled],
.ec-select input[disabled],
.ec-birth input[disabled],
fieldset[disabled] .ec-input input,
fieldset[disabled] .ec-halfInput input,
fieldset[disabled] .ec-numberInput input,
fieldset[disabled] .ec-zipInput input,
fieldset[disabled] .ec-telInput input,
fieldset[disabled] .ec-select input,
fieldset[disabled] .ec-birth input {
  cursor: not-allowed;
}

.ec-input select,
.ec-halfInput select,
.ec-numberInput select,
.ec-zipInput select,
.ec-telInput select,
.ec-birth select {
  display: block;
  width: 100%;
  height: 10.6667vw;
  padding: 1.6vw 3.2vw;
  font-size: 4.2667vw;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 0.2667vw solid #ccc;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 0.8vw;
}

.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 0.2667vw 0.2667vw rgba(0, 0, 0, 0.075), 0 0 2.1333vw rgba(102, 175, 233, 0.6);
}

.ec-input select::-moz-placeholder,
.ec-halfInput select::-moz-placeholder,
.ec-numberInput select::-moz-placeholder,
.ec-zipInput select::-moz-placeholder,
.ec-telInput select::-moz-placeholder,
.ec-select select::-moz-placeholder,
.ec-birth select::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.ec-input select:-ms-input-placeholder,
.ec-halfInput select:-ms-input-placeholder,
.ec-numberInput select:-ms-input-placeholder,
.ec-zipInput select:-ms-input-placeholder,
.ec-telInput select:-ms-input-placeholder,
.ec-select select:-ms-input-placeholder,
.ec-birth select:-ms-input-placeholder {
  color: #999;
}

.ec-input select::-webkit-input-placeholder,
.ec-halfInput select::-webkit-input-placeholder,
.ec-numberInput select::-webkit-input-placeholder,
.ec-zipInput select::-webkit-input-placeholder,
.ec-telInput select::-webkit-input-placeholder,
.ec-select select::-webkit-input-placeholder,
.ec-birth select::-webkit-input-placeholder {
  color: #999;
}

.ec-input select::-ms-expand,
.ec-halfInput select::-ms-expand,
.ec-numberInput select::-ms-expand,
.ec-zipInput select::-ms-expand,
.ec-telInput select::-ms-expand,
.ec-select select::-ms-expand,
.ec-birth select::-ms-expand {
  border: 0;
  background-color: transparent;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
.ec-input select[readonly],
.ec-halfInput select[readonly],
.ec-numberInput select[readonly],
.ec-zipInput select[readonly],
.ec-telInput select[readonly],
.ec-select select[readonly],
.ec-birth select[readonly],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
  background-color: #eeeeee;
  opacity: 1;
}

.ec-input select[disabled],
.ec-halfInput select[disabled],
.ec-numberInput select[disabled],
.ec-zipInput select[disabled],
.ec-telInput select[disabled],
.ec-select select[disabled],
.ec-birth select[disabled],
fieldset[disabled] .ec-input select,
fieldset[disabled] .ec-halfInput select,
fieldset[disabled] .ec-numberInput select,
fieldset[disabled] .ec-zipInput select,
fieldset[disabled] .ec-telInput select,
fieldset[disabled] .ec-select select,
fieldset[disabled] .ec-birth select {
  cursor: not-allowed;
}

.ec-input textarea,
.ec-halfInput textarea,
.ec-numberInput textarea,
.ec-zipInput textarea,
.ec-telInput textarea,
.ec-select textarea,
.ec-birth textarea {
  display: block;
  width: 100%;
  height: 9.0667vw;
  padding: 1.6vw 3.2vw;
  font-size: 3.2vw;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 0.2667vw solid #ccc;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 0.8vw;
}

.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 0.2667vw 0.2667vw rgba(0, 0, 0, 0.075), 0 0 2.1333vw rgba(102, 175, 233, 0.6);
}

.ec-input textarea::-moz-placeholder,
.ec-halfInput textarea::-moz-placeholder,
.ec-numberInput textarea::-moz-placeholder,
.ec-zipInput textarea::-moz-placeholder,
.ec-telInput textarea::-moz-placeholder,
.ec-select textarea::-moz-placeholder,
.ec-birth textarea::-moz-placeholder {
  color: #999;
  opacity: 1;
}

.ec-input textarea:-ms-input-placeholder,
.ec-halfInput textarea:-ms-input-placeholder,
.ec-numberInput textarea:-ms-input-placeholder,
.ec-zipInput textarea:-ms-input-placeholder,
.ec-telInput textarea:-ms-input-placeholder,
.ec-select textarea:-ms-input-placeholder,
.ec-birth textarea:-ms-input-placeholder {
  color: #999;
}

.ec-input textarea::-webkit-input-placeholder,
.ec-halfInput textarea::-webkit-input-placeholder,
.ec-numberInput textarea::-webkit-input-placeholder,
.ec-zipInput textarea::-webkit-input-placeholder,
.ec-telInput textarea::-webkit-input-placeholder,
.ec-select textarea::-webkit-input-placeholder,
.ec-birth textarea::-webkit-input-placeholder {
  color: #999;
}

.ec-input textarea::-ms-expand,
.ec-halfInput textarea::-ms-expand,
.ec-numberInput textarea::-ms-expand,
.ec-zipInput textarea::-ms-expand,
.ec-telInput textarea::-ms-expand,
.ec-select textarea::-ms-expand,
.ec-birth textarea::-ms-expand {
  border: 0;
  background-color: transparent;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
.ec-input textarea[readonly],
.ec-halfInput textarea[readonly],
.ec-numberInput textarea[readonly],
.ec-zipInput textarea[readonly],
.ec-telInput textarea[readonly],
.ec-select textarea[readonly],
.ec-birth textarea[readonly],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
  background-color: #eeeeee;
  opacity: 1;
}

.ec-input textarea[disabled],
.ec-halfInput textarea[disabled],
.ec-numberInput textarea[disabled],
.ec-zipInput textarea[disabled],
.ec-telInput textarea[disabled],
.ec-select textarea[disabled],
.ec-birth textarea[disabled],
fieldset[disabled] .ec-input textarea,
fieldset[disabled] .ec-halfInput textarea,
fieldset[disabled] .ec-numberInput textarea,
fieldset[disabled] .ec-zipInput textarea,
fieldset[disabled] .ec-telInput textarea,
fieldset[disabled] .ec-select textarea,
fieldset[disabled] .ec-birth textarea {
  cursor: not-allowed;
}

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

.ec-input input,
.ec-halfInput input,
.ec-numberInput input,
.ec-zipInput input,
.ec-telInput input,
.ec-select input,
.ec-birth input {
  height: 10.6667vw;
  margin-bottom: 2.6667vw;
}

.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: 26.6667vw;
}

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

.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: 1.3333vw;
  border-color: #cf3f34;
  background: #fdf1f0;
}

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

/*
フォーム（text２つ）
姓名など2つ入力させたい入力項目で使用します。
入力フォームを半分で用意したいときにも利用可能です。
ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

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

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

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

/*
数量ボタン
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [商品詳細画面　数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)

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

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

/*
郵便番号フォーム
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面　郵便番号部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.4
*/
.ec-zipInput {
  display: inline-block;
}

.ec-zipInput input {
  display: inline-block;
  text-align: left;
  width: auto;
  max-width: 8em;
  font-size: 4.2667vw;
}

.ec-zipInput span {
  display: inline-block;
  padding: 0 1.3333vw 0 0.8vw;
  margin-left: 1.3333vw;
}

.ec-zipInputHelp {
  display: inline-block;
  margin-left: 2.6667vw;
  margin-bottom: 4.2667vw;
  vertical-align: baseline;
  line-height: 0;
}

.ec-zipInputHelp .ec-zipInputHelp__icon {
  display: inline-block;
  margin-top: -2.6667vw;
  width: 5.3333vw;
  height: 5.3333vw;
  background: #333333;
  border-radius: 50%;
  font-size: 3.4667vw;
  position: relative;
  top: -1.6vw;
}

.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
  width: 1em;
  height: 1em;
  position: relative;
  left: 0.8vw;
  top: 0.8vw;
}

.ec-zipInputHelp span {
  display: inline-block;
  color: #0092c4;
  vertical-align: 0.8vw;
}

.ec-zipAuto {
  margin-bottom: 4.2667vw;
}

.ec-zipAuto .ec-inlineBtn {
  font-weight: normal;
}

/*
電話番号ボタン
数量を表示するための小さなコンポーネントです。
内部に input 要素を配置してコーディングします。
ex [会員情報編集画面　電話番号部分](http://demo3.ec-cube.net/mypage/change)

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

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

/*
フォーム部品(その他)
フォーム部品でテキストの入力以外の動作要素を定義します。

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

Styleguide 3.2
*/
/*
ラジオ（水平）
水平に並ぶラジオボタンフィールドです。
各要素をlabelでくくって、コーディングします。
ex [新規会員登録画面　性別選択部分](http://demo3.ec-cube.net/entry)

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

Styleguide 3.2.2
*/
.ec-radio label {
  margin-right: 5.3333vw;
}

.ec-radio input {
  margin-right: 2.6667vw;
  margin-bottom: 2.6667vw;
}

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

/*
ラジオ(垂直)
垂直に並ぶラジオボタンフィールドです。
各要素をlabelでくくって、コーディングします。
ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping)

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

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

.ec-blockRadio span {
  padding-left: 2.6667vw;
  font-weight: normal;
}

/*
セレクトボックス
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [新規会員登録画面　都道府県選択部分](http://demo3.ec-cube.net/entry)

Markup:
.ec-select
  select
    option 都道府県を選択
    option 北海道
    option 青森県
    option 岩手県
    option ...
.ec-select
  select
    option 選択して下さい
    option 公務員
    option コンサルタント
    option コンピュータ関連技術職
    option コンピュータ関連以外の技術職
    option ...

Styleguide 3.2.4
*/
.ec-selects {
  margin-bottom: 5.3333vw;
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-select select {
  display: inline-block;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.ec-select select:focus {
  box-shadow: none;
}

.ec-select label {
  margin-right: 2.6667vw;
  font-weight: bold;
}

.ec-select label:nth-child(3) {
  margin-left: 2.6667vw;
  font-weight: bold;
}

.ec-select__delivery {
  display: block;
  margin-right: 4.2667vw;
}

.ec-select__time {
  display: block;
}

/*
生年月日選択
数量を表示するための小さなコンポーネントです。
数値表示に最適化するため、数字は右端揃えで表示されます。
ex [新規会員登録画面　生年月日選択部分](http://demo3.ec-cube.net/entry)

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

Styleguide 3.2.5
*/
.ec-birth select {
  display: inline-block;
  width: auto;
  margin: 0 0 2.6667vw;
  background-color: #f8f8f8;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}

.ec-birth select:focus {
  box-shadow: none;
}

.ec-birth span {
  margin-left: 1.3333vw;
}

.ec-checkbox label {
  display: inline-block;
}

.ec-checkbox input {
  margin-bottom: 2.6667vw;
}

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

.ec-blockCheckbox label {
  display: block;
}

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

.ec-icon img {
  max-width: 21.3333vw;
  max-height: 21.3333vw;
}

/*
グリッド
画面を12分割し、グリッドレイアウトに対応するためのスタイルです。

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


Styleguide 5.1
*/
/*
2分割グリッド
画面 ２分割の　グリッドです。
Bootstrap の col-sm-6 相当のグリッドを提供します。

Markup:
.ec-grid2
  .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 0.2667vw solid rgba(86,61,124,.2);height:13.3333vw;") .ec-grid2__cell
  .ec-grid2__cell(style="background-color: rgba(86,61,124,.15);border: 0.2667vw solid rgba(86,61,124,.2);height:13.3333vw;") .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: 0.2667vw;
}

.ec-grid2 .ec-grid2__cell2 {
  position: relative;
  min-height: 0.2667vw;
}

/*
3分割グリッド
画面　３分割の　グリッドです。

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

Styleguide 5.1.2
*/
.ec-grid3 {
  display: block;
  margin: 0;
}

.ec-grid3 .ec-grid3__cell {
  position: relative;
  min-height: 0.2667vw;
}

.ec-grid3 .ec-grid3__cell2 {
  position: relative;
  min-height: 0.2667vw;
}

.ec-grid3 .ec-grid3__cell3 {
  position: relative;
  min-height: 0.2667vw;
}

/*
4分割グリッド
画面　４分割の　グリッドです。

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

Styleguide 5.1.3
*/
.ec-grid4 {
  display: block;
  margin: 0;
}

.ec-grid4 .ec-grid4__cell {
  position: relative;
  min-height: 0.2667vw;
}

/*
6分割グリッド
2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。

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

Styleguide 5.1.4
*/
.ec-grid6 {
  display: block;
  margin: 0;
}

.ec-grid6 .ec-grid6__cell {
  position: relative;
  min-height: 0.2667vw;
}

.ec-grid6 .ec-grid6__cell2 {
  position: relative;
  min-height: 0.2667vw;
}

.ec-grid6 .ec-grid6__cell3 {
  position: relative;
  min-height: 0.2667vw;
}

.ec-off1Grid {
  margin: 0;
}

.ec-off1Grid .ec-off1Grid__cell {
  margin: 0;
}

/*
中央寄せグリッド 8/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の８グリッドです

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

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

.ec-off2Grid .ec-off2Grid__cell {
  margin: 0;
}

/*
中央寄せグリッド 6/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の６グリッドです

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

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

.ec-off3Grid .ec-off3Grid__cell {
  margin: 0;
}

/*
中央寄せグリッド 4/12
左右にマージンを持つ、中央寄せグリッドを提供します。１２分の４グリッドです

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


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

.ec-off4Grid .ec-off4Grid__cell {
  margin: 0;
}

/*
グリッドオプション
グリッドのセルに対して「左寄せ」「中央寄せ」「右寄せ」のオプションを付与することができます。

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

Styleguide 5.1.9
*/
/*
グリッドセルの左寄せ
.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

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

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

/*
グリッドセルの右寄せ
.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

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

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

.ec-grid--center {
  justify-content: center;
}

/*
レイアウト
様々なレイアウトを変更する為のスタイル群です。

Styleguide 5.2
*/
/*
画像レイアウト
画像とテキストを水平に並べるレイアウトです。
画像は20%で表示されます。
ex [注文履歴 ログイン後→注文履歴ボタンを押下](http://demo3.ec-cube.net/mypage)

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

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


Styleguide 5.2.1
*/
.ec-imageGrid {
  display: table;
  border-top: 0.2667vw dotted #ccc;
  width: 100%;
}

.ec-imageGrid .ec-imageGrid__img {
  display: table-cell;
  padding: 2.6667vw;
  width: 26.6667vw;
}

.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: 2.6667vw;
}

.ec-imageGrid .ec-imageGrid__content p {
  margin-bottom: 0;
}

/*
ゲスト購入
ゲスト購入ボタンとそのフォームを表示します。
ex [ゲスト購入画面](http://demo3.ec-cube.net/shopping/login)

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

Styleguide 6.1.2
*/
.ec-guest {
  display: table;
  margin: 0;
  padding: 13%;
  height: auto;
  box-sizing: border-box;
  background: #f3f4f4;
}

.ec-guest .ec-guest__inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.ec-guest .ec-guest__inner p {
  margin-bottom: 4.2667vw;
}

.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: 18.6667vw;
  text-align: center;
}

/*
商品掲載
トップページに商品掲載するスタイルガイド群です。

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


Styleguide 7.1
*/
/*
商品アイテム（商品紹介B）

３項目横並びの商品アイテムを表示します。
必要に応じて商品詳細や、キャッチコピーなどを添えることが出来ます。

ex [トップページ　商品紹介部分](http://demo3.ec-cube.net/)

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

Styleguide 7.1.1
*/
.ec-displayB {
  margin-bottom: 6.4vw;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.ec-displayB .ec-displayB__cell {
  width: 100%;
  margin-bottom: 4.2667vw;
}

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

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

.ec-displayB .ec-displayB__img {
  margin-bottom: 4vw;
}

.ec-displayB .ec-displayB__catch {
  margin-bottom: 4vw;
  text-decoration: none;
  font-weight: bold;
  color: #9a947e;
}

.ec-displayB .ec-displayB__comment {
  margin-bottom: 3.7333vw;
  text-decoration: none;
  color: #333333;
  font-size: 3.7333vw;
}

.ec-displayB .ec-displayB__link {
  text-decoration: none;
  font-weight: bold;
  color: #9a947e;
}

/*
商品アイテム（商品紹介C）
４項目横並びの商品アイテムを表示します。
ex [トップページ　商品紹介部分](http://demo3.ec-cube.net/)

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

Styleguide 7.1.2
*/
.ec-displayC {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 6.4vw;
}

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

.ec-displayC .ec-displayC__img {
  display: block;
  width: 100%;
  margin-bottom: 4vw;
}

.ec-displayC .ec-displayC__catch {
  display: block;
  width: 100%;
  font-weight: bold;
  color: #9a947e;
}

.ec-displayC .ec-displayC__title {
  display: block;
  width: 100%;
  color: #333333;
}

.ec-displayC .ec-displayC__price {
  display: block;
  width: 100%;
  font-weight: bold;
  color: #333333;
}

.ec-displayC .ec-displayC__price--sp {
  display: block;
  width: 100%;
  font-weight: bold;
  color: #de5d50;
}

/*
商品アイテム（商品紹介D）

６項目横並びの商品アイテムを表示します。

ex [トップページ　商品紹介部分](http://demo3.ec-cube.net/)

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

Styleguide 7.1.3
*/
.ec-displayD {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
}

.ec-displayD .ec-displayD__cell {
  width: 30%;
  margin-bottom: 2.1333vw;
}

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

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

/*
検索・一覧表示
検索欄や、一覧表示に使用するスタイル群です。

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

Styleguide 7.2
*/
/*
トピックパス
検索結果で表示されるトピックパスのスタイルです。
ex [商品一覧ページ　横並びリスト部分](http://demo3.ec-cube.net/products/list?category_id=&name=)

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

Styleguide 7.2.1
*/
.ec-topicpath {
  letter-spacing: -0.4em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
  border-top: 0.2667vw solid #ccc;
  border-bottom: 0.2667vw dotted #ccc;
  padding: 2.6667vw;
  list-style: none;
  overflow: hidden;
  font-size: 3.2vw;
  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: 4.2667vw;
  text-align: center;
  position: relative;
  letter-spacing: normal;
}

.ec-topicpath .ec-topicpath__item--active {
  font-weight: bold;
}

.ec-topicpath .ec-topicpath__item--active a {
  color: inherit;
  text-decoration: none;
}

.ec-topicpath .ec-topicpath__item--active a:hover {
  text-decoration: none;
}

/*
ページャ
検索結果で表示される商品一覧のスタイルです。
ex [商品一覧ページ　ページャ部分](http://demo3.ec-cube.net/products/list?category_id=&name=)

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

Styleguide 7.2.2
*/
.ec-pager {
  list-style: none;
  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: 7.7333vw;
  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: 1.3333vw 3.2vw;
  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;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1;
}

/*
カート
ショッピングカートに関するスタイルです。

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


Styleguide 7.3
*/
/*
カートヘッダ
購入完了までの手順や、現在の状態を表示します。
ul 要素を用いたリスト要素としてマークアップします。
ex [カートページ　ヘッダ部分](http://demo3.ec-cube.net/cart)

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

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

Styleguide 7.3.1
*/
.ec-progress {
  margin: 0 auto;
  padding: 2.1333vw 0 4.2667vw;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 160vw;
  list-style: none;
}

.ec-progress .ec-progress__item {
  display: table-cell;
  position: relative;
  font-size: 3.7333vw;
  text-align: center;
  font-weight: bold;
  z-index: 10;
}

.ec-progress .ec-progress__item:after {
  content: "";
  position: absolute;
  display: block;
  background: #333333;
  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: 8vw;
  width: 8vw;
  height: 8vw;
  margin-bottom: 1.3333vw;
  font-size: 3.2vw;
  background: #333333;
  color: #fff;
  top: 0;
  left: 4.8vw;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
}

.ec-progress .ec-progress__label {
  font-size: 3.2vw;
}

.ec-progress .is-complete .ec-progress__number {
  background: #5cb1b1;
}

.ec-progress .is-complete .ec-progress__label {
  color: #5cb1b1;
}

/*
カートナビゲーション
カートナビゲーションを表示します。　カートに追加された商品の個数も表示します。
ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

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

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


Styleguide 7.3.5
*/
.ec-cartNavi {
  display: inline-block;
  padding: 2.6667vw 0 0 5.3333vw;
  width: auto;
  color: black;
  background: transparent;
}

.ec-cartNavi .ec-cartNavi__icon {
  display: inline-block;
  font-size: 5.3333vw;
  opacity: 1;
  visibility: visible;
  -webkit-animation: fadeIn 200ms linear 0s;
  animation: fadeIn 200ms linear 0s;
  position: relative;
}

.ec-cartNavi .ec-cartNavi__badge {
  display: inline-block;
  border-radius: 26666.4vw;
  box-sizing: border-box;
  padding: 1.3333vw;
  height: 4.5333vw;
  font-size: 2.6667vw;
  line-height: 0.7;
  vertical-align: top;
  color: #fff;
  text-align: left;
  white-space: nowrap;
  background-color: #de5d50;
  position: absolute;
  left: 60%;
  top: -2.6667vw;
}

.ec-cartNavi .ec-cartNavi__price {
  display: none;
}

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

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

/*
カートナビゲーションのポップアップ(商品詳細)
カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。
ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

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

Styleguide 7.3.6
*/
.ec-cartNaviIsset {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 4.2667vw;
  z-index: 20;
  position: absolute;
  right: 0;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cart {
  border-bottom: 0.2667vw solid #e8e8e8;
  margin-bottom: 4.2667vw;
  padding-bottom: 8.5333vw;
}

.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: 4.2667vw;
  text-align: left;
  box-sizing: border-box;
}

.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
  color: #fff;
  margin-bottom: 2.1333vw;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
  margin-bottom: 2.1333vw;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
  font-weight: bold;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
  display: inline-block;
  font-size: 3.2vw;
  font-weight: normal;
  margin-left: 0.5333vw;
}

.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
  font-size: 3.7333vw;
}

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

/*
カートナビゲーションのポップアップ(商品なし)
カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。
ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

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

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


Styleguide 7.3.7
*/
.ec-cartNaviNull {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 4.2667vw;
  z-index: 3;
  position: absolute;
  right: 0;
}

.ec-cartNaviNull .ec-cartNaviNull__message {
  border: 0.2667vw solid #d9d9d9;
  padding: 4.2667vw 0;
  font-size: 4.2667vw;
  font-weight: bold;
  color: #fff;
  background-color: #f99;
}

.ec-cartNaviNull .ec-cartNaviNull__message p {
  margin: 0;
}

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

/*
総計
会計時の合計金額、総計を表示します。
ex [カートページ　統計部分](http://demo3.ec-cube.net/cart)

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

Styleguide 7.3.8
*/
.ec-totalBox {
  background: #f3f3f3;
  padding: 4.2667vw;
  margin-bottom: 4.2667vw;
}

.ec-totalBox .ec-totalBox__spec {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2.1333vw;
}

.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: 0.2667vw dotted #ccc;
  padding: 2.1333vw 0;
  text-align: right;
  font-size: 3.7333vw;
  font-weight: bold;
}

.ec-totalBox .ec-totalBox__paymentTotal {
  padding: 2.1333vw 0;
  text-align: right;
  font-size: 3.7333vw;
  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: 4.2667vw;
  font-size: 4.2667vw;
  font-weight: bold;
}

.ec-totalBox .ec-totalBox__taxLabel {
  margin-left: 2.1333vw;
  font-size: 3.2vw;
}

.ec-totalBox .ec-totalBox__taxRate {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 2.1333vw;
  font-size: 2.6667vw;
}

.ec-totalBox .ec-totalBox__taxRate dt {
  font-weight: normal;
  text-align: left;
  margin-right: 2.1333vw;
}

.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: 4.8vw 5.3333vw 2.6667vw;
  margin-bottom: 2.6667vw;
  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: 4.2667vw;
  font-weight: bold;
}

.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
  margin-top: 2.1333vw;
}

/*
お知らせ
新着情報やバナーなどの掲載項目を紹介していきます。

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

Styleguide 8.1
*/
/*
新着情報
新着情報の掲載をします。
ex [トップページ　新着情報部分](http://demo3.ec-cube.net/)

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

Styleguide 8.1.1
*/
.ec-news {
  margin-bottom: 4.2667vw;
  background: #f8f8f8;
}

.ec-news .ec-news__title {
  font-weight: bold;
  padding: 2.1333vw;
  font-size: 4.2667vw;
  text-align: center;
}

.ec-news .ec-news__items {
  padding: 0;
  list-style: none;
  border-top: 0.2667vw dotted #ccc;
}

/*
折りたたみ項目
折りたたみ項目を掲載します。
ex [トップページ　折りたたみ項目部分](http://demo3.ec-cube.net/)

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

Styleguide 8.1.2
*/
.ec-newsline {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 0 4.2667vw;
}

.ec-newsline .ec-newsline__info {
  width: 100%;
  padding: 4.2667vw 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: 2.6667vw;
  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: 6.6667vw;
  height: 6.6667vw;
  min-width: 6.6667vw;
  min-height: 6.6667vw;
}

.ec-newsline .ec-newsline__description {
  width: 100%;
  height: 0;
  transition: all 0.2s ease-out;
}

.ec-newsline.is_active .ec-newsline__description {
  height: auto;
  transition: all 0.2s ease-out;
  padding-bottom: 4.2667vw;
}

.ec-newsline.is_active .ec-icon img {
  transform: rotateX(180deg);
}

/*
マイページ
マイページで利用するためのスタイルガイド群です。

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


Styleguide 9.1
*/
/*
マイページ
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ　メニューリスト部分](http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.1
*/
/* .ec-navlistRole .ec-navlistRole__navlist {
    display: flex;
    flex-wrap: wrap;
    border-color: #D0D0D0;
    border-style: solid;
    border-width: 0.2667vw 0 0 0.2667vw;
    margin-bottom: 8.5333vw;
    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 0.2667vw 0.2667vw 0;
    text-align: center;
    font-weight: bold;
}

.ec-navlistRole .ec-navlistRole__item a:hover {
    background: #f5f7f8;
}
.ec-navlistRole .active a {
    color: #DE5D50;
} */
/*
マイページ（お気に入り機能無効）
マイページで表示するメニューリストです。
ul を利用したリスト要素で記述します。
ex [マイページ　メニューリスト部分](http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.2
*/
/*
Welcome メッセージ
マイページで表示するログイン名の表示コンポーネントです。
ex [マイページ　メニューリスト下部分](http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.3
*/
.ec-welcomeMsg {
  margin: 1em 0;
  padding-left: 4.2667vw;
  padding-right: 4.2667vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  padding-bottom: 8.5333vw;
  text-align: center;
  border-bottom: 0.2667vw dotted #ccc;
}

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

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

.ec-welcomeMsg textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}

.ec-welcomeMsg img {
  max-width: 100%;
}

.ec-welcomeMsg html {
  box-sizing: border-box;
}

.ec-welcomeMsg *,
.ec-welcomeMsg *::before,
.ec-welcomeMsg *::after {
  box-sizing: inherit;
}

.ec-welcomeMsg img {
  width: 100%;
}

/*
お気に入り一覧
お気に入り一覧で表示するアイテムの表示コンポーネントです。
ex [マイページ　お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite)

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

Styleguide 9.1.4
*/
.ec-favoriteRole .ec-favoriteRole__header {
  margin-bottom: 4.2667vw;
  padding: 2vw 4vw 0;
}

.ec-favoriteRole .ec-favoriteRole__itemList {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

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

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

.ec-favoriteRole .ec-favoriteRole__item {
  margin-bottom: 2.1333vw;
  width: 47.5%;
  position: relative;
  box-sizing: border-box;
  padding: 2.6667vw;
}

.ec-favoriteRole .ec-favoriteRole__item-image {
  height: 40vw;
  margin-bottom: 2.6667vw;
  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: 2.6667vw;
  top: 2.6667vw;
}

.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: 2.1333vw;
}

.ec-favoriteRole .ec-favoriteRole__itemTitle {
  margin-bottom: 0.5333vw;
}

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

/*
標準セクション
通常のコンテナブロックです。
ex [商品詳細ページ　コンテナ](http://demo3.ec-cube.net/products/detail/33)

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

Styleguide 11.1
*/
.ec-role:after {
  content: " ";
  display: table;
}

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

.ec-role textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}

.ec-role img {
  max-width: 100%;
}

.ec-role html {
  box-sizing: border-box;
}

.ec-role *,
.ec-role *::before,
.ec-role *::after {
  box-sizing: inherit;
}

.ec-role img {
  width: 100%;
}

/*
マイページセクション
マイページ専用のコンテナブロックです。
ex [マイページ　コンテナ](http://demo3.ec-cube.net/mypage)

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

Styleguide 11.1.2
*/
.ec-mypageRole: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%;
}

/*
ヘッダー

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

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

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

Styleguide 11.2
*/
.ec-layoutRole {
  width: 100%;
  transition: transform 0.3s;
  background: #fff;
}

.ec-layoutRole .ec-layoutRole__contentTop {
  padding: 0;
}

.ec-layoutRole .ec-layoutRole__contents {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

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

/*
ヘッダー：カテゴリナビ
ヘッダー内で使用されている商品のカテゴリ一覧として使用します。
`li`の中に`ul > li`要素を入れることで、階層を深くする事ができます。

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

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

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
  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: 0.2667vw solid #e8e8e8;
  margin: 0;
  padding: 4.2667vw;
  height: auto;
  color: #2e3233;
  font-size: 4.2667vw;
  font-weight: bold;
  line-height: 5.3333vw;
  text-decoration: none;
  text-align: left;
  background: #fff;
  border-bottom: 0.2667vw solid #e8e8e8;
}

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

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

.ec-itemNav__nav li ul li a {
  border-bottom: 0.2667vw solid #e8e8e8;
  padding: 4.2667vw 5.8667vw 4.2667vw 4.2667vw;
  font-size: 4.2667vw;
  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;
}

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

Styleguide 11.2.6
*/
.ec-drawerRole {
  overflow-y: scroll;
  background: black;
  width: 69.3333vw;
  height: 100vh;
  transform: translateX(-80vw);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: z-index 0ms 1ms;
}

.ec-drawerRole .ec-headerSearchArea {
  padding: 5.3333vw 2.6667vw;
  width: 100%;
  background: #f8f8f8;
}

.ec-drawerRole .ec-headerSearch {
  padding: 4.2667vw 2.1333vw 6.9333vw;
  background: #ebebeb;
  color: #636378;
}

.ec-drawerRole .ec-headerSearch select {
  width: 100% !important;
}

.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
  border-top: 0.2667vw solid #cccccc;
  border-bottom: 0.2667vw solid #cccccc;
  padding: 1em 2.6667vw;
  font-size: 4.2667vw;
  font-weight: bold;
  color: black;
  background: #f8f8f8;
}

.ec-drawerRole .ec-headerCategoryArea p {
  margin-top: 0;
  margin-bottom: 0;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
  border-bottom: 0.2667vw solid #ccc;
  border-bottom: 0.2667vw solid #ccc;
  color: black;
  font-weight: normal;
  background: #f8f8f8;
}

.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
  border-bottom: 0.2667vw solid #ccc;
  padding-left: 5.3333vw;
  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: 10.6667vw;
  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: 16vw;
  font-weight: normal;
}

.ec-drawerRole .ec-headerLinkArea {
  background: black;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
  border-top: 0.2667vw solid #ccc;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
  display: block;
  border-bottom: 0.2667vw solid #ccc;
  padding: 4vw 5.3333vw;
  font-size: 4.2667vw;
  font-weight: bold;
  color: white;
}

.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
  display: inline-block;
  width: 7.4667vw;
  font-size: 4.5333vw;
}

.ec-drawerRoleClose {
  display: none;
  cursor: pointer;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 2.6667vw;
  width: 10.6667vw;
  height: 10.6667vw;
  font-size: 4.8vw;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 2.6667vw;
  left: 72vw;
  z-index: 1000;
}

.ec-drawerRoleClose .fas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

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

.ec-overlayRole {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  background: transparent;
  transform: translateX(0);
  transition: all 0.3s;
  visibility: hidden;
}

.have_curtain .ec-overlayRole {
  display: block;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  visibility: visible;
}

/*
ヘッダー：test
test

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

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

/*
フッター
全ページで使用されるフッターのプロジェクトコンポーネントです。
ex [トップページ　フッター](http://demo3.ec-cube.net/)

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

Styleguide 11.3
*/
.ec-footerRole {
  margin-top: 8vw;
  background: #f0e8df;
}

.ec-footerRole .ec-footer-top-link img {
  width: auto;
}

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

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-footer-bottom {
  background: #333;
  padding: 6vw 6vw 18vw;
}

.ec-footerNavi {
  padding: 0 0 1vw;
  color: white;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ec-footerNavi .ec-footerNavi__link {
  display: inline-block;
}

.footerInfo-block {
  margin-top: 0;
}

.ec-footerNavi .ec-footerNavi__link a {
  position: relative;
  font-size: 3.2vw;
  color: #333;
  text-decoration: none;
  margin-left: 0;
  margin-right: 0;
}

.ec-footer-top .ec-footerNavi .ec-footerNavi__link:nth-child(1) a {
  margin-left: 5vw;
}

.ec-footer-top .ec-footerNavi .ec-footerNavi__link:nth-child(3) a {
  margin-right: 7vw;
}

.ec-footerNavi .ec-footerNavi__link a:hover {
  opacity: 0.8;
  text-decoration: none;
  font-size: 3.2vw;
}

.ec-footer-top {
  padding: 2vw 0;
}

.footerInfo-block .ft-des {
  font-size: 2.5vw;
}

.footerInfo-block .ft-title {
  font-size: 4vw;
}

.footerInfo-block .ft-title::before {
  content: "";
  background-color: #c3b3a1;
  width: 1.6vw;
  height: 1.7vw;
  vertical-align: middle;
  margin-right: 1.3333vw;
  display: inline-block;
}

.footerInfo-block a {
  text-decoration: underline;
}

.footerInfo-block {
  width: 100%;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 17px;
}

.ec-footerRole__box:nth-of-type(3) .footerInfo-block:nth-of-type(2) {
  border-bottom: none;
}

.footerInfo-block .mb15 {
  margin-bottom: 1rem;
}

.logo-ft {
  height: 13.3333vw;
  width: 42%;
  position: initial;
}

.logo-ft .penguin img {
  width: 23vw;
}

.ec-footer-bottom .ec-footerTitle__copyright {
  margin: 0 auto;
  font-size: 3.2vw;
}

.footerAboutactive {
  background: #f0e8df;
  padding: 6vw 6vw;
}

.footerAboutactive .footerAboutactiveBlock {
  margin-bottom: 4vw;
}

.footerAboutactive .footerAboutactiveTitle {
  font-size: 3.5vw;
  font-weight: bold;
  margin-bottom: 2vw;
  text-align: center;
}

.footerAboutactive .footerAboutactiveText {
  font-size: 3.4vw;
}

.footerAboutactive .footerAboutactiveSubTitle {
  font-size: 3.2vw;
  letter-spacing: 0.06em;
  font-weight: bold;
  margin-bottom: 2vw;
  text-align: center;
}

.footerAboutactiveSubBox {
  margin-bottom: 0;
}

.footerAboutactive .footerAboutactiveSubBox dd {
  margin-bottom: 2vw;
}

.footerAboutactive .footerAboutactiveSubBox dd:last-child {
  margin-bottom: 0;
}

.footerAboutactive .footerAboutactiveSubBox dd a {
  background-color: #f5f5f5;
  padding: 3vw 0;
  display: inline-block;
  border-radius: 5px;
  width: 100%;
  font-size: 3vw;
  font-weight: bold;
  letter-spacing: 0.04em;
  line-height: 1em;
  color: #333;
  text-align: center;
}

/*
フッタータイトル
フッタープロジェクトで使用するタイトル用のコンポーネントです。

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: 10.6667vw 0 16vw;
  text-align: center;
  color: white;
}

.ec-footerTitle .ec-footerTitle__logo {
  display: block;
  margin-bottom: 2.6667vw;
  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: 5.8667vw;
  color: inherit;
}

.ec-footerTitle .ec-footerTitle__logo:hover a {
  opacity: 0.8;
  text-decoration: none;
}

.ec-footerTitle .ec-footerTitle__copyright {
  font-size: 2.6667vw;
}

.ec-footer-bottom .ec-footerTitle__copyright {
  font-size: 2.75vw;
  text-align: left;
}

.ec-footer-bottom .ec-footerTitle__copyright a {
  font-size: 2.75vw;
}

.footerCompanyOverview {
  color: #fff;
  font-size: 3.2vw;
  letter-spacing: 0.05em;
  line-height: 1.7;
  margin-bottom: 5vw;
}

.footerCompanyOverviewStorong {
  font-size: 3.8vw;
}

.footerInfo-block .ft-des {
  line-height: 1.65em;
  font-size: 3.2vw;
}

.footerInfo-block .ft-des .ftdesLink {
  position: relative;
}

.footerInfo-block .ft-des .ftdesLink::after {
  position: absolute;
  top: 0.5vw;
  bottom: 0;
  right: -2.5vw;
  margin: auto;
  content: "";
  background: url(../img/common/arrow-right.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.7vw;
}

.ec-footerRole .ec-footer-top-link {
  text-align: center;
  height: 40px;
  position: relative;
}

.ec-footerRole .ec-footer-top-link a:after {
  position: absolute;
  top: 36%;
  left: 46%;
  content: "";
  background: url(/html/template/default/assets/img/footer/go_top.svg) no-repeat 0 0;
  width: 29px;
  height: 14px;
}

.ec-footerNavi .ec-footerNavi__link img {
  width: 1.3vw;
  height: 2.4vw;
}

.ec-footer-top {
  background: #fff;
}

.ec-footer-top .ec-footerRole__inner,
.ec-footer-middle .ec-footerRole__inner {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  max-width: 1220px;
  padding-left: 0;
  padding-right: 0;
  justify-content: center;
}

.ec-footerRole__box {
  width: 100%;
  padding: 0 5vw;
}

.ec-footerRole__box:last-child {
  padding-bottom: 3vw;
}

.footerInfo-block {
  margin: 15px 0 0;
  width: 100%;
}

.footerInfo-block img {
  width: 1.3vw;
  height: 2.4vw;
}

.footerInfo-block:nth-of-type(2) {
  margin-top: 12px;
}

.ec-footer-middle {
  background: #f5f5f5;
}

.ec-footer-top .ec-footerNavi {
  margin: 0;
  text-align: left;
  width: 100%;
}

.footerInfo-block a,
.cartInfoBlock a {
  color: #333;
  text-decoration: underline;
  font-size: 3.2vw;
}

.footerInfo-block dt {
  line-height: 1.65em;
  font-size: 3.5vw;
  font-weight: bold;
}

.footerInfo-block dd,
.footerInfoFaqBox li {
  line-height: 1.65em;
  font-size: 3.2vw;
}

.footerInfoFaqBox {
  padding-left: 1.3em;
}

.footerInfoFaqBox li {
  list-style: unset;
}

/*
トップページ
トップページ スライド部に関する Project コンポーネントを定義します。
ex [トップページ](http://demo3.ec-cube.net/)

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

Styleguide 12.1
*/
.ec-sliderRole {
  margin: 0 auto 6.4vw;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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 6.4vw;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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: 6.6667vw;
  width: 33%;
  opacity: 0.8;
  cursor: pointer;
}

.ec-sliderItemRole .slideThumb:focus {
  outline: none;
}

.ec-sliderItemRole .slideThumb:hover {
  opacity: 1;
}

.ec-sliderItemRole .slideThumb img {
  width: 80%;
}

/*
アイキャッチ
トップページ アイキャッチ部に関する Project コンポーネントを定義します。
ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/)

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

Styleguide 12.2
*/
.ec-eyecatchRole {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10.6667vw;
  /* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */
}

.ec-eyecatchRole .ec-eyecatchRole__image {
  display: block;
  margin-bottom: 10.6667vw;
  width: 100%;
  height: 100%;
}

.ec-eyecatchRole .ec-eyecatchRole__intro {
  color: black;
}

.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
  margin-bottom: 0.8em;
  font-size: 4.2667vw;
  font-weight: normal;
}

.ec-eyecatchRole .ec-eyecatchRole__introTitle {
  margin-bottom: 0.8em;
  font-size: 6.4vw;
  font-weight: bold;
}

.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
  margin-bottom: 5.3333vw;
  font-size: 4.2667vw;
  line-height: 2;
}

.ec-eyecatchRole .ec-eyecatchRole__introDescription {
  margin-bottom: 5.3333vw;
  font-size: 4.2667vw;
  line-height: 2;
}

/*
ボタン
トップページで使用されているボタンのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)

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

Styleguide 12.3
*/
/*
通常ボタン

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

Markup:
.ec-inlineBtn--top more

Styleguide 12.3.1
*/
.ec-inlineBtn--top {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid black;
  white-space: nowrap;
  padding: 2.6667vw 4.2667vw;
  font-size: 3.7333vw;
  line-height: 1.42857;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  color: white;
  background-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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-inlineBtn--top:hover,
.ec-inlineBtn--top:focus,
.ec-inlineBtn--top.focus {
  color: #333333;
  text-decoration: none;
}

.ec-inlineBtn--top:active,
.ec-inlineBtn--top.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-inlineBtn--top.disabled,
.ec-inlineBtn--top[disabled],
fieldset[disabled] .ec-inlineBtn--top {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-inlineBtn--top:focus,
.ec-inlineBtn--top.focus {
  color: white;
  background-color: black;
  border-color: black;
}

.ec-inlineBtn--top:hover {
  color: white;
  background-color: black;
  border-color: black;
}

.ec-inlineBtn--top:active,
.ec-inlineBtn--top.active,
.open > .ec-inlineBtn--top.dropdown-toggle {
  color: white;
  background-color: black;
  background-image: none;
  border-color: black;
}

.ec-inlineBtn--top:active:hover,
.ec-inlineBtn--top:active:focus,
.ec-inlineBtn--top:active.focus,
.ec-inlineBtn--top.active:hover,
.ec-inlineBtn--top.active:focus,
.ec-inlineBtn--top.active.focus,
.open > .ec-inlineBtn--top.dropdown-toggle:hover,
.open > .ec-inlineBtn--top.dropdown-toggle:focus,
.open > .ec-inlineBtn--top.dropdown-toggle.focus {
  color: white;
  background-color: black;
  border-color: black;
}

.ec-inlineBtn--top.disabled:hover,
.ec-inlineBtn--top.disabled:focus,
.ec-inlineBtn--top.disabled.focus,
.ec-inlineBtn--top[disabled]:hover,
.ec-inlineBtn--top[disabled]:focus,
.ec-inlineBtn--top[disabled].focus,
fieldset[disabled] .ec-inlineBtn--top:hover,
fieldset[disabled] .ec-inlineBtn--top:focus,
fieldset[disabled] .ec-inlineBtn--top.focus {
  background-color: black;
  border-color: black;
}

.ec-inlineBtn--top .badge {
  color: black;
  background-color: white;
}

.ec-inlineBtn--top .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

/*
ロングボタン（全幅）
ロングタイプのボタンです。

Markup:
.ec-blockBtn--top 商品一覧へ

Styleguide 2.1.2
*/
.ec-blockBtn--top {
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 0.2667vw solid black;
  white-space: nowrap;
  padding: 0 4.2667vw;
  font-size: 3.7333vw;
  border-radius: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  color: white;
  background-color: black;
  display: block;
  height: 14.9333vw;
  line-height: 14.9333vw;
}

.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: 1.3333vw auto -webkit-focus-ring-color;
  outline-offset: -0.5333vw;
}

.ec-blockBtn--top:hover,
.ec-blockBtn--top:focus,
.ec-blockBtn--top.focus {
  color: #333333;
  text-decoration: none;
}

.ec-blockBtn--top:active,
.ec-blockBtn--top.active {
  outline: 0;
  background-image: none;
  box-shadow: inset 0 0.8vw 1.3333vw rgba(0, 0, 0, 0.125);
}

.ec-blockBtn--top.disabled,
.ec-blockBtn--top[disabled],
fieldset[disabled] .ec-blockBtn--top {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
  box-shadow: none;
}

.ec-blockBtn--top:focus,
.ec-blockBtn--top.focus {
  color: white;
  background-color: black;
  border-color: black;
}

.ec-blockBtn--top:hover {
  color: white;
  background-color: black;
  border-color: black;
}

.ec-blockBtn--top:active,
.ec-blockBtn--top.active,
.open > .ec-blockBtn--top.dropdown-toggle {
  color: white;
  background-color: black;
  background-image: none;
  border-color: black;
}

.ec-blockBtn--top:active:hover,
.ec-blockBtn--top:active:focus,
.ec-blockBtn--top:active.focus,
.ec-blockBtn--top.active:hover,
.ec-blockBtn--top.active:focus,
.ec-blockBtn--top.active.focus,
.open > .ec-blockBtn--top.dropdown-toggle:hover,
.open > .ec-blockBtn--top.dropdown-toggle:focus,
.open > .ec-blockBtn--top.dropdown-toggle.focus {
  color: white;
  background-color: black;
  border-color: black;
}

.ec-blockBtn--top.disabled:hover,
.ec-blockBtn--top.disabled:focus,
.ec-blockBtn--top.disabled.focus,
.ec-blockBtn--top[disabled]:hover,
.ec-blockBtn--top[disabled]:focus,
.ec-blockBtn--top[disabled].focus,
fieldset[disabled] .ec-blockBtn--top:hover,
fieldset[disabled] .ec-blockBtn--top:focus,
fieldset[disabled] .ec-blockBtn--top.focus {
  background-color: black;
  border-color: black;
}

.ec-blockBtn--top .badge {
  color: black;
  background-color: white;
}

.ec-blockBtn--top .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}

/*
見出し
トップページで使用されている見出しのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)

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

Styleguide 12.4
*/
/*
横並び見出し
横並びの見出しです。

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

Styleguide 12.4.1
*/
.ec-secHeading {
  margin-bottom: 4vw;
  color: black;
}

.ec-secHeading .ec-secHeading__en {
  font-size: 4.8vw;
  font-weight: bold;
  letter-spacing: 0.2em;
}

.ec-secHeading .ec-secHeading__line {
  display: inline-block;
  margin: 0 5.3333vw;
  width: 0.2667vw;
  height: 3.7333vw;
  background: black;
}

.ec-secHeading .ec-secHeading__ja {
  font-size: 3.2vw;
  font-weight: normal;
  letter-spacing: 0.15em;
  vertical-align: 0.5333vw;
}

/*
縦並び見出し
縦並びの見出しです。

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

Styleguide 12.4.2
*/
.ec-secHeading--tandem {
  margin-bottom: 4vw;
  color: black;
  text-align: center;
}

.ec-secHeading--tandem .ec-secHeading__en {
  display: block;
  font-size: 4.8vw;
  font-weight: bold;
  letter-spacing: 0.2em;
}

.ec-secHeading--tandem .ec-secHeading__line {
  display: block;
  margin: 3.4667vw auto;
  width: 5.3333vw;
  height: 0.2667vw;
  background: black;
}

.ec-secHeading--tandem .ec-secHeading__ja {
  display: block;
  margin-bottom: 8vw;
  font-size: 3.2vw;
  font-weight: normal;
  letter-spacing: 0.15em;
  vertical-align: 0.5333vw;
}

/*
トピック（アイテム2列）
トップページで使用されているトピックのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)

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

Styleguide 12.5.1
*/
.ec-topicRole {
  padding: 10.6667vw 0;
  background: #f8f8f8;
}

.ec-topicRole .ec-topicRole__list {
  display: flex;
  flex-wrap: wrap;
}

.ec-topicRole .ec-topicRole__listItem {
  margin-bottom: 5.3333vw;
  width: 100%;
  height: auto;
}

.ec-topicRole .ec-topicRole__listItemTitle {
  margin-top: 0.5em;
  font-size: 3.7333vw;
  color: black;
}

/*
カテゴリ（アイテム4列 スマホの時は2列）
トップページで使用されているアイテムリストのスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)

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

Styleguide 12.6.1
*/
.ec-newItemRole {
  padding: 10.6667vw 0;
}

.ec-newItemRole .ec-newItemRole__list {
  display: flex;
  flex-wrap: wrap;
}

.ec-newItemRole .ec-newItemRole__listItem {
  margin-bottom: 4%;
  width: 48%;
  height: auto;
}

.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
  color: black;
}

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

.ec-newItemRole .ec-newItemRole__listItemHeading {
  margin-top: calc(45% - 5.3333vw);
}

.ec-newItemRole .ec-newItemRole__listItemTitle {
  margin: 2.1333vw 0;
  font-size: 3.7333vw;
  font-weight: bold;
}

.ec-newItemRole .ec-newItemRole__listItemPrice {
  font-size: 3.2vw;
}

/*
カテゴリ（アイテム3列）

トップページで使用されているカテゴリのスタイルです。

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

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

Styleguide 12.7.1
*/
.ec-categoryRole {
  padding: 10.6667vw 0;
  color: black;
  background: #f8f8f8;
}

.ec-categoryRole .ec-categoryRole__list {
  display: flex;
  flex-wrap: wrap;
}

.ec-categoryRole .ec-categoryRole__listItem {
  margin-bottom: 5.3333vw;
  width: 100%;
  height: auto;
}

/*
見出し
トップページで使用されている新着情報のスタイルです。
ex [トップページ](http://demo3.ec-cube.net/)

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

Styleguide 12.8.1
*/
.ec-newsRole {
  padding: 10.6667vw 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: 0.2667vw solid #ccc;
}

.ec-newsRole .ec-newsRole__newsItem:last-of-type {
  margin-bottom: 5.3333vw;
}

.ec-newsRole .ec-newsRole__newsHeading {
  cursor: pointer;
}

.ec-newsRole .ec-newsRole__newsDate {
  display: block;
  margin: 4vw 0 1.3333vw;
  font-size: 3.2vw;
  color: black;
}

.ec-newsRole .ec-newsRole__newsColumn {
  display: flex;
}

.ec-newsRole .ec-newsRole__newsTitle {
  display: inline-block;
  margin-bottom: 2.6667vw;
  width: 90%;
  font-size: 3.7333vw;
  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: 5.3333vw;
  height: 5.3333vw;
  color: white;
  text-align: center;
  background: black;
  cursor: pointer;
  position: absolute;
  right: 1.3333vw;
}

.ec-newsRole .ec-newsRole__newsDescription {
  display: none;
  margin: 0 0 2.6667vw;
  font-size: 3.7333vw;
  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 2.6667vw;
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
  display: inline-block;
  transform: rotateX(180deg) translateY(0.5333vw);
}

/*
検索ラベル
商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。
ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.1

*/
.ec-searchnavRole {
  margin-bottom: 0;
  padding: 0;
}

.ec-searchnavRole .ec-searchnavRole__infos {
  margin: 0 auto 4.2667vw;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
  display: flex;
  border-top: 0;
  padding-top: 1.3333vw;
  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: 4.2667vw;
  width: 100%;
}

.ec-searchnavRole .ec-searchnavRole__actions {
  text-align: right;
  width: 100%;
}

/*
商品一覧
商品一覧 に関する Project コンポーネントを定義します。
SP版２列、PC版４列の特殊グリッドを構成します。

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

Styleguide 13.2

*/
.ec-shelfRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

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

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

.ec-shelfRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}

.ec-shelfRole img {
  max-width: 100%;
}

.ec-shelfRole html {
  box-sizing: border-box;
}

.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
  box-sizing: inherit;
}

.ec-shelfRole img {
  width: 100%;
}

/*
商品一覧グリッド
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。

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

Styleguide 13.2.1

*/
.ec-shelfGrid {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
}

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

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

.ec-shelfGrid .ec-shelfGrid__item {
  margin-bottom: 9.6vw;
  width: 50%;
  display: flex;
  flex-direction: column;
}

.ec-shelfGrid .ec-shelfGrid__item-image {
  height: 40vw;
  margin-bottom: 2.6667vw;
  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: 4vw;
}

.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
  padding-right: 2.1333vw;
}

.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
  padding-left: 2.1333vw;
}

.ec-shelfGrid .ec-shelfGrid__title {
  margin-bottom: 1.8667vw;
}

.ec-shelfGrid .ec-shelfGrid__plice {
  font-weight: bold;
}

/*
13.2.2 商品一覧グリッド（中央寄せ）
商品一覧 で使用するグリッドコンポーネントです。
SP版２列、PC版４列の特殊グリッドを構成します。
商品のあまりはセンタリングされ、中央に表示されます。

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

Styleguide 13.2.2

*/
.ec-shelfGridCenter {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  justify-content: center;
}

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

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

.ec-shelfGridCenter .ec-shelfGridCenter__item {
  margin-bottom: 9.6vw;
  width: 50%;
}

.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
  height: 40vw;
  margin-bottom: 2.6667vw;
  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: 2.1333vw;
}

.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
  padding-left: 2.1333vw;
}

.ec-shelfGridCenter .ec-shelfGridCenter__title {
  margin-bottom: 1.8667vw;
}

.ec-shelfGridCenter .ec-shelfGridCenter__plice {
  font-weight: bold;
}

/*
商品一覧フッター
商品一覧 フッター に関する Project コンポーネントを定義します。
ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.3

*/
/*
カート追加モーダル
カート追加モーダルに関する Project コンポーネントを定義します。
ex [商品一覧、商品詳細](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

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

.ec-modal .ec-modal-overlay {
  opacity: 0;
  transition: all 0.3s ease;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -100;
  transform: scale(1);
  display: flex;
  background-color: rgba(0, 0, 0, 0.3);
}

.ec-modal .ec-modal-wrap {
  background-color: #fff;
  border: 0.2667vw solid #333;
  width: 90%;
  margin: 5.3333vw;
  padding: 10.6667vw 1.3333vw;
  border-radius: 0.5333vw;
  transition: all 0.5s ease;
  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: 5.3333vw;
}

.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: 5.3333vw;
  top: 2.6667vw;
  font-size: 5.3333vw;
  height: 8vw;
  width: 5.3333vw;
}

.ec-modal .ec-modal-overlay .ec-modal-close:hover {
  cursor: pointer;
  color: #4b5361;
}

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

.ec-modal input:checked ~ .ec-modal-overlay {
  transform: scale(1);
  opacity: 1;
  z-index: 9997;
  overflow: auto;
}

.ec-modal input:checked ~ .ec-modal-overlay .ec-modal-overlay-close {
  display: block;
}

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

/*
商品詳細
商品詳細ページに関する Project コンポーネントを定義します。
ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18)

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

Styleguide 14.1
*/
.ec-productRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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: 5.3333vw;
}

.ec-productRole .ec-productRole__profile {
  margin-left: 0;
}

.ec-productRole .ec-productRole__title .ec-headingTitle {
  font-size: 5.3333vw;
}

.ec-productRole .ec-productRole__tags {
  margin-top: 4.2667vw;
  padding: 0 0 4.2667vw;
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-productRole .ec-productRole__tag {
  display: inline-block;
  padding: 0.5333vw 1.3333vw;
  list-style: none;
  font-size: 80%;
  color: #333333;
  border: solid 0.2667vw #d7dadd;
  border-radius: 0.8vw;
  background-color: #f5f7f8;
}

.ec-productRole .ec-productRole__priceRegular {
  padding-top: 3.7333vw;
}

.ec-productRole .ec-productRole__priceRegularTax {
  margin-left: 1.3333vw;
  font-size: 2.6667vw;
}

.ec-productRole .ec-productRole__price {
  color: #de5d50;
  font-size: 7.4667vw;
  padding: 0;
  border-bottom: 0;
}

.ec-productRole .ec-productRole__code {
  padding: 3.7333vw 0;
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-productRole .ec-productRole__category {
  padding: 3.7333vw 0;
  border-bottom: 0.2667vw 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: 3.7333vw 0;
}

.ec-productRole .ec-productRole__actions .ec-select select {
  height: 10.6667vw;
  max-width: 100%;
  min-width: 100%;
}

.ec-productRole .ec-productRole__btn {
  width: 100%;
  margin-bottom: 2.6667vw;
}

.ec-productRole .ec-productRole__description {
  margin-bottom: 4.2667vw;
}

/*
カート
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [カートページ](http://demo3.ec-cube.net/shopping)

(カート内に商品がある状態でアクセス)

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

Styleguide 15.1

*/
.ec-cartRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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::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: 4.2667vw 0 1.6vw;
  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: 4vw 0 8vw;
  font-weight: bold;
  font-size: 4.2667vw;
}

.ec-cartRole .ec-cartRole__totalAmount {
  margin-left: 8vw;
  color: #de5d50;
  font-size: 4.2667vw;
}

.ec-cartRole .ec-blockBtn--action {
  margin-bottom: 2.6667vw;
}

/*
カート商品表示枠（テーブルヘッダ）
カート内の商品をを表示するテーブル枠です。
ex [カートページ　テーブル部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)

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

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

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

/*
カート商品表示枠（テーブルヘッダ）
カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。
ex [カートページ　カートテーブルヘッダ部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)

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

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


Styleguide 15.1.3
*/
.ec-cartHeader {
  display: none;
  width: 100%;
  background: #f4f3f0;
}

.ec-cartHeader .ec-cartHeader__label {
  display: table-cell;
  padding: 4.2667vw;
  text-align: center;
  background: #f4f3f0;
  overflow-x: hidden;
  font-weight: bold;
}

.ec-cartCompleteRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

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

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

.ec-cartCompleteRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}

.ec-cartCompleteRole img {
  max-width: 100%;
}

.ec-cartCompleteRole html {
  box-sizing: border-box;
}

.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
  box-sizing: inherit;
}

.ec-cartCompleteRole img {
  width: 100%;
}

/*
カート内商品
カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。
ex [カートページ　テーブル部分](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

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

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


Styleguide 15.1.4
*/
.ec-cartRow {
  display: table-row;
}

.ec-cartRow .ec-cartRow__delColumn {
  border-bottom: 0.2667vw 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: 0.2667vw dotted #ccc;
  padding: 2.6667vw 0;
  display: table;
}

.ec-cartRow .ec-cartRow__img {
  display: table-cell;
  width: 40%;
  vertical-align: middle;
  padding-right: 2.6667vw;
}

.ec-cartRow .ec-cartRow__summary {
  display: table-cell;
  margin-left: 1.3333vw;
  font-weight: bold;
  vertical-align: middle;
  width: 46%;
}

.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
  margin-bottom: 1.3333vw;
}

.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
  display: block;
  font-weight: normal;
}

.ec-cartRow .ec-cartRow__amountColumn {
  display: table-cell;
  border-bottom: 0.2667vw dotted #ccc;
  vertical-align: middle;
  text-align: center;
  width: 20%;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
  display: none;
  margin-bottom: 2.6667vw;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
  display: block;
  margin-bottom: 2.6667vw;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
  display: flex;
  justify-content: center;
}

.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
  margin: 0 0.5333vw;
  display: inline-block;
  border: 0.5333vw solid #c9c9c9;
  border-radius: 50%;
  width: 8vw;
  min-width: 8vw;
  max-width: 8vw;
  height: 8vw;
  cursor: pointer;
  line-height: 10.6667vw;
  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: 0.8em;
  height: 0.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 0.5333vw;
  display: inline-block;
  border: 0.5333vw solid #c9c9c9;
  border-radius: 50%;
  width: 8vw;
  min-width: 8vw;
  max-width: 8vw;
  height: 8vw;
  cursor: pointer;
  line-height: 10.6667vw;
  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: 0.8em;
  height: 0.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: 0.2667vw dotted #ccc;
  text-align: right;
  width: 16.66666667%;
}

/*
カート内商品(商品が１の場合)
商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。
ex [カートページ　テーブル部分](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

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

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


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

/*
アラート
カート内の商品に問題があることを示す警告メッセージです。
ex [マイページ　カート](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

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

Styleguide 15.1.6
*/
.ec-alert-warning {
  width: 100%;
  padding: 2.6667vw;
  text-align: center;
  background: #f99;
  margin-bottom: 5.3333vw;
}

.ec-alert-warning .ec-alert-warning__icon {
  display: inline-block;
  margin-right: 1rem;
  width: 5.3333vw;
  height: 5.3333vw;
  color: #fff;
  fill: #fff;
  vertical-align: top;
}

.ec-alert-warning .ec-alert-warning__text {
  display: inline-block;
  font-size: 4.2667vw;
  font-weight: bold;
  color: #fff;
  position: relative;
}

/*
アラート(空)
カートが空であることを示す警告メッセージです。
ex [マイページ　カート](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

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

Styleguide 15.1.7
*/
/*
注文内容確認
カート内 注文内容確認に関する Project コンポーネントを定義します。
ex [マイページ　注文詳細](http://demo3.ec-cube.net/shopping)

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

Styleguide 15.2
*/
.ec-orderRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
  display: flex;
  flex-direction: column;
}

.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: 5.3333vw;
  border-top: 0.2667vw dotted #ccc;
}

/*
注文履歴詳細 オーダ情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ　オーダ情報](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 15.2.1
*/
.ec-orderOrder {
  margin-bottom: 8vw;
}

.ec-orderOrder .ec-orderOrder__items {
  border-bottom: 0.2667vw dotted #ccc;
  border-top: 0.2667vw dotted #ccc;
}

/*
注文履歴詳細 お客様情報
マイページ 注文詳細部に関する Project コンポーネントを定義します。
ex [マイページ　オーダ情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

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

Styleguide 15.2.2
*/
.ec-orderAccount {
  margin-bottom: 8vw;
}

.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: 2.6667vw;
  float: right;
}

.ec-orderAccount .ec-orderAccount__account {
  margin-bottom: 4.2667vw;
}

/*
注文詳細 配送情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ　配送情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

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

Styleguide 15.2.3
*/
.ec-orderDelivery .ec-orderDelivery__title {
  padding: 4.2667vw 0 4.5333vw;
  font-weight: bold;
  font-size: 4.8vw;
  position: relative;
}

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

.ec-orderDelivery .ec-orderDelivery__items {
  border-bottom: 0.2667vw dotted #ccc;
  border-top: 0.2667vw dotted #ccc;
}

.ec-orderDelivery .ec-orderDelivery__address {
  margin: 2.6667vw 0 4.8vw;
}

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

/*
注文履歴詳細 支払情報
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ　支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

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

Styleguide 15.2.4
*/
/*
注文履歴詳細 お問い合わせ

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　お問い合わせ(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

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

Styleguide 15.2.5
*/
.ec-orderConfirm {
  margin-bottom: 5.3333vw;
}

.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: 25.6vw;
}

/*
お届け先の複数指定
お届け先の複数指定に関するコンポーネントを定義します。
ex [マイページ　お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品購入画面 → 「お届け先を追加する」を押下)

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

Styleguide 15.2.6
*/
.ec-AddAddress {
  padding: 0 2.6667vw;
}

.ec-AddAddress .ec-AddAddress__info {
  margin-bottom: 8.5333vw;
  text-align: center;
  font-size: 4.2667vw;
}

.ec-AddAddress .ec-AddAddress__add {
  border-top: 0.2667vw solid #f4f4f4;
  padding-top: 5.3333vw;
  margin-bottom: 5.3333vw;
}

.ec-AddAddress .ec-AddAddress__item {
  display: table;
  padding: 4.2667vw;
  background: #f4f4f4;
  margin-bottom: 4.2667vw;
}

.ec-AddAddress .ec-AddAddress__itemThumb {
  display: table-cell;
  min-width: 42.6667vw;
  width: 20%;
}

.ec-AddAddress .ec-AddAddress__itemThumb img {
  width: 100%;
}

.ec-AddAddress .ec-AddAddress__itemtContent {
  display: table-cell;
  vertical-align: middle;
  padding-left: 4.2667vw;
  font-size: 4.2667vw;
}

.ec-AddAddress .ec-AddAddress__itemtTitle {
  font-weight: bold;
  margin-bottom: 2.6667vw;
}

.ec-AddAddress .ec-AddAddress__itemtSize {
  margin-bottom: 2.6667vw;
}

.ec-AddAddress .ec-AddAddress__select {
  margin-bottom: 1.3333vw;
}

.ec-AddAddress .ec-AddAddress__selectAddress {
  display: inline-block;
}

.ec-AddAddress .ec-AddAddress__selectAddress label {
  font-size: 4.2667vw;
  font-weight: normal;
}

.ec-AddAddress .ec-AddAddress__selectAddress select {
  min-width: 100%;
}

.ec-AddAddress .ec-AddAddress__selectNumber {
  display: inline-block;
  margin-left: 8vw;
}

.ec-AddAddress .ec-AddAddress__selectNumber label {
  font-size: 4.2667vw;
  font-weight: normal;
}

.ec-AddAddress .ec-AddAddress__selectNumber input {
  display: inline-block;
  margin-left: 2.6667vw;
  width: 21.3333vw;
}

.ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
  margin-bottom: 2.1333vw;
}

.ec-AddAddress .ec-AddAddress__new {
  margin-bottom: 5.3333vw;
}

/*
注文履歴一覧
マイページ 注文履歴部に関する Project コンポーネントを定義します。
ex [マイページ　注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

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

Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
  padding-top: 1em;
  padding-bottom: 4.2667vw;
  border-top: 0.2667vw solid #ccc;
  display: flex;
  flex-direction: column;
  color: #333333;
}

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

.ec-historyRole .ec-historyRole__detail {
  border-top: 0.2667vw 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: 2.1333vw;
  font-size: 1.6rem;
  font-weight: bold;
}

.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
  margin-bottom: 2.1333vw;
  font-size: 1.6rem;
  font-weight: bold;
}

/*
注文履歴一覧 規格
マイページ 注文履歴内アイテムの規格を定義します。
ex [マイページ　注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

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

Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
  display: inline-block;
  margin-bottom: 2.1333vw;
  margin-right: 0.5rem;
  font-size: 1.6rem;
}

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

/*
注文履歴一覧ヘッダ
注文履歴一覧で使用するヘッダのコンポーネントを定義します。
ex [マイページ　注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)

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

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

.ec-historyListHeader .ec-historyListHeader__action {
  margin: 4.2667vw 0;
}

.ec-historyListHeader .ec-historyListHeader__action a {
  font-size: 3.2vw;
  font-weight: normal;
}

/*
注文履歴詳細
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ　注文詳細](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 16.2
*/
/*
注文履歴詳細 メール履歴
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ　メール履歴](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 16.2.5
*/
.ec-orderMails .ec-orderMails__item {
  padding-bottom: 2.6667vw;
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-orderMails .ec-orderMails__time {
  margin: 0;
}

.ec-orderMails .ec-orderMails__body {
  display: none;
}

/*
注文履歴詳細 メール履歴個別
マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。
ex [マイページ　メール履歴個別](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 16.2.6
*/
.ec-orderMail {
  padding-bottom: 2.6667vw;
  border-bottom: 0.2667vw dotted #ccc;
  margin-bottom: 4.2667vw;
}

.ec-orderMail .ec-orderMail__time {
  margin: 0;
}

.ec-orderMail .ec-orderMail__body {
  display: none;
}

.ec-orderMail .ec-orderMail__time {
  margin-bottom: 1.0667vw;
}

.ec-orderMail .ec-orderMail__link {
  margin-bottom: 1.0667vw;
}

.ec-orderMail .ec-orderMail__link a {
  color: #0092c4;
  text-decoration: none;
  cursor: pointer;
}

.ec-orderMail .ec-orderMail__link a:hover {
  color: #33a8d0;
}

.ec-orderMail .ec-orderMail__close a {
  color: #0092c4;
  text-decoration: none;
  cursor: pointer;
}

.ec-orderMail .ec-orderMail__close a:hover {
  color: #33a8d0;
}

/*
住所一覧
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [マイページ内 お届け先編集](http://demo3.ec-cube.net/mypage/delivery)

Markup:
include /assets/tmpl/elements/17.1.address.pug
+ec-addressList
+ec-addressRole

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

Styleguide 17.1

*/
.ec-addressRole .ec-addressRole__item {
  border-top: 0.2667vw dotted #ccc;
}

.ec-addressRole .ec-addressRole__actions {
  margin-top: 8.5333vw;
  padding-bottom: 5.3333vw;
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-addressList .ec-addressList__item {
  display: table;
  width: 100%;
  position: relative;
  border-bottom: 0.2667vw dotted #ccc;
}

.ec-addressList .ec-addressList__remove {
  vertical-align: middle;
  padding: 4.2667vw;
  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: 4.2667vw;
  margin-right: 4em;
  width: 80%;
}

/*
パスワードリセット
カート 注文詳細 に関する Project コンポーネントを定義します。
ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot)

(カート内に商品がある状態でアクセス)

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

Styleguide 18.1

*/
.ec-forgotRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.6;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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__form {
  margin-bottom: 4.2667vw;
}

/*
会員登録
新規会員登録 に関する Project コンポーネントを定義します。
ex [新規会員登録画面　会員登録](http://demo3.ec-cube.net/entry)

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

Styleguide 19.1
*/
.ec-registerRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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: 5.3333vw;
  text-align: center;
}

.ec-registerRole .ec-registerRole__actions p {
  margin-bottom: 4.2667vw;
}

.ec-registerRole .ec-blockBtn--action {
  margin-bottom: 4.2667vw;
}

.ec-registerCompleteRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

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

/*
お問い合わせ
お問い合わせ に関する Project コンポーネントを定義します。
ex [お問い合わせ](http://demo3.ec-cube.net/contact)

Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole

Styleguide 19.2
*/
.ec-contactRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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: 5.3333vw;
}

.ec-contactRole p {
  margin: 4.2667vw 0;
}

.ec-contactConfirmRole {
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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: 5.3333vw;
}

.ec-contactConfirmRole .ec-blockBtn--action {
  margin-bottom: 4.2667vw;
}

.ec-contactCompleteRole {
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

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

/*
お客様情報の入力
ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。
ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)

Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge

Styleguide 19.3
*/
.ec-customerRole {
  margin: 0 auto;
  padding-left: 5.3333vw;
  padding-right: 5.3333vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.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: 5.3333vw;
}

.ec-customerRole .ec-blockBtn--action {
  margin-bottom: 2.6667vw;
}

/*
404ページ
404 エラー画面で使用するページコンポーネントです。
ex [404エラー画面](http://demo3.ec-cube.net/404)

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

Styleguide 20.1
*/
.ec-404Role {
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -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: 6.6667vw;
}

/*
退会手続き
退会手続きで使用するページコンポーネントです。
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: 0 4.2667vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
  text-align: center;
}

.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: 4.2667vw;
  font-weight: bold;
  font-size: 6.4vw;
}

.ec-withdrawRole .ec-withdrawRole__description {
  margin-bottom: 8.5333vw;
  font-size: 4.2667vw;
}

.ec-withdrawRole .ec-icon img {
  width: 26.6667vw;
  height: 26.6667vw;
}

/*
退会手続き実行確認
退会手続き実行確認で使用するページコンポーネントです。
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: 5.3333vw;
}

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
  margin-bottom: 4.2667vw;
  font-weight: bold;
  font-size: 6.4vw;
}

.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
  margin-bottom: 8.5333vw;
  font-size: 4.2667vw;
}

.ec-withdrawConfirmRole .ec-icon img {
  width: 26.6667vw;
  height: 26.6667vw;
}

/*
会員情報編集完了
会員情報編集完了で使用するページコンポーネントです。
ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete)

Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole

Styleguide 22.1
*/
.ec-userEditCompleteRole {
  margin: 0 auto;
  padding: 0 4.2667vw;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
  text-align: center;
}

.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: 4.2667vw;
  font-weight: bold;
  font-size: 6.4vw;
}

.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
  margin-bottom: 8.5333vw;
  font-size: 4.2667vw;
}

@media (min-width: 204.8vw) {
  .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: 204.8vw) {
  .ec-pageHeader h1 {
    border-top: none;
    border-bottom: 0.2667vw solid #ccc;
    margin: 2.6667vw 4.2667vw 12.8vw;
    padding: 2.1333vw;
    font-size: 8.5333vw;
    font-weight: bold;
  }
  .ec-heading-bold {
    font-size: 4.8vw;
  }
  .ec-reportHeading {
    border-top: 0;
    font-size: 8.5333vw;
  }
  .ec-reportHeading h1,
  .ec-reportHeading h2,
  .ec-reportHeading h3,
  .ec-reportHeading h4,
  .ec-reportHeading h5,
  .ec-reportHeading h6,
  .ec-reportHeading p {
    font-size: 8.5333vw;
  }
  .ec-price .ec-price__unit {
    font-size: 1em;
  }
  .ec-price .ec-price__price {
    font-size: 1em;
  }
  .ec-price .ec-price__tax {
    font-size: 0.57em;
  }
  .ec-borderedDefs dl {
    flex-wrap: nowrap;
    padding: 4vw 0 1.0667vw;
  }
  .ec-borderedDefs dt {
    padding-top: 3.7333vw;
    width: 30%;
  }
  .ec-borderedDefs dd {
    width: 70%;
    line-height: 3;
  }
  .ec-list-chilled dt,
  .ec-list-chilled dd {
    padding: 4.2667vw 0;
  }
  .ec-list-chilled dd {
    padding: 4.2667vw;
  }
  .ec-borderedList {
    border-top: 0.2667vw dotted #ccc;
  }
  .ec-blockTopBtn {
    right: 8vw;
    bottom: 8vw;
  }
  .ec-input input,
  .ec-halfInput input,
  .ec-numberInput input,
  .ec-zipInput input,
  .ec-telInput input,
  .ec-select input,
  .ec-birth input {
    font-size: 3.7333vw;
  }
  .ec-input select,
  .ec-halfInput select,
  .ec-numberInput select,
  .ec-zipInput select,
  .ec-telInput select,
  .ec-select select,
  .ec-birth select {
    font-size: 3.7333vw;
  }
  .ec-input textarea,
  .ec-halfInput textarea,
  .ec-numberInput textarea,
  .ec-zipInput textarea,
  .ec-telInput textarea,
  .ec-select textarea,
  .ec-birth textarea {
    font-size: 3.7333vw;
  }
  .ec-input input,
  .ec-halfInput input,
  .ec-numberInput input,
  .ec-zipInput input,
  .ec-telInput input,
  .ec-select input,
  .ec-birth input {
    margin-bottom: 4.2667vw;
  }
  .ec-halfInput input[type=text] {
    margin-left: 4vw;
    width: 45%;
  }
  .ec-input input,
  .ec-halfInput input,
  .ec-numberInput input,
  .ec-zipInput input,
  .ec-telInput input,
  .ec-select input,
  .ec-birth input {
    font-size: 3.7333vw;
  }
  .ec-input select,
  .ec-halfInput select,
  .ec-numberInput select,
  .ec-zipInput select,
  .ec-telInput select,
  .ec-select select,
  .ec-birth select {
    font-size: 3.7333vw;
  }
  .ec-input textarea,
  .ec-halfInput textarea,
  .ec-numberInput textarea,
  .ec-zipInput textarea,
  .ec-telInput textarea,
  .ec-select textarea,
  .ec-birth textarea {
    font-size: 3.7333vw;
  }
  .ec-input input,
  .ec-halfInput input,
  .ec-numberInput input,
  .ec-zipInput input,
  .ec-telInput input,
  .ec-select input,
  .ec-birth input {
    margin-bottom: 4.2667vw;
  }
  .ec-halfInput input[type=text] {
    margin-left: 4vw;
    width: 45%;
  }
  .ec-select__delivery {
    display: inline-block;
  }
  .ec-select__time {
    display: inline-block;
  }
  .ec-birth select {
    margin: 0 2.1333vw 2.6667vw;
  }
  .ec-required {
    margin-left: 1em;
  }
  .ec-grid2 {
    display: flex;
  }
  .ec-grid3 {
    display: flex;
  }
  .ec-grid4 {
    display: flex;
  }
  .ec-grid6 {
    display: flex;
  }
  .ec-off1Grid {
    display: block;
    margin: 0;
  }
  .ec-off1Grid .ec-off1Grid__cell {
    position: relative;
    min-height: 0.2667vw;
    margin-left: 8.33333%;
  }
  .ec-off2Grid {
    display: flex;
  }
  .ec-off2Grid .ec-off2Grid__cell {
    position: relative;
    min-height: 0.2667vw;
    margin-left: 16.66667%;
  }
  .ec-off3Grid {
    display: flex;
  }
  .ec-off3Grid .ec-off3Grid__cell {
    position: relative;
    min-height: 0.2667vw;
    margin-left: 25%;
  }
  .ec-off4Grid {
    display: flex;
  }
  .ec-off4Grid .ec-off4Grid__cell {
    position: relative;
    min-height: 0.2667vw;
    margin-left: 33.33333%;
  }
  .ec-imageGrid .ec-imageGrid__img {
    padding: 2.6667vw;
    width: 34.6667vw;
  }
  .ec-login {
    margin: 0 4.2667vw;
    padding: 8vw 13% 16vw;
  }
  .ec-login .ec-login__link {
    margin-left: 5.3333vw;
  }
  .ec-guest {
    height: 100%;
    margin: 0 4.2667vw;
  }
  .ec-displayB {
    flex-direction: row;
  }
  .ec-displayB .ec-displayB__cell {
    width: 31.4466%;
    margin-bottom: 0;
  }
  .ec-displayC .ec-displayC__cell {
    width: 22.8775%;
  }
  .ec-displayD {
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
  .ec-displayD .ec-displayD__cell {
    width: 14.3083%;
    margin-bottom: 4.2667vw;
  }
  .ec-topicpath {
    padding: 8vw 0 2.6667vw;
    border: 0;
    font-size: 4.2667vw;
  }
  .ec-progress {
    margin-bottom: 8vw;
    padding: 0;
  }
  .ec-progress .ec-progress__number {
    line-height: 11.2vw;
    width: 11.2vw;
    height: 11.2vw;
    font-size: 5.3333vw;
  }
  .ec-cartNaviWrap {
    position: relative;
  }
  .ec-cartNavi {
    display: flex;
    justify-content: space-between;
    border-radius: 26666.4vw;
    box-sizing: border-box;
    padding: 3.2vw 4.5333vw 2.6667vw;
    width: auto;
    min-width: 37.3333vw;
    height: 11.7333vw;
    white-space: nowrap;
    cursor: pointer;
    background: #f8f8f8;
  }
  .ec-cartNavi .ec-cartNavi__badge {
    display: inline-block;
    min-width: 4.5333vw;
    position: relative;
    left: 0;
    top: 0;
  }
  .ec-cartNavi .ec-cartNavi__price {
    display: inline-block;
    font-size: 3.7333vw;
    font-weight: normal;
    vertical-align: middle;
  }
  .ec-cartNavi.is-active .ec-cartNavi__badge {
    display: none;
  }
  .ec-cartNaviIsset {
    margin-top: 2.6667vw;
    min-width: 68.2667vw;
    max-width: 68.2667vw;
  }
  .ec-cartNaviIsset::before {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2.2667vw 2.6667vw 2.2667vw;
    border-color: transparent transparent #f8f8f8 transparent;
    position: absolute;
    top: -2.4vw;
  }
  .ec-cartNaviNull {
    margin-top: 2.6667vw;
    min-width: 68.2667vw;
    max-width: 68.2667vw;
  }
  .ec-cartNaviNull::before {
    display: inline-block;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2.2667vw 2.6667vw 2.2667vw;
    border-color: transparent transparent #f8f8f8 transparent;
    position: absolute;
    top: -2.4vw;
  }
  .ec-totalBox .ec-totalBox__price {
    font-size: 6.4vw;
  }
  .ec-totalBox .ec-totalBox__taxLabel {
    font-size: 3.7333vw;
  }
  .ec-totalBox .ec-totalBox__taxRate {
    font-size: 3.2vw;
  }
  .ec-news {
    margin-right: 3%;
  }
  .ec-news {
    margin-bottom: 8.5333vw;
  }
  .ec-news .ec-news__title {
    padding: 4.2667vw;
    text-align: left;
    font-size: 6.4vw;
  }
  .ec-navlistRole .ec-navlistRole__navlist {
    flex-wrap: nowrap;
  }
  .ec-welcomeMsg {
    padding-left: 6.9333vw;
    padding-right: 6.9333vw;
  }
  .ec-favoriteRole .ec-favoriteRole__item-image {
    height: 66.6667vw;
  }
  .ec-favoriteRole .ec-favoriteRole__item {
    width: 25%;
  }
  .ec-mypageRole {
    padding-left: 6.9333vw;
    padding-right: 6.9333vw;
  }
  .ec-mypageRole .ec-pageHeader h1 {
    margin: 2.6667vw 0 12.8vw;
    padding: 2.1333vw 0 4.8vw;
  }
  .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: 35%;
    float: left;
  }
  .ec-headerRole:after {
    content: " ";
    display: table;
  }
  .ec-headerRole:after {
    clear: both;
  }
  .ec-headerRole .ec-headerRole__navSP {
    display: none;
  }
  .ec-headerNaviRole {
    padding-bottom: 10.6667vw;
  }
  .ec-headerNaviRole .ec-headerNaviRole__search {
    display: inline-block;
    margin-top: 2.6667vw;
    width: 65%;
  }
  .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: 3.7333vw;
  }
  .ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 4.2667vw;
    margin-bottom: 2.6667vw;
  }
  .ec-headerNav .ec-headerNav__itemIcon {
    margin-right: 0;
    font-size: 5.3333vw;
  }
  .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: 44vw;
    height: 9.6vw;
  }
  .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
    border-top-right-radius: inherit;
    border-top-left-radius: 13.3333vw;
    border-bottom-left-radius: 13.3333vw;
  }
  .ec-headerSearch .ec-headerSearch__keyword {
    float: right;
    width: 100%;
    border-radius: 1.3333vw;
  }
  .ec-headerSearch .ec-headerSearch__keyword input[type=search] {
    font-size: 3.2vw;
  }
  .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: 3.2vw;
    color: white;
    position: absolute;
    top: 5.0667vw;
    right: auto;
    left: -5.3333vw;
  }
  .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 {
    margin-top: 26.6667vw;
  }
  .ec-footerRole .ec-footerRole__inner {
    margin: 0 auto;
    padding-left: 5.3333vw;
    padding-right: 5.3333vw;
    box-sizing: border-box;
    font-size: 4.2667vw;
    line-height: 1.4;
    color: #333333;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 301.3333vw;
  }
  .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 2.6667vw;
    padding: 0;
    text-decoration: underline;
  }
  .ec-footerTitle {
    padding: 13.3333vw 0 21.3333vw;
  }
  .ec-footerTitle .ec-footerTitle__logo a {
    font-size: 6.4vw;
  }
  .ec-footerTitle .ec-footerTitle__copyright {
    font-size: 3.2vw;
  }
  .ec-sliderItemRole .item_nav {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 0;
  }
  .ec-eyecatchRole {
    flex-wrap: nowrap;
  }
  .ec-eyecatchRole .ec-eyecatchRole__image {
    order: 2;
  }
  .ec-eyecatchRole .ec-eyecatchRole__intro {
    padding-right: 5%;
    order: 1;
  }
  .ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-top: 12vw;
  }
  .ec-eyecatchRole .ec-eyecatchRole__introTitle {
    margin-bottom: 1em;
    font-size: 6.9333vw;
  }
  .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
    margin-bottom: 8vw;
  }
  .ec-eyecatchRole .ec-eyecatchRole__introDescription {
    margin-bottom: 8vw;
  }
  .ec-blockBtn--top {
    max-width: 69.3333vw;
  }
  .ec-topicRole {
    padding: 16vw 0;
  }
  .ec-topicRole .ec-topicRole__list {
    flex-wrap: nowrap;
  }
  .ec-topicRole .ec-topicRole__listItem {
    width: 50%;
  }
  .ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
    margin-right: 8vw;
  }
  .ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: 1em;
  }
  .ec-newItemRole {
    padding: 16vw 0;
  }
  .ec-newItemRole .ec-newItemRole__list {
    flex-wrap: nowrap;
  }
  .ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 4vw;
    width: 25%;
  }
  .ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
    margin-right: 8vw;
  }
  .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
    margin-right: 8vw;
  }
  .ec-newItemRole .ec-newItemRole__listItemTitle {
    margin: 5.3333vw 0 2.6667vw;
  }
  .ec-categoryRole {
    padding: 16vw 0;
  }
  .ec-categoryRole .ec-categoryRole__list {
    flex-wrap: nowrap;
  }
  .ec-categoryRole .ec-categoryRole__listItem {
    width: 33.3333333333%;
  }
  .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
    margin-right: 8vw;
  }
  .ec-newsRole {
    padding: 16vw 0 0;
  }
  .ec-newsRole .ec-newsRole__news {
    border: 4.2667vw solid #f8f8f8;
    padding: 5.3333vw 8vw;
  }
  .ec-newsRole .ec-newsRole__newsItem:last-of-type {
    margin-bottom: 0;
  }
  .ec-newsRole .ec-newsRole__newsItem {
    padding: 5.3333vw 0;
  }
  .ec-newsRole .ec-newsRole__newsHeading {
    display: flex;
  }
  .ec-newsRole .ec-newsRole__newsDate {
    display: inline-block;
    margin: 0;
    min-width: 32vw;
    font-size: 3.7333vw;
  }
  .ec-newsRole .ec-newsRole__newsColumn {
    display: inline-flex;
    min-width: calc(100% - 32vw);
  }
  .ec-newsRole .ec-newsRole__newsTitle {
    margin-bottom: 0;
    line-height: 1.8;
  }
  .ec-newsRole .ec-newsRole__newsDescription {
    margin: 5.3333vw 0 0;
    line-height: 1.8;
  }
  .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
    margin: 5.3333vw 0 0;
  }
  .ec-searchnavRole {
    margin: 0 auto;
    padding-left: 5.3333vw;
    padding-right: 5.3333vw;
    box-sizing: border-box;
    font-size: 4.2667vw;
    line-height: 1.4;
    color: #333333;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 301.3333vw;
  }
  .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: 0.2667vw solid #ccc;
    padding-top: 4.2667vw;
    flex-direction: row;
  }
  .ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 0;
    width: 50%;
  }
  .ec-searchnavRole .ec-searchnavRole__actions {
    width: 50%;
  }
  .ec-shelfGrid {
    margin-left: -4.2667vw;
    margin-right: -4.2667vw;
  }
  .ec-shelfGrid .ec-shelfGrid__item-image {
    height: 66.6667vw;
  }
  .ec-shelfGrid .ec-shelfGrid__item {
    padding: 0 4.2667vw;
    width: 25%;
  }
  .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
    padding: 0 4.2667vw;
  }
  .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
    padding: 0 4.2667vw;
  }
  .ec-shelfGridCenter {
    margin-left: -4.2667vw;
    margin-right: -4.2667vw;
  }
  .ec-shelfGridCenter .ec-shelfGridCenter__item-image {
    height: 66.6667vw;
  }
  .ec-shelfGridCenter .ec-shelfGridCenter__item {
    padding: 0 4.2667vw;
    width: 25%;
  }
  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
    padding: 0 4.2667vw;
  }
  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
    padding: 0 4.2667vw;
  }
  .ec-modal .ec-modal-wrap {
    padding: 10.6667vw 2.6667vw;
    width: 50%;
    margin: 5.3333vw auto;
  }
  .ec-productRole .ec-productRole__img {
    margin-right: 4.2667vw;
    margin-bottom: 0;
  }
  .ec-productRole .ec-productRole__profile {
    margin-left: 4.2667vw;
  }
  .ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 8.5333vw;
  }
  .ec-productRole .ec-productRole__price {
    padding: 3.7333vw 0;
    border-bottom: 0.2667vw dotted #ccc;
  }
  .ec-productRole .ec-productRole__actions .ec-select select {
    min-width: 93.3333vw;
    max-width: 93.3333vw;
  }
  .ec-productRole .ec-productRole__btn {
    width: 60%;
    margin-bottom: 4.2667vw;
    min-width: 93.3333vw;
  }
  .ec-cartRole .ec-cartRole__totalText {
    margin-bottom: 8vw;
    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: 6.4vw;
  }
  .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: 21.3333vw;
    max-width: 26.6667vw;
    padding-right: 0;
  }
  .ec-cartRow .ec-cartRow__summary {
    display: inline-block;
    margin-left: 5.3333vw;
    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: 5.3333vw;
    flex-direction: row;
  }
  .ec-orderRole .ec-orderRole__detail {
    padding: 0 4.2667vw;
    width: 66.66666%;
  }
  .ec-orderRole .ec-orderRole__summary {
    width: 33.33333%;
    padding: 0 4.2667vw;
  }
  .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: 93.3333vw;
  }
  .ec-historyRole .ec-historyRole__contents {
    flex-direction: row;
  }
  .ec-historyRole .ec-historyRole__header {
    width: 33.3333%;
  }
  .ec-historyRole .ec-historyRole__detail {
    width: 66.6666%;
    border-top: none;
  }
  .ec-historyListHeader .ec-historyListHeader__date {
    font-weight: bold;
    font-size: 5.3333vw;
  }
  .ec-historyListHeader .ec-historyListHeader__action a {
    font-size: 3.7333vw;
  }
  .ec-registerRole .ec-registerRole__actions {
    text-align: left;
  }
  .ec-customerRole .ec-blockBtn--action {
    margin-bottom: 4.2667vw;
  }
  .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    font-size: 8.5333vw;
  }
}
body {
  color: #333;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

.ec-headerNav .ec-headerNav__itemLink i {
  margin-left: 1.3333vw;
}

.ec-headerNav .text {
  font-size: 3.2vw;
  font-weight: normal;
  color: #333;
  display: inline-block;
}

.ec-headerNav .ec-headerNav__itemLink {
  color: #333;
  margin-right: 3.2vw;
}

.ec-headerNaviRole .ec-headerNaviRole__nav a {
  display: block;
}

.ec-headerNaviRole__right .ec-headerNav__itemLink {
  margin: 0 auto;
  display: block;
  font-weight: 600;
}

.ec-headerNaviRole__right .ec-headerNav__item {
  margin-right: 4vw;
}

.ec-headerNaviRole__right .ec-headerNav__item:last-child {
  margin-right: 0;
}

.ec-banner {
  width: 100%;
  margin-bottom: 2.6667vw;
}

.ec-banner .owl-carousel {
  visibility: hidden;
}
.ec-banner .owl-carousel.owl-loaded {
  visibility: visible;
}

.ec-banner .owl-carousel.owl-drag .owl-item img {
  height: 100%;
}

.ec-banner .owl-carousel.owl-drag .owl-item img {
  opacity: 0.5;
  height: 100%;
}

.ec-banner .owl-carousel.owl-drag .owl-item.center img {
  opacity: 1;
}

.ec-banner .owl-carousel .owl-stage,
.ec-banner .owl-carousel .owl-stage .owl-item,
.ec-banner .owl-carousel .owl-stage .owl-item .item {
  height: 100%;
}

.ec-banner .owl-carousel img {
  width: 100%;
  max-width: 100%;
}

.owl-carousel .owl-nav .owl-next {
  position: absolute;
  top: 46%;
  transform: translateX(-50%);
}

.ec-banner .owl-carousel .owl-nav .owl-prev:focus,
.owl-carousel .owl-nav .owl-next:focus {
  outline: none;
}

.ec-banner .owl-carousel .owl-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: 42%;
  width: 100%;
  margin: 0 auto;
  transform: translateY(-50%);
}

.ec-banner .owl-carousel .owl-nav .owl-prev {
  background: url("../img/common/home/arrow-left.png") no-repeat 0 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: block;
  text-indent: -9999px;
}

.ec-banner .owl-carousel .owl-nav .owl-next {
  background: url("../img/common/home/arrow-right.png") no-repeat 0 0;
  right: -20px;
  width: 40px;
  height: 40px;
  display: block;
  text-indent: -9999px;
}

.ec-banner .owl-carousel .owl-stage-outer {
  height: 29.98vw;
}

.ec-wrapperContent {
  width: 100%;
  margin: 0 auto;
  clear: both;
}

.ec-nofi {
  width: 100%;
  margin-bottom: 4vw;
}

.ec-nofi ul {
  list-style: none;
  padding: 2px 0;
  background-color: #f5f5f5;
}

.ec-nofi ul li {
  list-style: none;
  border-bottom: 0.5333vw solid #e0e0e0;
  padding: 1.6vw 0;
  position: relative;
  white-space: normal;
  margin: 0 4vw;
}

.ec-nofi ul a {
  text-decoration: none;
  color: #b12704;
  font-size: 3.2vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  display: inline-block;
  width: 86%;
}

.ec-nofi ul li:last-child {
  border-bottom: none;
}

.ec-nofi ul li .cate {
  background-color: #b12704;
  width: 8.8vw;
  height: 6vw;
  color: #fff;
  text-align: center;
  font-size: 2.6667vw;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.9vw;
  padding-top: 1.0667vw;
  font-weight: bold;
}

.ec-content {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.ec-sidebar {
  width: 100%;
}

.ec-sidebar ul.ads {
  list-style: none;
  padding: 0 4vw 1.33vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ec-sidebar ul.ads li {
  list-style: none;
  margin-bottom: 2.6667vw;
  width: 44vw;
  height: auto;
  overflow: hidden;
}

.ec-sidebar ul.ads li img {
  height: 100%;
}

.ec-layoutRole__contents .ec-layoutRole__mainWithColumn.pl-4 {
  padding-left: 0 !important;
}

.ec-mainContent .block_content.fix_blockContent {
  padding: 4vw 0 0;
}

#page_homepage .ec-mainContent .block_content.featureBox {
  padding: 0;
}

#ec-formContact {
  border-top: 2px solid #e0e0e0;
  padding: 20px 0;
  border-top: 2px solid #e0e0e0;
}

/* tuan anh - feature list sp */
.title_feature_list {
  font-size: 4.533vw;
  border-bottom: 0.5333vw solid #e0e0e0;
  padding-bottom: 2.6667vw;
  font-weight: bold;
  margin: 20px 0 0;
  padding-left: 2.6667vw;
}

.title_feature_list + .block_content,
.title_feature_list + .block_content + .block_content {
  background-color: #fff !important;
}

.title_feature_list + .block_content {
  padding-top: 2vw;
}

#page_feature_list h2.title,
.ec-mainContent .block_content div.title {
  background-color: #f0e8df;
  padding: 2.6667vw;
  font-size: 3.733vw;
  margin-bottom: 4vw;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0;
}

.ec-mainContent .return-list-feature a {
  background-color: #333333;
  color: #fff;
  width: 72vw;
  margin-top: 5.3333vw;
  font-size: 3.1vw;
  letter-spacing: 0.09em;
  padding: 2vw 0;
}

.ec-mainContent .block_content {
  background-color: #ededed;
}

.ec-mainContent .block_content.backgroundGrey,
.ec-mainContent .block_content.cate-searchlist .searchFlow {
  background-color: #ededed;
  padding: 4vw 3.3vw 4.5vw;
}

.ec-mainContent .block_content.cate-searchlist .searchFlow {
  margin-top: -2.6667vw;
}

.ec-mainContent .block_content.backgroundGrey h2 {
  background-color: transparent;
}

.ec-mainContent .block_content h2 {
  background-color: #fff;
  padding: 4vw 0 2.9vw 4vw;
  margin-bottom: 0;
  font-weight: 700;
  border-bottom: 0;
  font-size: 3.8vw;
  letter-spacing: 0.06em;
}

.ec-mainContent .block_content h1 {
  background-color: #fff;
  padding: 4vw 0 2.9vw 4vw;
  margin-bottom: 0;
  font-weight: 700;
  border-bottom: 0;
  font-size: 3.8vw;
  letter-spacing: 0.06em;
}

.ec-mainContent .block_content.backgroundGrey h2 {
  padding-left: 0;
  padding-top: 0;
  font-weight: 700;
}

.ec-mainContent .cate-searchlist h1 {
  border-bottom: 0.5333vw solid #e0e0e0;
  padding-bottom: 2.6667vw;
  font-size: 4.1vw;
  font-weight: bold;
  border-top: none;
  margin-bottom: 2.6667vw;
}

.ec-mainContent .block_content.cate-searchlist {
  padding: 0 0;
  background-color: #fff;
}

.ec-mainContent .block_content:nth-of-type(4) h2 {
  padding-left: 4vw;
}

.ec-mainContent .block_content .searchFlow ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  justify-content: flex-start;
}

.ec-mainContent .block_content .searchFlow ul li {
  width: 50%;
  margin-bottom: 6px;
}

.ec-mainContent .block_content .searchFlow ul li:nth-child(odd) {
  padding-right: 3px;
}

.ec-mainContent .block_content .searchFlow ul li:nth-child(even) {
  padding-left: 3px;
}

.ec-mainContent .block_content .searchFlow ul li:last-child,
.ec-mainContent .block_content .searchFlow ul li:nth-last-child(2):nth-child(odd) {
  margin-bottom: 0;
}

.ec-mainContent .block_content .searchFlow ul li a {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 1.2vw 2vw 1.2vw 3vw;
}

.ec-mainContent .block_content .searchFlow ul li span {
  font-size: 3vw;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.03em;
}

.ec-mainContent .block_content .searchFlow ul li img {
  height: 9.6vw;
  width: auto;
}

.ec-mainContent .block_content .feature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background-color: #fff;
  padding: 0 4vw;
}

.ec-mainContent .block_content .feature dl {
  width: 44.9vw;
  margin-bottom: 4.7vw;
  display: flex;
  flex-direction: column;
}

.ec-mainContent .block_content .feature dl dd {
  color: #333;
  line-height: 3.8vw;
  margin-top: 1.6vw;
  margin-bottom: 0;
}

.ec-mainContent .block_content .feature dl dd a {
  color: #333;
  text-decoration: none;
}

.ec-mainContent .block_content .feature dl dd a span {
  display: block;
  text-overflow: ellipsis;
}

.ec-mainContent .block_content .feature dl dd .text01 {
  font-size: 3vw;
  font-weight: bold;
  margin-bottom: 0.75vw;
  letter-spacing: 0.05em;
}

.ec-mainContent .block_content .feature dl dd .text02 {
  font-size: 3.2vw;
  line-height: 1.4em;
}

.ec-mainContent .block_content .feature img {
  border: 1px solid #d8d8d8;
  width: 100%;
  height: auto;
}

.ec-mainContent .block_content .history {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 4vw 4vw 4vw;
}

.ec-mainContent .block_content .history .text {
  font-size: 3vw;
  color: #333;
  padding: 0;
}

.ec-mainContent .block_content .history .text a {
  color: #333;
}

.ec-mainContent .block_content .history .price .text01 {
  font-size: 2.9333vw;
  color: #333;
  font-weight: 700;
}

.ec-mainContent .block_content .history .price .text02 {
  font-size: 3.7333vw;
  color: #b12704;
  font-weight: 700;
}

.ec-mainContent .block_content .history img {
  margin-bottom: 1.3vw;
  border: 1px solid #d8d8d8;
  object-fit: cover;
  width: 100%;
  height: auto;
}

.ec-mainContent .block_content .history .owl-carousel .owl-nav button.owl-prev,
.ec-mainContent .block_content .history .owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 22%;
  transform: translateX(-50%);
}

.ec-mainContent .block_content .history .owl-carousel .owl-nav button.owl-prev {
  left: -1%;
}

.ec-mainContent .block_content .history .owl-carousel .owl-nav button.owl-prev span {
  text-indent: -2666.4vw;
  background: url("../img/common/home/arrow-left.png") no-repeat 0 0;
  width: 10.6667vw;
  height: 10.6667vw;
  display: block;
}

.ec-mainContent .block_content .history .owl-carousel .owl-nav button.owl-next {
  right: -5%;
}

.ec-mainContent .block_content .history .owl-carousel .owl-nav button.owl-next span {
  text-indent: -2666.4vw;
  background: url("../img/common/home/arrow-right.png") no-repeat 0 0;
  width: 10.6667vw;
  height: 10.6667vw;
  display: block;
}

.ec-mainContent .block_content .history .item,
.yourRecommendedArea .text_price {
  color: #333;
}

.ec-mainContent .block_content ul.tab {
  list-style: none;
  padding: 0;
  border-bottom: 0;
  display: flex;
  flex-wrap: nowrap;
}

.ec-mainContent .block_content ul.tab li {
  list-style: none;
  padding: 0;
  float: none;
  display: inline-block;
}

.ec-mainContent .block_content ul.tab li a {
  background-color: #f0e8df;
  color: #333;
  font-size: 3vw;
  padding: 2.6667vw 4vw;
  margin-right: 1.2vw;
  display: block;
  white-space: nowrap;
  font-weight: bold;
}

.ec-mainContent .block_content ul.tab li a:hover {
  text-decoration: none;
}

.ec-mainContent .block_content ul.tab li a.active {
  background-color: #6a6a6a;
  color: #fff;
  border: 1px #6a6a6a solid;
}

.ec-mainContent .block_content .ranking {
  width: 100%;
  margin: 0 auto;
  background-color: #fff;
  padding: 0 0 4vw 4vw;
}

/* 20210521 Handle UI SP Ranking Block */
.ec-mainContent .block_content .ranking .nav-tabs,
.ec-mainContent .block_content .ranking .tab-content {
  overflow-x: auto;
  overflow-y: hidden;
}

.ec-mainContent .block_content .ranking .tab-content {
  padding-top: 8vw;
}

.ec-mainContent .block_content .ranking .tab-content .ec-ranking {
  padding-bottom: 0;
  padding-left: 0;
}

/* END 20210521 Handle UI SP Ranking Block */
.ec-mainContent .block_content .ec-ranking {
  display: flex;
  justify-content: space-between;
  clear: both;
  flex-wrap: nowrap;
}

.ec-mainContent .block_content .ec-ranking dl {
  position: relative;
  width: 38vw;
  padding-right: 2.4vw;
}

.ec-mainContent .block_content .ec-ranking dl dt {
  margin-bottom: 1.3vw;
  width: 38vw;
  padding-right: 2.4vw;
}

.ec-mainContent .block_content .ec-ranking dl dt img {
  width: 100%;
  object-fit: cover;
  border: 1px solid #d8d8d8;
}

.ec-mainContent .block_content .ec-ranking dl dd {
  font-size: 3.7333vw;
}

.ec-mainContent .block_content .ec-ranking dl dd .text,
.yourRecommendedArea .productCode,
.yourRecommendedArea .productName {
  font-size: 3.2vw;
  color: #333;
  display: block;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ec-mainContent .block_content .ec-ranking dl dd .icon {
  font-size: 2.5vw;
  color: #fff;
  background: url("../img/common/home/icon-queen.svg") no-repeat 0 0;
  background-size: 9.0667vw;
  width: 9.0667vw;
  height: 7.7333vw;
  position: absolute;
  left: 0;
  top: -5.3333vw;
  text-align: center;
  padding-top: 3.18vw;
  font-weight: bold;
  letter-spacing: -0.11em;
}

.ec-mainContent .block_content .ec-ranking dl dd .price .text01 {
  font-size: 3.7333vw;
  color: #333;
}

.ec-mainContent .block_content .ec-ranking dl dd .price .text02 {
  font-size: 3.7333vw;
  color: #b12704;
}

.ec-mainContent .block_content .viewmore,
.yourRecommendedArea .viewmore,
.recommendedProductgenresAera .viewmore {
  text-decoration: none;
  font-size: 3.2vw;
  color: #333;
  text-align: center;
  background-color: #fff;
  padding-top: 1.3333vw;
}

.ec-mainContent .block_content .viewmore a,
.yourRecommendedArea .viewmore a,
.recommendedProductgenresAera .viewmore a {
  position: relative;
  color: #333;
  letter-spacing: -0.1vw;
}

.ec-mainContent .block_content .viewmore a:after,
.yourRecommendedArea .viewmore a::after,
.recommendedProductgenresAera .viewmore a::after {
  position: absolute;
  top: 0.5vw;
  bottom: 0;
  right: -2.5vw;
  margin: auto;
  content: "";
  vertical-align: middle;
  background: url(../img/common/arrow-right.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.7vw;
}

.ec-mainContent .block_content .topViewmore {
  margin-bottom: 4vw;
}

.ec-footerNavi .ec-footerNavi__link a:after {
  position: absolute;
  top: 0.5vw;
  bottom: 0;
  right: -2.5vw;
  margin: auto;
  content: "";
  background: url(../img/common/arrow-right.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.5vw;
}

.ec-footerNavi .ecFooterNaviLink02 {
  position: relative;
  width: 50%;
  margin-bottom: 2.2vw;
  letter-spacing: 0.05em;
}

.ec-footerNavi .ecFooterNaviLink02 a:after {
  position: absolute;
  top: 0.5vw;
  bottom: 0;
  right: -2.5vw;
  margin: auto;
  content: "";
  background: url(../img/common/arrow-right-white.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.7vw;
}

.ec-mainContent .block_content .otherFeature {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background-color: #fff;
  padding: 0 4vw;
}

.ec-mainContent .block_content .otherFeature dl {
  width: 43vw;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ec-mainContent .block_content .otherFeature dl dt {
  border: 1px solid #d8d8d8;
}

.ec-mainContent .block_content .otherFeature dl dd {
  padding: 1.4vw 0 4vw;
  font-size: 3.2vw;
  margin-bottom: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ec-mainContent .block_content .otherFeature dl dd a {
  color: #333;
  font-weight: 700;
}

#modalFirstIntoSiteLogin .modal-dialog,
#modalFirstIntoSite .modal-dialog {
  max-width: 95% !important;
  top: 0;
  left: 0;
  transform: none;
}

.modal-dialog .modal-body {
  border-bottom: 0;
  padding: 0;
}

.ec-pageConfirmTitle {
  font-size: 3.4667vw;
  text-align: center;
  font-weight: bold;
  padding: 4vw 0;
  margin-bottom: 0 !important;
}

.ec-TitleFormLogin p:first-child {
  font-size: 4vw;
  margin-bottom: 1.3333vw !important;
}

.ec-TitleFormLogin p {
  font-size: 3.2vw;
  text-align: center;
}

.ec-formLogin .ec-login,
.ec-loginContentGroupBtn {
  padding: 6.6vw 6.6vw;
  margin: 4vw;
}

.ec-formLogin .ec-input p {
  font-size: 3.2vw;
  font-weight: bold;
  padding-bottom: 1.3333vw;
}

.ec-optionRememberMe input {
  width: 5.3333vw;
  height: 5.3333vw;
}

.ec-optionRememberMe label {
  font-size: 3.2vw;
  margin-left: 1.3333vw;
}

.ec-mainContent .ec-formLogin {
  width: 100% !important;
  padding: 0 !important;
}

.ec-formLogin-res .row .col {
  position: relative;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}

.ec-formLogin-res .row .col::after {
  display: block;
  content: "";
  background-color: #ededed;
  margin: 7vw 0 5vw;
  padding-bottom: 4vw;
}

.ec-login-right div.ec-input span {
  width: 16vw;
  font-size: 3.2vw;
  padding: 2.6667vw 2.1333vw;
}

.ec-ForgotAndContact {
  margin-left: 4vw;
}

.email_title {
  font-size: 3.2vw;
  margin-bottom: 4vw;
  text-align: justify;
  letter-spacing: 0.5px;
}

@media only screen and (min-width: 1000px) {
  .ec-banner .owl-carousel .owl-stage-outer .item {
    height: 82.6667vw;
  }
}
@media (max-width: 1000px) and (min-width: 415px) {
  /* .ec-mainContent .block_content .searchFlow ul li {
        width: 43.2vw;
    } */
  .ec-mainContent .block_content .feature dl {
    width: 43.2vw;
  }
  .ec-mainContent .block_content .otherFeature dl {
    width: 43.2vw;
  }
}
@media only screen and (min-width: 204.8vw) {
  .ec-off1Grid {
    display: flex;
  }
  .ec-off1Grid .ec-off1Grid__cell {
    width: 83.33333%;
  }
  .ec-off2Grid .ec-off2Grid__cell {
    width: 66.66667%;
  }
  .ec-off3Grid .ec-off3Grid__cell {
    width: 50%;
  }
  .ec-off4Grid .ec-off4Grid__cell {
    width: 33.33333%;
  }
}
@media only screen and (max-width: 112vw) {
  .ec-banner .owl-carousel .owl-stage-outer,
  .ec-banner .owl-carousel .owl-stage-outer .item {
    /*height: 27.2vw;*/
    height: 49.866vw;
  }
  .ec-banner .owl-carousel .owl-stage-outer img {
    height: 100%;
  }
}

/* posts  */
.ec-mainContent #list_post {
  padding: 0 5vw;
}

.ec-mainContent #list_post ul {
  list-style: none;
  padding: 0 0;
  font-size: 0;
}

.ec-mainContent #list_post ul li {
  border-bottom: 1px solid #e0e0e0;
  padding: 2.6667vw 2vw 2.6667vw 0;
  position: relative;
  display: flex;
  align-items: center;
}

.ec-mainContent #list_post ul li:last-child {
  border-bottom: none;
}

.ec-mainContent #list_post ul li::before {
  content: "";
  background: url(/html/user_data/assets/img/common/arrow-right02.svg);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 1.6vw;
  height: 2.6667vw;
  background-size: cover;
}

.ec-mainContent #list_post ul li.cate_info::before {
  background: url(/html/user_data/assets/img/common/arrow-right-red.svg);
  background-size: cover;
}

.ec-mainContent #list_post ul li span {
  color: #333;
  font-size: 2.9333vw;
  margin-right: 4vw;
  display: inline-block;
  margin-bottom: 1.3333vw;
}

.ec-mainContent #list_post ul li.cate_info span {
  background-color: #b12704;
  text-align: center;
  font-size: 2.6667vw;
  color: #fff;
  font-weight: bold;
  padding: 1.6vw 1.6vw;
}

.ec-mainContent #list_post ul li a {
  color: #333;
  font-size: 3.4667vw;
  display: block;
}

.ec-mainContent #list_post ul li.cate_info a {
  color: #b12704;
}

.ec-mainContent #list_post ul li a:hover {
  text-decoration: underline;
}

.ec-mainContent #header_detail_post {
  padding-left: 2.6667vw;
  border-bottom: 0.2667vw solid #00b0ec;
  padding-top: 2.6667vw;
}

.ec-mainContent #header_detail_post h1 {
  font-size: 0.875rem;
  margin: 0;
}

.ec-mainContent #header_detail_post .title {
  padding: 2.6667vw 0 2vw 0;
  font-weight: bold;
}

.ec-mainContent #header_detail_post .btn_important {
  line-height: 0.5;
  border-radius: unset;
  background-color: #b12704;
  color: #fff;
  font-size: 15px;
}

.ec-mainContent #detail_post {
  padding-left: 2.6667vw;
  padding-right: 2.6667vw;
}

.ec-mainContent #detail_post .return-list {
  text-align: center;
}

.ec-mainContent #detail_post .return-list a {
  background-color: #333333;
  color: #fff;
  width: 50%;
  margin-top: 5.3333vw;
}

.arrow-right__img {
  width: 1.34vw !important;
  height: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Khoa */
.guide_fag {
  display: flex;
  justify-content: flex-start;
}

.ec-contactConfirmRole .ec-borderedDefs dd {
  margin-top: 0;
}

.ec-contactName input[type=text] {
  max-width: 100%;
}

.ec-formLogin-res .ec-flex-navi {
  margin-top: 1.3222vw !important;
  margin-bottom: 4vw !important;
  padding-bottom: 4.667vw !important;
}

.ec-formLogin-res .email_title {
  margin-top: 1px !important;
}

.ec-formLogin-res .ec-loginContentBottom .sp_show {
  font-size: 3.2vw !important;
  margin-top: 2.6667vw !important;
}

/* End Khoa */
/* Tuan Anh */
.btnDelivery {
  background-color: #6a6a6a;
}

.ec-mainContent .feature_title {
  font-size: 4.533vw;
  border-bottom: 0.5333vw solid #e0e0e0;
  padding-bottom: 2.6667vw;
  font-weight: bold;
  margin: 1.333vw 0;
  padding-left: 2.6667vw;
}

.ec-mainContent .feature_img {
  margin: 4vw 4vw;
  text-align: center;
}

.ec-mainContent .feature_text {
  text-align: center;
  margin: 4vw;
  font-size: 3vw;
}

/**/
.block-container-AfterShopping {
  display: flex;
  flex-wrap: wrap;
}

.newsContentTitle {
  width: 100%;
  margin: 0;
}

.newsContentBox {
  width: 90%;
  margin: 0 auto;
}

/*/// エラーメッセージ //*/
ul.cartTable li.ec-errorMessageCustom,
.ec-cartInfoShowErrorMessage,
#ec-cartInfoShowDeliveryDateMessage p,
.ec-contactRoleCustom .ec-errorMessa,
.ec-TelFaxEntryForm .ec-errorMessage,
.ec-forgotRole__form .ec-errorMessage,
.ec-DeliveryPage .ec-errorMessage,
.ec-mypageRoleCustomer .ec-errorMessage,
.ec-formLogin .ec-errorMessage,
.ec-contactRoleCustom .ec-borderedDefs p,
.ec-mypageRoleCustomer__step1 .ec-zipInputCustom p,
.ec-mypageRoleCustomer__step1 .ec-borderedDefs dd .ec-errorMessage {
  padding: 1vw 2vw 0.6vw;
  font-size: 3.4vw !important;
  margin-bottom: 1.5vw;
  line-height: 1;
}

/* カート */
ul.cartTable li.ec-errorMessageCustom {
  width: 100%;
  margin: 0 auto 3.2vw;
  text-align: center;
  border-top: none;
  background-color: #ffe9e3;
  color: #b12704;
}

.ec-cartInfoShowErrorMessage,
#ec-cartInfoShowDeliveryDateMessage p {
  font-weight: bold;
}

.ec-cartInfoShowErrorMessage {
  padding: 2.5vw 5vw;
  line-height: 1.5;
  margin-bottom: 5vw;
}

.overLimitMessage {
  margin-bottom: 1.5vw;
  display: inline-block;
}

/* お問い合わせ */
.ec-contactRoleCustom .ec-errorMessage {
  margin-bottom: 1.5vw !important;
}

/* 新規会員登録 */
.ec-entryMemberListErrors {
  padding: 3vw 3vw 1vw;
  margin: 3vw 0;
}

.ec-entryMemberListErrors li {
  margin-bottom: 2vw;
}

.ec-errorMessageCustom ul {
  padding: 10px 6px 3px;
}

#phone .ec-errorMessage {
  margin-bottom: 1vw;
}

.ec-mypageRoleCustomer__step1 .ec-borderedDefs .ec-errorMessage,
.ec-mypageRoleCustomer__step2 .ec-storeInformation .ec-errorMessageCustom {
  padding: unset;
  font-size: unset;
  margin-bottom: unset;
}

/* 既存会員申し込み */
/* パスワード再発行 */
.ec-forgotRole__form .ec-borderedDefs .ec-errorMessageCustom {
  padding: unset;
  margin-bottom: 0 !important;
  background-color: unset;
}

/* ログイン */
.ec-formLogin .ec-errorMessage {
  padding: 1vw 2vw !important;
  line-height: 1.3;
}

.featureNotloginBtnArea {
  width: 90vw;
  margin: 3vw auto;
}

/* 注文履歴一覧 */
.listMypagehistory {
  background-color: #f5f5f5;
  padding: 6vw 4vw 0;
}

.listMypagehistory:last-child {
  padding-bottom: 4vw;
}

.orderInformationArea {
  background-color: #fff;
  padding: 4vw 4vw 0;
  border-radius: 7px 7px 0 0;
}

.historyOrderProductListArea {
  background-color: #fff;
  padding: 2vw 4vw 5vw;
  border-radius: 0 0 7px 7px;
}

.historyOrderDateArea {
  margin-bottom: 1.4vw;
  font-size: 3.4vw;
  font-weight: bold;
  letter-spacing: 0.04em;
  display: flex;
}

.historyOrderStatus {
  font-size: 4vw;
  font-weight: bold;
  margin: 0 0 4vw 0;
  letter-spacing: 0.05em;
  padding-top: 2vw;
}

.historyOrderInformationDetailArea dl {
  display: flex;
  align-items: flex-end;
  margin-bottom: 1vw;
}

.historyDeliveryDateArea dd {
  font-size: 4vw;
  font-weight: bold;
}

.historyDeliveryDateArea .historyDeliveryDateTime {
  font-size: 3vw;
}

.historyOrderInformationDetailArea dt {
  font-weight: normal;
}

.historyTotalAmountArea dd {
  font-size: 3.5vw;
  font-weight: bold;
  color: #b12704;
}

.historyOrderInformationDetailArea {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.historyOrderInformationDetailArea li {
  flex-grow: 1;
  font-size: 3.2vw;
}

.historyDeliveryDateArea {
  width: 100%;
}

.historyOrderDetailsBtn {
  position: absolute;
  right: 8vw;
}

.historyOrderDetailsBtn a {
  padding: 2.4vw 9vw;
  background-color: #f0e8df;
  color: #333;
  font-weight: bold;
  display: inline-block;
  border-radius: 4px;
  font-size: 3.5vw;
  line-height: 1;
}

.orderInformationArea {
  display: flex;
}

.historyOrderProductListBox {
  display: flex;
  align-items: flex-end;
}

.historyOrderProductListBox li {
  width: 25%;
  display: inline-block;
  margin: 0 0.8vw;
  font-weight: bold;
  letter-spacing: 0.04em;
}

.historyOrderProductListBox li:first-child {
  margin-left: 0;
}

.historyOrderProductListBox li:last-child {
  margin-right: 0;
}

.historyOrderProductListBox li img {
  width: 100%;
  border: 1px solid #d8d8d8;
}

.historyOrderProductOther {
  text-align: center;
  font-size: 3vw;
  padding: 5% 0;
}

.historyNoorder {
  margin: 3vw 0;
  font-size: 3.4vw;
  padding: 0 4vw;
}

.historyOrderProductItem {
  display: inline-block;
  position: relative;
}

.iconEndofsales {
  position: absolute;
  color: #fff;
  padding: 0.5vw 0;
  font-size: 2vw;
  width: 100%;
  text-align: center;
  display: block;
  border: 1px solid #d8d8d8;
  border-top: none;
  line-height: 1;
  bottom: 0;
}

.iconSample {
  color: #333333;
  padding: 0.5vw 0;
  margin-bottom: 1px;
  font-size: 2vw;
  width: 100%;
  text-align: center;
  line-height: 1;
  background-color: #e5e5e5;
}

.iconEndofsales {
  background-color: #464646;
}

.return-list-feature {
  margin-bottom: 7vw;
}

/* --------------------------------
  おすすめ商品
-------------------------------- */
.yourRecommendedArea {
  margin-bottom: 30px;
}

.recommendedProductgenresAera {
  margin-bottom: 15px;
}

.yourRecommendedArea .yourRecommendedTitle,
.recommendedProductgenresAera .recommendeProductgenredTitle {
  color: #fff;
  padding: 4vw;
  font-size: max(3vw, 16px);
  font-weight: bold;
  letter-spacing: 0.18em;
  line-height: 1;
  border: none;
  position: relative;
}

.yourRecommendedArea .yourRecommendedTitle .strong,
.recommendedProductgenresAera .recommendeProductgenredTitle .strong {
  font-size: max(4vw, 20px);
  letter-spacing: 0.09em;
  margin-bottom: 1vw;
  margin-right: 1vw;
}

.yourRecommendedArea .yourRecommendedTitle {
  background-image: linear-gradient(80deg, rgb(255, 144, 182) 15%, rgb(255, 190, 142) 55%, rgb(254, 224, 77) 80%);
  margin-bottom: 4vw;
}

.recommendedProductgenresAera .recommendeProductgenredTitle {
  background-image: linear-gradient(80deg, rgb(99, 198, 244) 15%, rgb(181, 235, 215) 55%, rgb(99, 198, 244) 80%);
  margin-bottom: 0;
}

.yourRecommendedArea .yourRecommendedTitle::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  top: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  width: 38%;
  height: 50%;
  background-image: url(/material/feature/yourrecommended/yourrecommendedtitle.png);
}

.recommendedProductgenresAera .recommendeProductgenredTitle::after {
  content: "";
  display: inline-block;
  position: absolute;
  right: 0;
  top: 57%;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  width: 38%;
  height: 50%;
  background-image: url(/material/feature/yourrecommended/recommended_productgenres_title.png);
}

.yourRecommendedScrollBox {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  /* scrollbar-width: none; */
}

.yourRecommendedScrollBox::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.yourRecommendedScrollBox::-webkit-scrollbar-thumb {
  background: lightgray;
  border-radius: 10px;
}

.yourRecommendedScrollDetail {
  /* display: inline-block; */
  min-width: 100%;
  padding: 0 4vw 4vw 4vw;
}

.yourRecommendedProductsArea {
  display: inline-grid;
  grid-auto-flow: column;
  overflow: hidden;
  grid-template-rows: repeat(2, auto);
  /* column-gap: 3vw;
  row-gap: 3vw; */
}

.yourRecommendedProductsDetail {
  position: relative;
  overflow: hidden;
  /* width: 32vw; */
}

.yourRecommendedArea .productsImg {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1.6vw;
}

.yourRecommendedArea .productsImg img {
  visibility: unset;
  opacity: 1;
  border: 1px solid #d8d8d8;
  object-fit: cover;
  height: 35vw;
}

.yourRecommendedArea .productsImg:hover img {
  opacity: 0.6;
}

.yourRecommendedArea .infoItem-text a:hover {
  text-decoration: none;
}

.yourRecommendedArea .productCode,
.yourRecommendedArea .productName {
  display: inline;
}

.yourRecommendedArea .yourRecommendedProductsDetail:hover {
  text-decoration: none;
}

.yourRecommendedArea .productCode a,
.yourRecommendedArea .productName a {
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-decoration: none;
  color: #333;
}

.yourRecommendedArea .priceAfterSaleOff {
  font-size: 14px;
}

.yourRecommendedArea .text_price {
  font-weight: bold;
}

.yourRecommendedArea .owl-nav button.owl-prev,
.yourRecommendedArea .owl-nav button.owl-next {
  position: absolute;
  top: 4.3%;
  transform: translateX(-50%);
}

.yourRecommendedArea .owl-nav button.owl-prev {
  left: 23.7%;
}

.yourRecommendedArea .owl-nav button.owl-next {
  right: -1.7%;
}

.yourRecommendedScrollArea {
  margin-bottom: 2.5vw;
}

.recommendedProductgenresBox {
  background-color: #f5f5f5;
  padding: 4vw 3.3vw 2.5vw;
  display: grid;
  row-gap: 0;
  column-gap: 5px;
  grid-template-rows: auto auto auto;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  margin-bottom: 2.5vw;
}

.recommendedProductgenresDetail {
  width: 100%;
  margin-bottom: 6px;
  position: relative;
}

.recommendedProductgenresDetail a {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  padding: 3vw 2vw 3vw 3vw;
}

.recommendedProductgenresDetail .categoryName {
  font-size: 3vw;
  color: #333;
  font-weight: bold;
  letter-spacing: 0.03em;
  width: 70%;
}

.recommendedProductgenresDetail .images {
  display: inline-block;
  text-align: right;
}

.recommendedProductgenresDetail .images img {
  height: 100%;
  width: 65%;
  display: inline-block;
}

.ec-mainContent .genreDescriptionArea {
  background-color: #f8f8f8;
  padding: 7vw;
}

.ec-mainContent .genreDescriptionArea .genreDescriptionTitle {
  font-size: 4vw;
  font-weight: bold;
  letter-spacing: 0.09em;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 2vw;
  margin-bottom: 3vw;
}

.ec-mainContent .genreDescriptionArea .genreDescriptionText {
  font-size: 3.2vw;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* --------------------------------
  新規会員登録
-------------------------------- */
.ec-mypageRole {
  margin-right: auto;
  margin-left: auto;
  padding: 0;
  box-sizing: border-box;
  font-size: 4.2667vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}

.ec-mypageRoleCustomer {
  padding: 0 15px;
  font-size: 13px;
}

.ec-mypageRole.ec-mypageRoleCustomer {
  padding: 0;
}

.ec-off1Grid .ec-off1Grid__cell .text01 {
  text-align: center;
  font-weight: bold;
  font-size: 3.7333vw;
}

.ec-textDecoRationUnderLine {
  text-decoration: underline;
}

.registrationFlow ul li a {
  border-radius: 9.3333vw;
  width: 20vw;
  height: 9.0667vw;
  background-color: #F0E8DF;
  text-align: center;
  font-size: 2.9333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.registrationFlow ul li:nth-of-type(2) {
  display: none;
}

.registrationFlow i {
  font-size: 5.3333vw;
}

.registrationFlow ul li a.sp_show {
  padding-top: 2.4vw;
}

.ec-borderedDefs {
  border-top: none;
  font-weight: 500;
  background-color: #F5F5F5;
  padding: 5.3333vw 4vw 8vw;
}

.ec-borderedDefs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ec-borderedDefs ul li {
  list-style: none;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 4vw;
}

.ec-borderedDefs ul li:last-child {
  border-bottom: none;
}

.ec-borderedDefs.ec-entryBasicInfo {
  background-color: #fff;
  border: 1px solid #E0E0E0;
  margin: 0 4vw 5.3333vw;
  width: auto;
  padding: 1.6vw 4vw 0;
}

.ec-borderedDefs.ec-entryBasicInfo dl {
  padding-top: 2.68vw !important;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 1.6vw;
}

.ec-borderedDefs.ec-entryBasicInfo dl:first-of-type dt, .ec-borderedDefs.ec-entryBasicInfo dl:nth-of-type(2) dt {
  width: 17vw !important;
  align-self: center;
  padding-bottom: 0;
}

.ec-borderedDefs.ec-entryBasicInfo dl:first-of-type dd, .ec-borderedDefs.ec-entryBasicInfo dl:nth-of-type(2) dd {
  width: 60vw !important;
  align-self: center;
  font-weight: normal;
}

.ec-borderedDefs.ec-entryBasicInfo dl:last-of-type {
  border-bottom: 0;
}

.ec-borderedDefs.ec-entryBasicInfo dl:first-of-type,
.ec-borderedDefs.ec-entryBasicInfo dl:nth-of-type(2) {
  display: flex;
}

.ec-borderedDefs.ec-entryBasicInfo dl dt {
  font-weight: bold;
  font-size: 3.2vw;
  padding-bottom: 5px;
}

.ec-borderedDefs.ec-entryBasicInfo dl dd {
  font-size: 3.4667vw;
  font-weight: normal;
  line-height: 1.4;
}

.ec-off1Grid__cell .text02 {
  font-size: 4.8vw;
  font-weight: bold;
  padding-left: 4vw;
  padding-bottom: 2.6667vw;
}

.ec-required {
  display: inline-block;
  margin-left: 0.8em;
  vertical-align: 0.5333vw;
  color: #fff;
  font-size: 2.5vw;
  font-weight: normal;
}

.ec-label {
  display: inline-block;
  font-weight: bold;
}

input[type=radio].form-radio {
  opacity: 0;
}

input[type=radio].form-radio + label {
  display: inline-block;
  line-height: 6.4vw;
  font-size: 3vw;
  color: #333;
  position: relative;
  padding-left: 2vw;
  margin-right: 4vw;
  font-weight: bold;
}

input[type=radio].form-radio + label::before {
  content: "";
  border-radius: 50%;
  background-color: #fff;
  border: 0.2667vw solid #BEBEBE;
  width: 5.3333vw;
  height: 5.3333vw;
  position: absolute;
  left: -5.3333vw;
  margin-top: 0.5333vw;
}

input[type=radio].form-radio:checked + label::after {
  content: "";
  border-radius: 50%;
  width: 2.6667vw;
  height: 2.6667vw;
  position: absolute;
  background-color: #E65F6E;
  left: -4.2667vw;
  top: 1.8667vw;
}

input[type=radio].form-radio:checked + label {
  opacity: 1;
}

.ec-borderedDefs dd input[type=radio].form-radio + label {
  font-weight: normal;
  padding-left: 2vw;
}

.ec-borderedDefs dd .business_status_flg_content {
  margin-top: 0;
}

.ec-borderedDefs dd .business_status_flg_content .text {
  padding-top: 15px;
}

.ec-borderedDefs dd .business_status_flg_content .text {
  margin-bottom: 2vw;
  line-height: 1.4;
}

.ec-borderedDefs dd label {
  margin-right: 10px;
  margin-bottom: 0;
}

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

.ec-borderedDefs dd input {
  font-size: 4vw;
  padding: 3.4vw;
}

.ec-borderedDefs .ec-SeperatorTelFaxEntry + .col-3 {
  padding: 0 8px;
}

.ec-mypageRoleCustomer__step2 .input-number .ec-input:first-child {
  padding-right: 8px;
}

.ec-mypageRoleCustomer__step2 .ec-off1Grid__cell .text02, .ec-mypageRoleCustomer__step3 .ec-off1Grid__cell .text02 {
  font-size: 4vw;
}

.ec-mypageRoleCustomer__step3 .backgroundBlackCommon {
  background-color: #6A6A6A !important;
}

.ec-entryComplete .ec-registeredMember {
  background-color: #B49674 !important;
  color: #fff !important;
}

.ec-entryComplete .ec-off1Grid__cell .text01,
.ec-entryComplete h2 {
  text-align: left !important;
  padding-left: 3vw !important;
}

.ec-entryComplete .registrationFlow {
  margin-bottom: 6.666666vw;
}

.ec-mypageRoleCustomer .ec-borderedDefs dl {
  font-weight: normal;
  padding: 0 0 10px;
  border-bottom: none;
  clear: both;
}

.ec-zipInputHelp span {
  display: inline-block;
  color: #333;
  vertical-align: 0.8vw;
  font-size: 3.2vw;
}

.ec-zipInputCustom .row {
  display: block;
}

.ec-zipInputCustom .col-3 {
  display: inline-block;
  width: auto;
  padding-right: 8px;
}

.ec-SeperatorTelFaxEntry {
  display: inline-block;
  margin: 0;
}

.ec-SeperatorTelFaxEntry + .col-3 {
  padding-left: 8px;
}

.ec-zipInputCustom p {
  font-size: 3.4649vw;
  line-height: 1;
  margin-bottom: 1vw;
}

.ec-zipInputHelp {
  display: inline-block;
  margin-left: -1.3333vw;
  margin-bottom: 4.2667vw;
  vertical-align: baseline;
  line-height: 0;
}

.ec-borderedDefs ul li .textNode {
  font-size: 3.2vw;
  margin-top: 1vw;
  padding: 0 4vw;
  line-height: 1.4;
}

.ec-select {
  margin-bottom: 2.5vw;
}

.ec-select + .ec-input {
  margin-bottom: 2.5vw;
}

.ec-storeInformation {
  padding: 0;
  margin-bottom: 0;
}

.ec-borderedDefs .ec-storeInformation dl {
  padding-top: 0;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 4vw;
}

.ec-borderedDefs .ec-storeInformation dl:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}

.ec-storeInformation .text {
  font-size: 3.4667vw;
  font-weight: normal;
}

.ec-borderedDefs .ec-storeInformation dl dd label {
  font-weight: normal;
  margin-bottom: 0;
}

.ec-borderedDefs .ec-storeInformation dl dd {
  line-height: 2;
}

.ec-borderedDefs .ec-storeInformation dl dd input[type=checkbox] {
  width: 5.331vw;
  height: 5.331vw;
  margin-top: -0.5333vw;
  vertical-align: middle;
}

.ec-borderedDefs .ec-storeInformation dl dd select {
  background-color: #fff;
  border-radius: 1.3333vw;
  width: 100%;
  height: 10.6667vw;
  font-size: 3.2vw;
}

.ec-borderedDefs .ec-storeInformation dl.ec-holiday .ec-select select {
  width: 39.4667vw;
  font-size: 3.2vw;
}

.ec-esBusiness .ec-esBusinessChild {
  width: auto;
  margin-right: 0;
  margin-bottom: 2.6667vw;
}

input[type=tel],
input[type=text],
.ec-select select {
  border-radius: 1.3333vw;
  height: 10.6667vw;
  border: 0.2667vw solid #BEBEBE;
  width: 100%;
  margin-bottom: 2.5vw;
  outline: none;
}

#entry_es_person_in_charge_sei,
#entry_es_person_in_charge_mei,
#entry_es_person_in_charge_es_person_in_charge_sei_kana,
#entry_es_person_in_charge_es_person_in_charge_mei_kana,
#entry_es_representatives_sei,
#entry_es_representatives_mei,
#entry_es_representatives_sei_kana,
#entry_es_representatives_mei_kana {
  width: 94%;
}

input[type=text].p-postal-code {
  border-radius: 1.3333vw;
  margin-bottom: 2.6667vw;
  width: 21.3333vw !important;
  font-size: 4vw;
}

.ec-borderedDefs .ec-storeInformation dl.ec-birth .ec-select select {
  width: 22.6667vw;
  font-size: 3.2vw;
  padding: 5px;
}

.ec-borderedDefs .ec-storeInformation dl.ec-birth .ec-select select + .text {
  font-size: 3.2vw;
  font-weight: normal;
  padding-bottom: 0;
}

.ec-borderedDefs .ec-storeInformation dl.ec-birth .ec-select span {
  margin-left: 0;
}

.ec-borderedDefs .ec-storeInformation dl dd .payment {
  display: flex;
  flex-wrap: wrap;
  margin-left: 2.6667vw;
}

.ec-borderedDefs .ec-storeInformation dl dd .payment input {
  margin-top: 0.868vw;
  margin-right: 5px;
}

.ec-mypageRoleCustomer__step1 .ec-zipInputHelp .arrow-right__img {
  width: 6px;
  margin-top: -2px;
}

.ec-mypageRoleCustomer__step1 .ec-borderedDefs ul li {
  margin-bottom: 0;
  padding: 0 0;
}

.ec-mypageRoleCustomer__step1 .ec-borderedDefs {
  padding-bottom: 4vw;
  padding-top: 1vw;
}

.ec-mypageRoleCustomer__step1 .registrationFlow {
  margin-bottom: 0;
}

.ec-mypageRoleCustomer__step1 .ec-borderedDefs dl {
  font-weight: normal !important;
}

.ec-mypageRoleCustomer__step1 .mt-5 {
  margin-top: 2rem !important;
}

.ec-mypageRoleCustomer__step2 input[type=radio], .ec-mypageRoleCustomer__step1 input[type=radio] {
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  border: 1px solid darkgray;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  padding: 3px;
  background: #fff;
}

.ec-mypageRoleCustomer__step2 input[type=radio]:before, .ec-mypageRoleCustomer__step1 input[type=radio]:before {
  content: "";
  display: block;
  height: 100%;
  border-radius: 50%;
}

.ec-mypageRoleCustomer__step2 input[type=radio]:checked:before, .ec-mypageRoleCustomer__step1 input[type=radio]:checked:before {
  background: #E65F6E;
}

.ec-borderedDefs .ec-storeInformation dl dd input {
  font-size: 3.2vw;
}

.es_builling_method + a {
  width: 40.2667vw;
  display: block;
  margin-top: 4vw;
  padding: 2vw 0;
}

.transactionTerms {
  border: 0.2667vw solid #ccc;
  padding: 0 4vw 4vw;
  max-height: 64vw;
  overflow: auto;
  margin: 0 4vw;
}

.ec-shopConfirmButton {
  flex-direction: column-reverse;
}

.ec-shopConfirmButton > button,
.ec-shopConfirmButton > a {
  margin: 0 auto;
}

.ec-borderedDefs .ec-storeInformation dl dd .es_builling_method dl dt label {
  font-weight: bold;
}

.ec-borderedDefs .ec-storeInformation dl dd .es_builling_method dl {
  border-top: 1px solid #E0E0E0;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 2.6667vw;
}

#login_customer_code_popup {
  border-radius: 1.33vw;
}

#modalOrder .modal-header h2 {
  font-weight: bold;
  font-size: 5.8667vw;
  border-bottom: 0.5333vw solid #E0E0E0;
}

#modalOrder .modal-body dl dt {
  background-color: #F0E8DF;
  color: #333;
  font-size: 4.2667vw;
}

.modal-dialog .modal-header {
  border-bottom: 0;
  padding-bottom: 2.6667vw;
  text-align: center;
}

#modalOrder .modal-dialog {
  margin: 0 auto;
  max-width: 100%;
}

#modalOrder .modal-header h2 {
  font-weight: bold;
  font-size: 4.5333vw;
  margin-left: 4vw;
  width: 100%;
  border-bottom: 0;
  text-align: left;
}

#modalOrder .modal-header {
  padding-bottom: 0.8vw;
  padding-left: 0;
  padding-right: 0;
}

#modalOrder .modal-body dl dt {
  background-color: #F0E8DF;
  color: #333;
  font-size: 4vw;
  font-weight: bold;
  padding: 1.3333vw 4vw;
  letter-spacing: 0.06em;
}

#modalOrder .modal-body dl dd {
  padding: 7vw 5vw 8vw;
}

#modalOrder .modal-body dl dd:last-of-type {
  padding-bottom: 0;
}

#modalOrder .modal-body ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0;
}

#modalOrder .modal-body ul li {
  list-style: none;
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.7333vw;
  padding-top: 8vw;
  padding-bottom: 8vw;
}

#modalOrder .modal-body ul li:first-of-type {
  padding-top: 0;
}

#modalOrder .modal-body .payment-method {
  margin: 5.3vw 0;
}

#modalOrder .modal-body ul li:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

#modalOrder .modal-body h3 {
  font-weight: bold;
  font-size: 4vw;
  padding-bottom: 2vw;
}

#modalOrder .modal-body h3 {
  font-weight: bold;
  font-size: 4vw;
  padding-bottom: 2vw;
}

#modalOrder .modal-body dl dd ul li div:nth-of-type(2) .content {
  background-color: #F5F5F5;
  padding: 7vw;
}

#modalOrder .modal-body h4 {
  font-weight: bold;
  font-size: 3.7333vw;
  line-height: 1.5;
}

#modalOrder .modal-body .box-content {
  border-radius: 1.3333vw;
  border: 0.2667vw solid #D8D8D8;
  padding: 4vw 4vw 4vw;
  margin: 0 7vw;
}

#modalOrder .modal-body .box-content .bill {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  flex-direction: column;
}

#modalOrder .modal-body .box-content .bill .col-sm-6 {
  max-width: 100%;
}

#modalOrder .modal-body .box-content .bill div:last-of-type {
  position: relative;
}

#modalOrder .modal-body .box-content .bill .hand {
  position: absolute;
  left: 5.0667vw;
  top: 9.6vw;
  width: 27.7333vw;
}

#modalOrder .modal-body dl dd .box-content {
  padding: 5vw;
  margin: 0;
}

#modalOrder .modal-body .box-content .text-arrow {
  margin: 15px 0;
}

#modalOrder .modal-body dl dd h4::before {
  content: "";
  width: 1.6vw;
  height: 1.6vw;
  background-color: #C3B3A1;
  display: inline-block;
  margin-right: 1.3333vw;
  vertical-align: baseline;
}

#modalOrder .modal-dialog {
  margin: 0 auto;
  max-width: 100%;
}

#modalOrder .modal-content {
  width: 90% !important;
  padding: 0 0 8vw;
  margin: 0.5rem auto;
}

#modalOrder .modal-content .modal-body {
  padding: 0;
}

#modalOrder .modal-header button {
  font-size: 4vw;
  font-weight: bold;
  opacity: 1;
  margin: -1rem 0 0;
  padding: 1rem 1rem 0.7rem;
}

#modalOrder .modal-body ul li ul li {
  padding: 0 0 4vw;
  margin-bottom: 5vw;
}

#modalOrder .modal-body ul li ul li:last-of-type {
  margin-bottom: 0;
}

.row .box-content .font-size__content {
  margin-bottom: 5vw;
}

.ec-mypageRole h1 {
  border-bottom: 0.5333vw solid #E0E0E0;
  color: #333;
  font-size: 4.5333vw;
  margin-bottom: 4.5333vw;
  padding-bottom: 2.6667vw;
  font-weight: bold;
  padding-top: 4vw;
  padding-left: 4vw;
}

.ec-mypageRole h2 {
  border-bottom: 0.5333vw solid #E0E0E0;
  color: #333;
  font-size: 4.5333vw;
  margin-bottom: 4.5333vw;
  padding-bottom: 2.6667vw;
  font-weight: bold;
  padding-top: 4vw;
  padding-left: 4vw;
}

.ec-mypageRole h3 {
  background-color: #F0E8DF;
  font-size: 4.2667vw;
  font-weight: bold;
  padding: 2.6667vw 4vw;
}

.ec-mypageRole .ec-blockBtn--action-button {
  margin-bottom: 10px;
}

.ec-entryBasicInfoConfirm {
  background-color: #F5F5F5;
  margin: 5.3333vw 4vw 8vw;
  width: auto;
  padding: 5vw 4vw;
}

.ec-entryBasicInfoConfirm ~ .ec-entryBasicInfoConfirm {
  margin-top: 0;
}

.ec-mypageRole .ec-entryBasicInfoConfirm dl {
  border-bottom: 1px solid #E0E0E0;
  padding-top: 7px;
}

.ec-mypageRole .ec-entryBasicInfoConfirm dl:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ec-mypageRole .ec-entryBasicInfoConfirm dl:first-child {
  padding-top: 0;
}

.ec-mypageRole .ec-entryBasicInfoConfirm dl dt {
  font-size: 3.2vw;
  font-weight: bold;
  margin-bottom: 1.5vw;
}

.ec-mypageRole .ec-entryBasicInfoConfirm dl dd {
  line-height: 1.4;
  font-size: 3.4667vw;
  font-weight: normal;
}

.ec-mypageRole .ec-entryBasicInfoConfirm dl dd a.ec-entryUrl {
  color: #333;
  text-decoration: underline;
}

.ec-mypageRole .text03 {
  text-align: left;
  font-size: 3.4667vw;
  padding: 0 4vw 5.3333vw;
}

.ec-mypageRole .text04 {
  text-align: left;
  font-size: 3.4667vw;
  padding: 0 4vw 2.6667vw;
  font-weight: bold;
}

.ec-mypageRole.complete-password dl dt,
.ec_productContent .shopping-complete-note dl dt {
  background-color: #F0E8DF;
  font-size: 3.7333vw;
  font-weight: bold;
  padding: 2.6667vw 4vw;
}

.ec-mypageRole.complete-password dl dd,
.ec_productContent .shopping-complete-note dl dd {
  padding: 5.3333vw 4vw;
  font-size: 3.4667vw;
}

.ec-mypageRole.complete-password dl dd ul,
.ec_productContent .shopping-complete-note dl dd ul {
  list-style: none;
  padding: 2.6667vw 5.3333vw 5.3333vw;
  margin: 0;
  background-color: #F5F5F5;
}

.ec-mypageRole.complete-password dl dd ul li,
.ec_productContent .shopping-complete-note dl dd ul li {
  list-style: none;
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.2vw;
  margin-bottom: 2.6667vw;
  padding: 2.6667vw 0 5.3333vw;
}

.ec-mypageRole.complete-password dl dd ul li:last-child,
.ec_productContent .shopping-complete-note dl dd ul li:last-child {
  border-bottom: none;
  padding: 2.6667vw 0 0;
  margin-bottom: 0;
}

.ec-mypageRole.complete-password dl dd ul li h4,
.ec_productContent .shopping-complete-note dl dd ul li h4 {
  font-size: 3.4667vw;
  font-weight: bold;
  margin-bottom: 1.3333vw;
}

.ec-mypageRole.complete-password dl dd ul li h4::before,
.ec_productContent .shopping-complete-note dl dd ul li h4::before {
  content: "";
  width: 1.6vw;
  height: 1.6vw;
  background-color: #C3B3A1;
  display: inline-block;
  margin-right: 2.6667vw;
}

.ec-contactInfo {
  justify-content: center;
  display: flex;
  align-items: center;
  border: 0.5333vw solid rgb(195, 179, 161);
  border-radius: 1.3333vw;
  margin: 0 4vw 5.3333vw;
}

.complete-password .ec-contactInfo {
  margin: 0 4vw 5.3333vw;
}

.ec-contactInfo .box-contact {
  margin: 0 1.3333vw;
  padding: 4vw 0 13.8667vw;
}

.ec-contactInfo .box-contact .ec-fClear {
  position: absolute;
  left: -2.9333vw;
}

.ec-contactInfo .box-contact .ec-fRight {
  font-size: 3.2vw;
}

.ec-contactInfo .ec-fClear img,
.ec-fLeft_custome {
  margin-right: 6px;
}

.ec-fRight .phone_number {
  font-size: 3.8vw;
  font-weight: bold;
}

.ec-contactInfo .box-contact .text01 {
  font-size: 3.4667vw;
  font-weight: bold;
  margin-bottom: 2.6667vw;
  text-align: center;
}

.ec-contactInfo img {
  width: 9.3333vw;
  margin-top: -12.8vw;
  margin-right: 2.6667vw;
  margin-left: 2.6667vw;
}

.ec-contactInfo .ec-fClear img {
  width: 8.8vw;
  margin-top: 0;
  margin-left: 23px;
  margin-right: 5px;
}

.ec-role h1 {
  font-size: 4.3vw;
  font-weight: bold;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 2.6667vw;
  padding-left: 4vw;
  padding-right: 4vw;
}

.ec-role h2 {
  font-size: 4.3vw;
  font-weight: bold;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 2.6667vw;
  padding-left: 4vw;
  padding-right: 4vw;
}

.ec-forgotRole .ec-forgotRole__intro {
  font-size: 3.4667vw;
}

.ec-forgotRole .ec-forgotRole__intro .mb-5 {
  margin-bottom: 5.3333vw !important;
}

.ec-borderedDefs.ec-borderNone {
  padding: 4vw 4vw 5.3333vw;
}

.ec-borderedDefs.ec-borderNone dl {
  border-bottom: 1px solid #E0E0E0;
  padding: 0 0 4vw;
  margin-bottom: 0;
}

.ec-borderedDefs.ec-borderNone dl dt {
  line-height: 2.2;
}

.ec-borderedDefs.ec-borderNone dl dd {
  max-width: 173.3333vw;
  font-weight: normal;
}

.ec-borderedDefs.ec-borderNone dl:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ec-forgetCompleteRole .telFax-btn__bg {
  width: 78.4vw;
}

.ec-contactTitle--custome {
  color: #333 !important;
  font-size: 3.7333vw;
  font-weight: bold;
  text-decoration: none !important;
  display: inline-block;
  padding: 3.7333vw 5.3333vw 2.6667vw;
}

.ec-forgotCustomerInfo .ec-contactText {
  margin-bottom: 3.7333vw;
  font-size: 3.465vw;
}

.ec-forgotRole .ec-contactInfo {
  margin: 0 0 5.3333vw;
}

.ec-forgotRole .ec-borderedDefs .ec-errorMessageCustom {
  margin-bottom: 2vw;
}

.ec-forgetCompleteRole .ec-borderNone {
  background-color: transparent;
  padding: 0;
  margin-top: 2.6667vw;
}

.ec-forgetCompleteRole .ec-borderNone dl {
  padding-bottom: 1.3333vw;
  margin: 0 4vw 2.6667vw;
}

.ec-forgetCompleteRole .ec-borderNone dl dt {
  padding-left: 0;
  font-size: 3.46667vw;
}

.ec-forgetCompleteRole .ec-borderNone dl dd {
  font-size: 3.7333vw;
}

.ec-forgetCompleteRole .box-button {
  margin: 7vw auto 0;
  text-align: center;
}

.ec-borderNone h3 {
  background-color: #F0E8DF;
  padding: 2.6667vw 0 2.6667vw 4vw;
  font-weight: bold;
  font-size: 4vw;
  margin: 0 4vw 5.3333vw;
}

.ec-mypageRole.complete-password dl dd a {
  color: #333;
  text-decoration: underline;
}

.complete-password .ec-borderNone {
  padding: 0;
  background-color: transparent;
  font-size: 3.7333vw;
  font-weight: normal;
}

.complete-password .ec-borderNone p {
  padding: 0 4vw;
  line-height: 1.4;
}

.complete-password .ec-borderNone h3 {
  font-size: 4vw;
  font-weight: bold;
  background-color: transparent;
  border-bottom: 0;
  padding-left: 0;
  margin-bottom: 2.6667vw;
}

.complete-password .ec-borderedDefs.ec-borderNone dl {
  padding: 5.3333vw 0 3.3333vw;
  margin: 0 4vw;
}

.complete-password .ec-borderedDefs.ec-borderNone dl:last-child {
  padding-top: 1.3333vw;
}

.complete-password .ec-borderedDefs.ec-borderNone dl dt {
  padding-left: 0;
  font-weight: bold;
  font-size: 3.7333vw;
}

.ec-fClear {
  display: flex;
  width: 100%;
  margin-bottom: 5.3333vw;
}

.ec-fLeft {
  margin-top: 0.8vw;
  margin-right: 0.8vw;
}

.ec-fRight {
  font-size: 3.2vw;
  line-height: 4.3vw;
}

.box-contact .ec-fClear {
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
  justify-content: center;
  margin-bottom: 0;
}

.box-contact .ec-fLeft {
  margin-top: -1.3333vw;
  margin-right: 0.8vw;
}

.ec-formRealPassword {
  margin: 0 4vw;
}

.ec-formRealPassword p {
  font-size: 3.4667vw;
}

.ec-realPassword {
  height: auto;
  box-sizing: border-box;
}

.ec-realPassword .dt_customer {
  display: flex;
  align-items: center;
}

.ec-realPassword .dt_customer .ec-label {
  font-size: 3.2vw !important;
  font-weight: bold;
}

.ec-realPassword .ec-Customer_custome p {
  font-size: 3.7333vw;
  font-weight: normal;
}

.ec-borderedDefs .dd_customeInput {
  font-size: 3.2vw;
  margin-bottom: 0;
  padding-bottom: 4vw;
}

.ec-blockBtn--action-button02 {
  background-color: #6A6A6A;
  align-items: center;
  justify-content: center;
  font-weight: normal;
  font-size: 4vw;
  border-radius: 1.3333vw;
}

.ec-registerCompleteRole {
  padding: 0;
  margin: 0 4vw;
  width: auto;
}

.ec-registerCompleteRole p {
  font-weight: bold;
  font-size: 4.2667vw;
}

.ec-registerCompleteRole a.btn {
  font-size: 4vw;
  font-weight: bold;
  border: none;
  width: 72vw;
}

#modalFirstIntoSite .modal-header {
  border-bottom: none !important;
  padding: 10px 0;
}

#modalFirstIntoSite .modal-body {
  padding: 0 0 5%;
}

#modalFirstIntoSite .ec-width-two-column .col-5 {
  padding: 0 0 0 8px;
}

.ec-forgotRole .ec-forgotRole__form .ec-label {
  font-size: 3.2vw !important;
}

.ec-forgotRole .ec-forgotRole__form dl:first-of-type {
  margin-bottom: 3vw;
}

.ec-width-two-column {
  width: 100%;
}

.ec-width-two-column.ec-border-right {
  border-right: none;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 7vw;
  margin-bottom: 7vw;
  font-size: 3.2vw;
}

#modalFirstIntoSite .ec-width-two-column {
  font-size: 3.2vw;
}

.ec-width-two-column .col.d-flex {
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1.3;
  padding: 0 !important;
}

.ec-width-two-column .row {
  margin: 0;
  justify-content: space-between;
  padding: 0 4vw;
}

.modal-body .ec-guide-method a {
  width: 78.4vw;
  margin: 1.3333vw 0;
  height: 10.6667vw;
  font-size: 4vw;
  line-height: 10.6667vw;
  padding: 0;
  text-align: center;
  border-radius: 1.3333vw;
}

.ec-width-two-column .ec-after-login {
  padding: 0;
}

.ec-arrow-site {
  margin-top: 0;
  width: 14px;
  height: 24px;
  display: inline-block;
  margin-left: 21px !important;
  margin-right: 11px;
}

#modalFirstIntoSite .modal-body .ec-two-column {
  flex-wrap: wrap;
  margin-top: 4vw;
}

#modalFirstIntoSite .modal-header .close,
#modalFirstIntoSiteLogin .modal-header .close {
  opacity: 1;
}

.ec-formLogin-res .row {
  margin: 0;
}

.ec-borderedDefs .ec-storeInformation dl dd input#entry_es_recovery_process_1 + label {
  margin-right: 45.41vw;
}

.ec-borderedDefs dd {
  padding: 0;
  width: 100%;
  margin-bottom: 0;
  line-height: 1;
}

.ec-loginContentBottom .ec-loginContentBottom__title--1 {
  font-size: 4vw;
  line-height: 6.8vw;
  margin-top: 0 !important;
}

.ec-optionRememberMe {
  line-height: 7.7333vw;
  font-size: 3.2vw;
  margin-left: 1.3333vw;
}

.ec-optionRememberMe .form-check {
  padding-left: 4vw;
}

.ec-change-inputPassword i,
.ec-change-inputPassword img {
  position: absolute;
  right: 2.6667vw;
  top: 3.5vw;
  cursor: pointer;
  width: 5.0667vw;
  height: 3.7333vw;
}

#modalFirstIntoSiteLogin input[type=password],
.ec-mainContent input[type=password] {
  margin-bottom: 1.3333vw;
  border-radius: 1.33vw;
}

.ec-flex-navi img {
  width: 1.6vw;
  height: 2.6667vw;
}

.ec-ForgotAndContact img {
  width: 1.3333vw;
  height: 2.4vw;
}

.registrationFlow .inThreeDay {
  font-size: 11px;
  font-weight: bold;
}

.ec-mypageRoleCustomer .ec-borderedDefs dl {
  font-weight: 500;
  padding: 3vw 0;
  clear: both;
}

.ec-mypageRoleCustomer__step2 .tildeBusinessHours {
  font-weight: bold;
}

.ec-realPassword .enter_twice, .ec-borderedDefs .dd_customeInput, .ec-realPassword .enter_twice,
.ec-forgetCompleteRole .ec-TelFaxEntryForm,
.ec-forgetCompleteRole .postalCodeInfo a {
  font-size: 3.1983vw !important;
}

.ec-formRealPassword .ec-borderedDefs.ec-borderNone {
  padding: 4vw 5.318vw 1.3333vw !important;
}

.ec-layoutRole .ec-footerRole {
  margin-top: 2px !important;
}

.ec-registerCompleteRole p,
.ec-existingEntryRole .telFax-btn__bg {
  font-size: 3.4vw !important;
}

.ec-registerCompleteRole a.btn {
  width: 78.359vw !important;
  font-size: 4.02vw !important;
}

.ec-existingEntryRole .telFax-btn__bg {
  height: 10.688vw;
}

/* .ec-existingEntryRole .ec-input .ec-errorMessage,
.ec-contactRoleCustom .ec-errorMessage{
    color: #B12704 !important;
    font-weight: normal !important;
} */
/* .ec-contactRoleCustom .ec-errorMessage {
    padding-left: 10px !important;
} */
.modal-content .ec-pageConfirmTitle {
  font-size: 3.4667vw;
  font-weight: bold;
  text-align: center;
  line-height: 1.7em;
}

/* Height of arrow right image in entry */
.ec-mypageRole .registrationFlow img {
  width: 1.07vw;
  height: 2.4vw;
  margin: 0 1.6vw;
}

.ec-mypageRole .businessStatusFlg .restrict_input_numberic {
  width: 23.99vw;
}

.ec-mypageRole .businessStatusFlg .line {
  display: flex;
  align-items: center;
}

.ec-mypageRoleCustomer__step2 input[type=radio], .ec-mypageRoleCustomer__step1 input[type=radio] {
  width: 5.333vw;
  height: 5.333vw;
}

.ec-mypageRole .ec-borderedDefs #entry_business_status_flg, .ec-mypageRole .ec-borderedDefs #entry_store_type {
  display: flex;
  align-items: center;
}

.ec-mypageRole .ec-borderedDefs input[type=checkbox], input[type=radio] {
  margin-right: 10px;
}

.ec-mypageRoleCustomer .ec-borderedDefs #entry_business_status_flg_1,
.ec-mypageRoleCustomer .ec-borderedDefs #entry_store_type_1 {
  margin-left: 30px;
}

.ec-mypageRole .ec-zipInputCustom .ec-zipInputHelp {
  margin-left: 10px !important;
}

.ec-mypageRoleCustomer .ec-borderedDefs label {
  margin-right: 0 !important;
}

.ec-mypageRoleCustomer__step2 .ec-entryBasicInfo {
  /* line-height: 7vw !important; */
}

.ec-mypageRoleCustomer__step2 .ml-md-0, .ec-mypageRoleCustomer__step2 .mx-md-0 {
  margin-left: 0 !important;
}

.ec-mypageRoleCustomer__step2 .ec-borderedDefs input[type=checkbox], input[type=radio] {
  margin-right: 0 !important;
}

.ec-mypageRoleCustomer__step2 #entry_es_representatives_sei,
.ec-mypageRoleCustomer__step2 #entry_es_representatives_sei_kana,
.ec-mypageRoleCustomer__step2 #entry_es_person_in_charge_sei,
.ec-mypageRoleCustomer__step2 #entry_es_person_in_charge_es_person_in_charge_sei_kana {
  margin-bottom: 3.5vw;
}

.ec-mypageRoleCustomer__step2 .ec-holiday .ml-md-0 {
  /* line-height: 10.5vw !important; */
}

.ec-mypageRoleCustomer__step2 .ec-borderedDefs .ec-storeInformation dl dd .payment {
  margin-left: 0 !important;
}

.ec-mypageRoleCustomer__step2 .ec-borderedDefs .ec-storeInformation dl dd .payment input,
.ec-mypageRoleCustomer__step1 input[type=radio],
.ec-mypageRoleCustomer__step2 #entry_es_builling_method_0,
.ec-mypageRoleCustomer__step2 #entry_es_builling_method_1 {
  margin-right: 1.6vw !important;
}

.ec-mypageRoleCustomer__step2 #entry_es_recovery_process label[for=entry_es_recovery_process_0] {
  width: 26%;
}

.ec-mypageRoleCustomer__step2 #entry_es_recovery_process label[for=entry_es_recovery_process_1] {
  width: 52%;
}

.ec-mypageRoleCustomer__step2 #entry_es_builling_method label[for=entry_es_builling_method_0] {
  margin-right: 10vw !important;
}

.ec-mypageRoleCustomer__step2 .row {
  margin-right: 0 !important;
}

.ec-mypageRoleCustomer__step1, .ec-mypageRoleCustomer__step2,
.ec-mypageRole .ec-label,
.ec-mypageRoleCustomer p.text {
  font-size: 3.4649vw !important;
}

.ec-mypageRoleCustomer__step1 .ec-editRole .businessStatusFlg .ec-label, .ec-mypageRoleCustomer__step1 .ec-zipInputCustom p {
  font-size: 3.4vw !important;
  margin-bottom: 1.5vw;
}

.ec-mypageRoleCustomer__step2 #entry_es_builling_method {
  display: inline-flex;
  align-items: center;
}

.ec-mypageRoleCustomer__step2 .transactionTerms {
  font-size: 3.2vw;
  line-height: 4.8vw;
}

.ec-mypageRoleCustomer__step2 .ec-birth select {
  margin: 0 !important;
}

.complete-tel-fax .ec-contactInfo {
  margin: 4vw 0 5.3333vw !important;
}

.ec-telFaxComplete,
.errorTelFax {
  max-width: 960px !important;
}

.complete-tel-fax p {
  font-size: 3.4667vw !important;
}

.ec-TelFaxEntryFormError,
.customer_serviceTitle,
.phone_time,
.ec-mypageRoleCustomer .sp_show span.text,
.ec-mypageRoleCustomer .form-info dl dt .ec-label,
.shopping-cart__step1 .ec-fRight .text {
  font-size: 3.2vw !important;
}

.ec-telFaxComplete div {
  font-size: 3.7333vw !important;
}

.ec-telFaxComplete .backgroundBlackCommon,
.complete-tel-fax .telFaxError-btn__back {
  font-size: 4vw !important;
  width: 78.4vw;
  height: 10.688vw;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  background-color: #6A6A6A;
}

.errorTelFax {
  padding: 0 !important;
}

.errorTelFax .complete-tel-fax .ec-TelFaxEntryFormError {
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  margin-bottom: 6vw;
}

.errorTelFax .bg-forgot-custom-1 {
  font-size: 3.7333vw !important;
}

#postal_code_1, #postal_code_2 {
  width: 21.323vw;
  height: 10.6623vw;
}

.errorTelFax .ec-TelFaxEntryFormError .couponsLabel {
  padding-right: 0 !important;
}

.iconPhoneTelPaxComplete {
  margin-top: 5px !important;
}

.ec-telFaxComplete .box-contact .ec-fRight {
  padding-top: 1vw;
}

.ec-telFaxComplete .aboutTemporaryTelFax {
  margin-left: -15px !important;
  margin-right: -15px !important;
}

.ec-mypageRoleCustomer .sp_show .phone_number {
  font-size: 4.2644vw !important;
}

.ec-DeliveryPage .ec-borderedDefs dt label {
  font-size: 3.2vw;
}

#page_delivery_complete .ec-layoutRole__main__delivery .text {
  padding-top: 2.6667vw;
  padding-left: 4vw;
  font-size: 3.4649vw;
}

.ec-mypageRoleCustomer__step2 .ec-entryBasicInfo dl {
  border-bottom: 1px solid #E0E0E0;
}

.ec-mypageRoleCustomer__step2 .ec-entryBasicInfo dl:last-child {
  border-bottom: none;
}

.ec-mypageRoleCustomer__step2 .ec-storeInformation dl {
  border-bottom: 1px solid #E0E0E0;
  padding-top: 0;
}

.ec-mypageRoleCustomer__step2 .ec-storeInformation .text-nowrap label {
  font-size: 3.7333vw;
  line-height: 1.5;
}

.ec-mypageRoleCustomer__step2 .ec-storeInformation .text {
  padding-bottom: 5px;
}

.ec-mypageRoleCustomer__step2 .otherInfo_signin {
  padding-bottom: 6vw;
}

.ec-mypageRoleCustomer__step2 .ec-storeInformation .col-lg-5 {
  width: 100%;
  max-width: none;
  flex: none;
}

.entry-shop__transactionTerms .box_term {
  margin-top: -17px;
}

.registrationFlow ul li {
  list-style: none;
  display: flex;
  align-items: center;
}

.registrationFlow ul li p {
  border-radius: 5.6vw;
  width: 19vw;
  height: 9.0667vw;
  background-color: #F0E8DF;
  text-align: center;
  font-size: 2.9333vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #333;
  font-weight: bold;
  flex-wrap: wrap;
  padding: 0 2.6667vw;
}

.registrationFlow ul li p.active {
  background-color: #B49674;
  color: #fff;
}

.ec-forgetCompleteRole .ec-forgotPWConfirm .ec-borderBt {
  padding-bottom: 4vw !important;
}

section.ec-formLogin-res {
  padding-top: 4vw !important;
}

.ec-border-right .ec-title-line-height,
.ec-width-two-column .ec-title-line-height {
  font-size: 4.2667vw;
}

/* End Khoa */
@media only screen and (max-width: 375px) {
  .ec-borderedDefs .ec-storeInformation dl dd input#entry_es_recovery_process_1 + label {
    margin-right: 43.2vw;
  }
}
/* .mypage-change .ec-mypageRoleCustomer .ec-errorMessage {
    padding-left: 2vw !important;
} */
.mypage-change .desc {
  padding: 2vw 0;
}

.mypage-change .contact {
  padding-bottom: 2.5vw;
}

.mypage-change .form-info dl dd .inputName01 input,
.mypage-change .form-info dl dd #entry_email_first,
.mypage-change .form-info dl dd #entry_es_business,
.mypage-change .form-info dl dd #entry_es_business2 {
  margin-bottom: 2.3333vw;
}

.mypage-change .form-info dl dd input, .mypage-change .form-info dl dd select {
  font-size: 4vw !important;
}

.mypage-change .ec-mypageRoleCustomer .form-info .store-info dl:last-of-type {
  border-bottom: 1px solid #E0E0E0 !important;
}

.modal-body .sale_information img {
  width: 83%;
}

.paymentAnnotation {
  margin-top: 2vw;
  font-size: 3.2vw;
  text-indent: -1em;
  padding-left: 1em;
}

.sale_information {
  margin-bottom: 4vw;
}

.priceInformationTitle,
.sale_informationTitle {
  font-size: 4.2667vw;
  margin-bottom: 2vw;
  letter-spacing: 0.02em;
}

.sale_informationTitle {
  margin-top: 5vw;
}

.priceInformationText,
.sale_informationText {
  font-size: 3.2vw;
  letter-spacing: 0.02em;
}

.priceInformationText {
  margin-bottom: 10px;
}

.sale_informationText {
  margin-bottom: 20px;
}

.priceInformationSubtext {
  font-weight: bold;
  text-align: left;
}

h4 {
  margin-bottom: 3vw;
}

.content .mb-4 {
  margin-bottom: 9vw !important;
}

/* --------------------------------
  common
-------------------------------- */
.pc_show {
  display: none;
}

.sp_show {
  display: block;
}

.pc_show-banner {
  display: none !important;
}

.sp_show-banner {
  display: block !important;
}

ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.btn:hover {
  color: unset !important;
}

button:focus,
.btn-primary:focus {
  outline: none;
  box-shadow: none;
  border: none !important;
}

h2.ec-guide-title {
  border-bottom: none;
}

h2.ec-guide-title,
.ec-guide-title,
.ec-pageConfirmTitle {
  padding: 2.5vw 4vw;
  background: #F0E8DF;
  font-size: 3.7333vw;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 5vw;
}

input:focus,
.form-control:focus,
.form-select:focus,
.searchBlock input:focus,
.ec-headerSearch__keyword input[type=search]:focus {
  border-color: #00B0EC !important;
  box-shadow: none;
  outline: none;
}

.ec-layoutRole {
  border-top: 5px solid rgb(0, 176, 236);
  position: relative;
}

.ec-shopConfirmButton {
  display: flex;
  justify-content: center;
  padding-bottom: 30px;
}

.textred {
  color: #B12704;
}

.tomorrow-order {
  position: relative;
  color: #00B0EC;
  font-size: 5.0667vw;
  font-weight: bold;
  letter-spacing: -0.2667vw;
  vertical-align: sub;
  margin-left: 2px;
  top: -3px;
}

.tomorrow-order:nth-of-type(3) {
  margin-left: 0;
}

.tomorrow-order:nth-of-type(4) {
  margin-left: 2px;
}

.tomorrow-date {
  position: relative;
  color: #00B0EC;
  font-size: 3.2vw;
  font-weight: bold;
  letter-spacing: -0.2667vw;
  margin-left: -0.6vw;
  line-height: 4.5333vw;
  display: inline-block;
  vertical-align: sub;
  top: -3px;
}

ol.ec-breadcrumb-item {
  padding: 4vw 4vw;
  background-color: initial;
}

ol.ec-breadcrumb-item li .material-icons {
  font-size: 4vw;
}

ol.ec-breadcrumb-item li {
  list-style: none;
  font-size: 2.9333vw;
  padding-right: 1.6vw;
  line-height: 1.7;
}

ol.ec-breadcrumb-item li span {
  color: #333;
  text-decoration: none;
  font-size: 2.9333vw;
  padding-right: 1.3333vw;
  display: inline-block;
  vertical-align: top;
}

.ec-mainContent {
  width: 100%;
  position: relative;
}

.ec-shopping-cart {
  border: 1px solid #E0E0E0;
  padding-right: 15px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: normal;
}

.ec-shopping-cart .text_price {
  font-size: 16px;
  font-weight: bold;
}

.ec-login-cart-con {
  position: relative;
  /*width: 32px;*/
  display: inline-block;
  margin-left: 15px;
}

.ec-login-cart-con img {
  width: 8.5333vw;
}

.ec-Cart_total_quantity {
  position: absolute;
  background: rgb(177, 39, 4);
  color: white;
  font-size: 2.6667vw;
  padding: 0.5333vw;
  border-radius: 1.0667vw;
  text-align: center;
  width: 5.3333vw;
  transition: transform 0.2s;
  right: 61%;
  top: -1vw;
  font-weight: bold;
}

.ec-off4Grid .ec-off4Grid__cell {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 0 auto 4vw;
  flex-direction: column;
}

.backgroundBlackCommon,
.btnEditDelivery,
.groupBtnCommonDeli a,
.groupBtnCommonDeli .btn,
.ec-product-itemBtn .backgroundDrakCommon,
.es_builling_method + a,
.ec-blockBtn--action,
#modalOrder .modal-footer button,
.ec-mainContent #detail_post .return-list a {
  background-color: #6A6A6A !important;
  color: #fff;
}

.groupBtnCommonDeli .backgroundDrakCommon_unable {
  background-color: unset !important;
}

.ec-blockBtn--action-button {
  background-color: #B49674;
  color: #fff;
}

.backgroundBlackCommon,
.btnEditDelivery,
.groupBtnCommonDeli a,
.groupBtnCommonDeli .btn,
.ec-product-itemBtn .backgroundDrakCommon,
.ec-blockBtn--action-button,
.ec-blockBtn--action,
#modalOrder .modal-footer button,
.es_builling_method + a,
.backgroundDrakCommon,
.ec-mainContent #detail_post .return-list a,
.ec-productHistory .ec-product-itemBtn .backgroundDrakCommon_unable {
  font-size: 3.6vw;
  border-radius: 4px;
  display: inline-block;
  text-align: center;
  border: none;
  text-decoration: none !important;
  -webkit-appearance: none;
  line-height: unset;
  font-weight: unset;
}

.backgroundLightGreyCommon {
  background-color: #F0E8DF;
  width: 44vw;
  height: 10.6667vw;
  font-size: 3.2vw;
  color: #333;
  text-align: center;
  border-radius: 1.3333vw;
}

.backgroundGreyCommon.Btnsp {
  margin-bottom: 3vw;
}

.backgroundBlackCommon:hover {
  color: white;
  text-decoration: none;
}

.ec-pageCustomize .ec-pager__item {
  background-color: white;
  border: 0.2667vw solid #d8d8d8;
  font-size: 3.4667vw;
  margin-bottom: 5px;
}

.ec-pageCustomize .ec-pager__item a {
  padding: 1.3333vw 3.2vw;
  color: #333;
  font-size: 3.4667vw;
}

.ec-pageCustomize .ec-pager__item--active {
  background-color: #333;
  border: 0.2667vw solid #d8d8d8;
  color: white;
  font-size: 3.4667vw;
}

.ec-pager {
  margin-bottom: 30px;
}

.product_page .ec-sidebar .content {
  padding-top: 0;
}

.ec-SideLeftSearchProduct input {
  border: 1px solid #BEBEBE;
  width: 200px;
  border-right: none;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  font-size: 14px;
}

.ec-SideLeftSearchProduct .input-group-text {
  background-color: #6A6A6A;
  height: 37px;
  margin-top: -1px;
}

.ec-SideLeftSearchProduct .input-group-append {
  margin-top: 0;
}

.input-group-append .fa-search {
  color: #fff;
}

.ec-SideLeftListCategoryHeader {
  text-align: center;
  line-height: 32px;
  font-size: 16px;
}

.accordion .card-header {
  background-color: #E0E0E0;
  border: none;
  padding-bottom: 2px;
}

.accordion .card-header .btn {
  background-color: #fff;
  position: relative;
  font-size: 14px;
  border-radius: 0;
}

/* tuan anh - pop up menu */
.accordion .card-header .active {
  background-color: #C3B3A1;
}

/**/
.accordion .card-header .btn .fa-angle-down {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  right: 20px;
}

.ec-SideLeftListCategory {
  background-color: #f0e8df;
  margin: 15px 0;
  display: none;
}

.ec-SideLeftSearchProduct {
  display: none;
}

.ec-SideLeftListCategory ul li {
  height: 45px;
  background-color: #F9F5F1;
  list-style: none;
  border-bottom: 2px solid #ccc;
  line-height: 45px;
  padding-left: 25px;
  font-size: 13px;
}

.form-search-side-left, .ec-categoryLeftMenu {
  background-color: #F0E8DF;
  padding: 10px;
  display: none;
}

.side_left_product {
  display: none;
}

.form-search-side-left h2 {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.form-search-side-left-box {
  background-color: #F5F5F5;
}

.form-search-side-left-box .searchBlock {
  padding: 5.3333vw 5.3333vw 4vw;
  border-bottom: 1px solid #E0E0E0;
}

.form-search-side-left-box .searchBlock:last-child {
  border-bottom: none;
}

.form-search-side-left-box .searchBlock .titleSub {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}

.form-search-side-left-box .searchBlock input {
  width: 16vw;
  height: 9.3333vw;
  border-radius: 0.8vw;
  background-color: #fff;
  border: 0.2667vw solid #BEBEBE;
  display: inline-block;
  font-size: 3.2vw;
}

.form-search-side-left-box .searchBlock input + span {
  margin: 0 10px;
  font-weight: bold;
  font-size: 14px;
}

.form-search-side-left-box .form-check, .searchBlock .form-check {
  display: block;
  margin-left: 0;
  margin-bottom: 12px;
}

.form-search-side-left-box .searchBlock .backgroundBlackCommon {
  width: 80vw;
  margin: 0 auto 3vw;
  padding: 3vw;
}

input[type=checkbox] {
  opacity: 0;
}

input[type=checkbox] + label {
  display: inline-block;
  font-size: 3.2vw;
  color: #333;
  position: relative;
  line-height: 1.5;
}

input[type=checkbox] + label::before {
  content: "";
  background-color: #fff;
  border: 0.2667vw solid #BEBEBE;
  width: 5.3333vw;
  height: 5.3333vw;
  position: absolute;
  left: -6.6667vw;
  border-radius: 0.8vw;
  top: 0;
}

input[type=checkbox]:checked + label::after {
  content: "\f00c";
  width: 5.3333vw;
  height: 5.3333vw;
  position: absolute;
  background-color: rgb(230, 95, 110);
  left: -6.6667vw;
  border-radius: 0.6vw;
  color: #fff;
  font-family: "Font Awesome 5 Free";
  font-size: 3.4667vw;
  font-weight: 600;
  line-height: 1.7;
  text-align: center;
}

.delivery_date_time_delivery_soon input[type=checkbox] + label::before,
.delivery_date_time_delivery_soon input[type=checkbox]:checked + label::after {
  top: 0;
}

input[type=checkbox]:checked + label {
  opacity: 1;
}

.ec-role {
  color: #333;
}

.backgroundOrangeCommon {
  background-color: rgb(255, 130, 0) !important;
}

.addItem {
  font-size: 3.4vw;
  background-color: #E65F6E;
  border-radius: 5px;
  text-align: center;
  padding: 4vw 0;
  border: none;
  font-weight: bold;
  color: #fff;
  line-height: 1;
}

.sm-left-183 {
  margin-left: 45.8vw;
}

.badgeProductNewItem {
  background-color: #FF8200;
  position: absolute;
  top: -10px;
  left: 0;
}

.badgeProductRenewal {
  background-color: #00b0ec;
  position: absolute;
  top: -10px;
  left: 0;
}

.badgeProduct,
.ec-mainContent .block_content .ec-ranking dl dd .smallIcon,
.ec-mainContent .block_content .history .smallIcon,
.ec-listProductShopping .productAfterShopping .original,
.ec-listProductShopping .productItemShopping .original,
.ec_productContent .original,
.saleRecommendedList .original,
.yourRecommendedArea .original,
.yourRecommendedListProductBox .original {
  line-height: 1em;
  padding: 1vw 1.3333vw;
  font-size: 2.4vw;
  font-weight: bold;
  position: relative;
}

.badgeProduct, .ec-mainContent .block_content .ec-ranking dl dd .smallIcon,
.ec-mainContent .block_content .history .smallIcon,
.ec-listProductShopping .productAfterShopping .original,
.ec-listProductShopping .productItemShopping .original,
.ec_productContent .original,
.saleRecommendedList .original,
.yourRecommendedArea .original {
  top: -0.3vw;
}

.ec-aboutItem .sale,
.ec_productContent .sale,
.ec_productContent .off,
.ec-aboutItem .off {
  display: inline-block;
  width: 17.3333vw;
  font-size: 2.4vw;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 1;
  padding: 0.8vw 0;
}

.ec-aboutItem .off {
  margin-left: -1.3333vw;
}

.ec-favoriteList .ec-aboutItem .off {
  margin-left: 0;
}

.itemCart {
  display: none;
}

.ec-boxCart__no-login {
  padding-left: 30px;
  font-size: 14px;
  position: fixed;
  align-items: center;
  z-index: 100;
  bottom: 10px !important;
  right: 10px;
}

.ec-boxCart__no-login .iconNav {
  background-color: #C3B3A1;
  border-radius: 5px;
  padding: 12px 15px 10px 13px;
  width: 50px;
  height: 50px;
}

.ec-boxCart__no-login .iconNav span {
  height: 3px;
  background-color: #fff;
  width: 24px;
  border-radius: 30px;
  display: block;
  margin-bottom: 7px;
}

.ec-boxCart {
  border-top: 0.2667vw solid #BEBEBE;
  display: flex;
  padding-left: 4vw;
  font-size: 3.7333vw;
  position: fixed;
  background-color: #fff;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  bottom: 0 !important;
}

.ec-boxCart .text-price {
  font-size: 5.0667vw;
  font-weight: bold;
  padding-left: 0.5333vw;
}

.ec-boxCart .text01 {
  font-size: 4vw;
  font-weight: bold;
  position: relative;
  color: black;
  margin: 1.0667vw 0 0 0.8vw;
  top: 0.8vw;
}

.ec-boxCart .iconNav {
  background-color: #C3B3A1;
  padding: 3vw;
}

.ec-boxCart .iconNav span {
  height: 0.85vw;
  background-color: #fff;
  border-radius: 30px;
  display: block;
  margin-bottom: 10px;
  width: 9vw;
}

.ec-boxCart .iconNav span:last-child {
  margin-bottom: 0;
}

.ec-pagenotFound {
  font-size: 3.4667vw;
  text-align: center;
  margin-bottom: 8vw;
}

.ec-pagenotFound img {
  width: 15.2vw;
  margin: 0 auto;
}

.ec-pagenotFound h2 {
  border-bottom: none !important;
  text-align: center;
  margin-bottom: 8vw;
  font-size: 3.4667vw;
}

.ec-listProductShopping .productAfterShopping .prenew,
.ec-listProductShopping .productItemShopping .prenew,
.ec-mainContent .block_content .history .prenew,
.ec_productContent .prenew,
.ec-RankingListProduct .renew,
.ec-listProductShopping .productItemShopping .new,
.ec_productContent .new,
.ec-mainContent .block_content .history .new,
.ec-RankingListProduct .new,
.ec-listProductShopping .productAfterShopping .new,
.ec-productDetail .productBadge .prenew,
.ec-productDetail .productBadge .new,
.ec-productDetail .productBadge .original,
.ec-productDetail .productBadge .sale,
.yourRecommendedArea .new,
.yourRecommendedArea .prenew,
.yourRecommendedListProductBox .new,
.yourRecommendedListProductBox .prenew {
  font-size: 2.4vw;
  font-weight: bold;
  padding: 1.1vw 1.3333vw;
  line-height: 1em;
}

.ec-listProductShopping .productAfterShopping .prenew,
.ec-listProductShopping .productItemShopping .prenew,
.ec-mainContent .block_content .history .prenew,
.ec_productContent .prenew,
.ec-RankingListProduct .renew,
.ec-listProductShopping .productItemShopping .new,
.ec_productContent .new,
.ec-mainContent .block_content .history .new,
.ec-RankingListProduct .new,
.ec-listProductShopping .productAfterShopping .new,
.ec-productDetail .productBadge .prenew,
.ec-productDetail .productBadge .new,
.yourRecommendedArea .new,
.yourRecommendedArea .prenew,
.yourRecommendedListProductBox .new,
.yourRecommendedListProductBox .prenew {
  position: absolute;
  top: 1px;
  left: 1px;
}

.ec-productDetail .productBadge .original {
  position: absolute;
  top: 1px;
  left: 1px;
}

.ec-listProductShopping .productAfterShopping .new,
.ec-listProductShopping .productAfterShopping .prenew {
  position: absolute;
  left: 4vw;
}

.searchPage .ec-listProductShopping .productAfterShopping .new,
.searchPage .ec-listProductShopping .productAfterShopping .prenew,
.coreFeatureArea .ec-listProductShopping .productAfterShopping .new,
.coreFeatureArea .ec-listProductShopping .productAfterShopping .prenew {
  left: 0;
}

#page_homepage .breadcrumb {
  display: none;
}

.ec-CommonPhone {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.ec-CommonPhone input {
  width: 26vw;
}

.ec-CommonPhone span {
  margin: 0 0 2.5vw;
}

.btn-primary-common, .btn-danger-common, .btn-green-common, .btnEntryCommon {
  font-size: 3.2vw;
  width: 84.2%;
  border: none;
  color: white;
  line-height: 8vw;
}

.ec-SideLeftListCategory ul a {
  color: #333;
  text-decoration: none;
  display: block;
}

.ec-addressList__address a,
.phone_number a {
  color: #333 !important;
}

/* --------------------------------
  商品一覧・詳細
-------------------------------- */
.ec_productContent h1 {
  font-size: 4.5333vw;
  font-weight: bold;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 1.3333vw;
  margin-bottom: 4vw;
}

.ec_productContent h1 .pattern {
  transform: rotate(270deg) translateX(1.6vw);
  display: inline-block;
}

.ec_productContent h1 .pattern ~ .pattern {
  transform: rotate(88deg) translateX(0vw);
  display: inline-block;
}

.ec_productContent h2 {
  font-size: 4.5333vw;
  font-weight: bold;
  border-bottom: 1px solid #E0E0E0;
  padding-left: 4vw;
  padding-bottom: 1.3333vw;
  margin-bottom: 4vw;
}

.ec_productContent h2 .pattern {
  transform: rotate(270deg) translateX(1.6vw);
  display: inline-block;
}

.ec_productContent h2 .pattern ~ .pattern {
  transform: rotate(88deg) translateX(0vw);
  display: inline-block;
}

.ec_productContent .ec-cartHaveProduct .delivery_paid_ship {
  margin-bottom: 4vw !important;
}

.ec_productContent .text {
  font-size: 3.4667vw;
  padding: 0 4vw;
}

.ec-cartHaveProduct .delivery_ship_text {
  line-height: 1.8;
  margin-bottom: 1.4vw;
}

.ec_productContent .text02 {
  font-size: 4.5vw;
  font-weight: bold;
}

.ec_productContent .text03 {
  font-size: 4.5333vw;
  font-weight: bold;
}

.ec_productContent .textnote {
  font-size: 3vw;
  display: block;
  margin-top: 1vw;
}

.ec_productContent.ec-productDetail {
  margin: 0 4vw;
}

.ec-cartRole {
  padding: 0;
  position: relative;
}

.priceEnd {
  margin-left: 4px;
}

.ec-product-itemBtn {
  display: flex;
  justify-content: center;
  flex: 1;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-items: center;
  position: relative;
  margin-bottom: 3vw;
}

.ec-listItemCart .ec-cartNoHaveProduct {
  margin-bottom: 5.3333vw;
}

.ec-cartRole .bgTotal .cartTotalPrice {
  font-size: 4.2667vw;
  font-weight: bold;
}

.ec-cartRole .bgTotal .text {
  font-size: 4.5333vw;
  font-weight: bold;
  padding: 0;
}

.ec-listProductShopping {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

#page_pop_download .ec-listProductShopping::before {
  content: "";
  background-color: #EDEDED;
  padding-top: 1.3333vw;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.ec-listProductShopping h2 {
  font-weight: bold;
  font-size: 4vw;
  margin: 3vw 0 3vw;
  padding-bottom: 0;
  padding-left: 4vw;
  border-bottom: none;
}

.listProductShopping {
  display: flex;
  justify-content: space-between;
  margin: 0;
  flex-wrap: wrap;
  width: 100%;
}

.ec-listProductShopping .productAfterShopping {
  width: 46vw;
  font-size: 3.2vw;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 4vw;
}

.ec-listProductShopping .productAfterShopping:nth-of-type(2n+2) .infoItem {
  padding-right: 0;
  padding-left: 0;
}

.ec-listProductShopping .productAfterShopping .infoItem-text a {
  color: #333;
}

.ec-listProductShopping .productAfterShopping .image img,
.block-container-AfterShopping img {
  width: 41.9vw;
  border: 1px solid #D8D8D8;
  height: auto;
  margin-bottom: 6px;
  object-fit: cover;
}

.coreFeatureArea {
  width: 90vw;
  margin: 5vw auto 0;
}

.coreFeatureArea .ec-listProductShopping {
  justify-content: space-between;
}

.coreFeatureArea .ec-listProductShopping .productAfterShopping .image img {
  width: 100%;
}

.coreFeatureArea .ec-listProductShopping .productAfterShopping:nth-of-type(2n+2) {
  padding: unset;
}

.coreFeatureArea .ec-listProductShopping .productAfterShopping {
  width: 48%;
  border-bottom: none;
  margin-bottom: 3vw;
}

.coreFeatureArea .infoItem,
.searchPage .infoItem {
  padding: unset;
  position: relative;
}

.searchPage .ec-listProductShopping .productAfterShopping {
  width: 50vw;
  padding: 3vw;
}

.searchPage .ec-listProductShopping .productAfterShopping .image img {
  width: 100%;
}

.popDownloadArea img {
  border-radius: 0.5em;
}

.ec-listProductShopping .productAfterShopping .missOff,
.ec-productHistory ul.cartTable li .missOff {
  background-color: #6A6A6A;
  font-size: 2.667vw;
  color: #fff;
  padding: 0.5333vw 1.3333vw;
  margin: 0 0 0.8vw;
  display: block;
  width: 8.8vw;
}

.ec-productHistory ul.cartTable li .missOff {
  width: max-content;
}

.ec_productContent .missOff-long {
  font-size: 3vw;
  display: block;
  text-align: left;
  margin-left: -0.6em;
  margin-bottom: 0.3vw;
}

.ec_productContent .original.sp_show {
  display: inline-block;
  margin-right: 1.3333vw;
}

/* --------------------------------
  注⽂履歴
-------------------------------- */
.ec-productHistory ul.cartTable li .product-price span,
.ec-productHistory ul.cartTable li .product-num span,
.ec-productHistory ul.cartTable li .product-total span {
  font-size: 3.2vw;
  display: inline-block;
  margin-right: 0.5vw;
}

.ec-productHistory ul.cartTable li .product-num .orderedQuantity {
  font-weight: normal;
}

.ec-productHistory ul.cartTable li .product-total span.priceEnd {
  margin-right: 0;
}

.ec-productHistory ul.cartTable li .product-total a {
  cursor: pointer;
}

.ec-productHistory .cartTable .formHistoryOderList {
  background-color: #F5F5F5;
  padding: 1.5vw 4vw;
}

.ec-productHistory .ec_productContent .original {
  vertical-align: text-bottom;
}

.ec-productHistory .table-addreeBuyer {
  margin: 0 5.3333vw;
  font-size: 3.7333vw;
  width: 89.1%;
  color: #333333;
}

.ec-productHistory .table-addreeBuyer td a {
  color: #333333;
}

.ec-productHistory .table-addreeBuyer tr:first-of-type td {
  border-top: none;
}

.ec-productHistory .table-addreeBuyer tr td:first-of-type {
  font-weight: bold;
  font-size: 2.9333vw;
  padding: 2.6667vw 0;
  width: 46.6667vw;
}

.ec-productHistory .table-addreeBuyer tr td:nth-child(2) {
  font-size: 3.466666vw;
}

.historySearchBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 3vw;
}

.historySearchBox input {
  width: 100% !important;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  padding: 1.3vw 2vw !important;
  height: 10.6667vw !important;
}

.historySearchBox button {
  height: 10.6667vw;
  width: 12vw;
  border: 0;
  display: block;
  white-space: nowrap;
  z-index: 1;
  border-bottom-right-radius: 1.0667vw;
  border-top-right-radius: 1.0667vw;
  background: url(/html/user_data/assets/img/common/icon-search.svg) no-repeat center center #6A6A6A;
  background-size: 50%;
}

.ec-productHistory .cartTable .product-name {
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
}

.ec-productHistory .cartTable .formHistoryOderList input {
  width: 5.3333vw;
  height: 5.3333vw;
  object-fit: cover;
  position: absolute;
}

.ec-productHistory .cartTable .formHistoryOderList input[type=checkbox] + label::before {
  left: 0;
  top: -0.5vw;
}

.ec-productHistory .cartTable .formHistoryOderList input[type=checkbox]:checked + label::after {
  left: 0;
  top: -0.5vw;
}

.ec-productHistory .cartTable .productDetail input {
  width: 5.3333vw;
  height: 5.3333vw;
  object-fit: cover;
  position: absolute;
}

.ec-productHistory .cartTable .productDetail input[type=checkbox] + label::before {
  top: -2vw;
  left: 0;
}

.ec-productHistory .cartTable .productDetail input[type=checkbox] + label::after {
  top: -2vw;
  left: 0;
}

.ec-productHistory .cartTable .formHistoryOderList label {
  margin-bottom: 0;
  padding-left: 7vw;
}

.ec-productHistory .cartTable li .image {
  width: 30%;
  margin-right: 3%;
  margin-left: 11%;
}

.ec-productHistory .cartTable .productDetail {
  border-top: 1px solid #E0E0E0;
  padding: 4vw;
}

.ec-productHistory .cartTable .productDetail:last-child {
  border-bottom: 1px solid #E0E0E0;
}

.ec-productHistory .cartTable .productCodeName {
  font-size: 3.2vw;
  font-weight: bold;
}

.ec-productHistory .cartTable .productName {
  display: block;
}

.ec-productHistory .cartTable .productDetailBox {
  margin-left: 10vw;
}

.ec-productHistory .cartTable .product-price {
  width: 100%;
  margin-bottom: 0.5vw;
}

.ec-productHistory .cartTable .product-num {
  margin-right: 5vw;
}

.ec-productHistory .cartTable .productDetailQuantity {
  font-weight: normal;
}

/* historyここから上に記載 */
.ec-listProductShopping .productAfterShopping .text_price {
  font-size: 3.2667vw;
  font-weight: bold;
}

.priceAfterSaleOff {
  color: #B12704;
  font-size: 3.466666vw;
}

.favorite-list .priceAfterSaleOff {
  font-size: 3.73333vw;
}

.favorite-list .productItemFavourite .favoriteButtonDelete span {
  font-size: 3.466666vw;
}

.ec-listProductShopping .productAfterShopping .text_price-original {
  font-size: 2.9333vw;
  font-weight: bold;
  color: #333;
}

.ec-listProductShopping .btn-cart {
  display: flex;
  justify-content: flex-end;
}

.removeProductAfterShopping {
  background-color: transparent;
  border-radius: 0;
  text-align: center;
  font-size: 3.4667vw;
  border: none;
  text-decoration: underline;
}

.infoProductAfterShopping {
  background-color: #BEBEBE;
  text-align: center;
  font-size: 3vw;
  border: none;
  width: 15vw;
  color: #fff;
  font-weight: bold;
}

.addProductAfterShoppingToCart {
  border: none;
  text-decoration: underline;
  font-size: 3.4667vw;
  background-color: transparent;
  padding: 0;
}

.infoItem {
  padding-right: 4.2667vw;
}

.shopping-cart .ec-cartRole .bgTotal,
.ec-productHistory .ec-cartRole .bgTotal {
  background-color: transparent;
  border-bottom: 0.5333vw solid #E0E0E0;
  padding-left: 4vw;
  padding-right: 4vw;
  margin-bottom: 0;
  font-size: 3.8vw;
  font-weight: bold;
}

.ec-cartRole .bgTotal {
  background-color: #F5F5F5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2.6667vw 5.3333vw;
  margin-bottom: 5vw;
  flex: 1;
  font-size: 3.7vw;
  font-weight: bold;
}

.shopping-cart .ec-cartRole .bgTotal .cartTotalPrice {
  font-size: 4vw;
}

.shopping-cart .ec-cartRole .bgTotal .text {
  display: none;
}

.orderedProductNincArea {
  display: flex;
  align-items: center;
}

.table-TotalPriceIncludeTax {
  border: 0.8vw solid #ccc;
}

.ec-orderDetailStep {
  text-align: center;
  margin: 8vw 0;
}

.ec-orderDetailStep .icon_complete {
  display: none;
}

.ec-orderLine {
  height: 1.0667vw;
  width: 2.6667vw;
  display: inline-block;
  margin: 0 -1.6vw;
  background-color: rgb(224, 224, 224);
  position: relative;
  z-index: 1;
}

.ec-orderDetailStep .ec-orderActive {
  background-color: rgb(0, 176, 236);
  color: white;
  position: relative;
  z-index: 2;
}

.ec-order {
  width: 29.3333vw;
  padding: 2.5vw 0;
  display: inline-block;
  border-radius: 5.3333vw;
  background-color: rgb(224, 224, 224);
  font-size: 2.9vw;
  font-weight: bold;
}

.ec_productContent .product-title {
  font-size: 3.7333vw;
  font-weight: bold;
  background-color: #F0E8DF;
  margin-bottom: 5.3333vw;
  padding: 1.6vw 4vw 1.3333vw;
  width: 100%;
}

/* --------------------------------
  カート 商品リスト
-------------------------------- */
.orderedProductDetails,
.orderedProductNotesBox .orderedNotes01Area {
  padding: 0 4vw 0 4vw;
}

.orderedProductDetails .orderedNum {
  font-size: 3.2vw;
  width: 6%;
}

.orderedProductDetails .orderedImg {
  width: 28%;
  border: 1px solid #d8d8d8;
}

.orderedProductDetails .orderedNameCodeBox {
  width: 66%;
  font-size: 3.2vw;
  padding-left: 2vw;
  line-height: 1.5;
}

.orderedProductDetails .orderedNameCodeBox a {
  color: #333333;
}

.orderedProductNincArea {
  margin-bottom: 2vw;
}

.orderedProductPttpbArea {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.orderedLotPriceBox {
  width: 100%;
}

.orderedLotPriceBox dl {
  display: flex;
  align-items: center;
  margin-bottom: 2vw;
}

.orderedLotPriceBox .orderedLotPriceTitle,
.orderedQuantityBox .orderedQuantityTlte,
.orderedTotalPriceBox .orderedTotalPriceTitle {
  font-size: 3vw;
  font-weight: bold;
  margin-right: 5px;
}

.orderedLotPriceBox .orderedLotPrice {
  font-size: 3.6vw;
  margin-right: 10px;
}

.orderedQuantityBox .orderedQuantity {
  font-size: 3.6vw;
}

.orderedLotPriceBox .orderedLotDetail {
  font-size: 3vw;
}

.orderedQuantity .cart_handle_item {
  width: 16vw;
  margin: 0 auto;
  display: inline-block;
  height: 8vw;
  border-radius: 1.3vw;
  font-size: 3.1vw;
  padding: 1.3vw 1.3vw 1.3vw 0.6vw;
  text-align: center;
  text-align-last: center;
}

.orderedQuantityBox,
.orderedTotalPriceBox {
  margin-right: 15px;
}

.orderedQuantityBox dl,
.orderedTotalPriceBox dl {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.orderedTotalPrice {
  font-size: 3.8vw;
  font-weight: bold;
}

.orderedBtnBox ul {
  display: flex;
  align-items: center;
}

.orderedBtnBox ul li:nth-of-type(2) {
  margin-left: 2vw;
}

.orderedBtnBox ul a {
  font-size: 3vw;
  background-color: #EDF0F0;
  padding: 2vw 3vw;
  border-radius: 5px;
  color: #333;
  display: inline-block;
  text-align: center;
}

.orderedBtnBox {
  margin-left: auto;
}

.orderedProductNotesBox {
  margin-top: 2vw;
  font-size: 3.2vw;
  color: #B12704;
  letter-spacing: 0.05em;
}

.orderedNotes01Area li:nth-of-type(2) {
  margin-top: 1vw;
}

.orderedNotes02Text {
  text-align: center;
  background-color: #FFE9E3;
  padding: 1vw 0;
  margin-top: 1vw;
}

.orderedProductsList {
  border-bottom: 1px solid #E0E0E0;
  padding: 4vw 0;
}

.orderedProductsList:first-of-type {
  padding-top: 0;
}

.shopping-cart__step2 .cartTable li {
  align-items: center;
  border-bottom: 1px solid #E0E0E0;
  padding: 4vw 4vw 9.3333vw;
  font-size: 3.2vw;
  margin: 0;
}

.shopping-cart__step2 .cartTable li:first-of-type {
  padding-top: 0;
}

.shopping-cart__step2 .cartTable li .text {
  font-size: 16px;
  font-weight: bold;
  width: 270px;
  padding-left: 15px;
}

.shopping-cart__step2 .product-name {
  display: flex;
  align-items: center;
  margin-bottom: 3.7vw;
}

.shopping-cart__step2 .product-name .num {
  font-size: 3.2vw;
  padding: 0 1.3333vw;
  display: inline-block;
  text-align: center;
  font-weight: bold;
}

.shopping-cart__step2 .product-name .image img {
  margin: 0 0.8vw;
  border: 0.2667vw solid #d8d8d8;
  width: 20vw;
  height: 13.3333vw;
}

.shopping-cart__step2 ul.cartTable li .text {
  font-size: 3.2vw;
  font-weight: bold;
  padding: 0 0 0 2vw;
}

.product-price,
.product-num,
.product-total {
  display: inline-block;
  font-size: 3.8vw;
}

.product-price span,
.product-num span,
.product-total span {
  font-weight: bold;
  font-size: 3vw;
}

.ec-chargeAndFee {
  margin: 0 4vw;
  width: 92%;
}

.ec-boxCart a {
  color: #333;
}

.ec-chargeAndFee tbody tr {
  border-top: none;
  border-bottom: 1px solid #E0E0E0;
}

.ec-chargeAndFee tbody tr:last-of-type {
  border-bottom: none;
}

.ec-chargeAndFee tbody tr td {
  border-top: none;
  font-size: 3.4667vw;
  padding: 2.6667vw 0 2.6667vw;
  font-weight: normal;
}

ul.TotalPriceIncludeTax {
  border: 0.5333vw solid #ccc;
  list-style: none;
  padding: 0;
  margin: 0 4vw 2.6667vw;
}

ul.TotalPriceIncludeTax li {
  list-style: none;
  border-top: 1px solid #E0E0E0;
  font-size: 3.4667vw;
  margin: 0 4vw;
  padding: 1.8667vw 0 1.8667vw 0;
  display: flex;
  justify-content: space-between;
}

ul.TotalPriceIncludeTax li:first-child {
  background-color: #F5F5F5;
  border-top: none;
  text-align: right;
  margin: 0;
  padding: 1.8667vw 2.6667vw 1.8667vw 0;
  justify-content: flex-end;
  font-size: 2.9333vw;
}

ul.TotalPriceIncludeTax li:nth-of-type(2) {
  border-top: none;
}

ul.TotalPriceIncludeTax li:last-child {
  font-weight: bold;
}

ul.TotalPriceIncludeTax li:last-child .textred {
  font-size: 4vw;
}

.ec_productContent .ec-cartRole .textnote {
  padding-left: 4vw;
  margin-bottom: 5.3333vw !important;
}

.shippingAddress {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: 0.2667vw solid #BEBEBE;
  padding: 4vw 5.3333vw;
  margin: 0 4vw 8vw;
  flex: 1;
  font-size: 3.4667vw;
}

.ec-delivery_date-time-Area {
  margin-bottom: 8vw;
}

.ec-delivery_date-time-Area .agree_restriction {
  text-align: center;
}

.restriction_message {
  background-color: #FFE9E3;
  padding: 4vw 5.3333vw 4vw;
  margin: 4vw;
  font-size: 3.5vw;
  font-weight: bold;
  line-height: 1.5;
  color: #B12704;
}

.restriction_message_titile {
  font-size: 3.5vw;
  font-weight: bold;
  margin-bottom: 3vw;
  line-height: 1.5;
}

.restriction_message_detail {
  font-size: 3.4vw;
}

.error_message_area {
  background-color: #FFE9E3;
  padding: 4vw 5.3333vw 4vw;
  margin: 4vw;
  display: none;
  font-size: 3.5vw;
  font-weight: bold;
  line-height: 1.8;
  color: #B12704;
}

.shippingAddress .images {
  width: 4.5333vw;
}

.shippingAddress .cartDetai-location {
  display: flex;
  line-height: 1.6;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.shippingAddress .cartDetai-location img {
  width: 4.5333vw;
  height: 5.0667vw;
}

.shippingAddress .cartDetai-location p {
  margin-bottom: 2.6667vw;
}

.gotoShippingAddress {
  background-color: #6A6A6A;
  width: 80vw;
  line-height: 1;
  color: white;
  display: inline-block;
  padding: 3vw 0;
  border-radius: 5px;
  text-align: center;
  font-size: 3.4vw;
  font-weight: bold;
}

.ec-delivery_date-time {
  width: 100%;
  font-size: 2.9333vw;
  padding: 0 4vw;
  align-items: center;
}

.ec-DeliveryCalendar input {
  height: 9.3333vw;
  width: 48.5333vw;
  border: 0.2667vw solid #BEBEBE;
  border-radius: 1.3333vw;
  font-size: 2.9333vw;
  padding: 1.3333vw 4vw 1.3333vw 4vw;
}

.ec-DeliveryCalendar {
  display: flex;
  position: relative;
}

.ec-DeliveryCalendar .fa-calendar {
  cursor: pointer;
  width: 5.2vw;
  height: auto;
  position: absolute;
  right: 2.6667vw;
  top: 1.9vw;
  /* display: none; */
}

.ec-delivery_date-time .delivery_date {
  margin-right: 3.3333vw;
  float: left;
}

.ec-delivery_date-time .delivery_time {
  margin-right: 0;
}

.ec-delivery_date-time .delivery_soon {
  clear: both;
  text-align: center;
  display: none;
}

.ec-delivery_date-time .delivery_soon label {
  vertical-align: middle;
}

.delivery_date_time_delivery_soon {
  display: none;
}

.ec-delivery_date-time .delivery_time select {
  width: 37.8667vw;
  height: 9.3333vw;
  border-radius: 1.3333vw;
  border: 0.2667vw solid #BEBEBE;
  font-size: 3.2vw;
  color: #333333;
}

.ec-delivery_date-time .delivery_soon input[type=checkbox],
.ec-delivery_date-time .delivery_soon input[type=radio] {
  margin-right: 1.3333vw;
  width: 3.2vw;
  height: 3.2vw;
  margin-top: -0.5333vw;
}

.ec-confirmPaymentMethod {
  font-size: 3.4667vw;
  margin: 0 4vw;
}

.ec_productContent .ec-fRight .text {
  font-size: 3.2vw;
  padding-left: 0;
}

.ec_productContent .ec-fLeft {
  margin-top: 0;
}

.ec_productContent.shopping-cart .ec-fLeft {
  margin-top: 1.0667vw;
}

.ec_productContent .ec-fLeft > img {
  width: 8vw;
  height: 8vw;
}

.ec-cartEsRecoveryProcess {
  border: 1px solid #BEBEBE;
  font-size: 14px;
  margin-bottom: 5.3333vw;
  display: flex;
  background-color: #F5F5F5;
}

.ec-cartEsRecoveryProcessChild1 {
  margin-right: 0;
  font-weight: bold;
  width: 40%;
  padding: 3vw 0;
  text-align: center;
}

.ec-cartEsRecoveryProcessChild2 {
  width: 60%;
  background-color: #fff;
  padding: 3vw 0;
  text-align: center;
}

.ec-headerListFavorite {
  padding: 0 4vw 1.3333vw;
  border-bottom: 0.5333vw solid #E0E0E0;
  font-size: 3.2vw;
}

.ec-headerListFavorite {
  margin-top: 8vw;
  position: relative;
  border-bottom: 0.5333vw solid #E0E0E0;
  padding-bottom: 2.6667vw;
}

.ec-headerListFavorite .result-text-num {
  font-size: 4vw;
  font-weight: bold;
}

.ec-mypageRole .ec-headerListFavorite .result-text {
  font-size: 3.2vw;
  font-weight: bold;
}

.ec-mypageRole .ec-headerListFavorite .result-text-num {
  font-size: 4vw;
  font-weight: normal;
}

.ec-headerListFavorite .form-control,
.ec-headerListFavorite .form-select {
  width: 20.3333vw;
  height: 9.3333vw;
  border-radius: 1.3333vw;
  font-size: 2.9333vw;
  padding: 1.0667vw 0;
  display: inline-block;
  text-align: center;
  text-align-last: center;
  outline: none;
}

.ec-headerListFavorite #order_by.form-control,
.ec-headerListFavorite #order_by.form-select {
  width: 29vw;
}

.ec-headerListFavoriteRightAction {
  position: absolute;
  right: 4vw;
  top: -4vw;
}

.ec-headerListFavoriteRightAction .fa-th-list {
  padding-right: 2.6667vw;
  border-right: 1px solid #E0E0E0;
  margin-right: 1.6vw;
  margin-left: 1.6vw;
}

.ec-headerListFavoriteRightAction .fas {
  font-size: 6.4vw;
  vertical-align: middle;
}

.ec-favoriteRole .text {
  font-size: 3.4667vw;
  padding: 5vw 4vw;
}

.ec-favoriteRole .ec-favoriteProductHeart img {
  width: 6.1333vw;
  height: 5.0667vw;
  display: inline-block;
  border: none;
}

.ec-favoriteRole .heartText .sp_show {
  display: inline-block;
}

.ec-listProductShopping .heartText span {
  vertical-align: middle;
  color: #333;
  font-weight: normal;
}

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

.ec-favoriteRole .anotherProductShopping {
  display: block;
  font-size: 3.5vw;
  font-weight: normal;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.ec-favoriteRole .anotherProductShopping:hover {
  color: #008DD8;
}

.ec-favoriteRole .anotherProductShopping::after {
  content: "\f054";
  font-weight: bold;
  font-size: 3.2vw;
  font-family: "Font Awesome 5 Free";
}

.ec-favoriteRole .btn-cart {
  flex-wrap: wrap;
  justify-content: center;
}

.ec-favoriteRole .ec-searchFavorite input {
  height: 10.6667vw;
  font-size: 3.2vw;
  border-radius: 1.3333vw;
}

.ec-listProductShopping .productItemShopping {
  font-size: 3.2vw;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
  border-bottom: 1px solid #E0E0E0;
  padding: 4vw 4vw 4vw;
  width: 100%;
}

#button-search-favorite {
  height: 10.6667vw;
  border: 0;
  display: block;
  white-space: nowrap;
  z-index: 1;
  width: 12vw;
  border-bottom-right-radius: 1.0667vw;
  border-top-right-radius: 1.0667vw;
  background: url(/html/user_data/assets/img/common/icon-search.svg) no-repeat center center #6A6A6A;
  background-size: 50%;
}

.ec-listProductShopping .productItemShopping:last-child {
  border-bottom: none;
}

.ec-listProductShopping .productItemShopping .infoItem {
  height: auto;
  display: flex;
  margin-bottom: 2.6667vw;
  position: relative;
  padding-right: 0;
}

.ec-listProductShopping .productItemShopping .infoItem-text a {
  color: #333;
}

.ec-listProductShopping .productItemShopping .infoItem-description {
  margin-bottom: 3px;
}

.ec-listProductShopping .productItemShopping .infoItem-description .text {
  font-size: 3.2vw;
  font-weight: normal;
  padding: 0;
}

.ec-listProductShopping .productItemShopping .infoItem-description .text + .text {
  border-top: 1px solid #E0E0E0;
}

.ec-listProductShopping .favorite-list .infoItem-description .text + .text {
  border: none;
  margin-top: 3px;
}

.ec-listProductShopping .productItemShopping .images {
  width: 36.2667vw;
  height: 22.6667vw;
  margin-right: 2.6667vw;
}

.ec-listProductShopping .productItemShopping .infoItem-text .border-top span {
  display: inline-block;
}

.ec-listProductShopping .productItemShopping .images img {
  width: 35.7333vw;
  height: auto;
  object-fit: cover;
  border: 1px solid #D8D8D8;
}

.ec_productContent .original.sp_show {
  display: none;
}

.ec-listProductShopping .productItemShopping .text_price {
  font-weight: bold;
  margin: 5px 0;
}

.ec-listProductShopping .productItemShopping .text_price-original {
  font-size: 3.7333vw;
  font-weight: bold;
  color: #333;
}

.productItemShopping .productItemRight {
  font-size: 3.4667vw;
  font-weight: normal;
  width: 100%;
}

.productItemShopping .message-error-mobile {
  display: block;
  text-align: left;
  margin-top: 2vw;
  font-weight: bold;
}

.cart-sample__price {
  text-align: left !important;
}

.productItemShopping .productItemRight .deleteItem,
.ec-productReplaceMent .deleteItem,
.deleteProductSample {
  background-color: #FFEBB4;
  border-radius: 1.3333vw;
  text-align: center;
  border: none;
  font-weight: normal;
  font-size: 3.2vw;
  width: 30vw;
  float: left;
  font-family: sans-serif;
  color: #333;
  padding: 3vw 2.1333vw;
  line-height: 1em;
}

.productItemShopping .productItemRight .no-deleteItem, .ec-productReplaceMent .no-deleteItem {
  background-color: #F5F5F5;
  border-radius: 1.3333vw;
  text-align: center;
  border: none;
  font-weight: normal;
  font-size: 3.2vw;
  width: 30vw;
  float: left;
  margin-right: 4vw;
  font-family: sans-serif;
  color: #BEBEBE;
  padding: 3vw 2.1333vw;
  line-height: 1em;
}

.productItemShopping .productItemRight .addItem,
.ec-productReplaceMent .addItem {
  background-color: #E65F6E;
  border-radius: 1.3333vw;
  text-align: center;
  padding: 3vw 2.1333vw;
  border: none;
  font-weight: bold;
  color: #fff;
  width: 30vw;
  font-size: 3.2vw;
  line-height: 1em;
}

.productItemShopping .productItemRight .no-addItem,
.ec-productReplaceMent .ec-favoriteProduct .disabledAddToCart.no-addItem {
  background-color: #F5F5F5;
  border-radius: 1.3333vw;
  text-align: center;
  padding: 3vw 2.1333vw;
  border: none;
  color: #BEBEBE;
  width: 30vw;
  font-size: 3.2vw;
  line-height: 1em;
  cursor: default;
}

.productItemShopping .productItemRight .disableBtn,
.ec-productReplaceMent .productItemDis .disableBtn {
  background-color: #BEBEBE;
  text-align: center;
  padding: 3vw 2.1333vw;
  border: none;
  font-weight: bold;
  color: #fff;
  margin-bottom: 2.3vw;
  cursor: default;
  width: 30vw;
  margin-top: 0;
  border-radius: 0;
  line-height: 1;
}

.productItemShopping .productItemRight select {
  width: 14.5vw;
  height: 8vw;
  border-radius: 1.3333vw;
  border: 0.2667vw solid #BEBEBE;
  font-size: 3.1vw;
  display: inline-block;
  padding: 1.3333vw 1.3333vw 1.3333vw 0.8vw;
  text-align-last: center;
}

.productItemShopping .ec-favoriteProductHeart {
  position: relative;
  top: 0;
  right: 0;
  display: inline-block;
}

.productItemShopping .productItemRight a,
.ec-productReplaceMent .productItemDis a {
  color: #333;
  display: block;
}

.productItemShopping .productItemRight a:hover,
.ec-productReplaceMent .productItemDis a:hover {
  color: #008DD8;
}

.productItemShopping .productItemRight .productItemFavourite a {
  text-decoration: none;
}

.productItemShopping .productItemRight .productItemFavourite a:hover {
  text-decoration: underline;
  color: #333;
}

.productItemShopping .productItemRight .textSample {
  text-align: left;
  margin-bottom: 5px;
  font-size: 3.2vw;
}

.productItemShopping .productItemRight .textSample .textSamplePrice {
  color: #b12704;
}

.productItemShopping .productItemRight .textSample .sp_show {
  display: inline-block;
}

.searchPage .ec-product-itemBtn.twoBtn {
  flex-wrap: nowrap;
  justify-content: space-between;
  flex-direction: row;
  padding: 4vw 4vw;
  font-size: 3.2vw;
  margin-bottom: 0;
  border-bottom: 1px solid #E0E0E0;
}

.searchPage .ec-product-itemBtn + .ec-listProductShopping::before {
  display: none;
}

.searchPage .ec-product-itemBtn.twoBtn .backgroundBlackCommon {
  font-size: 3.3vw;
  width: 44vw;
  outline: none;
  padding: 3vw 0;
  letter-spacing: 0.03em;
  font-weight: normal;
  background-color: #f0e8df !important;
  color: #333 !important;
}

.searchPage .ec-listProductShopping {
  padding-top: 0;
}

.searchPage .ec-listProductShopping .productAfterShopping:nth-of-type(2n+1) {
  border-right: 1px solid #E0E0E0;
  padding-bottom: 4vw;
}

.searchPage .ec-listProductShopping.ec-topListProduct .productAfterShopping:nth-of-type(2n+1) {
  padding-bottom: 2.667vw;
}

.searchPage .productItemFavourite {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.searchPage .productItemFavourite .img_cart_sp {
  width: 4.5333vw;
  height: 3.7333vw;
}

.searchPage .productItemFavourite .ec-productDetailQuantityInCart {
  vertical-align: middle;
}

.ec-productDetailQuantityInCart {
  color: #b12704;
  font-size: 3.4667vw;
}

.searchPage .productItemFavourite .productDetailLike {
  padding: 0;
  font-size: 3.4667vw;
}

.productDetailLikePosition {
  padding: 9px 0;
}

.productItemShopping .productItemRight .productItemDis,
.ec-productReplaceMent .productItemDis {
  float: right;
  margin-bottom: 0;
  width: 50%;
}

.productItemRight .productItemDis .fa-angle-right.pc_show,
.ec-productReplaceMent .productItemDis .fa-angle-right.pc_show {
  display: inline-block;
}

.ec-listProductShopping .arrow-right__img {
  vertical-align: inherit;
  padding-top: 1px;
}

.ec-pagerRole {
  padding-left: 4vw;
  padding-right: 4vw;
}

#cateModal .modal-content,
#optionSearch .modal-content {
  background-color: #F0E8DF;
  padding-bottom: 2.6667vw;
  border-radius: 0;
  border: 0;
}

#cateModal .modal-title,
#optionSearch .modal-title {
  font-size: 4.2667vw;
  font-weight: bold;
  text-align: center;
}

#cateModal .modal-dialog {
  max-width: 600px;
}

#cateModal .modal-dialog .modal-header,
#optionSearch .modal-dialog .modal-header {
  display: block;
}

#cateModal .modal-dialog .modal-header .close,
#optionSearch .modal-dialog .modal-header .close {
  position: absolute;
  right: 6.6667vw;
  top: 6.6667vw;
  padding: 0.8vw;
  opacity: 1;
}

#cateModal ul.listCate .card .card-header button span {
  width: 2.6667vw;
  height: 1.6vw;
  margin-top: 0.8vw;
}

#cateModal .modal-dialog .modal-body .accordion ul li span {
  width: 1.6vw;
  height: 2.6667vw;
}

#cateModal .modal-dialog .modal-body ul.listCate {
  list-style: none;
  padding: 0 2.6667vw;
  margin: 0;
}

#cateModal .modal-dialog .modal-body {
  padding: 0;
}

#cateModal .modal-dialog .modal-body ul.listCate li {
  list-style: none;
  background-color: #F5F5F5;
  border-bottom: 1px solid #E0E0E0;
  position: relative;
}

#cateModal .modal-dialog .modal-body ul.listCate li ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

#cateModal .modal-dialog .modal-body ul.listCate li ul li {
  list-style: none;
  padding-left: 2.6667vw;
}

#cateModal .modal-dialog .modal-body ul.listCate li a {
  display: block;
  font-size: 3.4667vw;
  padding: 2.6667vw 4vw;
  color: #333;
}

#cateModal .modal-dialog .modal-body ul.listCate li a:focus {
  text-decoration: none;
}

#cateModal .modal-dialog .modal-body ul.listCate li::after {
  /*content: "\f054";*/
  position: absolute;
  right: 2.6667vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 3.4667vw;
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
}

#cateModal .modal-dialog .modal-body ul.listCate li.hasChild::after {
  display: none;
}

#cateModal .modal-dialog .modal-body ul.listCate li.hasChild > a[aria-expanded=false]::after {
  content: "\f054";
  position: absolute;
  right: 2.6667vw;
  font-size: 3.4667vw;
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  top: 2.1333vw;
}

#cateModal .modal-dialog .modal-body ul.listCate li.hasChild > a[aria-expanded=true]::after {
  content: "\f054";
  position: absolute;
  right: 2.6667vw;
  font-size: 3.4667vw;
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  top: 2.1333vw;
  transform: translateY(0%) rotate(-90deg);
}

#cateModal .modal-dialog .modal-body ul.listCate li.active a {
  background-color: #C3B3A1;
}

.searchPage .ec-favoriteRole .btn-cart {
  height: auto;
}

.searchPage .productAfterShopping .btn-cart {
  margin: 2.6667vw auto 0;
  position: relative;
  bottom: 0;
}

/* --------------------------------
  クイックオーダー
-------------------------------- */
.viewProduct {
  width: 100%;
  margin-top: 2.6667vw;
  display: flex;
  padding: 0 4vw;
}

.viewProduct .viewProduct-group {
  position: relative;
  height: 15.4667vw;
  z-index: 1;
  margin-right: 5.3333vw;
}

.viewProduct .selectbox {
  width: 55.4667vw;
  height: 10.6667vw;
  font-size: 3vw;
  border-radius: 2.1333vw;
  border: 1px solid #E0E0E0;
  padding: 2.6667vw 4vw 0;
  position: relative;
  z-index: 2;
  background-color: #fff;
  cursor: default;
}

.viewProduct .selectbox::after {
  content: "\f054";
  font-size: 4vw;
  font-weight: bold;
  font-family: "Font Awesome 5 Free";
  position: absolute;
  right: 4vw;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
}

.viewProduct .viewListProduct {
  /*height: 80vw;*/
  /*overflow-y: auto;*/
  display: none;
  width: 55.4667vw;
}

.viewProduct .viewListProduct .arrow_quick_order {
  text-align: center;
  color: #333;
  display: block;
  border: 1px solid #E0E0E0;
  border-top: 0;
  background-color: #fff;
}

.viewProduct .viewListProduct .arrow_quick_order .fa-angle-down {
  font-size: 5.3333vw;
}

.viewProduct .viewListProduct ul {
  list-style: none;
  padding: 4vw 3.2vw 2.6667vw;
  margin: -1.0667vw 0 0;
  border: 1px solid #E0E0E0;
  border-top: none;
  background-color: #fff;
  border-bottom: none;
}

.viewProduct .viewListProduct ul::-webkit-scrollbar {
  width: 1.3333vw;
}

.viewProduct .viewListProduct ul::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.viewProduct .viewListProduct ul::-webkit-scrollbar-thumb {
  background: #E0E0E0;
}

.viewProduct .viewListProduct ul::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.viewProduct .viewListProduct ul li {
  list-style: none;
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.2vw;
  display: flex;
  padding: 2.6667vw 0;
  align-items: center;
}

.viewProduct .viewListProduct ul li .viewListProduct__image {
  display: flex;
}

.viewProduct .viewListProduct ul li:last-child {
  border-bottom: 0;
}

.viewProduct .viewListProduct ul li .image {
  width: 14.6667vw;
  height: 9.0667vw;
  border: 0.2667vw solid #D8D8D8;
  margin-right: 2.6667vw;
}

.viewProduct .viewListProduct ul li img {
  min-width: 14.1333vw;
  height: 8.5333vw;
  object-fit: cover;
}

.viewProduct .viewListProduct ul li a {
  color: #333;
  text-decoration: underline;
}

.viewProduct .viewListProduct ul li .viewListProduct__text {
  margin-right: 0;
  width: 31.4667vw;
}

.viewProduct .addItem {
  margin-bottom: 2.6667vw;
  font-size: 3.2vw;
  width: 31.2vw;
  line-height: 1em;
  padding: 1.4vw 1vw;
  height: 11vw;
}

.ec-quick-order .template-product__name .text02 {
  font-size: 3.7333vw;
  font-weight: normal;
}

.ec-listItemCart ul.quickOrderList {
  list-style: none;
  padding: 0;
  margin: 0 0 6.6667vw;
  width: 100%;
}

.ec-listItemCart ul.quickOrderList .none-product_quantity select:disabled {
  background: #fff;
}

.ec-listItemCart ul.quickOrderList li {
  list-style: none;
  border-bottom: 1px solid #E0E0E0;
  padding: 4vw;
  display: flex;
  font-size: 4vw;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ec-listItemCart ul.quickOrderList li:first-child {
  background-color: #F5F5F5;
  padding: 2.6667vw 0;
  display: none;
}

.ec-listItemCart ul.quickOrderList li:first-child span {
  font-size: 3.7333vw;
  font-weight: bold;
  text-align: center;
}

.ec-listItemCart ul.quickOrderList li:first-child span:first-child {
  display: inline-block;
  width: 38.6667vw;
  padding-left: 5.3333vw;
  text-align: left;
}

.ec-listItemCart ul.quickOrderList li:first-child span:nth-of-type(2) {
  display: inline-block;
  width: 23.2vw;
}

.ec-listItemCart ul.quickOrderList li:first-child span:nth-of-type(3) {
  display: inline-block;
  width: 139.2vw;
}

.ec-listItemCart ul.quickOrderList li:first-child span:nth-of-type(4) {
  display: inline-block;
  width: 44.2667vw;
}

.ec-listItemCart ul.quickOrderList li:nth-of-type(2) {
  border-top: 1px solid #E0E0E0;
}

.ec-listItemCart ul.quickOrderList li input {
  width: 24vw;
  border-radius: 1.3333vw;
  border: 1px solid #E0E0E0;
  height: 9.3333vw;
  margin: 0 3.2vw 2.6667vw 0;
  font-size: 3.4667vw;
  padding: 1.3333vw;
  text-align: center;
  outline: none;
}

.ec-listItemCart ul.quickOrderList li select.outNum {
  background-color: #FFE9E3;
}

.ec-listItemCart ul.quickOrderList li select {
  width: 16vw;
  border-radius: 1.3333vw;
  border: 1px solid #E0E0E0;
  height: 9.3333vw;
  font-size: 3.4667vw;
  padding: 1.3333vw;
  margin-bottom: 2.6667vw;
  text-align-last: center;
}

.ec-listItemCart ul.quickOrderList li label {
  font-size: 3.2vw;
  line-height: 1.5;
  margin-bottom: 0;
}

.ec-listItemCart ul.quickOrderList li .image {
  border: 0.2667vw solid #D8D8D8;
  width: 21.3333vw;
  height: 13.3333vw;
  margin-right: 2.6667vw;
  display: inline-block;
}

.ec-listItemCart ul.quickOrderList li .image img {
  width: 20.8vw;
  height: 12.8vw;
  object-fit: cover;
}

.ec-listItemCart ul.quickOrderList li .text {
  width: 48.5vw;
  font-size: 3.7333vw;
  font-weight: normal;
  padding: 0;
  text-align: left;
  line-height: 1.3;
}

.ec-listItemCart ul.quickOrderList li .text a {
  color: #333;
  text-align: left;
}

.ec-listItemCart ul.quickOrderList li .fa-external-link-alt {
  color: #333;
  font-size: 3.2vw;
}

.selectError {
  background-color: #FFE9E3;
  color: #000;
}

.ec-listItemCart ul.quickOrderList li .favoriteProduct {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 24vw;
}

.ec-listItemCart ul.quickOrderList li .favoriteProduct img {
  display: inline-block;
  width: 6.67vw;
  height: 5vw;
  margin-bottom: 0.7vw;
}

.ec-listItemCart ul.quickOrderList li .ec-favoriteProductHeart {
  position: relative;
  bottom: 0;
  right: 0;
}

.ec-listItemCart ul.quickOrderList li .deleteItem {
  text-decoration: underline;
  color: #333;
  display: inline-block;
  margin-left: 4vw;
  font-size: 3.2vw;
}

.ec-listItemCart ul.quickOrderList li .infoNameItem-block {
  display: flex;
  /*align-items: center;*/
}

.ec-listItemCart ul.quickOrderList li.backgroundProductSample {
  background-color: #F5F5F5;
}

.ec-listItemCart ul.quickOrderList li .otherLink {
  width: 68vw;
  margin-top: 1vw;
}

.ec-listItemCart ul.quickOrderList li .linkChangeItem {
  font-size: 3.4667vw;
  text-decoration: underline;
  font-weight: normal;
  color: #333;
  margin-top: 1.3333vw;
}

.ec-listItemCart ul.quickOrderList li .error {
  margin: 1.3333vw 0 2vw;
  width: 100%;
  text-align: left;
}

.ec-listItemCart ul.quickOrderList li .error img {
  width: 6.1333vw;
  height: 4.8vw;
}

.quickOrderList + .ec-product-itemBtn {
  padding-top: 16vw;
}

.ec-product-itemBtn .backgroundBlackCommon.addList {
  position: absolute;
  right: 4vw;
  top: 0;
  width: 40vw;
  padding: 3.3vw 0;
  font-size: 3.2vw;
}

.ec-listItemCart ul.quickOrderList li .aboutProductItem {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.quickOrderList + .ec-product-itemBtn {
  padding-top: 16vw;
}

.ec-listItemCart .suggestCodeItem {
  position: absolute;
  right: 22.6667vw;
  display: none;
  z-index: 10;
  width: 61.3333vw;
  margin-top: -2.1333vw;
  max-height: 400px;
  overflow: auto;
}

.ec-listItemCart .suggestCodeItem ul {
  list-style: none;
  padding: 5.3333vw 3.2vw 0;
  margin: 0;
  border: 0.2667vw solid #BEBEBE;
  position: relative;
  background-color: #fff;
}

.ec-listItemCart .suggestCodeItem ul li {
  list-style: none;
  border-bottom: 0.2667vw solid #BEBEBE;
  font-size: 3.2vw;
  padding-bottom: 2.6667vw;
  margin-bottom: 2.6667vw;
}

.ec-listItemCart .suggestCodeItem ul li span {
  display: block;
}

/* Khoa */
.ec-searchFavorite {
  padding: 0 4vw 1.3333vw;
}

/* --------------------------------
  ポップダウンロード
-------------------------------- */
.ec-popDownloadProductDetail {
  width: 48%;
}

.ec-popDownload .ec-popDownloadSearch, .ec-popDownload .ec-popDownloadContent {
  padding: 0 4vw;
}

.backgroundBlackCommonDownload {
  background-color: rgb(51, 51, 51);
  color: white !important;
  width: 41.6vw;
  height: 14.4vw;
  line-height: 13.3333vw;
  display: inline-block;
  text-align: center;
  border-radius: 1.3333vw;
  margin-right: 5.3333vw;
  border: none;
}

.ec-popDownload .infoItem {
  height: 65.3333vw;
}

.ec-heightProductCode {
  height: 12.4667vw;
  text-align: left;
}

/* End Khoa */
/* --------------------------------
  カート
-------------------------------- */
.ec-cartRole .ec-product-itemBtn {
  margin-bottom: 5.3333vw;
}

.ec-product-itemBtn .backgroundDrakCommon:hover {
  opacity: 0.6;
  text-decoration: none;
  color: #000;
}

.ec-DeliveryCalendar input.error {
  background-color: #FFE9E3;
}

.ec-delivery_date-time .delivery_time select.error {
  background-color: #FFE9E3;
}

.ec-paymentMethod {
  background-color: #F5F5F5;
  padding: 4vw 5.3333vw 4vw;
  font-size: 3.4vw;
  margin-bottom: 4vw;
}

.ec-paymentCash {
  text-align: center;
  margin: 0 auto 5.3333vw;
}

.ec-confirmPaymentMethod .ec-product-itemBtn {
  margin-top: 5.3333vw;
}

.ec-paymentMethod .ec-cartInfoShowErrorMessage {
  background-color: transparent !important;
  margin-bottom: 0;
  padding-left: 0;
  margin-left: 0;
}

.addDelivery {
  display: flex;
  align-items: center;
  padding: 0 4vw;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.addDelivery .backgroundBlackCommon {
  width: 43.7333vw;
  margin: 0 0 3vw 0;
  padding: 3.3vw 0;
}

.addDelivery .backgroundBlackCommon.btn-disable {
  background-color: #F5F5F5;
  color: #BEBEBE !important;
  line-height: 10.6667vw;
  padding: 0 2.6667vw;
  font-size: 3.4667vw;
  width: 42.6667vw;
}

.ec-delivery-address-errortext {
  font-weight: bold;
  color: #B12704;
  margin-top: 2vw;
}

.ec-layoutRole__main__delivery .ec-addressList {
  margin: 0 4vw 5.3333vw;
  border: 1px solid #E0E0E0;
}

.ec-layoutRole__main__delivery .ec-addressList.shopping-delivery {
  border: none;
}

.ec-layoutRole__main__delivery .ec-addressList .addressList {
  border: 0.2667vw solid #D8D8D8;
  margin: 0 0 5.3333vw 12.3333vw;
}

.ec-layoutRole__main__delivery .ec-product-itemBtn .backgroundBlackCommon {
  margin-bottom: 3vw;
}

.addressList .ec-deliveryIconMap img {
  width: 4.5333vw;
}

.ec-layoutRole__main__delivery .ec-addressList label {
  display: block;
}

.ec-layoutRole__main__delivery .ec-addressList input[type=radio] + label::before {
  top: -5.3333vw;
  left: 2.3vw;
}

.ec-layoutRole__main__delivery .ec-addressList input[type=radio]:checked + label::after {
  left: 3.7vw;
  top: -3.7333vw;
}

.shippingAddressList {
  position: absolute;
  top: 50%;
  left: -20vw;
  text-align: center;
  transform: translateY(-50%);
}

.ec-layoutRole__main__delivery .ec-addressList__address_pick,
.ec-layoutRole__main__delivery .ec-addressList__item-Custom .ec-addressList__address_number_order_first {
  width: 13.3333vw !important;
  padding: 4.2667vw 1.3333vw;
  text-align: center;
}

.ec-addressList .ec-addressList__address_number_order {
  width: 13.3333vw !important;
  padding: 4.2667vw 1.3333vw;
  text-align: center;
  background-color: #F5F5F5;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-addressList__item {
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.4667vw;
  min-height: 28.5333vw;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}

.ec-addressList .ec-addressList__address:not(.ec-addressList__address_pick):not(.ec-addressList__address_number_order_first) {
  margin: 0 0 0 !important;
  width: 100% !important;
  align-items: center;
  padding: 0 4.5vw;
  word-break: break-all;
}

.ec-layoutRole__main__delivery .ec-addressList__item .ec-addressList__address-description {
  display: flex;
  flex-wrap: wrap;
  padding: 2.6667vw 0;
  width: 59.4667vw;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-addressList__address {
  font-weight: bold;
  vertical-align: middle;
  margin-right: 0;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-addressList-boxAddress {
  display: flex;
  flex-wrap: wrap;
  padding: 2.6667vw 0;
  width: 56vw;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-addressList__address + .ec-addressList__address {
  vertical-align: text-top;
  font-weight: normal;
}

.btnAddDelivery, .btnAddDelivery:hover {
  background-color: #333333;
  border-radius: 5px;
  color: white;
  font-weight: normal;
  width: 13.8667vw;
  padding: 3.3vw 0;
  line-height: 1;
  margin-right: 2.6667vw;
  font-size: 3.2vw;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-addressList__address:nth-of-type(3) {
  font-weight: normal;
}

.ec-addressList .ec-product-itemBtn {
  padding-top: 5.3333vw;
}

.ec-addressList .ec-addressList__item .ec-addressList__address_number_order_first,
.ec-addressList .ec-addressList__item .ec-addressList__address.ec-addressList__address_number_order {
  margin: 0 !important;
  width: 10vw !important;
  align-items: center;
  padding: 0 2.6667vw;
  word-break: break-all;
  display: flex;
  font-size: 2.8vw;
  justify-content: center;
  max-width: 60px;
}

.ec-addressList .ec-addressList__action {
  position: relative;
  vertical-align: middle;
  text-align: right;
  top: 7.2vw;
  width: auto;
  padding-right: 0;
}

.ec-layoutRole__main__delivery .ec-addressList .ec-addressList-boxAddress .ec-addressList__address {
  width: auto !important;
}

.ec_productContent .addressGuest {
  padding: 0 5.3333vw;
  margin-bottom: 5.3333vw;
  width: 100%;
}

.ec_productContent .addressGuest .table_addressGuest {
  width: 100%;
}

.ec_productContent .addressGuest .table_addressGuest tr td {
  font-size: 3.4667vw;
  border-bottom: 1px solid #E0E0E0;
  padding: 2.6667vw 0;
}

.ec_productContent .addressGuest .table_addressGuest tr td:first-child {
  font-weight: bold;
  width: 32.5333vw;
  font-size: 2.9333vw;
}

.ec_productContent .addressGuest .table_addressGuest tr:last-child td {
  border-bottom: none;
}

.ec_productContent .addressGuest .table_addressGuest tr:first-child td {
  padding-top: 0;
}

.ec_productContent .plan_deliveryTime {
  width: 100%;
  margin-bottom: 2.6667vw;
  padding: 0 4vw;
}

.ec_productContent .emphasizeDeliveryTime {
  font-size: 4.1vw;
  font-weight: bold;
  color: #B12704;
}

.ec_productContent .plan_deliveryTime .table_plan_deliveryTime {
  width: 100%;
}

.ec_productContent .plan_deliveryTime .table_plan_deliveryTime tr td {
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.4667vw;
  padding: 2.6667vw 0;
}

.ec_productContent .plan_deliveryTime .table_plan_deliveryTime tr:last-child td {
  border-bottom: none;
}

.ec_productContent .plan_deliveryTime .table_plan_deliveryTime tr td:first-child {
  font-weight: bold;
  width: 25.6vw;
  font-size: 3.2vw;
}

.ec_productContent .info_about-deliveryItem {
  background-color: #F5F5F5;
  text-align: left;
  font-size: 3.4667vw;
  padding: 5.3333vw;
  margin: 0 4vw 5.3333vw;
}

.ec_productContent .info_about-deliveryItem p {
  margin-bottom: 2.6667vw;
}

.ec_productContent .info_completeProductItem {
  text-align: center;
  font-size: 3.4667vw;
  line-height: 1.8;
  margin-bottom: 8vw;
  padding: 0 4vw;
}

.ec_productContent .info_completeProductItem .title {
  font-size: 3.4667vw;
  font-weight: bold;
  margin-bottom: 4vw;
}

/* --------------------------------
  商品詳細
-------------------------------- */
.sliderItemRole {
  margin-bottom: 1.6vw;
}

.sliderItemRole .item {
  position: relative;
}

.sliderItemRole .imgCaution {
  position: absolute;
  background-color: #fff;
  padding: 4px 5px;
  font-size: 3vw;
  z-index: 999;
  letter-spacing: 0.04em;
  bottom: 0;
  right: 0;
  margin-right: 2px;
  margin-bottom: 2px;
  line-height: 1;
}

.sliderItemRole .owl-carousel {
  margin-bottom: 2.6667vw;
  background-color: black;
}

.sliderItemRole .owl-carousel .embed-responsive {
  margin-top: 2.5%;
}

.sliderItemRole .item_nav {
  display: flex;
  flex-wrap: wrap;
}

.productDetail .ec-grid2__cell .font-weight-bold {
  font-size: 3.2vw;
}

.productDetail .item_nav .slideThumb {
  opacity: 1;
  margin-bottom: 1.3333vw;
  margin-right: 1.3333vw;
  border: 0.2667vw solid transparent;
}

.productDetail .item_nav .slideThumb.active {
  border: 0.2667vw solid #FF8200;
}

.productDetail .item_nav .slideThumb:nth-of-type(5n) {
  margin-right: 0;
}

.productDetail .item_nav .slideThumb img {
  width: 16.8vw;
  height: 11.2vw;
  object-fit: cover;
}

.ec-productDetail .productBadge {
  margin-bottom: 1.3333vw;
}

.ec-productDetail .productBadge .prenew,
.ec-productDetail .productBadge .new {
  position: relative;
}

.ec-productDetail .productBadge .prenew,
.ec-productDetail .productBadge .new,
.ec-productDetail .productBadge .original,
.ec-productDetail .productBadge .sale {
  position: unset;
  width: 20vw;
  display: inline-block;
  line-height: 1em;
  padding: 1vw 0;
}

.ec-productDetail .ec-productCodeAndName {
  font-size: 4vw;
  font-weight: bold;
  border-bottom: 0.5333vw solid #D8D8D8;
  margin-bottom: 2.6667vw;
  padding-bottom: 1.3333vw;
}

.ec-productDetail .ec-productNote {
  font-size: 3.4667vw;
  margin-top: 2vw;
}

.ec-productDetail .ec-productNote .textNote {
  font-size: 3.2vw;
  margin: 1.3333vw 0 2vw;
}

.ec-productDetail .productDetail_money {
  padding-top: 4vw;
  line-height: 4vw;
  display: flex;
  align-items: center;
}

.ec-productDetail .productDetail_money .firstPrice {
  font-size: 3.2vw;
  font-weight: bold;
}

.ec-productDetail .productDetail_money .lastedPrice {
  font-weight: bold;
  color: #B12704;
  font-size: 4.2667vw;
  margin-right: 1.3vw;
}

.ec-productDetail .productDetail_money .off {
  width: 21.3333vw;
  font-size: 3.2vw;
  display: inline-block;
  font-weight: bold;
  padding: 1.1vw 0;
  line-height: 1em;
}

.ec-productDetail .ec-productDetailLotUnitPrice {
  font-size: 3.2vw;
  font-weight: bold;
  position: relative;
}

.ec-productDetail .ec-productDetailLotUnitPrice .productDetailPrice03 {
  color: #B12704;
  font-size: 6.4vw;
}

.ec-productDetail .ec-productDetailSellBy {
  font-size: 3.4667vw;
  font-weight: bold;
}

.ec-productDetailOrderProcess .ec-productDetailOrderBlock .btn-SoldOutAndOutOfStock {
  background-color: #BEBEBE;
  color: #fff;
  font-size: 3.2vw;
  font-weight: bold;
  text-align: center;
  width: 92vw;
  border-radius: 0;
  margin-bottom: 2.6667vw;
}

.ec-productDetailOrderProcess .productDetailLike {
  background-color: rgb(245, 245, 245);
  padding: 2.6vw 6.6667vw;
  width: 92vw;
  font-size: 3.4667vw;
  border-radius: 1.333vw;
}

.ec-productDetail .ec-productDetailOrderProcess {
  padding-top: 5.3333vw;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5.3333vw;
}

.ec-productDetail .ec-productDetailOrderProcess .textred.error {
  margin-top: 1vw;
  margin-right: 1.6vw;
}

.ec-productDetail .ec-productDetailOrderProcess .textred.error img {
  width: 6.1333vw;
  height: 4.8vw;
  margin-right: 3px;
}

.ec-productDetail .ec-productDetailOrderBlock .productDetail_itemBtn .textred.error {
  position: absolute;
  left: 0;
  bottom: -8vw;
}

.ec-productDetail .ec-productDetailOrderBlock {
  margin-bottom: 2.6667vw;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.ec-productReplaceMent .ec-favoriteProduct .textred.error img {
  width: auto;
  height: auto;
}

.ec-productDetail .productDetailOrderSample, .ec-productDetail .productDetailDeleteSample {
  background-color: rgb(255, 235, 180);
  font-size: 3.2vw;
  padding: 2.6vw 6.6667vw;
  border-radius: 1.333vw;
  width: 92vw;
}

.table-ProductDetail tbody tr td:first-child, .table-ReplacementProductDetail tbody tr td:first-child,
.table-ReplacementProductDetail tbody tr td:nth-child(3) {
  background-color: #F5F5F5;
  width: 25.3333vw;
}

.ec-productDetail .errorSample {
  margin-top: 2vw;
  font-size: 3.4667vw;
  text-align: left;
  font-weight: bold;
}

.table-ProductDetail tbody tr td {
  font-size: 3.4667vw;
}

.table-ProductDetail tbody tr:last-child, .table-ReplacementProductDetail tbody tr:last-child {
  border-bottom: 1px solid #E0E0E0;
}

.ec-productDetail .productDetailDownload {
  display: flex;
}

.ec-productDetail .backgroundLightGreyCommon + .backgroundLightGreyCommon {
  margin-left: 4vw;
}

.ec-productDetail .productDetailDownload a {
  width: 44vw;
  font-size: 3.2vw;
  line-height: 10.6667vw;
}

.ec-productDetail .productDetail {
  margin-bottom: 8vw;
}

.ec-productReplaceMent h2 {
  font-size: 4vw;
  border-top: 0.5333vw solid #E0E0E0;
  border-bottom: none;
  padding: 2.6667vw 0 0;
  margin-bottom: 0;
}

.ec-productReplaceMent .ec-favoriteProduct img {
  width: 35.7333vw;
  height: 22.1333vw;
  margin-right: 2.6667vw;
}

.ec-productReplaceMent .productReplaceItem .nameCodeAndBadge {
  font-size: 3.2vw;
  font-weight: bold;
  border-bottom: 0;
  padding-bottom: 0;
  display: flex;
  flex-wrap: wrap;
}

.ec-productReplaceMent .productReplaceItem .nameCodeAndBadge a {
  color: #333333;
}

.ec-productReplaceMent .ec-favoriteProductIsSale {
  font-size: 3.2vw;
  font-weight: bold;
  margin-bottom: 0;
}

.ec-productReplaceMent .ec-productDetailLotUnitPrice .priceAfterSaleOff {
  font-size: 3.2vw;
  font-weight: bold;
  color: #333;
}

.ec-productReplaceMent .productReplaceItem {
  margin-bottom: 2.6667vw;
}

.ec-productReplaceMent .productItemFavourite img {
  width: 5.8667vw;
  height: 4.8vw;
  margin-right: 3px;
}

.ec-productReplaceMent .productFavoriteRight {
  position: relative;
  width: 100%;
  text-align: left;
  display: flex;
  margin-top: 1.3333vw;
  align-items: center;
  flex-wrap: wrap;
}

.ec-productReplaceMent .ec-favoriteProduct {
  border-bottom: none;
  padding-bottom: 0;
  flex-wrap: wrap;
  padding-top: 2.6667vw;
  position: relative;
}

.ec-productReplaceMent .replaceProductDetail {
  display: flex;
  flex-wrap: wrap;
  margin: 4vw 0;
  border-top: 1px solid #E0E0E0;
}

.ec-productReplaceMent .replaceProductDetail dl {
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.4667vw;
  display: flex;
  margin-bottom: 0;
  width: 100%;
}

.ec-productReplaceMent .replaceProductDetail dl:last-of-type {
  width: 100%;
}

.ec-productReplaceMent .replaceProductDetail dl dt {
  background-color: #F5F5F5;
  width: 35%;
  display: inline-block;
  padding: 2.6667vw 2.6667vw;
  font-weight: normal;
}

.ec-productReplaceMent .replaceProductDetail dl dd {
  display: inline-block;
  width: 65%;
  margin-left: 2.6667vw;
  padding: 2.6667vw 2.6667vw;
  margin-bottom: 0;
}

.ec-productReplaceMent .ItemNum label {
  font-size: 3.2vw;
}

.ec-productReplaceMent .productDetailLike span {
  font-size: 3.46667vw;
}

.ec-productDetail .ec-productRole__profile {
  position: relative;
}

.ec-productDetail .ec-productRole__profile .iconInfo-item {
  position: absolute;
  right: 0;
  top: -8vw;
  width: 17%;
  display: flex;
  justify-content: flex-end;
}

.ec-productDetail .ec-productRole__profile .iconInfo-item img {
  margin-left: 1.3333vw;
}

.aboutProductPriceText {
  margin: 8px 0;
  font-size: 3.2vw;
  color: #B12704;
}

.RegistrationGuideText {
  font-size: 3.35vw;
  margin-bottom: 3vw;
}

.InductionArea {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}

.InductionArea li {
  width: 100%;
  margin-right: 16px;
}

.InductionArea li:last-child {
  margin-right: 0;
}

.InductionArea .product__login,
.InductionArea .ec-login__actions a {
  width: 100%;
  padding: 3vw 0;
  line-height: 1em;
  font-weight: bold;
  letter-spacing: 0.05em;
  font-size: 3.3vw;
}

.ec-productDetail .ec-productDetailOrderBlock .ItemNum {
  display: flex;
  margin-right: 1.8667vw;
  align-items: center;
}

.ec-productDetail .ec-productDetailOrderBlock .ItemNum label {
  margin-top: 1.8667vw;
  font-size: 3.2vw;
}

.ec-productDetail .ec-productDetailOrderBlock .form-control,
.ec-productDetail .ec-productDetailOrderBlock .form-select,
.ec-productReplaceMent .form-control,
.ec-productReplaceMent .form-select {
  width: 13.3333vw;
  height: 8vw;
  margin-left: 1.3333vw;
  font-size: 3.2vw;
  padding: 1.3333vw;
  display: inline-block;
}

.ec-productDetail .ec-productDetailOrderBlock .addItem {
  width: 69.0667vw;
  font-size: 3.2vw;
}

.ec-productDetail .ec-productDetailOrderBlock .productDetail_itemBtn {
  display: flex;
  margin-bottom: 2.6667vw;
}

.ec-productDetail .ec-productReplaceMent .prenew,
.ec-productDetail .ec-productReplaceMent .new {
  top: 2.6667vw;
}

.ec-productDetail .productFavoriteCenter {
  width: 58%;
  margin-left: 0;
}

.ec-productDetail .productFavoriteRight .productgroupBtn {
  font-size: 3.4667vw;
  width: 70%;
}

.ec-productReplaceMent .productItemDis {
  margin-right: 18.6667vw;
}

/* --------------------------------
  注⽂履歴
-------------------------------- */
.list-counter-header {
  width: 100%;
}

.list-counter-header .ec-historyDateForm,
.historyCountNumberBox {
  font-weight: normal;
  padding: 0 4vw;
  position: relative;
}

.list-counter-header .ec-historyDateForm .text {
  vertical-align: bottom;
  font-size: 3.2vw;
  padding: 0 1.0667vw;
  line-height: 1;
}

.list-counter-header .ec-historyDateForm .text02 {
  font-size: 4.2667vw;
  font-weight: bold;
  padding: 0 2.6667vw 0 1.6vw;
}

.list-counter-header .ec-historyDateForm .ec-count-History {
  font-size: 2.9333vw;
  margin-top: 15px;
}

.list-counter-header .ec-historyDateForm .ec-count-History .total-item-count {
  font-size: 4.8vw;
  font-weight: bold;
}

.list-counter-header .ec-historyDateForm .form-control,
.list-counter-header .ec-historyDateForm .form-select {
  width: 18.1333vw;
  height: 9.3333vw;
  font-size: 3.2vw;
  padding: 1.3333vw;
  outline: none;
}

.list-counter-header .ec-historyDateForm #start_month,
.list-counter-header .ec-historyDateForm #end_month {
  width: 14.1333vw;
}

.list-counter-header .historyDateForm-option {
  display: flex;
  align-items: center;
  margin-bottom: 3vw;
}

.list-counterHistory #number_display {
  right: 4vw;
  width: 25.3333vw;
  height: 8vw;
  font-size: 3.2vw;
  padding: 0.35vw 0.9vw;
}

.historyCountNumberBox {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  line-height: 1em;
  margin-bottom: 3vw;
}

.historyCountNumberBox .ec-count-History {
  font-size: 3.3vw;
  font-weight: bold;
}

.historyCountNumberBox .ec-count-History .total-item-count {
  font-size: 4vw;
}

.ec_productContent .list-mypagehistory {
  margin-top: 3vw;
  padding: 6vw 4vw 0;
  position: relative;
  font-size: 3.4667vw;
}

.ec_productContent .list-mypagehistory::before {
  content: "";
  padding-top: 1.3333vw;
  background-color: #EDEDED;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.ec_productContent .block-mypageHistory {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 5.3333vw;
  padding-bottom: 5.3333vw;
  border-bottom: 1px solid #E0E0E0;
  position: relative;
}

.ec_productContent .block-mypageHistory.no-history {
  display: none;
}

.ec_productContent .block-mypageHistory:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

.ec_productContent .block-mypageHistory dl:first-of-type {
  border-top: 1px solid #E0E0E0;
}

.ec_productContent .block-mypageHistory dl:last-of-type {
  border: none;
}

.ec_productContent .block-mypageHistory dl:last-of-type dt {
  display: none;
}

.ec_productContent .block-mypageHistory dl:last-of-type dd {
  position: absolute;
  right: -2.1333vw;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  text-align: center;
}

.ec_productContent .block-mypageHistory dl:last-of-type dd .arrow-right__img {
  position: absolute;
  top: 0.36vw;
  left: 7vw;
}

.ec_productContent .block-mypageHistory dl {
  border: 1px solid #E0E0E0;
  border-top: none;
  margin-bottom: 0;
  display: flex;
}

.ec_productContent .block-mypageHistory dl:nth-of-type(4) dd {
  text-align: left;
}

.ec_productContent .block-mypageHistory dl:last-of-type dd a {
  color: #333;
  position: relative;
  padding-right: 2vw;
}

.ec_productContent .block-mypageHistory dl dt {
  background-color: #F5F5F5;
  font-weight: bold;
  padding: 1.6667vw 0 1vw 2.6667vw;
  width: 29.8667vw;
  font-size: 2.9333vw;
  display: inline-block;
}

.ec_productContent .block-mypageHistory dl dd {
  padding: 1.6667vw 2.6667vw 1vw;
  margin-bottom: 0;
  font-size: 3.2vw;
  display: inline-block;
  width: 49.6vw;
}

.ec-productReplaceMent .deleteItem .favoriteSampleAddToCart {
  padding: 1.3333vw 0;
  text-decoration: underline;
  background-color: transparent;
  width: auto;
}

.ec_productContent .ec-orderDetailInfo {
  border: 1px solid #E0E0E0;
  padding: 2.3333vw 4vw 0;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  margin: 3vw 4vw 5.3333vw;
}

.ec_productContent .ec-orderDetailInfo dl {
  display: flex;
  border-bottom: 1px solid #E0E0E0;
  padding: 2.6667vw 0;
  align-items: baseline;
  font-size: 3.2vw;
  margin-bottom: 0;
  width: 100%;
}

.ec_productContent .ec-orderDetailInfo dl:last-of-type {
  border-bottom: none;
  flex-wrap: wrap;
}

.ec_productContent .ec-orderDetailInfo dl dt {
  width: 32%;
}

.ec_productContent .ec-orderDetailInfo dl dd {
  margin-bottom: 0;
  width: 68%;
}

.ec_productContent .ec-orderDetailInfo dl dd img {
  width: 2.1333vw;
  height: 4.5333vw;
  margin-left: 2.6667vw;
  margin-right: 2.6667vw;
}

.ec_productContent .ec-orderDetailInfo dl .ec-productHistory__invoice {
  width: 100%;
  margin-top: 10px;
}

.ec_productContent .ec-orderDetailInfo dl:first-of-type {
  font-size: 3.4667vw;
  flex-direction: column;
}

.ec_productContent .ec-orderDetailInfo dl:first-of-type dd {
  width: 100%;
}

.ec_productContent .ec-orderDetailInfo dl:first-of-type dd a {
  color: #333;
}

.ec_productContent .ec-orderDetailInfo + .ec-orderDetailInfo {
  padding-top: 2.6667vw;
}

.ec_productContent .ec-orderDetailInfo + .ec-orderDetailInfo .text02 {
  font-size: 4.2667vw;
  text-align: right;
}

.ec_productContent .ec-orderDetailInfo + .ec-orderDetailInfo dl {
  flex-direction: row;
}

.ec_productContent .ec-orderDetailInfo dl:first-of-type dt {
  margin-bottom: 2.6667vw;
}

.ec_productContent .ec-orderDetailInfo dl:first-of-type dd .status {
  height: 9.6vw;
  padding: 1.3333vw 1.3667vw;
  background-color: #F5F5F5;
  color: #ababab;
  line-height: 7.2vw;
  width: 22.6667vw;
  display: inline-block;
  text-align: center;
  border-radius: 1vw;
}

.ec_productContent .ec-orderDetailInfo dl:first-of-type dd .status.active {
  background-color: #6A6A6A;
  color: #fff;
}

.ec_productContent .ec-orderDetailInfo dl dd .groupBill {
  margin-bottom: 5.3333vw;
}

.ec_productContent .ec-orderDetailInfo dl dd .groupBill__list {
  border-left: 3px solid #F0E8DF;
  padding-left: 10px;
}

.ec_productContent .ec-orderDetailInfo dl:nth-of-type(7) dd {
  display: flex;
  flex-wrap: wrap;
}

.ec_productContent .ec-orderDetailInfo dl dd .groupBill a {
  color: #333;
  text-decoration: underline;
}

.ec_productContent .ec-orderDetailInfo dl dd .groupBill .fa-angle-right.pc_show {
  display: inline-block;
  margin-left: 0.8vw;
}

.ec_productContent .ec-product-itemBtn.justify-content-end {
  margin: 3vw 4vw 5.3vw;
  flex-direction: row;
  justify-content: space-between !important;
  white-space: nowrap;
}

.ec_productContent .ec-product-itemBtn.justify-content-end .addItem {
  height: 10.6667vw;
  padding: 1.3333vw 2.4vw;
  margin-left: 0;
  font-size: 3vw;
}

.ec_productContent .ec-BtnAddSeclecItemToCard {
  margin: 1vw;
}

.ec_productContent .ec-product-itemBtn.justify-content-end .addItem:disabled {
  background-color: #F5F5F5 !important;
  color: #ababab;
  border-radius: unset;
}

.ec_productContent .ec-product-itemBtn.justify-content-end .addItem:hover {
  opacity: 0.6;
  color: #fff !important;
}

.productCheckBox input[type=checkbox] + label::before {
  top: -1.4vw;
}

.productCheckBox input[type=checkbox]:checked + label::after {
  top: -1.4vw;
}

/* --------------------------------
  modal
-------------------------------- */
#menuInfoItem .modal-dialog {
  border: 0.2667vw solid #707070;
  border-radius: 2.6667vw;
}

#menuInfoItem .modal-content {
  background-color: #E5E5E4;
  font-size: 3.4667vw;
  padding: 4vw 2.6667vw 0;
  width: 85%;
  margin: 0 auto;
}

#menuInfoItem .modal-content .close {
  color: #008DD8;
  font-size: 5.0667vw;
  font-weight: bold;
  text-transform: uppercase;
}

.minionInfo {
  position: fixed;
  left: 0;
  bottom: 0;
  padding-right: 12vw;
  text-align: left;
  z-index: 10;
  width: 100vw;
  border-top: 0.2667vw solid #D8D8D8;
  background-color: #FFE9E3;
}

.minionInfo .text {
  width: 82vw;
  font-size: 100%;
  color: #B12704;
  font-weight: bold;
  padding: 2.5vw 3vw;
  text-align: center;
}

.minionInfo img {
  position: absolute;
  right: 1.2vw;
  top: -5.5vw;
  width: 18vw;
}

/* --------------------------------
  請求書
-------------------------------- */
.ec-bill .ec-fClear {
  padding-left: 4vw;
}

.ec-bill .text02 {
  font-size: 2.9333vw;
  font-weight: bold;
  padding: 0 4vw;
}

.ec-bill .text03 {
  font-size: 4.8vw;
}

.ec-bill .ec-fRight .time_number {
  margin-left: 0;
}

.ec-bill .ec-fRight .phone_number {
  font-size: 4.267vw;
}

.ec-billList {
  border-top: 1.3333vw solid #EDEDED;
  margin-top: 1.3333vw;
  padding: 0 4vw;
}

.ec-billList dl {
  border-bottom: 1px solid #E0E0E0;
  font-size: 3.4667vw;
  display: flex;
  padding: 4vw 0;
  justify-content: space-between;
  font-weight: normal;
  margin-bottom: 0;
}

.ec-billList dl:last-of-type {
  border-bottom: none;
}

.ec-billList dl dt {
  font-weight: normal;
}

.ec-billList dl dd {
  margin-bottom: 0;
}

.ec-billList dl dd a {
  color: #333;
}

/* --------------------------------
  MY PAGE
-------------------------------- */
.ec-mypageRoleCustomer .form-info {
  border-top: 0.5333vw solid #E0E0E0;
  margin-bottom: 2.6667vw;
}

.ec-mypageRoleCustomer .form-info dl {
  border-bottom: 1px solid #E0E0E0 !important;
  padding: 3vw 0;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  font-size: 3.4vw;
}

.ec-mypageRoleCustomer .form-info dl dd a {
  color: #333333;
}

.ec-mypageRoleCustomer .form-info dl:last-of-type {
  border-bottom: none !important;
}

.ec-mypageRoleCustomer .form-info dl dt {
  font-weight: bold;
}

.ec-mypageRoleCustomer .form-info dl dd {
  margin-bottom: 0;
}

.ec-mypageRoleCustomer .form-info dl dd .text {
  font-size: 3.4667vw;
}

.ec-mypageRoleCustomer .form-info dl dd .form-input {
  margin-left: 1.3333vw;
  font-size: 3.7333vw;
  padding: 1.3333vw;
  width: 93%;
}

.ec-mypageRoleCustomer .form-info dl dd .fixW {
  margin-left: 0;
  width: 100% !important;
}

.ec-mypageRoleCustomer .form-info dl dd #entry_email_first,
.ec-mypageRoleCustomer .form-info dl dd #entry_email_second {
  width: 100% !important;
}

.ec-mypageRoleCustomer .form-info dl dd .fixW input[type=password] {
  border-radius: 1.3333vw;
  height: 10.6667vw;
  border: 0.2667vw solid #BEBEBE;
  width: 100%;
}

.form-info dl dd input {
  color: #555;
  padding: 3.4vw;
  font-size: 3.7333vw;
}

.ec-mypageRoleCustomer .ec-fRight .text.sp_show {
  display: inline-block;
}

.ec-mypageRoleCustomer .form-info dl dd .form-control,
.ec-mypageRoleCustomer .form-info dl dd .form-select {
  height: 10.6667vw;
  width: 87%;
  display: inline-block;
  margin-bottom: 1.3333vw;
  font-size: 3.7333vw;
  padding: 1.3333vw;
}

.ec-mypageRoleCustomer .form-info dl dt .ec-required {
  font-size: 2.4vw;
}

.ec-mypageRoleCustomer .backgroundBlackCommon,
.ec-mypageRoleCustomer__step2 a.backgroundDrakCommon,
.ec-mypageRoleCustomer__step3 .backgroundDrakCommon,
.ec-layoutRole__main__delivery .ec-product-itemBtn .backgroundBlackCommon,
.ec-product-itemBtn .backgroundBlackCommon,
.ec-off4Grid .ec-off4Grid__cell > button,
.ec-off4Grid .ec-off4Grid__cell .ec-blockBtn--action-mypage,
.groupBtnCommonDeli a,
.groupBtnCommonDeli .btn,
.ec-product-itemBtn .backgroundOrangeCommon,
.ec-product-itemBtn .backgroundDrakCommon,
.ec_productContent .ec-blockBtn--action-button,
.ec_productContent .ec-blockBtn--action-mypage,
.ec-shopConfirmButton .backgroundDrakCommon,
.ec-shopConfirmButton > button,
.ec-shopConfirmButton > a,
.backgroundGreyCommon.Btnsp,
.ec-contactRoleCustom .ec-RegisterRole__actions .backgroundGreyCommon,
#modalOrder .modal-footer button,
.ec-mypageRole .ec-blockBtn--action-button,
.ec-mainContent #detail_post .return-list a,
.ec-productHistory .ec-product-itemBtn .backgroundDrakCommon_unable,
.ec-layoutRole__main__delivery .backgroundBlackCommon,
.groupBtnCommonDeli .backgroundBlackCommon {
  width: 80vw;
  padding: 3.3vw 0;
  font-weight: bold;
  letter-spacing: 0.09em;
}

.ec-layoutRole__main__delivery .backgroundBlackCommon {
  font-weight: normal;
}

.ec-layoutRole__main__delivery .addDelivery .backgroundBlackCommon {
  width: 50vw;
  padding: 2vw 0;
}

.ec-productHistory .ec-product-itemBtn .backgroundDrakCommon_unable {
  background-color: #F5F5F5;
  color: #6a6a6a;
  margin-top: 3vw;
}

.ec-quick-order .ec-product-itemBtn .addItem {
  width: 80vw;
}

.shopping-cartComplete .ec-blockBtn--action-button {
  margin-bottom: 3vw;
}

.ec-mypageRoleCustomer .backgroundBlackCommon,
.groupBtnCommonDeli a,
.groupBtnCommonDeli .btn,
.ec-product-itemBtn .backgroundOrangeCommon {
  margin-bottom: 3vw;
}

.ec-product-itemBtn .backgroundDrakCommon {
  margin-top: 3vw;
}

.shopping-cart__step2 .ec-product-itemBtn .backgroundDrakCommon {
  margin-top: 0;
}

.ec-label-select {
  display: inline-block;
  font-size: 2.9333vw !important;
}

/* --------------------------------
  フォーム
-------------------------------- */
.ec-popDownloadFormSearchProduct .form-control,
.ec-popDownloadFormSearchProduct .form-select {
  color: #848484;
  font-size: 3.2vw;
  height: 10.6667vw;
}

.ec-popDownloadFormSearchProduct .popDownload_type .form-control,
.ec-popDownloadFormSearchProduct .popDownload_type .form-select {
  height: 9.3333vw;
  outline: none;
}

.ec-popDownloadFormSearchProduct {
  margin-top: 3.3333vw;
  padding: 0 4vw 5.3333vw;
}

.ec-popDownloadFormSearchProduct .form-group {
  margin-bottom: 0;
}

.ec-popDownloadFormSearchProduct .popDownload_type {
  width: 43.2vw;
  margin-bottom: 1.3333vw;
}

.ec-popDownloadFormSearchProduct .popDownload_free {
  width: 100%;
}

.ec-popDownloadFormSearchProduct button.search-left-slide {
  background: url(/html/user_data/assets/img/common/icon-search.svg) no-repeat center center #6A6A6A;
  height: 10.6667vw;
  border-top-right-radius: 1.3333vw;
  border-bottom-right-radius: 1.3333vw;
  width: 10.6667vw;
  border: none;
  background-size: 50%;
}

.ec-listProductShopping.ec-topListProduct .productAfterShopping img {
  height: 61.8667vw;
  width: 100%;
}

.ec-listProductShopping.ec-topListProduct .productAfterShopping .backgroundBlackCommonDownload img {
  width: 3.7333vw;
  height: 3.2vw;
  margin-left: 0;
  border-radius: unset;
  margin-top: -0.7vw;
}

.ec-topListProduct .productAfterShopping .infoItem-text {
  height: auto;
  min-height: auto;
}

.ec-topListProduct .infoItem-text .backgroundBlackCommonDownload {
  height: 9.3333vw;
  font-size: 3.2vw;
  line-height: 9.3333vw;
  margin-right: 0;
  width: 100%;
}

.ec-topListProduct .infoItem-text .backgroundBlackCommonDownload:hover {
  text-decoration: none;
  opacity: 0.6;
}

.productAfterShopping .infoItem-text {
  margin-bottom: 2vw;
}

.ec-topListProduct .productAfterShopping .infoItem {
  padding-right: 0;
}

.float-left-sp {
  float: left;
}

.disabledAddToCart {
  /*background-color: #9da3a9;*/
  width: 32vw;
  display: inline-block;
  font-size: 3.4667vw;
  border-radius: 1.3333vw;
  /*height: 9.3333vw;*/
  text-align: center;
  /*line-height: 9.3333vw;*/
  margin: 1.3333vw 0;
}

.ec-favoriteRole .btn-cart .btnProductShopping,
.ec-favoriteRole .btn-cart .disableBtn {
  width: 100%;
  height: 8vw;
  font-size: 3.2vw;
  color: #fff;
  background-color: #BEBEBE;
  border-radius: 0;
  margin: 0 0 15px;
  text-decoration: none;
  border: none;
}

.productDetailLike img, .favoriteButtonDelete img {
  width: 4.8vw;
  margin-right: 3px;
}

.removeFromFavorite {
  font-size: 3.4vw;
}

.removeFromFavorite .sp_show img {
  width: unset;
}

.ec-inputSearch {
  width: 100%;
}

/*tuan anh - feature detail*/
.feature-batch-title {
  background-color: #F0E8DF;
  margin-bottom: 0;
  color: #333333;
  font-size: 3.7333vw;
  font-weight: bold;
  padding: 2.6667vw 4vw;
  line-height: 1em;
}

/**/
/* tuan anh - product detail */
div.playVideo {
  display: block;
  background: url("../img/common/play.png") center center no-repeat;
}

div.playVideo .videoThumb {
  filter: alpha(opacity=40);
  opacity: 0.4;
}

.fa-th-list {
  width: 9.3334vw;
  height: 6.6667vw;
  cursor: pointer;
}

.fa-th-large {
  width: 6.6667vw;
  height: 6.6667vw;
  cursor: pointer;
}

.ec-topListProduct {
  border-top: none !important;
  padding-top: 0 !important;
  padding-bottom: 10px !important;
}

.productAfterShopping .infoItem .popDownload_title {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping-cart .ec-fRight .phone_number {
  font-size: 3.6vw;
  font-weight: bold;
}

.iconPhoneImg {
  margin-right: 6px;
}

.ec-pageHeaderConfirm {
  border-bottom: 0.5333vw solid #E0E0E0;
  font-size: 4.5333vw;
  font-weight: 600;
  padding: 0 0 1.3333vw 0;
}

.ec-TelFaxEntryMessage {
  font-size: 3.4667vw;
  font-weight: 300;
  line-height: 5.3333vw;
}

.ec-fLeft_custome img,
.addDelivery .ec-fClear img {
  width: 8.8vw;
}

.ec-TelFaxEntryForm label.required {
  margin-right: 2.6667vw;
}

.ec-TelFaxEntryForm {
  background-color: rgb(245, 245, 245);
  margin-bottom: 8vw !important;
}

.productDetail .sliderItemRole .imageProductDetail {
  width: 100%;
  height: 61.5894039735vw;
  object-fit: cover;
}

.productDetail .sliderItemRole .embed-responsive-16by9::before {
  padding-top: 61.8%;
}

/* Tuan Anh - product detail */
.orther_product {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.shopping-cartComplete .ec-blockBtn--action-mypage {
  background-color: #6a6a6a;
}

.shopping-cart__step1 .ec-fRight .text {
  margin-left: 0;
}

.shopping-cart__step1 .ec-fRight .text, .addDelivery .ec-fRight .text {
  margin-left: 0;
  padding-bottom: 0.6vw;
}

.ec-layoutRole__main__delivery .shippingAddressList .ec-addressList input[type=radio] + label::before {
  left: 3.5vw;
}

.shippingAddressList input[type=radio].form-radio + label::before {
  margin-top: 0.25vw;
}

.delivery_change_address .ec-addressList .ec-addressList__action {
  width: 78px;
}

.message-error-pc {
  display: none;
}

.ec-aboutItem {
  margin-top: 6px;
  margin-bottom: 4px;
}

.ec-listProductShopping .productAfterShopping {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ec-cartList .productAfterShopping .btn-cart {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  position: static;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.ec-cartList .productAfterShopping .btn-cart .infoProductAfterShopping, .ec-cartList .productAfterShopping .btn-cart .addProductAfterShoppingToCart {
  margin-right: 0;
}

.ec-cartList .block-container-AfterShopping {
  margin: 0 4vw;
}

.ec-cartList .productAfterShopping:nth-of-type(2n+1) {
  padding-left: 0 !important;
}

.ec-cartList .productAfterShopping:nth-of-type(2n+2) {
  right: 0 !important;
}

.ec-cartList .addProductAfterShoppingToCart,
.ec-cartList .removeProductAfterShopping {
  font-size: 3vw;
  background-color: #EDF0F0;
  padding: 2vw 3vw;
  border-radius: 5px;
  color: #333;
  display: inline-block;
  text-align: center;
  text-decoration: none;
}

.cart-ActionSample {
  margin-top: -7px;
}

.listProductAfterShopping .text_price {
  color: #B12704;
}

#page_shopping ul.cartTable li .product-total {
  right: 6.333vw;
}

.wrapProductAfterShopping .productAfterShopping:nth-of-type(2n+1) {
  padding-right: 4vw;
  margin-bottom: 4vw;
}

.wrapProductAfterShopping .productAfterShopping:nth-of-type(2n+2) {
  padding-right: 0;
  padding-left: 4vw;
}

.wrapProductAfterShopping .productAfterShopping:nth-of-type(2n+2) {
  margin-bottom: 4vw;
}

.block-container-AfterShopping .productAfterShopping .removeProductAfterShopping {
  padding-left: 3.2vw;
}

.ec-cartList .ec-listProductShopping .productAfterShopping:nth-child(odd) .new,
.ec-cartList .ec-listProductShopping .productAfterShopping:nth-child(odd) .prenew {
  left: 0;
}

/* --------------------------------
  予約商品_受付期間_お届け期間
-------------------------------- */
.sales_info {
  color: #B12704;
  margin-top: 15px;
  font-size: 13px;
}

.sales_info_titile {
  font-weight: bold;
  margin-bottom: 3px;
}

.sales_info_description {
  font-size: 3.2vw;
  margin-bottom: 2px;
}

.sales_info_box {
  border-top: 1px solid #E0E0E0;
  padding-top: 15px;
}

ul.cartTable .sales_info_cart {
  border-top: none;
  font-size: 3.2vw;
  color: #B12704;
  letter-spacing: 0.05em;
  margin-left: 9.5vw;
  line-height: 1.7em;
  padding: 0 2vw 3vw 0;
}

ul.cartTable .expiration_cart {
  margin-top: -15px;
}

#delivery_limit_message {
  width: 100%;
  font-size: 3.2vw;
  padding: 3vw 4vw 0;
  align-items: center;
  color: #B12704;
  line-height: 1.5em;
}

.quickProductCode {
  display: block;
}

.quickProductLink {
  position: relative;
}

.quickProductLink svg {
  position: absolute;
  top: 0;
  left: 5px;
}

.quickorderDeliveryperiod {
  font-size: 12px;
  line-height: 1.4em;
  color: #B12704;
  margin-top: 1.1vw;
}

.listProductDetailSellBy {
  margin-top: 1vw;
  padding-top: 1vw !important;
}

.searchlistProductDetailSellBy {
  border-top: 1px solid #E0E0E0;
  margin-top: 1vw;
  padding-top: 1vw;
}

.shopping-complete-note {
  margin-top: 5vw;
}

/* --------------------------------
  代替品とリニューアル後の商品変更点
-------------------------------- */
.replacementOptionTitle {
  padding: 2vw 7vw 2vw 0;
  display: block !important;
  font-size: 3.4667vw !important;
  word-break: break-all;
  line-height: 1.5 !important;
}

.replacementOptionMore::after,
.replacementOptionMore::before {
  content: "" !important;
  position: absolute !important;
  right: 2vw !important;
  top: 2.5vw !important;
  width: 2px !important;
  height: 0.75em !important;
  left: unset !important;
  background-color: #999 !important;
  padding-left: unset !important;
}

.replacementOptionContentText {
  font-size: 3.4667vw;
  line-height: 1.65;
  letter-spacing: 0.03em;
}

.saleRecommendedBlock {
  border-bottom: 4vw solid #EDEDED;
}

.saleRecommendedList {
  background-color: #fff;
  padding: 0 4vw 4.5vw;
}

.saleRecommendedItemShopping {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.saleRecommendedItem {
  width: 47.9%;
  margin: 6vw 0 0;
}

.saleRecommendedItem:nth-of-type(1),
.saleRecommendedItem:nth-of-type(2) {
  margin-top: 2vw;
}

.saleRecommendedItemImg {
  position: relative;
}

.saleRecommendedItemImgOffBox {
  background: url("../img/common/jaggedcircle.png") no-repeat;
  position: absolute;
  background-size: 100%;
  width: 15vw;
  height: 15vw;
  top: -3.2vw;
  left: -2.5vw;
}

.saleRecommendedItemImgOff {
  text-align: center;
  color: #b12605;
  font-size: 4vw;
  line-height: 1.1;
  margin: 4.3vw 0 0 0;
}

.OffTextDecoration01 {
  font-size: 3vw;
}

.OffTextDecoration02 {
  display: block;
  font-size: 2.6vw;
}

.saleRecommendedItemImg img {
  border: 1px solid #D8D8D8;
  height: auto;
  margin-bottom: 6px;
  object-fit: cover;
}

.saleRecommendedItemSpecArea {
  width: 100%;
}

.saleRecommendedList .saleRecommendedItemShopping {
  font-size: 3.2vw;
  font-weight: bold;
  line-height: 1.5;
  position: relative;
}

.saleRecommendedItemNameBox {
  line-height: 1.45;
  margin-bottom: 2vw;
  font-weight: normal;
}

.saleRecommendedItemNamenumber,
.saleRecommendedItemSpecName {
  display: inline-block;
}

.saleRecommendedItemNameBox a {
  color: #333;
}

.saleRecommendedItemNameBox .original {
  margin: 0 1vw 0.5vw 0;
  top: -0.5vw;
}

.saleRecommendedItemPriceBox {
  line-height: 1.2;
  border-bottom: 1px solid #E0E0E0;
  margin-bottom: 2vw;
  padding-bottom: 2vw;
}

.saleRecommendedItemPrice {
  display: flex;
  align-items: baseline;
}

.saleRecommendedList .priceAfterSaleOff {
  font-size: 5vw;
}

.saleRecommendedList .priceAfterSaleOffUnit {
  font-size: 3vw;
}

.saleRecommendedList .infoItem-description {
  font-weight: normal;
}

.saleRecommendeLoginBtn {
  width: 100%;
  color: #fff;
  font-weight: bold;
  border: none;
  font-size: 3vw;
  letter-spacing: 0.09em;
  background-color: rgb(0, 176, 236);
  padding: 1.7vw 0;
  border-radius: 0.8vw;
}

/* --------------------------------
  ご利用ガイド
-------------------------------- */
dd {
  margin-bottom: 0;
  margin-left: 0;
}

.ec-role h1 {
  margin-bottom: 4vw;
}

.ec-guideOrderContent .ec-guide-list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 4vw;
}

.ec-guide .ec-guide-list,
.ec-navlistRole__navlist {
  margin: 0 4vw;
}

.ec-item-three-column {
  width: 33.3333333333%;
  padding-top: 5.3333vw;
  padding-left: 4vw;
}

.ecFree {
  padding: 5vw;
  background: #F5F5F5;
}

.ec-paymentCastDelivery .ecFree {
  margin-top: 4vw;
}

.guideOrderBox,
.ecPaymentStoreBox .ec-payment-store:last-child {
  margin-bottom: 7.5vw;
}

.ec-guide-bottom-border {
  margin-bottom: 5vw;
  padding-bottom: 5vw;
}

.ec-guideOrderContent .ec-line-height,
.ec-guideOrderFlowContent .ec-line-height,
.ec-paymentContent .ec-line-height,
.ec-guideFaqContent .ec-line-height,
.ec-guideContractContent .ec-line-height,
.ec-guidePrivacyContent .ec-line-height {
  padding: 0;
}

.ec-line-height {
  padding: 0 16vw;
}

.ec-guideOrderContent,
.ec-guideDeliveryContent,
.ec-guideOrderFlowContent p,
.ec-paymentCastDelivery-list .ec-paymentCastDelivery,
.ec-paymentContent,
.ec-guideFaqContent {
  font-size: 3.4667vw;
  width: 100%;
}

.ec-guideOrderContent .ec-item-three-column {
  padding: 4vw 5.3333vw;
  width: 100%;
  margin-bottom: 2.5vw;
}

.ec-guideOrderContent .ec-item-three-column:last-child {
  margin-bottom: 0;
}

.ec-guideOrderContent .ec-item-three-column dl {
  display: flex;
  margin-bottom: 0;
  align-items: flex-start;
}

.ec-guideOrderContent .ec-item-three-column dl dt {
  position: relative;
  width: 24vw;
}

.ec-guideOrderContent .ec-item-three-column a {
  color: #333;
}

.ec-guideOrderContent .ec-item-three-column p,
.ec-guideOrderContent .ec-item-three-column dt {
  line-height: 1em;
}

.ec-guideOrderContent .ec-item-three-column p:nth-child(1) {
  margin-bottom: 8px;
}

.ec-guideOrderContent .ec-item-three-column dd {
  margin-bottom: 0;
}

.ec-guideOrderContent .ec-guide-box,
.ec-paymentCastDelivery-list .ec-paymentCastDelivery,
.ec-guideFaqContent .questionItemBox,
.ec-guideContractContent .ec-guide-contract-acticle,
.ec-guidePrivacyContent {
  margin-left: 4vw;
  margin-right: 4vw;
}

.ec-item-three-column img {
  width: auto;
}

.ec-guideOrderContent .textLegend,
.ec-paymentContent .ec-paymentCastDelivery .textLegend,
.ec-paymentLaunchApp .textLegend {
  font-weight: bold;
  font-size: 3.7333vw;
  position: relative;
  margin-bottom: 2vw;
  line-height: 1.5em;
  text-indent: -1em;
  padding-left: 1em;
}

.ec-paymentContent .ec-paymentCastDelivery .textLegend {
  margin-top: 4vw;
}

.ec-paymentContent .ec-paymentCastDelivery .textLegend:first-child {
  margin-top: 0;
}

.ec-guideOrderContent .ec-item-three-column dl dt::before,
.ec-guideOrderContent .textLegend::before,
.ec-paymentContent .ec-paymentCastDelivery .textLegend::before,
.ec-paymentLaunchApp .textLegend::before,
.deliveryTimeList .textLegend::before {
  content: "";
  background-color: #C3B3A1;
  width: 1.6vw;
  height: 1.7vw;
  vertical-align: middle;
  margin-right: 1.3333vw;
  display: inline-block;
}

.ec-paymentContent .transfer {
  border-top: 1px solid #E0E0E0;
  padding-top: 8vw;
}

.ec-paymentContent .guideOrderBox .handle-slip .d-flex {
  flex-direction: column;
  text-align: center;
}

.ec-border-bottom-2px {
  padding-bottom: 5.3333vw;
  border-bottom: 0.5333vw solid #E0E0E0;
}

.ec-guideOrderContent .ec-guide-box a {
  color: #333;
  text-decoration: underline;
}

.ec-guideOrderContent .ec-guide-method,
.ec-guideDeliveryContent .ec-guide-method,
.ec-guideOrderFlowContent .ec-guide-method,
.ec-guideFaqContent .ec-guide-method,
.ec-paymentContent .ec-guide-method {
  padding-top: 8vw;
  border-top: 0.5333vw solid #E0E0E0;
  text-align: center;
}

.ec-guideOrderContent .ec-guide-method::before,
.ec-paymentContent .ec-guide-method::before,
.ec-guideDeliveryContent .ec-guide-method::before,
.ec-guideOrderFlowContent .ec-guide-method::before,
.ec-guideFaqContent .ec-guide-method::before,
.ec-paymentContent .ec-guide-method::before {
  display: none;
}

.ec-guideOrderContent .ec-guide-method .backgroundBlackCommon,
.ec-paymentContent .ec-guide-method .backgroundBlackCommon,
.ec-guideDeliveryContent .ec-guide-method .backgroundBlackCommon,
.ec-guideOrderFlowContent .ec-guide-method .backgroundBlackCommon,
.ec-guideFaqContent .ec-guide-method .backgroundBlackCommon,
.ec-paymentContent .ec-guide-method .backgroundBlackCommon {
  width: 80vw;
  padding: 3.3vw 0;
  margin-bottom: 3vw;
}

.ec-paymentLaunchApp .arrow img {
  margin: 2.6667vw 2.6667vw 2.6667vw;
  font-weight: bold;
  width: 4vw;
}

.ec-guideDeliveryContent .ec-two-column {
  display: flex;
  margin: 6.3333vw 0;
  padding-top: 6.3333vw;
}

.ec-guideDeliveryContent p,
.ec-paymentContent p,
.ec-guideOrderContent p,
.ec-guideOrderFlowContent p,
.ec-guideFaqContent .questionItemBox,
.ec-guideContractContent,
.ec-guidePrivacyContent,
.ec-contactRoleCustom {
  line-height: 1.7em;
}

.ec-guideDeliveryContent .deliveryTimeList {
  padding: 3.5vw 6vw;
  margin: 3.5vw 0;
}

.ec-paymentContent .ec-paymentCastDelivery-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 8vw;
}

.ec-paymentContent .ec-paymentCastDelivery .text01 {
  font-size: 3.8vw;
  font-weight: bold;
  line-height: 1em;
  margin-bottom: 4.8vw;
}

.ec-paymentCastDelivery-list .ec-paymentCastDelivery {
  border-bottom: none;
}

.ec-payment-store,
.handle-slip {
  margin: 0 4vw;
  border: 0.2667vw solid #D8D8D8;
  border-radius: 1.3333vw;
  padding: 6vw;
}

.ec-payment-store h3,
.ec-payment-store h4 {
  font-size: 3.4667vw;
  line-height: 1.7em;
}

.ec-payment-store h4 {
  margin-bottom: 0;
}

.ecPaymentStoreBox .paymentAnnotation {
  margin-top: 1.2vw;
  font-size: 3vw;
  text-indent: -1em;
  padding-left: 1em;
}

.ecPaymentStoreBox .ec-payment-store:first-child {
  margin-bottom: 3vw;
}

.paymentCastDeliveryDdSp {
  margin-bottom: 15px;
}

.ec-paymentContent .ec-title-line-height {
  padding: 0 4vw;
}

.ec-paymentContent .ec-paymentCastDelivery .ec-title-line-height {
  padding: 0;
}

.ec-guideDeliveryContent .ec-title-line-height {
  padding: 0 4vw;
}

.ec-guideDeliveryContent .text01 {
  font-size: 4vw;
  font-weight: bold;
  line-height: 1.65em;
  margin-bottom: 2vw;
}

.ec-guideDeliveryContent .timeIcon {
  width: 5.3333vw;
  height: 3.7333vw;
  display: inline-block;
  border-radius: 0.5333vw;
  margin-right: 1.3333vw;
  vertical-align: middle;
}

.ec-guideDeliveryContent .icon_green {
  background-color: #7AC28C;
}

.ec-guideDeliveryContent .icon_blue {
  background-color: #74B4E3;
}

.ec-guideDeliveryContent .icon_red {
  background-color: #E13E37;
}

.ec-guideDeliveryContent .icon_orange {
  background-color: #F4A12C;
}

.ec-guideDeliveryContent .icon_pink {
  background-color: #EC7993;
}

.ec-guideDeliveryContent .time {
  vertical-align: middle;
  font-weight: bold;
}

.ec-guideDeliveryContent .ec-width-word-wrap {
  margin-bottom: 3vw;
}

.ec-guideDeliveryContent .ec-width-word-wrap:nth-child(4) {
  margin-bottom: 4vw;
}

.ec-guideDeliveryContent .ec-width-word-wrap:last-child {
  margin-bottom: 0;
}

.ec-guideDeliveryContent .deliveryAreaMap {
  margin-top: 5svw;
}

.ec-guideDeliveryContent .textLegend {
  margin-right: 6vw;
}

.ec-guideDeliveryContent .ec-guide-title + .ec-two-column,
.ec-guideOrderFlowContent .ec-guide-title + .ec-two-column {
  padding: 0 4vw;
  flex-wrap: wrap;
}

.ec-guideDeliveryContent .ec-guide-title + .ec-two-column .ec-width-two-column img,
.ec-guideOrderFlowContent .ec-guide-title + .ec-two-column .ec-width-two-column img {
  width: 100%;
  height: auto;
  margin-top: 3vw;
}

.ec-guideDeliveryContent .deliverytimePrecautions p {
  text-indent: -1em;
  padding-left: 1em;
  margin-bottom: 2vw;
}

.ec-pageGuidContent,
.ec-navlistRole {
  margin: 0 auto;
  box-sizing: border-box;
  font-size: 3.2vw;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 301.3333vw;
}

.ec-guide-item a,
.ec-navlistRole .ec-navlistRole__item a {
  width: 100%;
  border: 1px solid #E0E0E0;
  margin-right: 2.3333vw;
  margin-bottom: 3vw;
  padding: 5.8vw 0 5.8vw 5vw;
  font-weight: bold;
  display: block;
  color: #333333;
  line-height: 1em;
  font-size: 3.4667vw;
}

.ec-menu-des {
  padding-top: 2.5vw;
  font-weight: normal;
}

.ec-guide-item:nth-of-type(2n+2) {
  margin-right: 0;
}

.ec-guideOrderFlowContent .ec-title-line-height a {
  color: #333;
  text-decoration: underline;
}

.ec-guide-item img,
.ec-navlistRole__navlist__Custom .ec-navlistRole__item img {
  width: 4.8vw;
  margin-top: -1vw;
}

.ec-navlistRole__navlist__Custom .ec-navlistRole__item img {
  margin-right: 2.1vw;
}

.ec-guideOrderFlowContent,
.ec-guideOrderFlowContent .ec-two-column .ec-width-two-column {
  font-size: 4vw;
}

.ec-guideFaqContent h3.questionItem,
.ec-guideFaqContent .questionItem {
  margin-bottom: 2vw;
  text-indent: -2em;
  padding-left: 2em;
}

.ec-guideFaqContent h3.questionItem {
  font-size: 3.4667vw;
  line-height: 1.7em;
}

.ec-guideFaqContent img {
  width: auto;
}

.ec-guideFaqContent a {
  text-decoration: underline;
  color: #333;
}

.ec-guideContractContent {
  font-size: 3.4667vw;
}

.ec-guideContractContent .num {
  display: inline-block;
  width: 5.3333vw;
  vertical-align: top;
}

.ec-guideContractContent .text {
  display: inline-block;
  width: 93%;
}

.ec-guideContractContent .num02 {
  padding-left: 4vw;
  width: 14vw;
  display: inline-block;
  vertical-align: top;
}

.ec-guideContractContent .text02 {
  display: inline-block;
  width: 83%;
}

.ec-guideContractContent h2.text01,
.ec-guideContractContent .text01 {
  font-size: 3.7333vw;
  font-weight: bold;
  margin-bottom: 2vw;
  padding: 0;
  border-bottom: none;
  line-height: 1.579;
}

#page_guide_payment .ec-paymentContent .text {
  margin: 5.3333vw 4vw 1.3333vw;
}

#page_guide_payment .ec-paymentContent h3.text {
  margin: 5.3333vw 4vw 1.3333vw;
  font-size: 3.4667vw;
  font-weight: bold;
  line-height: 1.7em;
}

#page_guide_privacy .ec-guidePrivacyContent {
  font-size: 3.4667vw;
}

ol.privacy-list li {
  font-size: 3.4667vw;
}

.ec-guideOrderFlowContent .ec-orderFlowBox {
  padding: 0 4vw 2vw !important;
}

.ec-contactRoleCustom .ec-contactLineBottom {
  padding-bottom: 4vw;
}

.ec-guideContractContent .ec-guide-contract-acticle {
  margin-bottom: 6vw;
}

.ec-guidePrivacyContent .text-style1 {
  margin-bottom: 5vw;
}

.ec-guidePrivacyContent ol li {
  list-style-type: decimal;
  margin-bottom: 4vw;
}

.ec-guidePrivacyContent .privacy-list {
  padding-inline-start: 2em;
}

.postagelistImgArea {
  margin-top: 4vw;
}

.ec-guideFaqContent .ec-guide-method .backgroundBlackCommon {
  color: #fff;
}

/* --------------------------------
  ヘッダー
-------------------------------- */
.ec-layoutRole__header {
  position: relative;
}

.ec-headerNaviRole {
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  display: block;
  justify-content: space-between;
  align-items: center;
}

.ec-headerNaviRole .ec-headerNaviRole__left {
  width: 100%;
}

.ec-headerRole .ec-headerTitle .ec-headerTitle__title a {
  display: none;
}

.ec-headerNav {
  display: none;
}

.ec-headerTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  margin: 2vw 3.5vw;
}

.ecHeaderSpPartsBox {
  display: flex;
  align-items: center;
}

.ec-headerTop .name {
  text-align: right;
  font-size: 2.66vw;
}

.ec-headerTop .headerSpLoginTop {
  line-height: 1;
  margin-right: 1.6vw;
}

.ec-headerTop .sign-in {
  background-color: #c43030;
}

.ec-headerTop .sign-in,
.ec-headerTop .headerSpLoginTop {
  text-align: center;
  color: #fff;
  font-size: 3vw;
  border-radius: 1.2vw;
  padding: 2.5vw 0 2.3vw;
  width: 25vw;
  display: block;
  font-weight: bold;
  letter-spacing: 0.09em;
}

.ec-headerTop .navTop {
  width: 6.4vw;
  margin-left: 2.6667vw;
  margin-bottom: 0;
}

.ec-headerTop .navTop span {
  display: block;
  height: 0.8vw;
  background-color: #6A6A6A;
  margin-bottom: 1.6vw;
  text-indent: -2666.4vw;
  border-radius: 2.6667vw;
}

.ec-headerTop .navTop span:last-child {
  margin-bottom: 0;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content {
  width: 100%;
  float: right;
  border-radius: 0;
  border-top: 5px solid rgb(0, 176, 236);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  min-height: 100vh;
  height: auto;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-header {
  border-bottom: 0;
  text-align: left;
  padding: 4vw 4vw;
  justify-content: flex-start;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-header img.icon-home {
  width: 5vw;
  margin-right: 4px;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-header img {
  width: 19.73vw;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body .close {
  position: absolute;
  left: -10.6667vw;
  top: 50%;
  padding: 0;
  margin: 0;
  opacity: 1;
  z-index: 10;
  transform: translateY(-50%);
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body .close span {
  color: #fff;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body {
  padding: 0;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav {
  list-style: none;
  padding: 0;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li {
  list-style: none;
  border-bottom: 0.2667vw solid #D8D8D8;
  position: relative;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li:first-child {
  border-top: 0.2667vw solid #D8D8D8;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li::after {
  position: absolute;
  right: 5.3333vw;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background: url(../img/common/arrow-right02.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.6667vw;
  background-size: cover;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild::after {
  content: "";
  display: none;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild a {
  position: relative;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li a:active,
.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li a:focus {
  text-decoration: none;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild > a[aria-expanded=true] {
  background-color: #F0E8DF;
  font-weight: bold;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild > a[aria-expanded=true]::after {
  position: absolute;
  right: 5.3333vw;
  top: 50%;
  transform: translateY(-50%) rotate(-87deg);
  content: "";
  background: url(../img/common/arrow-right02.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.6667vw;
  background-size: cover;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild > a[aria-expanded=false]::after {
  position: absolute;
  right: 5.3333vw;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background: url(../img/common/arrow-right02.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.6667vw;
  background-size: cover;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li a {
  display: block;
  padding: 3.5vw 4vw;
  font-size: 3.2vw;
  color: #333;
  letter-spacing: 0.03em;
  font-weight: bold;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li a:hover {
  text-decoration: none;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild ul {
  list-style: none;
  padding: 0;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild ul li {
  background-color: #F5F5F5;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild ul li ul li a {
  padding-left: 10.6667vw;
  background-color: #fff;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild ul li::after {
  position: absolute;
  right: 5.3333vw;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  background: url(../img/common/arrow-right02.svg) no-repeat 0 0;
  width: 1.6vw;
  height: 2.6667vw;
  background-size: cover;
}

.ec-headerRole__navSP .modal .modal-dialog .modal-content .modal-body ul.listNav li.hasChild ul li a {
  padding-left: 7.4667vw;
}

.ec-headerRole__navSP .modal .modal-dialog .sign-in {
  background-color: #c43030;
  text-align: center;
  color: #fff;
  font-size: 3.5vw;
  border-radius: 1.3333vw;
  padding: 2.1333vw 0;
  display: block;
  margin: 0 4vw 3.6667vw;
  font-weight: bold;
  letter-spacing: 0.1em;
}

.ec-headerNaviRole .ec-headerNaviRole__search {
  background-color: #F5F5F5;
  padding: 2vw 3.5vw;
  width: 100%;
}

.ec-headerSearch .ec-headerSearch__keyword {
  position: relative;
  color: #333333;
}

.ec-headerSearch .ec-headerSearch__keyword .ec-input {
  display: flex;
  border: none;
  width: 100%;
}

.ec-headerSearch .ec-headerSearch__keyword input[type=search] {
  background-color: #fff;
  height: 10.6667vw;
  width: 100%;
  font-size: 3.2vw;
  border: 1px solid #BEBEBE;
  padding: 0.5em 1em 0.5em 1em;
  box-shadow: none;
  box-sizing: border-box;
  margin-bottom: 0;
  border-radius: 1.3333vw 0 0 1.3333vw;
}

.ec-headerSearch .ec-headerSearch__keywordBtn {
  height: 10.6667vw;
  border: 0;
  display: block;
  white-space: nowrap;
  z-index: 1;
  width: 12vw;
  border-bottom-right-radius: 1.0667vw;
  border-top-right-radius: 1.0667vw;
  background: url(/html/user_data/assets/img/common/icon-search.svg) no-repeat center center #6A6A6A;
  background-size: 50%;
}

.ec-headerNaviRole .ec-headerNaviRole__right {
  width: 45%;
  display: none;
}

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

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

.ec-layoutRole__header .ec-headerNaviDelivery {
  background-color: #F5F5F5;
}

.ec-headerNaviDelivery .ec-headerNaviDelivery-item {
  margin: 0 auto !important;
  box-sizing: border-box;
  line-height: 1.4;
  color: #333333;
  -webkit-text-size-adjust: 100%;
  padding: 1vw 3.5vw;
  font-size: 3vw;
}

.ec-headerNaviDelivery .ec-headerNaviDelivery-item .mr-auto {
  display: inline-block;
  margin: 0 auto;
}

.ec-headerNaviDelivery .ec-headerNaviDelivery-item .memberFreeShipping {
  padding-bottom: 2.2vw;
  text-align: center;
}

.ec-headerNaviDelivery-item .free-shipping .text-sm-right {
  display: none;
}

.ec-account {
  border-top: 1px solid #E0E0E0;
  border-bottom: 1px solid #E0E0E0;
  display: block;
}

.ec-account .ec-headerNav {
  display: flex;
  align-items: flex-end;
  margin: 2.9vw 1vw 2.6667vw;
  justify-content: space-around;
}

.ec-banner {
  margin-bottom: 0;
}

.ec-account .ec-headerNav .ec-headerNav__item {
  position: relative;
}

.ec-account .ec-headerNav .ec-headerNav__item img {
  width: 5.6vw;
}

.ec-account .ec-headerNav .ec-headerNav__item:last-of-type img {
  width: 6.8vw;
}

.ec-headerNav .ec-headerNav__itemIcon {
  display: block;
  margin: 0 auto;
  font-size: 18px;
  color: black;
}

.ec-account .ec-headerNav .ec-headerNav__item a {
  display: block;
  text-align: center;
}

.ec-account .ec-headerNav .ec-headerNav__item a:hover {
  text-decoration: none;
}

.ec-account .ec-headerNav .ec-headerNav__item span {
  display: block;
  color: #333;
  font-size: 3vw;
  text-align: center;
  margin: 1vw 0 0 0;
  font-weight: bold;
}

.ec-account .ec-headerNav .ec-headerNav__item::after {
  margin: 0 4vw;
  content: "";
  position: absolute;
  left: 100%;
  height: 90%;
  width: 1px;
  background-color: #E0E0E0;
  top: 6%;
}

.ec-account .ec-headerNav .ec-headerNav__item:nth-of-type(4):after {
  display: none;
}

#menuModal .modal-dialog {
  float: right;
  width: 82%;
}

.modal.fade:not(.show).right .modal-dialog {
  transform: translate3d(125%, 0, 0);
}

/* Khoa */
#cateModal ul.listCate .card .card-header button[aria-expanded=true] {
  background-color: #C3B3A1 !important;
  font-weight: bold;
}

#cateModal ul.listCate li a {
  padding: 0 !important;
}

.form-search-side-left-box .searchBlock label,
#cateModal ul.listCate li,
#cateModal ul.listCate .card .card-header button {
  font-size: 3.465vw;
}

#side_left_product_sp .form-search-side-left-box .searchBlock label,
#side_left_product_sp .form-search-side-left-box .searchBlock .titleSub {
  font-size: 3.732vw !important;
}

#cateModal ul.listCate .card .card-header button {
  font-weight: normal !important;
}

#cateModal ul.listCate .card ul li {
  padding: 13px 16px 11px 30px;
  background-color: #c41652;
  border-bottom: 0.2083vw solid #E0E0E0 !important;
}

#cateModal ul.listCate .card ul li:last-child {
  border-bottom: none !important;
}

#cateModal .modal-dialog .modal-header .close, #optionSearch .modal-dialog .modal-header .close {
  top: 0.65vw;
  right: 2vw;
  width: 7.4667vw;
  height: 7.4667vw;
  margin: 0;
}

#optionSearch .modal-dialog .modal-header .close,
#cateModal .modal-dialog .modal-header .close {
  top: 2.1vw;
  right: 2vw;
}

.form-search-side-left-box .btnSearchByCondition {
  text-align: center;
}

.form-search-side-left-box #cooking_method, .form-search-side-left-box #search_other {
  padding-left: 2vw;
}

#optionSearch .searchBlock .form-check label::before {
  left: -6.6667vw;
}

.btnSearchByCondition .btn {
  padding: 2.8833vw 3.3333vw;
}

.headerH1 {
  font-size: 2.5vw;
  text-align: center;
  background-color: #F9F9F9;
  padding: 2vw 4vw;
  margin: 0;
  font-weight: 900;
}

.ec-headerNaviDelivery .ec-headerNaviDelivery-item .ec-shopping-cart {
  display: none;
}

.logged .ec-headerNaviDelivery-item .free-shipping img {
  width: 6.6vw;
  margin-bottom: 1.5vw;
}

.ec-headerNaviDelivery-item .free-shipping a {
  letter-spacing: 0.05em;
  color: #333;
  display: inline-block;
  position: relative;
  font-size: 3vw;
  font-weight: bold;
}

.ec-headerNaviDelivery-item .free-shipping a:after {
  position: absolute;
  bottom: 0;
  left: 101%;
  margin: auto;
  content: "";
  vertical-align: middle;
  background: url(../img/common/arrow-right02.svg) no-repeat 0 0;
  width: 5vw;
  height: 3.3vw;
  background-size: 1.2vw;
}

.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__navSP {
  display: block;
  position: absolute;
  top: 4vw;
  width: 27%;
  right: 0;
  text-align: right;
}

.ec-headerNaviRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}

.ec-headerNaviRole html {
  box-sizing: border-box;
}

.ec-headerNaviRole *,
.ec-headerNaviRole *::before,
.ec-headerNaviRole *::after {
  box-sizing: inherit;
}

.ec-headerNaviRole .fa-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

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

.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-headerNaviDelivery .ec-headerNaviDelivery-item .w-50 {
  width: 100% !important;
}

.ec-headerNaviDelivery-item .free-shipping .fa-chevron-right {
  margin-left: 0;
}

.ec-headerNavSP {
  display: block;
  cursor: pointer;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 2.6667vw;
  width: 10.6667vw;
  height: 10.6667vw;
  font-size: 4.8vw;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 2.6667vw;
  left: 2.6667vw;
  z-index: 1000;
}

.ec-headerNavSP .fas {
  vertical-align: top;
}

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

.ec-headerRole__navSP .modal .modal-dialog {
  margin: 0;
}

/*
ヘッダー：タイトル

ヘッダー内で使用されるタイトルコンポーネントです。

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

Styleguide 11.2.1
*/
.ec-headerTitle textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}

.ec-headerTitle img {
  max-width: 100%;
  width: 23.4667vw;
  height: auto;
}

.ec-headerTitle html {
  box-sizing: border-box;
}

.ec-headerTitle *,
.ec-headerTitle *::before,
.ec-headerTitle *::after {
  box-sizing: inherit;
}

.ec-headerTitle .ec-headerTitle__title h1 {
  margin: 0;
  padding: 0;
}

.ec-headerTitle .ec-headerTitle__title a:hover {
  opacity: 0.8;
}

.ec-headerTitle .ec-headerTitle__subtitle {
  font-size: 2.6667vw;
  text-align: center;
}

.ec-headerTitle .ec-headerTitle__subtitle a {
  display: inline-block;
  color: #0092C4;
  text-decoration: none;
  cursor: pointer;
}

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

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

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

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

Styleguide 11.2.3
*/
/* .ec-headerNav .ec-headerNav__item {
    margin-left: 0;
    display: inline-block;
    font-size: 7.4667vw;
} */
/* .ec-headerNav .ec-headerNav__itemIcon {
    display: block;
    margin-right: 2.6667vw;
    margin-left: 2.6667vw;
    font-size: 4.8vw;
    color: black;
} */
.ec-headerNav .ec-headerNav__itemLink {
  display: none;
  margin-right: 1.3333vw;
  font-size: 3.7333vw;
  vertical-align: middle;
  color: black;
}

/*
ヘッダー：検索ボックス

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

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

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

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

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

.ec-headerSearch .ec-headerSearch__category {
  float: none;
}

.ec-headerSearch .ec-headerSearch__category .ec-select {
  overflow: hidden;
  width: 100%;
  margin: 0;
  text-align: center;
}

.ec-headerSearch .ec-headerSearch__category .ec-select select {
  width: 100%;
  cursor: pointer;
  padding: 2.1333vw 6.4vw 2.1333vw 2.1333vw;
  text-indent: 0.0027vw;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent 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: 2.6667vw;
  border-top-left-radius: 2.6667vw;
}

.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: 1.6vw solid transparent;
  border-right: 1.6vw solid transparent;
  border-top: 1.6vw solid #fff;
  pointer-events: none;
}