@charset "UTF-8";
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif; /* 1 */
  line-height: 1.15; /* 2 */
  -ms-text-size-adjust: 100%; /* 3 */
  -webkit-text-size-adjust: 100%; /* 3 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main { /* 1 */
  display: block;
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent; /* 1 */
  -webkit-text-decoration-skip: objects; /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details, /* 1 */
menu {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  color: #000000;
  transition: z-index 0ms 5.28455ms;
  font-size: 14px;
  line-height: 1.6;
  margin: 0; }
select {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "Noto Sans JP",sans-serif; }
pre {
  background-color: transparent;
  border: none;
  padding: 16px 0; }
p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0; }
p span {
    color: #818181;
    font-size: 12px; }
a:hover {
  text-decoration: none; }
a[href^="tel:"] {
  color: inherit;
  text-decoration: none; }
img {
  width: 100%; }
/*!
	Modaal - accessible modals - v0.4.4
	by Humaan, for all humans.
	http://humaan.com
 */
.modaal-noscroll {
  overflow: hidden; }
.modaal-accessible-hide {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden; }
.modaal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0; }
.modaal-wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: auto;
  opacity: 1;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  transition: all 0.3s ease-in-out; }
.modaal-wrapper * {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden; }
.modaal-wrapper .modaal-close {
    border: none;
    background: transparent;
    padding: 0;
    -webkit-appearance: none; }
.modaal-wrapper.modaal-start_none {
    display: none;
    opacity: 1; }
.modaal-wrapper.modaal-start_fade {
    opacity: 0; }
.modaal-wrapper *[tabindex="0"] {
    outline: none !important; }
.modaal-wrapper.modaal-fullscreen {
    overflow: hidden; }
.modaal-outer-wrapper {
  display: table;
  position: relative;
  width: 100%;
  height: 100%; }
.modaal-fullscreen .modaal-outer-wrapper {
    display: block; }
.modaal-inner-wrapper {
  display: table-cell;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  text-align: center;
  padding: 80px 25px; }
.modaal-fullscreen .modaal-inner-wrapper {
    padding: 0;
    display: block;
    vertical-align: top; }
.modaal-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: auto;
  text-align: left;
  color: #000;
  max-width: 1000px;
  border-radius: 0px;
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  cursor: auto; }
.modaal-container.is_loading {
    height: 100px;
    width: 100px;
    overflow: hidden; }
.modaal-fullscreen .modaal-container {
    max-width: none;
    height: 100%;
    overflow: auto; }
.modaal-close {
  position: fixed;
  right: 20px;
  top: 20px;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border-radius: 100%;
  transition: all 0.2s ease-in-out; }
.modaal-close:focus, .modaal-close:hover {
    outline: none;
    background: #fff; }
.modaal-close:focus:before, .modaal-close:focus:after, .modaal-close:hover:before, .modaal-close:hover:after {
      background: #b93d0c; }
.modaal-close span {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden; }
.modaal-close:before, .modaal-close:after {
    display: block;
    content: " ";
    position: absolute;
    top: 14px;
    left: 23px;
    width: 4px;
    height: 22px;
    border-radius: 4px;
    background: #fff;
    transition: background 0.2s ease-in-out; }
.modaal-close:before {
    transform: rotate(-45deg); }
.modaal-close:after {
    transform: rotate(45deg); }
.modaal-fullscreen .modaal-close {
    background: #afb7bc;
    right: 10px;
    top: 10px; }
.modaal-content-container {
  padding: 30px; }
.modaal-confirm-wrap {
  padding: 30px 0 0;
  text-align: center;
  font-size: 0; }
.modaal-confirm-btn {
  font-size: 14px;
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
  cursor: pointer;
  border: none;
  background: transparent; }
.modaal-confirm-btn.modaal-ok {
    padding: 10px 15px;
    color: #fff;
    background: #555;
    border-radius: 3px;
    transition: background 0.2s ease-in-out; }
.modaal-confirm-btn.modaal-ok:hover {
      background: #2f2f2f; }
.modaal-confirm-btn.modaal-cancel {
    text-decoration: underline; }
.modaal-confirm-btn.modaal-cancel:hover {
      text-decoration: none;
      color: #2f2f2f; }
@keyframes instaReveal {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@-webkit-keyframes instaReveal {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
.modaal-instagram .modaal-container {
  width: auto;
  background: transparent;
  box-shadow: none !important; }
.modaal-instagram .modaal-content-container {
  padding: 0;
  background: transparent; }
.modaal-instagram .modaal-content-container > blockquote {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important; }
.modaal-instagram iframe {
  opacity: 0;
  margin: -6px !important;
  border-radius: 0 !important;
  width: 1000px !important;
  max-width: 800px !important;
  box-shadow: none !important;
  -webkit-animation: instaReveal 1s linear forwards;
          animation: instaReveal 1s linear forwards; }
.modaal-image .modaal-inner-wrapper {
  padding-left: 140px;
  padding-right: 140px; }
.modaal-image .modaal-container {
  width: auto;
  max-width: 100%; }
.modaal-gallery-wrap {
  position: relative;
  color: #fff; }
.modaal-gallery-item {
  display: none; }
.modaal-gallery-item img {
    display: block; }
.modaal-gallery-item.is_active {
    display: block; }
.modaal-gallery-label {
  position: absolute;
  left: 0;
  width: 100%;
  margin: 20px 0 0;
  font-size: 18px;
  text-align: center;
  color: #fff; }
.modaal-gallery-label:focus {
    outline: none; }
.modaal-gallery-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  cursor: pointer;
  color: #fff;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0);
  border: none;
  border-radius: 100%;
  transition: all 0.2s ease-in-out; }
.modaal-gallery-control.is_hidden {
    opacity: 0;
    cursor: default; }
.modaal-gallery-control:focus, .modaal-gallery-control:hover {
    outline: none;
    background: #fff; }
.modaal-gallery-control:focus:before, .modaal-gallery-control:focus:after, .modaal-gallery-control:hover:before, .modaal-gallery-control:hover:after {
      background: #afb7bc; }
.modaal-gallery-control span {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px);
    /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden; }
.modaal-gallery-control:before, .modaal-gallery-control:after {
    display: block;
    content: " ";
    position: absolute;
    top: 16px;
    left: 25px;
    width: 4px;
    height: 18px;
    border-radius: 4px;
    background: #fff;
    transition: background 0.2s ease-in-out; }
.modaal-gallery-control:before {
    margin: -5px 0 0;
    transform: rotate(-45deg); }
.modaal-gallery-control:after {
    margin: 5px 0 0;
    transform: rotate(45deg); }
.modaal-gallery-next-inner {
  left: 100%;
  margin-left: 40px; }
.modaal-gallery-next-outer {
  right: 45px; }
.modaal-gallery-prev:before, .modaal-gallery-prev:after {
  left: 22px; }
.modaal-gallery-prev:before {
  margin: 5px 0 0;
  transform: rotate(-45deg); }
.modaal-gallery-prev:after {
  margin: -5px 0 0;
  transform: rotate(45deg); }
.modaal-gallery-prev-inner {
  right: 100%;
  margin-right: 40px; }
.modaal-gallery-prev-outer {
  left: 45px; }
.modaal-video-wrap {
  margin: auto 50px;
  position: relative; }
.modaal-video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  background: #000;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto; }
.modaal-video-container iframe,
  .modaal-video-container object,
  .modaal-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
.modaal-iframe .modaal-content {
  width: 100%;
  height: 100%; }
.modaal-iframe-elem {
  width: 100%;
  height: 100%;
  display: block; }
.modaal-loading-spinner {
  background: none;
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -100px;
  transform: scale(0.25); }
@-webkit-keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    transform: scale(1.5); }
  100% {
    opacity: .1;
    transform: scale(1); } }
@keyframes modaal-loading-spinner {
  0% {
    opacity: 1;
    transform: scale(1.5); }
  100% {
    opacity: .1;
    transform: scale(1); } }
.modaal-loading-spinner > div {
  width: 24px;
  height: 24px;
  margin-left: 4px;
  margin-top: 4px;
  position: absolute; }
.modaal-loading-spinner > div > div {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: #fff; }
.modaal-loading-spinner > div:nth-of-type(1) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: 0s;
  animation-delay: 0s; }
.modaal-loading-spinner > div:nth-of-type(2) > div, .modaal-loading-spinner > div:nth-of-type(3) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite; }
.modaal-loading-spinner > div:nth-of-type(1) {
  transform: translate(84px, 84px) rotate(45deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(2) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .12s;
  animation-delay: .12s; }
.modaal-loading-spinner > div:nth-of-type(2) {
  transform: translate(84px, 84px) rotate(90deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(3) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .25s;
  animation-delay: .25s; }
.modaal-loading-spinner > div:nth-of-type(4) > div, .modaal-loading-spinner > div:nth-of-type(5) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite; }
.modaal-loading-spinner > div:nth-of-type(3) {
  transform: translate(84px, 84px) rotate(135deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(4) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .37s;
  animation-delay: .37s; }
.modaal-loading-spinner > div:nth-of-type(4) {
  transform: translate(84px, 84px) rotate(180deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(5) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .5s;
  animation-delay: .5s; }
.modaal-loading-spinner > div:nth-of-type(6) > div, .modaal-loading-spinner > div:nth-of-type(7) > div {
  -ms-animation: modaal-loading-spinner 1s linear infinite;
  -moz-animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  -o-animation: modaal-loading-spinner 1s linear infinite; }
.modaal-loading-spinner > div:nth-of-type(5) {
  transform: translate(84px, 84px) rotate(225deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(6) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .62s;
  animation-delay: .62s; }
.modaal-loading-spinner > div:nth-of-type(6) {
  transform: translate(84px, 84px) rotate(270deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(7) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
          animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .75s;
  animation-delay: .75s; }
.modaal-loading-spinner > div:nth-of-type(7) {
  transform: translate(84px, 84px) rotate(315deg) translate(70px, 0); }
.modaal-loading-spinner > div:nth-of-type(8) > div {
  -webkit-animation: modaal-loading-spinner 1s linear infinite;
  animation: modaal-loading-spinner 1s linear infinite;
  -webkit-animation-delay: .87s;
  animation-delay: .87s; }
.modaal-loading-spinner > div:nth-of-type(8) {
  transform: translate(84px, 84px) rotate(360deg) translate(70px, 0); }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
見出し

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

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

Styleguide 1.1
*/
/*
見出し

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

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

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

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

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

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

Markup:
.ec-pageHeader
  h1 利用規約

Styleguide 1.1.2
*/
.ec-pageHeader h1 {
  margin: 40px 0 0; }
/*
サブ見出し

利用規約など、文字主体のページで用いられるサブ見出しです。

ex [利用規約ページ サブ見出し部分](http://demo3.ec-cube.net/help/agreement)

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

Styleguide 1.1.3
*/
.ec-heading {
  margin: 24px 0; }
h1, h2, h3, h4 {
  line-height: 1; }
h1 img, h2 img, h3 img, h4 img {
    width: auto; }
h1 {
  font-size: 35px;
  letter-spacing: 0.08em; }
h1 img {
    height: 33px; }
h2,
h1.h1_s {
  font-size: 30px;
  letter-spacing: 0.05em;
  padding: 16px 0;
  font-weight: 600; }
h2 img,
  h1.h1_s img {
    height: 22px; }
h3,
h2.h2_s {
  font-size: 22px;
  letter-spacing: 0.05em; }
h3 img,
  h2.h2_s img {
    height: 22px; }
h2.h2_sp img {
  width: 100%;
  height: auto; }
h4,
h3.h3_s {
  font-size: 21px;
  letter-spacing: 0.1em; }
h4 img,
  h3.h3_s img {
    height: 21px; }
/*
サブ見出し(太字)

文字主体のページで用いられるサブ見出しの太字のスタイルです。

ex [プライバシーポリシー サブ見出し部分](http://demo3.ec-cube.net/help/privacy)

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

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

マイページ注文履歴等で用いられる背景付きの見出しです。

ex [ご注文履歴詳細　背景付き見出し部分](http://demo3.ec-cube.net/mypage/history/1063)

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

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

ユーザが行った操作に対する、完了報告やエラー表示のページで使用される見出しのスタイルです。

ex [注文完了 ログイン後、カートに商品を入れ注文完了まで行う](http://demo3.ec-cube.net/shopping/)

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

Styleguide 1.1.6
*/
.ec-reportHeading {
  width: 100%;
  margin: 20px 0 30px;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold; }
.ec-reportHeading h1, .ec-reportHeading h2, .ec-reportHeading h3,
  .ec-reportHeading h4, .ec-reportHeading h5, .ec-reportHeading h6, .ec-reportHeading p {
    font-weight: bold; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
文字装飾

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

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

Styleguide 1.2
*/
/*
テキストリンク

テキストリンクのスタイルです。

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

Styleguide 1.2.1
*/
.ec-link {
  color: #0092C4;
  text-decoration: none;
  cursor: pointer; }
.ec-link:hover {
    color: #33A8D0;
    text-decoration: none; }
/*
テキスト（太字）

テキストを太くするためのスタイルです。

Markup:
p.ec-font-bold この季節にぴったりな商品をご用意しました

Styleguide 1.2.2
*/
.ec-font-bold {
  font-weight: bold; }
/*
テキスト（グレー）

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

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

Styleguide 1.2.3
*/
.ec-color-grey {
  color: #9a947e; }
/*
テキスト（赤）

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

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

Styleguide 1.2.4
*/
.ec-color-red {
  color: #DE5D50; }
.ec-color-accent {
  color: #DE5D50; }
/*
フォントサイズ

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

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


Styleguide 1.2.5
*/
.ec-font-size-1 {
  font-size: 12px; }
.ec-font-size-2 {
  font-size: 14px; }
.ec-font-size-3 {
  font-size: 16px; }
.ec-font-size-4 {
  font-size: 20px; }
.ec-font-size-5 {
  font-size: 32px; }
.ec-font-size-6 {
  font-size: 40px; }
/*
テキスト水平位置

テキストをセンタリングするためのスタイルです。

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

Styleguide 1.2.6
*/
.ec-text-ac {
  text-align: center; }
/*
価格テキスト

価格を表示するテキストです。

価格文字にスペースを取るほか、税込み等の表示を小さくする効果もあります。

spanを用いたインライン要素として利用します。

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

Styleguide 1.2.7
*/
.ec-price .ec-price__unit {
  font-size: 18px;
  font-weight: bold; }
.ec-price .ec-price__price {
  display: inline-block;
  padding: 0 .3em;
  font-size: 18px;
  font-weight: bold; }
.ec-price .ec-price__tax {
  font-size: 12px; }
/*
テキストの位置

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

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

Styleguide 1.2.8
*/
.text-left {
  text-align: left; }
.text-center {
  text-align: center; }
.text-right {
  text-align: right; }
/*
メッセージテキスト

ユーザが行った操作に対する、完了報告やエラー表示のページで使用されるテキストのスタイルです。

ex [注文完了 （ログイン後、カートに商品を入れ注文完了まで行う）](http://demo3.ec-cube.net/shopping/)

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


Styleguide 1.2.9
*/
.ec-reportDescription {
  margin-top: 16px;
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.05em;
  color: #000000; }
.ec-reportDescription__welcome {
    font-weight: 600;
    font-size: 22px;
    line-height: 180%;
    letter-spacing: 0.04em;
    color: #000000; }
.ec-reportDescription__welcome span:last-of-type {
      font-size: 28px; }
.baloon {
  position: relative;
  display: inline-block;
  padding: 24px 32px;
  background: #FFEFA4;
  border-radius: 75px;
  margin: 0 calc(50% - 170px);
  width: 340px; }
.baloon::before {
    content: "";
    position: absolute;
    top: 96%;
    left: 50%;
    margin-left: -15px;
    border: 10px solid transparent;
    border-top: 29px solid #FFEFA4;
    transform: rotate(28deg); }
/*
テキスト下部のスペース

テキストの下に余白を追加することができます。 .ec-para-normalで16pxの余白をつけることができます。

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

Styleguide 1.2.10
*/
.ec-para-normal {
  margin-bottom: 16px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
リスト

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

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

Styleguide 1.3
*/
/*
水平定義リスト

シンプルな定義リストのスタイルを定義します。

dl要素を用いてコーディングします。

ex [当サイトについて　水平定義リスト部分](http://demo3.ec-cube.net/help/about)

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

Styleguide 1.3.1
*/
.ec-definitions, .ec-definitions--soft {
  margin: 5px 0;
  display: block; }
.ec-definitions dt, .ec-definitions--soft dt, .ec-definitions dd, .ec-definitions--soft dd {
    display: inline-block;
    margin: 0; }
.ec-definitions dt, .ec-definitions--soft dt {
    font-weight: bold; }
.ec-definitions--soft dt {
  font-weight: normal; }
/*
下線つき定義リスト

線が添えられた定義リストのスタイルを定義します。

dl要素を用いてコーディングします。

ex [当サイトについて　下線つき定義リスト](http://demo3.ec-cube.net/help/about)

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

Styleguide 1.3.2
*/
.ec-borderedDefs {
  width: 100%;
  border-top: 1px solid #ccc;
  margin-top: 16px; }
.ec-borderedDefs dl {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 16px 0;
    flex-wrap: wrap; }
.ec-borderedDefs dt, .ec-borderedDefs dd {
    padding: 0; }
.ec-borderedDefs dt {
    font-weight: normal;
    width: 28%;
    padding-left: 16px;
    display: flex;
    align-items: center;
    color: #666666; }
.ec-borderedDefs dd {
    padding: 0;
    width: 72%;
    padding-left: 16px; }
.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 8px 0; }
.ec-list-chilled dt, .ec-list-chilled dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 0; }
.ec-list-chilled dt {
    width: 30%; }
.ec-list-chilled dd {
    padding: 0; }
/*
ボーダーリスト

線が添えられたリストを表示します。

ex [当サイトについて　ボーダーリスト](http://demo3.ec-cube.net/help/about)

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


Styleguide 1.3.3
*/
.ec-borderedList {
  width: 100%;
  border-top: 0;
  list-style: none;
  padding: 0; }
.ec-borderedList li {
    border-bottom: 1px dotted #ccc; }
.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 8px 0; }
.ec-list-chilled dt, .ec-list-chilled dd {
    display: table-cell;
    border-bottom: 1px dotted #ccc;
    padding: 16px 0; }
.ec-list-chilled dt {
    width: 30%; }
.ec-list-chilled dd {
    padding: 16px; }
/*
ボタンサイズ

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

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

Styleguide 2.1
*/
/*
通常ボタン

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

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

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

Styleguide 2.1.1
*/
.ec-inlineBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #fff;
  border-color: #ccc; }
.ec-inlineBtn, .ec-inlineBtn:active, .ec-inlineBtn.active {
    outline: none; }
.ec-inlineBtn:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-inlineBtn:hover, .ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-inlineBtn:active, .ec-inlineBtn.active {
    outline: none;
    background-image: none; }
.ec-inlineBtn.disabled, .ec-inlineBtn[disabled],
  fieldset[disabled] .ec-inlineBtn {
    cursor: not-allowed; }
.ec-inlineBtn:focus, .ec-inlineBtn.focus {
    color: #000;
    background-color: #e6e6e6;
    border-color: #8c8c8c; }
.ec-inlineBtn:hover {
    color: #000;
    background-color: #e6e6e6;
    border-color: #adadad; }
.ec-inlineBtn:active, .ec-inlineBtn.active,
  .open > .ec-inlineBtn.dropdown-toggle {
    color: #000;
    background-color: #e6e6e6;
    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: #000;
      background-color: #d4d4d4;
      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: #fff;
    border-color: #ccc; }
.ec-inlineBtn .badge {
    color: #fff;
    background-color: #000; }
.ec-inlineBtn--primary {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #fff;
  border-color: #fff; }
.ec-inlineBtn--primary, .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active {
    outline: none; }
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-inlineBtn--primary:hover, .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active {
    outline: none;
    background-image: none; }
.ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled],
  fieldset[disabled] .ec-inlineBtn--primary {
    cursor: not-allowed; }
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
    color: #000;
    background-color: #e6e6e6;
    border-color: #bfbfbf; }
.ec-inlineBtn--primary:hover {
    color: #000;
    background-color: #e6e6e6;
    border-color: #e0e0e0; }
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active,
  .open > .ec-inlineBtn--primary.dropdown-toggle {
    color: #000;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #e0e0e0; }
.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: #000;
      background-color: #d4d4d4;
      border-color: #bfbfbf; }
.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: #fff;
    border-color: #fff; }
.ec-inlineBtn--primary .badge {
    color: #fff;
    background-color: #000; }
.ec-inlineBtn--action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #FDE260;
  border-color: #FDE260; }
.ec-inlineBtn--action, .ec-inlineBtn--action:active, .ec-inlineBtn--action.active {
    outline: none; }
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-inlineBtn--action:hover, .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active {
    outline: none;
    background-image: none; }
.ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled],
  fieldset[disabled] .ec-inlineBtn--action {
    cursor: not-allowed; }
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
    color: #000;
    background-color: #fcd92e;
    border-color: #dbb603; }
.ec-inlineBtn--action:hover {
    color: #000;
    background-color: #fcd92e;
    border-color: #fcd724; }
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active,
  .open > .ec-inlineBtn--action.dropdown-toggle {
    color: #000;
    background-color: #fcd92e;
    background-image: none;
    border-color: #fcd724; }
.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: #000;
      background-color: #fcd20a;
      border-color: #dbb603; }
.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: #FDE260;
    border-color: #FDE260; }
.ec-inlineBtn--action .badge {
    color: #FDE260;
    background-color: #000; }
.ec-inlineBtn--cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #ffffff;
  border-color: #ffffff; }
.ec-inlineBtn--cancel, .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active {
    outline: none; }
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active {
    outline: none;
    background-image: none; }
.ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled],
  fieldset[disabled] .ec-inlineBtn--cancel {
    cursor: not-allowed; }
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
    color: #000;
    background-color: #e6e6e6;
    border-color: #bfbfbf; }
.ec-inlineBtn--cancel:hover {
    color: #000;
    background-color: #e6e6e6;
    border-color: #e0e0e0; }
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active,
  .open > .ec-inlineBtn--cancel.dropdown-toggle {
    color: #000;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #e0e0e0; }
.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: #000;
      background-color: #d4d4d4;
      border-color: #bfbfbf; }
.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: #ffffff;
    border-color: #ffffff; }
.ec-inlineBtn--cancel .badge {
    color: #ffffff;
    background-color: #000; }
/*
ブロックボタン（全幅）

ボタンサイズは em で指定するため、テキストサイズの変更でボタンサイズを変更できます。

ex [商品詳細ページ　カートボタン部分](http://demo3.ec-cube.net/products/detail/30)

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

Styleguide 2.1.2
*/
.ec-blockBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #fff;
  border-color: #ccc;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  width: 258px;
  height: 70px; }
.ec-blockBtn, .ec-blockBtn:active, .ec-blockBtn.active {
    outline: none; }
.ec-blockBtn:focus, .ec-blockBtn.focus, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-blockBtn:hover, .ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-blockBtn:active, .ec-blockBtn.active {
    outline: none;
    background-image: none; }
.ec-blockBtn.disabled, .ec-blockBtn[disabled],
  fieldset[disabled] .ec-blockBtn {
    cursor: not-allowed; }
.ec-blockBtn:focus, .ec-blockBtn.focus {
    color: #000;
    background-color: #e6e6e6;
    border-color: #8c8c8c; }
.ec-blockBtn:hover {
    color: #000;
    background-color: #e6e6e6;
    border-color: #adadad; }
.ec-blockBtn:active, .ec-blockBtn.active,
  .open > .ec-blockBtn.dropdown-toggle {
    color: #000;
    background-color: #e6e6e6;
    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: #000;
      background-color: #d4d4d4;
      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: #fff;
    border-color: #ccc; }
.ec-blockBtn .badge {
    color: #fff;
    background-color: #000; }
.ec-blockBtn--primary {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #fff;
  border-color: #fff;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  width: 250px;
  height: 60px; }
.ec-blockBtn--primary, .ec-blockBtn--primary:active, .ec-blockBtn--primary.active {
    outline: none; }
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-blockBtn--primary:hover, .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active {
    outline: none;
    background-image: none; }
.ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled],
  fieldset[disabled] .ec-blockBtn--primary {
    cursor: not-allowed; }
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
    color: #000;
    background-color: #e6e6e6;
    border-color: #bfbfbf; }
.ec-blockBtn--primary:hover {
    color: #000;
    background-color: #e6e6e6;
    border-color: #e0e0e0; }
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active,
  .open > .ec-blockBtn--primary.dropdown-toggle {
    color: #000;
    background-color: #e6e6e6;
    background-image: none;
    border-color: #e0e0e0; }
.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: #000;
      background-color: #d4d4d4;
      border-color: #bfbfbf; }
.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: #fff;
    border-color: #fff; }
.ec-blockBtn--primary .badge {
    color: #fff;
    background-color: #000; }
.ec-blockBtn--primary:hover {
  background-color: rgba(0, 0, 0, 0.05); }
.ec-blockBtn--action {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #FDE260;
  border-color: #FDE260;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  width: 250px;
  height: 60px; }
.ec-blockBtn--action, .ec-blockBtn--action:active, .ec-blockBtn--action.active {
    outline: none; }
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-blockBtn--action:hover, .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-blockBtn--action:active, .ec-blockBtn--action.active {
    outline: none;
    background-image: none; }
.ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled],
  fieldset[disabled] .ec-blockBtn--action {
    cursor: not-allowed; }
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
    color: #000;
    background-color: #fcd92e;
    border-color: #dbb603; }
.ec-blockBtn--action:hover {
    color: #000;
    background-color: #fcd92e;
    border-color: #fcd724; }
.ec-blockBtn--action:active, .ec-blockBtn--action.active,
  .open > .ec-blockBtn--action.dropdown-toggle {
    color: #000;
    background-color: #fcd92e;
    background-image: none;
    border-color: #fcd724; }
.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: #000;
      background-color: #fcd20a;
      border-color: #dbb603; }
.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: #FDE260;
    border-color: #FDE260; }
.ec-blockBtn--action .badge {
    color: #FDE260;
    background-color: #000; }
.ec-blockBtn--action:hover {
  background-color: rgba(255, 255, 255, 0.4); }
.ec-blockBtn--cancel {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: #000;
  background-color: #ffffff;
  border-color: #000;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  width: 250px;
  height: 60px; }
.ec-blockBtn--cancel, .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active {
    outline: none; }
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active {
    outline: none;
    background-image: none; }
.ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled],
  fieldset[disabled] .ec-blockBtn--cancel {
    cursor: not-allowed; }
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
    color: #000;
    background-color: #e6e6e6;
    border-color: black; }
.ec-blockBtn--cancel:hover {
    color: #000;
    background-color: #e6e6e6;
    border-color: black; }
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active,
  .open > .ec-blockBtn--cancel.dropdown-toggle {
    color: #000;
    background-color: #e6e6e6;
    background-image: none;
    border-color: black; }
.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: #000;
      background-color: #d4d4d4;
      border-color: black; }
.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: #ffffff;
    border-color: #000; }
.ec-blockBtn--cancel .badge {
    color: #ffffff;
    background-color: #000; }
/*
アイコンボタン

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

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

Styleguide 2.2
*/
/*
アイコンボタン

閉じるなどSVGアイコンを用いたボタン装飾で利用します。

ex [ログイン画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/login)

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

Styleguide 2.2.1
*/
.ec-closeBtn {
  cursor: pointer; }
.ec-closeBtn .ec-icon img {
    display: inline-block;
    margin-right: 5px;
    width: 1em;
    height: 1em;
    position: relative;
    top: -1px;
    vertical-align: middle; }
/*
アイコンボタン(○)

閉じるなどSVGアイコンを用いたボタン装飾で利用します。

ex [ログイン画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/login)



ex [お届け先編集画面　☓ボタン部分](http://demo3.ec-cube.net/mypage/delivery)

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

Styleguide 2.2.2
*/
.ec-closeBtn--circle {
  display: block;
  border: 0 none;
  padding: 0;
  margin: 0;
  text-shadow: none;
  box-shadow: none;
  border-radius: 50%;
  background: #B8BEC4;
  cursor: pointer;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  line-height: 40px;
  vertical-align: middle;
  position: relative;
  text-align: center; }
.ec-closeBtn--circle .ec-icon img {
    display: block;
    margin-top: -.5em;
    margin-left: -.5em;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 50%;
    left: 50%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
その他のボタン

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

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

Styleguide 2.3
*/
/*
ページトップボタン

ページトップボタンを表示します

ex [商品詳細ページ　カートボタン部分](http://demo3.ec-cube.net/products/detail/30)

Markup:
.ec-blockTopBtn

Styleguide 2.3.1
*/
.ec-blockTopBtn {
  display: none;
  position: fixed;
  width: 120px;
  height: 40px;
  right: 0;
  bottom: 10px;
  cursor: pointer;
  color: #FFFFFF;
  text-align: center;
  line-height: 40px;
  opacity: 0.8;
  background-color: #9da3a9; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォーム部品(テキスト)

テキストや数値の入力項目に関する要素を定義します。

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


Styleguide 3.1
*/
/*
フォーム

`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。


ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"], #page_guide_shipping_tel .ec-select 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"], #page_guide_shipping_tel .ec-select 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"],
#page_guide_shipping_tel .ec-select input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"], #page_guide_shipping_tel .ec-select 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"], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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],
#page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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,
#page_guide_shipping_tel .ec-select 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,
#page_guide_shipping_tel .ec-select input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input, #page_guide_shipping_tel .ec-select input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 8px; }
.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, #page_guide_shipping_tel .ec-select input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select input,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select input,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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, #page_guide_shipping_tel .ec-select select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 8px; }
.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, #page_guide_shipping_tel .ec-select select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select select,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select select,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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, #page_guide_shipping_tel .ec-select textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 8px; }
.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, #page_guide_shipping_tel .ec-select textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select textarea,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select textarea,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select input {
  height: 44px;
  margin-bottom: 16px;
  background: #F7F7F5;
  border: 1px solid #E6E6E6;
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  color: #000;
  padding-left: 16px;
  padding-right: 16px; }
.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, #page_guide_shipping_tel .ec-select input:focus {
    border: 2px solid #FDE260;
    background: #F7F7F5; }
.ec-input input::-ms-reveal, .ec-halfInput input::-ms-reveal, .ec-numberInput input::-ms-reveal, .ec-zipInput input::-ms-reveal, .ec-telInput input::-ms-reveal, .ec-select input::-ms-reveal, .ec-birth input::-ms-reveal, #page_guide_shipping_tel .ec-select input::-ms-reveal {
    visibility: hidden; }
.ec-input input::-ms-clear, .ec-halfInput input::-ms-clear, .ec-numberInput input::-ms-clear, .ec-zipInput input::-ms-clear, .ec-telInput input::-ms-clear, .ec-select input::-ms-clear, .ec-birth input::-ms-clear, #page_guide_shipping_tel .ec-select input::-ms-clear {
    visibility: hidden; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
  width: 335px;
  height: 160px;
  background: #F7F7F5;
  border: 1px solid #E6E6E6;
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  color: #000; }
.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, #page_guide_shipping_tel .ec-select textarea:focus {
    border: 2px solid #FDE260;
    background: #F7F7F5; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p, #page_guide_shipping_tel .ec-select p {
  line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage, #page_guide_shipping_tel .ec-select .ec-errorMessage {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012; }
.ec-input__attention {
  margin-top: -12px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em; }
.ec-orderOrder__wrapper textarea {
  width: 303px; }
.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, #page_guide_shipping_tel .error.ec-select 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, #page_guide_shipping_tel .error.ec-select select, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea, #page_guide_shipping_tel .error.ec-select textarea {
  margin-bottom: 4px;
  border: 2px solid #E60012;
  background: #f7f7f7; }
.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, #page_guide_shipping_tel .error.ec-select select {
  background: #F7F7F5 url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
.error.ec-input .ec-login__eyeicon, .error.ec-halfInput .ec-login__eyeicon, .error.ec-numberInput .ec-login__eyeicon, .error.ec-zipInput .ec-login__eyeicon, .error.ec-telInput .ec-login__eyeicon, .error.ec-select .ec-login__eyeicon, .error.ec-birth .ec-login__eyeicon, #page_guide_shipping_tel .error.ec-select .ec-login__eyeicon {
  margin-top: -37px; }
.error.ec-input .ec-input__attention, .error.ec-halfInput .ec-input__attention, .error.ec-numberInput .ec-input__attention, .error.ec-zipInput .ec-input__attention, .error.ec-telInput .ec-input__attention, .error.ec-select .ec-input__attention, .error.ec-birth .ec-input__attention, #page_guide_shipping_tel .error.ec-select .ec-input__attention {
  margin-top: 0;
  margin-bottom: 4px; }
.ec-input__large input {
  height: 56px;
  padding: 17px 16px; }
.ec-input__large .ec-login__eyeicon {
  margin-top: -55px; }
.error.ec-input__large .ec-login__eyeicon {
  margin-top: -42px; }
.ec-checkbox .ec-errorMessage {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012; }
.error.ec-checkbox input, .error.ec-checkbox label {
  border-color: #CF3F34;
  background: #FDF1F0; }
.ec-errorMessage {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012; }
.ec-errorMessage::before {
    content: '';
    display: inline-block;
    background-image: url(../img/icon/ic_hato_error.svg);
    width: 15px;
    height: 11px;
    background-size: contain;
    margin-right: 4px; }
.ec-errorMessage__wrapper {
    display: flex; }
.ec-errorMessage__wrapper .ec-errorMessage {
      width: 175px; }
/*
フォーム（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: 161px;
  margin-left: 7px; }
.ec-halfInput input[type='text']:first-child {
  margin-left: 0; }
/*
数量ボタン

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [商品詳細画面　数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)

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

Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
  display: inline-block;
  width: auto;
  max-width: 100px;
  text-align: right; }
/*
郵便番号フォーム

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　郵便番号部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.4
*/
.ec-zipInput {
  display: inline-block; }
.ec-zipInput input {
    display: inline-block;
    text-align: left;
    width: auto;
    max-width: 8em;
    font-size: 16px; }
.ec-zipInput span {
    display: inline-block;
    padding: 0 5px 0 3px;
    margin-left: 5px; }
.ec-zipInputHelp {
  display: inline-block;
  vertical-align: baseline; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
    display: inline-block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #525263;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    top: -6px; }
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
      width: 1em;
      height: 1em;
      position: relative;
      left: 3px;
      top: 3px; }
.ec-zipInputHelp span {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.02em;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    color: #818181;
    margin-left: 24px; }
.ec-zipAuto {
  margin-bottom: 16px; }
.ec-zipAuto .ec-inlineBtn {
    font-weight: normal; }
/*
電話番号ボタン

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　電話番号部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.5
*/
.ec-telInput input {
  max-width: 10em;
  text-align: left; }
/* Chrome対策 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 50px #F7F7F5 inset; }
/* password */
input[type='password'] {
  color: #818181; }
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォーム部品(テキスト)

テキストや数値の入力項目に関する要素を定義します。

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


Styleguide 3.1
*/
/*
フォーム

`.ec-input` 要素は全ての入力項目に関する標準的なコンポーネントクラスです。


ex [会員情報編集画面　フォーム部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.1
*/
.ec-input input[type="search"], .ec-halfInput input[type="search"], .ec-numberInput input[type="search"], .ec-zipInput input[type="search"], .ec-telInput input[type="search"], .ec-select input[type="search"], .ec-birth input[type="search"], #page_guide_shipping_tel .ec-select 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"], #page_guide_shipping_tel .ec-select 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"],
#page_guide_shipping_tel .ec-select input[type="checkbox"] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal; }
.ec-input input[type="file"], .ec-halfInput input[type="file"], .ec-numberInput input[type="file"], .ec-zipInput input[type="file"], .ec-telInput input[type="file"], .ec-select input[type="file"], .ec-birth input[type="file"], #page_guide_shipping_tel .ec-select 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"], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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],
#page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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,
#page_guide_shipping_tel .ec-select 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,
#page_guide_shipping_tel .ec-select input[type="checkbox"]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px; }
.ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input, #page_guide_shipping_tel .ec-select input {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 8px; }
.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, #page_guide_shipping_tel .ec-select input:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-birth input::-moz-placeholder, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select input,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select input,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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, #page_guide_shipping_tel .ec-select select {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 8px; }
.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, #page_guide_shipping_tel .ec-select select:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-birth select::-moz-placeholder, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select select,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select select,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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, #page_guide_shipping_tel .ec-select textarea {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.42857;
  color: #555555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-appearance: none;
  box-shadow: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 8px; }
.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, #page_guide_shipping_tel .ec-select textarea:focus {
    border-color: #66afe9;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); }
.ec-input textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select textarea,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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], #page_guide_shipping_tel .ec-select 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,
  fieldset[disabled] #page_guide_shipping_tel .ec-select textarea,
  #page_guide_shipping_tel fieldset[disabled] .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select 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, #page_guide_shipping_tel .ec-select input {
  height: 44px;
  margin-bottom: 16px;
  background: #F7F7F5;
  border: 1px solid #E6E6E6;
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  color: #000;
  padding-left: 16px;
  padding-right: 16px; }
.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, #page_guide_shipping_tel .ec-select input:focus {
    border: 2px solid #FDE260;
    background: #F7F7F5; }
.ec-input input::-ms-reveal, .ec-halfInput input::-ms-reveal, .ec-numberInput input::-ms-reveal, .ec-zipInput input::-ms-reveal, .ec-telInput input::-ms-reveal, .ec-select input::-ms-reveal, .ec-birth input::-ms-reveal, #page_guide_shipping_tel .ec-select input::-ms-reveal {
    visibility: hidden; }
.ec-input input::-ms-clear, .ec-halfInput input::-ms-clear, .ec-numberInput input::-ms-clear, .ec-zipInput input::-ms-clear, .ec-telInput input::-ms-clear, .ec-select input::-ms-clear, .ec-birth input::-ms-clear, #page_guide_shipping_tel .ec-select input::-ms-clear {
    visibility: hidden; }
.ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
  width: 335px;
  height: 160px;
  background: #F7F7F5;
  border: 1px solid #E6E6E6;
  font-weight: normal;
  font-size: 14px;
  line-height: 21px;
  color: #000; }
.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, #page_guide_shipping_tel .ec-select textarea:focus {
    border: 2px solid #FDE260;
    background: #F7F7F5; }
.ec-input p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p, .ec-select p, .ec-birth p, #page_guide_shipping_tel .ec-select p {
  line-height: 1.4; }
.ec-input .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-select .ec-errorMessage, .ec-birth .ec-errorMessage, #page_guide_shipping_tel .ec-select .ec-errorMessage {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012; }
.ec-input__attention {
  margin-top: -12px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em; }
.ec-orderOrder__wrapper textarea {
  width: 303px; }
.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, #page_guide_shipping_tel .error.ec-select 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, #page_guide_shipping_tel .error.ec-select select, .error.ec-input textarea, .error.ec-halfInput textarea, .error.ec-numberInput textarea, .error.ec-zipInput textarea, .error.ec-telInput textarea, .error.ec-select textarea, .error.ec-birth textarea, #page_guide_shipping_tel .error.ec-select textarea {
  margin-bottom: 4px;
  border: 2px solid #E60012;
  background: #f7f7f7; }
.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, #page_guide_shipping_tel .error.ec-select select {
  background: #F7F7F5 url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
.error.ec-input .ec-login__eyeicon, .error.ec-halfInput .ec-login__eyeicon, .error.ec-numberInput .ec-login__eyeicon, .error.ec-zipInput .ec-login__eyeicon, .error.ec-telInput .ec-login__eyeicon, .error.ec-select .ec-login__eyeicon, .error.ec-birth .ec-login__eyeicon, #page_guide_shipping_tel .error.ec-select .ec-login__eyeicon {
  margin-top: -37px; }
.error.ec-input .ec-input__attention, .error.ec-halfInput .ec-input__attention, .error.ec-numberInput .ec-input__attention, .error.ec-zipInput .ec-input__attention, .error.ec-telInput .ec-input__attention, .error.ec-select .ec-input__attention, .error.ec-birth .ec-input__attention, #page_guide_shipping_tel .error.ec-select .ec-input__attention {
  margin-top: 0;
  margin-bottom: 4px; }
.ec-input__large input {
  height: 56px;
  padding: 17px 16px; }
.ec-input__large .ec-login__eyeicon {
  margin-top: -55px; }
.error.ec-input__large .ec-login__eyeicon {
  margin-top: -42px; }
.ec-checkbox .ec-errorMessage {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012; }
.error.ec-checkbox input, .error.ec-checkbox label {
  border-color: #CF3F34;
  background: #FDF1F0; }
.ec-errorMessage {
  margin-bottom: 16px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012; }
.ec-errorMessage::before {
    content: '';
    display: inline-block;
    background-image: url(../img/icon/ic_hato_error.svg);
    width: 15px;
    height: 11px;
    background-size: contain;
    margin-right: 4px; }
.ec-errorMessage__wrapper {
    display: flex; }
.ec-errorMessage__wrapper .ec-errorMessage {
      width: 175px; }
/*
フォーム（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: 161px;
  margin-left: 7px; }
.ec-halfInput input[type='text']:first-child {
  margin-left: 0; }
/*
数量ボタン

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [商品詳細画面　数量ボタン部分](http://demo3.ec-cube.net/products/detail/27)

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

Styleguide 3.1.3
*/
.ec-numberInput input[type='number'] {
  display: inline-block;
  width: auto;
  max-width: 100px;
  text-align: right; }
/*
郵便番号フォーム

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　郵便番号部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.4
*/
.ec-zipInput {
  display: inline-block; }
.ec-zipInput input {
    display: inline-block;
    text-align: left;
    width: auto;
    max-width: 8em;
    font-size: 16px; }
.ec-zipInput span {
    display: inline-block;
    padding: 0 5px 0 3px;
    margin-left: 5px; }
.ec-zipInputHelp {
  display: inline-block;
  vertical-align: baseline; }
.ec-zipInputHelp .ec-zipInputHelp__icon {
    display: inline-block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background: #525263;
    border-radius: 50%;
    font-size: 13px;
    position: relative;
    top: -6px; }
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
      width: 1em;
      height: 1em;
      position: relative;
      left: 3px;
      top: 3px; }
.ec-zipInputHelp span {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.02em;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    color: #818181;
    margin-left: 24px; }
.ec-zipAuto {
  margin-bottom: 16px; }
.ec-zipAuto .ec-inlineBtn {
    font-weight: normal; }
/*
電話番号ボタン

数量を表示するための小さなコンポーネントです。

内部に input 要素を配置してコーディングします。

ex [会員情報編集画面　電話番号部分](http://demo3.ec-cube.net/mypage/change)

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

Styleguide 3.1.5
*/
.ec-telInput input {
  max-width: 10em;
  text-align: left; }
/* Chrome対策 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 50px #F7F7F5 inset; }
/* password */
input[type='password'] {
  color: #818181; }
/*
フォーム部品(その他)

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

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 input {
  display: none; }
.ec-radio label {
  margin-right: 20px;
  position: relative; }
.ec-radio label::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #fff;
    border: 2px solid #666666;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: block; }
.ec-radio input[type="radio"]:checked + label::after {
  position: absolute;
  content: "";
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  background: #666666;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  display: block; }
.ec-radio span {
  font-weight: normal;
  margin-left: 30px; }
/*
ラジオ(垂直)

垂直に並ぶラジオボタンフィールドです。

各要素を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: 10px;
  font-weight: normal; }
/*
セレクトボックス

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [新規会員登録画面　都道府県選択部分](http://demo3.ec-cube.net/entry)

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

Styleguide 3.2.4
*/
.ec-selects {
  margin-bottom: 20px;
  border-bottom: 1px solid #E6E6E6; }
.ec-select {
  margin-bottom: 16px; }
.ec-select select {
    display: inline-block;
    width: 161px;
    border: 1px solid #E6E6E6;
    font-size: 14px;
    line-height: 21px;
    color: #000;
    height: 44px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #F7F7F5 url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
.ec-select select::-ms-expand {
      display: none; }
.ec-select select:focus {
      box-shadow: none;
      border: 2px solid #FDE260;
      background: #F7F7F5 url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
.ec-select .ec-select__half {
    width: 77px; }
.ec-select__birth {
    display: flex;
    justify-content: space-around; }
.ec-select label {
    margin-right: 10px;
    font-weight: bold; }
.ec-select label:nth-child(3) {
    margin-left: 10px;
    font-weight: bold; }
.ec-select__delivery {
  display: block;
  margin-right: 16px; }
.ec-select__time {
  display: block; }
/*
生年月日選択

数量を表示するための小さなコンポーネントです。

数値表示に最適化するため、数字は右端揃えで表示されます。

ex [新規会員登録画面　生年月日選択部分](http://demo3.ec-cube.net/entry)

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

Styleguide 3.2.5
*/
.ec-birth select {
  display: inline-block;
  width: auto;
  margin: 0 0 10px;
  background-color: #f8f8f8;
  -webkit-appearance: menulist;
  -moz-appearance: menulist; }
.ec-birth select:focus {
    box-shadow: none; }
.ec-birth span {
  margin-left: 5px; }
/*
チェックボックス （水平）

水平に並ぶチェックボックス フィールドです。

各要素をlabelでくくって、コーディングします。

ex [新規会員登録画面　利用規約](http://demo3.ec-cube.net/entry)

Markup:
.ec-checkbox
  label
    input(type="checkbox")
    span 利用規約に同意する

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

垂直に並ぶチェックボックス フィールドです。

各要素をlabelでくくって、コーディングします。

Markup:
.ec-blockCheckbox
  label
    input(type="checkbox")
    span 利用規約に同意する

Styleguide 3.2.7
*/
.ec-blockCheckbox label {
  display: block; }
.ec-blockCheckbox span {
  font-weight: normal; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
フォームラベル

フォームのラベルに関する要素を定義します。

sg-wrapper:
<div class="ec-registerRole">
  <div class="ec-off1Grid">
    <div class="ec-off1Grid__cell">
      <div class="ec-borderedDefs">
        <sg-wrapper-content/>
      </div>
    </div>
  </div>
</div>

Styleguide 3.3
*/
/*
ラベル

フォーム要素で利用するラベル要素です。

ex [お問い合わせページ　ラベル部分](http://demo3.ec-cube.net/contact)

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

Styleguide 3.3.1
*/
.ec-label {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #000000;
  margin-bottom: 4px; }
/* 確認画面用 */
.ec-registerRole__confirm .ec-label {
  color: #818181;
  margin-bottom: 16px; }
.ec-registerRole__confirm dd {
  font-size: 16px;
  line-height: 21px;
  color: #000000;
  margin-bottom: 40px; }
.ec-registerRole__confirm .ec-registerRole__confirmPw span {
  display: inline-block;
  background: #818181;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px; }
/*
必須ラベル

必須文字を表示するラベル要素です。

ex [お問い合わせページ　必須ラベル部分](http://demo3.ec-cube.net/contact)


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

Styleguide 3.3.2
*/
.ec-required {
  margin-left: 7px;
  font-weight: normal;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #E60012;
  font-weight: normal; }
/* フォーム画面のラインのCSS */
.ec-line {
  width: 335px;
  border-top: 1px solid #E6E6E6;
  margin-top: 32px;
  margin-bottom: 24px; }
.ec-line__registerRole {
    margin-top: 32px;
    margin-bottom: 32px; }
/*
アイコン

デフォルトテンプレートのアイコンは`.ec-icon`>`img`タグで使用することができます

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

Markup:
include /assets/tmpl/elements/4.1.icon.pug
div(style="background-color: rgba(130,130,130,.15); padding: 20px;")
  +icon-all

Styleguide 4.1
*/
.ec-icon img {
  max-width: 80px;
  max-height: 80px; }
/* 揺れる鳩 */
.karappo {
  -webkit-animation: karappo 2s linear .5s 1;
          animation: karappo 2s linear .5s 1;
  transform-origin: 66px 119px; }
@-webkit-keyframes karappo {
  0% {
    transform: rotate(0deg); }
  10% {
    transform: rotate(-15deg); }
  20% {
    transform: rotate(10deg); }
  30% {
    transform: rotate(-5deg); }
  40% {
    transform: rotate(5deg); }
  50% {
    transform: rotate(-3deg); }
  60% {
    transform: rotate(2deg); }
  70% {
    transform: rotate(-2deg); }
  80% {
    transform: rotate(1deg); }
  90% {
    transform: rotate(-1deg); }
  100% {
    transform: rotate(0deg); } }
@keyframes karappo {
  0% {
    transform: rotate(0deg); }
  10% {
    transform: rotate(-15deg); }
  20% {
    transform: rotate(10deg); }
  30% {
    transform: rotate(-5deg); }
  40% {
    transform: rotate(5deg); }
  50% {
    transform: rotate(-3deg); }
  60% {
    transform: rotate(2deg); }
  70% {
    transform: rotate(-2deg); }
  80% {
    transform: rotate(1deg); }
  90% {
    transform: rotate(-1deg); }
  100% {
    transform: rotate(0deg); } }
/* 跳ねる鳩 */
.poyon {
  -webkit-animation: pyon 1.1s linear .5s 1;
          animation: pyon 1.1s linear .5s 1; }
@-webkit-keyframes pyon {
  0% {
    transform: translate(0%, -50%); }
  10% {
    transform: translate(0%, -10%); }
  20% {
    transform: translate(0%, 20%); }
  30% {
    transform: translate(0%, -6%); }
  40% {
    transform: translate(0%, -20%); }
  50% {
    transform: translate(0%, -6%); }
  60% {
    transform: translate(0%, 5%); }
  70% {
    transform: translate(0%, 0%); }
  100% {
    transform: translate(0%, 0%); } }
@keyframes pyon {
  0% {
    transform: translate(0%, -50%); }
  10% {
    transform: translate(0%, -10%); }
  20% {
    transform: translate(0%, 20%); }
  30% {
    transform: translate(0%, -6%); }
  40% {
    transform: translate(0%, -20%); }
  50% {
    transform: translate(0%, -6%); }
  60% {
    transform: translate(0%, 5%); }
  70% {
    transform: translate(0%, 0%); }
  100% {
    transform: translate(0%, 0%); } }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
グリッド

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

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


Styleguide 5.1
*/
/*
2分割グリッド

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

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

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

Styleguide 5.1.1
*/
.ec-grid2 {
  display: block;
  margin: 0; }
.ec-grid2 .ec-grid2__cell {
    position: relative;
    min-height: 1px; }
.ec-grid2 .ec-grid2__cell2 {
    position: relative;
    min-height: 1px; }
/*
3分割グリッド

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


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

Styleguide 5.1.2
*/
.ec-grid3 {
  display: block;
  margin: 0; }
.ec-grid3 .ec-grid3__cell {
    position: relative;
    min-height: 1px; }
.ec-grid3 .ec-grid3__cell2 {
    position: relative;
    min-height: 1px; }
.ec-grid3 .ec-grid3__cell3 {
    position: relative;
    min-height: 1px; }
/*
4分割グリッド

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


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

Styleguide 5.1.3
*/
.ec-grid4 {
  display: block;
  margin: 0; }
.ec-grid4 .ec-grid4__cell {
    position: relative;
    min-height: 1px; }
/*
6分割グリッド

2つにまとめた cell2 や 3つをまとめた cell3 タグも使用可能です。


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

Styleguide 5.1.4
*/
.ec-grid6 {
  display: block;
  margin: 0; }
.ec-grid6 .ec-grid6__cell {
    position: relative;
    min-height: 1px; }
.ec-grid6 .ec-grid6__cell2 {
    position: relative;
    min-height: 1px; }
.ec-grid6 .ec-grid6__cell3 {
    position: relative;
    min-height: 1px; }
/*
中央寄せグリッド 10/12

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

ex [ご利用規約ページ　本文](http://demo3.ec-cube.net/help/agreement)

Markup:
.ec-off1Grid
  .ec-off1Grid__cell(style="background-color: rgba(86,61,124,.15);border: 1px solid rgba(86,61,124,.2);height:50px;") Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

Styleguide 5.1.5
*/
.ec-off1Grid {
  margin: 0;
  margin-bottom: 48px; }
.ec-off1Grid .ec-off1Grid__cell {
    margin: 0; }
/*
中央寄せグリッド 8/12

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


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

Styleguide 5.1.6
*/
.ec-off2Grid {
  display: block;
  margin: 0; }
.ec-off2Grid .ec-off2Grid__cell {
    margin: 0; }
/*
中央寄せグリッド 6/12

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


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

Styleguide 5.1.7
*/
.ec-off3Grid {
  display: block;
  margin: 0; }
.ec-off3Grid .ec-off3Grid__cell {
    margin: 0; }
/*
中央寄せグリッド 4/12

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


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


Styleguide 5.1.8
*/
.ec-off4Grid {
  display: block;
  margin: 0; }
.ec-off4Grid .ec-off4Grid__cell {
    margin: 0; }
/*
グリッドオプション

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

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

Styleguide 5.1.9
*/
/*
グリッドセルの左寄せ

.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

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

Styleguide 5.1.10
*/
.ec-grid--left {
  justify-content: flex-start; }
/*
グリッドセルの右寄せ

.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

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

Styleguide 5.1.11
*/
.ec-grid--right {
  justify-content: flex-end; }
/*
グリッドセルの中央寄せ

.ec-gridに.ec-grid--leftを付与すると内包してるセルを左寄せにすることができます。

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

Styleguide 5.1.12
*/
.ec-grid--center {
  justify-content: center; }
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
レイアウト

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

Styleguide 5.2
*/
/*
画像レイアウト

画像とテキストを水平に並べるレイアウトです。

画像は20%で表示されます。

ex [注文履歴 ログイン後→注文履歴ボタンを押下](http://demo3.ec-cube.net/mypage)

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

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


Styleguide 5.2.1
*/
.ec-imageGrid {
  display: flex;
  border-top: 1px solid #E6E6E6;
  width: 100%;
  padding: 16px 0; }
.ec-imageGrid .ec-imageGrid__img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    margin-right: 12px; }
.ec-imageGrid .ec-imageGrid__img img {
      width: 100%; }
.ec-imageGrid .ec-imageGrid__content {
    vertical-align: middle;
    margin-top: 4px;
    width: 100%;
    color: #000000; }
.ec-imageGrid .ec-imageGrid__content span:first-of-type {
      font-weight: 600;
      font-size: 17px;
      line-height: 25px;
      letter-spacing: 0.05em;
      color: #000000; }
.ec-imageGrid .ec-imageGrid__content span:nth-of-type(2) {
      font-weight: normal;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.05em;
      color: #000000;
      margin-right: 12px; }
.ec-imageGrid .ec-imageGrid__content span:nth-of-type(3) {
      font-weight: normal;
      font-size: 17px;
      line-height: 25.5px;
      letter-spacing: 0.05em;
      color: #000000; }
.ec-imageGrid .ec-imageGrid__content p {
      margin-bottom: 0; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
ログイン

主にログインフォームのスタイルを表示します。

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

Styleguide 6.1
*/
/*
ログインフォーム

ログインフォームを表示します。

ex [ログイン画面](http://demo3.ec-cube.net/mypage/login)

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


Styleguide 6.1.1
*/
#page_mypage_login .ec-breadcrumb__link:first-of-type,
#page_shopping_login .ec-breadcrumb__link:first-of-type {
  margin-bottom: 0; }
#page_mypage_login .ec-pageHeader h1,
#page_shopping_login .ec-pageHeader h1 {
  margin-top: 34px; }
#page_mypage .ec-alert-warning .ec-alert-warning__text img {
  width: auto; }
.ec-login__wrapper {
  width: 335px;
  margin: 24px auto 0;
  color: rgba(0, 0, 0, 0.6); }
.ec-login__wrapper .ec-link {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.05em;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    color: rgba(0, 0, 0, 0.6); }
.ec-login__wrapper .ec-loginBtn {
    width: 250px;
    height: 60px; }
.ec-login__wrapper .ec-blockBtn--action:hover, .ec-login__wrapper .ec-blockBtn--action:active, .ec-login__wrapper .ec-blockBtn--action:focus {
    background-color: #FCEFA4;
    border-color: #FCEFA4; }
.ec-login__wrapper .ec-registrationBtn {
    width: 240px;
    height: 48px; }
.ec-login__wrapper .ec-blockBtn--cancel {
    font-weight: normal;
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.02em;
    border: 1px solid #000000;
    margin-top: 42px;
    width: 200px;
    height: 40px; }
.ec-login__wrapper .h2_s._resetpassword {
    color: #000;
    font-size: 21px;
    font-weight: 600;
    padding: 0; }
.ec-login__wrapper .ec-login__title {
    font-weight: 600;
    font-size: 21px;
    line-height: 160%;
    letter-spacing: 0.1em;
    color: #000000;
    padding: 0; }
.ec-login {
  margin: 0 0 20px;
  padding: 30px 13% 20px;
  height: auto;
  background: #F3F4F4;
  box-sizing: border-box; }
.ec-login__description {
    margin-top: 24px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.05em; }
.ec-login__attention {
    font-size: 12px;
    line-height: 140%;
    letter-spacing: 0.05em;
    margin-top: 16px;
    margin-bottom: 24px; }
.ec-login .ec-login__icon {
    text-align: center; }
.ec-login .ec-icon {
    margin-bottom: 10px; }
.ec-login .ec-icon img {
      width: 90px;
      height: 90px;
      display: inline-block; }
.ec-login .ec-login__input {
    margin-bottom: 40px; }
.ec-login .ec-login__input .ec-checkbox span {
      margin-left: 5px;
      font-weight: normal; }
.ec-login .ec-login__actions {
    color: #fff; }
.ec-login .ec-login__actions a {
      color: inherit;
      text-decoration: none; }
.ec-login .ec-login__actions a:hover {
      text-decoration: none; }
.ec-login .ec-login__link {
    margin-top: 5px;
    margin-left: 0; }
.ec-login .ec-errorMessage {
    color: #DE5D50;
    margin-bottom: 20px; }
.ec-login__eyeicon {
    float: right;
    margin-top: -48px;
    margin-right: 19px;
    cursor: pointer;
    color: #999; }
.ec-login__eyeicon .toggle-password {
      position: relative;
      z-index: 1; }
/*
ゲスト購入

ゲスト購入ボタンとそのフォームを表示します。

ex [ゲスト購入画面](http://demo3.ec-cube.net/shopping/login)

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

Styleguide 6.1.2
*/
.ec-guest {
  display: table;
  margin: 0;
  padding: 13%;
  height: auto;
  box-sizing: border-box;
  background: #F3F4F4; }
.ec-guest .ec-guest__inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center; }
.ec-guest .ec-guest__inner p {
      margin-bottom: 16px; }
.ec-guest .ec-guest__actions {
    display: block;
    vertical-align: middle;
    text-align: center;
    color: #fff; }
.ec-guest .ec-guest__actions a {
      color: inherit;
      text-decoration: none; }
.ec-guest .ec-guest__actions a:hover {
      text-decoration: none; }
.ec-guest .ec-guest__icon {
    font-size: 70px;
    text-align: center; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
商品掲載

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

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


Styleguide 7.1
*/
/*
商品アイテム（商品紹介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: 24px;
  display: flex;
  justify-content: space-between;
  flex-direction: column; }
.ec-displayB .ec-displayB__cell {
    width: 100%;
    margin-bottom: 16px; }
.ec-displayB .ec-displayB__cell a {
      color: inherit;
      text-decoration: none; }
.ec-displayB .ec-displayB__cell a:hover {
      text-decoration: none; }
.ec-displayB .ec-displayB__cell:hover {
      text-decoration: none; }
.ec-displayB .ec-displayB__cell:hover img {
        opacity: .8; }
.ec-displayB .ec-displayB__cell:hover a {
        text-decoration: none; }
.ec-displayB .ec-displayB__img {
    margin-bottom: 15px; }
.ec-displayB .ec-displayB__catch {
    margin-bottom: 15px;
    text-decoration: none;
    font-weight: bold;
    color: #9a947e; }
.ec-displayB .ec-displayB__comment {
    margin-bottom: 14px;
    text-decoration: none;
    color: #525263;
    font-size: 14px; }
.ec-displayB .ec-displayB__link {
    text-decoration: none;
    font-weight: bold;
    color: #9a947e; }
/*
商品アイテム（商品紹介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: 24px; }
.ec-displayC .ec-displayC__cell {
    width: 47%; }
.ec-displayC .ec-displayC__cell a {
      color: inherit;
      text-decoration: none; }
.ec-displayC .ec-displayC__cell a:hover {
      text-decoration: none; }
.ec-displayC .ec-displayC__cell:hover a {
      text-decoration: none; }
.ec-displayC .ec-displayC__cell:hover img {
      opacity: .8; }
.ec-displayC .ec-displayC__img {
    display: block;
    width: 100%;
    margin-bottom: 15px; }
.ec-displayC .ec-displayC__catch {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #9a947e; }
.ec-displayC .ec-displayC__title {
    display: block;
    width: 100%;
    color: #525263; }
.ec-displayC .ec-displayC__price {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #525263; }
.ec-displayC .ec-displayC__price--sp {
    display: block;
    width: 100%;
    font-weight: bold;
    color: #DE5D50; }
/*
商品アイテム（商品紹介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: 8px; }
.ec-displayD .ec-displayD__cell a {
      color: inherit;
      text-decoration: none; }
.ec-displayD .ec-displayD__cell a:hover {
      text-decoration: none; }
.ec-displayD .ec-displayD__cell:hover {
      text-decoration: none; }
.ec-displayD .ec-displayD__cell:hover img {
        opacity: .8; }
.ec-displayD .ec-displayD__img {
    display: block;
    width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
検索・一覧表示

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

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

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

検索結果で表示されるトピックパスのスタイルです。

ex [商品一覧ページ　横並びリスト部分](http://demo3.ec-cube.net/products/list?category_id=&name=)

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

Styleguide 7.2.1
*/
.ec-topicpath {
  letter-spacing: -.4em;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px dotted #ccc;
  padding: 10px;
  list-style: none;
  overflow: hidden;
  font-size: 12px;
  color: #0092C4; }
.ec-topicpath .ec-topicpath__item a {
    color: inherit;
    text-decoration: none; }
.ec-topicpath .ec-topicpath__item a:hover {
    text-decoration: none; }
.ec-topicpath .ec-topicpath__divider {
    color: #000; }
.ec-topicpath .ec-topicpath__item,
  .ec-topicpath .ec-topicpath__divider,
  .ec-topicpath .ec-topicpath__item--active {
    display: inline-block;
    min-width: 16px;
    text-align: center;
    position: relative;
    letter-spacing: normal; }
.ec-topicpath .ec-topicpath__item--active {
    font-weight: bold; }
.ec-topicpath .ec-topicpath__item--active a {
      color: inherit;
      text-decoration: none; }
.ec-topicpath .ec-topicpath__item--active a:hover {
      text-decoration: none; }
/*
ページャ

検索結果で表示される商品一覧のスタイルです。

ex [商品一覧ページ　ページャ部分](http://demo3.ec-cube.net/products/list?category_id=&name=)

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

Styleguide 7.2.2
*/
.ec-pager {
  list-style: none;
  list-style-type: none;
  margin: 0 auto;
  padding: 1em 0;
  text-align: center; }
.ec-pager .ec-pager__item,
  .ec-pager .ec-pager__item--active {
    display: inline-block;
    min-width: 29px;
    padding: 0 3px 0 2px;
    text-align: center;
    position: relative; }
.ec-pager .ec-pager__item a,
    .ec-pager .ec-pager__item--active a {
      color: inherit;
      text-decoration: none; }
.ec-pager .ec-pager__item a:hover,
    .ec-pager .ec-pager__item--active a:hover {
      text-decoration: none; }
.ec-pager .ec-pager__item a,
    .ec-pager .ec-pager__item--active a {
      color: inherit;
      display: block;
      line-height: 1.8;
      padding: 5px 1em;
      text-decoration: none; }
.ec-pager .ec-pager__item a:hover,
    .ec-pager .ec-pager__item--active a:hover {
      color: inherit; }
.ec-pager .ec-pager__item--active {
    background: #F3F3F3; }
.ec-pager .ec-pager__item:hover {
    background: #F3F3F3; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1; }
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
カート

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

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


Styleguide 7.3
*/
/*
カートヘッダ

購入完了までの手順や、現在の状態を表示します。

ul 要素を用いたリスト要素としてマークアップします。

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

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

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

Styleguide 7.3.1
*/
.ec-progress {
  list-style: none;
  display: flex; }
.ec-progress .ec-progress__item {
    margin-right: 24px;
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    justify-content: flex-start; }
.ec-progress .ec-progress__number {
    margin-right: 4px;
    font-size: 14px;
    line-height: 1.5; }
.ec-progress .ec-progress__label {
    font-size: 12px; }
.ec-progress li.is-complete {
    position: relative; }
.ec-progress li.is-complete::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      border-radius: 2px;
      background-color: #FDE260;
      width: 100%;
      height: 4px; }
/*
カートナビゲーション

カートナビゲーションを表示します。　カートに追加された商品の個数も表示します。

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-headerRole__cart {
  margin-right: 15px;
  display: flex;
  align-items: center; }
.ec-cartNavi {
  display: inline-block;
  width: auto;
  background: transparent;
  position: relative; }
.ec-cartNavi a {
    color: black;
    display: flex;
    align-items: center; }
.ec-cartNavi a::before {
      content: "";
      display: block;
      background-image: url(../img/icon/ic_cart.svg);
      background-position: center;
      background-size: 29px 31px;
      transition: all 0.5s ease;
      height: 27px;
      width: 27px; }
.ec-cartNavi a:hover,
  .ec-cartNavi a:active,
  .ec-cartNavi a:focus {
    color: #818181; }
.ec-cartNavi a:hover::before,
    .ec-cartNavi a:active::before,
    .ec-cartNavi a:focus::before {
      filter: invert(49%) sepia(21%) saturate(11%) hue-rotate(314deg) brightness(100%) contrast(92%); }
.ec-cartNavi .ec-cartNavi__text {
    display: none; }
.ec-cartNavi .ec-cartNavi__badgeSp {
    border-radius: 50%;
    box-sizing: border-box;
    background-color: #E60012;
    height: 9px;
    width: 9px;
    position: absolute;
    top: -1px;
    left: 2px; }
.ec-cartNavi .ec-cartNavi__price {
    display: none; }
.ec-cartNavi.is-active .ec-cartNavi__icon:before {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900; }
.ec-cartNavi.is-active .ec-cartNavi__badge {
  display: none; }
/*
カートナビゲーションのポップアップ(商品詳細)

カートナビゲーションのポップアップを表示します。カートに追加された商品の詳細が表示されます。

ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

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

Styleguide 7.3.6
*/
.ec-cartNaviIsset {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 16px;
  z-index: 20;
  position: absolute;
  right: 0; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart {
    border-bottom: 1px solid #E8E8E8;
    margin-bottom: 16px;
    padding-bottom: 32px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
      content: " ";
      display: table; }
.ec-cartNaviIsset .ec-cartNaviIsset__cart:after {
      clear: both; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage {
    float: left;
    width: 45%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartImage img {
      width: 100%; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContent {
    float: right;
    width: 55%;
    padding-left: 16px;
    text-align: left;
    box-sizing: border-box; }
.ec-cartNaviIsset .ec-cartNaviIsset__action .ec-blockBtn--action {
    color: #fff;
    margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTitle {
    margin-bottom: 8px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentPrice {
    font-weight: bold; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentTax {
    display: inline-block;
    font-size: 12px;
    font-weight: normal;
    margin-left: 2px; }
.ec-cartNaviIsset .ec-cartNaviIsset__cartContentNumber {
    font-size: 14px; }
.ec-cartNaviIsset.is-active {
  display: block; }
/*
カートナビゲーションのポップアップ(商品なし)

カートナビゲーションのポップアップを表示します。商品が登録されていない場合の表示です。

ex [カートページ　ナビゲーション部分](http://demo3.ec-cube.net/cart)

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

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


Styleguide 7.3.7
*/
.ec-cartNaviNull {
  display: none;
  width: 100%;
  text-align: center;
  background: #f8f8f8;
  box-sizing: border-box;
  padding: 16px;
  z-index: 3;
  position: absolute;
  right: 0; }
.ec-cartNaviNull .ec-cartNaviNull__message {
    border: 1px solid #D9D9D9;
    padding: 16px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #F99; }
.ec-cartNaviNull .ec-cartNaviNull__message p {
      margin: 0; }
.ec-cartNaviNull.is-active {
  display: block; }
/*
総計

会計時の合計金額、総計を表示します。

ex [カートページ　統計部分](http://demo3.ec-cube.net/cart)

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

Styleguide 7.3.8
*/
.ec-totalBox {
  background: #F7F6F1;
  padding: 40px 32px 24px 32px;
  margin-bottom: 64px; }
.ec-totalBox .ec-totalBox__spec {
    max-width: 177px;
    display: flex;
    justify-content: space-between;
    -ms-flex-pack: space-between;
    margin-bottom: 8px;
    margin-right: auto;
    margin-left: auto; }
.ec-totalBox .ec-totalBox__spec dt {
      font-weight: normal;
      text-align: left;
      font-size: 13px;
      line-height: 19px;
      letter-spacing: 0.05em; }
.ec-totalBox .ec-totalBox__spec dd {
      text-align: right;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.05em; }
.ec-totalBox .ec-totalBox__spec dd span {
        font-weight: 600;
        font-size: 17px;
        line-height: 25px;
        letter-spacing: 0.05em; }
.ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
      color: #DE5D50; }
.ec-totalBox .ec-totalBox__spec:last-of-type {
      margin-bottom: 16px; }
.ec-totalBox .ec-totalBox__border {
    border-bottom: 1px solid #CCC;
    margin-bottom: 16px; }
.ec-totalBox .ec-totalBox__total {
    padding: 8px 0;
    text-align: right;
    font-size: 14px;
    font-weight: bold; }
.ec-totalBox .ec-totalBox__paymentTotal {
    margin: 0 8px 16px 45px;
    display: flex;
    justify-content: space-between; }
.ec-totalBox .ec-totalBox__paymentTotal p {
      font-size: 13px;
      line-height: 32px;
      letter-spacing: 0.05em; }
.ec-totalBox .ec-totalBox__price {
    font-weight: bold;
    font-size: 21px;
    line-height: 31px;
    letter-spacing: 0.05em; }
.ec-totalBox .ec-totalBox__taxLabel {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em; }
.ec-totalBox .ec-totalBox__taxRate {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    font-size: 10px; }
.ec-totalBox .ec-totalBox__taxRate dt {
      font-weight: normal;
      text-align: left;
      margin-right: 8px; }
.ec-totalBox .ec-totalBox__taxRate dt::before {
        content: "[ "; }
.ec-totalBox .ec-totalBox__taxRate dd {
      text-align: right; }
.ec-totalBox .ec-totalBox__taxRate dd::after {
        content: " ]"; }
.ec-totalBox .ec-totalBox__pointBlock {
    padding: 18px 20px 10px;
    margin-bottom: 10px;
    background: #fff; }
.ec-totalBox .ec-totalBox__btn {
    color: #fff; }
.ec-totalBox .ec-totalBox__btn a {
      color: inherit;
      text-decoration: none; }
.ec-totalBox .ec-totalBox__btn a:hover {
      text-decoration: none; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
      font-size: 16px;
      font-weight: bold; }
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
      margin-top: 8px; }
/*
  ログインなしの購入ページ
*/
#page_shopping_nonmember .ec-cartRole {
  margin: 48px 0 24px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; }
#page_shopping_nonmember .ec-cartRole__progress__inner {
    height: 21px; }
#page_shopping_nonmember .ec-cartRole .ec-progress {
    margin: 0;
    width: 100%; }
#page_shopping_nonmember div.ec-cartRole {
  margin: 48px 0 24px;
  padding-left: 0;
  padding-right: 0;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; }
#page_shopping_nonmember .ec-login__description a {
  color: #000;
  opacity: 0.6;
  text-decoration: underline; }
#page_shopping_nonmember .ec-login__wrapper {
  margin-top: 40px; }
#page_shopping_nonmember .ec-cartRow__otherProductsLink {
  margin: 40px 0 32px; }
/*
  購入ページ
*/
#page_shopping .ec-orderRole,
#page_shopping_confirm .ec-orderRole,
#page_shopping_redirect_to .ec-orderRole {
  margin-top: 24px; }
#page_shopping .ec-cartRole,
#page_shopping_confirm .ec-cartRole,
#page_shopping_redirect_to .ec-cartRole {
  margin: 48px 0 24px;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; }
#page_shopping .ec-cartRole__progress__inner,
  #page_shopping_confirm .ec-cartRole__progress__inner,
  #page_shopping_redirect_to .ec-cartRole__progress__inner {
    height: 21px; }
#page_shopping .ec-cartRole .ec-progress,
  #page_shopping_confirm .ec-cartRole .ec-progress,
  #page_shopping_redirect_to .ec-cartRole .ec-progress {
    margin: 0;
    width: 100%; }
#page_shopping .ec-pageHeader,
#page_shopping_confirm .ec-pageHeader,
#page_shopping_redirect_to .ec-pageHeader {
  padding: 0 20px; }
#page_shopping .ec-cartRole .ec-progress {
  left: 0; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お知らせ

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

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

Styleguide 8.1
*/
/*
新着情報

新着情報の掲載をします。

ex [トップページ　新着情報部分](http://demo3.ec-cube.net/)

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

Styleguide 8.1.1
*/
.ec-news {
  margin-bottom: 16px;
  background: #F8F8F8; }
.ec-news .ec-news__title {
    font-weight: bold;
    padding: 8px;
    font-size: 16px;
    text-align: center; }
.ec-news .ec-news__items {
    padding: 0;
    list-style: none;
    border-top: 1px dotted #ccc; }
/*
折りたたみ項目

折りたたみ項目を掲載します。

ex [トップページ　折りたたみ項目部分](http://demo3.ec-cube.net/)

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

Styleguide 8.1.2
*/
.ec-newsline {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  padding: 0 16px; }
.ec-newsline .ec-newsline__info {
    width: 100%;
    padding: 16px 0; }
.ec-newsline .ec-newsline__info:after {
      content: " ";
      display: table; }
.ec-newsline .ec-newsline__info:after {
      clear: both; }
.ec-newsline .ec-newsline__date {
    display: inline-block;
    margin-right: 10px;
    float: left; }
.ec-newsline .ec-newsline__comment {
    display: inline-block;
    float: left; }
.ec-newsline .ec-newsline__close {
    float: right;
    display: inline-block;
    text-align: right; }
.ec-newsline .ec-newsline__close .ec-closeBtn--circle {
      display: inline-block;
      width: 25px;
      height: 25px;
      min-width: 25px;
      min-height: 25px; }
.ec-newsline .ec-newsline__description {
    width: 100%;
    height: 0;
    transition: all .2s ease-out; }
.ec-newsline.is_active .ec-newsline__description {
    height: auto;
    transition: all .2s ease-out;
    padding-bottom: 16px; }
.ec-newsline.is_active .ec-icon img {
    transform: rotateX(180deg); }
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
マイページ

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

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


Styleguide 9.1
*/
/*
マイページ

マイページで表示するメニューリストです。

ul を利用したリスト要素で記述します。

ex [マイページ　メニューリスト部分](http://demo3.ec-cube.net/mypage)

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

Styleguide 9.1.1
*/
.ec-navlistRole__wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }
.ec-navlistRole {
  width: 395px;
  margin: 0 20px; }
.ec-navlistRole .ec-navlistRole__navlist {
    display: flex;
    border: 1px solid #CCCCCC;
    border-radius: 8px;
    padding: 0;
    list-style: none;
    height: 48px; }
.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: auto;
    text-align: center;
    font-weight: bold;
    position: relative;
    font-size: 13px; }
.ec-navlistRole .ec-navlistRole__item:not(:last-child):after {
      content: "";
      display: inline-block;
      width: 1px;
      height: 18px;
      background-color: #000;
      position: absolute;
      top: 14px; }
.ec-navlistRole .ec-navlistRole__item a {
      color: #818181;
      padding: 14px 15px 10px;
      display: inline-block;
      width: auto; }
.ec-navlistRole .active a {
    color: #000; }
.ec-navlistRole .active a:after {
      content: "";
      border-radius: 2px;
      background: #FDE260;
      height: 4px;
      display: block;
      position: relative;
      bottom: -11px; }
/*
マイページ（お気に入り機能無効）

マイページで表示するメニューリストです。

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: 24px 0;
  text-align: left;
  display: flex; }
.ec-welcomeMsg__name {
    color: #000000;
    font-weight: 600;
    font-size: 17px;
    line-height: 160%;
    letter-spacing: 0.08em;
    margin-right: 24px; }
.ec-welcomeMsg__name span {
      font-size: 21px;
      letter-spacing: 0.1em;
      margin-left: 4px;
      margin-right: 4px; }
.ec-welcomeMsg a {
    font-size: 12px;
    line-height: 25px;
    letter-spacing: 0.05em;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    color: #666666; }
/*
お気に入り一覧

お気に入り一覧で表示するアイテムの表示コンポーネントです。

ex [マイページ　お気に入り一覧](http://demo3.ec-cube.net/mypage/favorite)

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

Styleguide 9.1.4
*/
.ec-favoriteRole .ec-favoriteRole__header {
  margin-bottom: 16px; }
.ec-favoriteRole .ec-favoriteRole__itemList {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  list-style: none; }
.ec-favoriteRole .ec-favoriteRole__itemList a {
    color: inherit;
    text-decoration: none; }
.ec-favoriteRole .ec-favoriteRole__itemList a:hover {
    text-decoration: none; }
.ec-favoriteRole .ec-favoriteRole__item {
  margin-bottom: 8px;
  width: 47.5%;
  position: relative;
  box-sizing: border-box;
  padding: 10px; }
.ec-favoriteRole .ec-favoriteRole__item-image {
    height: 150px;
    margin-bottom: 10px;
    text-align: center; }
.ec-favoriteRole .ec-favoriteRole__item img {
    width: auto;
    max-height: 100%; }
.ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle {
    position: absolute;
    right: 10px;
    top: 10px; }
.ec-favoriteRole .ec-favoriteRole__item .ec-closeBtn--circle .ec-icon img {
      width: 1em;
      height: 1em; }
.ec-favoriteRole .ec-favoriteRole__itemThumb {
  display: block;
  height: auto;
  margin-bottom: 8px; }
.ec-favoriteRole .ec-favoriteRole__itemTitle {
  margin-bottom: 2px; }
.ec-favoriteRole .ec-favoriteRole__itemPrice {
  font-weight: bold;
  margin-bottom: 0; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
標準セクション

通常のコンテナブロックです。

ex [商品詳細ページ　コンテナ](http://demo3.ec-cube.net/products/detail/33)

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

Styleguide 11.1
*/
.ec-role {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-role:after {
    content: " ";
    display: table; }
.ec-role:after {
    clear: both; }
/*
マイページセクション

マイページ専用のコンテナブロックです。

ex [マイページ　コンテナ](http://demo3.ec-cube.net/mypage)

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

Styleguide 11.1.2
*/
.ec-mypageRole {
  margin-right: auto;
  margin-left: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  margin-top: 40px;
  padding: 0; }
.ec-mypageRole:after {
    content: " ";
    display: table; }
.ec-mypageRole:after {
    clear: both; }
.ec-mypageRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-mypageRole img {
    max-width: 100%; }
.ec-mypageRole html {
    box-sizing: border-box; }
.ec-mypageRole *,
  .ec-mypageRole *::before,
  .ec-mypageRole *::after {
    box-sizing: inherit; }
.ec-mypageRole img {
    width: 100%; }
.ec-mypageRole h1 {
    padding-left: 20px;
    padding-right: 20px; }
.ec-mypageRole .ec-welcomeMsg {
    padding-left: 20px;
    padding-right: 20px; }
.ec-mypageRole img {
    width: auto; }
.ec-mypageRole h2 {
    font-size: 21px;
    line-height: 160%;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #000000;
    padding: 0; }
.ec-mypageRole .ec-pagerRole__blank h2 {
    font-weight: 500;
    text-align: center;
    font-size: 24px;
    line-height: 180%;
    letter-spacing: 0.05em;
    color: #818181;
    margin-bottom: 48px; }
.ec-mypageRole .ec-pagerRole__sp {
    display: block; }
.ec-mypageRole .ec-editRole {
    margin-top: 24px; }
.ec-mypageRole .ec-editRole .ec-RegisterRole__actions {
      margin-top: 40px; }
.ec-mypageRole .ec-editRole .ec-RegisterRole__actions .ec-blockBtn--action {
        width: 250px;
        height: 60px; }
.ec-mypageRole .ec-RegisterRole__backBtn .ec-blockBtn--cancel {
    width: 220px;
    height: 56px;
    margin-top: 24px; }
.ec-mypageRole__hato {
    margin-top: 37px;
    width: 154px;
    margin-left: auto;
    margin-right: auto; }
.ec-mypageRole .ec-alert-warning .ec-alert-warning__text {
    margin-top: 49px; }
.ec-mypageRole__change .ec-blockBtn--cancel {
  width: 240px;
  height: 56px; }
.ec-mypageRole__top {
  margin-top: 24px; }
.ec-mypageRole__delivery {
  margin-top: 41px;
  padding-left: 20px;
  padding-right: 20px; }
.ec-mypageRole__delivery h2 {
    font-size: 21px;
    line-height: 160%;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: #000000;
    padding: 0; }
.ec-mypageRole__delivery .ec-mypageRole {
    margin-top: 16px;
    padding: 0; }
.ec-mypageRole__delivery .ec-mypageRole .ec-off1Grid__cell {
      margin-left: 0; }
.ec-mypageRole__delivery .ec-mypageRole .ec-off1Grid {
      margin-bottom: 0; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item {
      border-bottom: 1px solid #E6E6E6;
      padding: 16px 0 12px 16px; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item:first-of-type {
        border-top: 1px solid #E6E6E6; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__address {
        color: #000;
        vertical-align: inherit;
        padding: 0;
        width: 385px; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__name {
        font-size: 17px;
        line-height: 160%;
        letter-spacing: 0.02em;
        margin-bottom: 4px;
        margin-top: 6px; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__name span {
          font-size: 14px;
          line-height: 21px;
          letter-spacing: 0.02em; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__addressdetail {
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0.02em; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__remove {
        padding: 0;
        text-align: right;
        vertical-align: inherit; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__remove .ec-icon {
          font-size: 13px;
          line-height: 19px;
          letter-spacing: 0.02em;
          color: #818181;
          vertical-align: bottom;
          margin-bottom: 59px; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__remove .ec-icon img {
            width: 24px;
            height: 24px;
            vertical-align: inherit; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__action {
        position: initial;
        vertical-align: middle;
        text-align: right;
        padding: 0;
        margin-bottom: 0; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__action .ec-blockBtn--cancel {
          font-size: 13px;
          line-height: 19px;
          letter-spacing: 0.02em;
          font-weight: normal;
          width: 112px;
          height: 32px;
          border: 1px solid #000;
          margin-left: auto;
          margin-right: 0; }
.ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__edit {
        font-size: 13px;
        line-height: 19px;
        letter-spacing: 0.02em;
        color: #818181;
        margin: 0 calc(50% - 25vw);
        width: 50vw;
        text-align: right;
        margin-top: 8px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1; }
/*
ヘッダー

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

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

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

Styleguide 11.2
*/
.ec-layoutRole {
  width: 100%;
  transition: transform 0.3s;
  background: #fff; }
.ec-layoutRole .ec-layoutRole__header {
    position: fixed;
    width: 100%;
    z-index: 100;
    background: #FDE260; }
.ec-layoutRole .ec-layoutRole__contentTop {
    padding: 0; }
.ec-layoutRole .ec-layoutRole__contents {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    padding-top: 54px; }
.ec-layoutRole .ec-layoutRole__main {
    width: 100%; }
.ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 100%; }
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 100%; }
.ec-layoutRole .ec-layoutRole__left,
  .ec-layoutRole .ec-layoutRole__right {
    display: none; }
.ec-headerRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 15px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto; }
.ec-headerRole:after {
    content: " ";
    display: table; }
.ec-headerRole:after {
    clear: both; }
.ec-headerRole:after {
    display: none; }
.ec-headerRole::before {
    display: none; }
.ec-headerRole .ec-headerRole__title {
    width: 100%; }
.ec-headerRole .ec-headerRole__navSP {
    display: block;
    position: absolute;
    top: 15px;
    width: 27%;
    right: 0;
    text-align: right; }
.ec-headerNaviRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 13px;
  padding-bottom: 13px; }
.ec-headerNaviRole:after {
    content: " ";
    display: table; }
.ec-headerNaviRole:after {
    clear: both; }
.ec-headerNaviRole::after {
    display: none; }
.ec-headerNaviRole .ec-headerNaviRole__title a {
    display: flex; }
.ec-headerNaviRole .ec-headerNaviRole__title img {
    height: 24px;
    width: 91px; }
.ec-headerNaviRole .ec-headerNaviRole__search {
    display: none; }
.ec-headerNaviRole .ec-headerNaviRole__navSP {
    display: block; }
.ec-headerNaviRole .ec-headerNaviRole__right {
    display: flex;
    justify-content: flex-end;
    align-items: center; }
.ec-headerNaviRole .ec-headerNaviRole__nav {
    display: inline-block;
    margin-right: 17px; }
.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;
    margin-right: 15px;
    height: 27px; }
.ec-headerNaviRole .ec-headerNaviRole__cart a {
      color: inherit;
      text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
      text-decoration: none; }
.ec-headerNaviRole .ec-headerNaviRole__onlineStore {
    margin-right: 15px; }
.ec-headerNaviRole .ec-headerNaviRole__onlineStore a {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #000;
      border-radius: 16px;
      color: #000;
      font-size: 10px;
      height: 28px;
      width: 100px; }
.ec-headerNaviRole .ec-headerNaviRole__onlineStore a:hover {
      background-color: rgba(0, 0, 0, 0.05); }
.ec-headerNavSP {
  display: flex;
  align-items: center;
  cursor: pointer; }
.ec-headerNavSP::before {
    content: "";
    display: block;
    background-image: url(../img/icon/ic_menu_sp.svg);
    background-size: auto;
    background-position: center;
    width: 20px;
    height: 18px; }
.ec-headerNavSP.is-active {
  display: none; }
/*
ヘッダー：タイトル

ヘッダー内で使用されるタイトルコンポーネントです。

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

Styleguide 11.2.1
*/
.ec-headerTitle {
  font-size: 16px;
  line-height: 1.4;
  color: #525263;
  -webkit-text-size-adjust: 100%; }
.ec-headerTitle textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif; }
.ec-headerTitle img {
    max-width: 100%; }
.ec-headerTitle html {
    box-sizing: border-box; }
.ec-headerTitle *,
  .ec-headerTitle *::before,
  .ec-headerTitle *::after {
    box-sizing: inherit; }
.ec-headerTitle img {
    width: 100%; }
.ec-headerTitle .ec-headerTitle__title {
    text-align: center; }
.ec-headerTitle .ec-headerTitle__title h1 {
      margin: 0;
      padding: 0; }
.ec-headerTitle .ec-headerTitle__title a {
      display: inline-block;
      margin-bottom: 30px;
      text-decoration: none;
      font-size: 20px;
      font-weight: bold;
      color: black; }
.ec-headerTitle .ec-headerTitle__title a:hover {
        opacity: .8; }
.ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 10px;
    text-align: center; }
.ec-headerTitle .ec-headerTitle__subtitle a {
      display: inline-block;
      color: #0092C4;
      text-decoration: none;
      cursor: pointer; }
/*
ヘッダー：ユーザナビゲーション

ヘッダー内でユーザに関与するナビゲーションコンポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__nav`内に記述すると２カラム上の右側に配置することができます。

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

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

Styleguide 11.2.3
*/
.ec-headerNav {
  text-align: right; }
.ec-headerNav .ec-headerNav__item {
    display: flex;
    align-items: center;
    margin-left: 0;
    font-size: 28px; }
.ec-headerNav .ec-headerNav__item a {
      display: flex;
      align-items: center; }
.ec-headerNav .ec-headerNav__item a::before {
        content: "";
        background-image: url(../img/icon/ic_login.svg);
        background-size: 30px 30px;
        background-position: center;
        background-repeat: no-repeat;
        transition: all 0.5s ease;
        height: 28px;
        width: 28px;
        margin-top: 1px; }
.ec-headerNav .ec-headerNav__item a:hover::before, .ec-headerNav .ec-headerNav__item a:focus::before, .ec-headerNav .ec-headerNav__item a:active::before {
        filter: invert(49%) sepia(21%) saturate(11%) hue-rotate(314deg) brightness(100%) contrast(92%); }
.ec-headerNav .ec-headerNav__item a:hover .ec-headerNav__itemLink, .ec-headerNav .ec-headerNav__item a:focus .ec-headerNav__itemLink, .ec-headerNav .ec-headerNav__item a:active .ec-headerNav__itemLink {
        color: #818181; }
.ec-headerNav .ec-headerNav__itemLink {
    display: none;
    font-size: 13px;
    vertical-align: middle;
    color: black;
    transition: all 0.5s ease; }
.ec-liveNavi a {
  display: flex;
  align-items: center;
  margin-top: 5px;
  color: #000;
  font-size: 15px; }
.ec-liveNavi a::before {
  content: "";
  display: block;
  background-image: url(../img/icon/ic_live.svg);
  background-size: contain;
  transition: all 0.5s ease;
  height: 16px;
  width: 27px; }
.ec-liveNavi span {
  padding-left: 12px; }
/*
ヘッダー：検索ボックス

ヘッダー内で使用される商品検索コンポーネントです。
<br><br>
`.ec-headerNaviRole`>`.ec-headerNaviRole__search`内に記述すると２カラム上の右側に配置することができます。

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

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

Styleguide 11.2.4
*/
.ec-headerSearch:after {
  content: " ";
  display: table; }
.ec-headerSearch:after {
  clear: both; }
.ec-headerSearch .ec-headerSearch__category {
  float: none; }
.ec-headerSearch .ec-headerSearch__category .ec-select {
    overflow: hidden;
    width: 100%;
    margin: 0;
    text-align: center; }
.ec-headerSearch .ec-headerSearch__category .ec-select select {
      width: 100%;
      cursor: pointer;
      padding: 8px 24px 8px 8px;
      text-indent: 0.01px;
      text-overflow: ellipsis;
      border: none;
      outline: none;
      background: transparent;
      background-image: none;
      box-shadow: none;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      color: #fff; }
.ec-headerSearch .ec-headerSearch__category .ec-select select option {
        color: #000; }
.ec-headerSearch .ec-headerSearch__category .ec-select select::-ms-expand {
        display: none; }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
      position: relative;
      border: 0;
      background: #000;
      color: #fff;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px; }
.ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search::before {
        position: absolute;
        top: 0.8em;
        right: 0.4em;
        width: 0;
        height: 0;
        padding: 0;
        content: '';
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
        pointer-events: none; }
.ec-headerSearch .ec-headerSearch__keyword {
  position: relative;
  color: #525263;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px; }
.ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
    width: 100%;
    height: 34px;
    font-size: 16px;
    border: 0 none;
    padding: 0.5em 50px 0.5em 1em;
    box-shadow: none;
    background: none;
    box-sizing: border-box;
    margin-bottom: 0; }
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
    width: 22px;
    height: 22px; }
.ec-headerSearch .ec-headerSearch__keywordBtn {
  border: 0;
  background: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-55%);
  display: block;
  white-space: nowrap;
  z-index: 1; }
/*
ヘッダー：カテゴリナビ

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

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

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

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  display: none; }
.ec-categoryNaviRole:after {
    content: " ";
    display: table; }
.ec-categoryNaviRole:after {
    clear: both; }
.ec-itemNav {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  text-align: center; }
.ec-itemNav__nav {
  display: block;
  margin: 0 auto;
  padding: 0;
  width: auto;
  height: auto;
  list-style-type: none;
  text-align: center;
  vertical-align: bottom; }
.ec-itemNav__nav li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  position: relative; }
.ec-itemNav__nav li a {
  display: block;
  border-bottom: 1px solid #E8E8E8;
  margin: 0;
  padding: 16px;
  height: auto;
  color: #2e3233;
  font-size: 16px;
  font-weight: bold;
  line-height: 20px;
  text-decoration: none;
  text-align: left;
  background: #fff;
  border-bottom: 1px solid #E8E8E8; }
.ec-itemNav__nav li ul {
  display: none;
  z-index: 0;
  margin: 0;
  padding: 0;
  min-width: 200px;
  list-style: none;
  position: static;
  top: 100%;
  left: 0; }
.ec-itemNav__nav li ul li {
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: .3s; }
.ec-itemNav__nav li ul li a {
  border-bottom: 1px solid #E8E8E8;
  padding: 16px 22px 16px 16px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  text-align: left;
  background: black; }
.ec-itemNav__nav > li:hover > a {
  background: #fafafa; }
.ec-itemNav__nav > li:hover li:hover > a {
  background: #333; }
.ec-itemNav__nav li ul li ul {
  top: 0;
  left: 100%;
  width: auto; }
.ec-itemNav__nav li ul li ul li a {
  background: #7D7D7D; }
.ec-itemNav__nav li:hover ul li ul li a:hover {
  background: #333; }
/*
ヘッダー：SPヘッダー

SP時のみ出現するヘッダーに関係するコンポーネントです。<br>
ex [トップページ](http://demo3.ec-cube.net/)画面サイズが768px以下に該当。<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 {
  display: none;
  overflow-y: scroll;
  background: #fde260;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0; }
.ec-drawerRole .ec-headerRole__navSP {
    display: flex;
    align-items: center; }
.ec-drawerRole__menu {
    padding: 17px 20px 0 20px;
    background: #fff; }
.ec-drawerRole__menu li {
      border-bottom: 1px dotted #000; }
.ec-drawerRole__menu li:last-of-type {
        border-bottom: none; }
.ec-drawerRole__menu li a {
        display: block;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 18px 0; }
.ec-drawerRole__menu li a::after {
          content: "";
          display: block;
          background-image: url(../img/icon/ic_link.svg);
          background-size: cover;
          width: 22px;
          height: 22px;
          margin-right: 4px; }
.ec-drawerRole__menu li a img {
          width: auto; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuTop {
          height: 15px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuHato {
          height: 16.5px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuItem {
          height: 16.5px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuCalendar {
          height: 17px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuShop {
          height: 16px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuHatokoji {
          height: 31px;
          margin-left: auto;
          margin-right: 15px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuTobira {
          height: 31px;
          margin-left: auto;
          margin-right: 22px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuOkiishi {
          height: 38px;
          margin-left: auto;
          margin-right: 10px; }
.ec-drawerRole__menu li a img.ec-drawerRole__menuGokain {
          height: 16.5px; }
.ec-drawerRole__menu li.ec-drawerRole__menuImage a {
        padding: 12px 0; }
.ec-drawerRole__link {
    padding: 13px 20px 12px 30px;
    background: #fde260; }
.ec-drawerRole__link .ec-headerNav__itemLink,
    .ec-drawerRole__link .ec-cartNavi__text {
      display: block;
      margin-left: 10px;
      font-size: 15px;
      letter-spacing: 1px; }
.ec-drawerRole__link .ec-cartNavi__text {
      margin-left: 11px; }
.ec-drawerRole__link .ec-cartNavi__badge {
      margin-left: 8px; }
.ec-drawerRole__link .ec-headerNav__item {
      margin-bottom: 10px; }
.ec-drawerRoleClose {
  display: none;
  cursor: pointer;
  z-index: 100000; }
.ec-drawerRoleClose::before {
    content: "";
    display: block;
    background-image: url(../img/icon/ic_delete.svg);
    background-size: 40px 40px;
    background-position: center;
    width: 20px;
    height: 20px; }
.ec-drawerRole.is_active {
  display: block;
  z-index: 99999;
  position: fixed; }
.ec-drawerRoleClose.is_active {
  display: inline-block;
  transition: all .3s; }
/*
ヘッダー：test

test

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

Styleguide 11.2.7
*/
.ec-itemNavAccordion {
  display: none; }
/* パンくず */
.ec-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.05em;
  margin: 26px 20px 0; }
.ec-breadcrumb__link {
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    color: #818181; }
.ec-breadcrumb__link:first-of-type {
      margin-bottom: 8px; }
.ec-breadcrumb__link:hover, .ec-breadcrumb__link:focus, .ec-breadcrumb__link:active {
      border: none;
      color: #818181; }
.ec-breadcrumb__current {
    color: #000000;
    pointer-events: none; }
.ec-breadcrumb__current:hover, .ec-breadcrumb__current:focus, .ec-breadcrumb__current:active {
      color: #000000;
      cursor: default; }
.ec-breadcrumb img {
    width: 6px;
    height: 21px;
    margin-left: 23px;
    margin-right: 20px; }
#page_collection .ec-headerNaviRole__right .ec-headerNaviRole__nav {
  display: none; }
#page_collection .ec-headerNaviRole__right .ec-headerRole__cart {
  display: none; }
#page_collection .ec-headerNaviRole__right .ec-headerNaviRole__onlineStore {
  display: none; }
#page_collection .ec-headerNaviRole__right .ec-headerNaviRole__cart {
  display: none; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
フッター

全ページで使用されるフッターのプロジェクトコンポーネントです。

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

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

Styleguide 11.3
*/
.ec-layoutRole__footer {
  margin-top: 138px;
  background: #fde260; }
.ec-footerRoleTop {
  background: #fde260;
  width: 100%; }
.ec-footerRoleTop .ec-footerRoleTop__container {
    position: relative; }
.ec-footerRoleTop .ec-footerRoleTop__inner {
    display: none; }
.ec-footerRoleTop.fix {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 2; }
.ec-footerRole {
  background: #fde260;
  padding-bottom: 30px; }
.ec-footerRole .ec-footerRole__inner {
    display: flex;
    flex-direction: column-reverse;
    padding: 42px 24px 0; }
/*
フッターナビ

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

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-footerTopNavi {
  display: flex;
  margin-left: -135px; }
.ec-footerTopNavi li {
    position: relative; }
.ec-footerTopNavi li.__hatosable img {
      height: 16px; }
.ec-footerTopNavi li.__products img {
      height: 16px; }
.ec-footerTopNavi li.__calender img {
      height: 16px; }
.ec-footerTopNavi li.__shop {
      transition: all 0.4s; }
.ec-footerTopNavi li.__shop img {
        height: 16px; }
.ec-footerTopNavi li.__shop.hover {
        background: #fff;
        box-shadow: 0 -10px 15px rgba(0, 0, 0, 0.3); }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop {
        position: absolute;
        bottom: 72px;
        background: #fff;
        display: none;
        z-index: 0;
        box-shadow: 0 -4px 15px -4px rgba(0, 0, 0, 0.3); }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li {
          border-bottom: 1px dotted #000;
          margin: 0 8px 0 9px;
          padding: 0; }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li a img {
            width: auto; }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li a img.hatokoji {
              height: 30px; }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li a img.tobira {
              height: 33px; }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li a img.okiishi {
              height: 37px; }
.ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li a:hover {
            filter: inherit;
            opacity: 0.5; }
.ec-footerTopNavi li.__gokain img {
      height: 16px; }
.ec-footerTopNavi li.__live {
      padding-left: 9px; }
.ec-footerTopNavi li.__live img {
        height: 40px;
        width: 70px; }
.ec-footerTopNavi li.__live a::after {
        display: none; }
.ec-footerTopNavi a {
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 17px; }
.ec-footerTopNavi a::after {
    content: "";
    background-image: url(../img/icon/ic_link.svg);
    background-size: cover;
    height: 20px;
    width: 20px;
    margin-left: 9px;
    transition: all 0.5s ease; }
.ec-footerTopNavi a:hover {
    color: #818181;
    filter: invert(49%) sepia(21%) saturate(11%) hue-rotate(314deg) brightness(100%) contrast(92%); }
.ec-footerTopNavi a:hover::after {
      background-image: url(../img/icon/ic_link_hover.svg); }
@-webkit-keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
@keyframes fade-in {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }
.ec-footerHato {
  position: absolute;
  top: -70px;
  right: 49px;
  transform: translateX(50%);
  -webkit-animation: footer-pyon 0.8s linear 0.8s 1;
          animation: footer-pyon 0.8s linear 0.8s 1;
  transform-origin: 0; }
@-webkit-keyframes footer-pyon {
  0% {
    transform: translate3d(50%, 0, 0); }
  20% {
    transform: translate3d(50%, 10%, 0); }
  60% {
    transform: translate3d(50%, -50%, 0); }
  100% {
    transform: translate3d(50%, 0, 0); } }
@keyframes footer-pyon {
  0% {
    transform: translate3d(50%, 0, 0); }
  20% {
    transform: translate3d(50%, 10%, 0); }
  60% {
    transform: translate3d(50%, -50%, 0); }
  100% {
    transform: translate3d(50%, 0, 0); } }
.ec-footerHato img {
    display: block;
    height: 56px;
    width: 77px; }
.ec-footerHatoSerif {
  position: absolute;
  bottom: 10vw;
  left: 5vw;
  background: #ffefa4;
  width: calc(90vw - 90px);
  min-height: 52px;
  padding: 15px 0;
  border-radius: 40px;
  display: none;
  transform-origin: bottom right; }
.ec-footerHatoSerif:before {
    content: "";
    position: absolute;
    bottom: 16px;
    right: -8px;
    transform: rotate(6deg);
    border-right: 20px solid transparent;
    border-bottom: 16.6025px solid #ffefa4;
    border-left: 30px solid transparent; }
.ec-footerHatoSerif p {
    position: relative;
    padding: 0 35px;
    font-size: 13px;
    line-height: 170%;
    font-weight: bold; }
.ec-footerHatoSerif__button {
    position: relative;
    max-width: 154px;
    text-align: center;
    margin: 10px auto 0; }
.ec-footerHatoSerif__button button {
      border: 1px solid #000;
      background: transparent;
      height: 22px;
      font-size: 11px;
      width: 67px;
      border-radius: 22px;
      outline: none; }
.ec-footerHatoSerif__button button:focus {
        cursor: pointer; }
.ec-footerHatoSerif__button button:nth-child(2) {
        margin-left: 20px; }
.ec-footerHatoVisible {
  display: block;
  -webkit-animation: 0.7s serif-animation cubic-bezier(0.94, 0, 0.88, 1);
          animation: 0.7s serif-animation cubic-bezier(0.94, 0, 0.88, 1); }
@-webkit-keyframes serif-animation {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0; }
  80% {
    transform: scale(1.05);
    opacity: 1; }
  100% {
    transform: scale(1) rotate(0); } }
@keyframes serif-animation {
  0% {
    transform: scale(0.3) rotate(-15deg);
    opacity: 0; }
  80% {
    transform: scale(1.05);
    opacity: 1; }
  100% {
    transform: scale(1) rotate(0); } }
.ec-footerHatoThink {
  position: absolute;
  bottom: 54px;
  right: 30px;
  width: 40px;
  height: 40px;
  overflow: hidden;
  -webkit-animation: think 5s steps(2, end) infinite;
          animation: think 5s steps(2, end) infinite; }
.ec-footerHatoThink__circle1 {
    position: absolute;
    bottom: 7px;
    left: 9px;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #fde260; }
.ec-footerHatoThink__circle2 {
    position: absolute;
    bottom: 15px;
    left: 13px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background: #fde260; }
.ec-footerHatoThink__circle3 {
    position: absolute;
    bottom: 26px;
    left: 19px;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: #fde260; }
@-webkit-keyframes think {
  0% {
    height: 0; }
  25% {
    height: 15px; }
  65% {
    height: 35px; }
  85% {
    height: 42px; }
  100% {
    height: 48px; } }
@keyframes think {
  0% {
    height: 0; }
  25% {
    height: 15px; }
  65% {
    height: 35px; }
  85% {
    height: 42px; }
  100% {
    height: 48px; } }
.ec-footerAbout {
  text-align: center;
  margin-top: 60px; }
.ec-footerAbout .ec-footerAbout__text {
    margin-top: 16px; }
.ec-footerAbout .ec-footerAbout__text p {
      margin-bottom: 4px; }
.ec-footerAbout .ec-footerAbout__text a {
      display: inline-block;
      color: #000; }
.ec-footerAbout img {
    width: 125px; }
.ec-footerAbout .ec-footerAbout__sns {
    margin-top: 21px; }
.ec-footerAbout .ec-footerAbout__sns p {
      background: #fef1b0;
      border-radius: 100vh;
      text-align: center;
      margin: 0 auto 11px;
      padding: 6px 40px;
      width: 160px; }
.ec-footerAbout .ec-footerAbout__sns p img {
        height: 11px;
        width: 57px; }
.ec-footerAbout .ec-footerAbout__btn {
    display: flex;
    width: 177px;
    margin: 0 auto; }
.ec-footerAbout .ec-footerAbout__btn a:not(:last-of-type) {
      margin-right: 21px; }
.ec-footerAbout .ec-footerAbout__btn img {
      width: 45px;
      display: block; }
.ec-footerLinks {
  display: flex;
  justify-content: space-between; }
.ec-footerNavi {
  padding: 0;
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  width: auto; }
.ec-footerNavi .ec-footerNavi__link {
    display: block; }
.ec-footerNavi .ec-footerNavi__link a {
      display: block;
      font-size: 12px;
      color: #000;
      text-align: left;
      margin-bottom: 16px; }
.ec-footerNavi .ec-footerNavi__link:hover a, .ec-footerNavi .ec-footerNavi__link:active a, .ec-footerNavi .ec-footerNavi__link:focus a {
      color: #818181; }
.ec-footerNavi .ec-footerNavi__link .ec-headerNav .ec-headerNav__item a::before {
      content: none; }
.ec-footerNavi .ec-footerNavi__link .ec-headerNav .ec-headerNav__itemLink {
      display: block; }
.ec-ShoppingFooter {
  padding-top: 26px;
  padding-bottom: 18px; }
.ec-ShoppingFooter .ec-footerTitle__copyright {
    margin-top: 0; }
/*
フッタータイトル

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

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__copyright {
  text-align: center;
  font-size: 10px;
  margin-top: 47px;
  color: #5e5e5e; }
/*topフッター*/
#page_homepage .ec-layoutRole__footer {
  margin-top: 61px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
トップページ

トップページ スライド部に関する Project コンポーネントを定義します。

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

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

Styleguide 12.1
*/
.ec-sliderRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 24px; }
.ec-sliderRole:after {
    content: " ";
    display: table; }
.ec-sliderRole:after {
    clear: both; }
.ec-sliderRole ul {
    padding: 0;
    list-style: none; }
.ec-sliderItemRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 24px; }
.ec-sliderItemRole:after {
    content: " ";
    display: table; }
.ec-sliderItemRole:after {
    clear: both; }
.ec-sliderItemRole ul {
    padding: 0;
    list-style: none; }
.ec-sliderItemRole .item_nav {
    display: none; }
.ec-sliderItemRole .slideThumb {
    margin-bottom: 25px;
    width: 33%;
    opacity: .8;
    cursor: pointer; }
.ec-sliderItemRole .slideThumb:focus {
      outline: none; }
.ec-sliderItemRole .slideThumb:hover {
      opacity: 1; }
.ec-sliderItemRole .slideThumb img {
      width: 80%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
アイキャッチ

トップページ アイキャッチ部に関する Project コンポーネントを定義します。

ex [トップページスライダー直下 アイキャッチ部](http://demo3.ec-cube.net/)

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

Styleguide 12.2
*/
.ec-eyecatchRole {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  /* Deprecated https://github.com/EC-CUBE/ec-cube/pull/4220 */ }
.ec-eyecatchRole .ec-eyecatchRole__image {
    display: block;
    margin-bottom: 40px;
    width: 100%;
    height: 100%; }
.ec-eyecatchRole .ec-eyecatchRole__intro {
    color: black; }
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-bottom: .8em;
    font-size: 16px;
    font-weight: normal; }
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
    margin-bottom: .8em;
    font-size: 24px;
    font-weight: bold; }
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2; }
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 2; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
ボタン

トップページで使用されているボタンのスタイルです。

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

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

Styleguide 12.3
*/
/*
通常ボタン

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

Markup:
.ec-inlineBtn--top more

Styleguide 12.3.1
*/
.ec-inlineBtn--top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: white;
  background-color: black;
  border-color: black; }
.ec-inlineBtn--top, .ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
    outline: none; }
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-inlineBtn--top:hover, .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
    outline: none;
    background-image: none; }
.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled],
  fieldset[disabled] .ec-inlineBtn--top {
    cursor: not-allowed; }
.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; }
/*
ロングボタン（全幅）

ロングタイプのボタンです。

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

Styleguide 2.1.2
*/
.ec-blockBtn--top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0;
  font-weight: bold;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 2px solid transparent;
  border-radius: 28px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  border-radius: 35px;
  font-size: 16px;
  margin: 0 auto;
  color: white;
  background-color: black;
  border-color: black;
  display: block;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0; }
.ec-blockBtn--top, .ec-blockBtn--top:active, .ec-blockBtn--top.active {
    outline: none; }
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus {
      outline: 5px auto -webkit-focus-ring-color;
      outline-offset: -2px;
      outline: none; }
.ec-blockBtn--top:hover, .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
    color: #000;
    text-decoration: none;
    outline: none; }
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
    outline: none;
    background-image: none; }
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled],
  fieldset[disabled] .ec-blockBtn--top {
    cursor: not-allowed; }
.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--action.with_hato {
  position: relative;
  border: 2px solid #000; }
.ec-blockBtn--action.with_hato::before {
  content: "";
  background-image: url(../img/icon/icon_yasumi_hato_footer.svg);
  background-size: cover;
  height: 54px;
  width: 73px;
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%); }
/*
見出し

トップページで使用されている見出しのスタイルです。

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: 15px;
  color: black; }
.ec-secHeading .ec-secHeading__en {
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em; }
.ec-secHeading .ec-secHeading__line {
    display: inline-block;
    margin: 0 20px;
    width: 1px;
    height: 14px;
    background: black; }
.ec-secHeading .ec-secHeading__ja {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px; }
/*
縦並び見出し

縦並びの見出しです。

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

Styleguide 12.4.2
*/
.ec-secHeading--tandem {
  margin-bottom: 15px;
  color: black;
  text-align: center; }
.ec-secHeading--tandem .ec-secHeading__en {
    display: block;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: .2em; }
.ec-secHeading--tandem .ec-secHeading__line {
    display: block;
    margin: 13px auto;
    width: 20px;
    height: 1px;
    background: black; }
.ec-secHeading--tandem .ec-secHeading__ja {
    display: block;
    margin-bottom: 30px;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .15em;
    vertical-align: 2px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
トピック（アイテム2列）

トップページで使用されているトピックのスタイルです。

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

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

Styleguide 12.5.1
*/
.ec-topicRole {
  background: #fde260;
  height: 90vh;
  position: relative;
  overflow: hidden; }
.ec-topicRole__sunflower-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
.ec-topicRole__sunflower1 {
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../img/top/sunflower1.png");
    opacity: 0;
    transition-timing-function: ease-out; }
.ec-topicRole__sunflower2 {
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../img/top/sunflower2.png");
    opacity: 0;
    transition-timing-function: ease-out; }
.ec-topicRole__sunflower3 {
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("../img/top/sunflower3.png");
    opacity: 0;
    transition-timing-function: ease-out; }
.ec-topicRole .hatosable_img {
    position: absolute;
    top: 141px;
    left: 50px;
    height: 433px;
    width: 602px; }
.ec-topicRole .hatosable_img .secretLink {
      position: absolute;
      top: 12.5%;
      left: 10.7%;
      width: 3%;
      height: 4%;
      z-index: 100;
      border-radius: 50%; }
.ec-topicRole .hatosable_img .secretLink:focus {
        outline: none; }
.ec-topicRole__inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh; }
.ec-topicRole__messageArea {
    position: absolute;
    bottom: 14%;
    left: 50%;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: 120px;
    width: calc(100vw - 40px);
    margin: 0 20px; }
.ec-topicRole .ec-topicRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-topicRole .ec-topicRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }
.ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: .5em;
    font-size: 14px;
    color: black; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
カテゴリ（アイテム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: 40px 0; }
.ec-newItemRole .ec-newItemRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 4%;
    width: 48%;
    height: auto; }
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
      color: black; }
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
      margin-right: 4%; }
.ec-newItemRole .ec-newItemRole__listItemHeading {
    margin-top: calc(45% - 20px); }
.ec-newItemRole .ec-newItemRole__listItemTitle {
    margin: 8px 0;
    font-size: 14px;
    font-weight: bold; }
.ec-newItemRole .ec-newItemRole__listItemPrice {
    font-size: 12px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
カテゴリ（アイテム3列）

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

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

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

Styleguide 12.7.1
*/
.ec-categoryRole {
  padding: 40px 0;
  color: black;
  background: #F8F8F8; }
.ec-categoryRole .ec-categoryRole__list {
    display: flex;
    flex-wrap: wrap; }
.ec-categoryRole .ec-categoryRole__listItem {
    margin-bottom: 20px;
    width: 100%;
    height: auto; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
見出し

トップページで使用されている新着情報のスタイルです。

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

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

Styleguide 12.8.1
*/
.ec-newsRole {
  margin: 38px 0 42px; }
.ec-newsRole .ec-secHeading {
    margin-bottom: 30px; }
.ec-newsRole .ec-secHeading h2 {
      padding: 0; }
.ec-newsRole .ec-newsRole__newsItem {
    width: 100%;
    margin-bottom: 40px; }
.ec-newsRole .ec-newsRole__newsItem:last-of-type {
    margin-bottom: 0; }
.ec-newsRole .ec-newsRole__newsHeading h2 {
    padding: 0; }
.ec-newsRole .ec-newsRole__newsDate {
    font-size: 12px;
    letter-spacing: 1px; }
.ec-newsRole .ec-newsRole__newsTitle {
    display: inline-block;
    font-size: 16px;
    margin-top: 8px;
    font-weight: 600; }
.ec-newsRole .ec-newsRole__newsDescription {
    margin-top: 10px;
    line-height: 2.15; }
.ec-newsRole .ec-newsRole__newsDescription a {
      color: #000;
      text-decoration: underline; }
.ec-newsRole .ec-newsRole__newsDescription a:hover,
    .ec-newsRole .ec-newsRole__newsDescription a:focus,
    .ec-newsRole .ec-newsRole__newsDescription a:active {
      color: #818181; }
.ec-newsRole .ec-newsRole__newsDescription img {
      max-width: 500px; }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
    margin: 0 0 10px; }
.ec-newsRole__newsItem.is_active .ec-newsRole__newsCloseBtn i {
    display: inline-block;
    transform: rotateX(180deg) translateY(2px); }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
検索ラベル

商品一覧 ヘッダー部 に関する Project コンポーネントを定義します。

ex [商品一覧 ヘッダー部](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.1

*/
.ec-searchnavRole {
  margin-bottom: 0;
  padding: 0; }
.ec-searchnavRole .ec-searchnavRole__infos {
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    border-top: 0;
    margin-bottom: 16px;
    padding-top: 5px;
    flex-direction: column; }
.ec-searchnavRole .ec-searchnavRole__infos:after {
      content: " ";
      display: table; }
.ec-searchnavRole .ec-searchnavRole__infos:after {
      clear: both; }
.ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 16px;
    width: 100%; }
.ec-searchnavRole .ec-searchnavRole__actions {
    text-align: right;
    width: 100%; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
商品一覧

商品一覧 に関する Project コンポーネントを定義します。

SP版２列、PC版４列の特殊グリッドを構成します。

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

Styleguide 13.2

*/
.ec-shelfRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 20px; }
.ec-shelfRole:after {
    content: " ";
    display: table; }
.ec-shelfRole:after {
    clear: both; }
/*
商品一覧グリッド

商品一覧 で使用するグリッドコンポーネントです。

SP版２列、PC版４列の特殊グリッドを構成します。

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

Styleguide 13.2.1

*/
.ec-shelfGrid {
  display: flex;
  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: 38px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 35px 10px rgba(0, 0, 0, 0.03);
    background-color: #fff;
    transition: background-color 0.5s ease, box-shadow 0.5s ease; }
.ec-shelfGrid .ec-shelfGrid__item-image {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 211px;
      margin-bottom: 22px;
      background-color: #f7f7f7; }
.ec-shelfGrid .ec-shelfGrid__item-image img {
        width: auto;
        max-width: 100%;
        height: 100%; }
.ec-shelfGrid .ec-shelfGrid__item-name {
      font-weight: 600;
      line-height: 1.5;
      font-size: 17px; }
.ec-shelfGrid .ec-shelfGrid__item .price02-default {
      font-weight: 600;
      letter-spacing: 1px;
      font-size: 14px;
      margin-top: 15px; }
.ec-shelfGrid .ec-shelfGrid__item .price02-default span {
        color: #000; }
.ec-shelfGrid .ec-shelfGrid__item-saleTime {
      color: #818181;
      font-size: 12px;
      margin-top: 7px;
      line-height: 2.2; }
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
      margin-top: auto; }
.ec-shelfGrid .ec-shelfGrid__item-cart {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px; }
.ec-shelfGrid .ec-shelfGrid__item-cart .add-cart,
      .ec-shelfGrid .ec-shelfGrid__item-cart .add-cart_subs {
        font-size: 13px;
        font-weight: 400;
        height: 40px;
        width: 155px;
        margin-bottom: 0;
        line-height: 1.2; }
.ec-shelfGrid .ec-shelfGrid__item-cart .add-cart:hover,
        .ec-shelfGrid .ec-shelfGrid__item-cart .add-cart_subs:hover {
          background-color: #FCEFA4;
          border-color: #FCEFA4; }
.ec-shelfGrid .ec-shelfGrid__item:hover {
    background-color: #F6F7F8;
    box-shadow: none; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
    padding: 13px 15px 15px; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
    padding: 13px 15px 15px; }
.ec-shelfGrid .ec-shelfGrid__item:nth-child(3n) {
    margin-right: 0; }
.ec-shelfGrid .ec-shelfGrid__title {
    margin-bottom: 7px; }
.ec-shelfGrid .ec-shelfGrid__plice {
    font-weight: bold; }
.ec-shelfGrid .ec-numberInput {
    display: flex;
    justify-content: center;
    height: 30px;
    border: 1px solid #000;
    width: 94px;
    position: relative;
    /* スピンボタンを消す */
    /* スピンボタンを消す */ }
.ec-shelfGrid .ec-numberInput input[type="number"]::-webkit-outer-spin-button,
    .ec-shelfGrid .ec-numberInput input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none; }
.ec-shelfGrid .ec-numberInput input[type="number"] {
      -moz-appearance: textfield; }
.ec-shelfGrid .ec-numberInput input {
      background-color: #fff;
      border-radius: 0;
      border: none; }
.ec-shelfGrid .ec-numberInput .ec-numberInput__amountDownButton,
    .ec-shelfGrid .ec-numberInput .ec-numberInput__amountUpButton {
      -ms-user-select: none;
      -moz-user-select: -moz-none;
      -webkit-user-select: none;
      user-select: none; }
.ec-shelfGrid .ec-numberInput .ec-numberInput__amountDownButton {
      border-right: 1px solid #000; }
.ec-shelfGrid .ec-numberInput .ec-numberInput__amountUpButton {
      border-left: 1px solid #000; }
.ec-shelfGrid .ec-numberInput input.quantity {
      font-size: 13px;
      margin: 0;
      padding: 0;
      padding-right: 14px;
      height: auto;
      max-width: none;
      width: 31px;
      flex-shrink: 0; }
.ec-shelfGrid .ec-numberInput input[type="button"] {
      cursor: pointer;
      margin: 0;
      padding: 0;
      height: auto;
      transition: all 0.5s ease; }
.ec-shelfGrid .ec-numberInput input[type="button"]:hover, .ec-shelfGrid .ec-numberInput input[type="button"]:active, .ec-shelfGrid .ec-numberInput input[type="button"]:focus {
        background-color: rgba(0, 0, 0, 0.05); }
.ec-shelfGrid .ec-numberInput::after {
    content: "点";
    position: absolute;
    top: 7px;
    right: 34px;
    font-size: 10px; }
/*
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: 36px;
    width: 50%; }
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
      height: 150px;
      margin-bottom: 10px;
      text-align: center; }
.ec-shelfGridCenter .ec-shelfGridCenter__item img {
      width: auto;
      max-height: 100%; }
.ec-shelfGridCenter .ec-shelfGridCenter__item .ec-productRole__btn {
      margin-top: auto;
      padding-top: 1em; }
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
    padding-right: 8px; }
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
    padding-left: 8px; }
.ec-shelfGridCenter .ec-shelfGridCenter__title {
    margin-bottom: 7px; }
.ec-shelfGridCenter .ec-shelfGridCenter__plice {
    font-weight: bold; }
/*一覧用ページャー*/
.product_page ul.ec-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px; }
.product_page ul.ec-pager li {
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 19px;
    width: 19px;
    min-width: 19px;
    margin-left: 12px;
    transition: all 0.5s ease; }
.product_page ul.ec-pager li a {
      padding: 0;
      padding-left: 1px;
      font-size: 12px; }
.product_page ul.ec-pager li.ec-pager__leader {
    display: none;
    border: none; }
.product_page ul.ec-pager li.ec-pager__item__back,
  .product_page ul.ec-pager li.ec-pager__item__next {
    border: 1px solid #383838;
    border-radius: 20px;
    height: 31px;
    width: 103px; }
.product_page ul.ec-pager li.ec-pager__item__back a,
    .product_page ul.ec-pager li.ec-pager__item__next a {
      font-weight: 600;
      font-size: 13px;
      height: 31px;
      width: 100%;
      line-height: 0;
      display: flex;
      align-items: center;
      justify-content: center; }
.product_page ul.ec-pager li.ec-pager__item__back a .btnimg,
      .product_page ul.ec-pager li.ec-pager__item__next a .btnimg {
        height: 9px; }
.product_page ul.ec-pager li.ec-pager__item__back {
    margin-left: 0;
    margin-right: 10px; }
.product_page ul.ec-pager li.ec-pager__item__back__none {
      border: 1px solid #b2b2b2b2; }
.product_page ul.ec-pager li.ec-pager__item__back__none a {
        pointer-events: none; }
.product_page ul.ec-pager li.ec-pager__item__next {
    margin-left: 22px; }
.product_page ul.ec-pager li.ec-pager__item__next__none {
      border: 1px solid #b2b2b2b2; }
.product_page ul.ec-pager li.ec-pager__item__next__none a {
        pointer-events: none; }
.product_page ul.ec-pager .ec-pager__item--active {
    background-color: #f7f7f7; }
.product_page .toOtherPages {
  margin-top: 46px; }
.product_page .toOtherPages .ec-blockBtn--primary {
    border-color: #000; }
.product_page .toOtherPages a.ec-blockBtn--primary:nth-child(2) {
    margin-top: 25px; }
/*
商品一覧フッター

商品一覧 フッター に関する Project コンポーネントを定義します。

ex [商品一覧 ページャ部](http://demo3.ec-cube.net/products/list)

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

Styleguide 13.3

*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
カート追加モーダル

カート追加モーダルに関する Project コンポーネントを定義します。

ex [商品一覧、商品詳細](http://demo3.ec-cube.net/products/list)

+ec-modal

Styleguide 13.4

*/
.ec-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.24); }
.ec-modal.small {
    width: 30%; }
.ec-modal.full {
    width: 100%;
    height: 100%; }
.ec-modal .ec-modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%; }
.ec-modal .ec-modal-wrap {
    position: relative;
    border-radius: 2px;
    background-color: #fff;
    width: 280px;
    padding: 72px 20px 24px; }
.ec-modal #ec-modal-header {
    font-size: 14px;
    font-weight: 600; }
.ec-modal .ec-modal-close {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 16px; }
.ec-modal .ec-modal-box {
    text-align: center; }
.ec-modal .ec-role {
    margin-top: 48px;
    padding: 0; }
.ec-modal .ec-role .ec-inlineBtn--action:hover, .ec-modal .ec-role .ec-inlineBtn--action:active, .ec-modal .ec-role .ec-inlineBtn--action:focus {
      background-color: #fcefa4;
      border-color: #fcefa4; }
.ec-modal .ec-inlineBtn--cancel {
    border: 2px solid #000;
    margin-top: 16px;
    transition: all 0.5s ease; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
商品詳細

商品詳細ページに関する Project コンポーネントを定義します。

ex [商品詳細ページ](http://demo3.ec-cube.net/products/detail/18)


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

Styleguide 14.1
*/
.ec-productRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  max-width: none;
  padding: 0; }
.ec-productRole:after {
    content: " ";
    display: table; }
.ec-productRole:after {
    clear: both; }
.ec-productRole__top {
    background-color: #f5f3f1;
    padding-top: 54px; }
.ec-productRole .ec-breadcrumb {
    padding-top: 0; }
.ec-productRole .ec-sliderItemRole {
    margin-bottom: 0;
    margin-top: 24px;
    width: 100%;
    padding: 0; }
.ec-productRole .ec-sliderItemRole .slick-slider {
      position: relative;
      margin-bottom: 54px; }
.ec-productRole .ec-sliderItemRole .slick-arrow {
      position: absolute;
      bottom: -33px;
      z-index: 10;
      height: 20px;
      width: 11px; }
.ec-productRole .ec-sliderItemRole .slick-arrow.prev-arrow {
        left: 18px; }
.ec-productRole .ec-sliderItemRole .slick-arrow.next-arrow {
        right: 18px; }
.ec-productRole .ec-sliderItemRole .slick-dots {
      position: absolute;
      left: 50%;
      bottom: -28px;
      transform: translateX(-50%); }
.ec-productRole .ec-sliderItemRole .slick-dots li {
        margin: 0 6px;
        height: 7px;
        width: 7px; }
.ec-productRole .ec-sliderItemRole .slick-dots li button {
          padding: 0;
          height: 7px;
          width: 7px; }
.ec-productRole .ec-sliderItemRole .slick-dots li button:before {
          height: 7px;
          width: 7px;
          opacity: unset;
          background-color: #dcdcdc; }
.ec-productRole .ec-sliderItemRole .slick-dots li.slick-active button:before {
          background-color: #7d7d7d; }
.ec-productRole .ec-sliderItemRole .slick-dots li:first-child:last-child {
        display: none; }
.ec-productRole .ec-productRole__img {
    margin-right: 0;
    margin-bottom: 20px; }
.ec-productRole .ec-productRole__profile {
    margin-left: 0;
    padding: 0 20px 54px; }
.ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 21px;
    font-weight: 600;
    color: #000;
    padding: 0;
    margin: 0;
    margin-bottom: 16px; }
.ec-productRole .ec-productRole__tags {
    margin-top: 16px;
    padding: 0;
    padding-bottom: 16px; }
.ec-productRole .ec-productRole__tag {
    display: inline-block;
    padding: 2px 5px;
    list-style: none; }
.ec-productRole .ec-productRole__priceRegular {
    padding-top: 14px; }
.ec-productRole .ec-productRole__priceRegularTax {
    margin-left: 5px;
    font-size: 10px; }
.ec-productRole .ec-productRole__price {
    padding: 0;
    font-weight: 600;
    margin-top: 10px;
    font-size: 16px; }
.ec-productRole .ec-productRole__price .ec-price__price {
      font-weight: 600;
      padding: 0; }
.ec-productRole .ec-productRole__code {
    padding: 14px 0; }
.ec-productRole .ec-productRole__notSell {
    background-color: #fff;
    text-align: center;
    font-size: 13px;
    padding: 24px 0 29px;
    margin-top: 30px;
    line-height: 1.68;
    width: 100%; }
.ec-productRole .ec-productRole__category {
    padding: 14px 0; }
.ec-productRole .ec-productRole__category ul {
      list-style: none;
      padding: 0;
      margin: 0; }
.ec-productRole #form1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px; }
.ec-productRole .ec-productRole__actions .ec-numberInput {
    display: flex;
    justify-content: center;
    height: 30px;
    border: 1px solid #000;
    position: relative;
    width: 93px;
    /* スピンボタンを消す */
    /* スピンボタンを消す */ }
.ec-productRole .ec-productRole__actions .ec-numberInput input[type="number"]::-webkit-outer-spin-button,
    .ec-productRole .ec-productRole__actions .ec-numberInput input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none; }
.ec-productRole .ec-productRole__actions .ec-numberInput input[type="number"] {
      -moz-appearance: textfield;
      width: 33px;
      padding: 0;
      padding-right: 7px;
      text-align: center; }
.ec-productRole .ec-productRole__actions .ec-numberInput input {
      border-radius: 0;
      border: none;
      margin: 0;
      height: auto;
      width: 30px; }
.ec-productRole .ec-productRole__actions .ec-numberInput .ec-numberInput__amountDownButton,
    .ec-productRole .ec-productRole__actions .ec-numberInput .ec-numberInput__amountUpButton {
      -ms-user-select: none;
      -moz-user-select: -moz-none;
      -webkit-user-select: none;
      user-select: none; }
.ec-productRole .ec-productRole__actions .ec-numberInput .ec-numberInput__amountDownButton {
      border-right: 1px solid #000; }
.ec-productRole .ec-productRole__actions .ec-numberInput .ec-numberInput__amountUpButton {
      border-left: 1px solid #000; }
.ec-productRole .ec-productRole__actions .ec-numberInput input.quantity {
      font-size: 13px;
      margin: 0;
      padding: 0;
      padding-right: 14px;
      height: auto;
      max-width: none;
      width: 31px; }
.ec-productRole .ec-productRole__actions .ec-numberInput input[type="button"] {
      cursor: pointer;
      margin: 0;
      padding: 0;
      height: auto; }
.ec-productRole .ec-productRole__actions .ec-numberInput::after {
    content: "点";
    position: absolute;
    top: 7px;
    right: 34px;
    font-size: 10px; }
.ec-productRole .ec-productRole__actions .ec-select select {
    height: 40px;
    max-width: 100%;
    min-width: 100%; }
.ec-productRole .ec-productRole__btn {
    display: flex;
    justify-content: flex-end; }
.ec-productRole .ec-productRole__btn button {
      font-weight: normal;
      height: 40px;
      width: 155px;
      font-size: 13px;
      margin: 0; }
.ec-productRole .ec-productRole__btn button:hover {
        background-color: #fcefa4;
        border-color: #fcefa4; }
.ec-productRole .ec-productRole__description__text {
    line-height: 1.6;
    font-size: 14px;
    font-weight: 400; }
.ec-productRole .ec-productRole__description__more {
    display: flex;
    color: #000;
    justify-content: flex-start;
    font-size: 10px; }
.ec-productRole .ec-productRole__description__more__text {
      text-decoration: underline; }
.ec-productRole .ec-productRole__description__more__text::after {
      content: "▼"; }
.ec-productRole .ec-productRole__size {
    color: #818181;
    margin-top: 14px; }
.ec-productRole .ec-productRole__ships {
    color: #818181;
    margin-top: 8px;
    margin-bottom: 14px; }
.ec-productRole .ec-productRole__ships a {
      color: #818181;
      text-decoration: underline; }
.ec-productRole .ec-productRole__materials {
    margin-top: 10px;
    font-size: 14px; }
.ec-productRole .ec-productRole__materials h2 {
      padding: 0;
      font-size: 14px; }
.ec-productRole .ec-productRole__materials span {
      margin-left: 12px;
      margin-top: 3px;
      display: inline-block; }
.ec-productRole_bags {
    background-color: #fff;
    padding: 29px 20px 26px; }
.ec-productRole_bags__img {
      position: relative;
      background-color: #f7f7f7;
      padding: 0;
      line-height: 0; }
.ec-productRole_bags__img__zoom {
        display: none;
        position: absolute;
        top: 13px;
        right: 7px; }
.ec-productRole_bags__img__zoom img {
          height: 16px;
          width: 16px; }
.ec-productRole_bags__img__popup {
        display: none;
        background: rgba(255, 255, 255, 0.7);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        height: 100vw;
        width: 100vw; }
.ec-productRole_bags__img__popup__inner {
          display: flex;
          justify-content: center;
          background-color: #f7f7f7;
          position: relative;
          top: 50%;
          left: 50%;
          transform: translate(-50%, 0);
          padding: 80px 20px;
          width: 90%; }
.ec-productRole_bags__img__popup .ec-productRole_bags__img__img {
          height: 41.7vw;
          width: 100%; }
.ec-productRole_bags__img__popup.show {
          display: flex;
          justify-content: center;
          align-items: center; }
.ec-productRole_bags__img__popup .ec-productRole_bags__img__zoom {
          top: 19px;
          right: 19px; }
.ec-productRole_bags .ec-shelfGrid {
      margin-top: 32px; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item {
        box-shadow: none;
        margin: 0;
        padding: 0;
        margin-bottom: 27px; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item:hover {
          background-color: rgba(255, 255, 255, 0); }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .ec-numberInput {
          margin-top: 15px; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
          position: relative; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn button {
            position: absolute;
            bottom: -4px;
            right: 0; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__top__detail {
          display: flex;
          justify-content: space-between;
          width: 100%; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__bottom {
          color: #818181;
          font-size: 12px; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__bottom .bag_size_open {
            color: #000;
            text-decoration: underline; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__bottom .bag_size {
            margin-top: 12px; }
.ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .price02-default {
          margin-top: 0;
          font-size: 19px; }
.ec-productRole_bags__name {
      font-weight: 600;
      font-size: 19px; }
#RelatedProduct-product_area {
  max-width: none;
  padding-top: 0;
  background-image: url(../img/detail/shopdetail_bg2.png);
  background-size: cover;
  background-repeat: no-repeat; }
#RelatedProduct-product_area h2 img {
    height: 31px; }
#RelatedProduct-product_area .ec-shelfRole__inner {
    padding-top: 55px; }
#RelatedProduct-product_area .ec-shelfGrid {
    margin-top: 53px; }
#RelatedProduct-product_area .ec-shelfGrid .ec-shelfGrid__item {
      box-shadow: none; }
#RelatedProduct-product_area .ec-numberInput {
    display: flex;
    justify-content: center;
    height: 30px;
    border: 1px solid #000;
    position: relative;
    /* スピンボタンを消す */
    /* スピンボタンを消す */ }
#RelatedProduct-product_area .ec-numberInput input[type="number"]::-webkit-outer-spin-button,
    #RelatedProduct-product_area .ec-numberInput input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none; }
#RelatedProduct-product_area .ec-numberInput input[type="number"] {
      -moz-appearance: textfield;
      width: 33px;
      padding: 0;
      padding-right: 7px;
      text-align: center; }
#RelatedProduct-product_area .ec-numberInput input {
      border-radius: 0;
      border: none;
      margin: 0;
      height: auto;
      width: 30px; }
#RelatedProduct-product_area .ec-numberInput .ec-numberInput__amountDownButton,
    #RelatedProduct-product_area .ec-numberInput .ec-numberInput__amountUpButton {
      -ms-user-select: none;
      -moz-user-select: -moz-none;
      -webkit-user-select: none;
      user-select: none; }
#RelatedProduct-product_area .ec-numberInput .ec-numberInput__amountDownButton {
      border-right: 1px solid #000; }
#RelatedProduct-product_area .ec-numberInput .ec-numberInput__amountUpButton {
      border-left: 1px solid #000; }
#RelatedProduct-product_area .ec-numberInput input.quantity {
      font-size: 13px;
      margin: 0;
      padding: 0;
      padding-right: 14px;
      height: auto;
      max-width: none;
      width: 31px; }
#RelatedProduct-product_area .ec-numberInput input[type="button"] {
      cursor: pointer;
      margin: 0;
      padding: 0;
      height: auto; }
#RelatedProduct-product_area .ec-numberInput::after {
    content: "点";
    position: absolute;
    top: 7px;
    right: 34px;
    font-size: 10px; }
#RelatedProduct-product_area .ec-productRole__btn button {
    width: 155px;
    height: 40px;
    font-size: 13px; }
#page_product_detail .ec-layoutRole__mainBottom {
  display: none; }
#page_product_detail .toOtherPages {
  margin-top: 27px;
  margin-bottom: 75px; }
#page_product_detail .toOtherPages a {
    background-color: unset;
    border: 2px solid #000;
    margin-bottom: 20px; }
#page_product_detail .ec-layoutRole__footer {
  margin-top: 0; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
カート

カート 注文詳細 に関する Project コンポーネントを定義します。

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

(カート内に商品がある状態でアクセス)

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

Styleguide 15.1

*/
.cart_page h1 {
  margin-top: 30px; }
div.ec-cartRole {
  width: 100%;
  margin: 24px auto 48px;
  padding: 0 20px; }
div.ec-cartRole div.ec-cartRole {
    padding: 0;
    margin-bottom: 24px; }
div.ec-cartRole div.ec-cartRole:last-child {
      margin-bottom: 24px; }
.ec-cartRole {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start; }
.ec-cartRole::before {
    display: none; }
.ec-cartRole .ec-cartRole__progress {
    width: 100%;
    text-align: center; }
.ec-cartRole .ec-cartRole__error {
    width: 100%;
    text-align: center; }
.ec-cartRole .ec-cartRole__error .ec-alert-warning {
      max-width: 80%;
      display: inline-block; }
.ec-cartRole .ec-cartRole__totalText {
    margin-bottom: 0;
    padding: 16px 0 6px;
    width: 100%;
    text-align: center;
    font-weight: normal; }
.ec-cartRole .ec-cartRole__cart {
    margin: 0;
    width: 100%; }
.ec-cartRole .ec-cartRole__actions {
    background-color: #F7F6F1;
    padding: 24px;
    margin-top: 24px;
    width: 100%;
    text-align: right; }
.ec-cartRole .ec-cartRole__actions .ec-blockBtn--action {
      margin: 24px 0 0;
      width: 100%; }
.ec-cartRole .ec-cartRole__actions .ec-blockBtn--action:hover,
    .ec-cartRole .ec-cartRole__actions .ec-blockBtn--action:active,
    .ec-cartRole .ec-cartRole__actions .ec-blockBtn--action:focus {
      background-color: #FCEFA4;
      border-color: #FCEFA4; }
.ec-cartRole .ec-cartRole__actions a span {
      color: #666;
      text-decoration: underline;
      font-size: 12px; }
.ec-cartRole .ec-cartRole__total {
    margin: 0 0 8px;
    font-weight: bold;
    font-size: 16px; }
.ec-cartRole .ec-cartRole__totalAmount {
    margin-left: 8px;
    font-size: 21px; }
.ec-cartRole .ec-cartRole__totalAmount span {
      font-size: 14px; }
.ec-cartRole .ec-cartRole__totalAmount span span {
        margin-left: 2px; }
.ec-cartRole .ec-blockBtn--action {
    margin-bottom: 10px; }
.ec-cartRole .ec-cartRole__wrapper {
    width: 100%; }
.ec-cartRole .ec-cartRole__wrapper .ec-cartRole {
      display: inline-block;
      align-items: inherit; }
.ec-cartRole .ec-cartRole__wrapper .ec-cartRole:last-of-type {
        margin-bottom: 0; }
/*
カート商品表示枠（テーブルヘッダ）

カート内の商品をを表示するテーブル枠です。

ex [カートページ　テーブル部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)

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

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

Styleguide 15.1.2
*/
.ec-cartTable {
  display: table;
  border-top: 1px solid #E5E5E5;
  width: 100%; }
/*
カート商品表示枠（テーブルヘッダ）

カート内の商品を表示するテーブルのヘッダです。
スマホでは非表示となります。

ex [カートページ　カートテーブルヘッダ部分(カート内に商品がある状態でアクセス)](http://demo3.ec-cube.net/cart)


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

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


Styleguide 15.1.3
*/
.ec-cartHeader {
  display: none;
  width: 100%;
  background: #F4F3F0; }
.ec-cartHeader .ec-cartHeader__label {
    display: table-cell;
    padding: 16px;
    text-align: center;
    background: #F4F3F0;
    overflow-x: hidden;
    font-weight: bold; }
.ec-cartCompleteRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-cartCompleteRole:after {
    content: " ";
    display: table; }
.ec-cartCompleteRole:after {
    clear: both; }
/*
カート内商品

カート内のアイテムを表示するテーブル行です。
スマホでは非表示となります。

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: flex;
  flex-direction: column;
  border-bottom: 1px solid #E5E5E5;
  padding: 16px; }
.ec-cartRow .ec-cartRow__delColumn a {
    display: flex;
    align-items: center;
    color: #818181;
    font-size: 13px; }
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
    width: 24px;
    height: 24px; }
.ec-cartRow .ec-cartRow__sutbtotalSP {
    font-size: 17px; }
.ec-cartRow .ec-cartRow__sutbtotalSP span {
      font-size: 12px;
      margin-right: 4px; }
.ec-cartRow .ec-cartRow__sutbtotalSP span:last-child {
      margin: 0; }
.ec-cartRow .ec-cartRow__sutbtotalSP span:last-child span {
        margin-left: 2px; }
.ec-cartRow .ec-cartRow__contentColumn {
    border-bottom: 1px dotted #ccc;
    padding: 10px 0;
    display: table; }
.ec-cartRow .ec-cartRow__topBox {
    display: flex; }
.ec-cartRow .ec-cartRow__img {
    display: table-cell;
    width: 80px;
    height: 80px;
    vertical-align: middle;
    margin-right: 10px; }
.ec-cartRow .ec-cartRow__middleBox {
    margin-left: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 68%; }
.ec-cartRow .ec-cartRow__middleBox .ec-cartRow__name {
      font-size: 17px; }
.ec-cartRow .ec-cartRow__middleBox .ec-cartRow__name a {
        color: #000; }
.ec-cartRow .ec-cartRow__middleBox .ec-cartRow__unitPrice {
      font-size: 14px; }
.ec-cartRow .ec-cartRow__middleBox__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; }
.ec-cartRow .ec-cartRow__lastBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px; }
.ec-cartRow .ec-cartRow__summary {
    display: table-cell;
    margin-left: 5px;
    font-weight: bold;
    vertical-align: middle;
    width: 46%; }
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
      margin-bottom: 5px; }
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
      display: block;
      font-weight: normal; }
.ec-cartRow .ec-cartRow__amountColumn {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #000; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
      display: none; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount span {
        color: #000;
        font-size: 11px;
        margin-left: 1px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      font-size: 16px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP span {
        font-size: 11px;
        color: #000;
        margin-left: 1px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
      display: flex;
      justify-content: center;
      height: 30px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown a {
        color: #000;
        transition: all 0.5s ease; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown a:hover, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown a:active, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown a:focus {
          background-color: rgba(0, 0, 0, 0.05); }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      vertical-align: middle;
      position: relative;
      text-align: center;
      background: #fff;
      border-left: 1px solid #000;
      width: 24px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
        display: block;
        margin-left: -0.4em;
        width: .8em;
        height: .8em;
        position: absolute;
        top: 28%;
        left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      vertical-align: middle;
      position: relative;
      text-align: center;
      background: #fff;
      border-right: 1px solid #000;
      width: 24px; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
        display: block;
        margin-left: -0.4em;
        width: .8em;
        height: .8em;
        position: absolute;
        top: 28%;
        left: 50%; }
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
      cursor: default; }
.ec-cartRow .ec-cartRow__subtotalColumn {
    display: none;
    border-bottom: 1px dotted #ccc;
    text-align: right;
    width: 16.66666667%; }
.ec-cartRow__otherProductsLink {
  margin-top: -24px;
  margin-left: 20px; }
.ec-cartRow__otherProductsLink a {
    display: flex;
    align-items: center;
    color: #818181;
    text-decoration: underline;
    font-size: 14px; }
.ec-cartRow__otherProductsLink a:hover, .ec-cartRow__otherProductsLink a:active, .ec-cartRow__otherProductsLink a:focus {
      text-decoration: none; }
.ec-cartRow__otherProductsLink a:before {
    content: "";
    display: block;
    background-image: url(../img/icon/ic_arrow_back.svg);
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 9px;
    height: 16px;
    width: 16px; }
.ec-cartRow__otherProductsLink.ec-cartRow__otherProductsLinkTop {
  margin-top: 0;
  margin-bottom: 24px; }
/*
カート内商品(商品が１の場合)

商品が１の場合はカート商品を減らす「-」ボタンの無効化状態になります。

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 .ec-alert-warning__text {
  margin-top: 50px; }
.ec-alert-warning .ec-alert-warning__textPc {
  display: none; }
.ec-alert-warning .ec-alert-warning__textSp {
  display: block;
  margin: 0 auto;
  width: 172px; }
.ec-alert-warning .ec-alert-warning__hato {
  height: 122px;
  text-align: center;
  margin-top: 60px; }
.ec-alert-warning .ec-alert-warning__hato img {
    width: 154px; }
.ec-alert-warning .ec-alert-warning__btn {
  margin-top: 64px; }
/*
アラート(空)

カートが空であることを示す警告メッセージです。

ex [マイページ　カート](http://demo3.ec-cube.net/cart)

(カート内に商品がある状態でアクセス)

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

Styleguide 15.1.7
*/
.ec-cartRole__error__text {
  margin: 24px auto -8px; }
.ec-cartRole__error__text__comments {
    display: flex;
    align-items: flex-start; }
.ec-cartRole__error__text__comments a {
      color: #818181;
      text-decoration: underline;
      transition: all 0.5s ease; }
.ec-cartRole__error__text__comments a:hover {
      opacity: 0.8;
      cursor: pointer; }
.ec-cartRole__error__text__comments p {
      max-width: 314px; }
.ec-cartRole__error__text__comments p span {
      color: #E60012;
      font-size: 14px; }
.ec-cartRole__error__text__comments:nth-child(1) {
    margin-bottom: 8px; }
.ec-cartRole__error__text__comments::before {
    content: "";
    display: block;
    background-image: url(../img/icon/ic_hato_error.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-top: 3px;
    margin-right: 4px;
    height: 16px;
    width: 16px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
注文内容確認

カート内 注文内容確認に関する Project コンポーネントを定義します。

ex [マイページ　注文詳細](http://demo3.ec-cube.net/shopping)

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

Styleguide 15.2
*/
.ec-orderRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  max-width: 980px;
  display: flex;
  flex-direction: column;
  margin-top: 41px; }
.ec-orderRole:after {
    content: " ";
    display: table; }
.ec-orderRole:after {
    clear: both; }
.ec-orderRole h2 {
    font-weight: 600;
    background: none;
    padding: 0;
    margin-bottom: 16px;
    font-size: 21px;
    line-height: 160%;
    letter-spacing: 0.1em; }
.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-blockBtn--cancel {
      font-size: 13px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0.02em;
      width: 112px;
      height: 32px;
      border: 1px solid #000; }
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
      display: inline-block; }
/*
注文履歴詳細 オーダ情報

マイページ 注文履歴詳細部に関する 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: 48px; }
.ec-orderOrder .ec-orderOrder__wrapper {
    padding: 24px 16px;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6; }
.ec-orderOrder__wrapper {
    padding: 24px 16px;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #E6E6E6; }
.ec-orderOrder__wrapper p {
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.02em; }
.ec-orderOrder .ec-orderOrder__items {
    border-bottom: 1px solid #E6E6E6;
    border-top: 1px solid #E6E6E6; }
.ec-orderOrder .ec-definitions, .ec-orderOrder .ec-definitions--soft {
    margin: 0;
    display: table;
    width: 335px; }
.ec-orderOrder .ec-definitions:not(:last-child), .ec-orderOrder .ec-definitions--soft:not(:last-child) {
      margin-bottom: 17px; }
.ec-orderOrder .ec-definitions dt, .ec-orderOrder .ec-definitions--soft dt {
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.02em;
      color: #818181;
      font-weight: normal;
      vertical-align: middle;
      display: table-cell;
      width: 20%; }
.ec-orderOrder .ec-definitions dd, .ec-orderOrder .ec-definitions--soft dd {
      color: #000000;
      padding-left: 40px;
      font-size: 14px;
      line-height: 160%;
      letter-spacing: 0.02em;
      width: 93%; }
/*
注文履歴詳細 お客様情報

マイページ 注文詳細部に関する Project コンポーネントを定義します。

ex [マイページ　オーダ情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

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

Styleguide 15.2.2
*/
.ec-orderAccount {
  margin-bottom: 30px; }
.ec-orderAccount p {
    margin-bottom: 0; }
.ec-orderAccount:after {
    content: " ";
    display: table; }
.ec-orderAccount:after {
    clear: both; }
.ec-orderAccount .ec-orderAccount__change {
    display: inline-block;
    margin-left: 10px;
    float: right; }
.ec-orderAccount .ec-orderAccount__account {
    margin-bottom: 16px; }
/*
注文詳細 配送情報

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　配送情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

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

Styleguide 15.2.3
*/
.ec-orderDelivery {
  margin-bottom: 48px; }
.ec-orderDelivery .ec-orderDelivery__title {
    padding: 16px 0 17px;
    font-weight: bold;
    font-size: 18px;
    position: relative; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailTitle {
    color: #000000;
    font-weight: 600;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: 0.08em;
    margin-bottom: 28px; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailPrice {
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em;
    color: #000000;
    margin-bottom: 9px; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailPrice span:first-of-type {
      font-weight: 600;
      font-size: 17px;
      line-height: 25px;
      letter-spacing: 0.05em;
      color: #000000; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailPrice span:nth-of-type(2) {
      font-weight: normal;
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.05em;
      color: #000000;
      margin-left: 12px;
      margin-right: 0; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailPrice span:nth-of-type(3) {
      font-weight: normal;
      font-size: 17px;
      line-height: 25.5px;
      letter-spacing: 0.05em;
      color: #000000; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailSubtotal {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em;
    color: #000000;
    text-align: right; }
.ec-orderDelivery .ec-imageGrid .ec-historyRole__detailSubtotal span {
      font-weight: 600;
      font-size: 17px;
      line-height: 25px;
      letter-spacing: 0.05em;
      margin-left: 8px; }
.ec-orderDelivery .ec-orderDelivery__change {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0; }
.ec-orderDelivery .ec-orderDelivery__item:last-of-type {
    border-bottom: 1px solid #E6E6E6; }
.ec-orderDelivery .ec-orderDelivery__items {
    border-bottom: 1px solid #E6E6E6;
    border-top: 1px solid #E6E6E6; }
.ec-orderDelivery .ec-orderDelivery__address {
    margin: 10px 0 18px; }
.ec-orderDelivery .ec-orderDelivery__address p {
      margin: 0; }
/*
注文履歴詳細 支払情報

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　支払情報(要ログイン → 詳細を見るボタン押下)](http://demo3.ec-cube.net/mypage)

Markup:
.ec-orderRole
  .ec-orderPayment
    .ec-rectHeading
      h2 お支払方法
    p 支払方法： 郵便振替

Styleguide 15.2.4
*/
.ec-orderPayment {
  margin-bottom: 48px; }
/*
注文履歴詳細 お問い合わせ

マイページ 注文履歴詳細部に関する 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: 50px; }
.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, .ec-orderConfirm #page_guide_shipping_tel .ec-select textarea, #page_guide_shipping_tel .ec-orderConfirm .ec-select textarea {
    height: 160px; }
/*
お届け先の複数指定

お届け先の複数指定に関するコンポーネントを定義します。

ex [マイページ　お届け先の複数指定](http://demo3.ec-cube.net/shopping/shipping_multiple)
(商品購入画面 → 「お届け先を追加する」を押下)

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

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

注文条件ページ

*/
#page_shopping .ec-orderRole,
#page_shopping_confirm .ec-orderRole,
#page_shopping_redirect_to .ec-orderRole {
  max-width: none;
  flex-direction: column; }
#page_shopping .ec-orderRole__text,
#page_shopping_confirm .ec-orderRole__text,
#page_shopping_redirect_to .ec-orderRole__text {
  margin-bottom: 24px; }
#page_shopping .ec-orderRole__text p,
  #page_shopping_confirm .ec-orderRole__text p,
  #page_shopping_redirect_to .ec-orderRole__text p {
    font-size: 14px;
    opacity: 0.6; }
#page_shopping .ec-definitions, #page_shopping .ec-definitions--soft,
#page_shopping_confirm .ec-definitions,
#page_shopping_confirm .ec-definitions--soft,
#page_shopping_redirect_to .ec-definitions,
#page_shopping_redirect_to .ec-definitions--soft {
  margin: 0;
  display: table;
  width: 335px; }
#page_shopping .ec-definitions:not(:last-child), #page_shopping .ec-definitions--soft:not(:last-child),
  #page_shopping_confirm .ec-definitions:not(:last-child),
  #page_shopping_confirm .ec-definitions--soft:not(:last-child),
  #page_shopping_redirect_to .ec-definitions:not(:last-child),
  #page_shopping_redirect_to .ec-definitions--soft:not(:last-child) {
    margin-bottom: 24px; }
#page_shopping .ec-definitions dt, #page_shopping .ec-definitions--soft dt,
  #page_shopping_confirm .ec-definitions dt,
  #page_shopping_confirm .ec-definitions--soft dt,
  #page_shopping_redirect_to .ec-definitions dt,
  #page_shopping_redirect_to .ec-definitions--soft dt {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.02em;
    color: #818181;
    font-weight: normal;
    vertical-align: middle;
    display: table-cell;
    width: 20%; }
#page_shopping .ec-definitions dd, #page_shopping .ec-definitions--soft dd,
  #page_shopping_confirm .ec-definitions dd,
  #page_shopping_confirm .ec-definitions--soft dd,
  #page_shopping_redirect_to .ec-definitions dd,
  #page_shopping_redirect_to .ec-definitions--soft dd {
    color: #000000;
    padding-left: 40px;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    width: 93%; }
#page_shopping .ec-definitions #shopping_order_deliverto, #page_shopping .ec-definitions--soft #shopping_order_deliverto,
  #page_shopping_confirm .ec-definitions #shopping_order_deliverto,
  #page_shopping_confirm .ec-definitions--soft #shopping_order_deliverto,
  #page_shopping_redirect_to .ec-definitions #shopping_order_deliverto,
  #page_shopping_redirect_to .ec-definitions--soft #shopping_order_deliverto {
    display: flex;
    flex-direction: column; }
#page_shopping .ec-definitions__address,
  #page_shopping_confirm .ec-definitions__address,
  #page_shopping_redirect_to .ec-definitions__address {
    display: flex;
    flex-direction: column;
    align-items: flex-start; }
#page_shopping .ec-definitions .ec-orderDelivery__change, #page_shopping .ec-definitions--soft .ec-orderDelivery__change,
  #page_shopping_confirm .ec-definitions .ec-orderDelivery__change,
  #page_shopping_confirm .ec-definitions--soft .ec-orderDelivery__change,
  #page_shopping_redirect_to .ec-definitions .ec-orderDelivery__change,
  #page_shopping_redirect_to .ec-definitions--soft .ec-orderDelivery__change {
    margin-top: 8px; }
#page_shopping .ec-definitions .ec-inlineBtn, #page_shopping .ec-definitions--soft .ec-inlineBtn,
  #page_shopping_confirm .ec-definitions .ec-inlineBtn,
  #page_shopping_confirm .ec-definitions--soft .ec-inlineBtn,
  #page_shopping_redirect_to .ec-definitions .ec-inlineBtn,
  #page_shopping_redirect_to .ec-definitions--soft .ec-inlineBtn {
    font-size: 13px;
    border: 1px solid #000;
    border-radius: 16px;
    height: 32px;
    width: 125px; }
#page_shopping #shopping_order_deliverto label,
#page_shopping_confirm #shopping_order_deliverto label,
#page_shopping_redirect_to #shopping_order_deliverto label {
  margin-bottom: 12px; }
#page_shopping .ec-orderPayment .ec-radio > div:not(:last-child) label,
#page_shopping_confirm .ec-orderPayment .ec-radio > div:not(:last-child) label,
#page_shopping_redirect_to .ec-orderPayment .ec-radio > div:not(:last-child) label {
  margin-bottom: 12px;
  display: flex; }
#page_shopping .ec-orderPayment .ec-radio > div.payment_type_4 label,
#page_shopping_confirm .ec-orderPayment .ec-radio > div.payment_type_4 label,
#page_shopping_redirect_to .ec-orderPayment .ec-radio > div.payment_type_4 label {
  display: flex;
  align-items: baseline; }
#page_shopping .ec-orderPayment .ec-radio > div.payment_type_4 label span::after,
  #page_shopping_confirm .ec-orderPayment .ec-radio > div.payment_type_4 label span::after,
  #page_shopping_redirect_to .ec-orderPayment .ec-radio > div.payment_type_4 label span::after {
    content: "手数料が330円かかります";
    color: #818181;
    font-size: 13px;
    margin-left: 12px; }
#page_shopping .ec-orderPayment__text,
#page_shopping_confirm .ec-orderPayment__text,
#page_shopping_redirect_to .ec-orderPayment__text {
  margin: 0 0 12px; }
#page_shopping .ec-totalBox__btn,
#page_shopping_confirm .ec-totalBox__btn,
#page_shopping_redirect_to .ec-totalBox__btn {
  margin-top: 32px; }
#page_shopping .ec-totalBox__btn.__pc,
  #page_shopping_confirm .ec-totalBox__btn.__pc,
  #page_shopping_redirect_to .ec-totalBox__btn.__pc {
    display: none; }
#page_shopping .ec-totalBox__btn.__sp,
  #page_shopping_confirm .ec-totalBox__btn.__sp,
  #page_shopping_redirect_to .ec-totalBox__btn.__sp {
    display: block; }
#page_shopping .ec-totalBox__btn .ec-blockBtn--action:hover,
  #page_shopping .ec-totalBox__btn .ec-blockBtn--action:active,
  #page_shopping .ec-totalBox__btn .ec-blockBtn--action:focus,
  #page_shopping_confirm .ec-totalBox__btn .ec-blockBtn--action:hover,
  #page_shopping_confirm .ec-totalBox__btn .ec-blockBtn--action:active,
  #page_shopping_confirm .ec-totalBox__btn .ec-blockBtn--action:focus,
  #page_shopping_redirect_to .ec-totalBox__btn .ec-blockBtn--action:hover,
  #page_shopping_redirect_to .ec-totalBox__btn .ec-blockBtn--action:active,
  #page_shopping_redirect_to .ec-totalBox__btn .ec-blockBtn--action:focus {
    background-color: #FCEFA4;
    border-color: #FCEFA4; }
#page_shopping .ec-orderRole__summary,
#page_shopping_confirm .ec-orderRole__summary,
#page_shopping_redirect_to .ec-orderRole__summary {
  text-align: right;
  max-width: none; }
#page_shopping .ec-orderRole__summary .ec-totalBox,
  #page_shopping_confirm .ec-orderRole__summary .ec-totalBox,
  #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox {
    margin-bottom: 0;
    padding: 40px 24px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__paymentTotal,
    #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__paymentTotal,
    #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__paymentTotal {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-size: 13px;
      font-weight: normal;
      margin: 16px auto 8px;
      max-width: 218px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__price,
    #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__price,
    #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__price {
      font-size: 21px;
      font-weight: 700;
      margin-left: 8px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__taxLabel,
    #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__taxLabel,
    #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__taxLabel {
      font-size: 14px;
      margin-left: 2px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__text,
    #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__text,
    #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__text {
      font-size: 12px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__text span,
      #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__text span,
      #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__text span {
        color: #666; }
#page_shopping .ec-orderRole__summary .ec-totalBox__text a,
      #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__text a,
      #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__text a {
        color: #666;
        text-decoration: underline;
        margin-top: 4px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__line,
    #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__line,
    #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__line {
      border-top: 1px solid #ccc;
      width: 100%; }
#page_shopping .ec-orderRole__summary .ec-totalBox__spec,
    #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__spec,
    #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__spec {
      max-width: 218px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__spec dl,
      #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__spec dl,
      #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__spec dl {
        font-size: 13px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__spec dd,
      #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__spec dd,
      #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__spec dd {
        font-size: 17px;
        font-weight: 400;
        margin-right: 40px; }
#page_shopping .ec-orderRole__summary .ec-totalBox__spec dd span,
        #page_shopping_confirm .ec-orderRole__summary .ec-totalBox__spec dd span,
        #page_shopping_redirect_to .ec-orderRole__summary .ec-totalBox__spec dd span {
          font-size: 14px;
          font-weight: 400; }
#page_shopping .ec-orderConfirm,
#page_shopping_confirm .ec-orderConfirm,
#page_shopping_redirect_to .ec-orderConfirm {
  margin-bottom: 48px; }
#page_shopping .ec-cartRow__otherProductsLink.__sp,
#page_shopping_confirm .ec-cartRow__otherProductsLink.__sp,
#page_shopping_redirect_to .ec-cartRow__otherProductsLink.__sp {
  display: block; }
#page_shopping .ec-cartRow__otherProductsLink.__pc,
#page_shopping_confirm .ec-cartRow__otherProductsLink.__pc,
#page_shopping_redirect_to .ec-cartRow__otherProductsLink.__pc {
  display: none; }
#page_shopping .payment_method_cash,
#page_shopping_confirm .payment_method_cash,
#page_shopping_redirect_to .payment_method_cash {
  color: #666;
  font-size: 13px;
  line-height: 1.4;
  margin-top: -7px;
  margin-left: 30px; }
.__pc {
  display: none; }
.__sp {
  display: block; }
select::-ms-expand {
  display: none; }
.ec-select__whitebox select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url(../img/icon/ic_dropdown.svg);
  background-size: 30px,30px;
  background-position: right;
  background-color: #fff;
  background-repeat: no-repeat;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: none;
  color: #000;
  height: 40px;
  width: 198px; }
.ec-select__whitebox select:focus {
    box-shadow: none;
    border: 2px solid #FDE260;
    background: #FFF url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
#page_shopping_confirm .ec-imageGrid__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; }
#page_shopping_confirm .ec-imageGrid__content__name {
    font-size: 17px;
    font-weight: 700; }
#page_shopping_confirm .ec-imageGrid__content__price {
    margin-top: 28px; }
#page_shopping_confirm .ec-imageGrid__content__price__single {
      display: flex; }
#page_shopping_confirm .ec-imageGrid__content__price__single__price {
        font-size: 17px;
        font-weight: 600; }
#page_shopping_confirm .ec-imageGrid__content__price__single__price span {
          font-size: 14px;
          font-weight: 400; }
#page_shopping_confirm .ec-imageGrid__content__price__single__number {
        font-weight: 500;
        font-size: 17px;
        margin-left: 12px; }
#page_shopping_confirm .ec-imageGrid__content__price__single__number span {
          font-size: 14px; }
#page_shopping_confirm .ec-imageGrid__content__price__single__number .__ten {
          font-weight: 500; }
#page_shopping_confirm .ec-imageGrid__content__price__single__number .__times {
          font-weight: 400; }
#page_shopping_confirm .ec-imageGrid__content__price__total {
      font-size: 17px;
      font-weight: 600;
      text-align: right;
      margin-top: 8px; }
#page_shopping_confirm .ec-imageGrid__content__price__total .__text {
        margin-right: 8px;
        font-size: 12px;
        font-weight: 400; }
#page_shopping_confirm .ec-imageGrid__content__price__total .__en {
        font-size: 14px;
        font-weight: 400; }
#page_shopping_confirm .ec-orderRole__summary .ec-totalBox__total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  padding: 0;
  max-width: 218px;
  margin: 16px auto 0; }
#page_shopping_confirm .ec-orderRole__summary .ec-totalBox__price {
  font-size: 21px;
  font-weight: 700; }
#page_shopping_confirm .ec-orderRole__summary .ec-totalBox__taxLabel {
  font-size: 14px; }
/*クレジット情報入力*/
#page_vt4g_shopping_payment .ec-layoutRole__main #vt4g_form_credit {
  padding: 48px 20px 120px; }
#page_vt4g_shopping_payment .ec-layoutRole__main h2 {
  font-size: 21px; }
#page_vt4g_shopping_payment .ec-layoutRole__main #vt4g_form_credit_error {
  padding: 0 0 16px; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-off1Grid__cell {
  margin-left: 0; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs {
  background-color: #fff;
  border: none; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl {
    border: none;
    flex-direction: column;
    padding: 16px 0 0; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dt {
      display: flex;
      align-items: baseline;
      padding: 0;
      width: auto; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd {
      padding: 0;
      width: 100%; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd .ec-select {
        display: flex;
        align-items: center;
        margin-bottom: 0; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd #vt4g_card_no {
        width: 100%; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd #vt4g_expiry_mon,
      #page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd #payment_credit_expiry_year {
        width: 86px; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd #payment_credit_security_code {
        width: 86px;
        margin-bottom: 0;
        margin-right: 12px; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd .ec-halfInput {
        display: flex;
        flex-wrap: wrap;
        align-items: center; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd .ec-halfInput #payment_credit_first_name,
        #page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd .ec-halfInput #payment_credit_last_name {
          width: 40%;
          margin-bottom: 8px; }
#page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl dd .ec-halfInput .ec-para-normal {
          margin-bottom: 0; }
#page_vt4g_shopping_payment .ec-cartRole {
  margin-bottom: 0;
  margin-top: 48px; }
#page_vt4g_shopping_payment .ec-layoutRole__footer {
  margin-top: 0; }
#page_vt4g_shopping_payment .ec-orderRole__actions .ec-off4Grid {
  background-color: #fff; }
#page_vt4g_shopping_payment .ec-orderRole__actions .ec-off4Grid__cell {
  width: auto;
  margin: 0 auto; }
#page_vt4g_shopping_payment .ec-blockBtn--action {
  width: auto; }
#page_vt4g_shopping_payment .ec-blockBtn--action:hover,
#page_vt4g_shopping_payment .ec-blockBtn--action:active,
#page_vt4g_shopping_payment .ec-blockBtn--action:focus {
  background-color: #FCEFA4;
  border-color: #FCEFA4; }
.ec-creditRole {
  margin: 24px auto 32px;
  padding: 0 20px; }
.ec-creditRole__description {
    opacity: 0.6;
    margin-bottom: 24px; }
.ec-creditRole .ec-cartRow__otherProductsLink {
    margin-top: 40px; }
.ec-creditRole .ec-cartRow__otherProductsLink.ec-cartRow__otherProductsLinkTop {
    margin-top: 0;
    margin-bottom: 24px; }
/*注文完了*/
#page_shopping_complete .ec-cartRole {
  margin-bottom: 0; }
#page_shopping_complete .ec-cartRole .ec-progress {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    margin-left: -34%; }
.ec-cartCompleteRole {
  margin-top: 24px; }
.ec-cartCompleteRole .ec-reportHeading {
    margin: 0; }
.ec-cartCompleteRole .ec-reportHeading h2 {
      text-align: left;
      line-height: 1.6;
      font-size: 21px; }
.ec-cartCompleteRole .ec-reportDescription {
    text-align: left; }
.ec-cartCompleteRole .ec-reportID dl {
    display: flex;
    font-size: 12px; }
.ec-cartCompleteRole .ec-reportID dl dt {
      margin-right: 4px; }
.ec-cartCompleteRole .ec-reportDescription.ec-para-normal {
    margin: 0 0 60px; }
.ec-cartCompleteRole .ec-reportDescription.ec-para-normal .ec-rectHeading {
      display: none; }
.ec-cartCompleteRole .ec-reportDescription.ec-para-normal p {
      font-size: 12px; }
.ec-cartCompleteRole .ec-alert-warning__hato {
    margin-top: 48px; }
.ec-cartCompleteRole .ec-alert-warning__hato img {
      width: 154px; }
.ec-cartCompleteRole .ec-blockBtn--cancel {
    margin-top: 64px; }
/*
  店舗用完了ページ
*/
.print-area {
  margin-bottom: 60px; }
.print-area .print-area__content {
    margin-bottom: 40px; }
.print-area table.print-table {
    width: 100%;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.02em;
    margin-top: 16px; }
.print-area table.print-table tr:not(:first-of-type) {
      border-bottom: 1px solid #ccc; }
.print-area table.print-table tr td {
      padding-top: 16px;
      padding-bottom: 16px; }
.print-area table.print-table tr td:last-of-type {
        padding-right: 40px;
        text-align: right; }
.print-area .print-table__th {
    background: #F7F6F1; }
.print-area .print-table__th th {
      padding-top: 6px;
      padding-bottom: 5px; }
.print-area .print-table__th th:first-of-type {
        width: 60%;
        padding-left: 40px; }
.print-area .print-table__th th:nth-of-type(2) {
        width: 15%;
        padding-left: 24px; }
.print-area .print-table__th th:last-of-type {
        width: 25%;
        padding-left: 70px; }
.print-area .print-table__name {
    padding-left: 40px; }
.print-area .print-table__number {
    padding-left: 30px; }
.print-area .print-table__price {
    padding-left: 40px; }
.print-area .print-total {
    padding-top: 16px;
    text-align: right;
    font-size: 1.1em; }
.print-area dl {
    padding-top: 16px;
    padding-bottom: 16px; }
.print-area dl dt {
      width: 30%;
      padding-left: 40px; }
.print-area dl dd {
      width: 70%;
      padding-right: 40px; }
.print-off {
  display: none; }
.__print {
  display: none; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
注文履歴一覧

マイページ 注文履歴部に関する Project コンポーネントを定義します。

ex [マイページ　注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

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

Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
  border-bottom: 1px solid #E6E6E6;
  display: flex;
  flex-direction: column;
  color: #525263;
  margin-bottom: 80px; }
.ec-historyRole .ec-historyRole__header {
  width: 100%; }
.ec-historyRole .ec-historyRole__detail {
  border-top: 1px solid #E6E6E6;
  width: 100%; }
.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
    border-top: none; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
    color: #000000;
    font-size: 17px;
    line-height: 34px;
    letter-spacing: 0.08em;
    margin-bottom: 23px;
    font-weight: 600; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
    margin-bottom: 9px;
    font-weight: normal;
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em;
    color: #000000; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailSubtotal {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.05em;
    color: #000000;
    text-align: right; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailSubtotal span {
      margin-left: 8px;
      font-weight: 600;
      font-size: 17px;
      line-height: 25px;
      letter-spacing: 0.05em; }
.ec-historyRole .ec-historyRole__detailstatus {
  padding-top: 16px;
  border-bottom: 1px solid #E6E6E6; }
.ec-historyRole .ec-historyRole__status {
  font-size: 21px;
  line-height: 160%;
  letter-spacing: 0.1em;
  color: #000000;
  margin-bottom: 16px;
  font-weight: 600; }
.ec-historyRole .ec-historyRole__spwrapper {
  display: flex; }
.ec-historyRole .ec-historyRole__total {
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0.05em;
  color: #000000;
  margin-bottom: 16px; }
.ec-historyRole .ec-historyRole__totalsum {
  font-size: 21px;
  line-height: 31px;
  letter-spacing: 0.05em;
  color: #000000;
  margin-left: 8px;
  font-weight: 600; }
.ec-historyRole .ec-historyRole__totalyen {
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.05em;
  color: #000000; }
.ec-historyRole .ec-historyRole__again {
  margin: 0 0 0 auto; }
.ec-historyRole .ec-historyRole__again .ec-blockBtn--cancel {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.02em;
    font-weight: normal;
    border: 1px solid #000000;
    width: 104px;
    height: 32px; }
.ec-history__btn {
  width: 250px;
  height: 60px; }
/*
注文履歴一覧 規格

マイページ 注文履歴内アイテムの規格を定義します。

ex [マイページ　注文履歴一覧](http://demo3.ec-cube.net/mypage)
(要ログイン)

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

Styleguide 16.1.1
*/
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption {
  display: inline-block;
  margin-bottom: 8px;
  margin-right: .5rem;
  font-size: 1.6rem; }
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
  display: inline-block;
  padding-left: .5rem;
  content: "/";
  font-weight: bold; }
/*
注文履歴一覧ヘッダ

注文履歴一覧で使用するヘッダのコンポーネントを定義します。

ex [マイページ　注文履歴一覧ヘッダ](http://demo3.ec-cube.net/mypage)
(要ログイン)

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

Styleguide 16.1.2
*/
.ec-historyListHeader {
  background-color: #F0EFEA;
  padding: 12px 16px; }
.ec-historyListHeader .ec-historyListHeader__date {
    color: #000;
    font-weight: normal;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.1em;
    margin-bottom: 12px; }
.ec-historyListHeader .ec-historyListHeader__date span {
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.02em;
      color: #818181;
      margin-right: 8px; }
.ec-historyListHeader .ec-historyListHeader__action {
    margin: 16px 0; }
.ec-historyListHeader .ec-historyListHeader__action a {
      font-size: 12px;
      font-weight: normal; }
.ec-historyListHeader .ec-historyListHeader__detail {
    display: flex; }
.ec-historyListHeader .ec-historyListHeader__detail a {
      font-size: 13px;
      line-height: 24px;
      letter-spacing: 0.02em;
      -webkit-text-decoration-line: underline;
              text-decoration-line: underline;
      color: #818181;
      margin-left: auto; }
.ec-historyListHeader .ec-historyListHeader__detail dl {
      margin: 0; }
.ec-historyListHeader .ec-historyListHeader__detail dt, .ec-historyListHeader .ec-historyListHeader__detail dd {
      display: inline-block;
      margin: 0;
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.02em;
      font-weight: normal; }
.ec-historyListHeader .ec-historyListHeader__detail dt {
      color: #818181; }
.ec-historyListHeader .ec-historyListHeader__detail dd {
      color: #000; }
/*
注文履歴一覧ページャー
*/
#page_mypage ul.ec-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 20px; }
#page_mypage ul.ec-pager li {
    border: 1px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    height: 29px;
    width: 29px;
    margin-left: 15px; }
#page_mypage ul.ec-pager li a {
      padding: 0; }
#page_mypage ul.ec-pager li.ec-pager__item__back {
    margin-left: 0; }
#page_mypage ul.ec-pager li.ec-pager__item__back,
  #page_mypage ul.ec-pager li.ec-pager__item__next {
    border: 1px solid #383838;
    border-radius: 20px;
    height: 40px;
    width: 132px; }
#page_mypage ul.ec-pager li.ec-pager__item__back a,
    #page_mypage ul.ec-pager li.ec-pager__item__next a {
      font-weight: 600;
      font-size: 13px;
      height: 40px;
      width: 100%;
      line-height: 40px; }
#page_mypage ul.ec-pager .ec-pager__item--active {
    background-color: #f7f7f7; }
#page_mypage .toOtherPages {
  margin-top: 46px; }
#page_mypage .toOtherPages .ec-blockBtn--primary {
    border-color: #000; }
#page_mypage .toOtherPages a.ec-blockBtn--primary:nth-child(2) {
    margin-top: 25px; }
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
注文履歴詳細

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　注文詳細](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 16.2
*/
/*
注文履歴詳細 メール履歴

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　メール履歴](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 16.2.5
*/
.ec-orderMails .ec-orderMails__item {
  padding-bottom: 10px;
  border-bottom: 1px solid #E6E6E6; }
.ec-orderMails .ec-orderMails__time {
  margin: 0; }
.ec-orderMails .ec-orderMails__body {
  display: none; }
/*
注文履歴詳細 メール履歴個別

マイページ 注文履歴詳細部に関する Project コンポーネントを定義します。

ex [マイページ　メール履歴個別](http://demo3.ec-cube.net/mypage)
(要ログイン → 詳細を見るボタン押下)

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

Styleguide 16.2.6
*/
.ec-orderMail {
  padding-bottom: 10px;
  border-bottom: 1px solid #E6E6E6;
  margin-bottom: 16px; }
.ec-orderMail .ec-orderMail__time {
    margin: 0; }
.ec-orderMail .ec-orderMail__body {
    display: none; }
.ec-orderMail .ec-orderMail__time {
    margin-bottom: 4px; }
.ec-orderMail .ec-orderMail__link {
    margin-bottom: 4px; }
.ec-orderMail .ec-orderMail__link a {
      color: #0092C4;
      text-decoration: none;
      cursor: pointer; }
.ec-orderMail .ec-orderMail__link a:hover {
      color: #33A8D0; }
.ec-orderMail .ec-orderMail__close a {
    color: #0092C4;
    text-decoration: none;
    cursor: pointer; }
.ec-orderMail .ec-orderMail__close a:hover {
    color: #33A8D0; }
/*
住所一覧

カート 注文詳細 に関する Project コンポーネントを定義します。

ex [マイページ内 お届け先編集](http://demo3.ec-cube.net/mypage/delivery)

Markup:
include /assets/tmpl/elements/17.1.address.pug
+ec-addressList
+ec-addressRole

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

Styleguide 17.1

*/
.ec-addressRole .ec-addressRole__actions {
  margin-top: 40px;
  padding-bottom: 20px; }
.ec-addressRole .ec-addressRole__actions .ec-blockBtn--action:hover, .ec-addressRole .ec-addressRole__actions .ec-blockBtn--action:active, .ec-addressRole .ec-addressRole__actions .ec-blockBtn--action:focus {
    background-color: #FCEFA4;
    border-color: #FCEFA4; }
.ec-addressList .ec-addressList__item {
  display: table;
  width: 100%;
  position: relative; }
.ec-addressList .ec-addressList__remove {
  vertical-align: middle;
  padding: 16px;
  text-align: center; }
.ec-addressList .ec-addressList__remove .ec-icon img {
    width: 1em;
    height: 1em; }
.ec-addressList .ec-addressList__address {
  display: table-cell;
  vertical-align: middle;
  padding: 16px;
  margin-right: 4em;
  width: 80%; }
.ec-addressList .ec-addressList__action {
  position: relative;
  vertical-align: middle;
  text-align: right;
  top: 27px;
  padding-right: 10px; }
/*宛先変更*/
#page_shopping_shipping .ec-role {
  margin: 40px auto 24px; }
#page_shopping_shipping .ec-registerRole h2 {
  font-size: 21px;
  font-weight: 600; }
#page_shopping_shipping .ec-registerRole__actions .ec-blockBtn {
  margin-top: 24px;
  border: 2px solid #000;
  height: 56px;
  width: 220px; }
#page_shopping_shipping .ec-registerRole .ec-blockBtn--action {
  margin-top: 24px; }
#page_shopping_shipping .ec-addressList {
  border-top: 1px solid #E6E6E6; }
#page_shopping_shipping .ec-addressList__item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E6E6E6;
    padding: 16px 16px 16px 26px; }
#page_shopping_shipping .ec-addressList__remove {
    padding: 0;
    position: relative;
    height: 20px;
    width: 20px; }
#page_shopping_shipping .ec-addressList__remove input[type="radio"] {
      opacity: 0;
      width: 20px;
      height: 20px;
      position: relative;
      z-index: 10; }
#page_shopping_shipping .ec-addressList__remove label {
      margin-left: 20px; }
#page_shopping_shipping .ec-addressList__remove::before {
      position: absolute;
      content: "";
      top: 50%;
      transform: translateY(-50%);
      background: #fff;
      border: 2px solid #666666;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      display: block; }
#page_shopping_shipping .ec-addressList__remove input[type="radio"]:checked + label::after {
      position: absolute;
      content: "";
      top: 50%;
      left: 5px;
      transform: translateY(-50%);
      background: #666666;
      border-radius: 50%;
      width: 10px;
      height: 10px;
      display: block; }
#page_shopping_shipping .ec-addressList__address {
    padding: 0;
    width: auto;
    padding-left: 40px;
    margin-right: 0; }
#page_shopping_shipping .ec-addressList__address__name {
      font-size: 17px; }
#page_shopping_shipping .ec-addressList__address__name span {
        color: #000;
        font-size: 14px; }
#page_shopping_shipping .ec-addressList__address__address {
      margin-top: 4px; }
#page_shopping_shipping_edit .ec-RegisterRole__actions {
  margin-top: 40px; }
#page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--action {
    font-size: 16px;
    font-weight: 600; }
#page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--cancel {
    height: 56px;
    width: 220px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 24px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
パスワードリセット

カート 注文詳細 に関する Project コンポーネントを定義します。

ex [パスワードリセット画面](http://demo3.ec-cube.net/forgot)

(カート内に商品がある状態でアクセス)

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

Styleguide 18.1

*/
.ec-forgotRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 38px; }
.ec-forgotRole:after {
    content: " ";
    display: table; }
.ec-forgotRole:after {
    clear: both; }
.ec-forgotRole .ec-forgotRole__intro {
    opacity: 0.6; }
.ec-forgotRole .ec-forgotRole__outro {
    font-size: 12px;
    opacity: 0.6; }
.ec-forgotRole .ec-borderedDefs {
    border: none;
    margin-top: 0; }
.ec-forgotRole .ec-borderedDefs dl {
      display: block;
      border: none;
      padding: 0; }
.ec-forgotRole .ec-borderedDefs dl dt {
        padding: 0;
        width: 100%; }
.ec-forgotRole .ec-borderedDefs dl dd {
        padding: 0;
        width: 100%; }
.ec-forgotRole .ec-borderedDefs .error input {
      border: 2px solid #E60012; }
.ec-forgotRole .ec-borderedDefs .ec-para-normal {
      margin: 0; }
.ec-forgotRole .ec-borderedDefs .ec-label {
      font-size: 12px;
      color: #000;
      font-weight: normal;
      margin-bottom: 4px; }
.ec-forgotRole .ec-borderedDefs .ec-required {
      display: none; }
.ec-forgotRole .ec-borderedDefs .ec-para-normal {
      margin-bottom: 0; }
.ec-forgotRole .ec-borderedDefs .ec-blockBtn--action {
      margin-top: 20px; }
.ec-forgotRole .ec-blockBtn--action:hover, .ec-forgotRole .ec-blockBtn--action:active, .ec-forgotRole .ec-blockBtn--action:focus {
    background-color: #FCEFA4;
    border-color: #FCEFA4; }
.ec-forgetCompleteRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 38px; }
.ec-forgetCompleteRole:after {
    content: " ";
    display: table; }
.ec-forgetCompleteRole:after {
    clear: both; }
.ec-forgetCompleteRole .ec-reportHeading {
    margin-top: 24px; }
.ec-forgetCompleteRole h2 {
    line-height: 1.6;
    text-align: left;
    padding: 0; }
.ec-forgetCompleteRole .ec-reportDescription {
    font-size: 14px;
    opacity: 0.6;
    margin-top: 16px;
    margin-bottom: 0;
    text-align: left; }
.ec-forgetCompleteRole .ec-reportDescription span {
      font-size: 12px;
      color: #000; }
.ec-forgetCompleteRole .ec-alert-warning__hato {
    display: flex;
    justify-content: center;
    margin-top: 44px; }
.ec-forgetCompleteRole .ec-alert-warning__hato img {
      width: 154px;
      height: 146px; }
.ec-forgetResetRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 38px;
  padding: 0; }
.ec-forgetResetRole:after {
    content: " ";
    display: table; }
.ec-forgetResetRole:after {
    clear: both; }
.ec-forgetResetRole .ec-reportDescription {
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    text-align: left;
    margin-bottom: 24px; }
.ec-forgetResetRole .ec-input input, .ec-forgetResetRole .ec-halfInput input, .ec-forgetResetRole .ec-numberInput input, .ec-forgetResetRole .ec-zipInput input, .ec-forgetResetRole .ec-telInput input, .ec-forgetResetRole .ec-select input, .ec-forgetResetRole .ec-birth input, .ec-forgetResetRole #page_guide_shipping_tel .ec-select input, #page_guide_shipping_tel .ec-forgetResetRole .ec-select input {
    margin-bottom: 0; }
.ec-forgetResetRole dl {
    margin-bottom: 16px; }
.ec-forgetResetRole dl .ec-reportDescription {
      margin-top: 4px;
      margin-bottom: 0; }
.ec-forgetResetRole dl .ec-reportDescription span {
        color: #000;
        opacity: 0.6;
        font-size: 12px; }
.ec-forgetResetRole .ec-required {
    display: none; }
.ec-forgetResetRole .ec-login__eyeicon {
    margin-top: -38px; }
.ec-forgetResetRole form .ec-registerRole__actions {
    padding-top: 0;
    margin-top: 40px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
会員登録

新規会員登録 に関する Project コンポーネントを定義します。

ex [新規会員登録画面　会員登録](http://demo3.ec-cube.net/entry)

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

Styleguide 19.1

*/
.ec-registerRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-registerRole:after {
    content: " ";
    display: table; }
.ec-registerRole:after {
    clear: both; }
.ec-registerRole .ec-registerRole__actions {
    margin-top: 40px;
    margin-bottom: 24px;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.05em; }
.ec-registerRole .ec-registerRole__actions .ec-link__outside {
      -webkit-text-decoration-line: underline;
              text-decoration-line: underline;
      color: rgba(0, 0, 0, 0.6); }
.ec-registerRole .ec-registerRole__actions .ec-link__outside::after {
        content: '';
        display: inline-block;
        background-image: url(../img/icon/ic_link_outside.svg);
        width: 12px;
        height: 12px;
        background-size: contain;
        margin-left: 4px;
        margin-right: 4px; }
.ec-registerRole .ec-registerRole__actions p {
      color: #000; }
.ec-registerRole .ec-blockBtn--action {
    margin-top: 32px; }
.ec-registerRole .ec-blockBtn--action:hover, .ec-registerRole .ec-blockBtn--action:focus, .ec-registerRole .ec-blockBtn--action:active {
      background-color: #fcefa4;
      border-color: #fcefa4; }
.ec-registerRole .ec-back {
    background-color: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    padding: 0;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    font-size: 14px;
    line-height: 21px;
    -webkit-text-decoration-line: underline;
            text-decoration-line: underline;
    color: #818181; }
.ec-registerRole .ec-back::before {
      content: '';
      display: inline-block;
      background-image: url(../img/icon/ic_arrow_back.svg);
      width: 6px;
      height: 12px;
      padding-right: 15px;
      background-size: contain; }
.ec-registerRole__hato {
    width: 154px;
    height: 110px;
    margin: 32px auto 64px; }
.ec-registerRole__shopping {
    margin-top: 59px; }
.ec-registerRole__notentered {
    font-size: 16px;
    line-height: 21px;
    color: #818181; }
.ec-registerCompleteRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 40px; }
.ec-registerCompleteRole:after {
    content: " ";
    display: table; }
.ec-registerCompleteRole:after {
    clear: both; }
.ec-Registered .ec-blockBtn--action {
  margin-top: 24px;
  width: 240px;
  height: 48px; }
.ec-Registered .ec-blockBtn--cancel {
  margin-top: 48px; }
.ec-activateBtn .ec-blockBtn--cancel {
  width: 250px;
  height: 60px; }
.ec-activateBtn__2nd {
  margin-top: 24px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お問い合わせ

お問い合わせ に関する Project コンポーネントを定義します。

ex [お問い合わせ](http://demo3.ec-cube.net/contact)

Markup:
include /assets/tmpl/elements/19.2.contact.pug
+ec-contactRole

Styleguide 19.2

*/
#page_contact_complete .ec-contactCompleteRole {
  margin-top: 24px; }
.ec-contactRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-contactRole:after {
    content: " ";
    display: table; }
.ec-contactRole:after {
    clear: both; }
.ec-contactRole .ec-RegisterRole__actions {
    margin-top: 48px; }
.ec-contactConfirmRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-contactConfirmRole:after {
    content: " ";
    display: table; }
.ec-contactConfirmRole:after {
    clear: both; }
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px; }
.ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px; }
.ec-contactCompleteRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-contactCompleteRole:after {
    content: " ";
    display: table; }
.ec-contactCompleteRole:after {
    clear: both; }
.ec-contactCompleteRole .h2_s img {
    width: 100%;
    height: auto; }
.ec-contactCompleteRole__title {
    padding: 0;
    font-weight: 600;
    font-size: 21px;
    line-height: 160%;
    letter-spacing: 0.1em;
    color: #000000; }
.ec-contactCompleteRole .ec-reportDescription {
    margin-top: 48px;
    margin-bottom: 64px; }
.ec-contactCompleteRole .ec-blockBtn--cancel {
    width: 250px;
    height: 60px;
    font-weight: 600;
    font-size: 16px;
    line-height: 36px;
    letter-spacing: 0.05em;
    color: #000000;
    border: 1.5px solid #000000; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
お客様情報の入力

ログインせずゲストとして商品を購入する際の、お客様情報の入力 に関する Project コンポーネントを定義します。

ex [カートSTEP2 お客様情報の入力(ゲスト購入)](http://demo3.ec-cube.net/shopping/nonmember)

Markup:
include /assets/tmpl/elements/19.3.customer.pug
+ec-customerRole
hoge

Styleguide 19.3

*/
.ec-customerRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-customerRole:after {
    content: " ";
    display: table; }
.ec-customerRole:after {
    clear: both; }
.ec-customerRole .ec-customerRole__actions {
    padding-top: 20px; }
.ec-customerRole .ec-blockBtn--action {
    margin-bottom: 10px; }
.ec-customerRole .ec-blockBtn--action:hover, .ec-customerRole .ec-blockBtn--action:active, .ec-customerRole .ec-blockBtn--action:focus {
      background-color: #FCEFA4;
      border-color: #FCEFA4; }
.ec-contactConfirmRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-contactConfirmRole:after {
    content: " ";
    display: table; }
.ec-contactConfirmRole:after {
    clear: both; }
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
    padding-top: 20px; }
.ec-contactConfirmRole .ec-blockBtn--action {
    margin-bottom: 16px; }
.ec-contactCompleteRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px; }
.ec-contactCompleteRole:after {
    content: " ";
    display: table; }
.ec-contactCompleteRole:after {
    clear: both; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
@keyframes fadeIn {
  0% {
    opacity: 0;
    visibility: hidden; }
  100% {
    opacity: 1;
    visibility: visible; } }
@keyframes fadeOut {
  0% {
    opacity: 1;
    visibility: visible; }
  100% {
    opacity: 0;
    visibility: hidden; } }
.bg-load-overlay {
  background: rgba(255, 255, 255, 0.4);
  box-sizing: border-box;
  position: fixed;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-around;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483647;
  opacity: 1; }
/*
404ページ

404 エラー画面で使用するページコンポーネントです。

ex [404エラー画面](http://demo3.ec-cube.net/404)

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

Styleguide 20.1

*/
.ec-404Role {
  margin: 41px 0;
  background-color: #fff; }
.ec-404Role__top {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 18px;
    margin-bottom: 62px; }
.ec-404Role__top__hato {
      height: 154px;
      width: 192px; }
.ec-404Role__top__message {
      background-color: #ffefa4;
      border-radius: 60px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 45px;
      height: 230px;
      width: 100%; }
.ec-404Role__top__message::before {
        content: "";
        background-image: url(../img//404/hukidashi_haji_sp.png);
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        height: 25px;
        width: 22px; }
.ec-404Role__top__message h1 {
        margin-bottom: 30px; }
.ec-404Role__top__message h1 img {
          height: 60px;
          width: 214px; }
.ec-404Role__top__message p {
        font-size: 14px;
        text-align: center;
        padding: 0 40px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
退会手続き

退会手続きで使用するページコンポーネントです。

ex [退会手続き](http://demo3.ec-cube.net/mypage/withdraw)

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

Styleguide 21.1

*/
.ec-withdrawRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left;
  width: 100%;
  margin-top: 41px; }
.ec-withdrawRole:after {
    content: " ";
    display: table; }
.ec-withdrawRole:after {
    clear: both; }
.ec-withdrawRole h2 {
    font-weight: 600;
    font-size: 22px;
    line-height: 160%;
    letter-spacing: 0.05em;
    padding: 0; }
.ec-withdrawRole .ec-withdrawRole__title {
    font-size: 22px;
    line-height: 160%;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    font-weight: 600; }
.ec-withdrawRole .ec-withdrawRole__description {
    margin-top: 16px;
    margin-bottom: 40px;
    font-size: 16px;
    font-size: 14px;
    line-height: 180%;
    letter-spacing: 0.05em; }
.ec-withdrawRole .ec-icon {
    text-align: center;
    margin-bottom: 64px; }
.ec-withdrawRole .ec-icon img {
      width: 187.89px;
      height: 146.82px;
      max-width: initial;
      max-height: initial; }
.ec-withdrawRole .ec-blockBtn--action {
    width: 240px;
    height: 56px; }
.ec-withdrawRole .ec-blockBtn--action:hover, .ec-withdrawRole .ec-blockBtn--action:active, .ec-withdrawRole .ec-blockBtn--action:focus {
      background-color: #FCEFA4;
      border-color: #FCEFA4; }
.ec-withdrawRole .ec-withdrawConfirmAction {
    margin-bottom: 24px; }
.ec-withdrawRole .ec-withdrawConfirmRole__action {
    width: 250px;
    height: 60px; }
.ec-withdrawRole .ec-withdrawConfirmRole__cancel {
    width: 220px;
    height: 56px;
    border: 1.5px solid #000000; }
.ec-withdrawRole .ec-withdrawComplete {
    width: 250px;
    height: 60px; }
.ec-withdrawRole__titlePc {
    display: none; }
.ec-withdrawRole__titleSp {
    display: block; }
/*
退会手続き実行確認

退会手続き実行確認で使用するページコンポーネントです。

ex [退会手続き　退会手続きへボタン→押下](http://demo3.ec-cube.net/mypage/withdraw)

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

Styleguide 21.1.2

*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
  margin-bottom: 20px; }
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 24px;
  line-height: 180%;
  letter-spacing: 0.05em; }
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
  margin-bottom: 32px;
  font-size: 16px; }
.ec-withdrawConfirmRole .ec-icon img {
  width: 100px;
  height: 100px; }
.ec-withdrawRoleComplete__title {
  margin-bottom: 25px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*
会員情報編集完了

会員情報編集完了で使用するページコンポーネントです。

ex [会員情報編集完了](http://demo3.ec-cube.net/mypage/change_complete)

Markup:
include /assets/tmpl/elements/22.1.editComplete.pug
+ec-userEditCompleteRole

Styleguide 22.1

*/
.ec-userEditCompleteRole {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  padding: 0 16px; }
.ec-userEditCompleteRole:after {
    content: " ";
    display: table; }
.ec-userEditCompleteRole:after {
    clear: both; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    margin-bottom: 16px;
    font-weight: bold;
    font-size: 24px; }
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
    margin-bottom: 32px;
    font-size: 16px; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/*

店舗ページ
/shop
/shop/okiishi
/shop/tobira
/shop/hatokoji

*/
#page_shop_okiishi .ec-layoutRole__header,
#page_shop_tobira .ec-layoutRole__header,
#page_shop_hatokoji .ec-layoutRole__header {
  background: #FDE260; }
#page_shop_okiishi .ec-layoutRole__contents,
#page_shop_tobira .ec-layoutRole__contents,
#page_shop_hatokoji .ec-layoutRole__contents {
  padding-top: 54px;
  max-width: initial; }
#page_shop_okiishi .ec-layoutRole__footer,
#page_shop_tobira .ec-layoutRole__footer,
#page_shop_hatokoji .ec-layoutRole__footer {
  margin-top: 0; }
#page_shop_okiishi .ec-layoutRole__mainBottom,
#page_shop_tobira .ec-layoutRole__mainBottom,
#page_shop_hatokoji .ec-layoutRole__mainBottom {
  height: 0; }
#page_shop_okiishi .ec-shop__hero {
  position: relative;
  background-image: url("../img/shop/kv_okiishi_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 499px; }
#page_shop_okiishi .ec-shop__hero .ec-shop__logo img {
    height: 190px;
    width: 343px; }
#page_shop_okiishi .ec-shop__messageTitleText {
  padding: 0 20px 20px;
  text-align: center;
  line-height: 2.2; }
#page_shop_okiishi .ec-shop__messageText {
  padding: 0 20px;
  text-align: left;
  line-height: 2.2; }
#page_shop_okiishi .ec-shop__messageLink {
  margin-top: 33px; }
#page_shop_okiishi .ec-shop__messageLink .ec-blockBtn--cancel {
    background-color: rgba(255, 255, 255, 0); }
#page_shop_okiishi .ec-shop__messageLink .ec-blockBtn--cancel:hover {
      background-color: #e6e6e6; }
#page_shop_okiishi .ec-shop__messageLink .ec-blockBtn--cancel .btnimg {
      height: 14px;
      width: 148px; }
#page_shop_tobira .ec-shop__hero {
  position: relative;
  background-image: url("../img/shop/kv_tobira_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 499px;
  background-position-y: -125px; }
#page_shop_tobira .ec-shop__hero .ec-shop__logo img {
    height: 121px;
    width: 255px; }
#page_shop_tobira .ec-shop__messageText {
  padding: 0 20px;
  text-align: left;
  line-height: 2.2; }
#page_shop_hatokoji .ec-shop__hero {
  position: relative;
  background-image: url("../img/shop/kv_hatokoji_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 499px;
  background-position-y: -56px; }
#page_shop_hatokoji .ec-shop__hero img {
    height: 137px;
    width: 342px; }
#page_shop_hatokoji .ec-shop__logo {
  top: 37%;
  left: 46%;
  width: 342px; }
#page_shop_hatokoji .ec-shop__messageText {
  padding: 0 20px;
  text-align: left;
  line-height: 2.2; }
.ec-shop__logo {
  position: absolute;
  position: absolute;
  top: 47%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }
.ec-shop__message {
  background: #f7f7f7;
  padding-top: 24px;
  padding-bottom: 75px;
  text-align: center; }
.ec-shop__message .ec-shop__messageLogo {
    margin-bottom: 38px;
    line-height: 0; }
.ec-shop__message .ec-shop__messageLogo img {
      width: 58px;
      height: 58px; }
.ec-shop__inside {
  position: relative; }
.ec-shop__inside .ec-shop__insideDtail .ec-shop__insideDtail__description {
    line-height: 2.2; }
.ec-shop__inside .ec-shop__insideDtail__image {
    z-index: 2; }
.ec-shop__inside .ec-shop__insideDtail__image img {
      vertical-align: bottom; }
.ec-shop__inside .ec-shop__insideDtail__text {
    padding: 23px 20px 40px 20px; }
.ec-shop__inside .ec-shop__insideDtail__title {
    display: table;
    vertical-align: bottom; }
.ec-shop__inside .ec-shop__insideDtail__title img {
      height: 20px;
      width: auto; }
.ec-shop__inside .ec-shop__insideDtail__title .ec-shop__insideDtail__floor {
      margin-right: 25px;
      height: 18px; }
.ec-shop__inside .ec-shop__inside__line {
    border-top: 2.75px solid #000;
    margin: 15px calc(50% - 50vw) 8px 0;
    z-index: 1; }
.ec-shop__open {
  background: #f7f7f7;
  padding: 17px 13px 22px 16px;
  width: 308px;
  margin: 21px auto 0;
  color: #555555;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px; }
.ec-shop__open .__openday th {
    padding-bottom: 4px; }
.ec-shop__open .__openday .__lastorder {
    text-align: left;
    padding-right: 9px; }
.ec-shop__open .__offday th {
    padding-top: 12px; }
.ec-shop__open th {
    width: 23%; }
.ec-shop__open td {
    width: 27%; }
.ec-shop__open td:last-child {
    width: 30%; }
.ec-shop__open tr:last-child th {
    padding-bottom: 0; }
.ec-shop__open img {
    height: 63px;
    width: auto; }
.ec-shop__month .ec-shop__month__title {
  text-align: center;
  padding: 29px 0 20px; }
.ec-shop__month .ec-shop__month__title img {
    height: 18px;
    width: auto; }
.ec-shop__month .ec-shop__month__detail {
  background: #f7f7f7;
  padding: 20px; }
.ec-shop__month .ec-shop__month__detail .ec-shop__month__image {
    text-align: center; }
.ec-shop__month .ec-shop__month__detail .ec-shop__month__image img {
      height: 250px;
      width: auto; }
.ec-shop__month .ec-shop__month__description {
  margin-top: 20px; }
.ec-shop__month .ec-shop__month__name {
  margin-bottom: 10px; }
.ec-shop__month .ec-shop__month__name strong {
    font-size: 20px;
    font-weight: 600; }
.ec-shop__month .ec-shop__month__price {
  margin-top: 40px;
  font-size: 16px;
  letter-spacing: 1px; }
.ec-shop__month span {
  font-size: 12px;
  color: #818181;
  letter-spacing: 1px; }
.ec-shop__month .ec-shop__month__text {
  font-size: 13px;
  line-height: 1.8;
  font-weight: 400; }
.ec-shop__classic {
  padding: 30px 6px; }
.ec-shop__classic .ec-shop__limited__title {
    text-align: center;
    margin: 0 auto 30px;
    width: 92px; }
.ec-shop__classic .ec-shop__classic__title {
    text-align: center;
    margin: 0 auto 30px;
    width: 115px; }
.ec-shop__classic .ec-shop__classic__detail {
    display: flex;
    flex-wrap: wrap; }
.ec-shop__classic .ec-shop__classic__card {
    position: relative;
    background: #f7f7f7;
    padding: 9px 9px 11px 9px;
    margin-bottom: 7px;
    width: calc((100% - 7px) / 2); }
.ec-shop__classic .ec-shop__classic__card:nth-child(odd) {
      margin-right: 7px; }
.ec-shop__classic .ec-shop__classic__card__detail {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 50px; }
.ec-shop__classic .ec-shop__classic__image {
    line-height: 0;
    width: 109px;
    margin: 0 auto 13px; }
.ec-shop__classic .ec-shop__classic__image img {
      aspect-ratio: 195 / 283;
      -o-object-fit: cover;
         object-fit: cover; }
.ec-shop__classic .ec-shop__classic__name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px; }
.ec-shop__classic .ec-shop__classic__name span {
      color: #3b3b3b;
      display: block;
      font-size: 10px;
      font-weight: normal;
      margin-top: -4px; }
.ec-shop__classic .ec-shop__classic__price {
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 11px; }
.ec-shop__classic .ec-shop__more {
    display: none; }
.ec-shop__classic .js-shop-more {
    margin-top: 30px; }
.ec-shop__classic .js-shop-more .ec-blockBtn--cancel {
      width: 230px;
      height: 45px; }
.ec-shop__classic .js-shop-more .ec-blockBtn--cancel img {
        height: 12px;
        width: 68px; }
.ec-shop__map {
  background: #f7f7f7;
  padding-top: 17px;
  padding-bottom: 40px; }
.ec-shop__map .__sp .ec-shop__mapDetail {
    box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    background: #fff;
    padding: 15px;
    margin: -50px 40px 0 40px; }
.ec-shop__map .__sp .map-image {
    margin-bottom: 32px; }
.ec-shop__map .__sp .map-title {
    margin-bottom: 32px; }
.ec-shop__map .__sp .map-title h3 {
      font-size: 18px;
      font-weight: 600; }
.ec-shop__map .__sp .map-table {
    font-size: 11px;
    line-height: 2.1;
    letter-spacing: 0.1em;
    margin-bottom: 24px; }
.ec-shop__map .__sp .map-table dl {
      display: flex;
      flex-wrap: wrap; }
.ec-shop__map .__sp .map-table dl dt {
        width: 23%; }
.ec-shop__map .__sp .map-table dl dd {
        width: 77%; }
.ec-shop__map .__sp .map-googlemap {
    position: relative;
    width: 100%;
    padding-top: 33%; }
.ec-shop__map .__sp .map-googlemap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
.ec-shop__map .__pc {
    max-width: 983px;
    margin: 0 auto; }
.ec-shop__map .__pc .ec-shop__mapImage img {
      height: 577px;
      width: auto; }
.ec-shop__map .__pc .ec-shop__mapDetail {
      box-shadow: 0 0 35px 0 rgba(0, 0, 0, 0.2);
      position: absolute;
      right: 15%;
      top: 85px;
      width: 385px;
      background: #fff;
      padding: 15px; }
.ec-shop__map .__pc .ec-shop__mapDetail::before {
        content: "";
        position: absolute;
        top: 53%;
        left: -100px;
        border: 12px solid transparent;
        border-right: 95px solid #fff;
        transform: rotate(10deg); }
.ec-shop__map .__pc .map-image {
      margin-bottom: 32px; }
.ec-shop__map .__pc .map-title {
      margin-bottom: 32px; }
.ec-shop__map .__pc .map-table {
      font-size: 13px;
      line-height: 1.8;
      letter-spacing: 0.1em;
      margin-bottom: 24px; }
.ec-shop__map .__pc .map-table dl {
        display: flex;
        flex-wrap: wrap; }
.ec-shop__map .__pc .map-table dl dt {
          width: 23%; }
.ec-shop__map .__pc .map-table dl dd {
          width: 77%; }
.ec-shop__map .__pc .map-googlemap {
      position: relative;
      width: 100%;
      padding-top: 33%; }
.ec-shop__map .__pc .map-googlemap iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; }
.ec-shop__btn {
  background: #f7f7f7;
  padding-bottom: 63px; }
.ec-shop__btn .ec-blockBtn--cancel {
    background-color: transparent; }
.ec-shop__btn .ec-blockBtn--cancel:first-of-type {
      margin-bottom: 14px; }
.ec-shop__btn .ec-blockBtn--cancel:hover, .ec-shop__btn .ec-blockBtn--cancel:active, .ec-shop__btn .ec-blockBtn--cancel:focus {
      background-color: rgba(0, 0, 0, 0.05); }
.ec-shop__btn .btnimg.toShop {
    height: 14px; }
.ec-shop__btn.ec-shop__btn-items {
  padding: 0 0 50px;
  background: #fff; }
/* 鳩の演出周り */
.ec-hatoAnimation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
  pointer-events: none; }
/*
 * 命名はjs/hato/CONST.jsの中のRANDOM_TEXTS/REMIND_TEXTSのchoice.actionNameをもとに入る
 * `.ec-${choice.actionName}Animation`
*/
/* 時報（鳩時計） */
.ec-timeSignalAnimation {
  height: 100%;
  background: rgba(253, 226, 96, 0.85);
  display: none; }
.ec-timeSignalAnimation__content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -469px -400px;
    background: url(../img/hato/time-signal-bg.png) no-repeat center center;
    background-size: 800px;
    width: 800px;
    height: 960px;
    transform-origin: center; }
.ec-timeSignalAnimation__bird {
    position: absolute;
    overflow: hidden;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-105px, -260px);
    margin: auto;
    width: 210px;
    height: 221px;
    transform-origin: top left; }
.ec-timeSignalAnimation__birdAnim {
      position: relative;
      display: block;
      width: 210px;
      height: 221px;
      background: url(../img/hato/time-signal-bird.gif);
      background-size: 100%; }
.ec-timeSignalAnimation__bird:before {
      content: "";
      position: absolute;
      top: 10%;
      height: 100%;
      width: 100%;
      display: block;
      transform: rotate(45deg);
      background: #fff;
      -webkit-animation: time-signal-hato-bg 4s linear 1s both;
              animation: time-signal-hato-bg 4s linear 1s both; }
.ec-timeSignalAnimation__hourHand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 120px;
    transform-origin: center bottom;
    background: #000;
    border-radius: 6px;
    margin: 91px 0 0 -8px; }
.ec-timeSignalAnimation__minitHand {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 150px;
    transform-origin: center bottom;
    background: #000;
    border-radius: 6px;
    margin: 63px 0 0 -8px; }
.ec-timeSignalAnimation__axis {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    transform: translate(-12px, 199px);
    background: #000;
    border-radius: 100%; }
@-webkit-keyframes time-signal-hato {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0); } }
@keyframes time-signal-hato {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(-100%, 0); } }
@-webkit-keyframes time-signal-hato-bg {
  0% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0; } }
@keyframes time-signal-hato-bg {
  0% {
    opacity: 1; }
  99% {
    opacity: 1; }
  100% {
    opacity: 0; } }
/* 鎌倉花火大会 */
.ec-kamakuraHanabiAnimation {
  height: 100%;
  background: rgba(20, 20, 20, 0.85);
  display: none; }
.ec-kamakuraHanabiAnimation__youtube {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 960px;
    transform-origin: center;
    pointer-events: auto; }
.ec-kamakuraHanabiAnimation__youtube.__pc {
      margin: -246px -400px;
      display: none; }
.ec-kamakuraHanabiAnimation__youtube.__sp {
      margin: -74px -194px;
      display: block; }
.ec-kamakuraHanabiAnimation__close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    pointer-events: auto;
    cursor: pointer; }
/* 花火*/
.ec-fireworksAnimation {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  transform-origin: center;
  transition: 1s; }
.ec-fireworksAnimation--pc {
  width: 100vw;
  transform: scale(1.3); }
.ec-fireworksAnimation--sp {
  transform: scale(1.7); }
/* バク転 */
.js-backflip-animation {
  display: block;
  transform-origin: center; }
.js-backflip-animation--run {
  -webkit-animation: 2.5s cubic-bezier(0.5, -0.41, 1, 1) 1s backflip forwards;
          animation: 2.5s cubic-bezier(0.5, -0.41, 1, 1) 1s backflip forwards; }
@-webkit-keyframes backflip {
  0% {
    margin: 0; }
  10% {
    margin: 10% 0 0;
    transform: rotate(0deg); }
  60% {
    margin: -70% 0 0 10%;
    transform: rotate(360deg); }
  90% {
    margin: 10% 0 0 0;
    transform: rotate(350deg); }
  100% {
    margin: 0;
    transform: rotate(360deg); } }
@keyframes backflip {
  0% {
    margin: 0; }
  10% {
    margin: 10% 0 0;
    transform: rotate(0deg); }
  60% {
    margin: -70% 0 0 10%;
    transform: rotate(360deg); }
  90% {
    margin: 10% 0 0 0;
    transform: rotate(350deg); }
  100% {
    margin: 0;
    transform: rotate(360deg); } }
/* 鳩の民間人 */
.ec-hatoFriendsAnimation {
  position: fixed;
  bottom: 56px;
  left: 0;
  width: 100%;
  display: none; }
.ec-hatoFriendsAnimation > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px; }
.ec-hatoFriendsAnimation--step1 * {
    -webkit-animation: jump-in 1s cubic-bezier(0.63, 0.01, 0.87, 1) 1s both;
            animation: jump-in 1s cubic-bezier(0.63, 0.01, 0.87, 1) 1s both; }
@-webkit-keyframes jump-in {
  0% {
    transform: translate3d(0, 170%, 0); }
  75% {
    transform: translate3d(0, -30%, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
@keyframes jump-in {
  0% {
    transform: translate3d(0, 170%, 0); }
  75% {
    transform: translate3d(0, -30%, 0); }
  100% {
    transform: translate3d(0, 0, 0); } }
.ec-hatoFriendsAnimation__hato1 {
    left: 5%;
    background: url(../img/hato/hato-friends1.png) no-repeat center bottom;
    background-size: contain;
    transform-origin: bottom center; }
.ec-hatoFriendsAnimation--step2-pc .ec-hatoFriendsAnimation__hato1 {
    -webkit-animation: hato-run-left 13s linear 0.7s both, hato-run-bounce-pc 0.45s ease-in-out 0.7s infinite;
            animation: hato-run-left 13s linear 0.7s both, hato-run-bounce-pc 0.45s ease-in-out 0.7s infinite; }
.ec-hatoFriendsAnimation--step2-sp .ec-hatoFriendsAnimation__hato1 {
    -webkit-animation: hato-run-left 9s linear 0.7s both, hato-run-bounce-sp 0.45s ease-in-out 0.7s infinite;
            animation: hato-run-left 9s linear 0.7s both, hato-run-bounce-sp 0.45s ease-in-out 0.7s infinite; }
.ec-hatoFriendsAnimation__hato2 {
    left: 25%;
    background: url(../img/hato/hato-friends2.png) no-repeat center bottom;
    background-size: contain;
    transform-origin: bottom center; }
.ec-hatoFriendsAnimation--step2-pc .ec-hatoFriendsAnimation__hato2 {
    -webkit-animation: hato-run-left 13s linear 0.9s both, hato-run-bounce-pc 0.45s ease-in-out 0.9s infinite;
            animation: hato-run-left 13s linear 0.9s both, hato-run-bounce-pc 0.45s ease-in-out 0.9s infinite; }
.ec-hatoFriendsAnimation--step2-sp .ec-hatoFriendsAnimation__hato2 {
    -webkit-animation: hato-run-left 9s linear 0.9s both, hato-run-bounce-sp 0.45s ease-in-out 0.9s infinite;
            animation: hato-run-left 9s linear 0.9s both, hato-run-bounce-sp 0.45s ease-in-out 0.9s infinite; }
.ec-hatoFriendsAnimation__hato3 {
    left: 40%;
    background: url(../img/hato/hato-friends3.png) no-repeat center bottom;
    background-size: contain;
    transform-origin: bottom center; }
.ec-hatoFriendsAnimation--step2-pc .ec-hatoFriendsAnimation__hato3 {
    -webkit-animation: hato-run-right 13s linear 1.1s both, hato-run-bounce-pc 0.45s ease-in-out 1.1s infinite;
            animation: hato-run-right 13s linear 1.1s both, hato-run-bounce-pc 0.45s ease-in-out 1.1s infinite; }
.ec-hatoFriendsAnimation--step2-sp .ec-hatoFriendsAnimation__hato3 {
    -webkit-animation: hato-run-right 9s linear 1.1s both, hato-run-bounce-sp 0.45s ease-in-out 1.1s infinite;
            animation: hato-run-right 9s linear 1.1s both, hato-run-bounce-sp 0.45s ease-in-out 1.1s infinite; }
.ec-hatoFriendsAnimation__hato4 {
    left: 53%;
    background: url(../img/hato/hato-friends4.png) no-repeat center bottom;
    background-size: contain;
    transform-origin: bottom center; }
.ec-hatoFriendsAnimation--step2-pc .ec-hatoFriendsAnimation__hato4 {
    -webkit-animation: hato-run-right 13s linear 1.3s both, hato-run-bounce-pc 0.45s ease-in-out 1.3s infinite;
            animation: hato-run-right 13s linear 1.3s both, hato-run-bounce-pc 0.45s ease-in-out 1.3s infinite; }
.ec-hatoFriendsAnimation--step2-sp .ec-hatoFriendsAnimation__hato4 {
    -webkit-animation: hato-run-right 9s linear 1.3s both, hato-run-bounce-sp 0.45s ease-in-out 1.3s infinite;
            animation: hato-run-right 9s linear 1.3s both, hato-run-bounce-sp 0.45s ease-in-out 1.3s infinite; }
.ec-hatoFriendsAnimation__hato5 {
    left: 65%;
    background: url(../img/hato/hato-friends5.png) no-repeat center bottom;
    background-size: contain;
    transform-origin: bottom center; }
.ec-hatoFriendsAnimation--step2-pc .ec-hatoFriendsAnimation__hato5 {
    -webkit-animation: hato-run-right 13s linear 0.7s both, hato-run-bounce-pc 0.45s ease-in-out 0.7s infinite;
            animation: hato-run-right 13s linear 0.7s both, hato-run-bounce-pc 0.45s ease-in-out 0.7s infinite; }
.ec-hatoFriendsAnimation--step2-sp .ec-hatoFriendsAnimation__hato5 {
    -webkit-animation: hato-run-right 9s linear 0.7s both, hato-run-bounce-sp 0.45s ease-in-out 0.7s infinite;
            animation: hato-run-right 9s linear 0.7s both, hato-run-bounce-sp 0.45s ease-in-out 0.7s infinite; }
.ec-hatoFriendsAnimation__hato6 {
    left: 80%;
    background: url(../img/hato/hato-friends6.png) no-repeat center bottom;
    background-size: contain;
    transform-origin: bottom center; }
.ec-hatoFriendsAnimation--step2-pc .ec-hatoFriendsAnimation__hato6 {
    -webkit-animation: hato-run-right 13s linear 0.9s both, hato-run-bounce-pc 0.45s ease-in-out 0.9s infinite;
            animation: hato-run-right 13s linear 0.9s both, hato-run-bounce-pc 0.45s ease-in-out 0.9s infinite; }
.ec-hatoFriendsAnimation--step2-sp .ec-hatoFriendsAnimation__hato6 {
    -webkit-animation: hato-run-right 9s linear 0.9s both, hato-run-bounce-sp 0.45s ease-in-out 0.9s infinite;
            animation: hato-run-right 9s linear 0.9s both, hato-run-bounce-sp 0.45s ease-in-out 0.9s infinite; }
@-webkit-keyframes hato-run-bounce-sp {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(0.5vw); }
  100% {
    transform: translateY(0); } }
@keyframes hato-run-bounce-sp {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(0.5vw); }
  100% {
    transform: translateY(0); } }
@-webkit-keyframes hato-run-bounce-pc {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(3px); }
  100% {
    transform: translateY(0); } }
@keyframes hato-run-bounce-pc {
  0% {
    transform: translateY(0); }
  50% {
    transform: translateY(3px); }
  100% {
    transform: translateY(0); } }
@-webkit-keyframes hato-run-left {
  0% {
    margin-left: 0; }
  10% {
    margin-left: -5vw; }
  20% {
    margin-left: -12vw; }
  30% {
    margin-left: -22vw; }
  50% {
    margin-left: -45vw; }
  75% {
    margin-left: -73vw; }
  100% {
    margin-left: -100vw; } }
@keyframes hato-run-left {
  0% {
    margin-left: 0; }
  10% {
    margin-left: -5vw; }
  20% {
    margin-left: -12vw; }
  30% {
    margin-left: -22vw; }
  50% {
    margin-left: -45vw; }
  75% {
    margin-left: -73vw; }
  100% {
    margin-left: -100vw; } }
@-webkit-keyframes hato-run-right {
  0% {
    margin-left: 0; }
  10% {
    margin-left: 5vw; }
  20% {
    margin-left: 12vw; }
  30% {
    margin-left: 22vw; }
  50% {
    margin-left: 45vw; }
  75% {
    margin-left: 73vw; }
  100% {
    margin-left: 100vw; } }
@keyframes hato-run-right {
  0% {
    margin-left: 0; }
  10% {
    margin-left: 5vw; }
  20% {
    margin-left: 12vw; }
  30% {
    margin-left: 22vw; }
  50% {
    margin-left: 45vw; }
  75% {
    margin-left: 73vw; }
  100% {
    margin-left: 100vw; } }
/* 隠しバト */
.hidden-hato {
  overflow: hidden;
  position: absolute;
  transition: 0.5s; }
.hidden-hato-sell {
    background: url("../img/hidden-hato/hato-sell.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(180px / 2);
    width: calc(220px / 2);
    left: calc(20%);
    top: -90px; }
.hidden-hato-picnic {
    background: url("../img/hidden-hato/hato-picnic.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(119px / 2);
    width: calc(143px / 2);
    left: 55%;
    top: calc(-119px / 2); }
.hidden-hato-song {
    background: url("../img/hidden-hato/hato-song.png");
    background-repeat: no-repeat;
    background-position: -100px 0;
    background-size: cover;
    height: calc(276px / 2);
    width: calc(274px / 2);
    left: -52px;
    top: 26%;
    z-index: 1; }
.hidden-hato-friends {
    background: url("../img/hidden-hato/hato-friends.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(78px / 2);
    width: calc(194px / 2);
    left: 52%;
    top: calc(-78px / 2); }
.hidden-hato-surfing {
    background: url("../img/hidden-hato/hato-surfing.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(127px / 2);
    width: calc(160px / 2);
    top: calc(-129px / 2);
    right: 20px; }
.hidden-hato-suna {
    background: url("../img/hidden-hato/hato-suna.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(175px / 2);
    width: calc(225px / 2);
    left: 20px;
    bottom: 0; }
.hidden-hato-work {
    background: url("../img/hidden-hato/hato-work.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(161px / 2);
    width: calc(137px / 2);
    left: 13px;
    bottom: calc(-120px / 2); }
.hidden-hato-zazen {
    background: url("../img/hidden-hato/hato-zazen.png");
    background-repeat: no-repeat;
    background-position: 0 100px;
    background-size: cover;
    height: calc(160px / 2);
    width: calc(135px / 2);
    top: calc(-160px / 2);
    left: 10px; }
/* 鳩の日ページ */
#page_hatonohi .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
  background: rgba(255, 255, 255, 0.7); }
.hatonohi .kv {
  position: relative;
  background-image: url("../img/hatonohi/hatonohi_kv_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 290px; }
.hatonohi .kv h1 {
    position: absolute;
    top: 228px;
    left: 28px; }
.hatonohi .kv h1 img {
      height: 50px; }
.hatonohi .pdf {
  display: flex;
  justify-content: center;
  padding: 35px 0 43px; }
.hatonohi .pdf .logo {
    width: 85px;
    height: 62px;
    margin: 0 auto 18px; }
.hatonohi .pdf .image {
    display: block;
    width: 142px; }
.hatonohi .pdf .kamakura .image {
    position: relative; }
.hatonohi .pdf .kamakura .image .new {
      position: absolute;
      top: -23px;
      left: 0;
      color: #E60012; }
.hatonohi .pdf .kamakura .add {
    color: #E60012; }
.hatonohi .pdf .department {
    margin-left: 32px; }
.hatonohi .onlineshop {
  margin: 40px 0; }
.hatonohi .onlineshop img {
    height: 62px;
    width: auto;
    margin: 0 auto; }
.hatonohi .exclusive._1 {
  padding: 12px 0 21px; }
.hatonohi .exclusive._1 .title {
    margin-bottom: 23px; }
.hatonohi .exclusive._2 {
  padding: 0 20px 41px; }
.hatonohi .exclusive._2 .title {
    margin-bottom: 24px; }
.hatonohi .exclusive._2 .title .text img {
      height: 54px; }
.hatonohi .exclusive._4 {
  padding: 12px 0 21px; }
.hatonohi .exclusive._4 .title {
    margin-bottom: 24px; }
.hatonohi .exclusive._4 .title .text img {
      height: 19px; }
.hatonohi .exclusive .title {
  text-align: center; }
.hatonohi .exclusive .title .logo {
    margin-bottom: 15px; }
.hatonohi .exclusive .title .logo img {
      width: auto;
      height: 16px; }
.hatonohi .exclusive .title .text {
    text-align: center; }
.hatonohi .exclusive .title .text img {
      width: auto;
      margin: 0 auto;
      height: 48px; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slide {
  position: relative; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-arrow {
  position: absolute;
  height: 20px;
  width: 11px;
  z-index: 10;
  cursor: pointer; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-arrow.prev-arrow {
    left: 10px;
    bottom: -32px; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-arrow.next-arrow {
    right: 10px;
    bottom: -32px; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-dots {
  bottom: -32px; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-dots li {
    margin: 0 6px;
    height: 7px;
    width: 7px; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-dots li button::before {
      content: "";
      height: 7px;
      width: 7px;
      opacity: unset;
      background-color: #dcdcdc;
      border-radius: 50%; }
.hatonohi .exclusive .product-wrapper .silde-wrapper .slick-dots li.slick-active button::before {
      background-color: #7d7d7d; }
.hatonohi .exclusive .product-wrapper .product {
  padding: 0 20px;
  margin-top: 60px; }
.hatonohi .exclusive .product-wrapper .product .title {
    font-size: 17px;
    display: block;
    text-align: left;
    margin: 10px 0 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7; }
.hatonohi .exclusive .product-wrapper .product .description {
    font-size: 14px;
    margin-bottom: 30px;
    line-height: 1.8; }
.hatonohi .exclusive .product-wrapper .product .price {
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.1em; }
.hatonohi .exclusive .product-wrapper .product .price-sub {
    font-size: 14px;
    font-weight: 400; }
.hatonohi .exclusive .product-wrapper .product .price-main {
    font-size: 16px;
    font-weight: 600; }
.hatonohi .exclusive .product-wrapper .product .link {
    margin-bottom: 15px; }
.hatonohi .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
      width: 250px;
      height: 60px;
      margin: 0 auto; }
.hatonohi .exclusive .product-wrapper .product .link .ec-blockBtn--cancel .btnimg {
        height: 15px; }
.hatonohi .exclusive .product-wrapper .product .attention {
    font-size: 11px;
    color: #818181;
    line-height: 1.9;
    letter-spacing: 0.1em; }
.hatonohi .exclusive .shipping {
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.02em; }
.hatonohi .hatonohi-btn {
  padding: 5px 0 40px; }
.hatonohi .hatonohi-btn .ec-blockBtn--cancel {
    margin-bottom: 0;
    width: 250px;
    height: 60px; }
/* news */
#page_news_202110 .news-image {
  text-align: center;
  margin: 78px 0 58px; }
#page_news_202110 .news-image img {
    width: 118px; }
#page_news_202110 h1 {
  text-align: center;
  margin-bottom: 50px; }
#page_news_202110 h1 img {
    height: 23px; }
#page_news_202110 .news-content {
  margin-bottom: 58px; }
#page_news_202110 .news-content p {
    line-height: 2.1;
    letter-spacing: 0.05em; }
#page_news_202110 .news-content .right {
    text-align: right; }
/*鳩正月2022*/
#page_hatoshougatsu .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
  background: rgba(255, 255, 255, 0.7); }
#page_hatoshougatsu .ec-layoutRole__footer {
  margin-top: 46px; }
.hatoshougatsu .kv {
  background-image: url("../img/hatoshougatsu/2025_newyear_KV_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  height: 291px; }
.hatoshougatsu .kv h1 {
    position: absolute;
    top: 164px;
    left: 23px; }
.hatoshougatsu .kv h1 img {
      height: auto;
      width: 46%; }
.hatoshougatsu .__title {
  display: flex;
  justify-content: center;
  margin-top: 42px;
  margin-bottom: 19px; }
.hatoshougatsu .__title img {
    width: 121px; }
.hatoshougatsu .exclusive._1 {
  padding: 12px 0 50px; }
.hatoshougatsu .exclusive._1 .title {
    margin-bottom: 23px; }
.hatoshougatsu .exclusive._2 {
  padding: 0 0 50px; }
.hatoshougatsu .exclusive._2 .title {
    margin-bottom: 24px; }
.hatoshougatsu .exclusive._2 .title .text img {
      height: 54px; }
.hatoshougatsu .exclusive._2._lastchild {
    padding-bottom: 42px; }
.hatoshougatsu .exclusive .title {
  text-align: center; }
.hatoshougatsu .exclusive .title .logo {
    margin-bottom: 15px; }
.hatoshougatsu .exclusive .title .logo img {
      width: auto;
      height: 16px; }
.hatoshougatsu .exclusive .title .text {
    text-align: center; }
.hatoshougatsu .exclusive .title .text img {
      height: 22px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slide {
  position: relative;
  margin-bottom: 18px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slide.slides {
  margin-bottom: 51px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-arrow {
  position: absolute;
  height: 20px;
  width: 11px;
  z-index: 10;
  cursor: pointer; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-arrow.prev-arrow {
    left: 10px;
    bottom: -32px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-arrow.next-arrow {
    right: 10px;
    bottom: -32px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots {
  bottom: -32px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li {
    margin: 0 6px;
    height: 7px;
    width: 7px; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li button::before {
      content: "";
      height: 7px;
      width: 7px;
      opacity: unset;
      background-color: #dcdcdc;
      border-radius: 50%; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li.slick-active button::before {
      background-color: #7d7d7d; }
.hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li:first-child:last-child {
    display: none; }
.hatoshougatsu .exclusive .product-wrapper .product {
  padding: 0 20px; }
.hatoshougatsu .exclusive .product-wrapper .product .title {
    font-size: 17px;
    display: block;
    text-align: left;
    margin: 0 0 7px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7; }
.hatoshougatsu .exclusive .product-wrapper .product .description {
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.8; }
.hatoshougatsu .exclusive .product-wrapper .product .price {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 13px;
    letter-spacing: 0.1em; }
.hatoshougatsu .exclusive .product-wrapper .product .link {
    margin-bottom: 15px; }
.hatoshougatsu .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
      width: 250px;
      height: 60px;
      margin: 0 auto; }
.hatoshougatsu .exclusive .product-wrapper .product .link .ec-blockBtn--cancel .btnimg {
        height: 15px; }
.hatoshougatsu .exclusive .product-wrapper .product .attention {
    font-size: 11px;
    color: #818181;
    line-height: 1.9;
    letter-spacing: 0.1em; }
.hatoshougatsu .exclusive .product-wrapper .product p {
    color: #818181;
    font-size: 12px;
    letter-spacing: 2px; }
.hatoshougatsu .exclusive .shipping {
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.02em; }
/* モザイクアート */
#page_kamakura_mosaic-art {
  letter-spacing: 0.02em; }
#page_kamakura_mosaic-art .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
#page_kamakura_mosaic-art .ec-layoutRole__footer {
    margin-top: 46px; }
.mosaic-art .kv {
  background-image: url("../img/mosaic-art/kv_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  height: 291px; }
.mosaic-art .kv h1 {
    position: absolute;
    top: 164px;
    left: 10px; }
.mosaic-art .kv h1 img {
      height: auto;
      width: 62%; }
.mosaic-art .about {
  padding: 0 20px;
  margin-top: 40px; }
.mosaic-art .about .about-image {
    margin-bottom: 35px; }
.mosaic-art .about .about-image img {
      display: block; }
.mosaic-art .about .about-text {
    line-height: 2; }
.mosaic-art .about .about-text a {
      color: inherit;
      text-decoration: underline; }
.mosaic-art .number {
  margin-top: 84px;
  text-align: center;
  line-height: 2; }
.mosaic-art .number img {
    width: auto;
    height: 15px;
    margin: 0 auto 20px; }
.mosaic-art .number .number-title {
    font-size: 1.2em;
    margin-bottom: 20px; }
.mosaic-art .number .number-image {
    padding: 0 20px; }
.mosaic-art .number .number-image img {
      width: 100%;
      height: auto;
      margin-bottom: 0; }
.mosaic-art .__title {
  display: flex;
  justify-content: center;
  margin-top: 42px;
  margin-bottom: 19px; }
.mosaic-art .__title img {
    width: 100px; }
.mosaic-art .__title.bakufu {
    margin-bottom: 30px; }
.mosaic-art .__title.bakufu img {
      width: 135px; }
.mosaic-art .__title.about-bakufu {
    margin-bottom: 30px; }
.mosaic-art .__title.about-bakufu img {
      width: 135px; }
.mosaic-art .exclusive:not(:last-of-type) {
  margin-bottom: 55px; }
.mosaic-art .exclusive .title {
  text-align: center; }
.mosaic-art .exclusive .title .logo {
    margin-bottom: 15px; }
.mosaic-art .exclusive .title .logo img {
      width: auto;
      height: 16px; }
.mosaic-art .exclusive .title .text {
    text-align: center; }
.mosaic-art .exclusive .title .text img {
      height: 22px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slide {
  position: relative;
  margin-bottom: 18px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slide.slides {
  margin-bottom: 51px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-arrow {
  position: absolute;
  height: 20px;
  width: 11px;
  z-index: 10;
  cursor: pointer; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-arrow.prev-arrow {
    left: 10px;
    bottom: -32px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-arrow.next-arrow {
    right: 10px;
    bottom: -32px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-dots {
  bottom: -32px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-dots li {
    margin: 0 6px;
    height: 7px;
    width: 7px; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-dots li button::before {
      content: "";
      height: 7px;
      width: 7px;
      opacity: unset;
      background-color: #dcdcdc;
      border-radius: 50%; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-dots li.slick-active button::before {
      background-color: #7d7d7d; }
.mosaic-art .exclusive .product-wrapper .silde-wrapper .slick-dots li:first-child:last-child {
    display: none; }
.mosaic-art .exclusive .product-wrapper .product {
  padding: 0 20px; }
.mosaic-art .exclusive .product-wrapper .product .title {
    font-size: 17px;
    display: block;
    text-align: left;
    margin: 0 0 7px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7; }
.mosaic-art .exclusive .product-wrapper .product .description {
    font-size: 14px;
    margin-bottom: 22px;
    line-height: 1.8; }
.mosaic-art .exclusive .product-wrapper .product .price {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 13px;
    letter-spacing: 0.1em; }
.mosaic-art .exclusive .product-wrapper .product .link {
    margin-bottom: 15px; }
.mosaic-art .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
      width: 250px;
      height: 60px;
      margin: 0 auto; }
.mosaic-art .exclusive .product-wrapper .product .link .ec-blockBtn--cancel.standard {
        width: 298px; }
.mosaic-art .exclusive .product-wrapper .product .link .ec-blockBtn--cancel.premium {
        width: 305px; }
.mosaic-art .exclusive .product-wrapper .product .link .ec-blockBtn--cancel .btnimg {
        height: 15px; }
.mosaic-art .exclusive .product-wrapper .product .attention {
    font-size: 11px;
    color: #818181;
    line-height: 1.9;
    letter-spacing: 0.1em; }
.mosaic-art .exclusive .product-wrapper .product p {
    color: #818181;
    font-size: 12px;
    letter-spacing: 2px; }
.mosaic-art #about-bakufu {
  margin-top: -80px;
  padding-top: 80px; }
.mosaic-art .kamakura-bakufu {
  padding: 0 20px;
  line-height: 2;
  margin-bottom: 35px; }
.mosaic-art .kamakura-bakufu .top-text {
    margin-bottom: 40px; }
.mosaic-art .kamakura-bakufu .top-image img {
    display: block; }
.mosaic-art .kamakura-bakufu .top-image p {
    text-align: right;
    font-size: 0.9em; }
.mosaic-art .mosaic-art-image {
  max-width: 646px;
  margin: 0 auto 80px;
  padding: 0 20px; }
.mosaic-art .mosaic-art-image img {
    display: block; }
.mosaic-art .what {
  padding: 0 20px;
  line-height: 2;
  margin-bottom: 35px; }
.mosaic-art .what .what-title {
    margin-bottom: 25px;
    text-align: center; }
.mosaic-art .what .what-title img {
      width: auto;
      height: 15px; }
.mosaic-art .participation {
  padding: 0 20px;
  line-height: 2;
  margin-bottom: 40px; }
.mosaic-art .participation .participation-title {
    margin-bottom: 25px;
    text-align: center; }
.mosaic-art .participation .participation-title img {
      width: auto;
      height: 14px; }
.mosaic-art .participation .participation-text {
    margin: 0 auto;
    max-width: 640px; }
.mosaic-art .contact {
  padding: 0 20px;
  line-height: 2;
  margin-bottom: 40px; }
.mosaic-art .contact .contact-title {
    margin-bottom: 25px;
    text-align: center;
    font-weight: bold;
    font-size: 16px; }
.mosaic-art .contact .contact-title img {
      width: auto;
      height: 14px; }
.mosaic-art .contact .contact-text {
    margin: 0 auto;
    max-width: 640px; }
/* 商品詳細：プレミアブランの送料テーブル */
.ec-productRole .ec-productRole__ships.mosaic-art {
  display: block; }
.mosaic-art-shipping-text {
  margin: 20px 0 10px; }
.mosaic-art-shipping .ec-table__th {
  border-bottom: 1px solid #818181; }
.mosaic-art-shipping th {
  padding: 5px 20px 5px 10px; }
.mosaic-art-shipping td {
  padding: 5px 20px 5px 10px; }
/* 2023年お正月商品ページ */
#page_hatoshougatsu2023 .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
  background: rgba(255, 255, 255, 0.7); }
.calendar .kv {
  position: relative;
  background-image: url("../img/calendar-2023/calendar_kv_sp.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 290px; }
.calendar .kv h1 {
    position: absolute;
    top: 145px;
    left: 28px; }
.calendar .kv h1 img {
      height: 115px; }
.calendar .calendar-usagi {
  height: 47px;
  width: auto;
  position: absolute;
  top: 30px;
  left: 40px; }
.calendar .onlineshop {
  margin: 40px 0; }
.calendar .onlineshop img {
    height: 65px;
    width: auto;
    margin: 0 auto; }
.calendar .onlineshop.onlineshop-shougatusu {
    margin-top: 70px; }
.calendar .exclusive._1 {
  padding: 12px 0 21px; }
.calendar .exclusive._1 .title {
    margin-bottom: 42px; }
.calendar .exclusive._2 {
  padding: 12px 0 21px; }
.calendar .exclusive._2 .title {
    margin-bottom: 42px; }
.calendar .exclusive._2 .title .text img {
      height: 59px; }
.calendar .exclusive .title {
  text-align: center; }
.calendar .exclusive .title .logo {
    margin-bottom: 15px; }
.calendar .exclusive .title .logo img {
      width: auto;
      height: 16px; }
.calendar .exclusive .title .text {
    text-align: center; }
.calendar .exclusive .title .text img {
      width: auto;
      margin: 0 auto;
      height: 16px; }
.calendar .exclusive .product-wrapper:first-of-type {
  margin-bottom: 50px; }
.calendar .exclusive .product-wrapper .silde-wrapper .slide {
  position: relative; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-arrow {
  position: absolute;
  height: 20px;
  width: 11px;
  z-index: 10;
  cursor: pointer; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-arrow.prev-arrow {
    left: 10px;
    bottom: -32px; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-arrow.next-arrow {
    right: 10px;
    bottom: -32px; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-dots {
  bottom: -32px; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-dots li {
    margin: 0 6px;
    height: 7px;
    width: 7px; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-dots li button::before {
      content: "";
      height: 7px;
      width: 7px;
      opacity: unset;
      background-color: #dcdcdc;
      border-radius: 50%; }
.calendar .exclusive .product-wrapper .silde-wrapper .slick-dots li.slick-active button::before {
      background-color: #7d7d7d; }
.calendar .exclusive .product-wrapper .product {
  padding: 0 20px;
  margin-top: 60px; }
.calendar .exclusive .product-wrapper .product .title {
    font-size: 17px;
    display: block;
    text-align: left;
    margin: 10px 0 15px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7; }
.calendar .exclusive .product-wrapper .product .price {
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    letter-spacing: 0.1em; }
.calendar .exclusive .product-wrapper .product .link {
    margin-bottom: 15px; }
.calendar .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
      width: 250px;
      height: 60px;
      margin: 0 auto; }
.calendar .exclusive .product-wrapper .product .link .ec-blockBtn--cancel .btnimg {
        height: 15px; }
.calendar .calendar-btn {
  padding: 5px 0 40px; }
.calendar .calendar-btn .ec-blockBtn--cancel {
    margin-bottom: 0;
    width: 250px;
    height: 60px; }
.calendar .shougatsu {
  margin-bottom: 40px; }
.calendar .shougatsu .exclusive .product-wrapper {
    width: 100%;
    margin-bottom: 50px; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slide {
      position: relative; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-arrow {
      position: absolute;
      height: 20px;
      width: 11px;
      z-index: 10;
      cursor: pointer; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-arrow.prev-arrow {
        left: 10px;
        bottom: -32px; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-arrow.next-arrow {
        right: 10px;
        bottom: -32px; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots {
      bottom: -32px; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li {
        margin: 0 6px;
        height: 7px;
        width: 7px; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li button::before {
          content: "";
          height: 7px;
          width: 7px;
          opacity: unset;
          background-color: #dcdcdc;
          border-radius: 50%; }
.calendar .shougatsu .exclusive .product-wrapper .silde-wrapper .slick-dots li.slick-active button::before {
          background-color: #7d7d7d; }
.calendar .shougatsu .exclusive .product-wrapper .product {
      padding: 0 20px;
      margin-top: 60px; }
.calendar .shougatsu .exclusive .product-wrapper .product .title {
        font-size: 17px;
        display: block;
        text-align: left;
        margin: 10px 0 15px;
        font-weight: 600;
        letter-spacing: 0.1em;
        line-height: 1.7; }
.calendar .shougatsu .exclusive .product-wrapper .product .description {
        font-size: 14px;
        margin-bottom: 30px;
        line-height: 1.8; }
.calendar .shougatsu .exclusive .product-wrapper .product .price {
        display: flex;
        align-items: flex-end;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 15px;
        letter-spacing: 0.1em; }
.calendar .shougatsu .exclusive .product-wrapper .product .price-sub {
        font-size: 14px;
        font-weight: 400; }
.calendar .shougatsu .exclusive .product-wrapper .product .price-main {
        font-size: 16px;
        font-weight: 600; }
.calendar .shougatsu .exclusive .product-wrapper .product .attention {
        font-size: 11px;
        color: #818181;
        line-height: 1.9;
        letter-spacing: 0.1em; }
.calendar .shougatsu .link {
    margin-bottom: 55px; }
.calendar .shougatsu .link .ec-blockBtn--cancel {
      width: 250px;
      height: 60px;
      margin: 0 auto; }
.calendar .shougatsu .link .ec-blockBtn--cancel .btnimg {
        height: 15px; }
/* 御菓印ページ */
#page_gokain .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
  background: rgba(255, 255, 255, 0.7); }
.gokain .kv {
  position: relative;
  background-image: url("../img/gokain/gokain_kv_sp3.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 290px; }
.gokain .kv h1 {
    position: absolute;
    top: 240px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%); }
.gokain .kv h1 img {
      height: 26px; }
.gokain .onlineshop {
  margin: 30px 0 11px;
  text-align: center; }
.gokain .onlineshop img {
    height: 62px;
    width: auto;
    margin: 0 auto; }
.gokain .gokain-about {
  font-weight: normal;
  font-size: 14px;
  padding: 0 20px;
  margin: 0 auto 26px;
  letter-spacing: 0.02em;
  line-height: 1.8; }
.gokain .gokain-about.gokaincho {
    text-align: center; }
.gokain .gokain-about .gokain-about-link {
    font-size: 13px;
    font-weight: bold; }
.gokain .gokain-about a {
    color: inherit;
    word-wrap: break-word; }
.gokain .gokain-about a:hover {
      opacity: 0.6; }
.gokain .gokain-caution {
  font-size: 11px;
  padding: 0 20px;
  color: #808081;
  line-height: 2.2;
  letter-spacing: 0.02em;
  margin: 0 auto; }
.gokain .gokain-toshimaya {
  text-align: center;
  margin-top: 25px; }
.gokain .gokain-toshimaya img {
    width: 169px;
    height: 223px; }
.gokain .exclusive._1 {
  padding: 12px 0 21px; }
.gokain .exclusive._1 .title {
    margin-bottom: 23px; }
.gokain .exclusive._2 {
  padding: 0 20px 41px; }
.gokain .exclusive._2 .title {
    margin-bottom: 24px; }
.gokain .exclusive._2 .title .text img {
      height: 54px; }
.gokain .exclusive._4 {
  padding: 12px 0 21px; }
.gokain .exclusive._4 .title {
    margin-bottom: 24px; }
.gokain .exclusive._4 .title .text img {
      height: 19px; }
.gokain .exclusive .title {
  text-align: center; }
.gokain .exclusive .title .logo {
    margin-bottom: 15px; }
.gokain .exclusive .title .logo img {
      width: auto;
      height: 16px; }
.gokain .exclusive .title .text {
    text-align: center; }
.gokain .exclusive .title .text img {
      width: auto;
      margin: 0 auto;
      height: 48px; }
.gokain .exclusive .product-wrapper .silde-wrapper .slide {
  position: relative; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-arrow {
  position: absolute;
  height: 20px;
  width: 11px;
  z-index: 10;
  cursor: pointer; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-arrow.prev-arrow {
    left: 10px;
    bottom: -32px; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-arrow.next-arrow {
    right: 10px;
    bottom: -32px; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-dots {
  bottom: -32px; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-dots li {
    margin: 0 6px;
    height: 7px;
    width: 7px; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-dots li button::before {
      content: "";
      height: 7px;
      width: 7px;
      opacity: unset;
      background-color: #dcdcdc;
      border-radius: 50%; }
.gokain .exclusive .product-wrapper .silde-wrapper .slick-dots li.slick-active button::before {
      background-color: #7d7d7d; }
.gokain .exclusive .product-wrapper .product {
  padding: 0 20px;
  margin-top: 60px; }
.gokain .exclusive .product-wrapper .product .title {
    font-size: 17px;
    display: block;
    text-align: left;
    margin: 10px 0 5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    line-height: 1.7; }
.gokain .exclusive .product-wrapper .product .description {
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.8; }
.gokain .exclusive .product-wrapper .product .price {
    display: flex;
    align-items: flex-end;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.1em; }
.gokain .exclusive .product-wrapper .product .price-sub {
    font-size: 14px;
    font-weight: 400; }
.gokain .exclusive .product-wrapper .product .price-main {
    font-size: 16px;
    font-weight: 600; }
.gokain .exclusive .product-wrapper .product .link {
    margin-bottom: 15px; }
.gokain .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
      width: 250px;
      height: 60px;
      margin: 0 auto; }
.gokain .exclusive .product-wrapper .product .link .ec-blockBtn--cancel .btnimg {
        height: 15px; }
.gokain .exclusive .product-wrapper .product .attention {
    font-size: 11px;
    color: #818181;
    line-height: 1.9;
    letter-spacing: 0.1em; }
.gokain .exclusive .shipping {
  font-size: 14px;
  line-height: 2.1;
  letter-spacing: 0.02em; }
.gokain .gokain-btn {
  padding: 14px 0 40px; }
.gokain .gokain-btn .ec-blockBtn--cancel {
    margin-bottom: 0;
    width: 250px;
    height: 60px; }
/*
共通コンポーネント

Styleguide 11.0
*/
a,
button {
  transition: all  0.5s ease; }
a.text-link,
.page-call p {
  color: #818181;
  line-height: 1.3; }
.page-call {
  display: flex;
  align-items: center; }
.page-call img {
  margin-right: 8px;
  height: 14px;
  width: 24px; }
.btnimg {
  height: 13px;
  width: auto; }
.scroll-trigger {
  opacity: 0; }
.scroll-animation {
  -webkit-animation: 1s fade-in forwards;
          animation: 1s fade-in forwards; }
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translate3d(0, 15px, 0); }
  100% {
    opacity: 1; } }
/*
トップページ

Styleguide 12.0
*/
#page_homepage .ec-layoutRole .ec-layoutRole__contents {
  padding-top: 0;
  max-width: none; }
.ec-topRole__hatoSable {
  background-color: #fde260;
  padding: 62px 0 59px; }
.ec-topRole__hatoSable__img {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 0 43px; }
.ec-topRole__hatoSable__img .hatosable_logo {
      width: 46px;
      margin-right: -5px;
      margin-bottom: 2px; }
.ec-topRole__hatoSable__img .hatosable_icon {
      width: 137px;
      margin-right: -15px;
      margin-top: 1px; }
.ec-topRole__hatoSable__img .hatosable_text {
      width: 176px;
      margin-top: 35px;
      margin-right: -4px; }
.ec-topRole__hatoSable .ec-blockBtn--action {
    border: 1px solid #000; }
.ec-topRole__hatoSable .ec-blockBtn--action .btnimg {
      height: 15px; }
.ec-topRole__hatoSable__sablo {
  position: relative;
  overflow: hidden;
  height: 418px;
  margin-top: 20px; }
.ec-topRole__hatoSable__sablo__inner {
    position: absolute;
    left: 0;
    top: 0; }
.ec-topRole__hatoSable__sablo__inner ul {
      display: flex;
      flex-wrap: nowrap;
      margin-top: -26px; }
.ec-topRole__hatoSable__sablo__inner li {
      flex-shrink: 0;
      width: 133px;
      margin-left: 100px; }
.ec-topRole__hatoSable__sablo__inner li:first-child {
        margin-left: -33px; }
.ec-topRole__hatoSable__sablo__inner li img {
        -webkit-animation: swing_sable 0.8s 0.4s steps(2) infinite alternate;
                animation: swing_sable 0.8s 0.4s steps(2) infinite alternate; }
.ec-topRole__hatoSable__sablo__inner .hatojin {
      position: relative; }
.ec-topRole__hatoSable__sablo__inner .hatojin::before {
        content: "";
        background: url(../img/top/sable/hatojin.png) no-repeat 0 0;
        background-size: contain;
        position: absolute;
        width: 60px;
        height: 45px;
        left: 30px;
        top: 45px;
        -webkit-animation: hatojin 25.6s steps(4) infinite;
                animation: hatojin 25.6s steps(4) infinite; }
.ec-topRole__hatoSable__sablo__inner .hatojin img {
        position: absolute;
        z-index: 1; }
.ec-topRole__hatoSable__sablo__inner ul:nth-child(even) {
      margin-left: 116px; }
.ec-topRole__hatoSable__sablo__inner:first-child {
    -webkit-animation: move_left1 96s steps(120) infinite;
            animation: move_left1 96s steps(120) infinite; }
.ec-topRole__hatoSable__sablo__inner:last-child {
    -webkit-animation: move_left2 96s steps(120) infinite;
            animation: move_left2 96s steps(120) infinite; }
@-webkit-keyframes swing_sable {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(8deg); } }
@keyframes swing_sable {
  from {
    transform: rotate(0); }
  to {
    transform: rotate(8deg); } }
@-webkit-keyframes hatojin {
  0% {
    transform: translate(0, 0); }
  12.5% {
    transform: translate(-6px, -32px); }
  25% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 0); } }
@keyframes hatojin {
  0% {
    transform: translate(0, 0); }
  12.5% {
    transform: translate(-6px, -32px); }
  25% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 0); } }
@-webkit-keyframes hatojinpc {
  0% {
    transform: translate(0, 0); }
  12.5% {
    transform: translate(-8px, -44px); }
  25% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 0); } }
@keyframes hatojinpc {
  0% {
    transform: translate(0, 0); }
  12.5% {
    transform: translate(-8px, -44px); }
  25% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 0); } }
@-webkit-keyframes move_left1 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
@keyframes move_left1 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
@-webkit-keyframes move_left2 {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(0%); } }
@keyframes move_left2 {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(0%); } }
.ec-topRole__category {
  margin: 14px 0 42px;
  padding-top: 55px;
  margin-top: -42px; }
.ec-topRole__category h2 {
    margin-left: 20px; }
.ec-topRole__category h2 img {
      height: 29px; }
.ec-topRole__category ul {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin: 15px 20px 0; }
.ec-topRole__category ul li {
      margin-bottom: 21px;
      width: 100%;
      position: relative; }
.ec-topRole__category ul li a:hover img {
        opacity: 0.8;
        transition: all 0.5s ease; }
.ec-topRole__category ul li:last-child {
      margin-right: 0; }
.ec-topRole__category__hatosable .ec-topRole__category__text img {
    width: 111px; }
.ec-topRole__category__recommended .ec-topRole__category__text img {
    width: 87px; }
.ec-topRole__category__others .ec-topRole__category__text img {
    width: 202px; }
.ec-topRole__category__img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; }
.ec-topRole__category__img img {
      width: 100%; }
.ec-topRole__category__text {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    bottom: 22px;
    left: 23px; }
.ec-topRole__category__text img {
      height: auto; }
.ec-topRole__category__text__icon {
      background-image: url(../img/icon/ic_link.svg);
      background-size: cover;
      height: 20px;
      width: 20px;
      margin-left: 9px; }
.ec-topRole__hatoSable__pkg {
  overflow: hidden; }
.ec-topRole__hatoSable__pkg__inner {
    display: flex;
    width: 100vw;
    height: 418px; }
.ec-topRole__hatoSable__pkg__inner__box {
      width: auto;
      height: 100%;
      margin-top: -30px; }
.ec-topRole__hatoSable__pkg__inner__box ul {
        display: flex; }
.ec-topRole__hatoSable__pkg__inner__box ul li {
          width: 160px;
          height: 160px;
          transform-origin: center bottom; }
.ec-topRole__hatoSable__pkg__inner__box ul li::after {
            content: "";
            display: block;
            background: url(../img/top/can.png) no-repeat 0 0;
            background-size: auto 100%;
            width: 100%;
            height: 100%; }
.ec-topRole__hatoSable__pkg__inner__box ul li:nth-child(even) {
          -webkit-animation: swing_can_even 1s steps(2) infinite;
                  animation: swing_can_even 1s steps(2) infinite; }
.ec-topRole__hatoSable__pkg__inner__box ul li:nth-child(odd) {
          -webkit-animation: swing_can_odd 1s steps(2) infinite;
                  animation: swing_can_odd 1s steps(2) infinite; }
.ec-topRole__hatoSable__pkg__inner__box ul li.sabro::after {
          -webkit-animation: hello 30s steps(6) infinite;
                  animation: hello 30s steps(6) infinite; }
.ec-topRole__hatoSable__pkg__inner__box ul:nth-child(odd) {
        margin-left: -77px; }
.ec-topRole__hatoSable__pkg__inner__box:first-child {
      -webkit-animation: box_loop 120s -60s steps(120) infinite;
              animation: box_loop 120s -60s steps(120) infinite; }
.ec-topRole__hatoSable__pkg__inner__box:last-child {
      -webkit-animation: box_loop2 120s steps(120) infinite;
              animation: box_loop2 120s steps(120) infinite; }
@-webkit-keyframes swing_can_even {
  from {
    transform: rotate(-1deg); }
  to {
    transform: rotate(1deg); } }
@keyframes swing_can_even {
  from {
    transform: rotate(-1deg); }
  to {
    transform: rotate(1deg); } }
@-webkit-keyframes swing_can_odd {
  from {
    transform: rotate(1deg); }
  to {
    transform: rotate(-1deg); } }
@keyframes swing_can_odd {
  from {
    transform: rotate(1deg); }
  to {
    transform: rotate(-1deg); } }
@-webkit-keyframes hello {
  0%, 87.5% {
    background-position: 0 0; }
  100% {
    background-position: -960px 0; } }
@keyframes hello {
  0%, 87.5% {
    background-position: 0 0; }
  100% {
    background-position: -960px 0; } }
@-webkit-keyframes hellopc {
  0%, 87.5% {
    background-position: 0 0; }
  100% {
    background-position: -1740px 0; } }
@keyframes hellopc {
  0%, 87.5% {
    background-position: 0 0; }
  100% {
    background-position: -1740px 0; } }
@-webkit-keyframes box_loop {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@keyframes box_loop {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(-100%); } }
@-webkit-keyframes box_loop2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
@keyframes box_loop2 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-200%); } }
.ec-topRole__hatoSable__calendar {
  background-color: #fde260;
  padding-top: 20px;
  padding-bottom: 13px; }
.ec-topRole__hatoSable__calendar__inner {
    display: flex;
    flex-direction: column; }
.ec-topRole__hatoSable__calendar__img {
    width: 100%;
    padding: 0 15px 0 20px; }
.ec-topRole__hatoSable__calendar__img__month {
      background-size: cover;
      background-repeat: no-repeat; }
.ec-topRole__hatoSable__calendar__img__month.__jan {
        background-image: url(../img/top_calender/1.png); }
.ec-topRole__hatoSable__calendar__img__month.__feb {
        background-image: url(../img/top_calender/2.png); }
.ec-topRole__hatoSable__calendar__img__month.__mar {
        background-image: url(../img/top_calender/3.png); }
.ec-topRole__hatoSable__calendar__img__month.__apr {
        background-image: url(../img/top_calender/4.png); }
.ec-topRole__hatoSable__calendar__img__month.__may {
        background-image: url(../img/top_calender/5.png); }
.ec-topRole__hatoSable__calendar__img__month.__jun {
        background-image: url(../img/top_calender/6.png); }
.ec-topRole__hatoSable__calendar__img__month.__jul {
        background-image: url(../img/top_calender/7.png); }
.ec-topRole__hatoSable__calendar__img__month.__aug {
        background-image: url(../img/top_calender/8.png); }
.ec-topRole__hatoSable__calendar__img__month.__sep {
        background-image: url(../img/top_calender/9.png); }
.ec-topRole__hatoSable__calendar__img__month.__oct {
        background-image: url(../img/top_calender/10.png); }
.ec-topRole__hatoSable__calendar__img__month.__nov {
        background-image: url(../img/top_calender/11.png); }
.ec-topRole__hatoSable__calendar__img__month.__dec {
        background-image: url(../img/top_calender/12.png); }
.ec-topRole__hatoSable__calendar__img__bottom {
    padding: 0 15px 0 20px; }
.ec-topRole__hatoSable__calendar__img__bottom img {
      margin-right: -5px; }
.ec-topRole__hatoSable__calendar__box {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 19px;
    margin-bottom: 33px;
    padding: 0 20px; }
.ec-topRole__hatoSable__calendar__box img {
      width: 100%;
      margin: 0 auto; }
.ec-topRole__hatoSable__calendar__box h2 {
      padding: 0; }
.ec-topRole__hatoSable__calendar__box h2 img {
        height: auto; }
.ec-topRole__hatoSable__calendar__text {
    text-align: center;
    margin-top: 25px;
    line-height: 1.67; }
.ec-topRole__hatoSable__calendar .ec-blockBtn--action {
    height: 60px;
    margin-top: 25px;
    border: 2px solid #000; }
.ec-topRole__hatoSable__calendar .ec-blockBtn--action .btnimg {
      height: 15px; }
.ec-topRole__shop {
  padding-top: 18px; }
.ec-topRole__shop h2 {
    margin-left: 20px;
    margin-bottom: 17px; }
.ec-topRole__shop h2 img {
      margin-top: 0;
      height: 30px; }
.ec-topRole__shop__text {
    margin-top: 36px;
    margin-right: 20px;
    margin-left: 20px;
    text-align: center; }
.ec-topRole__shop__text__strong {
      margin-bottom: 36px; }
.ec-topRole__shop__text__strong img {
        height: auto;
        width: 98%; }
.ec-topRole__shop__text > p {
      line-height: 2.14; }
.ec-topRole__shop .ec-blockBtn--primary {
    border: 1px solid #000;
    height: 60px;
    width: 258px;
    margin-top: 50px; }
.ec-topRole__shop .ec-blockBtn--primary .btnimg {
      height: auto;
      width: 82px;
      margin-top: 0; }
/*
商品一覧

Styleguide 13.0
*/
.product_page .ec-layoutRole .ec-layoutRole__contents {
  max-width: none; }
.product_page .ec-layoutRole__main {
  margin-top: 0; }
.product_page.margin_none .ec-layoutRole__main,
#page_product_list_sables .ec-layoutRole__main,
#page_product_list_recommends .ec-layoutRole__main,
#page_product_list_sweets .ec-layoutRole__main {
  margin-top: 0; }
/*説明欄*/
.product_category {
  background-color: #F5F3F1;
  background-repeat: no-repeat;
  background-position: center; }
.product_category__inner {
    position: relative;
    height: 317px; }
.product_category__text {
    position: absolute;
    left: 0;
    bottom: 24px;
    padding: 0 20px; }
.product_category__text__message {
      line-height: 0; }
.product_category__text__message img {
        width: 50%;
        height: auto; }
.product_category__text__left {
      line-height: 0; }
.product_category__text__left h1 {
        margin-bottom: 18px;
        line-height: 0; }
.product_category__text__left h1 img {
          height: 25px; }
.product_category__text__right {
      margin-top: 22px; }
.product_category__text__right .product_category_list_past {
        margin: 0;
        width: auto; }
.product_category__text__right .product_category_list_past .product_category_list_select {
          margin: 0;
          width: 144px; }
.product_category_hato-sable {
    background-image: url(../img/productslist/product_hatosable_bg_sp.jpg);
    background-size: cover; }
.product_category_hato-sable .product_category__text .product_category__text__left__message img {
      height: 40px;
      width: auto; }
.product_category_recommend {
    background-image: url(../img/productslist/product_recomend_bg_sp.jpg);
    background-size: cover; }
.product_category_recommend .product_category__text .product_category__text__left__message img {
      height: 11px;
      width: auto; }
.product_category_others {
    background-image: url(../img/productslist/product_toshimaya_bg_sp.jpg);
    background-size: cover; }
.product_category_others .product_category__text .product_category__text__left__message img {
      height: 11px;
      width: auto; }
.product_category_list {
    margin: 0 20px 17px; }
.product_category_list h1 img {
      height: 22px; }
.product_category_list h1 .shop-floor {
      height: 20px; }
/*今月・過去の上生菓子*/
.ec-layoutRole__main {
  position: relative; }
.product_category_list_this,
.product_category_list_past {
  margin: 0 auto;
  margin-top: 42px; }
.product_category_list_this .product_category_list,
  .product_category_list_past .product_category_list {
    width: auto;
    margin: 0;
    padding: 0 20px; }
.product_category_list_this .product_category_list h1,
    .product_category_list_past .product_category_list h1 {
      line-height: 0; }
.category_list_monthly_this {
  margin: 15px auto 8px; }
.category_list_monthly .category_list_monthly_this {
  margin: 0; }
.category_list_monthly_box {
  display: flex;
  justify-content: flex-end;
  padding: 0 20px; }
.category_list_monthly a {
  display: flex;
  align-items: center; }
.category_list_monthly a::before {
  display: block;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.5s ease; }
.category_list_monthly a::after {
  display: block;
  content: "";
  background-image: url(../img/icon/ic_link.svg);
  height: 20px;
  width: 20px;
  margin-left: 11px;
  transition: all 0.5s ease; }
.category_list_monthly a:hover::after {
  background-image: url(../img/icon/ic_link_hover.svg); }
.category_list_monthly_past {
  margin-top: 30px; }
.category_list_monthly_past a::before {
    background-image: url(../img/productslist/pastMonth_link.svg);
    height: 16px;
    width: 128px; }
.category_list_monthly_past a:hover::before {
    background-image: url(../img/productslist/pastMonth_link_hover.svg); }
.category_list_monthly_this a::before {
  background-image: url(../img/productslist/thisMonth_link.svg);
  height: 16px;
  width: 128px; }
.category_list_monthly_this a:hover::before {
  background-image: url(../img/productslist/thisMonth_link_hover.svg); }
.product_category_list_past_top {
  display: flex;
  align-items: center;
  justify-content: space-between; }
.product_category_list_past .category_list_monthly_this {
  margin: 0; }
.product_category_list_past .product_category_list_label {
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 12px; }
.product_category_list_past .product_category_list_select {
  border: #000 1px solid;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 22px;
  margin-right: 20px;
  height: 35px;
  width: 125px; }
.product_category_list_past .product_category_list_select::before {
    content: "";
    background-image: url(../img/icon/ic_selectDown.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translateY(-50%);
    height: 7px;
    width: 10px; }
.product_category_list_past .product_category_list_select select {
    -webkit-appearance: none;
    /* ベンダープレフィックス(Google Chrome、Safari用) */
    -moz-appearance: none;
    /* ベンダープレフィックス(Firefox用) */
    appearance: none;
    /* 標準のスタイルを無効にする */
    border: none;
    font-size: 12px;
    opacity: 0;
    width: 100%; }
.product_category_list_past .product_category_list_select select:active, .product_category_list_past .product_category_list_select select:focus {
      border: none;
      outline: none; }
.category_list_monthly_this._pastpage {
  margin-top: 30px; }
/*商品はありません*/
.ec-404Role.ec-nocategory {
  margin: 80px 0 135px; }
/*カテゴリー以外の商品ページパンクズ*/
#page_product_list .ec-breadcrumb {
  display: none; }
#page_product_list .ec-breadcrumb._forOtherProductList {
  display: flex;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 15px; }
#page_product_list_sweets .ec-breadcrumb._forOtherProductList,
#page_product_list_sables .ec-breadcrumb._forOtherProductList,
#page_product_list_recommends .ec-breadcrumb._forOtherProductList,
.product_page.online_page .ec-breadcrumb._forOtherProductList {
  display: none; }
.product_page.online_page .ec-layoutRole__main {
  margin-top: 43px; }
.product_page.online_page .product_category_list_past {
  margin-top: 0; }
/*おすすめ商品 ドロップダウン*/
#page_product_list_recommends .recommends_top_block,
#page_product_list_sweets .recommends_top_block,
#page_product_list .recommends_top_block {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-direction: column;
  padding: 19px 20px 0; }
#page_product_list_recommends .recommends_top_block .ec-breadcrumb,
  #page_product_list_sweets .recommends_top_block .ec-breadcrumb,
  #page_product_list .recommends_top_block .ec-breadcrumb {
    padding: 0;
    margin: 0;
    width: auto; }
#page_product_list_recommends .recommends_top_block .ec-breadcrumb__link,
    #page_product_list_sweets .recommends_top_block .ec-breadcrumb__link,
    #page_product_list .recommends_top_block .ec-breadcrumb__link {
      margin-bottom: 0; }
#page_product_list_recommends .recommends_top_block .product_category_list_past,
  #page_product_list_sweets .recommends_top_block .product_category_list_past,
  #page_product_list .recommends_top_block .product_category_list_past {
    margin: 0;
    width: auto; }
#page_product_list_recommends .recommends_top_block .product_category_list_past .product_category_list_select,
    #page_product_list_sweets .recommends_top_block .product_category_list_past .product_category_list_select,
    #page_product_list .recommends_top_block .product_category_list_past .product_category_list_select {
      width: 144px;
      margin-right: 0;
      padding-left: 0;
      position: relative; }
#page_product_list_recommends .recommends_top_block .product_category_list_past .product_category_list_label,
    #page_product_list_sweets .recommends_top_block .product_category_list_past .product_category_list_label,
    #page_product_list .recommends_top_block .product_category_list_past .product_category_list_label {
      position: absolute;
      text-align: center;
      width: 100%;
      font-size: 12px; }
#page_product_list_recommends .recommends_top_block .product_category_list_past #category_change-select,
    #page_product_list_sweets .recommends_top_block .product_category_list_past #category_change-select,
    #page_product_list .recommends_top_block .product_category_list_past #category_change-select {
      width: auto;
      height: 100%;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      cursor: pointer;
      opacity: 0;
      z-index: 2; }
#page_product_list_recommends .recommends_top_block .product_category_list_past #category_change-select option,
      #page_product_list_sweets .recommends_top_block .product_category_list_past #category_change-select option,
      #page_product_list .recommends_top_block .product_category_list_past #category_change-select option {
        text-align: center; }
#page_product_list_recommends .recommends_top_block .category_list_monthly_this,
  #page_product_list_sweets .recommends_top_block .category_list_monthly_this,
  #page_product_list .recommends_top_block .category_list_monthly_this {
    margin: 18px 0 0;
    display: flex;
    justify-content: flex-end;
    width: 100%; }
#page_product_list_recommends .recommends_top_block .category_list_monthly_this .category_list_monthly_box,
    #page_product_list_sweets .recommends_top_block .category_list_monthly_this .category_list_monthly_box,
    #page_product_list .recommends_top_block .category_list_monthly_this .category_list_monthly_box {
      padding: 0; }
#page_product_list_sweets .recommends_top_block {
  display: flex; }
#page_product_list_sweets .recommends_top_block .category_list_monthly_this {
    margin: 18px 0 0;
    display: flex;
    justify-content: flex-end;
    width: 100%; }
#page_product_list_sweets .recommends_top_block .category_list_monthly_this .category_list_monthly_box {
      padding: 0; }
/*
商品詳細

Styleguide 14.0
*/
#page_product_detail .ec-layoutRole__contents {
  max-width: none;
  padding-top: 0; }
/*
注文

Styleguide 15.0
*/
/*
購入エラー
*/
.page_shopping_error {
  position: relative;
  min-height: 100vh; }
.page_shopping_error .ec-footerRole {
    position: absolute;
    bottom: 0; }
/*
注文履歴

Styleguide 16.0
*/
.ec-historyRole {
  padding: 0 20px; }
/*
住所一覧

Styleguide 17.0
*/
/*
パスワード再発行

Styleguide 18.0
*/
/*
フォーム

Styleguide 19.0
*/
/*
404ページ

Styleguide 20.0
*/
/*
退会手続き

Styleguide 21.0
*/
/*
会員情報編集完了

Styleguide 22.0
*/
/*
特定商取引法に基づく表記

Styleguide 9.0
*/
#page_help_tradelaw .ec-borderedDefs ul {
  display: flex;
  margin: 8px 0; }
#page_help_tradelaw .ec-borderedDefs li {
  width: 50px;
  margin-right: 8px; }
#page_help_tradelaw .ec-borderedDefs li img {
    width: 100%; }
#page_help_tradelaw .ec-borderedDefs .ec-label {
  color: #818181;
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0.02em; }
#page_help_tradelaw .ec-borderedDefs dd p {
  font-size: 14px;
  line-height: 160%;
  letter-spacing: 0.02em;
  color: #000000; }
#page_help_tradelaw .ec-borderedDefs .page-call p {
  font-size: 14px;
  letter-spacing: 0.02em;
  line-height: 160%;
  color: #818181;
  border-bottom: none;
  text-decoration: underline; }
#page_help_tradelaw .ec-borderedDefs .text-link {
  text-decoration: underline; }
#page_help_tradelaw .block-flex {
  display: flex;
  flex-direction: column; }
#page_help_tradelaw .ec-ec-role__actions {
  margin-top: 64px; }
/*
お問い合わせTOP
*/
#page_help .ec-ec-role__actions {
  margin-top: 64px; }
.ec-help-position-relative {
  position: relative; }
.ec-help__inner h2 {
  font-weight: 600;
  font-size: 21px;
  line-height: 160%;
  letter-spacing: 0.1em;
  color: #000000;
  padding: 0;
  margin-left: 0;
  margin-top: 48px; }
.ec-help__inner h2:first-of-type {
    margin-top: 24px; }
.ec-help__inner .ec-off1Grid .ec-off1Grid__cell {
  margin-left: 0; }
.ec-help__inner .ec-help__link {
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  color: #818181; }
#page_help .ec-borderedDefs {
  border-top: 1px solid #e5e5e5; }
#page_help .ec-borderedDefs dt {
    width: 28%;
    padding-right: 10px; }
#page_help .ec-borderedDefs dd {
    width: 72%;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #000000; }
#page_help .ec-borderedDefs dl {
    border-bottom: 1px solid #e5e5e5; }
#page_help .ec-borderedDefs .ec-help__listwrapper {
    margin-top: 24px;
    margin-bottom: 24px; }
#page_help .ec-borderedDefs .ec-help__listwrapper .ec-help__list {
      margin-left: calc((100vw - 40px) * 0.15); }
#page_help .ec-borderedDefs .ec-help__listwrapper .ec-help__list li {
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0.02em;
        color: #818181;
        margin-bottom: 16px; }
#page_help .ec-borderedDefs .ec-help__listwrapper .ec-help__list a {
        font-size: 14px;
        line-height: 160%;
        letter-spacing: 0.02em;
        color: #818181;
        text-decoration: underline; }
#page_help .ec-help__cancel .ec-blockBtn--cancel {
  font-weight: normal;
  font-size: 13px;
  line-height: 19px;
  letter-spacing: 0.02em;
  color: #000000;
  width: 144px;
  height: 32px;
  border: 1px solid #000000;
  margin-bottom: 24px; }
#page_help .ec-onecolumn {
  padding: 24px 16px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em; }
#page_help .ec-onecolumn .ec-blockBtn--action {
    margin-top: 24px; }
#page_help .ec-onecolumn .ec-blockBtn--action:hover, #page_help .ec-onecolumn .ec-blockBtn--action:active, #page_help .ec-onecolumn .ec-blockBtn--action:focus {
      background-color: #FCEFA4;
      border-color: #FCEFA4; }
#page_help .ec-ec-role__actions {
  margin-top: 64px; }
#page_help .ec-ec-role__actions .ec-blockBtn--cancel {
    width: 250px;
    height: 60px; }
#page_help .ec-help__attention {
  margin-top: 12px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em;
  margin-left: 16px; }
#page_help .ec-help__line {
  border-top: 1px solid #e5e5e5;
  margin: 0; }
.ec-accordion__container .accordion-title {
  position: relative;
  font-weight: 600;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 24px 0px 24px 16px;
  width: 84%; }
.ec-accordion__container .accordion-title:after {
  content: "";
  position: absolute;
  right: -30px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 10px;
  height: 10px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  transform: rotate(135deg); }
.ec-accordion__container .accordion-title.open:after {
  transform: rotate(-45deg);
  top: 45%; }
.ec-accordion__container .accordion-content {
  display: none;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em;
  padding: 0 16px 24px; }
/*
鳩サブレー紹介ページ
*/
#page_hato .ec-layoutRole__contents {
  max-width: none;
  padding: 0; }
#page_hato .ec-layoutRole .ec-layoutRole__footer {
  margin-top: 60px; }
.ec-hatoRole__inner {
  padding: 0 20px; }
.ec-hatoRole__top__inner {
  display: flex;
  align-items: stretch;
  flex-direction: column-reverse;
  padding: 54px 0 0; }
.ec-hatoRole__top__inner__text {
    background-color: #fde260;
    display: flex;
    justify-content: flex-end; }
.ec-hatoRole__top__inner__text__inner {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%; }
.ec-hatoRole__top__inner .hatosable_text {
    height: auto;
    width: 176px;
    padding: 34px 0 32px; }
.ec-hatoRole__top__inner__img {
    line-height: 0;
    display: flex;
    justify-content: flex-start;
    background-color: #f5f3f1; }
.ec-hatoRole__top__inner__img__inner {
      max-width: 640px;
      width: 100%; }
.ec-hatoRole__top__inner .hatosable_box {
    height: auto;
    width: 100%; }
.ec-hatoRole__story {
  position: relative; }
.ec-hatoRole__story__toptitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 74px; }
.ec-hatoRole__story__toptitle h1 {
      line-height: 0;
      margin-bottom: 23px; }
.ec-hatoRole__story__toptitle h1 img {
        height: 31px;
        width: 161px; }
.ec-hatoRole__story__toptitle .ec-hatoRole__story__sable {
      height: 76px;
      width: 98px; }
.ec-hatoRole__story__contents {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px; }
.ec-hatoRole__story__contents__title {
      display: flex;
      flex-direction: column;
      align-items: center; }
.ec-hatoRole__story__contents .ec-hatoRole__story__sable {
      height: 48px;
      width: 66px; }
.ec-hatoRole__story__contents__box {
      display: flex;
      flex-direction: column;
      align-items: center; }
.ec-hatoRole__story__contents__text {
      line-height: 2.15; }
.ec-hatoRole__story__contents h2 {
      padding: 0; }
.ec-hatoRole__story__contents.__01 {
      margin-top: 60px; }
.ec-hatoRole__story__contents.__01 .ec-hatoRole__story__contents__img {
        margin-top: 40px; }
.ec-hatoRole__story__contents.__01 .ec-hatoRole__story__contents__title__img {
        margin: 0 0 41px;
        height: 19px;
        width: 283px; }
.ec-hatoRole__story__contents.__02 {
      margin-top: 83px; }
.ec-hatoRole__story__contents.__02 .ec-hatoRole__story__contents__img {
        margin-top: 14px; }
.ec-hatoRole__story__contents.__02 .ec-hatoRole__story__contents__title__img {
        margin: 45px 0 40px;
        height: 20px;
        width: 184px; }
.ec-hatoRole__story__contents.__03 {
      margin-top: 74px; }
.ec-hatoRole__story__contents.__03 .ec-hatoRole__story__contents__img {
        margin-top: 25px; }
.ec-hatoRole__story__contents.__03 .ec-hatoRole__story__contents__title__img {
        margin: 39px 0 33px;
        height: 21px;
        width: 184px; }
.ec-hatoRole__story__contents.__04 {
      margin-top: 74px; }
.ec-hatoRole__story__contents.__04 .ec-hatoRole__story__contents__img {
        margin-top: 19px; }
.ec-hatoRole__story__contents.__04 .ec-hatoRole__story__contents__title__img {
        margin: 45px 0 35px;
        height: 18px;
        width: 235px; }
.ec-hatoRole__story__contents.__05 {
      margin-top: 75px; }
.ec-hatoRole__story__contents.__05 .ec-hatoRole__story__contents__img {
        margin-top: 35px; }
.ec-hatoRole__story__contents.__05 .ec-hatoRole__story__contents__title__img {
        margin: 33px 0 34px;
        height: 48px;
        width: 259px; }
.ec-hatoRole__otherLink {
  text-align: center;
  padding-top: 98px; }
.ec-hatoRole__otherLink h3 {
    line-height: 1; }
.ec-hatoRole__otherLink h3 img {
      height: 46px;
      width: 158px;
      margin: 0 auto; }
.ec-hatoRole__otherLink p {
    margin-top: 28px; }
.ec-hatoRole__otherLink .ec-blockBtn--primary {
    border: 2px solid #000;
    margin-top: 55px;
    position: relative; }
.ec-hatoRole__otherLink .ec-blockBtn--primary img {
      height: 16px;
      width: 141px; }
.ec-hatoRole__otherLink .ec-blockBtn--primary p {
      margin-top: 0; }
.ec-hatoRole__otherLink .ec-blockBtn--primary::before {
      content: "";
      background-image: url(../img/hatosable/hatosable_sable.png);
      background-size: contain;
      background-repeat: no-repeat;
      position: absolute;
      top: 45%;
      left: -20px;
      transform: translateY(-50%);
      height: 48px;
      width: 66px; }
/*
ご利用ガイド
*/
#page_help_guide .ec-ec-role__actions {
  margin-top: 64px; }
#page_help_guide .ec-borderedDefs {
  border-top: 1px solid #e5e5e5; }
#page_help_guide .ec-borderedDefs dt {
    width: 28%;
    padding-right: 10px; }
#page_help_guide .ec-borderedDefs dd {
    width: 72%;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #000000; }
#page_help_guide .ec-borderedDefs dl {
    border-bottom: 1px solid #e5e5e5; }
#page_help_guide .ec-borderedDefs .ec-label {
    font-size: 14px;
    line-height: 21px;
    letter-spacing: 0.02em;
    color: #818181;
    margin-bottom: 0; }
#page_help_guide .ec-borderedDefs ul {
    display: flex;
    margin: 8px 0; }
#page_help_guide .ec-borderedDefs li {
    width: 50px;
    margin-right: 8px; }
#page_help_guide .ec-borderedDefs li img {
      width: 100%; }
#page_help_guide .ec-onecolumn {
  text-align: center;
  padding-top: 16px;
  padding-bottom: 16px; }
#page_help_guide .ec-onecolumn .ec-blockBtn--cancel {
    font-size: 13px;
    line-height: 19px;
    letter-spacing: 0.02em;
    color: #000000;
    border: 1px solid #000000;
    width: 104px;
    height: 32px;
    margin-top: 12px;
    font-weight: normal; }
#page_help_guide .ec-onecolumn.text-left {
    text-align: left; }
#page_help_guide .page-call {
  margin-bottom: 8px; }
#page_help_guide .page-call p {
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 160%;
    color: #818181;
    border-bottom: none; }
#page_help_guide .block-flex {
  display: flex;
  flex-direction: column; }
#page_help_guide .ec-ec-role__actions {
  margin-top: 64px; }
#page_help_guide .ec-help__attention {
  margin-top: 12px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em;
  margin-left: 16px; }
#page_help_guide .ec-help__line {
  border-top: 1px solid #e5e5e5;
  margin: 0; }
#page_help_guide #payment, #page_help_guide #payment_method, #page_help_guide #delivery {
  padding-top: 100px;
  margin-top: -52px; }
#page_help_guide .ec-off1Grid {
  margin-bottom: 0; }
/*
送料について（guide/shipping）
*/
#page_guide_shipping .ec-ec-role__actions {
  margin-top: 64px; }
#page_guide_shipping .ec-shipping__description {
  max-width: 594px;
  margin-top: 24px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em; }
#page_guide_shipping .ec-ec-role__actions {
  margin-top: 64px; }
#page_guide_shipping table {
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.02em;
  margin-top: 16px; }
#page_guide_shipping table tr:not(:first-of-type) {
    border-bottom: 1px solid #ccc; }
#page_guide_shipping table tr td {
    padding-top: 16px;
    padding-bottom: 16px; }
#page_guide_shipping table tr td:last-of-type {
      padding-right: 40px;
      text-align: right; }
#page_guide_shipping .ec-table__th {
  background: #F7F6F1; }
#page_guide_shipping .ec-table__th th {
    padding-top: 6px;
    padding-bottom: 5px; }
#page_guide_shipping .ec-table__th th:first-of-type {
      width: 20%;
      padding-left: 40px; }
#page_guide_shipping .ec-table__th th:nth-of-type(2) {
      width: 61.5%;
      padding-left: 24px; }
#page_guide_shipping .ec-table__th th:last-of-type {
      width: 18.5%;
      padding-left: 50px; }
#page_guide_shipping .ec-table__description {
  font-size: 12px;
  line-height: 18px;
  color: #000000; }
#page_guide_shipping .ec-table__pref {
  color: #000000;
  padding-left: 24px; }
#page_guide_shipping .ec-table__area {
  padding-left: 40px;
  color: #000000;
  vertical-align: middle; }
#page_guide_shipping dl {
  padding-top: 16px;
  padding-bottom: 16px; }
#page_guide_shipping dl dt {
    width: 72%;
    display: block;
    padding-left: 16px; }
#page_guide_shipping dl dt .ec-label {
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.02em;
      color: #000000;
      margin-bottom: 4px; }
#page_guide_shipping dl dt p {
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.02em;
      color: #000000; }
#page_guide_shipping dl dd {
    width: 28%;
    padding-right: 16px;
    text-align: right; }
#page_guide_shipping .ec-shipping__sp {
  margin-top: 16px; }
#page_guide_shipping .ec-shipping__sp .ec-borderedDefs {
    margin-top: 8px; }
#page_guide_shipping .ec-shipping__sp .ec-shipping__spPref {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #000000; }
#page_guide_shipping .ec-shipping__sp .ec-shipping__spPref:not(:first-of-type) {
      margin-top: 8px; }
#page_guide_shipping .ec-shipping__sp dt label {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #000000; }
#page_guide_shipping .ec-shipping__sp .ec-shipping__spDescription {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.02em;
    color: #000000;
    margin-top: 4px; }
#page_guide_shipping #delivery_fee {
  padding-top: 100px;
  margin-top: -52px; }
#page_guide_shipping .ec-off1Grid {
  margin-bottom: 0; }
/*
送料について（kamakura/shipping）
*/
#page_kamakura_shipping .ec-ec-role__actions {
  margin-top: 64px; }
#page_kamakura_shipping .ec-shipping__description {
  margin-top: 24px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em; }
#page_kamakura_shipping .ec-ec-role__actions {
  margin-top: 64px; }
#page_kamakura_shipping .ec-borderedDefs {
  border-top: none; }
#page_kamakura_shipping .ec-borderedDefs:first-of-type {
    border-top: 1px solid #ccc; }
#page_kamakura_shipping table {
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.02em;
  margin-top: 16px; }
#page_kamakura_shipping table tr:not(:first-of-type) {
    border-bottom: 1px solid #ccc; }
#page_kamakura_shipping table tr td {
    padding-top: 16px;
    padding-bottom: 16px; }
#page_kamakura_shipping table tr td:last-of-type {
      padding-right: 40px;
      text-align: right; }
#page_kamakura_shipping .ec-table__th {
  background: #F7F6F1; }
#page_kamakura_shipping .ec-table__th th {
    padding-top: 6px;
    padding-bottom: 5px; }
#page_kamakura_shipping .ec-table__th th:first-of-type {
      width: 20%;
      padding-left: 40px; }
#page_kamakura_shipping .ec-table__th th:nth-of-type(2) {
      width: 61.5%;
      padding-left: 24px; }
#page_kamakura_shipping .ec-table__th th:last-of-type {
      width: 18.5%;
      padding-left: 350px; }
#page_kamakura_shipping .ec-table__description {
  font-size: 12px;
  line-height: 18px;
  color: #818181; }
#page_kamakura_shipping .ec-table__pref {
  color: #000000;
  padding-left: 24px; }
#page_kamakura_shipping .ec-table__area {
  padding-left: 40px;
  vertical-align: middle; }
#page_kamakura_shipping dl {
  padding-top: 16px;
  padding-bottom: 16px; }
#page_kamakura_shipping dl dt {
    width: 72%;
    display: block;
    padding-left: 16px; }
#page_kamakura_shipping dl dt .ec-label {
      font-size: 14px;
      line-height: 21px;
      letter-spacing: 0.02em;
      color: #000000;
      margin-bottom: 4px; }
#page_kamakura_shipping dl dt p {
      font-size: 12px;
      line-height: 18px;
      letter-spacing: 0.02em;
      color: #818181; }
#page_kamakura_shipping dl dd {
    width: 28%;
    padding-right: 16px;
    text-align: right; }
#page_kamakura_shipping .ec-shipping__sp {
  margin-top: 16px; }
#page_kamakura_shipping .ec-shipping__sp .ec-borderedDefs {
    margin-top: 0; }
#page_kamakura_shipping .ec-shipping__sp .ec-shipping__spPref {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #818181; }
#page_kamakura_shipping .ec-shipping__sp .ec-shipping__spPref:not(:first-of-type) {
      margin-top: 8px; }
#page_kamakura_shipping .ec-shipping__sp dt label {
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0.02em;
    color: #000000; }
#page_kamakura_shipping .ec-shipping__sp .ec-shipping__spDescription {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.02em;
    color: #818181;
    margin-top: 4px; }
#page_kamakura_shipping #delivery_fee {
  padding-top: 100px;
  margin-top: -52px; }
#page_kamakura_shipping .ec-off1Grid {
  margin-bottom: 0; }
/*
送料について/FAX・電話（guide/shipping/tel）
*/
#page_guide_shipping_tel .ec-shipping__description {
  margin-top: 16px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 180%;
  letter-spacing: 0.02em; }
#page_guide_shipping_tel .ec-select {
  margin-top: 24px;
  margin-bottom: 40px; }
#page_guide_shipping_tel .ec-select select.js-deliv-select {
    display: inline-block;
    width: 175px;
    height: 44px;
    font-size: 17px;
    line-height: 25px;
    letter-spacing: 0.05em;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: #fff url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
#page_guide_shipping_tel .ec-select select.js-deliv-select::-ms-expand {
      display: none; }
#page_guide_shipping_tel .ec-select select.js-deliv-select:focus {
      box-shadow: none;
      border-color: #000;
      background: #fff url(../img/icon/ic_selectbox.svg) no-repeat center right 15px/10px 8px; }
#page_guide_shipping_tel .js-deliv-pref {
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 17px;
  line-height: 160%;
  letter-spacing: 0.02em; }
#page_guide_shipping_tel .js-deliv-pref span {
    font-weight: normal;
    font-size: 14px;
    margin-left: 4px; }
#page_guide_shipping_tel .js-deliv-note {
  display: none;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: #818181;
  margin-top: 8px; }
#page_guide_shipping_tel .js-deliv-note p {
    margin-top: 4px; }
#page_guide_shipping_tel .ec-shipping__table {
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.02em; }
#page_guide_shipping_tel .ec-shipping__table th {
    background: #F7F6F1;
    width: 25%;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 1px; }
#page_guide_shipping_tel .ec-shipping__table td {
    text-align: right;
    padding: 16px 12px 16px; }
#page_guide_shipping_tel .ec-shipping__table .ec-shipping__border {
    border-bottom: 1px solid #E6E6E6; }
#page_guide_shipping_tel .ec-size__table {
  width: 100%;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.02em;
  text-align: center; }
#page_guide_shipping_tel .ec-size__table tr {
    border-bottom: 1px solid #E6E6E6; }
#page_guide_shipping_tel .ec-size__table th {
    background: #F7F6F1;
    padding-top: 6px;
    padding-bottom: 5px;
    text-align: center; }
#page_guide_shipping_tel .ec-size__table td {
    padding-top: 12px;
    padding-bottom: 12px;
    width: 36%; }
#page_guide_shipping_tel .ec-size__table .size {
    width: 28%;
    background: #F7F6F1; }
#page_guide_shipping_tel .ec-ec-role__actions {
  margin-top: 64px; }
/*
ご利用規約（help/agreement）
プライバシーポリシー（help/privacy）
*/
#page_help_agreement .ec-position-relative,
#page_help_privacy .ec-position-relative {
  position: relative; }
#page_help_agreement .ec-help__inner h2,
#page_help_privacy .ec-help__inner h2 {
  font-size: 14px;
  margin-top: 30px; }
#page_help_agreement .ec-help__text:first-of-type,
#page_help_privacy .ec-help__text:first-of-type {
  margin-top: 13px; }
#page_help_agreement .ec-ec-role__actions,
#page_help_privacy .ec-ec-role__actions {
  margin-top: 64px; }
/*
採用情報（recruit）
*/
#page_recruit h1 {
  margin-top: 29px; }
.ec-recruit {
  padding: 0; }
.ec-recruit .ec-pageHeader {
    margin-left: 20px; }
.ec-recruit__inner {
    margin: 0 auto 61px;
    padding: 0 20px;
    /* 採用状況一覧 */
    /* 中途採用比率 */ }
.ec-recruit__inner__introtext {
      line-height: 2.15;
      text-align: center;
      margin-top: 30px; }
.ec-recruit__inner__list {
      margin-top: 60px; }
.ec-recruit__inner__list th {
        font-weight: 600;
        width: 107px; }
.ec-recruit__inner__list td {
        padding-bottom: 30px; }
.ec-recruit__inner__list tr:first-child td {
        padding-bottom: 13px; }
.ec-recruit__inner__list a.__mynavi {
        display: flex;
        justify-content: center; }
.ec-recruit__inner__list a.__mynavi img {
          height: 71px;
          width: 80px; }
.ec-recruit__inner__list a.__mynavi2 {
        display: flex;
        justify-content: center; }
.ec-recruit__inner__list a.__mynavi2 img {
          margin-top: 8px;
          height: 60px;
          width: auto; }
.ec-recruit__inner__list a.__mynavibaito {
        display: flex;
        justify-content: center; }
.ec-recruit__inner__list a.__mynavibaito img {
          margin-top: 24px;
          width: 180px; }
.ec-recruit__inner__list a.__airwork {
        display: flex;
        justify-content: center; }
.ec-recruit__inner__list a.__airwork img {
          margin-top: 24px;
          width: 180px; }
.ec-recruit__inner__list a.__baitoru {
        display: flex;
        justify-content: center; }
.ec-recruit__inner__list a.__baitoru img {
          margin-top: 8px;
          height: 60px;
          width: auto; }
.ec-recruit__inner__pastData {
      margin-top: 8px; }
.ec-recruit__inner__pastData h2 {
        padding: 0;
        font-size: 14px;
        margin-bottom: 20px;
        line-height: 1.35;
        letter-spacing: .08rem; }
.ec-recruit__inner__pastData__listsp {
        border: 1px solid #000;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: .05rem;
        font-size: 14px;
        height: 67px;
        width: 100%; }
.ec-recruit__inner__pastData__listsp .ec-recruit__inner__pastData__list__box:first-child {
          border-left: none; }
.ec-recruit__inner__pastData__list__box {
        border-left: 1px solid #000;
        padding: 0 19px;
        text-align: center; }
.ec-recruit__inner__pastData__list__box.__title {
          border-left: none;
          margin-bottom: 10px; }
.ec-recruit__inner__pastData__list__box__line {
          border-top: 1px solid #000;
          width: 100%; }
.ec-recruit .ec-ec-role__actions a {
    border: 1px solid #000; }
/*
会社概要（help/about）
*/
#page_help_about .ec-layoutRole__contents {
  padding-top: 0; }
#page_help_about .ec-help__aboutKv {
  margin: 0 calc(50% - 50vw);
  padding-top: 54px; }
#page_help_about h1 {
  margin-top: 24px; }
#page_help_about .ec-borderedDefs {
  border: none;
  margin-top: 19px; }
#page_help_about .ec-borderedDefs dl {
    border: none;
    padding: 19px 0; }
#page_help_about .ec-borderedDefs dt {
    padding-left: 0;
    display: block; }
#page_help_about .ec-borderedDefs dd {
    padding-left: 14px; }
#page_help_about .ec-borderedDefs .ec-label {
    font-size: 13px;
    font-weight: 600; }
#page_help_about .ec-borderedDefs .ec-about__employees {
    display: flex; }
#page_help_about .ec-borderedDefs dd {
    font-size: 13px; }
#page_help_about .ec-off1Grid {
  margin-bottom: 0; }
#page_help_about .ec-ec-role__actions {
  margin-top: 37px; }
#page_help_about .ec-ec-role__actions a {
    border: 1px solid #000; }
#page_help_about .ec-layoutRole__footer {
  margin-top: 60px; }
/*
豊島屋の取り組み
*/
.ec-activity-position-relative {
  position: relative; }
.ec-activityRole__head {
  height: 185px;
  width: 100%; }
.ec-activityRole__head__pc {
    display: flex;
    overflow: hidden; }
.ec-activityRole__head__pc img {
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover; }
.ec-activityRole__head .ec-topRole__hatoSable__sablo {
    height: 100%;
    margin-top: 0; }
.ec-activityRole__head .ec-topRole__hatoSable__sablo__inner {
      position: initial;
      -webkit-animation: none;
              animation: none;
      margin-left: -70px;
      margin-top: -40px; }
.ec-activityRole__head .ec-topRole__hatoSable__sablo__inner ul:nth-child(even) {
        margin-left: 66px; }
.ec-activityRole__head .ec-topRole__hatoSable__sablo__inner li {
        margin-left: 60px;
        width: 103px; }
.ec-activityRole__head .ec-topRole__hatoSable__sablo__inner li img {
          -webkit-animation: none;
                  animation: none; }
.ec-activityRole__2col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px 0; }
.ec-activityRole__2col h2 {
    padding: 0; }
.ec-activityRole__2col img {
    margin-bottom: 35px;
    height: 101px;
    width: auto; }
.ec-activityRole__2col__text {
    line-height: 2.15; }
.ec-activityRole__about {
  display: flex;
  flex-direction: column;
  align-items: baseline;
  padding: 50px 20px; }
.ec-activityRole__about__title {
    margin-bottom: 1px;
    width: 234px;
    height: 29px; }
.ec-activityRole__beach {
  padding-bottom: 65px; }
.ec-activityRole__fireworks {
  padding-bottom: 65px; }
.ec-activityRole__carnival {
  padding-bottom: 65px; }
.ec-activityRole__carnival__img {
    display: flex;
    justify-content: center;
    margin-top: 35px; }
.ec-activityRole__carnival__img img {
      width: 41.2%;
      height: 27.4vw; }
.ec-activityRole__carnival__img img:first-child {
      margin-right: 5px; }
.ec-activityRole__school {
  padding-bottom: 65px; }
.ec-activityRole__school__img {
    margin-top: 40px;
    margin-left: 20px;
    margin-right: 20px; }
.ec-activityRole__package__img {
  display: flex;
  justify-content: center;
  margin-top: 35px; }
.ec-activityRole__package__img img {
    width: 41.2%;
    height: 27.4vw; }
.ec-activityRole__package__img img:first-child {
    margin-right: 5px; }
.ec-activityRole__otherLink {
  margin-top: 60px; }
.ec-activityRole__otherLink .ec-blockBtn--primary {
    border-color: #000; }
/*
カレンダーページのscss

break pointはmedia_desktopにする
*/
.ec-calendar-top {
  background-color: #FDE260;
  padding: 20px 0 80px; }
.ec-calendar-top-wrapper-images {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 90%;
    margin: auto;
    padding-bottom: 30px;
    flex-wrap: wrap; }
.ec-calendar-top-icon {
    margin-bottom: 10px;
    transition: none; }
.ec-calendar-top__text {
    color: #000; }
.ec-calendar-top__logo {
    display: block;
    width: calc(547px / 2);
    margin: 0 auto 30px; }
.calendar-april-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/4/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1174px;
  margin: auto;
  height: calc(1174 / 670 * 90vw); }
.calendar-april__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/4/page1.png);
  width: 90vw;
  height: calc(1421 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-april__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/4/page2.png);
  width: 90vw;
  height: calc(1469/ 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-april__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/4/page3.png);
  width: 90vw;
  height: calc(1620 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-april__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/4/page4.png);
  width: 90vw;
  height: calc(1421 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-april__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/4/page5.png);
  width: 90vw;
  height: calc(1657 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-april__page-6-bg {
  background-image: url(../../assets/img/calendar/sp/4/page6.png);
  width: 90vw;
  height: calc(1311 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-january-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/1/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1139px;
  margin: auto;
  height: calc(1139 / 670 * 90vw); }
.calendar-january-eventSp {
  width: 12%;
  height: auto;
  margin: 0 3%; }
.calendar-january-eventPc {
  width: 15%;
  height: auto;
  margin: 0 3%; }
.calendar-january__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/1/page1.png);
  width: 90vw;
  height: calc(1521 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-january__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/1/page2.png);
  width: 90vw;
  height: calc(1321 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-january__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/1/page3.png);
  width: 90vw;
  height: calc(1271 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-january__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/1/page4.png);
  width: 90vw;
  height: calc(1870 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-january__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/1/page5.png);
  width: 90vw;
  height: calc(1721 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-january__page-6-bg {
  background-image: url(../../assets/img/calendar/sp/1/page6.png);
  width: 90vw;
  height: calc(1372 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-february-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/2/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1139px;
  margin: auto;
  height: calc(1139 / 670 * 90vw); }
.calendar-february__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/2/page1.png);
  width: 90vw;
  height: calc(1971 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-february__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/2/page2.png);
  width: 90vw;
  height: calc(1421 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-february__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/2/page3.png);
  width: 90vw;
  height: calc(1421 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-february__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/2/page4.png);
  width: 90vw;
  height: calc(2137 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-february__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/2/page5.png);
  width: 90vw;
  height: calc(1432 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-march-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/3/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1175px;
  margin: auto;
  height: calc(1175 / 670 * 90vw); }
.calendar-march-eventSp {
  width: 12%;
  height: auto;
  margin: 0 3%; }
.calendar-march__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/3/page1.png);
  width: 90vw;
  height: calc(1521 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-march__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/3/page2.png);
  width: 90vw;
  height: calc(1571 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-march__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/3/page3.png);
  width: 90vw;
  height: calc(1371 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-march__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/3/page4.png);
  width: 90vw;
  height: calc(1435 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-march__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/3/page5.png);
  width: 90vw;
  height: calc(1415 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-may-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/5/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1226px;
  margin: auto;
  height: calc(1226 / 670 * 90vw); }
.calendar-may__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/5/page1.png);
  width: 90vw;
  height: calc(1620 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-may__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/5/page2.png);
  width: 90vw;
  height: calc(1422 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-may__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/5/page3.png);
  width: 90vw;
  height: calc(1968 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-may__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/5/page4.png);
  width: 90vw;
  height: calc(2551 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-may__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/5/page5.png);
  width: 90vw;
  height: calc(1532 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-june-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/6/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1268px;
  margin: auto;
  height: calc(1268 / 670 * 90vw); }
.calendar-june__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/6/page1.png);
  width: 90vw;
  height: calc(1369 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-june__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/6/page2.png);
  width: 90vw;
  height: calc(1621 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-june__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/6/page3.png);
  width: 90vw;
  height: calc(1469 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-june__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/6/page4.png);
  width: 90vw;
  height: calc(2083 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-june__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/6/page5.png);
  width: 90vw;
  height: calc(1384 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/7/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1175px;
  margin: auto;
  height: calc(1175 / 670 * 90vw); }
.calendar-july__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/7/page1.png);
  width: 90vw;
  height: calc(1519 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/7/page2.png);
  width: 90vw;
  height: calc(1519 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/7/page3.png);
  width: 90vw;
  height: calc(1669 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/7/page4.png);
  width: 90vw;
  height: calc(1618 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/7/page5_2.png);
  width: 90vw;
  height: calc(4155 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july__page-6-bg {
  background-image: url(../../assets/img/calendar/sp/7/page6.png);
  width: 90vw;
  height: calc(1651 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-july__page-7-bg {
  background-image: url(../../assets/img/calendar/sp/7/page7.png);
  width: 90vw;
  height: calc(1646 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-august-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/8/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1175px;
  margin: auto;
  height: calc(1175 / 670 * 90vw); }
.calendar-august__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/8/page1.png);
  width: 90vw;
  height: calc(1667 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-august__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/8/page2.png);
  width: 90vw;
  height: calc(1520 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-august__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/8/page3.png);
  width: 90vw;
  height: calc(1619 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-august__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/8/page4.png);
  width: 90vw;
  height: calc(2133 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-august__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/8/page5.png);
  width: 90vw;
  height: calc(1488 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-august__page-6-bg {
  background-image: url(../../assets/img/calendar/sp/8/page6.png);
  width: 90vw;
  height: calc(1502 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-september-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/9/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1175px;
  margin: auto;
  height: calc(1175 / 670 * 90vw); }
.calendar-september__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/9/page1.png);
  width: 90vw;
  height: calc(1521 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-september__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/9/page2.png);
  width: 90vw;
  height: calc(2070 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-september__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/9/page3.png);
  width: 90vw;
  height: calc(1719 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-september__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/9/page4.png);
  width: 90vw;
  height: calc(2451 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-september__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/9/page5.png);
  width: 90vw;
  height: calc(1430 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/10/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1195px;
  margin: auto;
  height: calc(1195 / 670 * 90vw); }
.calendar-october__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/10/page1.png);
  width: 90vw;
  height: calc(1720 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/10/page2.png);
  width: 90vw;
  height: calc(1568 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/10/page3.png);
  width: 90vw;
  height: calc(1568 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/10/page4.png);
  width: 90vw;
  height: calc(1921 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october__page-5-bg {
  background-image: url(../../assets/img/calendar/sp/10/page5.png);
  width: 90vw;
  height: calc(2641 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october__page-6-bg {
  background-image: url(../../assets/img/calendar/sp/10/page6.png);
  width: 90vw;
  height: calc(1312 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-october__page-7-bg {
  background-image: url(../../assets/img/calendar/sp/10/page7.png);
  width: 90vw;
  height: calc(1295 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-november-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/11/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1275px;
  margin: auto;
  height: calc(1275 / 670 * 90vw); }
.calendar-november__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/11/page1.png);
  width: 90vw;
  height: calc(1720 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-november__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/11/page2.png);
  width: 90vw;
  height: calc(2332 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-november__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/11/page3.png);
  width: 90vw;
  height: calc(1355 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-december-paper-bg {
  display: block;
  background-image: url(../../assets/img/calendar/sp/12/bg.png);
  width: 90vw;
  max-width: 670px;
  max-height: 1315px;
  margin: auto;
  height: calc(1315 / 670 * 90vw); }
.calendar-december__page-1-bg {
  background-image: url(../../assets/img/calendar/sp/12/page1.png);
  width: 90vw;
  height: calc(1421 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-december__page-2-bg {
  background-image: url(../../assets/img/calendar/sp/12/page2.png);
  width: 90vw;
  height: calc(1371 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-december__page-3-bg {
  background-image: url(../../assets/img/calendar/sp/12/page3.png);
  width: 90vw;
  height: calc(1622 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-december__page-4-bg {
  background-image: url(../../assets/img/calendar/sp/12/page4.png);
  width: 90vw;
  height: calc(1297 / 670 * 90vw);
  margin: auto;
  position: relative; }
.calendar-common-yellowBg {
  background-color: #FDE260; }
.calendar-common-default-bg {
  background: #FDE260;
  padding: 30px 0 30px 0; }
.calendar-common-bg-contain {
  background-size: contain;
  background-repeat: no-repeat; }
.calendar-common-position {
  position: relative; }
.calendar-common-events {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; }
.calendar-common-eventSp {
  width: 8%;
  height: auto;
  margin: 0 3%; }
.calendar-common-eventPc {
  width: 8.4%;
  height: auto;
  margin: 0 4%;
  cursor: pointer; }
.calendar-common-eventPc--wide {
  width: 13%;
  height: auto;
  margin: 0 5%;
  cursor: pointer; }
.calendar-common-illust {
  display: block;
  margin: 5% auto 0;
  width: 55%; }
.calendar-common-top {
  display: block;
  width: 86%;
  padding: 20px 0;
  margin: auto; }
.calendar-common-btn-action {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  cursor: pointer;
  border-radius: 35px;
  font-size: 16px;
  color: #000;
  background-color: #FDE260;
  width: 250px;
  height: 54px;
  letter-spacing: 2px;
  margin: 12px auto 0; }
.calendar-common__btn--action {
  margin: 10px 0;
  height: 60px;
  border: 2px solid #000; }
.calendar-common__btn--action:hover {
    border: 2px solid #000; }
.calendar-common__btn-img-top {
  width: calc(104px / 2); }
.calendar-common__btn-img-other {
  width: calc(194px / 2); }
.calendar-common-btn-textNext {
  position: relative;
  letter-spacing: 2px;
  margin-right: 20px; }
.calendar-common-btn-textNext::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 5px;
    display: inline-block;
    background-image: url(../../assets/img/calendar/common/array.png);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat; }
.calendar-common-btn-textPrev {
  position: relative;
  letter-spacing: 2px;
  margin-left: 20px; }
.calendar-common-btn-textPrev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -25px;
    transform: translateY(-50%);
    margin-right: 10px;
    display: inline-block;
    background-image: url(../../assets/img/calendar/common/arrayPrev.png);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat; }
.calendar-common-pageText {
  display: block;
  position: absolute;
  text-align: justify; }
.calendar-common-shadow {
  filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.2));
  transform: translate3d(0, 0, 0); }
.calendar-common-prevBtn {
  position: absolute; }
.calendar-common-nextBtn {
  position: absolute; }
.calendar-common-prevMonthBtn {
  margin-right: 10px;
  width: calc(62px / 2);
  height: calc(79px / 2); }
.calendar-common-nextMonthBtn {
  margin-left: 10px;
  width: calc(62px / 2);
  height: calc(79px / 2); }
.calendar-common-footerWrapper {
  background: #FDE260;
  padding-bottom: 25px; }
.calendar-common-flexWrap {
  display: flex;
  justify-content: center;
  align-items: center; }
.calendar-common-displayNone {
  display: none !important; }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
#page_shop .ec-layoutRole {
  background: #f7f7f7; }
#page_shop .ec-layoutRole h1 {
    margin-left: 20px;
    margin-bottom: 0; }
#page_shop .ec-layoutRole h1 img {
      height: 29px; }
#page_shop .ec-layoutRole h2 img {
    height: 19px; }
.no_scroll {
  overflow: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */ }
.no_scroll::-webkit-scrollbar {
    display: none; }
.page_shop_container {
  margin-top: 23px; }
.page_shop_map {
  position: relative;
  width: 375px;
  z-index: 0;
  /*
  @include media_sp {
    // スマホでは本店を常に大きく手前に
    ._marker[data-shop-id="shop1"]{
      transform:scale(1.5) !important;
      z-index:101;
    }
  }
  */ }
.page_shop_map ._map {
    width: 100%; }
.page_shop_map .toTimeChange {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 23px;
    right: 50%;
    transform: translateX(50%);
    background-color: #fde260;
    padding: 12px 18px; }
.page_shop_map .toTimeChange:hover, .page_shop_map .toTimeChange:active, .page_shop_map .toTimeChange:focus {
      background-color: #fcefa4; }
.page_shop_map .toTimeChange ._name {
      height: 15px;
      width: 187px; }
.page_shop_map .toTimeChange ._ic {
      margin-left: 5px;
      height: 18px;
      width: 18px; }
.page_shop_map body.modal-open {
    overflow: hidden;
    position: fixed; }
.page_shop_map ._shop {
    background: rgba(0, 0, 0, 0.2);
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    overflow: auto; }
.page_shop_map ._shop ._inner {
      background: #fff;
      margin: 74px 40px 0;
      padding: 15px; }
.page_shop_map ._shop.active {
      display: block;
      padding-bottom: 70px; }
.page_shop_map ._shop ._name {
      font-weight: bold;
      font-size: 19px;
      letter-spacing: 1px;
      margin: 26px 0 30px; }
.page_shop_map ._shop ._info {
      font-size: 12px; }
.page_shop_map ._shop ._info::after {
        content: "";
        display: table;
        clear: both; }
.page_shop_map ._shop ._info dt {
        width: 5em;
        float: left; }
.page_shop_map ._shop ._info dd {
        width: calc(100% - 5em);
        float: left;
        margin-bottom: 12px; }
.page_shop_map ._shop ._link:hover, .page_shop_map ._shop ._link:active, .page_shop_map ._shop ._link:focus {
      background-color: #fcefa4;
      border-color: #fcefa4; }
.page_shop_map ._shop ._close {
      display: none;
      /**
      position:absolute;
      right:40px;
      top:88px;
      width:25px;
      height:25px;
      background:url(../img/shop/close.png) no-repeat 0 0;
      background-size:100% 100%;
      cursor:pointer;
      @include media_desktop {
        display:none;
      }
      **/ }
.page_shop_map ._shop ._link,
    .page_shop_map ._shop ._closebtn {
      font-size: 14px;
      width: 75%;
      height: 40px;
      margin: 15px auto 5px; }
.page_shop_map ._arrow {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none; }
.page_shop_map ._markers {
    position: absolute;
    left: 0;
    top: 0; }
.page_shop_map ._marker,
  .page_shop_map ._markerlive {
    position: absolute;
    width: 39px;
    height: 47px;
    background: url(../img/shop/marker.png) no-repeat 0 0;
    background-size: 100% 100%;
    z-index: 99;
    transform-origin: center bottom;
    transition: transform 0.3s ease-in-out;
    cursor: pointer;
    z-index: 100; }
.page_shop_map ._marker.active,
  .page_shop_map ._markerlive.active {
    transform: scale(1.5);
    z-index: 110; }
.page_shop_map ._markerlive.shoplive {
    background-image: url(../img/icon/ic_live_map.png);
    background-size: contain;
    height: 25px;
    width: 43px; }
#page_shop .shoplive-popup {
  display: none;
  height: 100vh;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 111000000000000000;
  overflow-y: scroll;
  -ms-overflow-style: none;
  /* IE, Edge 対応 */
  scrollbar-width: none;
  /* Firefox 対応 */ }
#page_shop .shoplive-popup::-webkit-scrollbar {
    display: none; }
#page_shop .shoplive-popup ._inner {
    background: #fff;
    padding: 15px 12px 14px;
    width: 295px;
    position: relative;
    top: 75px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center; }
#page_shop .shoplive-popup ._inner h2 {
      text-align: left;
      margin: 0 auto;
      padding: 0; }
#page_shop .shoplive-popup ._inner h2 img.shoplive-popup__title {
        height: 21px;
        width: 158px; }
#page_shop .shoplive-popup .shoplive-popup__close.x-btn {
    display: none;
    position: absolute;
    right: 16px;
    top: 14px; }
#page_shop .shoplive-popup .shoplive-popup__close.x-btn img {
      height: 40px;
      width: 40px; }
#page_shop .shoplive-popup #id_img_jpeg {
    margin-top: 10px;
    margin-bottom: 23px;
    height: 205px;
    width: 271px; }
#page_shop .shoplive-popup__text {
    font-size: 11px;
    margin-bottom: 25px; }
#page_shop .shoplive-popup .ec-blockBtn--cancel {
    height: 40px;
    width: 200px;
    font-size: 14px; }
.page_shop_shops {
  background: #fff;
  padding: 20px 0;
  margin-top: 20px; }
.page_shop_shops::after {
    content: "";
    display: table;
    clear: both; }
.page_shop_shops h2 {
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 20px;
    margin: 0 20px 20px;
    border-bottom: #000 1px solid; }
.page_shop_shops ._group_sp {
    float: left;
    width: 50%; }
.page_shop_shops ._shop {
    margin-bottom: 2px; }
.page_shop_shops ._shop a {
      display: block;
      text-decoration: none;
      height: 38px;
      line-height: 38px;
      padding: 0 26px;
      font-size: 13px;
      color: #000;
      cursor: pointer; }
.page_shop_shops ._shop a::before {
      content: ">"; }
.page_shop_shops ._shop a.active,
    .page_shop_shops ._shop a:hover {
      background: #fde260; }
.page_shop_menu {
  margin-top: 0; }
.shop_page ._col2 {
  background: #fff;
  padding: 0 27px 20px; }
.shop_page ._col2 ._item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 22px 5px 0;
    border-bottom: #000 1px solid;
    font-size: 11px; }
.shop_page ._col2 ._group_pc:last-child ._item:last-child {
    border-bottom: none; }
.shop_page ._col2 h3 {
    margin-bottom: 12px;
    width: 26%;
    line-height: 1.2;
    font-weight: bold;
    font-size: 11px; }
.shop_page ._col2 ._item ul {
    flex-grow: 1;
    width: 200px; }
.shop_page ._col2 ._item li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px; }
.page_shop_seller ._name {
  flex-grow: 1; }
.page_shop_seller ._phone {
  width: 7em;
  flex-shrink: 0;
  text-align: right;
  flex-grow: 2; }
.page_shop_openhours ._intro {
  margin: 40px auto 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
.page_shop_openhours ._intro h2 {
    margin-bottom: 12px; }
.page_shop_openhours ._intro ._text {
    display: inline-block;
    font-size: 13px;
    width: 75%; }
.page_shop_openhours ._col2 h3 {
  width: 30%; }
.page_shop_openhours ._col2 ._date {
  flex-grow: 1; }
.page_shop_openhours ._col2 ._hour {
  width: 7em;
  flex-shrink: 0;
  text-align: left; }
.page_shop_openhours ._col2 p {
  margin-bottom: 12px; }
.page_shop_openhours ._col2 ._item li {
  margin-bottom: 13px; }
#page_shop .ec-ec-role__actions {
  margin-top: 78px; }
#page_shop .ec-position-relative {
  position: relative; }
#page_shop .ec-blockBtn--cancel {
  background: transparent; }
#page_shop .ec-blockBtn--cancel:hover, #page_shop .ec-blockBtn--cancel:active, #page_shop .ec-blockBtn--cancel:focus {
    background-color: rgba(0, 0, 0, 0.05); }
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
.hato_collection_page h1 {
  height: 32px;
  margin-bottom: 36px;
  margin-left: -2px; }
.hato_collection_page .ec-layoutRole__mainBottom {
  display: none; }
.hato_collection_page .ec-layoutRole__footer {
  margin-top: 0; }
.goods_header {
  position: relative;
  background: #fff;
  padding-top: 44px; }
.goods_header ._inner {
    position: relative; }
.goods_header .goods_title {
    position: relative;
    padding: 413px 0 57px;
    margin-left: 20px;
    z-index: 2; }
.goods_header .goods_title ._text {
      font-size: 14px;
      line-height: 30px; }
.goods_header .goods_hero {
    position: absolute;
    top: 0;
    left: 20px;
    width: calc(100vw - 20px);
    height: 444px;
    overflow: hidden; }
.goods_header .goods_hero ._mask {
      position: absolute;
      width: 616px;
      z-index: 1; }
.goods_header .goods_hero ._items {
      position: absolute;
      height: 100%; }
.goods_header .goods_hero ._items img {
        position: absolute;
        top: -105px;
        width: 1280px; }
.goods_hero ._items img:first-child {
  -webkit-animation: hato_collection_move_left1 30s linear infinite;
          animation: hato_collection_move_left1 30s linear infinite; }
.goods_hero ._items img:last-child {
  -webkit-animation: hato_collection_move_left2 30s linear infinite;
          animation: hato_collection_move_left2 30s linear infinite;
  margin-left: -1px; }
@-webkit-keyframes hato_collection_move_left1 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
@keyframes hato_collection_move_left1 {
  0% {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
@-webkit-keyframes hato_collection_move_left2 {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(0%); } }
@keyframes hato_collection_move_left2 {
  0% {
    transform: translateX(100%); }
  to {
    transform: translateX(0%); } }
.goods_contents {
  background: #fde260; }
.goods_contents ._inner {
    margin: 0;
    padding: 40px 20px; }
.goods_contents ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }
.goods_contents ul li {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-shrink: 0;
      margin-bottom: 30px;
      width: calc(50vw - 40px);
      height: calc(50vw - 40px);
      position: relative; }
.goods_contents ul li.__pc {
        display: none; }
.goods_contents ul li a {
        width: 200px;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center; }
.goods_contents ul li:nth-child(even) a {
        top: 80px; }
.goods_contents ul img._thumb {
      width: auto;
      transform-origin: center bottom;
      cursor: pointer; }
.goods_contents ul a:hover img._thumb {
      -webkit-animation: hato_collection_swing .45s linear 2;
              animation: hato_collection_swing .45s linear 2; }
@-webkit-keyframes hato_collection_swing {
  0%, 100% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-5deg); }
  75% {
    transform: rotate(5deg); } }
@keyframes hato_collection_swing {
  0%, 100% {
    transform: rotate(0deg); }
  25% {
    transform: rotate(-5deg); }
  75% {
    transform: rotate(5deg); } }
.hato_collection_page .modaal {
  display: none; }
.hato_collection_page .modaal-inner-wrapper {
  padding: 60px 0; }
.hato_collection_page .modaal-container {
  width: 295px;
  max-width: 1000px;
  background: #f7f7f7; }
.hato_collection_page .modaal-content-container {
  padding: 15px 15px 20px; }
.hato_collection_page .modaal-close {
  position: absolute;
  right: -15px;
  top: -48px; }
.hato_collection_page .modaal-close:before, .hato_collection_page .modaal-close:after {
    top: 14px;
    left: 23px;
    width: 2px;
    height: 27px;
    background: #fff; }
.hato_collection_page .modaal-close:hover {
  background: transparent; }
.hato_collection_page .modaal-close:hover:before, .hato_collection_page .modaal-close:hover:after {
    background: #fff; }
.hato_collection_page .modaal-flex h3 {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold; }
.hato_collection_page .modaal-flex ._text {
  margin-top: 12px;
  font-size: 11px; }
.hato_collection_page .modaal-flex ._price {
  margin-top: 18px;
  font-size: 13px;
  font-weight: bold; }
.hato_collection_page .modaal-flex ._note {
  margin-top: 18px;
  background: #fff;
  padding: 20px 12px;
  font-size: 10px;
  text-align: center; }
.hato_collection_page .modaal-close-button {
  width: 200px;
  height: 40px;
  margin-top: 30px; }
.hato_collection_page .modaal-close-button .btnimg {
    height: 13px; }
.hato_collection_page .slick-dotted.slick-slider {
  margin-bottom: 60px; }
.hato_collection_page .slick-prev, .hato_collection_page .slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 11px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: auto;
  bottom: -50px;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
.hato_collection_page .slick-next {
  right: 0; }
.hato_collection_page .slick-arrow:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/goods/prev.svg) no-repeat 0 0;
  background-size: contain; }
.hato_collection_page .slick-next:before {
  background-image: url(../img/goods/next.svg); }
.hato_collection_page .slick-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  bottom: -45px; }
.hato_collection_page .slick-dots li {
    margin: 0 8px;
    width: 7px; }
.hato_collection_page .slick-dots li:first-child:last-child {
    display: none; }
.hato_collection_page .slick-dots li button {
    width: 7px;
    height: 0;
    padding: 7px 0 0;
    overflow: hidden;
    border: none;
    border-radius: 100%;
    background: #dcdcdc;
    outline: none;
    cursor: pointer; }
.hato_collection_page .slick-dots li button::before {
      content: ""; }
.hato_collection_page .slick-dots .slick-active button {
    background: #7d7d7d; }
.hato_collection_page .toOtherPages {
  padding-top: 97px;
  padding-bottom: 85px; }
.hato_collection_page .toOtherPages .ec-blockBtn--primary {
    background-color: #FDE260;
    border-color: #000; }
.hato_collection_page .toOtherPages .ec-blockBtn--primary:hover, .hato_collection_page .toOtherPages .ec-blockBtn--primary:focus, .hato_collection_page .toOtherPages .ec-blockBtn--primary:active {
      background-color: rgba(255, 255, 255, 0.4); }
.hato_calendar_page .ec-layoutRole__mainBottom {
  display: none; }
.hato_calendar_page .ec-layoutRole__footer {
  margin-top: 0; }
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0; }
.slick-list:focus {
    outline: none; }
.slick-list.dragging {
    cursor: pointer;
    cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
  transform: translate3d(0, 0, 0); }
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto; }
.slick-track:before, .slick-track:after {
    content: "";
    display: table; }
.slick-track:after {
    clear: both; }
.slick-loading .slick-track {
    visibility: hidden; }
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none; }
[dir="rtl"] .slick-slide {
    float: right; }
.slick-slide img {
    display: block; }
.slick-slide.slick-loading img {
    display: none; }
.slick-slide.dragging img {
    pointer-events: none; }
.slick-initialized .slick-slide {
    display: block; }
.slick-loading .slick-slide {
    visibility: hidden; }
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent; }
.slick-arrow.slick-hidden {
  display: none; }
/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }
/* Icons */
@font-face {
  font-family: "slick";
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal; }
/* Arrows */
.slick-prev,
.slick-next {
  position: fixed;
  display: block;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none; }
.slick-prev:hover, .slick-prev:focus,
  .slick-next:hover,
  .slick-next:focus {
    outline: none;
    background: transparent;
    color: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before,
    .slick-next:hover:before,
    .slick-next:focus:before {
      opacity: 1; }
.slick-prev.slick-disabled:before,
  .slick-next.slick-disabled:before {
    opacity: 0.25; }
.slick-prev:before,
  .slick-next:before {
    font-family: "slick";
    font-size: 20px;
    line-height: 1;
    color: white;
    opacity: 0.75;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
.slick-prev {
  top: 300px;
  left: 5px;
  width: calc(65px / 2);
  height: calc(65px / 2);
  z-index: 10; }
[dir="rtl"] .slick-prev {
    left: auto;
    right: -25px; }
.slick-next {
  top: 300px;
  right: 5px;
  width: calc(65px / 2);
  height: calc(65px / 2);
  z-index: 10; }
[dir="rtl"] .slick-next {
    left: -25px;
    right: auto; }
/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }
.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%; }
.slick-dots li {
    position: relative;
    display: inline-block;
    height: 20px;
    width: 20px;
    margin: 0 5px;
    padding: 0;
    cursor: pointer; }
.slick-dots li button {
      border: 0;
      background: transparent;
      display: block;
      height: 20px;
      width: 20px;
      outline: none;
      line-height: 0px;
      font-size: 0px;
      color: transparent;
      padding: 5px;
      cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus {
        outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
          opacity: 1; }
.slick-dots li button:before {
        position: absolute;
        top: 0;
        left: 0;
        content: "•";
        width: 20px;
        height: 20px;
        font-family: "slick";
        font-size: 6px;
        line-height: 20px;
        text-align: center;
        color: black;
        opacity: 0.25;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale; }
.slick-dots li.slick-active button:before {
      color: black;
      opacity: 0.75; }
@media (min-width: 768px) {
      .ec-grid2 .ec-grid2__cell {
        width: 50%; }
      .ec-grid2 .ec-grid2__cell2 {
        width: 100%; }
      .ec-grid3 .ec-grid3__cell {
        width: 33.33333%; }
      .ec-grid3 .ec-grid3__cell2 {
        width: 66.66667%; }
      .ec-grid3 .ec-grid3__cell3 {
        width: 100%; }
      .ec-grid4 .ec-grid4__cell {
        width: 25%; }
      .ec-grid6 .ec-grid6__cell {
        width: 16.66667%; }
      .ec-grid6 .ec-grid6__cell2 {
        width: 33.33333%; }
      .ec-grid6 .ec-grid6__cell3 {
        width: 50%; } }
@media only screen and (min-width: 768px) {
  .sp-only {
    display: none; }
  .ec-pageHeader {
    margin: 0 auto;
    width: 980px; }
    .ec-pageHeader h1 {
      margin: 40px 0 0; }
      h1 img {
        height: 35px; }
      h2 img,
      h1.h1_s img {
        height: 26px; }
    .ec-heading-bold {
      font-size: 18px; }
    .ec-reportHeading {
      border-top: 0;
      font-size: 32px; }
  .sp-only {
    display: none; }
    .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-reportDescription__welcome span:first-of-type {
        font-size: 24px; }
    .baloon {
      padding: 28px 40px;
      margin: 0 calc(50% - 190px);
      width: 380px; }
  .sp-only {
    display: none; }
      .ec-borderedDefs dl {
        flex-wrap: nowrap;
        padding: 24px 0; }
      .ec-borderedDefs dt {
        width: 25.2%;
        padding-left: 40px; }
      .ec-borderedDefs dd {
        padding-left: 40px;
        width: 74.8%; }
      .ec-list-chilled dt, .ec-list-chilled dd {
        padding: 16px 0; }
      .ec-list-chilled dd {
        padding: 16px; }
    .ec-borderedList {
      border-top: 1px dotted #ccc; }
    .ec-inlineBtn {
      font-size: 16px; }
    .ec-inlineBtn--primary {
      font-size: 16px; }
    .ec-inlineBtn--action {
      font-size: 16px; }
    .ec-inlineBtn--cancel {
      font-size: 16px; }
    .ec-blockBtn {
      font-size: 16px; }
    .ec-blockBtn--primary {
      font-size: 16px; }
    .ec-blockBtn--primary {
      width: 350px;
      height: 70px; }
    .ec-blockBtn--action {
      font-size: 16px; }
    .ec-blockBtn--action {
      width: 312px;
      height: 56px; }
    .ec-blockBtn--cancel {
      font-size: 16px; }
    .ec-blockBtn--cancel {
      width: 312px;
      height: 56px; }
  .sp-only {
    display: none; }
    .ec-blockTopBtn {
      right: 30px;
      bottom: 30px; }
  .sp-only {
    display: none; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input, #page_guide_shipping_tel .ec-select input {
      font-size: 14px; }
    .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select, #page_guide_shipping_tel .ec-select select {
      font-size: 14px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
      font-size: 14px; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input, #page_guide_shipping_tel .ec-select input {
      margin-bottom: 16px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
      width: 360px; }
    .ec-halfInput input[type='text'] {
      width: 173px; }
  .sp-only {
    display: none; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input, #page_guide_shipping_tel .ec-select input {
      font-size: 14px; }
    .ec-input select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select, .ec-select select, .ec-birth select, #page_guide_shipping_tel .ec-select select {
      font-size: 14px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
      font-size: 14px; }
    .ec-input input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input, .ec-select input, .ec-birth input, #page_guide_shipping_tel .ec-select input {
      margin-bottom: 16px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
      width: 360px; }
    .ec-halfInput input[type='text'] {
      width: 173px; }
      .ec-select select {
        width: 173px; }
      .ec-select .ec-select__half {
        width: 84px; }
    .ec-select__delivery {
      display: inline-block; }
    .ec-select__time {
      display: inline-block; }
    .ec-birth select {
      margin: 0 8px 10px; }
  .sp-only {
    display: none; }
    .ec-line {
      margin: 32px calc(50% - 245px) 24px;
      width: 490px; }
      .ec-line__registerRole {
        margin-top: 48px;
        margin-bottom: 32px; }
  .sp-only {
    display: none; }
    .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 {
        margin-left: 90px;
        width: 100%; }
    .ec-off2Grid {
      display: flex; }
      .ec-off2Grid .ec-off2Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 16.66667%; }
    .ec-off3Grid {
      display: flex; }
      .ec-off3Grid .ec-off3Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 25%; }
    .ec-off4Grid {
      display: flex; }
      .ec-off4Grid .ec-off4Grid__cell {
        position: relative;
        min-height: 1px;
        margin-left: 33.33333%; }
  .sp-only {
    display: none; }
    .ec-imageGrid {
      padding: 16px; }
      .ec-imageGrid .ec-imageGrid__img {
        width: 120px;
        height: 120px;
        margin-right: 24px; }
  .sp-only {
    display: none; }
  #page_mypage_login .ec-layoutRole,
  #page_shopping_login .ec-layoutRole {
    background: #f7f7f7; }
  .ec-login__container {
    background: #fff;
    max-width: 980px;
    margin: 32px auto 0;
    padding-top: 48px;
    padding-bottom: 48px; }
    .ec-login__wrapper {
      width: 360px;
      margin: 0 auto; }
      .ec-login__wrapper .ec-loginBtn {
        width: 312px;
        height: 56px; }
      .ec-login__wrapper .h2_s._resetpassword {
        font-size: 22px; }
      .ec-login__wrapper .ec-login__title {
        font-size: 22px;
        line-height: 33px;
        letter-spacing: 0.05em; }
    .ec-login {
      margin: 0 16px;
      padding: 30px 13% 60px; }
    .ec-login__inner {
      width: 360px; }
      .ec-login .ec-login__link {
        margin-left: 20px; }
    .ec-guest {
      height: 100%;
      margin: 0 16px; }
  .sp-only {
    display: none; }
    .ec-displayB {
      flex-direction: row; }
      .ec-displayB .ec-displayB__cell {
        width: 31.4466%;
        margin-bottom: 0; }
      .ec-displayC .ec-displayC__cell {
        width: 22.8775%; }
    .ec-displayD {
      box-sizing: border-box;
      flex-wrap: nowrap; }
      .ec-displayD .ec-displayD__cell {
        width: 14.3083%;
        margin-bottom: 16px; }
  .sp-only {
    display: none; }
    .ec-topicpath {
      padding: 30px 0 10px;
      border: 0;
      font-size: 16px; }
  .sp-only {
    display: none; }
    .ec-progress {
      margin: 0 90px; }
  .ec-cartNaviWrap {
    position: relative; }
    .ec-headerRole__cart {
      margin-right: 0; }
    .ec-cartNavi {
      display: flex;
      box-sizing: border-box;
      white-space: nowrap;
      cursor: pointer;
      margin-right: 32px; }
        .ec-cartNavi a::before {
          margin-right: 8px; }
      .ec-cartNavi .ec-cartNavi__text {
        display: inline-block; }
    .ec-cartNavi .ec-cartNavi__badge {
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      box-sizing: border-box;
      color: #fff;
      white-space: nowrap;
      background-color: #E60012;
      font-size: 14px;
      font-weight: 600;
      height: 24px;
      width: 24px;
      margin-left: 4px; }
      .ec-cartNavi .ec-cartNavi__price {
        display: inline-block;
        font-size: 14px;
        font-weight: normal;
        vertical-align: middle; }
    .ec-cartNavi.is-active .ec-cartNavi__badge {
      display: none; }
    .ec-cartNaviIsset {
      margin-top: 10px;
      min-width: 256px;
      max-width: 256px; }
      .ec-cartNaviIsset::before {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8.5px 10px 8.5px;
        border-color: transparent transparent #f8f8f8 transparent;
        position: absolute;
        top: -9px; }
    .ec-cartNaviNull {
      margin-top: 10px;
      min-width: 256px;
      max-width: 256px; }
      .ec-cartNaviNull::before {
        display: inline-block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8.5px 10px 8.5px;
        border-color: transparent transparent #f8f8f8 transparent;
        position: absolute;
        top: -9px; }
    .ec-totalBox {
      padding: 40px 24px 24px 24px;
      margin-bottom: 0; }
      .ec-totalBox .ec-totalBox__paymentTotal {
        margin: 0 16px 16px 34px; }
      .ec-totalBox .ec-totalBox__taxRate {
        font-size: 12px; }
    #page_shopping_nonmember .ec-cartRole {
      margin: 48px auto 24px;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
      max-width: none; }
    #page_shopping_nonmember div.ec-cartRole {
      margin: 48px auto 24px;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
      max-width: none; }
  #page_shopping_nonmember .ec-layoutRole {
    background: #f7f7f7; }
    #page_shopping .ec-cartRole,
    #page_shopping_confirm .ec-cartRole,
    #page_shopping_redirect_to .ec-cartRole {
      margin: 48px auto 24px;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
      max-width: none; }
    #page_shopping .ec-pageHeader,
    #page_shopping_confirm .ec-pageHeader,
    #page_shopping_redirect_to .ec-pageHeader {
      margin: 0 auto;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box; }
    #page_shopping .ec-pageHeader h1,
    #page_shopping_confirm .ec-pageHeader h1,
    #page_shopping_redirect_to .ec-pageHeader h1 {
      margin-top: 24px; }
  .sp-only {
    display: none; }
    .ec-news {
      margin-right: 3%; }
    .ec-news {
      margin-bottom: 32px; }
      .ec-news .ec-news__title {
        padding: 16px;
        text-align: left;
        font-size: 24px; }
  .sp-only {
    display: none; }
    .ec-navlistRole {
      width: 542px;
      margin: 0; }
      .ec-navlistRole .ec-navlistRole__navlist {
        flex-wrap: nowrap;
        margin-right: 0;
        height: 56px; }
        .ec-navlistRole .ec-navlistRole__item:not(:last-child):after {
          top: 20px; }
        .ec-navlistRole .ec-navlistRole__item a {
          width: 100%;
          padding: 21px 32px 10px; }
      .ec-favoriteRole .ec-favoriteRole__item-image {
        height: 250px; }
    .ec-favoriteRole .ec-favoriteRole__item {
      width: 25%; }
  .sp-only {
    display: none; }
    .ec-role {
      padding: 0; }
    .ec-mypageRole {
      padding-left: 0;
      padding-right: 0;
      width: 980px; }
      .ec-mypageRole h1 {
        padding-left: 0;
        padding-right: 0; }
      .ec-mypageRole .ec-welcomeMsg {
        padding-left: 0;
        padding-right: 0; }
      .ec-mypageRole h2 {
        font-size: 22px;
        line-height: 33px;
        letter-spacing: 0.05em; }
    .ec-mypageRole .ec-pageHeader {
      padding: 0; }
      .ec-mypageRole .ec-pagerRole__sp {
        display: none; }
      .ec-mypageRole .ec-editRole {
        margin-top: 16px; }
          .ec-mypageRole .ec-editRole .ec-RegisterRole__actions .ec-blockBtn--action {
            width: 248px;
            height: 56px; }
      .ec-mypageRole .ec-RegisterRole__backBtn .ec-blockBtn--cancel {
        width: 248px;
        height: 56px; }
      .ec-mypageRole__hato {
        margin-top: 48px; }
      .ec-mypageRole .ec-alert-warning .ec-alert-warning__text {
        margin-top: 80px; }
    .ec-mypageRole__change .ec-blockBtn--cancel {
      width: 350px;
      height: 70px; }
    .ec-mypageRole__delivery {
      width: 980px;
      margin: 41px auto 0;
      padding: 0; }
      .ec-mypageRole__delivery h2 {
        font-size: 22px;
        line-height: 33px;
        letter-spacing: 0.05em; }
      .ec-mypageRole__delivery .ec-mypageRole {
        width: 100%; }
        .ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item {
          padding: 18px 16px 12px 40px; }
          .ec-mypageRole__delivery .ec-mypageRole .ec-addressList .ec-addressList__item .ec-addressList__edit {
            margin: 8px 0 0 0;
            width: 100%; }
  .sp-only {
    display: none; }
    .ec-layoutRole {
      min-width: 980px; }
      .ec-layoutRole .ec-layoutRole__header {
        background: #fff;
        transition: 0.3s; }
    .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor,
    .ec-layoutRole .ec-header__scrollColor {
      background: rgba(255, 255, 255, 0.7);
      transition: 0.3s; }
      .ec-layoutRole .ec-layoutRole__contents {
        padding-top: 74px; }
      .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 {
      padding: 0; }
    .ec-headerRole:after {
      content: " ";
      display: table; }
    .ec-headerRole:after {
      clear: both; }
    .ec-headerRole {
      width: 100%; }
      .ec-headerRole:after {
        content: " ";
        display: table; }
      .ec-headerRole:after {
        clear: both; }
      .ec-headerRole .ec-headerRole__navSP {
        display: none; }
    .ec-headerNaviRole {
      padding: 0; }
    .ec-headerNaviRole {
      padding: 15px 38px 18px 37px;
      align-items: baseline; }
      .ec-headerNaviRole .ec-headerNaviRole__title img {
        height: 39px;
        width: 144px; }
      .ec-headerNaviRole .ec-headerNaviRole__search {
        display: inline-block;
        margin-top: 10px; }
        .ec-headerNaviRole .ec-headerNaviRole__search a {
          color: inherit;
          text-decoration: none; }
        .ec-headerNaviRole .ec-headerNaviRole__search a:hover {
          text-decoration: none; }
      .ec-headerNaviRole .ec-headerNaviRole__navSP {
        display: none; }
        .ec-headerNaviRole .ec-headerNaviRole__navSP a {
          color: inherit;
          text-decoration: none; }
        .ec-headerNaviRole .ec-headerNaviRole__navSP a:hover {
          text-decoration: none; }
      .ec-headerNaviRole .ec-headerNaviRole__nav {
        margin-right: 24px; }
      .ec-headerNaviRole .ec-headerNaviRole__cart {
        margin-right: 0; }
      .ec-headerNaviRole .ec-headerNaviRole__onlineStore {
        margin-right: 0; }
        .ec-headerNaviRole .ec-headerNaviRole__onlineStore a {
          font-size: 13px;
          height: 32px;
          width: 150px; }
      .ec-headerNavSP::before {
        width: 28px;
        height: 28px; }
    .ec-headerNavSP {
      display: none; }
        .ec-headerTitle .ec-headerTitle__title a {
          font-size: 40px; }
      .ec-headerTitle .ec-headerTitle__subtitle {
        font-size: 16px;
        margin-bottom: 10px; }
          .ec-headerNav .ec-headerNav__item a::before {
            height: 28px;
            width: 28px;
            margin-top: 0;
            margin-right: 8px; }
      .ec-headerNav .ec-headerNav__itemLink {
        display: inline-block; }
    .ec-headerSearch .ec-headerSearch__category {
      float: left;
      width: 43%; }
        .ec-headerSearch .ec-headerSearch__category .ec-select select {
          max-width: 165px;
          height: 36px; }
        .ec-headerSearch .ec-headerSearch__category .ec-select.ec-select_search {
          border-top-right-radius: inherit;
          border-top-left-radius: 50px;
          border-bottom-left-radius: 50px; }
    .ec-headerSearch .ec-headerSearch__keyword {
      float: right;
      width: 57%;
      border-bottom-left-radius: inherit;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px; }
      .ec-headerSearch .ec-headerSearch__keyword input[type="search"] {
        font-size: 12px; }
    .ec-categoryNaviRole {
      padding: 0; }
    .ec-categoryNaviRole {
      display: block;
      width: 100%; }
      .ec-categoryNaviRole a {
        color: inherit;
        text-decoration: none; }
      .ec-categoryNaviRole a:hover {
        text-decoration: none; }
    .ec-itemNav__nav {
      display: inline-block; }
    .ec-itemNav__nav li {
      float: left;
      width: auto; }
    .ec-itemNav__nav li a {
      text-align: center;
      border-bottom: none; }
    .ec-itemNav__nav li ul {
      display: block;
      z-index: 100;
      position: absolute; }
    .ec-itemNav__nav li ul li {
      overflow: hidden;
      height: 0; }
  .ec-itemNav__nav > li:hover > ul > li {
    overflow: visible;
    height: auto; }
  .ec-itemNav__nav li ul li ul:before {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: white;
    position: absolute;
    top: 19px;
    right: auto;
    left: -20px; }
  .ec-itemNav__nav li ul li:hover > ul > li {
    overflow: visible;
    height: auto;
    width: auto; }
    .ec-drawerRole {
      display: none; }
    .ec-drawerRoleClose {
      display: none; }
    .ec-drawerRole.is_active {
      display: none; }
    .ec-drawerRoleClose.is_active {
      display: none; }
    .ec-breadcrumb {
      margin: 16px auto 0;
      width: 980px; }
        .ec-breadcrumb__link:first-of-type {
          margin-bottom: 0; }
  #page_collection .ec-headerNaviRole__right {
    display: none; }
  #page_mypage_login .ec-layoutRole__header,
  #page_shop_tobira .ec-layoutRole__header,
  #page_shop_okiishi .ec-layoutRole__header,
  #page_shop_hatokoji .ec-layoutRole__header {
    background: rgba(255, 255, 255, 0); }
  #page_mypage_login .ec-layoutRole__header.ec-header__scrollColor,
  #page_shop_tobira .ec-layoutRole__header.ec-header__scrollColor,
  #page_shop_okiishi .ec-layoutRole__header.ec-header__scrollColor,
  #page_shop_hatokoji .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
  #page_product_detail .ec-layoutRole__header {
    background-color: #f5f3f1; }
  #page_product_detail .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
  .sp-only {
    display: none; }
    .ec-layoutRole__footer {
      margin-top: 152px; }
    .ec-footerRoleTop {
      width: 100%;
      margin: 0 auto; }
      .ec-footerRoleTop .ec-footerRoleTop__inner {
        display: flex;
        justify-content: center;
        margin: 0 auto; }
    .ec-footerRoleTop.fix {
      right: auto;
      width: 100%; }
    .ec-footerRoleTop.fix .ec-footerRole {
      margin-top: 72px; }
    .ec-footerRole {
      padding-bottom: 20px;
      width: 100%;
      margin: 0 auto; }
      .ec-footerRole .ec-footerRole__inner {
        flex-direction: row;
        justify-content: space-between;
        padding: 36px 114px 0;
        margin: 0 auto; }
      .ec-footerTopNavi li {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        height: 72px; }
    .ec-footerHato {
      top: -31px;
      right: 10%;
      transform: translateX(50%); }
    .ec-footerHato {
      top: -56px;
      right: 5%;
      transform: translateX(50%); }
      .ec-footerHato img {
        display: block;
        height: 79px;
        width: 104px; }
    .ec-footerHatoSerif {
      bottom: 140px;
      left: auto;
      right: 39px;
      width: 215px;
      transform-origin: center bottom; }
      .ec-footerHatoSerif:before {
        bottom: -1px;
        right: 49px;
        transform: rotate(263deg); }
    .ec-footerHatoVisible {
      -webkit-animation: 0.5s serif-animation cubic-bezier(0.94, 0, 0.54, 1);
              animation: 0.5s serif-animation cubic-bezier(0.94, 0, 0.54, 1); }
    .ec-footerHatoThink {
      bottom: 114px;
      right: 35px; }
      .ec-footerHatoThink__circle1 {
        bottom: 7px;
        left: 9px; }
      .ec-footerHatoThink__circle2 {
        bottom: 15px;
        left: 18px; }
      .ec-footerHatoThink__circle3 {
        bottom: 25px;
        left: 28px; }
    .ec-footerAbout {
      text-align: left;
      margin-top: 0; }
      .ec-footerAbout img {
        width: 164px; }
      .ec-footerAbout .ec-footerAbout__sns {
        margin-top: 11px; }
        .ec-footerAbout .ec-footerAbout__sns p {
          margin: 0 0 8px; }
        .ec-footerAbout .ec-footerAbout__btn a:not(:last-of-type) {
          margin-right: 15px; }
        .ec-footerAbout .ec-footerAbout__btn img {
          width: 40px; }
    .ec-footerLinks {
      justify-content: baseline; }
      .ec-footerNavi .ec-footerNavi__link {
        display: inline-block; }
  .ec-footerNavi:first-of-type {
    margin-right: 60px; }
    .ec-footerTitle__copyright {
      margin-top: 34px; }
    #page_homepage .ec-layoutRole__footer {
      margin-top: 78px; }
  .sp-only {
    display: none; }
    .ec-sliderRole {
      padding: 0; }
    .ec-sliderItemRole {
      padding: 0; }
      .ec-sliderItemRole .item_nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-bottom: 0; }
  .sp-only {
    display: none; }
    .ec-eyecatchRole {
      flex-wrap: nowrap; }
      .ec-eyecatchRole .ec-eyecatchRole__image {
        order: 2; }
      .ec-eyecatchRole .ec-eyecatchRole__intro {
        padding-right: 5%;
        order: 1; }
      .ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
        margin-top: 45px; }
      .ec-eyecatchRole .ec-eyecatchRole__introTitle {
        margin-bottom: 1em;
        font-size: 26px; }
      .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
        margin-bottom: 30px; }
      .ec-eyecatchRole .ec-eyecatchRole__introDescription {
        margin-bottom: 30px; }
  .sp-only {
    display: none; }
    .ec-inlineBtn--top {
      font-size: 16px; }
    .ec-blockBtn--top {
      font-size: 16px; }
    .ec-blockBtn--top {
      max-width: 260px; }
  .sp-only {
    display: none; }
    .ec-topicRole {
      height: 100vh; }
      .ec-topicRole .hatosable_img {
        top: 16vh;
        left: 30vw;
        height: auto;
        width: 100%; }
      .ec-topicRole__inner {
        margin: 0 auto;
        width: 100%; }
      .ec-topicRole__messageArea {
        height: 314px;
        width: 327px;
        margin: 50px 40px;
        left: 42px;
        bottom: 112px;
        margin: 0;
        transform: none; }
      .ec-topicRole .ec-topicRole__list {
        flex-wrap: nowrap; }
      .ec-topicRole .ec-topicRole__listItem {
        width: calc(100% / 2); }
        .ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
          margin-right: 30px; }
      .ec-topicRole .ec-topicRole__listItemTitle {
        margin-top: 1em; }
  .sp-only {
    display: none; }
    .ec-newItemRole {
      padding: 60px 0; }
      .ec-newItemRole .ec-newItemRole__list {
        flex-wrap: nowrap; }
      .ec-newItemRole .ec-newItemRole__listItem {
        margin-bottom: 15px;
        width: calc(100% / 4); }
        .ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
          margin-right: 30px; }
        .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
          margin-right: 30px; }
      .ec-newItemRole .ec-newItemRole__listItemTitle {
        margin: 20px 0 10px; }
  .sp-only {
    display: none; }
    .ec-categoryRole {
      padding: 60px 0; }
      .ec-categoryRole .ec-categoryRole__list {
        flex-wrap: nowrap; }
      .ec-categoryRole .ec-categoryRole__listItem {
        width: calc(100% / 3); }
        .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
          margin-right: 30px; }
  .sp-only {
    display: none; }
    .ec-newsRole {
      margin: 55px auto 57px;
      max-width: 980px;
      display: flex;
      align-items: flex-start; }
      .ec-newsRole .ec-secHeading {
        margin-bottom: 36px; }
    .ec-newsRole .ec-newsRole__news {
      margin-left: 54px; }
    .ec-newsRole .ec-newsRole__newsHeading {
      display: flex;
      align-items: flex-start; }
      .ec-newsRole .ec-newsRole__newsDate {
        font-size: 11px;
        font-weight: 600;
        margin-top: 4px; }
      .ec-newsRole .ec-newsRole__newsTitle {
        margin-left: 37px;
        margin-top: 0;
        font-weight: 700; }
      .ec-newsRole .ec-newsRole__newsDescription {
        margin-left: 39px;
        margin-top: 14px; }
      .ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription {
        margin: 20px 0 0; }
  .sp-only {
    display: none; }
    .ec-searchnavRole {
      box-sizing: border-box;
      width: 100%;
      margin: 0 auto;
      padding: 0 20px; }
      .ec-searchnavRole:after {
        content: " ";
        display: table; }
      .ec-searchnavRole:after {
        clear: both; }
      .ec-searchnavRole .ec-searchnavRole__infos {
        padding: 0; }
      .ec-searchnavRole .ec-searchnavRole__infos {
        padding-left: 0;
        padding-right: 0;
        border-top: 1px solid #ccc;
        padding-top: 16px;
        flex-direction: row; }
      .ec-searchnavRole .ec-searchnavRole__counter {
        margin-bottom: 0;
        width: 50%; }
      .ec-searchnavRole .ec-searchnavRole__actions {
        width: 50%; }
  .sp-only {
    display: none; }
    .ec-shelfRole {
      padding: 0; }
    .ec-shelfRole {
      padding-top: 36px;
      width: 1009px; }
      .ec-shelfGrid .ec-shelfGrid__item {
        width: 31.03%;
        margin-right: 34px;
        align-self: flex-start; }
        .ec-shelfGrid .ec-shelfGrid__item-image {
          height: 195px;
          width: 283px; }
        .ec-shelfGrid .ec-shelfGrid__item-name {
          font-size: 19px; }
        .ec-shelfGrid .ec-shelfGrid__item .price02-default {
          margin-top: 24px;
          font-size: 15px; }
          .ec-shelfGrid .ec-shelfGrid__item-cart .add-cart,
          .ec-shelfGrid .ec-shelfGrid__item-cart .add-cart_subs {
            font-size: 13px;
            font-weight: 400;
            height: 40px;
            width: 155px; }
      .ec-shelfGrid .ec-shelfGrid__item:nth-child(odd) {
        padding: 12px 15px 15px; }
      .ec-shelfGrid .ec-shelfGrid__item:nth-child(even) {
        padding: 12px 15px 15px; }
    .ec-shelfGridCenter {
      margin-left: -16px;
      margin-right: -16px; }
        .ec-shelfGridCenter .ec-shelfGridCenter__item-image {
          height: 250px; }
      .ec-shelfGridCenter .ec-shelfGridCenter__item {
        padding: 0 16px;
        width: 25%; }
      .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
        padding: 0 16px; }
      .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
        padding: 0 16px; }
      .product_page ul.ec-pager li {
        height: 24px;
        width: 24px;
        margin-left: 16px; }
        .product_page ul.ec-pager li a {
          padding-left: 0;
          font-size: 14px; }
      .product_page ul.ec-pager li.ec-pager__item__back,
      .product_page ul.ec-pager li.ec-pager__item__next {
        height: 40px;
        width: 132px; }
        .product_page ul.ec-pager li.ec-pager__item__back a,
        .product_page ul.ec-pager li.ec-pager__item__next a {
          height: 40px; }
          .product_page ul.ec-pager li.ec-pager__item__back a .btnimg,
          .product_page ul.ec-pager li.ec-pager__item__next a .btnimg {
            height: 12px; }
      .product_page ul.ec-pager li.ec-pager__item__back {
        margin-right: 12px; }
      .product_page ul.ec-pager li.ec-pager__item__next {
        margin-left: 29px; }
    .product_page .toOtherPages {
      margin-top: 51px; }
  .sp-only {
    display: none; }
  .sp-only {
    display: none; }
    .ec-productRole {
      padding: 0; }
      .ec-productRole__top {
        padding-top: 0px;
        padding-left: 60px;
        padding-right: 60px; }
    .ec-productRole__main {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      width: 1009px;
      margin: 0 auto;
      padding-top: 86px; }
      .ec-productRole .ec-sliderItemRole {
        width: 505px;
        margin-top: 0;
        margin-bottom: 89px; }
      .ec-productRole .ec-sliderItemRole .slick-slide {
        width: 505px; }
        .ec-productRole .ec-sliderItemRole .slick-slider {
          margin-bottom: 0px; }
        .ec-productRole .ec-sliderItemRole .slick-arrow {
          bottom: -20px; }
          .ec-productRole .ec-sliderItemRole .slick-arrow.prev-arrow {
            left: 10px; }
          .ec-productRole .ec-sliderItemRole .slick-arrow.next-arrow {
            right: 10px; }
        .ec-productRole .ec-sliderItemRole .slick-dots {
          bottom: -20px; }
      .ec-productRole .ec-productRole__img {
        margin-right: 16px;
        margin-bottom: 0; }
      .ec-productRole .ec-productRole__profile {
        margin-left: 66px;
        margin-bottom: 67px;
        width: 50%;
        padding: 0; }
      .ec-productRole .ec-productRole__title .ec-headingTitle {
        font-size: 20px;
        margin-bottom: 0; }
      .ec-productRole .ec-productRole__price {
        font-size: 17px;
        padding-left: 0;
        margin-top: 0; }
      .ec-productRole #form1 {
        margin-top: 5px;
        padding-left: 0;
        justify-content: flex-start; }
      .ec-productRole .ec-productRole__actions .ec-select select {
        min-width: 350px;
        max-width: 350px; }
      .ec-productRole .ec-productRole__btn {
        margin-left: 21px;
        display: block;
        margin-top: 0; }
    .ec-productRole .ec-productRole__description {
      margin-top: 14px;
      margin-bottom: 30px; }
      .ec-productRole .ec-productRole__description__text {
        font-size: 13px; }
      .ec-productRole .ec-productRole__description__more {
        font-size: 13px;
        justify-content: flex-end; }
      .ec-productRole .ec-productRole__size {
        font-size: 12px;
        margin-top: 17px; }
      .ec-productRole .ec-productRole__ships {
        display: flex;
        font-size: 12px;
        margin-top: 5px;
        margin-bottom: 16px; }
      .ec-productRole .ec-productRole__ships p {
        margin-right: 27px; }
      .ec-productRole .ec-productRole__materials {
        font-size: 12px; }
        .ec-productRole .ec-productRole__materials h2 {
          font-size: 12px;
          font-weight: 400; }
      .ec-productRole_bags {
        padding: 0px; }
      .ec-productRole_bags .ec-productRole_bags__inner {
        width: 1009px;
        margin: 0 auto;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 26px 0; }
        .ec-productRole_bags__img img {
          height: 279px;
          width: 538px; }
            .ec-productRole_bags__img__zoom img {
              height: 12px;
              width: 12px; }
            .ec-productRole_bags__img__popup__inner {
              padding: 0;
              transform: translate(-50%, -100%); }
        .ec-productRole_bags .ec-shelfGrid {
          width: 45.7%;
          padding-left: 23px;
          margin-top: 0px; }
          .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            flex-direction: row;
            padding: 0;
            margin-bottom: 27px; }
          .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__box {
            width: 61%; }
            .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .ec-numberInput {
              margin-top: 0; }
            .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
              position: unset;
              margin-top: 1px; }
              .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn button {
                position: unset; }
          .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__top {
            display: flex;
            justify-content: space-between;
            align-items: center; }
            .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__top__detail {
              margin-right: 8px;
              width: 62%; }
            .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__bottom {
              font-size: 11px;
              margin-top: 6px; }
              .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item__bottom .bag_size_open {
                font-size: 13px; }
            .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item .price02-default {
              font-size: 14px; }
        .ec-productRole_bags .ec-shelfGrid .ec-shelfGrid__item:last-child {
          margin-bottom: 0; }
        .ec-productRole_bags__name {
          font-size: 15px; }
    #RelatedProduct-product_area {
      padding-left: 60px;
      padding-right: 60px;
      width: 100%; }
      #RelatedProduct-product_area .ec-shelfRole__inner {
        width: 1009px;
        margin: 0 auto;
        padding-top: 54px; }
      #RelatedProduct-product_area .ec-shelfGrid {
        margin-top: 52px; }
      #RelatedProduct-product_area .ec-numberInput {
        width: 93px; }
  .sp-only {
    display: none; }
    .cart_page h1 {
      margin-top: 40px; }
    div.ec-cartRole {
      margin: 24px auto 24px;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
      width: 980px; }
      div.ec-cartRole div.ec-cartRole {
        margin-bottom: 48px; }
    .ec-cartRole {
      flex-direction: row;
      justify-content: space-between; }
      .ec-cartRole .ec-cartRole__totalText {
        margin-bottom: 30px;
        padding: 0; }
      .ec-cartRole .ec-cartRole__actions {
        padding: 40px 32px 24px;
        margin-top: 0;
        width: auto; }
        .ec-cartRole .ec-cartRole__actions .ec-blockBtn--action {
          margin-top: 32px;
          height: 56px;
          width: 248px; }
        .ec-cartRole .ec-cartRole__wrapper .ec-cartRole {
          display: flex;
          align-items: flex-start; }
    .ec-cartTable {
      max-width: 620px; }
    .ec-cartHeader {
      display: table-row; }
    .ec-cartCompleteRole {
      padding: 0; }
    .ec-cartRow {
      flex-direction: row;
      justify-content: space-between; }
        .ec-cartRow .ec-cartRow__sutbtotalSP span {
          font-size: 14px;
          margin-right: 2px; }
      .ec-cartRow .ec-cartRow__contentColumn {
        display: table-cell; }
      .ec-cartRow .ec-cartRow__topBox {
        width: 75%; }
      .ec-cartRow .ec-cartRow__img {
        display: inline-block;
        width: 120px;
        height: 120px;
        margin-right: 24px; }
      .ec-cartRow .ec-cartRow__middleBox {
        margin-left: 20px;
        width: 70%;
        max-width: 300px; }
        .ec-cartRow .ec-cartRow__middleBox .ec-cartRow__name {
          font-size: 21px; }
        .ec-cartRow .ec-cartRow__middleBox .ec-cartRow__unitPrice {
          font-size: 17px; }
      .ec-cartRow .ec-cartRow__middleBox__bottom {
        align-items: flex-start; }
      .ec-cartRow .ec-cartRow__lastBox {
        flex-direction: column;
        align-items: flex-end;
        margin: 0;
        width: 30%; }
      .ec-cartRow .ec-cartRow__summary {
        display: inline-block;
        margin-left: 20px;
        vertical-align: middle; }
        .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
          display: none; }
        .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          width: 46px; }
        .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
          display: none; }
      .ec-cartRow .ec-cartRow__subtotalColumn {
        display: table-cell; }
    .ec-cartRow__otherProductsLink {
      margin: 24px auto 0;
      width: 980px; }
    .ec-alert-warning .ec-alert-warning__text {
      margin-top: 40px; }
    .ec-alert-warning .ec-alert-warning__textPc {
      display: block;
      width: 169px;
      margin: 0 auto; }
    .ec-alert-warning .ec-alert-warning__textSp {
      display: none; }
    .ec-alert-warning .ec-alert-warning__hato {
      margin-top: 38px; }
    .ec-alert-warning .ec-alert-warning__btn {
      margin-top: 88px; }
    .ec-cartRole__error__text {
      width: 980px; }
        .ec-cartRole__error__text__comments p {
          width: 100%;
          max-width: none; }
  .sp-only {
    display: none; }
    .ec-orderRole {
      padding: 0; }
    .ec-orderRole {
      margin: 41px auto 64px;
      flex-direction: row;
      width: 980px; }
      .ec-orderRole h2 {
        font-size: 22px;
        line-height: 33px;
        letter-spacing: 0.05em; }
      .ec-orderRole .ec-orderRole__detail {
        max-width: 620px; }
      .ec-orderRole .ec-orderRole__summary {
        max-width: 312px;
        margin-left: auto;
        padding-top: 100px; }
        .ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
          display: none; }
    .ec-orderOrder {
      margin-bottom: 59px; }
      .ec-orderOrder .ec-orderOrder__wrapper {
        padding: 24px 40px; }
      .ec-orderOrder__wrapper {
        padding: 24px 40px; }
      .ec-orderOrder .ec-definitions, .ec-orderOrder .ec-definitions--soft {
        width: 620px; }
        .ec-orderOrder .ec-definitions dt, .ec-orderOrder .ec-definitions--soft dt {
          width: 28%; }
        .ec-orderOrder .ec-definitions dd, .ec-orderOrder .ec-definitions--soft dd {
          padding-left: 20px; }
      .ec-orderDelivery .ec-imageGrid .ec-historyRole__detailTitle {
        letter-spacing: 0.1em;
        margin-bottom: 62px; }
    .ec-orderDelivery .ec-imageGrid .ec-historyRole__detailWrapper {
      display: flex;
      justify-content: space-between; }
      .ec-orderDelivery .ec-imageGrid .ec-historyRole__detailPrice {
        margin-bottom: 0; }
      .ec-orderDelivery .ec-imageGrid .ec-historyRole__detailSubtotal {
        text-align: left; }
    .ec-orderConfirm {
      margin-bottom: 0; }
      .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, .ec-orderConfirm #page_guide_shipping_tel .ec-select textarea, #page_guide_shipping_tel .ec-orderConfirm .ec-select textarea {
        width: 100%; }
    .ec-AddAddress {
      margin: 0 10%; }
        .ec-AddAddress .ec-AddAddress__selectAddress select {
          min-width: 350px; }
    #page_shopping .ec-orderRole,
    #page_shopping_confirm .ec-orderRole,
    #page_shopping_redirect_to .ec-orderRole {
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
      margin-bottom: 64px;
      flex-direction: row; }
  #page_shopping .ec-orderOrder,
  #page_shopping_confirm .ec-orderOrder,
  #page_shopping_redirect_to .ec-orderOrder {
    margin-bottom: 40px; }
    #page_shopping .ec-definitions, #page_shopping .ec-definitions--soft,
    #page_shopping_confirm .ec-definitions,
    #page_shopping_confirm .ec-definitions--soft,
    #page_shopping_redirect_to .ec-definitions,
    #page_shopping_redirect_to .ec-definitions--soft {
      width: 620px; }
      #page_shopping .ec-definitions dt, #page_shopping .ec-definitions--soft dt,
      #page_shopping_confirm .ec-definitions dt,
      #page_shopping_confirm .ec-definitions--soft dt,
      #page_shopping_redirect_to .ec-definitions dt,
      #page_shopping_redirect_to .ec-definitions--soft dt {
        width: 28%; }
      #page_shopping .ec-definitions dd, #page_shopping .ec-definitions--soft dd,
      #page_shopping_confirm .ec-definitions dd,
      #page_shopping_confirm .ec-definitions--soft dd,
      #page_shopping_redirect_to .ec-definitions dd,
      #page_shopping_redirect_to .ec-definitions--soft dd {
        padding-left: 20px; }
      #page_shopping .ec-definitions__address,
      #page_shopping_confirm .ec-definitions__address,
      #page_shopping_redirect_to .ec-definitions__address {
        flex-direction: row;
        align-items: center;
        justify-content: space-between; }
      #page_shopping .ec-definitions .ec-orderDelivery__change, #page_shopping .ec-definitions--soft .ec-orderDelivery__change,
      #page_shopping_confirm .ec-definitions .ec-orderDelivery__change,
      #page_shopping_confirm .ec-definitions--soft .ec-orderDelivery__change,
      #page_shopping_redirect_to .ec-definitions .ec-orderDelivery__change,
      #page_shopping_redirect_to .ec-definitions--soft .ec-orderDelivery__change {
        margin-top: 0; }
      #page_shopping .ec-totalBox__btn.__pc,
      #page_shopping_confirm .ec-totalBox__btn.__pc,
      #page_shopping_redirect_to .ec-totalBox__btn.__pc {
        display: block; }
      #page_shopping .ec-totalBox__btn.__sp,
      #page_shopping_confirm .ec-totalBox__btn.__sp,
      #page_shopping_redirect_to .ec-totalBox__btn.__sp {
        display: none; }
    #page_shopping .ec-orderRole__summary,
    #page_shopping_confirm .ec-orderRole__summary,
    #page_shopping_redirect_to .ec-orderRole__summary {
      width: 312px; }
    #page_shopping .ec-orderConfirm,
    #page_shopping_confirm .ec-orderConfirm,
    #page_shopping_redirect_to .ec-orderConfirm {
      margin-bottom: 0; }
    #page_shopping .ec-cartRow__otherProductsLink.__sp,
    #page_shopping_confirm .ec-cartRow__otherProductsLink.__sp,
    #page_shopping_redirect_to .ec-cartRow__otherProductsLink.__sp {
      display: none; }
    #page_shopping .ec-cartRow__otherProductsLink.__pc,
    #page_shopping_confirm .ec-cartRow__otherProductsLink.__pc,
    #page_shopping_redirect_to .ec-cartRow__otherProductsLink.__pc {
      display: block; }
    .__pc {
      display: block; }
    .__sp {
      display: none; }
      #page_shopping_confirm .ec-imageGrid__content__name {
        font-size: 21px; }
      #page_shopping_confirm .ec-imageGrid__content__price {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-top: 0; }
            #page_shopping_confirm .ec-imageGrid__content__price__single__price span {
              font-weight: 600; }
            #page_shopping_confirm .ec-imageGrid__content__price__single__number .__times {
              font-weight: 500;
              font-size: 15px; }
        #page_shopping_confirm .ec-imageGrid__content__price__total {
          text-align: left;
          margin-top: 0; }
          #page_shopping_confirm .ec-imageGrid__content__price__total .__text {
            font-size: 13px; }
    #page_vt4g_shopping_payment .ec-layoutRole__main #vt4g_form_credit {
      margin-bottom: 152px !important;
      padding: 0; }
    #page_vt4g_shopping_payment .ec-layoutRole__main h2 {
      width: 980px;
      margin: 46px auto 16px;
      font-size: 26px; }
    #page_vt4g_shopping_payment .ec-layoutRole__main #vt4g_form_credit_error {
      width: 980px;
      margin: 0 auto;
      padding: 0 0 16px; }
    #page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs {
      width: 980px;
      margin: 0 auto;
      padding: 32px 0; }
      #page_vt4g_shopping_payment .ec-layoutRole__main .ec-borderedDefs dl {
        width: 360px;
        margin: 0 auto; }
    #page_vt4g_shopping_payment .ec-cartRole {
      max-width: none;
      margin-left: auto;
      margin-right: auto; }
  #page_vt4g_shopping_payment .ec-layoutRole {
    background: #f7f7f7; }
    #page_vt4g_shopping_payment .ec-orderRole__actions .ec-off4Grid {
      width: 980px;
      margin: 0 auto;
      padding-bottom: 48px; }
    .ec-creditRole {
      width: 360px;
      padding: 0; }
    #page_shopping_complete .ec-cartRole {
      max-width: none;
      margin-left: auto;
      margin-right: auto; }
      #page_shopping_complete .ec-cartRole .ec-progress {
        margin: 0; }
    .ec-cartCompleteRole {
      max-width: 360px;
      padding: 0; }
        .ec-cartCompleteRole .ec-reportHeading h2 {
          font-size: 22px; }
  .sp-only {
    display: none; }
    .ec-historyRole .ec-historyRole__detail {
      display: flex; }
      .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
        margin-bottom: 62px;
        line-height: 25px;
        letter-spacing: 0.1em; }
    .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailWrapper {
      display: flex;
      justify-content: space-between; }
      .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
        margin-bottom: 0; }
      .ec-historyRole .ec-historyRole__detail .ec-historyRole__detailSubtotal {
        text-align: left; }
    .ec-historyRole .ec-historyRole__detail {
      border-top: none; }
    .ec-historyRole .ec-historyRole__detailstatus {
      width: 360px;
      padding-top: 24px;
      padding-left: 40px;
      padding-bottom: 24px;
      border-bottom: none; }
    .ec-historyRole .ec-historyRole__spwrapper {
      display: block; }
      .ec-historyRole .ec-historyRole__again .ec-blockBtn--cancel {
        width: 112px;
        margin: 0; }
  .ec-historyRole .ec-historyRole__detailimage {
    width: 620px; }
    .ec-history__btn {
      width: 350px;
      height: 70px; }
    .ec-historyListHeader {
      padding: 14px 16px;
      display: flex;
      justify-content: space-between; }
      .ec-historyListHeader .ec-historyListHeader__date {
        margin-bottom: 0; }
        .ec-historyListHeader .ec-historyListHeader__action a {
          font-size: 14px; }
        .ec-historyListHeader .ec-historyListHeader__detail a {
          margin-left: 24px; }
      #page_mypage ul.ec-pager li.ec-pager__item__back {
        margin-right: 12px; }
    #page_mypage ul.ec-pager li.ec-pager__item__next {
      margin-left: 27px; }
    #page_mypage .toOtherPages {
      margin-top: 51px; }
  .sp-only {
    display: none; }
    .ec-addressRole .ec-addressRole__actions {
      width: 980px;
      margin: 40px auto 0; }
  #page_shopping_shipping .ec-layoutRole__contents {
    min-height: calc(100vh - 214px); }
  #page_shopping_shipping .ec-registerRole {
    max-width: 620px;
    margin: 0 auto; }
    #page_shopping_shipping .ec-registerRole h2 {
      font-size: 22px; }
    #page_shopping_shipping .ec-registerRole__actions .ec-blockBtn {
      width: 248px; }
      #page_shopping_shipping .ec-addressList__item {
        padding: 24px 16px 24px 50px; }
      #page_shopping_shipping .ec-addressList__address {
        padding-left: 74px; }
      #page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--action {
        font-size: 18px; }
      #page_shopping_shipping_edit .ec-RegisterRole__actions .ec-blockBtn--cancel {
        width: 248px;
        font-size: 18px; }
  #page_shopping_shipping_edit .ec-layoutRole {
    background: #f7f7f7; }
  .sp-only {
    display: none; }
  #page_forgot .ec-layoutRole,
  #page_forgot_reset .ec-layoutRole {
    background: #f7f7f7; }
    .ec-forgotRole {
      padding: 0; }
    .ec-forgotRole {
      max-width: 360px;
      margin-top: 0; }
      .ec-forgotRole .ec-forgotRole__intro {
        margin-bottom: 24px; }
    .ec-forgetCompleteRole {
      padding: 0; }
    .ec-forgetCompleteRole {
      margin-top: 24px;
      max-width: 360px; }
    .ec-forgetResetRole {
      padding: 0; }
    .ec-forgetResetRole {
      max-width: 360px;
      margin-top: 24px; }
  .sp-only {
    display: none; }
  #page_entry .ec-layoutRole {
    background: #f7f7f7; }
    .ec-registerRole {
      padding: 0; }
      .ec-registerRole__hato {
        margin-top: 19px; }
    .ec-registerCompleteRole {
      padding: 0; }
    .ec-Registered .ec-blockBtn--cancel {
      margin-top: 59px; }
    .ec-activateBtn .ec-blockBtn--cancel {
      width: 350px;
      height: 70px; }
  .sp-only {
    display: none; }
  #page_contact .ec-layoutRole {
    background: #f7f7f7; }
  #page_contact .ec-login__description {
    margin-top: 0; }
    .ec-contactRole {
      padding: 0; }
    .ec-contactConfirmRole {
      padding: 0; }
    .ec-contactCompleteRole {
      padding: 0; }
      .ec-contactCompleteRole__title {
        font-size: 22px;
        letter-spacing: 0.05em; }
      .ec-contactCompleteRole .ec-reportDescription {
        margin-top: 16px;
        margin-bottom: 48px; }
      .ec-contactCompleteRole .ec-blockBtn--cancel {
        width: 350px;
        height: 70px; }
  .sp-only {
    display: none; }
    .ec-customerRole {
      padding: 0; }
      .ec-customerRole .ec-blockBtn--action {
        margin-bottom: 16px; }
    .ec-contactConfirmRole {
      padding: 0; }
    .ec-contactCompleteRole {
      padding: 0; }
  .sp-only {
    display: none; }
    .ec-404Role {
      margin: 245px 0; }
      .ec-404Role__top {
        flex-direction: row;
        margin-bottom: 112px;
        padding: 0; }
        .ec-404Role__top__hato {
          height: 153px;
          width: 190px;
          margin-right: 30px; }
        .ec-404Role__top__message {
          margin-top: 0;
          height: 176px;
          width: 500px; }
          .ec-404Role__top__message::before {
            background-image: url(../img//404/hukidashi_haji.png);
            top: 50%;
            left: -22px;
            transform: translateY(-50%); }
            .ec-404Role__top__message h1 img {
              height: 24px;
              width: 400px; }
          .ec-404Role__top__message p {
            padding: 0; }
    .ec-404Role__bottom .ec-blockBtn--cancel {
      height: 70px;
      width: 350px; }
  .sp-only {
    display: none; }
    .ec-withdrawRole {
      padding: 0; }
    .ec-withdrawRole__inner {
      width: 620px;
      margin: 0 auto; }
      .ec-withdrawRole h2 {
        font-size: 24px;
        line-height: 180%; }
      .ec-withdrawRole .ec-withdrawRole__title {
        font-size: 24px;
        line-height: 180%; }
      .ec-withdrawRole .ec-withdrawRole__description {
        margin-bottom: 48px; }
      .ec-withdrawRole .ec-blockBtn--action {
        width: 312px;
        height: 56px; }
      .ec-withdrawRole .ec-withdrawConfirmRole__action {
        width: 312px;
        height: 56px; }
      .ec-withdrawRole .ec-withdrawConfirmRole__cancel {
        width: 228px; }
      .ec-withdrawRole .ec-withdrawComplete {
        width: 350px;
        height: 70px; }
      .ec-withdrawRole__titlePc {
        display: block; }
      .ec-withdrawRole__titleSp {
        display: none; }
    .ec-withdrawRoleComplete__title {
      margin-bottom: 34px; }
  .sp-only {
    display: none; }
    .ec-userEditCompleteRole {
      padding: 0; }
      .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
        font-size: 32px; }
  .sp-only {
    display: none; }
    #page_shop_okiishi .ec-layoutRole__contents,
    #page_shop_tobira .ec-layoutRole__contents,
    #page_shop_hatokoji .ec-layoutRole__contents {
      padding-top: 74px; }
  #page_shop_okiishi .ec-shop__insideDtail:nth-child(even) .ec-shop__insideDtail__image,
  #page_shop_tobira .ec-shop__insideDtail:nth-child(even) .ec-shop__insideDtail__image,
  #page_shop_hatokoji .ec-shop__insideDtail:nth-child(even) .ec-shop__insideDtail__image {
    text-align: right; }
    #page_shop_okiishi .ec-shop__hero {
      background-image: url("../img/shop/kv_okiishi.png");
      background-position-y: 0;
      height: 481px; }
      #page_shop_okiishi .ec-shop__hero .ec-shop__logo img {
        height: 268px;
        width: 510px; }
  #page_shop_okiishi .ec-shop__message {
    padding-bottom: 70px; }
    #page_shop_okiishi .ec-shop__messageTitleText {
      padding: 0 0 20px;
      text-align: center; }
    #page_shop_okiishi .ec-shop__messageText {
      padding: 0;
      text-align: center; }
    #page_shop_okiishi .ec-shop__messageLink {
      margin-top: 43px; }
        #page_shop_okiishi .ec-shop__messageLink .ec-blockBtn--cancel .btnimg {
          height: 15px;
          width: 157px; }
  #page_shop_okiishi .ec-shop__insideDtail:nth-child(odd) .ec-shop__insideDtail__description img {
    height: 183px;
    width: auto; }
  #page_shop_okiishi .ec-shop__insideDtail:nth-child(even) .ec-shop__insideDtail__description img {
    height: 113px;
    width: auto; }
    #page_shop_tobira .ec-shop__hero {
      background-image: url("../img/shop/kv_tobira.jpg");
      height: 545px;
      background-position: center; }
      #page_shop_tobira .ec-shop__hero .ec-shop__logo img {
        height: 192px;
        width: 406px; }
    #page_shop_tobira .ec-shop__messageText {
      padding: 0;
      text-align: center; }
  #page_shop_tobira .ec-shop__insideDtail:nth-child(odd) .ec-shop__insideDtail__description img {
    height: 82px;
    width: auto; }
  #page_shop_tobira .ec-shop__insideDtail:nth-child(even) .ec-shop__insideDtail__description img {
    height: 82px;
    width: auto; }
    #page_shop_hatokoji .ec-shop__hero {
      background-image: url("../img/shop/kv_hatokoji.png");
      height: 546px;
      background-position: center; }
      #page_shop_hatokoji .ec-shop__hero img {
        height: 227px;
        width: 667px; }
    #page_shop_hatokoji .ec-shop__logo {
      top: 47%;
      left: 49%;
      width: 667px; }
    #page_shop_hatokoji .ec-shop__messageText {
      padding: 0;
      text-align: center; }
    .ec-shop__message {
      padding-top: 52px;
      padding-bottom: 109px; }
      .ec-shop__message .ec-shop__messageLogo {
        margin-bottom: 62px; }
        .ec-shop__message .ec-shop__messageLogo img {
          width: 98px;
          height: 98px; }
    .ec-shop__inside .ec-shop__insideDtail {
      display: flex;
      align-items: center;
      flex-direction: row-reverse; }
    .ec-shop__inside .ec-shop__insideDtail.ec-shop__insideDtail-2 {
      flex-direction: row !important; }
      .ec-shop__inside .ec-shop__insideDtail.ec-shop__insideDtail-2 .ec-shop__insideDtail__text {
        padding: 34px 135px 0 74px; }
      .ec-shop__inside .ec-shop__insideDtail.ec-shop__insideDtail-2 .ec-shop__inside__line {
        margin: 15px 0 20px calc(50% - 50vw); }
      .ec-shop__inside .ec-shop__insideDtail.ec-shop__insideDtail-2 .ec-shop__insideDtail__description img {
        height: 113px;
        width: auto; }
    .ec-shop__inside .ec-shop__insideDtail__text,
    .ec-shop__inside .ec-shop__insideDtail__image {
      width: 50%; }
      .ec-shop__inside .ec-shop__insideDtail__text {
        padding: 30px 0 40px 135px; }
        .ec-shop__inside .ec-shop__insideDtail__title img {
          height: 28px; }
        .ec-shop__inside .ec-shop__insideDtail__title .ec-shop__insideDtail__floor {
          height: 26px; }
      .ec-shop__inside .ec-shop__inside__line {
        margin: 15px calc(50% - 50vw) 20px 0; }
    .ec-shop__open {
      margin: 17px 0 0; }
      .ec-shop__open .__openday th {
        padding-bottom: 4px; }
      .ec-shop__open .__offday th {
        padding-top: 12px; }
    .ec-shop__month .ec-shop__month__title {
      padding: 63px 0 65px; }
      .ec-shop__month .ec-shop__month__title img {
        height: 33px; }
    .ec-shop__month .ec-shop__month__detail {
      padding: 60px 0; }
    .ec-shop__month .ec-shop__month__detail__inner {
      display: flex;
      margin: 0 auto;
      width: 980px; }
      .ec-shop__month .ec-shop__month__detail .ec-shop__month__image {
        width: 50%; }
        .ec-shop__month .ec-shop__month__detail .ec-shop__month__image img {
          height: 393px;
          width: 269px;
          -o-object-fit: cover;
             object-fit: cover; }
    .ec-shop__month .ec-shop__month__description {
      width: 50%;
      max-width: 432px;
      padding-left: 50px; }
    .ec-shop__month .ec-shop__month__name {
      margin-bottom: 8px; }
    .ec-shop__month .ec-shop__month__price {
      margin-top: 35px; }
    .ec-shop__classic {
      padding: 83px 0;
      max-width: 1000px;
      margin: 0 auto; }
      .ec-shop__classic .ec-shop__limited__title {
        text-align: left;
        margin-bottom: 60px;
        width: 145px; }
      .ec-shop__classic .ec-shop__classic__title {
        text-align: left;
        margin-bottom: 60px;
        width: 181px; }
      .ec-shop__classic .ec-shop__classic__card {
        width: calc((100% - 99px) / 4);
        padding: 15px 15px 20px;
        margin-bottom: 37px; }
        .ec-shop__classic .ec-shop__classic__card:nth-child(odd) {
          margin-right: 0; }
        .ec-shop__classic .ec-shop__classic__card:not(:nth-child(4n)) {
          margin-right: 33px; }
        .ec-shop__classic .ec-shop__classic__card__detail {
          height: 72px; }
      .ec-shop__classic .ec-shop__classic__image {
        margin-bottom: 26px;
        width: 100%; }
      .ec-shop__classic .ec-shop__classic__name {
        font-size: 17px; }
        .ec-shop__classic .ec-shop__classic__name span {
          font-size: 11px; }
      .ec-shop__classic .ec-shop__classic__price {
        font-size: 14px; }
      .ec-shop__classic .ec-shop__more {
        display: block; }
    .ec-shop__map {
      padding: 112px 0 124px;
      position: relative; }
        .ec-shop__map .__pc .map-title h3 {
          font-size: 17px;
          font-weight: 600; }
    .ec-shop__btn {
      background: #fff;
      padding-top: 76px;
      padding-bottom: 110px; }
        .ec-shop__btn .ec-blockBtn--cancel:first-of-type {
          margin-bottom: 24px; }
      .ec-shop__btn .btnimg.toShop {
        height: 15px; }
    .ec-shop__btn.ec-shop__btn-items {
      padding: 50px 0; }
        .ec-kamakuraHanabiAnimation__youtube.__pc {
          display: block; }
        .ec-kamakuraHanabiAnimation__youtube.__sp {
          display: none; }
    .ec-hatoFriendsAnimation {
      bottom: 170px; }
      .ec-hatoFriendsAnimation > * {
        width: 100px;
        height: 100px; }
      .ec-hatoFriendsAnimation__hato1 {
        left: 10%; }
      .ec-hatoFriendsAnimation__hato2 {
        left: 20%; }
      .ec-hatoFriendsAnimation__hato3 {
        left: 60%; }
      .ec-hatoFriendsAnimation__hato4 {
        left: 68%; }
      .ec-hatoFriendsAnimation__hato5 {
        left: 75%; }
      .ec-hatoFriendsAnimation__hato6 {
        left: 85%; }
      .hidden-hato-work {
        left: 60px;
        bottom: calc(-303px / 2); }
  #page_hatonohi .ec-layoutRole .ec-layoutRole__contents {
    padding-top: 0; }
  #page_hatonohi .ec-layoutRole .ec-layoutRole__header {
    background: rgba(0, 0, 0, 0); }
    .hatonohi .kv {
      background-image: url("../img/hatonohi/hatonohi_kv_pc.png");
      height: 400px; }
      .hatonohi .kv h1 {
        top: 248px;
        left: 142px; }
        .hatonohi .kv h1 img {
          height: 86px; }
    .hatonohi .pdf {
      padding: 56px 0 73px; }
      .hatonohi .pdf .logo {
        width: 129px;
        height: 89px;
        margin: 0 auto 23px; }
      .hatonohi .pdf .image {
        width: 240px;
        height: 289px; }
      .hatonohi .pdf .department {
        margin-left: 62px; }
      .hatonohi .onlineshop img {
        height: 89px; }
    .hatonohi .exclusive._1 {
      padding: 39px 135px 46px; }
      .hatonohi .exclusive._1 .title {
        margin-bottom: 38px; }
    .hatonohi .exclusive._2 {
      padding: 0 135px 56px; }
        .hatonohi .exclusive._2 .title .text img {
          height: 30px; }
    .hatonohi .exclusive._2 .shipping {
      text-align: center; }
    .hatonohi .exclusive._4 {
      padding: 0 135px 56px; }
        .hatonohi .exclusive._4 .title .text img {
          height: 25px; }
        .hatonohi .exclusive .title .logo img {
          height: 21px; }
      .hatonohi .exclusive .title .text {
        margin-left: 32px; }
        .hatonohi .exclusive .title .text img {
          height: 25px; }
  .hatonohi .exclusive .product-wrapper {
    display: flex;
    justify-content: space-between; }
  .hatonohi .exclusive .product-wrapper .silde-wrapper {
    width: 50.6%; }
    .hatonohi .exclusive .product-wrapper .product {
      width: 44.4%;
      padding: 0;
      margin-top: 0; }
      .hatonohi .exclusive .product-wrapper .product .title {
        font-size: 20px; }
      .hatonohi .exclusive .product-wrapper .product .description {
        font-size: 13px;
        margin-bottom: 43px; }
      .hatonohi .exclusive .product-wrapper .product .price {
        font-size: 17px; }
      .hatonohi .exclusive .product-wrapper .product .price-sub {
        font-size: 14px; }
      .hatonohi .exclusive .product-wrapper .product .price-main {
        font-size: 18px; }
        .hatonohi .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
          width: 350px;
          height: 70px;
          margin: 0; }
      .hatonohi .exclusive .product-wrapper .product .attention {
        font-size: 12px; }
      .hatonohi .hatonohi-btn .ec-blockBtn--cancel {
        width: 350px;
        height: 70px; }
      #page_news_202110 .news-image img {
        width: 185px; }
    #page_news_202110 h1 {
      margin-bottom: 82px; }
      #page_news_202110 h1 img {
        height: 31px; }
    #page_news_202110 .news-content {
      margin: 0 auto 122px;
      width: 980px; }
  #page_hatoshougatsu .ec-layoutRole .ec-layoutRole__contents {
    padding-top: 0; }
  #page_hatoshougatsu .ec-layoutRole .ec-layoutRole__header {
    background: rgba(0, 0, 0, 0); }
    #page_hatoshougatsu .ec-layoutRole__footer {
      margin-top: 73px; }
  #page_hatoshougatsu .ec-blockBtn--cancel {
    height: 70px;
    width: 350px; }
    .hatoshougatsu .kv {
      background-image: url("../img/hatoshougatsu/2025_newyear_KV.png");
      height: 340px; }
      .hatoshougatsu .kv h1 {
        top: 32%;
        right: 59.3%;
        left: inherit; }
        .hatoshougatsu .kv h1 img {
          height: 194px;
          width: auto; }
    .hatoshougatsu .__title {
      margin-top: 56px;
      margin-bottom: 11px; }
      .hatoshougatsu .__title img {
        width: 173px; }
    .hatoshougatsu .exclusive._1 {
      padding: 39px 135px 100px; }
      .hatoshougatsu .exclusive._1 .title {
        margin-bottom: 38px; }
    .hatoshougatsu .exclusive._2 {
      padding: 0 135px 100px; }
        .hatoshougatsu .exclusive._2 .title .text img {
          height: 30px; }
    .hatoshougatsu .exclusive._2 .shipping {
      text-align: center; }
      .hatoshougatsu .exclusive._2._lastchild {
        padding-bottom: 91px; }
        .hatoshougatsu .exclusive .title .logo img {
          height: 21px; }
      .hatoshougatsu .exclusive .title .text {
        margin-left: 32px; }
        .hatoshougatsu .exclusive .title .text img {
          height: 30px; }
  .hatoshougatsu .exclusive .product-wrapper {
    display: flex;
    justify-content: space-between; }
  .hatoshougatsu .exclusive .product-wrapper .silde-wrapper {
    width: 50%; }
    .hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slide {
      margin-bottom: 0; }
    .hatoshougatsu .exclusive .product-wrapper .silde-wrapper .slide.slides {
      margin-bottom: 0; }
    .hatoshougatsu .exclusive .product-wrapper .product {
      width: 44.159%;
      padding: 0; }
      .hatoshougatsu .exclusive .product-wrapper .product .title {
        font-size: 20px;
        margin: 5px 0 10px; }
      .hatoshougatsu .exclusive .product-wrapper .product .description {
        font-size: 13px;
        margin-bottom: 43px; }
      .hatoshougatsu .exclusive .product-wrapper .product .price {
        font-size: 17px;
        margin-bottom: 15px; }
        .hatoshougatsu .exclusive .product-wrapper .product .price span {
          font-weight: normal;
          font-size: 13px; }
        .hatoshougatsu .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
          width: 350px;
          height: 70px;
          margin: 0; }
      .hatoshougatsu .exclusive .product-wrapper .product .link.calendar {
        display: flex;
        gap: 20px; }
      .hatoshougatsu .exclusive .product-wrapper .product .attention {
        font-size: 12px; }
    #page_kamakura_mosaic-art .ec-layoutRole .ec-layoutRole__contents {
      padding-top: 0; }
    #page_kamakura_mosaic-art .ec-layoutRole .ec-layoutRole__header {
      background: rgba(0, 0, 0, 0); }
      #page_kamakura_mosaic-art .ec-layoutRole__footer {
        margin-top: 73px; }
    #page_kamakura_mosaic-art .ec-blockBtn--cancel {
      height: 70px;
      width: 350px; }
    .mosaic-art .kv {
      background-image: url("../img/mosaic-art/kv.png");
      height: 340px; }
      .mosaic-art .kv h1 {
        top: 22%;
        right: 58.3%;
        left: inherit; }
        .mosaic-art .kv h1 img {
          height: 212px;
          width: auto; }
    .mosaic-art .about {
      padding: 0 135px;
      margin-top: 84px;
      display: flex;
      justify-content: space-between;
      align-items: center; }
      .mosaic-art .about .about-image {
        width: 50%; }
      .mosaic-art .about .about-text {
        width: 44.159%; }
    .mosaic-art .number {
      margin-bottom: 100px; }
      .mosaic-art .number img {
        height: 29px; }
        .mosaic-art .number .number-image img {
          width: 400px; }
    .mosaic-art .__title {
      margin-top: 56px;
      margin-bottom: 48px; }
      .mosaic-art .__title img {
        width: 173px; }
      .mosaic-art .__title.bakufu {
        margin-bottom: 45px; }
        .mosaic-art .__title.bakufu img {
          width: 194px; }
      .mosaic-art .__title.about-bakufu {
        margin-top: 120px;
        margin-bottom: 45px; }
        .mosaic-art .__title.about-bakufu img {
          width: 194px; }
    .mosaic-art .exclusive:not(:last-of-type) {
      margin-bottom: 100px; }
  .mosaic-art .exclusive {
    padding: 0 135px; }
        .mosaic-art .exclusive .title .logo img {
          height: 21px; }
      .mosaic-art .exclusive .title .text {
        margin-left: 32px; }
        .mosaic-art .exclusive .title .text img {
          height: 30px; }
  .mosaic-art .exclusive .product-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center; }
  .mosaic-art .exclusive .product-wrapper .silde-wrapper {
    width: 50%; }
    .mosaic-art .exclusive .product-wrapper .silde-wrapper .slide {
      margin-bottom: 0; }
    .mosaic-art .exclusive .product-wrapper .silde-wrapper .slide.slides {
      margin-bottom: 0; }
    .mosaic-art .exclusive .product-wrapper .product {
      width: 44.159%;
      padding: 0; }
      .mosaic-art .exclusive .product-wrapper .product .title {
        font-size: 20px;
        margin: 5px 0 10px; }
      .mosaic-art .exclusive .product-wrapper .product .description {
        font-size: 13px;
        margin-bottom: 15px; }
      .mosaic-art .exclusive .product-wrapper .product .price {
        font-size: 17px;
        margin-bottom: 15px; }
        .mosaic-art .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
          width: 350px;
          height: 70px;
          margin: 0; }
      .mosaic-art .exclusive .product-wrapper .product .attention {
        font-size: 12px; }
    .mosaic-art .kamakura-bakufu {
      margin-bottom: 48px; }
      .mosaic-art .kamakura-bakufu .top-text {
        width: 646px;
        margin: 0 auto 50px; }
    .mosaic-art .kamakura-bakufu .top-image {
      width: 655px;
      margin: 0 auto; }
        .mosaic-art .what .what-title img {
          height: 29px; }
    .mosaic-art .what .what-text {
      width: 646px;
      margin: 0 auto; }
        .mosaic-art .participation .participation-title img {
          height: 29px; }
      .mosaic-art .contact .contact-title {
        font-size: 30px; }
        .mosaic-art .contact .contact-title img {
          height: 29px; }
  #page_hatoshougatsu2023 .ec-layoutRole .ec-layoutRole__contents {
    padding-top: 0; }
  #page_hatoshougatsu2023 .ec-layoutRole .ec-layoutRole__header {
    background: rgba(0, 0, 0, 0); }
    .calendar .kv {
      background-image: url("../img/calendar-2023/calendar_kv_pc.png");
      height: 400px;
      background-position: center center; }
      .calendar .kv h1 {
        top: 160px;
        left: 25%; }
        .calendar .kv h1 img {
          height: 140px; }
    .calendar .calendar-usagi {
      position: inherit;
      height: 27px;
      width: auto;
      margin: 55px auto 20px; }
    .calendar .onlineshop {
      margin-top: 0; }
      .calendar .onlineshop img {
        height: 89px; }
      .calendar .onlineshop.onlineshop-shougatusu {
        margin-bottom: 0; }
    .calendar .exclusive._1 {
      padding: 20px 185px 46px; }
      .calendar .exclusive._1 .title {
        margin-bottom: 80px; }
        .calendar .exclusive._2 .title .text img {
          height: 22px; }
    .calendar .exclusive._2 {
      padding: 20px 185px 46px; }
      .calendar .exclusive._2 .title {
        margin-bottom: 80px; }
        .calendar .exclusive .title .logo img {
          height: 21px; }
      .calendar .exclusive .title .text {
        margin-left: 32px; }
        .calendar .exclusive .title .text img {
          height: 22px; }
  .calendar .exclusive .product-area {
    display: flex;
    justify-content: space-between; }
    .calendar .exclusive .product-wrapper:first-of-type {
      margin-bottom: 0; }
  .calendar .exclusive .product-wrapper {
    width: 43%; }
    .calendar .exclusive .product-wrapper .product {
      padding: 0;
      margin-top: 62px; }
      .calendar .exclusive .product-wrapper .product .title {
        font-size: 20px; }
      .calendar .exclusive .product-wrapper .product .price {
        font-size: 17px;
        margin-bottom: 40px; }
        .calendar .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
          width: 350px;
          height: 70px; }
      .calendar .calendar-btn .ec-blockBtn--cancel {
        width: 350px;
        height: 70px; }
      .calendar .shougatsu .exclusive .product-wrapper {
        display: flex;
        justify-content: space-between;
        margin: 100px auto 50px;
        width: 85%; }
      .calendar .shougatsu .exclusive .product-wrapper .silde-wrapper {
        width: 50.6%; }
        .calendar .shougatsu .exclusive .product-wrapper .product {
          width: 44.4%;
          padding: 0;
          margin-top: 0; }
          .calendar .shougatsu .exclusive .product-wrapper .product .title {
            font-size: 20px; }
          .calendar .shougatsu .exclusive .product-wrapper .product .description {
            font-size: 13px;
            margin-bottom: 43px; }
          .calendar .shougatsu .exclusive .product-wrapper .product .price {
            font-size: 17px; }
          .calendar .shougatsu .exclusive .product-wrapper .product .price-sub {
            font-size: 14px; }
          .calendar .shougatsu .exclusive .product-wrapper .product .price-main {
            font-size: 18px; }
          .calendar .shougatsu .exclusive .product-wrapper .product .attention {
            font-size: 12px; }
      .calendar .shougatsu .link {
        margin-bottom: 15px; }
        .calendar .shougatsu .link .ec-blockBtn--cancel {
          width: 350px;
          height: 70px; }
  #page_gokain .ec-layoutRole .ec-layoutRole__contents {
    padding-top: 0; }
  #page_gokain .ec-layoutRole .ec-layoutRole__header {
    background: rgba(0, 0, 0, 0); }
    .gokain .kv {
      background-image: url("../img/gokain/gokain_kv_pc3.png");
      height: 400px; }
      .gokain .kv h1 {
        top: 165px;
        left: 195px;
        transform: none;
        -webkit-transform: none;
        -ms-transform: none; }
        .gokain .kv h1 img {
          height: 86px; }
    .gokain .onlineshop {
      margin-top: 57px; }
      .gokain .onlineshop img {
        height: 89px; }
    .gokain .gokain-about {
      font-weight: 600;
      font-size: 17px;
      padding: 0;
      max-width: 700px;
      margin: 0 auto 40px; }
      .gokain .gokain-about.gokaincho {
        text-align: left; }
      .gokain .gokain-about .gokain-about-link {
        font-size: 17px; }
    .gokain .gokain-caution {
      font-size: 14px;
      padding: 0;
      max-width: 700px; }
    .gokain .gokain-toshimaya {
      margin-top: 40px; }
      .gokain .gokain-toshimaya img {
        width: 315px;
        height: 452px; }
    .gokain .exclusive._1 {
      padding: 39px 135px 21px; }
      .gokain .exclusive._1 .title {
        margin-bottom: 38px; }
    .gokain .exclusive._2 {
      padding: 0 135px 56px; }
        .gokain .exclusive._2 .title .text img {
          height: 30px; }
    .gokain .exclusive._2 .shipping {
      text-align: center; }
    .gokain .exclusive._4 {
      padding: 0 135px 56px; }
        .gokain .exclusive._4 .title .text img {
          height: 25px; }
        .gokain .exclusive .title .logo img {
          height: 21px; }
      .gokain .exclusive .title .text {
        margin-left: 32px; }
        .gokain .exclusive .title .text img {
          height: 25px; }
  .gokain .exclusive .product-wrapper {
    display: flex;
    justify-content: space-between; }
  .gokain .exclusive .product-wrapper .silde-wrapper {
    width: 50.6%; }
    .gokain .exclusive .product-wrapper .product {
      width: 44.4%;
      padding: 0;
      margin-top: 0; }
      .gokain .exclusive .product-wrapper .product .title {
        font-size: 20px; }
      .gokain .exclusive .product-wrapper .product .description {
        font-size: 13px;
        margin-bottom: 35px; }
      .gokain .exclusive .product-wrapper .product .price {
        font-size: 17px; }
      .gokain .exclusive .product-wrapper .product .price-sub {
        font-size: 14px; }
      .gokain .exclusive .product-wrapper .product .price-main {
        font-size: 18px; }
        .gokain .exclusive .product-wrapper .product .link .ec-blockBtn--cancel {
          width: 350px;
          height: 70px;
          margin: 0; }
      .gokain .exclusive .product-wrapper .product .attention {
        font-size: 12px; }
    .gokain .gokain-btn {
      padding: 50px 0 40px;
      padding-top: 80px; }
      .gokain .gokain-btn .ec-blockBtn--cancel {
        width: 350px;
        height: 70px; }
    .page-call img {
      height: 24px;
      width: 40px; }
    .btnimg {
      height: 14px; }
    .btnimg.toProductlist_btn {
      height: 16px; }
  #page_homepage .ec-layoutRole .ec-layoutRole__header {
    background: #FDE260; }
  #page_homepage .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
    .ec-topRole__hatoSable {
      padding: 105px 0 75px; }
      .ec-topRole__hatoSable__img {
        flex-direction: row;
        justify-content: center;
        margin: 0 auto; }
        .ec-topRole__hatoSable__img .hatosable_logo {
          width: 386px;
          margin-right: 40px;
          margin-bottom: 0; }
        .ec-topRole__hatoSable__img .hatosable_icon {
          width: 244px;
          margin-right: 100px;
          margin-top: 0; }
        .ec-topRole__hatoSable__img .hatosable_text {
          height: auto;
          margin-top: 0;
          margin-right: 0;
          width: 218px; }
      .ec-topRole__hatoSable .ec-blockBtn--action {
        margin-top: 38px;
        height: 70px;
        width: 350px;
        border: 2px solid #000; }
        .ec-topRole__hatoSable .ec-blockBtn--action .btnimg {
          height: 17px; }
    .ec-topRole__hatoSable__sablo {
      margin-top: 0;
      height: 522px; }
        .ec-topRole__hatoSable__sablo__inner ul {
          margin-top: -114px; }
        .ec-topRole__hatoSable__sablo__inner li {
          width: 264px;
          margin-left: 350px; }
          .ec-topRole__hatoSable__sablo__inner li:first-child {
            margin-left: 86px; }
          .ec-topRole__hatoSable__sablo__inner .hatojin::before {
            width: 90px;
            height: 67px;
            left: 60px;
            top: 90px;
            -webkit-animation: hatojinpc 25.6s steps(4) infinite;
                    animation: hatojinpc 25.6s steps(4) infinite; }
        .ec-topRole__hatoSable__sablo__inner ul:nth-child(even) {
          margin-left: 300px; }
    .ec-topRole__category {
      width: 980px;
      margin: 0 auto;
      margin-top: -40px;
      padding-top: 108px;
      padding-bottom: 110px; }
      .ec-topRole__category h2 {
        margin-left: 0; }
        .ec-topRole__category h2 img {
          height: 32px; }
      .ec-topRole__category ul {
        flex-direction: row;
        padding-top: 16px;
        margin: 0;
        justify-content: space-between; }
        .ec-topRole__category ul li {
          margin-bottom: 0;
          width: 310px; }
      .ec-topRole__category__hatosable .ec-topRole__category__text img {
        width: 121px; }
      .ec-topRole__category__recommended .ec-topRole__category__text img {
        width: 95px; }
      .ec-topRole__category__others .ec-topRole__category__text img {
        width: 120px; }
      .ec-topRole__category__text {
        align-items: baseline;
        left: 26px;
        bottom: 15px; }
        .ec-topRole__category__text__icon {
          margin-bottom: 8px; }
    .ec-topRole__hatoSable__pkg {
      margin: 0 auto; }
      .ec-topRole__hatoSable__pkg__inner {
        height: 522px; }
        .ec-topRole__hatoSable__pkg__inner__box {
          margin-top: -133px; }
            .ec-topRole__hatoSable__pkg__inner__box ul li {
              width: 290px;
              height: 290px; }
            .ec-topRole__hatoSable__pkg__inner__box ul li.sabro::after {
              -webkit-animation: hellopc 30s steps(6) infinite;
                      animation: hellopc 30s steps(6) infinite; }
          .ec-topRole__hatoSable__pkg__inner__box ul:nth-child(odd) {
            margin-left: -133px; }
    .ec-topRole__hatoSable__calendar {
      padding-top: 65px;
      padding-bottom: 50px; }
      .ec-topRole__hatoSable__calendar__inner {
        flex-direction: row;
        justify-content: space-between;
        max-width: 1196px;
        margin: 0 auto; }
      .ec-topRole__hatoSable__calendar__img {
        width: 52%;
        padding: 0; }
      .ec-topRole__hatoSable__calendar__img__inner {
        display: flex;
        margin-bottom: 6px; }
        .ec-topRole__hatoSable__calendar__img__month {
          height: 185px;
          width: 136px;
          margin-right: 6px; }
          .ec-topRole__hatoSable__calendar__img__month.__jan:hover {
            background-image: url(../img/top_calender/1_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__feb:hover {
            background-image: url(../img/top_calender/2_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__mar:hover {
            background-image: url(../img/top_calender/3_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__apr:hover {
            background-image: url(../img/top_calender/4_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__may:hover {
            background-image: url(../img/top_calender/5_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__jun:hover {
            background-image: url(../img/top_calender/6_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__jul:hover {
            background-image: url(../img/top_calender/7_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__aug:hover {
            background-image: url(../img/top_calender/8_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__sep:hover {
            background-image: url(../img/top_calender/9_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__oct:hover {
            background-image: url(../img/top_calender/10_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__nov:hover {
            background-image: url(../img/top_calender/11_hover.png); }
          .ec-topRole__hatoSable__calendar__img__month.__dec:hover {
            background-image: url(../img/top_calender/12_hover.png); }
        .ec-topRole__hatoSable__calendar__img__bottom img {
          margin-right: 0; }
      .ec-topRole__hatoSable__calendar__box {
        padding: 175px 0 0;
        margin-top: 0;
        margin-bottom: 0;
        width: 48%; }
      .ec-topRole__hatoSable__calendar__text {
        margin-top: 50px;
        line-height: 2.15; }
      .ec-topRole__hatoSable__calendar .ec-blockBtn--action {
        margin-top: 54px;
        height: 70px;
        width: 350px; }
    .ec-topRole__shop {
      padding-top: 51px;
      margin: 0 auto; }
      .ec-topRole__shop h2 {
        text-align: center;
        margin-left: 0;
        margin-bottom: 0; }
        .ec-topRole__shop h2 img {
          height: 32px; }
    .ec-topRole__shop img {
      margin-top: 53px; }
      .ec-topRole__shop__text {
        margin-top: 64px;
        margin-right: 0;
        margin-left: 0; }
        .ec-topRole__shop__text__strong {
          margin-bottom: 16px; }
          .ec-topRole__shop__text__strong img {
            width: 430px; }
      .ec-topRole__shop .ec-blockBtn--primary {
        border: 2px solid #000; }
        .ec-topRole__shop .ec-blockBtn--primary .btnimg {
          width: 88px; }
  .product_page .ec-layoutRole__header {
    background-color: rgba(255, 255, 255, 0); }
  .product_page .ec-layoutRole .ec-layoutRole__contents {
    padding-top: 0; }
  .product_page .ec-breadcrumb {
    margin: auto;
    padding: 15px 0 0;
    width: 1009px; }
    .product_page .ec-layoutRole__main {
      margin-top: 74px; }
    .product_category {
      min-width: 1009px; }
      .product_category__inner {
        width: 1009px;
        margin: 0 auto;
        height: 349px; }
      .product_category__text {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0;
        bottom: 50px;
        width: 1009px; }
            .product_category__text__left h1 img {
              height: 30px; }
        .product_category__text__right {
          margin-top: 0; }
            .product_category__text__right .product_category_list_past .product_category_list_select {
              width: 200px; }
      .product_category_hato-sable {
        background-image: url(../img/productslist/product_hatosable_bg.jpg);
        background-position: center;
        background-size: 1280px 340px; }
        .product_category_hato-sable .product_category__text .product_category__text__left__message img {
          width: 50%;
          height: auto; }
      .product_category_recommend {
        background-image: url(../img/productslist/product_recomend_bg.jpg);
        background-position: center;
        background-size: 1280px 340px; }
      .product_category_recommend .product_category__text h1 {
        margin-bottom: 22px; }
        .product_category_recommend .product_category__text .product_category__text__left__message img {
          width: 332px;
          height: auto; }
      .product_category_others {
        background-image: url(../img/productslist/product_toshimaya_bg.jpg);
        background-position: center;
        background-size: 1280px 340px; }
      .product_category_others .product_category__text h1 {
        margin-bottom: 22px; }
        .product_category_others .product_category__text .product_category__text__left__message img {
          width: 332px;
          height: auto; }
      .product_category_list {
        width: 1009px;
        margin: 0 auto 45px; }
        .product_category_list h1 img {
          height: 30px; }
        .product_category_list h1 .shop-floor {
          height: 27px; }
    .product_category_list_this,
    .product_category_list_past {
      margin-top: 68px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 1009px; }
      .product_category_list_this .product_category_list,
      .product_category_list_past .product_category_list {
        padding: 0; }
    .category_list_monthly_this {
      width: 1009px;
      margin: 0 auto -2px; }
    .category_list_monthly_box {
      padding: 0; }
    .category_list_monthly_past {
      margin-top: 0; }
      .category_list_monthly_past a::before {
        width: 140px;
        height: 18px; }
    .category_list_monthly_this a::before {
      width: 140px;
      height: 18px; }
    .product_category_list_past_top {
      justify-content: flex-start; }
    .product_category_list_past .product_category_list_label {
      font-size: 15px; }
    .product_category_list_past .product_category_list_select {
      margin-left: 36px;
      margin-right: 0;
      height: 45px;
      width: 165px; }
      .product_category_list_past .product_category_list_select::before {
        left: 20px; }
    .product_page.online_page .ec-layoutRole__main {
      margin-top: 74px; }
    .product_page.online_page .product_category_list_past {
      margin-top: 68px; }
    #page_product_list_recommends .recommends_top_block,
    #page_product_list_sweets .recommends_top_block,
    #page_product_list .recommends_top_block {
      justify-content: flex-start;
      margin: auto;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end;
      padding: 31px 0;
      width: 1009px; }
      #page_product_list_recommends .recommends_top_block .ec-breadcrumb,
      #page_product_list_sweets .recommends_top_block .ec-breadcrumb,
      #page_product_list .recommends_top_block .ec-breadcrumb {
        padding-top: 7px; }
        #page_product_list_recommends .recommends_top_block .product_category_list_past .product_category_list_select,
        #page_product_list_sweets .recommends_top_block .product_category_list_past .product_category_list_select,
        #page_product_list .recommends_top_block .product_category_list_past .product_category_list_select {
          margin-left: 35px;
          width: 199px; }
        #page_product_list_recommends .recommends_top_block .product_category_list_past .product_category_list_label,
        #page_product_list_sweets .recommends_top_block .product_category_list_past .product_category_list_label,
        #page_product_list .recommends_top_block .product_category_list_past .product_category_list_label {
          font-size: 15px; }
      #page_product_list_recommends .recommends_top_block .category_list_monthly_this,
      #page_product_list_sweets .recommends_top_block .category_list_monthly_this,
      #page_product_list .recommends_top_block .category_list_monthly_this {
        margin: 0;
        display: block;
        width: auto; }
  #page_product_list_recommends .ec-shelfRole,
  #page_product_list_sweets .ec-shelfRole,
  #page_product_list .ec-shelfRole {
    padding-top: 0; }
    #page_product_list_sweets .recommends_top_block {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-end; }
      #page_product_list_sweets .recommends_top_block .category_list_monthly_this {
        margin: 0;
        display: block;
        width: auto; }
  #page_product_detail .ec-breadcrumb {
    width: 1009px;
    margin: 0 auto;
    padding: 15px 0 0; }
    .ec-historyRole {
      padding: 0; }
  #page_help_tradelaw .ec-pageHeader {
    margin: 0 auto;
    width: 980px; }
  #page_help_tradelaw .ec-borderedDefs dt {
    width: 30%; }
    #page_help_tradelaw .ec-borderedDefs .ec-label {
      line-height: 21px; }
    #page_help_tradelaw .ec-borderedDefs .page-call p {
      text-decoration: none;
      line-height: 180%;
      color: #000000; }
    #page_help_tradelaw .block-flex {
      flex-direction: row; }
    #page_help_tradelaw .ec-ec-role__actions {
      width: 980px;
      margin: 64px auto 0; }
    #page_help_tradelaw .ec-ec-role__actions .ec-blockBtn--cancel {
      height: 70px;
      width: 350px; }
  #page_help .ec-pageHeader {
    margin: 0 auto;
    width: 980px; }
    #page_help .ec-ec-role__actions {
      width: 980px;
      margin: 64px auto 0; }
  .ec-help__inner {
    margin: 0 auto;
    width: 697px; }
    .ec-help__inner h2 {
      font-size: 22px;
      line-height: 33px;
      letter-spacing: 0.05em; }
      #page_help .ec-borderedDefs .ec-help__listwrapper {
        display: flex;
        justify-content: center; }
        #page_help .ec-borderedDefs .ec-help__listwrapper .ec-help__list {
          margin-left: 0; }
          #page_help .ec-borderedDefs .ec-help__listwrapper .ec-help__list:first-of-type {
            margin-right: 96px; }
          #page_help .ec-borderedDefs .ec-help__listwrapper .ec-help__list li:last-of-type {
            margin-bottom: 0; }
    #page_help .ec-onecolumn {
      text-align: center;
      line-height: 21px;
      padding: 24px 0; }
      #page_help .ec-ec-role__actions .ec-blockBtn--cancel {
        width: 350px;
        height: 70px; }
    #page_help .ec-help__attention {
      margin-left: 40px; }
    .ec-accordion__container .accordion-title {
      line-height: 21px;
      padding: 24px 40px;
      width: 100%; }
    .ec-accordion__container .accordion-title:after {
      right: 29px; }
    .ec-accordion__container .accordion-content {
      padding: 0 40px 24px; }
  #page_hato .ec-layoutRole .ec-layoutRole__header {
    background: rgba(255, 255, 255, 0); }
  #page_hato .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
    #page_hato .ec-layoutRole .ec-layoutRole__footer {
      margin-top: 239px; }
    .ec-hatoRole__inner {
      width: 960px;
      margin: 0 auto;
      padding: 0; }
    .ec-hatoRole__top__inner {
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      height: auto;
      padding: 0; }
      .ec-hatoRole__top__inner__text {
        width: 50%; }
        .ec-hatoRole__top__inner__text__inner {
          max-width: 640px; }
      .ec-hatoRole__top__inner .hatosable_text {
        width: 178px;
        padding: 0; }
      .ec-hatoRole__top__inner__img {
        width: 50%; }
    .ec-hatoRole__story {
      margin: 0 auto;
      width: 647px; }
        .ec-hatoRole__story__toptitle h1 {
          margin-bottom: 47px; }
          .ec-hatoRole__story__toptitle h1 img {
            height: 59px;
            width: 292px; }
        .ec-hatoRole__story__toptitle .ec-hatoRole__story__sable {
          height: 133px;
          width: 172px; }
      .ec-hatoRole__story__contents {
        padding: 0; }
        .ec-hatoRole__story__contents.__01 {
          margin-top: 95px; }
          .ec-hatoRole__story__contents.__01 .ec-hatoRole__story__contents__img {
            margin-top: 44px;
            height: 356px;
            width: 631px; }
          .ec-hatoRole__story__contents.__01 .ec-hatoRole__story__contents__title__img {
            margin: 0 0 48px;
            height: 29px;
            width: 441px; }
        .ec-hatoRole__story__contents.__02 {
          margin-top: 156px; }
          .ec-hatoRole__story__contents.__02 .ec-hatoRole__story__contents__img {
            margin-top: 20px;
            height: 491px;
            width: 416px; }
          .ec-hatoRole__story__contents.__02 .ec-hatoRole__story__contents__title__img {
            margin: 39px 0 39px;
            height: 30px;
            width: 280px; }
        .ec-hatoRole__story__contents.__03 {
          margin-top: 103px; }
          .ec-hatoRole__story__contents.__03 .ec-hatoRole__story__contents__img {
            margin-top: 90px;
            height: 448px;
            width: 502px; }
          .ec-hatoRole__story__contents.__03 .ec-hatoRole__story__contents__title__img {
            margin: 40px 0 45px;
            height: 31px;
            width: 279px; }
        .ec-hatoRole__story__contents.__04 {
          margin-top: 158px; }
          .ec-hatoRole__story__contents.__04 .ec-hatoRole__story__contents__img {
            margin-top: 58px;
            height: 535px;
            width: 423px; }
          .ec-hatoRole__story__contents.__04 .ec-hatoRole__story__contents__title__img {
            margin: 40px 0 45px;
            height: 29px;
            width: 368px; }
        .ec-hatoRole__story__contents.__05 {
          margin-top: 150px; }
          .ec-hatoRole__story__contents.__05 .ec-hatoRole__story__contents__img {
            margin-top: 70px;
            height: 307px;
            width: 341px; }
          .ec-hatoRole__story__contents.__05 .ec-hatoRole__story__contents__title__img {
            margin: 40px 0 60px;
            height: 80px;
            width: 395px; }
    .ec-hatoRole__otherLink {
      padding-top: 158px; }
        .ec-hatoRole__otherLink h3 img {
          height: 20px;
          width: 430px; }
      .ec-hatoRole__otherLink p {
        margin-top: 14px; }
      .ec-hatoRole__otherLink .ec-blockBtn--primary {
        margin-top: 40px; }
        .ec-hatoRole__otherLink .ec-blockBtn--primary::before {
          height: 70px;
          width: 95px; }
  #page_help_guide .ec-pageHeader {
    margin: 0 auto;
    padding: 0;
    width: 980px; }
    #page_help_guide .ec-ec-role__actions {
      width: 980px;
      margin: 64px auto 0; }
    #page_help_guide .ec-ec-role__actions .ec-blockBtn--cancel {
      height: 70px;
      width: 350px; }
      #page_help_guide .ec-onecolumn .ec-blockBtn--cancel {
        margin-top: 16px; }
    #page_help_guide .ec-onecolumn {
      padding-top: 25px;
      padding-bottom: 24px; }
    #page_help_guide .page-call {
      margin-bottom: 6px; }
      #page_help_guide .page-call p {
        text-decoration: none;
        line-height: 180%;
        color: #000000; }
    #page_help_guide .block-flex {
      flex-direction: row; }
    #page_help_guide .ec-help__attention {
      margin-left: 40px; }
  #page_guide_shipping .ec-pageHeader {
    margin: 0 auto;
    padding: 0;
    width: 980px; }
    #page_guide_shipping .ec-ec-role__actions {
      width: 980px;
      margin: 64px auto 0; }
      #page_guide_shipping dl dt {
        width: 80%;
        padding-left: 40px; }
      #page_guide_shipping dl dd {
        width: 20%;
        padding-right: 40px; }
  #page_kamakura_shipping .ec-pageHeader {
    margin: 0 auto;
    padding: 0;
    width: 980px; }
    #page_kamakura_shipping .ec-ec-role__actions {
      width: 980px;
      margin: 64px auto 0; }
      #page_kamakura_shipping dl dt {
        width: 80%;
        padding-left: 40px; }
      #page_kamakura_shipping dl dd {
        width: 20%;
        padding-right: 40px; }
      #page_guide_shipping_tel .ec-select select.js-deliv-select {
        width: 173px; }
    #page_guide_shipping_tel .js-deliv-pref {
      margin-bottom: 8px; }
      #page_guide_shipping_tel .ec-shipping__table td {
        padding-right: 48px; }
  #page_guide_shipping_tel .ec-shipping__size {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 24px; }
  #page_guide_shipping_tel .ec-shipping__size .ec-shipping__description {
    width: 236px;
    margin: 0 0 0 24px; }
    #page_guide_shipping_tel .ec-size__table {
      width: 360px; }
  #page_help_agreement .ec-help__inner,
  #page_help_privacy .ec-help__inner {
    padding: 0;
    width: auto; }
    #page_help_agreement .ec-help__text:first-of-type,
    #page_help_privacy .ec-help__text:first-of-type {
      margin-top: 24px; }
    #page_help_agreement .ec-ec-role__actions,
    #page_help_privacy .ec-ec-role__actions {
      width: 980px;
      margin: 64px auto 0; }
    #page_help_agreement .ec-ec-role__actions .ec-blockBtn--cancel,
    #page_help_privacy .ec-ec-role__actions .ec-blockBtn--cancel {
      height: 70px;
      width: 350px; }
  #page_recruit .ec-layoutRole__header {
    background: rgba(255, 255, 255, 0); }
  #page_recruit .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
  #page_recruit .ec-layoutRole__contents {
    padding-top: 0; }
    #page_recruit h1 {
      margin-top: 40px; }
      .ec-recruit .ec-pageHeader {
        margin: 0 auto; }
      .ec-recruit__inner {
        margin-bottom: 73px;
        padding: 0;
        width: 746px; }
        .ec-recruit__inner__list {
          margin: 0 auto;
          width: 440px;
          margin-top: 40px; }
          .ec-recruit__inner__list th {
            width: 120px; }
          .ec-recruit__inner__list td {
            padding-bottom: 22px; }
          .ec-recruit__inner__list tr:first-child td {
            padding-bottom: 22px; }
          .ec-recruit__inner__list a.__mynavi {
            display: block; }
            .ec-recruit__inner__list a.__mynavi img {
              margin-left: 30px;
              height: 102px;
              width: 115px; }
          .ec-recruit__inner__list a.__mynavi2 {
            display: block; }
          .ec-recruit__inner__list a.__mynavibaito {
            display: block; }
            .ec-recruit__inner__list a.__mynavibaito img {
              margin-top: 12px;
              margin-left: 16px; }
          .ec-recruit__inner__list a.__airwork {
            display: block; }
            .ec-recruit__inner__list a.__airwork img {
              margin-top: 12px;
              margin-left: 14px; }
          .ec-recruit__inner__list a.__baitoru {
            display: block; }
        .ec-recruit__inner__pastData {
          margin-top: 50px; }
          .ec-recruit__inner__pastData h2 {
            font-weight: 600;
            margin-bottom: 15px;
            letter-spacing: .1rem; }
        .ec-recruit__inner__pastData__list {
          border: 1px solid #000;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          letter-spacing: .1rem;
          font-size: 17px;
          height: 87px;
          width: 100%; }
          .ec-recruit__inner__pastData__listsp {
            border: none;
            height: auto;
            width: auto;
            font-size: 17px; }
            .ec-recruit__inner__pastData__listsp .ec-recruit__inner__pastData__list__box:first-child {
              border-left: 1px solid #000; }
            .ec-recruit__inner__pastData__list__box.__title {
              padding-right: 38px;
              padding-left: 53px;
              margin-bottom: 0; }
            .ec-recruit__inner__pastData__list__box__line {
              width: 98px; }
      .ec-recruit .ec-ec-role__actions a {
        border: 2px solid #000;
        height: 70px;
        width: 350px; }
    #page_help_about .ec-help__aboutKv {
      padding-top: 0;
      margin: 0; }
      #page_help_about .ec-borderedDefs dl {
        padding: 16px 0; }
      #page_help_about .ec-borderedDefs .ec-label {
        font-size: 14px; }
      #page_help_about .ec-borderedDefs dd {
        font-size: 14px; }
    #page_help_about .ec-ec-role__actions {
      width: 980px;
      margin: 50px auto 0; }
      #page_help_about .ec-ec-role__actions a {
        border: 2px solid #000;
        height: 70px;
        width: 350px; }
  #page_help_about .ec-layoutRole__header {
    background: rgba(255, 255, 255, 0); }
  #page_help_about .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
    #page_help_about .ec-layoutRole__footer {
      margin-top: 152px; }
  #page_activity .ec-layoutRole__contents {
    padding-top: 0;
    max-width: none; }
  #page_activity .ec-layoutRole .ec-layoutRole__header {
    background: rgba(255, 255, 255, 0); }
  #page_activity .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); }
  #page_activity .ec-layoutRole__footer {
    margin-top: 88px; }
    .ec-activityRole__head {
      height: 339px;
      width: 100%; }
        .ec-activityRole__head .ec-topRole__hatoSable__sablo__inner {
          margin-left: -410px;
          margin-top: 0; }
          .ec-activityRole__head .ec-topRole__hatoSable__sablo__inner ul:nth-child(even) {
            margin-left: 300px; }
          .ec-activityRole__head .ec-topRole__hatoSable__sablo__inner li {
            margin-left: 350px;
            width: 224px; }
  .ec-activityRole__contents {
    margin: 0 auto;
    width: 1028px; }
    .ec-activityRole__2col {
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      padding: 47px 47px 0; }
      .ec-activityRole__2col img {
        margin-bottom: 0;
        height: 158px; }
      .ec-activityRole__2col__text {
        width: 570px;
        margin-top: 27px; }
    .ec-activityRole__2col.__imgNext {
      flex-direction: row-reverse; }
    .ec-activityRole__about {
      align-items: center;
      padding: 65px 0 47px; }
      .ec-activityRole__about__title {
        margin-bottom: 45px;
        width: 313px;
        height: 31px; }
    .ec-activityRole__beach {
      padding-bottom: 146px; }
    .ec-activityRole__fireworks {
      padding-bottom: 150px; }
    .ec-activityRole__carnival {
      padding-bottom: 149px; }
      .ec-activityRole__carnival__img {
        margin-top: 65px; }
        .ec-activityRole__carnival__img img {
          width: 395px;
          height: 263px; }
        .ec-activityRole__carnival__img img:first-child {
          margin-right: 62px; }
      .ec-activityRole__school__img {
        margin-top: 96px;
        margin-left: auto;
        margin-right: auto;
        width: 700px; }
    .ec-activityRole__school {
      padding-bottom: 150px; }
    .ec-activityRole__package__img {
      margin-top: 65px; }
      .ec-activityRole__package__img img {
        width: 395px;
        height: 263px; }
      .ec-activityRole__package__img img:first-child {
        margin-right: 62px; }
  .ec-activityRole__package .ec-activityRole__2col {
    padding: 47px 47px 0 10px; }
    .ec-activityRole__otherLink {
      margin-top: 102px; }
      .ec-calendar-top-wrapper-images {
        width: 986px; }
      .ec-calendar-top__logo {
        width: 400px; }
    .calendar-april-paper-bg {
      background-image: url(../../assets/img/calendar/pc/4/top.png); }
    .calendar-april__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/4/page1.png); }
    .calendar-april__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/4/page2.png); }
    .calendar-april__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/4/page3.png); }
    .calendar-april__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/4/page4.png); }
    .calendar-april__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/4/page5.png); }
    .calendar-april__page-6-bg {
      background-image: url(../../assets/img/calendar/pc/4/page6.png); }
    .calendar-january-paper-bg {
      background-image: url(../../assets/img/calendar/pc/1/top.png); }
    .calendar-january__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/1/page1.png); }
    .calendar-january__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/1/page2.png); }
    .calendar-january__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/1/page3.png); }
    .calendar-january__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/1/page4.png); }
    .calendar-january__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/1/page5.png); }
    .calendar-january__page-6-bg {
      background-image: url(../../assets/img/calendar/pc/1/page6.png); }
    .calendar-february-paper-bg {
      background-image: url(../../assets/img/calendar/pc/2/top.png); }
    .calendar-february__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/2/page1.png); }
    .calendar-february__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/2/page2.png); }
    .calendar-february__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/2/page3.png); }
    .calendar-february__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/2/page4.png); }
    .calendar-february__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/2/page5.png); }
    .calendar-march-paper-bg {
      background-image: url(../../assets/img/calendar/pc/3/top.png); }
    .calendar-march__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/3/page1.png); }
    .calendar-march__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/3/page2.png); }
    .calendar-march__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/3/page3.png); }
    .calendar-march__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/3/page4.png); }
    .calendar-march__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/3/page5.png); }
    .calendar-may-paper-bg {
      background-image: url(../../assets/img/calendar/pc/5/top.png); }
    .calendar-may__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/5/page1.png); }
    .calendar-may__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/5/page2.png); }
    .calendar-may__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/5/page3.png); }
    .calendar-may__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/5/page4.png); }
    .calendar-may__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/5/page5.png); }
    .calendar-june-paper-bg {
      background-image: url(../../assets/img/calendar/pc/6/top.png); }
    .calendar-june__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/6/page1.png); }
    .calendar-june__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/6/page2.png); }
    .calendar-june__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/6/page3.png); }
    .calendar-june__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/6/page4.png); }
    .calendar-june__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/6/page5.png); }
    .calendar-july-paper-bg {
      background-image: url(../../assets/img/calendar/pc/7/top.png); }
    .calendar-july__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/7/page1.png); }
    .calendar-july__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/7/page2.png); }
    .calendar-july__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/7/page3.png); }
    .calendar-july__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/7/page4.png); }
    .calendar-july__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/7/page5_2.png); }
    .calendar-july__page-6-bg {
      background-image: url(../../assets/img/calendar/pc/7/page6.png); }
    .calendar-july__page-7-bg {
      background-image: url(../../assets/img/calendar/pc/7/page7.png); }
    .calendar-august-paper-bg {
      background-image: url(../../assets/img/calendar/pc/8/top.png); }
    .calendar-august__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/8/page1.png); }
    .calendar-august__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/8/page2.png); }
    .calendar-august__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/8/page3.png); }
    .calendar-august__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/8/page4.png); }
    .calendar-august__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/8/page5.png); }
    .calendar-august__page-6-bg {
      background-image: url(../../assets/img/calendar/pc/8/page6.png); }
    .calendar-september-paper-bg {
      background-image: url(../../assets/img/calendar/pc/9/top.png); }
    .calendar-september__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/9/page1.png); }
    .calendar-september__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/9/page2.png); }
    .calendar-september__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/9/page3.png); }
    .calendar-september__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/9/page4.png); }
    .calendar-september__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/9/page5.png); }
    .calendar-october-paper-bg {
      background-image: url(../../assets/img/calendar/pc/10/top.png); }
    .calendar-october__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/10/page1.png); }
    .calendar-october__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/10/page2.png); }
    .calendar-october__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/10/page3.png); }
    .calendar-october__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/10/page4.png); }
    .calendar-october__page-5-bg {
      background-image: url(../../assets/img/calendar/pc/10/page5.png); }
    .calendar-october__page-6-bg {
      background-image: url(../../assets/img/calendar/pc/10/page6.png); }
    .calendar-october__page-7-bg {
      background-image: url(../../assets/img/calendar/pc/10/page7.png); }
    .calendar-november-paper-bg {
      background-image: url(../../assets/img/calendar/pc/11/top.png); }
    .calendar-november__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/11/page1.png); }
    .calendar-november__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/11/page2.png); }
    .calendar-november__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/11/page3.png); }
    .calendar-december-paper-bg {
      background-image: url(../../assets/img/calendar/pc/12/top.png); }
    .calendar-december__page-1-bg {
      background-image: url(../../assets/img/calendar/pc/12/page1.png); }
    .calendar-december__page-2-bg {
      background-image: url(../../assets/img/calendar/pc/12/page2.png); }
    .calendar-december__page-3-bg {
      background-image: url(../../assets/img/calendar/pc/12/page3.png); }
    .calendar-december__page-4-bg {
      background-image: url(../../assets/img/calendar/pc/12/page4.png); }
  .calendar-common-pcBg {
    position: relative;
    width: 94vw;
    height: calc(1038 / 2231 * 94vw);
    max-width: calc(2231px / 2);
    max-height: calc(1038px / 2);
    min-width: 843px;
    min-height: calc(1038 / 2231 * 843px); }
    .calendar-common-events {
      position: absolute;
      right: 0;
      top: 18%;
      width: 49%;
      margin-right: 1%; }
    .calendar-common-btn-action {
      position: absolute;
      right: 10%;
      bottom: 10%;
      width: 28%;
      margin: 0;
      transition: all 0.5s ease; }
      .calendar-common-btn-action:hover {
        background-color: #FCEFA4;
        color: #333; }
    .calendar-common-pageText {
      top: 46%;
      left: 6%;
      font-size: 1.2vw;
      width: 40%;
      line-height: 1.31; }
      .calendar-common-pageText--wide {
        position: absolute;
        top: 46%;
        left: 6%;
        font-size: 1.2vw;
        width: 40%;
        line-height: 1.6; }
        .calendar-common-pageText--wide.month_5_1 {
          top: 53%; }
    .calendar-common-prevBtn {
      width: calc(178px / 2);
      height: 38px;
      bottom: 4%;
      left: 6%;
      cursor: pointer;
      transition: all 0.5s ease; }
    .calendar-common-nextBtn {
      width: calc(178px / 2);
      height: 38px;
      bottom: 4%;
      right: 6%;
      cursor: pointer;
      transition: all 0.5s ease; }
  .sp-only {
    display: none; }
    #page_shop .ec-layoutRole h1 {
      height: 33px;
      margin-left: 0;
      margin-bottom: 0; }
    #page_shop .ec-layoutRole .ec-layoutRole__header {
      background: rgba(255, 255, 255, 0); }
    #page_shop .ec-layoutRole .ec-layoutRole__header.ec-header__scrollColor {
      background: rgba(255, 255, 255, 0.7); }
    .page_shop_container {
      width: 960px;
      margin: 50px auto 0;
      position: relative; }
    .page_shop_map {
      margin-top: -52px;
      width: 100%; }
      .page_shop_map ._map {
        margin-left: 46px; }
      .page_shop_map .toTimeChange {
        bottom: 0;
        right: 0;
        transform: none;
        padding: 17px 30px; }
        .page_shop_map .toTimeChange ._name {
          height: 16px;
          width: 206px; }
        .page_shop_map .toTimeChange ._ic {
          margin-left: 7px;
          height: 22px;
          width: 22px; }
      .page_shop_map ._shop {
        position: absolute;
        width: 296px;
        height: auto;
        right: 0;
        top: 0;
        background: #fff;
        z-index: 109;
        box-shadow: 0 20px 70px 4px rgba(0, 0, 0, 0.02);
        overflow: visible; }
        .page_shop_map ._shop ._inner {
          margin: 0; }
        .page_shop_map ._shop.active {
          padding-bottom: 0; }
      .page_shop_map ._shop ._closebtn {
        display: none; }
      .page_shop_map ._markers {
        left: 292px;
        top: 82px; }
      .page_shop_map ._marker.shoplive,
      .page_shop_map ._markerlive.shoplive {
        left: 306px;
        top: 94px; }
      #page_shop .shoplive-popup ._inner {
        top: 110px;
        height: 720px;
        width: 721px;
        padding: 21px 30px 41px; }
        #page_shop .shoplive-popup ._inner h2 {
          width: 95.6%; }
          #page_shop .shoplive-popup ._inner h2 img.shoplive-popup__title {
            height: 33px;
            width: 267px; }
      #page_shop .shoplive-popup .shoplive-popup__close.x-btn {
        display: block; }
      #page_shop .shoplive-popup #id_img_jpeg {
        height: auto;
        width: 95.6%;
        margin-top: 17px;
        margin-bottom: 32px; }
      #page_shop .shoplive-popup__text {
        font-size: 13px;
        margin-bottom: 28px; }
    .page_shop_shops {
      padding: 25px 0; }
      .page_shop_shops h2 {
        width: auto;
        padding: 0 0 25px;
        margin: 0 29px 25px; }
  .page_shop_menu {
    position: absolute;
    width: 205px;
    left: 0;
    margin-top: 0;
    transform: translate(0, -100%);
    padding-bottom: 10px; }
    .page_shop_menu ._group_sp {
      float: none;
      width: 100%; }
    .shop_page ._col2 {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 10px 49px 20px; }
      .shop_page ._col2 ._group_pc {
        width: calc(50% - 30px); }
      .shop_page ._col2 ._item {
        font-size: 13px; }
        .shop_page ._col2 ._item:last-child {
          border-bottom: none; }
      .shop_page ._col2 h3 {
        font-size: 13px; }
      .page_shop_openhours ._intro ._text {
        width: auto; }
    #page_shop .ec-blockBtn--cancel {
      height: 70px;
      width: 350px; }
  .sp-only {
    display: none; }
    .hato_collection_page h1 {
      margin-bottom: 40px; }
      .goods_header ._inner {
        display: flex;
        justify-content: space-between;
        width: 980px;
        margin: 0 auto; }
      .goods_header .goods_title {
        padding: 180px 0 0; }
      .goods_header .goods_hero {
        position: relative;
        width: 686px;
        height: 494px;
        margin-right: -35px;
        margin-bottom: 90px; }
        .goods_header .goods_hero ._mask {
          width: 100%; }
      .goods_contents ._inner {
        width: 980px;
        margin: 0 auto;
        padding: 95px 10px; }
      .goods_contents ul {
        padding: 0 10px; }
        .goods_contents ul li {
          justify-content: flex-start;
          align-items: stretch;
          height: 200px;
          width: 200px; }
          .goods_contents ul li.__pc {
            display: block; }
        .goods_contents ul li:nth-child(8n+1) a, .goods_contents ul li:nth-child(8n+2) a, .goods_contents ul li:nth-child(8n+3) a, .goods_contents ul li:nth-child(8n+4) a {
          left: 40px; }
        .goods_contents ul li:nth-child(8n+5) a, .goods_contents ul li:nth-child(8n+6) a, .goods_contents ul li:nth-child(8n+7) a, .goods_contents ul li:nth-child(8n) a {
          right: 12px; }
        .goods_contents ul li:nth-child(8n+1) a, .goods_contents ul li:nth-child(8n+3) a, .goods_contents ul li:nth-child(8n+6) a, .goods_contents ul li:nth-child(8n) a {
          top: auto;
          bottom: 35px; }
        .goods_contents ul li:nth-child(8n+2) a, .goods_contents ul li:nth-child(8n+4) a, .goods_contents ul li:nth-child(8n+5) a, .goods_contents ul li:nth-child(8n+7) a {
          top: 35px;
          bottom: auto; }
        .goods_contents ul li:nth-child(9) a, .goods_contents ul li:nth-child(11) a {
          top: auto;
          bottom: -80px; }
        .goods_contents ul li:nth-child(10) a, .goods_contents ul li:nth-child(12) a {
          top: -10px;
          bottom: auto; }
        .goods_contents ul li:nth-child(16n+13) a, .goods_contents ul li:nth-child(16n+15) a {
          top: 10px;
          bottom: auto; }
        .goods_contents ul li:nth-child(16n+14) a, .goods_contents ul li:nth-child(16n) a {
          top: auto;
          bottom: 10px; }
        .goods_contents ul li:nth-child(6) a {
          bottom: 25px;
          right: -10px; }
        .goods_contents ul li:nth-child(8) a {
          bottom: 10px;
          right: -5px; }
        .goods_contents ul li:nth-child(11) a {
          bottom: -27px;
          left: 50px; }
        .goods_contents ul li:nth-child(13) a {
          right: -10px;
          top: -10px; }
        .goods_contents ul li:nth-child(14) a {
          right: 10px;
          bottom: 20px; }
        .goods_contents ul li:nth-child(21) a {
          top: -10px;
          right: 9px; }
        .goods_contents ul li:nth-child(22) a {
          right: 5px;
          top: 90px; }
        .goods_contents ul li:nth-child(23) a {
          top: 126px; }
        .goods_contents ul li:nth-child(24) a {
          top: 48px;
          right: 7px; }
        .goods_contents ul li:nth-child(25) a {
          left: -18 px;
          bottom: 4px; }
        .goods_contents ul li:nth-child(27) a {
          top: 54px;
          left: 44px; }
    .hato_collection_page .modaal-container {
      width: 90vw; }
    .hato_collection_page .modaal-content-container {
      padding: 50px; }
    .hato_collection_page .modaal-close {
      right: 14px;
      top: 7px; }
      .hato_collection_page .modaal-close:before, .hato_collection_page .modaal-close:after {
        background: #000; }
      .hato_collection_page .modaal-close:hover:before, .hato_collection_page .modaal-close:hover:after {
        background: #000; }
  .hato_collection_page .modaal-flex {
    display: flex;
    align-items: flex-start; }
  .hato_collection_page .modaal-flex ._slide {
    width: 450px; }
  .hato_collection_page .modaal-flex ._info {
    width: 380px;
    margin-left: 40px; }
    .hato_collection_page .modaal-flex h3 {
      margin-top: 20px;
      font-size: 20px; }
    .hato_collection_page .modaal-flex ._text {
      margin-top: 18px;
      font-size: 13px; }
    .hato_collection_page .modaal-flex ._price {
      margin-top: 44px;
      font-size: 17px; }
    .hato_collection_page .modaal-flex ._note {
      margin-top: 18px;
      padding: 20px;
      font-size: 13px; }
    .hato_collection_page .slick-prev, .hato_collection_page .slick-next {
      bottom: -55px; }
    .hato_collection_page .slick-dots {
      bottom: -50px; }
      .hato_collection_page .slick-dots li {
        margin: 0 6px;
        width: 20px; }
    .hato_collection_page .toOtherPages {
      padding-top: 0;
      padding-bottom: 75px; }
  .hato_calendar_page .ec-layoutRole__header {
    background: #FDE260; }
  .hato_calendar_page .ec-header__scrollColor {
    background: rgba(255, 255, 255, 0.7); } }
@media only screen and (min-width: 768px) and (max-width: 1280px) {
      .ec-topicRole__sunflower1 {
        top: 121.5px;
        width: 1280px;
        height: 816.5px; }
      .ec-topicRole__sunflower2 {
        top: 135px;
        width: 1280px;
        height: 495.5px; }
      .ec-topicRole__sunflower3 {
        top: 114px;
        width: 1280px;
        height: 537.5px; } }
@media only screen and (min-width: 768px) and (min-width: 768px) {
    .ec-off1Grid {
      display: flex; }
    .ec-off2Grid .ec-off2Grid__cell {
      width: 66.66667%; }
    .ec-off3Grid .ec-off3Grid__cell {
      width: 50%; }
    .ec-off4Grid .ec-off4Grid__cell {
      width: 33.33333%; }
    .ec-searchnavRole {
      padding: 0; } }
@media only screen and (min-width: 995px) {
    .ec-footerHato {
      top: -42px;
      right: 10%;
      transform: translateX(50%); }
      .ec-footerHato img {
        display: block;
        height: auto;
        width: 100px; }
    .ec-footerHatoSerif {
      bottom: 120px;
      left: auto;
      right: 59px;
      -webkit-animation: 0.4s serif-animation;
              animation: 0.4s serif-animation; }
      .ec-footerHatoSerif:before {
        bottom: 0px;
        right: 110px;
        transform: rotate(263deg); }
    .ec-footerHatoThink {
      bottom: 98px;
      right: 8%; }
  .ec-footerNavi:first-of-type {
    margin-right: 120px; } }
@media only screen and (min-width: 1105px) {
      .ec-footerTopNavi li {
        padding: 0 22px; }
            .ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li {
              /* 1105px */
              padding: 0 12px; }
    .ec-footerHato {
      top: -31px;
      right: 10%;
      transform: translateX(50%); }
      .ec-footerHato img {
        display: block;
        height: auto;
        width: 100px; }
    .ec-footerHatoSerif {
      bottom: 110px;
      left: auto;
      right: 59px;
      -webkit-animation: 0.4s serif-animation;
              animation: 0.4s serif-animation; }
      .ec-footerHatoSerif:before {
        bottom: 0px;
        right: 50px;
        transform: rotate(93deg); }
    .ec-footerHatoThink {
      bottom: 80px;
      right: 9%; }
      .ec-cartRole .ec-cartRole__cart {
        width: 620px; }
    .calendar-common-pageText {
      font-size: 13px;
      line-height: 1.31;
      letter-spacing: 1px; }
      .calendar-common-pageText--wide {
        font-size: 13px;
        line-height: 2.1;
        letter-spacing: 1px; } }
@media only screen and (min-width: 1200px) {
      .ec-footerTopNavi li {
        padding: 0 25px; }
            .ec-footerTopNavi li.__shop .ec-footerTopNavi__linkShop li {
              /* 1200px */
              padding: 0 18px; }
      .ec-footerHato img {
        display: block;
        height: 117px;
        width: 154px; } }
@media only screen and (min-width: 1281px) {
      .ec-topicRole__sunflower1 {
        top: 9.49219vw;
        width: 100vw;
        height: 63.78906vw; }
      .ec-topicRole__sunflower2 {
        top: 10.54688vw;
        width: 100vw;
        height: 38.71094vw; }
      .ec-topicRole__sunflower3 {
        top: 8.90625vw;
        width: 100vw;
        height: 41.99219vw; } }
@media only screen and (min-width: 1400px) {
  .modaal-video-container {
    padding-bottom: 0;
    height: 731px; } }
@media screen and (max-width: 1300px) {
        .ec-shop__map .__pc .ec-shop__mapImage img {
          height: 500px; }
        .ec-shop__map .__pc .ec-shop__mapDetail {
          right: 5%; } }
@media only screen and (max-width: 1140px) {
  .modaal-image .modaal-inner-wrapper {
    padding-left: 25px;
    padding-right: 25px; }
  .modaal-gallery-control {
    top: auto;
    bottom: 20px;
    transform: none;
    background: rgba(0, 0, 0, 0.7); }
    .modaal-gallery-control:before, .modaal-gallery-control:after {
      background: #fff; }
  .modaal-gallery-next {
    left: auto;
    right: 20px; }
  .modaal-gallery-prev {
    left: 20px;
    right: auto; } }
@media screen and (max-height: 1100px) {
  .modaal-instagram iframe {
    width: 700px !important; } }
@media screen and (max-height: 1000px) {
  .modaal-inner-wrapper {
    padding-top: 60px;
    padding-bottom: 60px; }
  .modaal-instagram iframe {
    width: 600px !important; } }
@media screen and (max-height: 900px) {
  .modaal-instagram iframe {
    width: 500px !important; }
  .modaal-video-container {
    max-width: 900px;
    max-height: 510px; } }
@media screen and (max-width: 900px) {
  .modaal-instagram iframe {
    width: 500px !important; }
        .ec-shop__map .__pc .ec-shop__mapImage img {
          height: 400px; } }
@media only screen and (max-height: 820px) {
  .modaal-gallery-label {
    display: none; } }
@media only screen and (max-width: 767px) {
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
      .ec-topicRole__sunflower1 {
        top: 40.13333vw;
        width: 100vw;
        height: 212vw;
        background-image: url("../img/top/sunflower1_sp.png"); }
      .ec-topicRole__sunflower2 {
        top: 36.66667vw;
        width: 100vw;
        height: 124.13333vw;
        background-image: url("../img/top/sunflower2_sp.png"); }
      .ec-topicRole__sunflower3 {
        top: 33.73333vw;
        width: 100vw;
        height: 130.4vw;
        background-image: url("../img/top/sunflower3_sp.png"); }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
  .pc-only {
    display: none; }
        .ec-topRole__hatoSable__calendar__img__month {
          width: 28vw;
          height: calc(185 / 136 * 28vw); }
    .calendar-common-pageText {
      left: 50%;
      transform: translateX(-50%);
      width: 82%;
      top: 57vw;
      font-size: 3.8vw;
      line-height: 1.8; }
      .calendar-common-pageText.month_5_1 {
        top: 70vw; }
    .calendar-common-nextBtn {
      width: calc(65px / 2);
      top: 255px;
      right: -13px;
      z-index: 10; }
  .pc-only {
    display: none; }
      .page_shop_map ._marker.shop1,
      .page_shop_map ._markerlive.shop1 {
        left: 272px !important;
        top: 93px !important; }
      .page_shop_map ._marker.shop2,
      .page_shop_map ._markerlive.shop2 {
        left: 172px !important;
        top: 161px !important; }
      .page_shop_map ._marker.shop3,
      .page_shop_map ._markerlive.shop3 {
        left: 278px !important;
        top: 147px !important; }
      .page_shop_map ._marker.shop4,
      .page_shop_map ._markerlive.shop4 {
        left: 238px !important;
        top: 107px !important; }
      .page_shop_map ._marker.shop5,
      .page_shop_map ._markerlive.shop5 {
        left: 51px !important;
        top: 312px !important; }
      .page_shop_map ._marker.shop6,
      .page_shop_map ._markerlive.shop6 {
        left: 218px !important;
        top: 363px !important; }
      .page_shop_map ._marker.shop7,
      .page_shop_map ._markerlive.shop7 {
        left: 106px !important;
        top: 149px !important; }
      .page_shop_map ._marker.shop8,
      .page_shop_map ._markerlive.shop8 {
        left: 25px !important;
        top: 240px !important; }
      .page_shop_map ._marker.shop9,
      .page_shop_map ._markerlive.shop9 {
        left: 185px !important;
        top: 224px !important; }
      .page_shop_map ._marker.shop10,
      .page_shop_map ._markerlive.shop10 {
        left: 252px !important;
        top: -10px !important; }
      .page_shop_map ._marker.shoplive,
      .page_shop_map ._markerlive.shoplive {
        left: 310px !important;
        top: 126px !important; }
  .pc-only {
    display: none; } }
@media only screen and (max-width: 600px) {
  .modaal-instagram iframe {
    width: 280px !important; } }
@media only screen and (max-width: 374px) {
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
      width: 280px; }
    .ec-orderOrder__wrapper textarea {
      width: 248px; }
    .ec-halfInput input[type='text'] {
      width: 133px; }
    .ec-input textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea, .ec-select textarea, .ec-birth textarea, #page_guide_shipping_tel .ec-select textarea {
      width: 280px; }
    .ec-orderOrder__wrapper textarea {
      width: 248px; }
    .ec-halfInput input[type='text'] {
      width: 133px; }
    .ec-line {
      width: 280px; }
    .ec-login__wrapper {
      width: 280px; }
    .ec-headerRole__cart {
      margin-right: 3px; }
      .ec-headerNaviRole .ec-headerNaviRole__nav {
        margin-right: 3px; }
      .ec-headerNaviRole .ec-headerNaviRole__cart {
        margin-right: 3px; }
      .ec-headerNaviRole .ec-headerNaviRole__onlineStore {
        margin-right: 3px; }
        .ec-headerNaviRole .ec-headerNaviRole__onlineStore a {
          width: 85px; }
      .ec-footerHatoSerif p {
        font-size: 10px;
        padding: 0 15%; }
      .ec-orderOrder .ec-definitions, .ec-orderOrder .ec-definitions--soft {
        width: 280px; }
        .ec-orderOrder .ec-definitions dd, .ec-orderOrder .ec-definitions--soft dd {
          padding-left: 5px; }
    #page_shopping .ec-definitions, #page_shopping .ec-definitions--soft,
    #page_shopping_confirm .ec-definitions,
    #page_shopping_confirm .ec-definitions--soft,
    #page_shopping_redirect_to .ec-definitions,
    #page_shopping_redirect_to .ec-definitions--soft {
      width: 280px; }
      #page_shopping .ec-definitions dd, #page_shopping .ec-definitions--soft dd,
      #page_shopping_confirm .ec-definitions dd,
      #page_shopping_confirm .ec-definitions--soft dd,
      #page_shopping_redirect_to .ec-definitions dd,
      #page_shopping_redirect_to .ec-definitions--soft dd {
        padding-left: 5px; }
      #page_guide_shipping_tel .ec-shipping__table td {
        padding: 16px 7px; }
      #page_help_about .ec-borderedDefs dd {
        padding-left: 0; } }
@media print {
  .__print {
    display: block; }
  .print-area {
    margin: 0 auto;
    width: 80%; }
    .print-area h2 {
      font-size: 18px; }
    .print-area .print-area__logo {
      margin-bottom: 10px; }
      .print-area .print-area__logo img {
        display: block;
        height: 39px;
        width: 144px; }
    .print-area .print-area__content {
      margin-bottom: 20px; }
    .print-area .ec-borderedDefs,
    .print-area table.print-table {
      margin-top: 0; }
    .print-area .ec-borderedDefs dl {
      padding: 10px 0; }
    .print-area table.print-table tr td {
      padding-top: 10px;
      padding-bottom: 10px; } }
/*# sourceMappingURL=style.css.map */