@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;
}
/*!
 * Bootstrap  v5.3.2 (https://getbootstrap.com/)
 * Copyright 2011-2023 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,
[data-bs-theme=light] {
  --bs-blue: #337ab7;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #337ab7;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 51, 122, 183;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #143149;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #d6e4f1;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #adcae2;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: "Zen Kaku Gothic New", sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 0.875rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.42857142;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #337ab7;
  --bs-link-color-rgb: 51, 122, 183;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #296292;
  --bs-link-hover-color-rgb: 41, 98, 146;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(51, 122, 183, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}
[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #85afd4;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #0a1825;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #1f496e;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #85afd4;
  --bs-link-hover-color: #9dbfdd;
  --bs-link-color-rgb: 133, 175, 212;
  --bs-link-hover-color-rgb: 157, 191, 221;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}
h1, .h1 {
  font-size: calc(1.34375rem + 1.125vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.1875rem;
  }
}
h2, .h2 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 1.75rem;
  }
}
h3, .h3 {
  font-size: calc(1.278125rem + 0.3375vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.53125rem;
  }
}
h4, .h4 {
  font-size: calc(1.25625rem + 0.075vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.3125rem;
  }
}
h5, .h5 {
  font-size: 1.09375rem;
}
h6, .h6 {
  font-size: 0.875rem;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}
address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}
ol,
ul {
  padding-left: 2rem;
}
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}
dt {
  font-weight: 700;
}
dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: bolder;
}
small, .small {
  font-size: 0.875em;
}
mark, .mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}
a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
pre,
code,
kbd,
samp {
  font-family: var(--bs-font-monospace);
  font-size: 1em;
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  font-size: 0.875em;
}
pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
code {
  font-size: 0.875em;
  color: var(--bs-code-color);
  word-wrap: break-word;
}
a > code {
  color: inherit;
}
kbd {
  padding: 0.1875rem 0.375rem;
  font-size: 0.875em;
  color: var(--bs-body-bg);
  background-color: var(--bs-body-color);
  border-radius: 0.25rem;
}
kbd kbd {
  padding: 0;
  font-size: 1em;
}
figure {
  margin: 0 0 1rem;
}
img,
svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
button:focus:not(:focus-visible) {
  outline: 0;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
select {
  text-transform: none;
}
[role=button] {
  cursor: pointer;
}
select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}
[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}
::-moz-focus-inner {
  padding: 0;
  border-style: none;
}
textarea {
  resize: vertical;
}
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
}
@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}
legend + * {
  clear: left;
}
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}
::-webkit-inner-spin-button {
  height: auto;
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
/* rtl:raw:
[type="tel"],
[type="url"],
[type="email"],
[type="number"] {
  direction: ltr;
}
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-color-swatch-wrapper {
  padding: 0;
}
::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}
output {
  display: inline-block;
}
iframe {
  border: 0;
}
summary {
  display: list-item;
  cursor: pointer;
}
progress {
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}
.lead {
  font-size: 1.09375rem;
  font-weight: 300;
}
.display-1 {
  font-size: calc(1.625rem + 4.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-1 {
    font-size: 5rem;
  }
}
.display-2 {
  font-size: calc(1.575rem + 3.9vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-2 {
    font-size: 4.5rem;
  }
}
.display-3 {
  font-size: calc(1.525rem + 3.3vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-3 {
    font-size: 4rem;
  }
}
.display-4 {
  font-size: calc(1.475rem + 2.7vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-4 {
    font-size: 3.5rem;
  }
}
.display-5 {
  font-size: calc(1.425rem + 2.1vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-5 {
    font-size: 3rem;
  }
}
.display-6 {
  font-size: calc(1.375rem + 1.5vw);
  font-weight: 300;
  line-height: 1.2;
}
@media (min-width: 1200px) {
  .display-6 {
    font-size: 2.5rem;
  }
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.list-inline {
  padding-left: 0;
  list-style: none;
}
.list-inline-item {
  display: inline-block;
}
.list-inline-item:not(:last-child) {
  margin-right: 0.5rem;
}
.initialism {
  font-size: 0.875em;
  text-transform: uppercase;
}
.blockquote {
  margin-bottom: 1rem;
  font-size: 1.09375rem;
}
.blockquote > :last-child {
  margin-bottom: 0;
}
.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}
.blockquote-footer::before {
  content: "— ";
}
.img-fluid {
  max-width: 100%;
  height: auto;
}
.img-thumbnail {
  padding: 0.25rem;
  background-color: var(--bs-body-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  max-width: 100%;
  height: auto;
}
.figure {
  display: inline-block;
}
.figure-img {
  margin-bottom: 0.5rem;
  line-height: 1;
}
.figure-caption {
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}
.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.col {
  flex: 1 0 0%;
}
.row-cols-auto > * {
  flex: 0 0 auto;
  width: auto;
}
.row-cols-1 > * {
  flex: 0 0 auto;
  width: 100%;
}
.row-cols-2 > * {
  flex: 0 0 auto;
  width: 50%;
}
.row-cols-3 > * {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.row-cols-4 > * {
  flex: 0 0 auto;
  width: 25%;
}
.row-cols-5 > * {
  flex: 0 0 auto;
  width: 20%;
}
.row-cols-6 > * {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-auto {
  flex: 0 0 auto;
  width: auto;
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}
.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}
.col-3 {
  flex: 0 0 auto;
  width: 25%;
}
.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}
.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}
.col-6 {
  flex: 0 0 auto;
  width: 50%;
}
.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}
.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}
.col-9 {
  flex: 0 0 auto;
  width: 75%;
}
.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}
.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}
.col-12 {
  flex: 0 0 auto;
  width: 100%;
}
.offset-1 {
  margin-left: 8.33333333%;
}
.offset-2 {
  margin-left: 16.66666667%;
}
.offset-3 {
  margin-left: 25%;
}
.offset-4 {
  margin-left: 33.33333333%;
}
.offset-5 {
  margin-left: 41.66666667%;
}
.offset-6 {
  margin-left: 50%;
}
.offset-7 {
  margin-left: 58.33333333%;
}
.offset-8 {
  margin-left: 66.66666667%;
}
.offset-9 {
  margin-left: 75%;
}
.offset-10 {
  margin-left: 83.33333333%;
}
.offset-11 {
  margin-left: 91.66666667%;
}
.g-0,
.gx-0 {
  --bs-gutter-x: 0;
}
.g-0,
.gy-0 {
  --bs-gutter-y: 0;
}
.g-1,
.gx-1 {
  --bs-gutter-x: 0.25rem;
}
.g-1,
.gy-1 {
  --bs-gutter-y: 0.25rem;
}
.g-2,
.gx-2 {
  --bs-gutter-x: 0.5rem;
}
.g-2,
.gy-2 {
  --bs-gutter-y: 0.5rem;
}
.g-3,
.gx-3 {
  --bs-gutter-x: 1rem;
}
.g-3,
.gy-3 {
  --bs-gutter-y: 1rem;
}
.g-4,
.gx-4 {
  --bs-gutter-x: 1.5rem;
}
.g-4,
.gy-4 {
  --bs-gutter-y: 1.5rem;
}
.g-5,
.gx-5 {
  --bs-gutter-x: 3rem;
}
.g-5,
.gy-5 {
  --bs-gutter-y: 3rem;
}
@media (min-width: 576px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex: 1 0 0%;
  }
  .row-cols-xl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xl-0 {
    margin-left: 0;
  }
  .offset-xl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xl-3 {
    margin-left: 25%;
  }
  .offset-xl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xl-6 {
    margin-left: 50%;
  }
  .offset-xl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xl-9 {
    margin-left: 75%;
  }
  .offset-xl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xl-11 {
    margin-left: 91.66666667%;
  }
  .g-xl-0,
  .gx-xl-0 {
    --bs-gutter-x: 0;
  }
  .g-xl-0,
  .gy-xl-0 {
    --bs-gutter-y: 0;
  }
  .g-xl-1,
  .gx-xl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xl-1,
  .gy-xl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xl-2,
  .gx-xl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xl-2,
  .gy-xl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xl-3,
  .gx-xl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xl-3,
  .gy-xl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xl-4,
  .gx-xl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xl-4,
  .gy-xl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xl-5,
  .gx-xl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xl-5,
  .gy-xl-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1400px) {
  .col-xxl {
    flex: 1 0 0%;
  }
  .row-cols-xxl-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-xxl-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-xxl-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-xxl-3 > * {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .row-cols-xxl-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-xxl-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-xxl-6 > * {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-xxl-0 {
    margin-left: 0;
  }
  .offset-xxl-1 {
    margin-left: 8.33333333%;
  }
  .offset-xxl-2 {
    margin-left: 16.66666667%;
  }
  .offset-xxl-3 {
    margin-left: 25%;
  }
  .offset-xxl-4 {
    margin-left: 33.33333333%;
  }
  .offset-xxl-5 {
    margin-left: 41.66666667%;
  }
  .offset-xxl-6 {
    margin-left: 50%;
  }
  .offset-xxl-7 {
    margin-left: 58.33333333%;
  }
  .offset-xxl-8 {
    margin-left: 66.66666667%;
  }
  .offset-xxl-9 {
    margin-left: 75%;
  }
  .offset-xxl-10 {
    margin-left: 83.33333333%;
  }
  .offset-xxl-11 {
    margin-left: 91.66666667%;
  }
  .g-xxl-0,
  .gx-xxl-0 {
    --bs-gutter-x: 0;
  }
  .g-xxl-0,
  .gy-xxl-0 {
    --bs-gutter-y: 0;
  }
  .g-xxl-1,
  .gx-xxl-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-xxl-1,
  .gy-xxl-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-xxl-2,
  .gx-xxl-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-xxl-2,
  .gy-xxl-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-xxl-3,
  .gx-xxl-3 {
    --bs-gutter-x: 1rem;
  }
  .g-xxl-3,
  .gy-xxl-3 {
    --bs-gutter-y: 1rem;
  }
  .g-xxl-4,
  .gx-xxl-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-xxl-4,
  .gy-xxl-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-xxl-5,
  .gx-xxl-5 {
    --bs-gutter-x: 3rem;
  }
  .g-xxl-5,
  .gy-xxl-5 {
    --bs-gutter-y: 3rem;
  }
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table-group-divider {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}
.caption-top {
  caption-side: top;
}
.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}
.table-bordered > :not(caption) > * {
  border-width: var(--bs-border-width) 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width);
}
.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}
.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}
.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #d6e4f1;
  --bs-table-border-color: #abb6c1;
  --bs-table-striped-bg: #cbd9e5;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #c1cdd9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c6d3df;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #e2e3e5;
  --bs-table-border-color: #b5b6b7;
  --bs-table-striped-bg: #d7d8da;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1d2d4;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-success {
  --bs-table-color: #000;
  --bs-table-bg: #d1e7dd;
  --bs-table-border-color: #a7b9b1;
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-info {
  --bs-table-color: #000;
  --bs-table-bg: #cff4fc;
  --bs-table-border-color: #a6c3ca;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #fff3cd;
  --bs-table-border-color: #ccc2a4;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: #f8d7da;
  --bs-table-border-color: #c6acae;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f8f9fa;
  --bs-table-border-color: #c6c7c8;
  --bs-table-striped-bg: #ecedee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #4d5154;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
.form-label {
  margin-bottom: 0.5rem;
}
.col-form-label {
  padding-top: calc(0.375rem + var(--bs-border-width));
  padding-bottom: calc(0.375rem + var(--bs-border-width));
  margin-bottom: 0;
  font-size: inherit;
  line-height: 1.42857142;
}
.col-form-label-lg {
  padding-top: calc(0.5rem + var(--bs-border-width));
  padding-bottom: calc(0.5rem + var(--bs-border-width));
  font-size: 1.09375rem;
}
.col-form-label-sm {
  padding-top: calc(0.25rem + var(--bs-border-width));
  padding-bottom: calc(0.25rem + var(--bs-border-width));
  font-size: 0.765625rem;
}
.form-text {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-body-bg);
  background-clip: padding-box;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}
.form-control[type=file] {
  overflow: hidden;
}
.form-control[type=file]:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control:focus {
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border-color: #99bddb;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}
.form-control::-webkit-date-and-time-value {
  min-width: 85px;
  height: 1.42857142em;
  margin: 0;
}
.form-control::-webkit-datetime-edit {
  display: block;
  padding: 0;
}
.form-control::-moz-placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control::placeholder {
  color: var(--bs-secondary-color);
  opacity: 1;
}
.form-control:disabled {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
}
.form-control::file-selector-button {
  padding: 0.375rem 0.75rem;
  margin: -0.375rem -0.75rem;
  margin-inline-end: 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-tertiary-bg);
  pointer-events: none;
  border-color: inherit;
  border-style: solid;
  border-width: 0;
  border-inline-end-width: var(--bs-border-width);
  border-radius: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-control::file-selector-button {
    transition: none;
  }
}
.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--bs-secondary-bg);
}
.form-control-plaintext {
  display: block;
  width: 100%;
  padding: 0.375rem 0;
  margin-bottom: 0;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: transparent;
  border: solid transparent;
  border-width: var(--bs-border-width) 0;
}
.form-control-plaintext:focus {
  outline: 0;
}
.form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
  padding-right: 0;
  padding-left: 0;
}
.form-control-sm {
  min-height: calc(1.42857142em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
  font-size: 0.765625rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-control-sm::file-selector-button {
  padding: 0.25rem 0.5rem;
  margin: -0.25rem -0.5rem;
  margin-inline-end: 0.5rem;
}
.form-control-lg {
  min-height: calc(1.42857142em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
  font-size: 1.09375rem;
  border-radius: var(--bs-border-radius-lg);
}
.form-control-lg::file-selector-button {
  padding: 0.5rem 1rem;
  margin: -0.5rem -1rem;
  margin-inline-end: 1rem;
}
textarea.form-control {
  min-height: calc(1.42857142em + 0.75rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-sm {
  min-height: calc(1.42857142em + 0.5rem + calc(var(--bs-border-width) * 2));
}
textarea.form-control-lg {
  min-height: calc(1.42857142em + 1rem + calc(var(--bs-border-width) * 2));
}
.form-control-color {
  width: 3rem;
  height: calc(1.42857142em + 0.75rem + calc(var(--bs-border-width) * 2));
  padding: 0.375rem;
}
.form-control-color:not(:disabled):not([readonly]) {
  cursor: pointer;
}
.form-control-color::-moz-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color::-webkit-color-swatch {
  border: 0 !important;
  border-radius: var(--bs-border-radius);
}
.form-control-color.form-control-sm {
  height: calc(1.42857142em + 0.5rem + calc(var(--bs-border-width) * 2));
}
.form-control-color.form-control-lg {
  height: calc(1.42857142em + 1rem + calc(var(--bs-border-width) * 2));
}
.form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  display: block;
  width: 100%;
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-body-bg);
  background-image: var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-select {
    transition: none;
  }
}
.form-select:focus {
  border-color: #99bddb;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}
.form-select[multiple], .form-select[size]:not([size="1"]) {
  padding-right: 0.75rem;
  background-image: none;
}
.form-select:disabled {
  background-color: var(--bs-secondary-bg);
}
.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 var(--bs-body-color);
}
.form-select-sm {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  font-size: 0.765625rem;
  border-radius: var(--bs-border-radius-sm);
}
.form-select-lg {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  font-size: 1.09375rem;
  border-radius: var(--bs-border-radius-lg);
}
[data-bs-theme=dark] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check {
  display: block;
  min-height: 1.2499999925rem;
  padding-left: 1.5em;
  margin-bottom: 0.125rem;
}
.form-check .form-check-input {
  float: left;
  margin-left: -1.5em;
}
.form-check-reverse {
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}
.form-check-reverse .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}
.form-check-input {
  --bs-form-check-bg: var(--bs-body-bg);
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin-top: 0.21428571em;
  vertical-align: top;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: var(--bs-form-check-bg);
  background-image: var(--bs-form-check-bg-image);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  border: var(--bs-border-width) solid var(--bs-border-color);
  print-color-adjust: exact;
}
.form-check-input[type=checkbox] {
  border-radius: 0.25em;
}
.form-check-input[type=radio] {
  border-radius: 50%;
}
.form-check-input:active {
  filter: brightness(90%);
}
.form-check-input:focus {
  border-color: #99bddb;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}
.form-check-input:checked {
  background-color: #337ab7;
  border-color: #337ab7;
}
.form-check-input:checked[type=checkbox] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type=radio] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #337ab7;
  border-color: #337ab7;
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}
.form-check-input:disabled {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.form-check-input[disabled] ~ .form-check-label, .form-check-input:disabled ~ .form-check-label {
  cursor: default;
  opacity: 0.5;
}
.form-switch {
  padding-left: 2.5em;
}
.form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  width: 2em;
  margin-left: -2.5em;
  background-image: var(--bs-form-switch-bg);
  background-position: left center;
  border-radius: 2em;
  transition: background-position 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-switch .form-check-input {
    transition: none;
  }
}
.form-switch .form-check-input:focus {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2399bddb'/%3e%3c/svg%3e");
}
.form-switch .form-check-input:checked {
  background-position: right center;
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.form-switch.form-check-reverse {
  padding-right: 2.5em;
  padding-left: 0;
}
.form-switch.form-check-reverse .form-check-input {
  margin-right: -2.5em;
  margin-left: 0;
}
.form-check-inline {
  display: inline-block;
  margin-right: 1rem;
}
.btn-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
.btn-check[disabled] + .btn, .btn-check:disabled + .btn {
  pointer-events: none;
  filter: none;
  opacity: 0.65;
}
[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.25%29'/%3e%3c/svg%3e");
}
.form-range {
  width: 100%;
  height: 1.5rem;
  padding: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
}
.form-range:focus {
  outline: 0;
}
.form-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}
.form-range::-moz-focus-outer {
  border: 0;
}
.form-range::-webkit-slider-thumb {
  width: 1rem;
  height: 1rem;
  margin-top: -0.25rem;
  -webkit-appearance: none;
          appearance: none;
  background-color: #337ab7;
  border: 0;
  border-radius: 1rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-webkit-slider-thumb {
    -webkit-transition: none;
    transition: none;
  }
}
.form-range::-webkit-slider-thumb:active {
  background-color: #c2d7e9;
}
.form-range::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  -moz-appearance: none;
       appearance: none;
  background-color: #337ab7;
  border: 0;
  border-radius: 1rem;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-range::-moz-range-thumb {
    -moz-transition: none;
    transition: none;
  }
}
.form-range::-moz-range-thumb:active {
  background-color: #c2d7e9;
}
.form-range::-moz-range-track {
  width: 100%;
  height: 0.5rem;
  color: transparent;
  cursor: pointer;
  background-color: var(--bs-secondary-bg);
  border-color: transparent;
  border-radius: 1rem;
}
.form-range:disabled {
  pointer-events: none;
}
.form-range:disabled::-webkit-slider-thumb {
  background-color: var(--bs-secondary-color);
}
.form-range:disabled::-moz-range-thumb {
  background-color: var(--bs-secondary-color);
}
.form-floating {
  position: relative;
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext,
.form-floating > .form-select {
  height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  min-height: calc(3.5rem + calc(var(--bs-border-width) * 2));
  line-height: 1.25;
}
.form-floating > label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  padding: 1rem 0.75rem;
  overflow: hidden;
  text-align: start;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  border: var(--bs-border-width) solid transparent;
  transform-origin: 0 0;
  transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .form-floating > label {
    transition: none;
  }
}
.form-floating > .form-control,
.form-floating > .form-control-plaintext {
  padding: 1rem 0.75rem;
}
.form-floating > .form-control::-moz-placeholder, .form-floating > .form-control-plaintext::-moz-placeholder {
  color: transparent;
}
.form-floating > .form-control::placeholder,
.form-floating > .form-control-plaintext::placeholder {
  color: transparent;
}
.form-floating > .form-control:not(:-moz-placeholder-shown), .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown),
.form-floating > .form-control-plaintext:focus,
.form-floating > .form-control-plaintext:not(:placeholder-shown) {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:-webkit-autofill,
.form-floating > .form-control-plaintext:-webkit-autofill {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-select {
  padding-top: 1.625rem;
  padding-bottom: 0.625rem;
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-control-plaintext ~ label,
.form-floating > .form-select ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after {
  position: absolute;
  inset: 1rem 0.375rem;
  z-index: -1;
  height: 1.5em;
  content: "";
  background-color: var(--bs-body-bg);
  border-radius: var(--bs-border-radius);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  color: rgba(var(--bs-body-color-rgb), 0.65);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}
.form-floating > .form-control-plaintext ~ label {
  border-width: var(--bs-border-width) 0;
}
.form-floating > :disabled ~ label,
.form-floating > .form-control:disabled ~ label {
  color: #6c757d;
}
.form-floating > :disabled ~ label::after,
.form-floating > .form-control:disabled ~ label::after {
  background-color: var(--bs-secondary-bg);
}
.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > .form-floating {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > .form-floating:focus-within {
  z-index: 5;
}
.input-group .btn {
  position: relative;
  z-index: 2;
}
.input-group .btn:focus {
  z-index: 5;
}
.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.input-group-lg > .form-control,
.input-group-lg > .form-select,
.input-group-lg > .input-group-text,
.input-group-lg > .btn {
  padding: 0.5rem 1rem;
  font-size: 1.09375rem;
  border-radius: var(--bs-border-radius-lg);
}
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.765625rem;
  border-radius: var(--bs-border-radius-sm);
}
.input-group-lg > .form-select,
.input-group-sm > .form-select {
  padding-right: 3rem;
}
.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
  margin-left: calc(var(--bs-border-width) * -1);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.input-group > .form-floating:not(:first-child) > .form-control,
.input-group > .form-floating:not(:first-child) > .form-select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.valid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-valid-color);
}
.valid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.765625rem;
  color: #fff;
  background-color: var(--bs-success);
  border-radius: var(--bs-border-radius);
}
.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
  display: block;
}
.was-validated .form-control:valid, .form-control.is-valid {
  border-color: var(--bs-form-valid-border-color);
  padding-right: calc(1.42857142em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.357142855em + 0.1875rem) center;
  background-size: calc(0.71428571em + 0.375rem) calc(0.71428571em + 0.375rem);
}
.was-validated .form-control:valid:focus, .form-control.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
  padding-right: calc(1.42857142em + 0.75rem);
  background-position: top calc(0.357142855em + 0.1875rem) right calc(0.357142855em + 0.1875rem);
}
.was-validated .form-select:valid, .form-select.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.71428571em + 0.375rem) calc(0.71428571em + 0.375rem);
}
.was-validated .form-select:valid:focus, .form-select.is-valid:focus {
  border-color: var(--bs-form-valid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated .form-control-color:valid, .form-control-color.is-valid {
  width: calc(3rem + calc(1.42857142em + 0.75rem));
}
.was-validated .form-check-input:valid, .form-check-input.is-valid {
  border-color: var(--bs-form-valid-border-color);
}
.was-validated .form-check-input:valid:checked, .form-check-input.is-valid:checked {
  background-color: var(--bs-form-valid-color);
}
.was-validated .form-check-input:valid:focus, .form-check-input.is-valid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}
.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
  color: var(--bs-form-valid-color);
}
.form-check-inline .form-check-input ~ .valid-feedback {
  margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):valid, .input-group > .form-control:not(:focus).is-valid,
.was-validated .input-group > .form-select:not(:focus):valid,
.input-group > .form-select:not(:focus).is-valid,
.was-validated .input-group > .form-floating:not(:focus-within):valid,
.input-group > .form-floating:not(:focus-within).is-valid {
  z-index: 3;
}
.invalid-feedback {
  display: none;
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-invalid-color);
}
.invalid-tooltip {
  position: absolute;
  top: 100%;
  z-index: 5;
  display: none;
  max-width: 100%;
  padding: 0.25rem 0.5rem;
  margin-top: 0.1rem;
  font-size: 0.765625rem;
  color: #fff;
  background-color: var(--bs-danger);
  border-radius: var(--bs-border-radius);
}
.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
  display: block;
}
.was-validated .form-control:invalid, .form-control.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
  padding-right: calc(1.42857142em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.357142855em + 0.1875rem) center;
  background-size: calc(0.71428571em + 0.375rem) calc(0.71428571em + 0.375rem);
}
.was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
  padding-right: calc(1.42857142em + 0.75rem);
  background-position: top calc(0.357142855em + 0.1875rem) right calc(0.357142855em + 0.1875rem);
}
.was-validated .form-select:invalid, .form-select.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-select:invalid:not([multiple]):not([size]), .was-validated .form-select:invalid:not([multiple])[size="1"], .form-select.is-invalid:not([multiple]):not([size]), .form-select.is-invalid:not([multiple])[size="1"] {
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  padding-right: 4.125rem;
  background-position: right 0.75rem center, center right 2.25rem;
  background-size: 16px 12px, calc(0.71428571em + 0.375rem) calc(0.71428571em + 0.375rem);
}
.was-validated .form-select:invalid:focus, .form-select.is-invalid:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
.was-validated .form-control-color:invalid, .form-control-color.is-invalid {
  width: calc(3rem + calc(1.42857142em + 0.75rem));
}
.was-validated .form-check-input:invalid, .form-check-input.is-invalid {
  border-color: var(--bs-form-invalid-border-color);
}
.was-validated .form-check-input:invalid:checked, .form-check-input.is-invalid:checked {
  background-color: var(--bs-form-invalid-color);
}
.was-validated .form-check-input:invalid:focus, .form-check-input.is-invalid:focus {
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}
.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
  color: var(--bs-form-invalid-color);
}
.form-check-inline .form-check-input ~ .invalid-feedback {
  margin-left: 0.5em;
}
.was-validated .input-group > .form-control:not(:focus):invalid, .input-group > .form-control:not(:focus).is-invalid,
.was-validated .input-group > .form-select:not(:focus):invalid,
.input-group > .form-select:not(:focus).is-invalid,
.was-validated .input-group > .form-floating:not(:focus-within):invalid,
.input-group > .form-floating:not(:focus-within).is-invalid {
  z-index: 4;
}
.btn {
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  --bs-btn-font-family: ;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1.42857142;
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--bs-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--bs-border-radius);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  --bs-btn-disabled-opacity: 0.65;
  --bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}
.btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.btn-check + .btn:hover {
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
}
.btn:focus-visible {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:focus-visible + .btn {
  border-color: var(--bs-btn-hover-border-color);
  outline: 0;
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn-check:checked + .btn, :not(.btn-check) + .btn:active, .btn:first-child:active, .btn.active, .btn.show {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}
.btn-check:checked + .btn:focus-visible, :not(.btn-check) + .btn:active:focus-visible, .btn:first-child:active:focus-visible, .btn.active:focus-visible, .btn.show:focus-visible {
  box-shadow: var(--bs-btn-focus-box-shadow);
}
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--bs-btn-disabled-color);
  pointer-events: none;
  background-color: var(--bs-btn-disabled-bg);
  border-color: var(--bs-btn-disabled-border-color);
  opacity: var(--bs-btn-disabled-opacity);
}
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #337ab7;
  --bs-btn-border-color: #337ab7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #2b689c;
  --bs-btn-hover-border-color: #296292;
  --bs-btn-focus-shadow-rgb: 82, 142, 194;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #296292;
  --bs-btn-active-border-color: #265c89;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #337ab7;
  --bs-btn-disabled-border-color: #337ab7;
}
.btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #5c636a;
  --bs-btn-hover-border-color: #565e64;
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #565e64;
  --bs-btn-active-border-color: #51585e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}
.btn-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
  --bs-btn-focus-shadow-rgb: 60, 153, 110;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #146c43;
  --bs-btn-active-border-color: #13653f;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #198754;
  --bs-btn-disabled-border-color: #198754;
}
.btn-info {
  --bs-btn-color: #000;
  --bs-btn-bg: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #31d2f2;
  --bs-btn-hover-border-color: #25cff2;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
}
.btn-warning {
  --bs-btn-color: #000;
  --bs-btn-bg: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffca2c;
  --bs-btn-hover-border-color: #ffc720;
  --bs-btn-focus-shadow-rgb: 217, 164, 6;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffcd39;
  --bs-btn-active-border-color: #ffc720;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #ffc107;
  --bs-btn-disabled-border-color: #ffc107;
}
.btn-danger {
  --bs-btn-color: #fff;
  --bs-btn-bg: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #bb2d3b;
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #dc3545;
  --bs-btn-disabled-border-color: #dc3545;
}
.btn-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #d3d4d5;
  --bs-btn-hover-border-color: #c6c7c8;
  --bs-btn-focus-shadow-rgb: 211, 212, 213;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #c6c7c8;
  --bs-btn-active-border-color: #babbbc;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #f8f9fa;
  --bs-btn-disabled-border-color: #f8f9fa;
}
.btn-dark {
  --bs-btn-color: #fff;
  --bs-btn-bg: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #424649;
  --bs-btn-hover-border-color: #373b3e;
  --bs-btn-focus-shadow-rgb: 66, 70, 73;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4d5154;
  --bs-btn-active-border-color: #373b3e;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #212529;
  --bs-btn-disabled-border-color: #212529;
}
.btn-outline-primary {
  --bs-btn-color: #337ab7;
  --bs-btn-border-color: #337ab7;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #337ab7;
  --bs-btn-hover-border-color: #337ab7;
  --bs-btn-focus-shadow-rgb: 51, 122, 183;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #337ab7;
  --bs-btn-active-border-color: #337ab7;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #337ab7;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #337ab7;
  --bs-gradient: none;
}
.btn-outline-secondary {
  --bs-btn-color: #6c757d;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6c757d;
  --bs-btn-hover-border-color: #6c757d;
  --bs-btn-focus-shadow-rgb: 108, 117, 125;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6c757d;
  --bs-btn-active-border-color: #6c757d;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #6c757d;
  --bs-gradient: none;
}
.btn-outline-success {
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25, 135, 84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}
.btn-outline-info {
  --bs-btn-color: #0dcaf0;
  --bs-btn-border-color: #0dcaf0;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #0dcaf0;
  --bs-btn-hover-border-color: #0dcaf0;
  --bs-btn-focus-shadow-rgb: 13, 202, 240;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #0dcaf0;
  --bs-btn-active-border-color: #0dcaf0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #0dcaf0;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #0dcaf0;
  --bs-gradient: none;
}
.btn-outline-warning {
  --bs-btn-color: #ffc107;
  --bs-btn-border-color: #ffc107;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #ffc107;
  --bs-btn-hover-border-color: #ffc107;
  --bs-btn-focus-shadow-rgb: 255, 193, 7;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #ffc107;
  --bs-btn-active-border-color: #ffc107;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #ffc107;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #ffc107;
  --bs-gradient: none;
}
.btn-outline-danger {
  --bs-btn-color: #dc3545;
  --bs-btn-border-color: #dc3545;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #dc3545;
  --bs-btn-active-border-color: #dc3545;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #dc3545;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #dc3545;
  --bs-gradient: none;
}
.btn-outline-light {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #f8f9fa;
  --bs-btn-hover-border-color: #f8f9fa;
  --bs-btn-focus-shadow-rgb: 248, 249, 250;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #f8f9fa;
  --bs-btn-active-border-color: #f8f9fa;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #f8f9fa;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #f8f9fa;
  --bs-gradient: none;
}
.btn-outline-dark {
  --bs-btn-color: #212529;
  --bs-btn-border-color: #212529;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #212529;
  --bs-btn-hover-border-color: #212529;
  --bs-btn-focus-shadow-rgb: 33, 37, 41;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #212529;
  --bs-btn-active-border-color: #212529;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #212529;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #212529;
  --bs-gradient: none;
}
.btn-link {
  --bs-btn-font-weight: 400;
  --bs-btn-color: var(--bs-link-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--bs-link-hover-color);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--bs-link-hover-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-color: #6c757d;
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-box-shadow: 0 0 0 #000;
  --bs-btn-focus-shadow-rgb: 82, 142, 194;
  text-decoration: underline;
}
.btn-link:focus-visible {
  color: var(--bs-btn-color);
}
.btn-link:hover {
  color: var(--bs-btn-hover-color);
}
.btn-lg, .btn-group-lg > .btn {
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.09375rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}
.btn-sm, .btn-group-sm > .btn {
  --bs-btn-padding-y: 0.25rem;
  --bs-btn-padding-x: 0.5rem;
  --bs-btn-font-size: 0.765625rem;
  --bs-btn-border-radius: var(--bs-border-radius-sm);
}
.fade {
  transition: opacity 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}
.fade:not(.show) {
  opacity: 0;
}
.collapse:not(.show) {
  display: none;
}
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    transition: none;
  }
}
.dropup,
.dropend,
.dropdown,
.dropstart,
.dropup-center,
.dropdown-center {
  position: relative;
}
.dropdown-toggle {
  white-space: nowrap;
}
.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
}
.dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropdown-menu {
  --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 0.875rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: var(--bs-border-radius);
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(var(--bs-border-radius) - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: var(--bs-box-shadow);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #337ab7;
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
  position: absolute;
  z-index: var(--bs-dropdown-zindex);
  display: none;
  min-width: var(--bs-dropdown-min-width);
  padding: var(--bs-dropdown-padding-y) var(--bs-dropdown-padding-x);
  margin: 0;
  font-size: var(--bs-dropdown-font-size);
  color: var(--bs-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bs-dropdown-bg);
  background-clip: padding-box;
  border: var(--bs-dropdown-border-width) solid var(--bs-dropdown-border-color);
  border-radius: var(--bs-dropdown-border-radius);
}
.dropdown-menu[data-bs-popper] {
  top: 100%;
  left: 0;
  margin-top: var(--bs-dropdown-spacer);
}
.dropdown-menu-start {
  --bs-position: start;
}
.dropdown-menu-start[data-bs-popper] {
  right: auto;
  left: 0;
}
.dropdown-menu-end {
  --bs-position: end;
}
.dropdown-menu-end[data-bs-popper] {
  right: 0;
  left: auto;
}
@media (min-width: 576px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 768px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 992px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1200px) {
  .dropdown-menu-xl-start {
    --bs-position: start;
  }
  .dropdown-menu-xl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xl-end {
    --bs-position: end;
  }
  .dropdown-menu-xl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1400px) {
  .dropdown-menu-xxl-start {
    --bs-position: start;
  }
  .dropdown-menu-xxl-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-xxl-end {
    --bs-position: end;
  }
  .dropdown-menu-xxl-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
.dropup .dropdown-menu[data-bs-popper] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: var(--bs-dropdown-spacer);
}
.dropup .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0;
  border-right: 0.3em solid transparent;
  border-bottom: 0.3em solid;
  border-left: 0.3em solid transparent;
}
.dropup .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-menu[data-bs-popper] {
  top: 0;
  right: auto;
  left: 100%;
  margin-top: 0;
  margin-left: var(--bs-dropdown-spacer);
}
.dropend .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0;
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
}
.dropend .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropend .dropdown-toggle::after {
  vertical-align: 0;
}
.dropstart .dropdown-menu[data-bs-popper] {
  top: 0;
  right: 100%;
  left: auto;
  margin-top: 0;
  margin-right: var(--bs-dropdown-spacer);
}
.dropstart .dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.255em;
  content: "";
}
.dropstart .dropdown-toggle::after {
  display: none;
}
.dropstart .dropdown-toggle::before {
  display: inline-block;
  margin-right: 0.255em;
  vertical-align: 0.255em;
  content: "";
  border-top: 0.3em solid transparent;
  border-right: 0.3em solid;
  border-bottom: 0.3em solid transparent;
}
.dropstart .dropdown-toggle:empty::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle::before {
  vertical-align: 0;
}
.dropdown-divider {
  height: 0;
  margin: var(--bs-dropdown-divider-margin-y) 0;
  overflow: hidden;
  border-top: 1px solid var(--bs-dropdown-divider-bg);
  opacity: 1;
}
.dropdown-item {
  display: block;
  width: 100%;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  clear: both;
  font-weight: 400;
  color: var(--bs-dropdown-link-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-radius: var(--bs-dropdown-item-border-radius, 0);
}
.dropdown-item:hover, .dropdown-item:focus {
  color: var(--bs-dropdown-link-hover-color);
  background-color: var(--bs-dropdown-link-hover-bg);
}
.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--bs-dropdown-link-active-bg);
}
.dropdown-item.disabled, .dropdown-item:disabled {
  color: var(--bs-dropdown-link-disabled-color);
  pointer-events: none;
  background-color: transparent;
}
.dropdown-menu.show {
  display: block;
}
.dropdown-header {
  display: block;
  padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
  margin-bottom: 0;
  font-size: 0.765625rem;
  color: var(--bs-dropdown-header-color);
  white-space: nowrap;
}
.dropdown-item-text {
  display: block;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  color: var(--bs-dropdown-link-color);
}
.dropdown-menu-dark {
  --bs-dropdown-color: #dee2e6;
  --bs-dropdown-bg: #343a40;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-box-shadow: ;
  --bs-dropdown-link-color: #dee2e6;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.15);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #337ab7;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-header-color: #adb5bd;
}
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  flex: 1 1 auto;
}
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn-check:focus + .btn,
.btn-group > .btn:hover,
.btn-group > .btn:focus,
.btn-group > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn-check:checked + .btn,
.btn-group-vertical > .btn-check:focus + .btn,
.btn-group-vertical > .btn:hover,
.btn-group-vertical > .btn:focus,
.btn-group-vertical > .btn:active,
.btn-group-vertical > .btn.active {
  z-index: 1;
}
.btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.btn-toolbar .input-group {
  width: auto;
}
.btn-group {
  border-radius: var(--bs-border-radius);
}
.btn-group > :not(.btn-check:first-child) + .btn,
.btn-group > .btn-group:not(:first-child) {
  margin-left: calc(var(--bs-border-width) * -1);
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn.dropdown-toggle-split:first-child,
.btn-group > .btn-group:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.btn-group > .btn:nth-child(n+3),
.btn-group > :not(.btn-check) + .btn,
.btn-group > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.dropdown-toggle-split {
  padding-right: 0.5625rem;
  padding-left: 0.5625rem;
}
.dropdown-toggle-split::after, .dropup .dropdown-toggle-split::after, .dropend .dropdown-toggle-split::after {
  margin-left: 0;
}
.dropstart .dropdown-toggle-split::before {
  margin-right: 0;
}
.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
}
.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}
.btn-group-vertical {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  width: 100%;
}
.btn-group-vertical > .btn:not(:first-child),
.btn-group-vertical > .btn-group:not(:first-child) {
  margin-top: calc(var(--bs-border-width) * -1);
}
.btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group-vertical > .btn-group:not(:last-child) > .btn {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn ~ .btn,
.btn-group-vertical > .btn-group:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: var(--bs-nav-link-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .nav-link {
    transition: none;
  }
}
.nav-link:hover, .nav-link:focus {
  color: var(--bs-nav-link-hover-color);
}
.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
}
.nav-link.disabled, .nav-link:disabled {
  color: var(--bs-nav-link-disabled-color);
  pointer-events: none;
  cursor: default;
}
.nav-tabs {
  --bs-nav-tabs-border-width: var(--bs-border-width);
  --bs-nav-tabs-border-color: var(--bs-border-color);
  --bs-nav-tabs-border-radius: var(--bs-border-radius);
  --bs-nav-tabs-link-hover-border-color: var(--bs-secondary-bg) var(--bs-secondary-bg) var(--bs-border-color);
  --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
  --bs-nav-tabs-link-active-bg: var(--bs-body-bg);
  --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg);
  border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color);
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--bs-nav-tabs-border-width));
  border: var(--bs-nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--bs-nav-tabs-border-radius);
  border-top-right-radius: var(--bs-nav-tabs-border-radius);
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--bs-nav-tabs-link-active-color);
  background-color: var(--bs-nav-tabs-link-active-bg);
  border-color: var(--bs-nav-tabs-link-active-border-color);
}
.nav-tabs .dropdown-menu {
  margin-top: calc(-1 * var(--bs-nav-tabs-border-width));
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #fff;
  --bs-nav-pills-link-active-bg: #337ab7;
}
.nav-pills .nav-link {
  border-radius: var(--bs-nav-pills-border-radius);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}
.nav-underline {
  --bs-nav-underline-gap: 1rem;
  --bs-nav-underline-border-width: 0.125rem;
  --bs-nav-underline-link-active-color: var(--bs-emphasis-color);
  gap: var(--bs-nav-underline-gap);
}
.nav-underline .nav-link {
  padding-right: 0;
  padding-left: 0;
  border-bottom: var(--bs-nav-underline-border-width) solid transparent;
}
.nav-underline .nav-link:hover, .nav-underline .nav-link:focus {
  border-bottom-color: currentcolor;
}
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  font-weight: 700;
  color: var(--bs-nav-underline-link-active-color);
  border-bottom-color: currentcolor;
}
.nav-fill > .nav-link,
.nav-fill .nav-item {
  flex: 1 1 auto;
  text-align: center;
}
.nav-justified > .nav-link,
.nav-justified .nav-item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
  width: 100%;
}
.tab-content > .tab-pane {
  display: none;
}
.tab-content > .active {
  display: block;
}
.navbar {
  --bs-navbar-padding-x: 0;
  --bs-navbar-padding-y: 0.5rem;
  --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
  --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
  --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
  --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-padding-y: 0.3437500009rem;
  --bs-navbar-brand-margin-end: 1rem;
  --bs-navbar-brand-font-size: 1.09375rem;
  --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
  --bs-navbar-nav-link-padding-x: 0.5rem;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.75rem;
  --bs-navbar-toggler-font-size: 1.09375rem;
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
  --bs-navbar-toggler-border-radius: var(--bs-border-radius);
  --bs-navbar-toggler-focus-width: 0.25rem;
  --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-navbar-padding-y) var(--bs-navbar-padding-x);
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
}
.navbar-brand {
  padding-top: var(--bs-navbar-brand-padding-y);
  padding-bottom: var(--bs-navbar-brand-padding-y);
  margin-right: var(--bs-navbar-brand-margin-end);
  font-size: var(--bs-navbar-brand-font-size);
  color: var(--bs-navbar-brand-color);
  text-decoration: none;
  white-space: nowrap;
}
.navbar-brand:hover, .navbar-brand:focus {
  color: var(--bs-navbar-brand-hover-color);
}
.navbar-nav {
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-navbar-color);
  --bs-nav-link-hover-color: var(--bs-navbar-hover-color);
  --bs-nav-link-disabled-color: var(--bs-navbar-disabled-color);
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
  color: var(--bs-navbar-active-color);
}
.navbar-nav .dropdown-menu {
  position: static;
}
.navbar-text {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-navbar-color);
}
.navbar-text a,
.navbar-text a:hover,
.navbar-text a:focus {
  color: var(--bs-navbar-active-color);
}
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}
.navbar-toggler {
  padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
  font-size: var(--bs-navbar-toggler-font-size);
  line-height: 1;
  color: var(--bs-navbar-color);
  background-color: transparent;
  border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
  border-radius: var(--bs-navbar-toggler-border-radius);
  transition: var(--bs-navbar-toggler-transition);
}
@media (prefers-reduced-motion: reduce) {
  .navbar-toggler {
    transition: none;
  }
}
.navbar-toggler:hover {
  text-decoration: none;
}
.navbar-toggler:focus {
  text-decoration: none;
  outline: 0;
  box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
}
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-image: var(--bs-navbar-toggler-icon-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.navbar-nav-scroll {
  max-height: var(--bs-scroll-height, 75vh);
  overflow-y: auto;
}
@media (min-width: 576px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 768px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1200px) {
  .navbar-expand-xl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1400px) {
  .navbar-expand-xxl {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-xxl .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-xxl .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-xxl .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-xxl .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-xxl .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-xxl .navbar-toggler {
    display: none;
  }
  .navbar-expand-xxl .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-xxl .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
.navbar-expand {
  flex-wrap: nowrap;
  justify-content: flex-start;
}
.navbar-expand .navbar-nav {
  flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
  position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
  padding-right: var(--bs-navbar-nav-link-padding-x);
  padding-left: var(--bs-navbar-nav-link-padding-x);
}
.navbar-expand .navbar-nav-scroll {
  overflow: visible;
}
.navbar-expand .navbar-collapse {
  display: flex !important;
  flex-basis: auto;
}
.navbar-expand .navbar-toggler {
  display: none;
}
.navbar-expand .offcanvas {
  position: static;
  z-index: auto;
  flex-grow: 1;
  width: auto !important;
  height: auto !important;
  visibility: visible !important;
  background-color: transparent !important;
  border: 0 !important;
  transform: none !important;
  transition: none;
}
.navbar-expand .offcanvas .offcanvas-header {
  display: none;
}
.navbar-expand .offcanvas .offcanvas-body {
  display: flex;
  flex-grow: 0;
  padding: 0;
  overflow-y: visible;
}
.navbar-dark,
.navbar[data-bs-theme=dark] {
  --bs-navbar-color: rgba(255, 255, 255, 0.55);
  --bs-navbar-hover-color: rgba(255, 255, 255, 0.75);
  --bs-navbar-disabled-color: rgba(255, 255, 255, 0.25);
  --bs-navbar-active-color: #fff;
  --bs-navbar-brand-color: #fff;
  --bs-navbar-brand-hover-color: #fff;
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.1);
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
[data-bs-theme=dark] .navbar-toggler-icon {
  --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.card {
  --bs-card-spacer-y: 1rem;
  --bs-card-spacer-x: 1rem;
  --bs-card-title-spacer-y: 0.5rem;
  --bs-card-title-color: ;
  --bs-card-subtitle-color: ;
  --bs-card-border-width: var(--bs-border-width);
  --bs-card-border-color: var(--bs-border-color-translucent);
  --bs-card-border-radius: var(--bs-border-radius);
  --bs-card-box-shadow: ;
  --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-card-cap-padding-y: 0.5rem;
  --bs-card-cap-padding-x: 1rem;
  --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
  --bs-card-cap-color: ;
  --bs-card-height: ;
  --bs-card-color: ;
  --bs-card-bg: var(--bs-body-bg);
  --bs-card-img-overlay-padding: 1rem;
  --bs-card-group-margin: 0.75rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: var(--bs-card-height);
  color: var(--bs-body-color);
  word-wrap: break-word;
  background-color: var(--bs-card-bg);
  background-clip: border-box;
  border: var(--bs-card-border-width) solid var(--bs-card-border-color);
  border-radius: var(--bs-card-border-radius);
}
.card > hr {
  margin-right: 0;
  margin-left: 0;
}
.card > .list-group {
  border-top: inherit;
  border-bottom: inherit;
}
.card > .list-group:first-child {
  border-top-width: 0;
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child {
  border-bottom-width: 0;
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group,
.card > .list-group + .card-footer {
  border-top: 0;
}
.card-body {
  flex: 1 1 auto;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  color: var(--bs-card-color);
}
.card-title {
  margin-bottom: var(--bs-card-title-spacer-y);
  color: var(--bs-card-title-color);
}
.card-subtitle {
  margin-top: calc(-0.5 * var(--bs-card-title-spacer-y));
  margin-bottom: 0;
  color: var(--bs-card-subtitle-color);
}
.card-text:last-child {
  margin-bottom: 0;
}
.card-link + .card-link {
  margin-left: var(--bs-card-spacer-x);
}
.card-header {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  margin-bottom: 0;
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-header:first-child {
  border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
}
.card-footer {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
}
.card-footer:last-child {
  border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius);
}
.card-header-tabs {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-bottom: calc(-1 * var(--bs-card-cap-padding-y));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
  border-bottom: 0;
}
.card-header-tabs .nav-link.active {
  background-color: var(--bs-card-bg);
  border-bottom-color: var(--bs-card-bg);
}
.card-header-pills {
  margin-right: calc(-0.5 * var(--bs-card-cap-padding-x));
  margin-left: calc(-0.5 * var(--bs-card-cap-padding-x));
}
.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--bs-card-img-overlay-padding);
  border-radius: var(--bs-card-inner-border-radius);
}
.card-img,
.card-img-top,
.card-img-bottom {
  width: 100%;
}
.card-img,
.card-img-top {
  border-top-left-radius: var(--bs-card-inner-border-radius);
  border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card-img,
.card-img-bottom {
  border-bottom-right-radius: var(--bs-card-inner-border-radius);
  border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card-group > .card {
  margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
  .card-group {
    display: flex;
    flex-flow: row wrap;
  }
  .card-group > .card {
    flex: 1 0 0%;
    margin-bottom: 0;
  }
  .card-group > .card + .card {
    margin-left: 0;
    border-left: 0;
  }
  .card-group > .card:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-top,
  .card-group > .card:not(:last-child) .card-header {
    border-top-right-radius: 0;
  }
  .card-group > .card:not(:last-child) .card-img-bottom,
  .card-group > .card:not(:last-child) .card-footer {
    border-bottom-right-radius: 0;
  }
  .card-group > .card:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-top,
  .card-group > .card:not(:first-child) .card-header {
    border-top-left-radius: 0;
  }
  .card-group > .card:not(:first-child) .card-img-bottom,
  .card-group > .card:not(:first-child) .card-footer {
    border-bottom-left-radius: 0;
  }
}
.accordion {
  --bs-accordion-color: var(--bs-body-color);
  --bs-accordion-bg: var(--bs-body-bg);
  --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
  --bs-accordion-border-color: var(--bs-border-color);
  --bs-accordion-border-width: var(--bs-border-width);
  --bs-accordion-border-radius: var(--bs-border-radius);
  --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1rem;
  --bs-accordion-btn-color: var(--bs-body-color);
  --bs-accordion-btn-bg: var(--bs-accordion-bg);
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
  --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23143149'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-focus-border-color: #99bddb;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 1rem;
  --bs-accordion-active-color: var(--bs-primary-text-emphasis);
  --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}
.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: var(--bs-accordion-btn-padding-y) var(--bs-accordion-btn-padding-x);
  font-size: 0.875rem;
  color: var(--bs-accordion-btn-color);
  text-align: left;
  background-color: var(--bs-accordion-btn-bg);
  border: 0;
  border-radius: 0;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button {
    transition: none;
  }
}
.accordion-button:not(.collapsed) {
  color: var(--bs-accordion-active-color);
  background-color: var(--bs-accordion-active-bg);
  box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}
.accordion-button:not(.collapsed)::after {
  background-image: var(--bs-accordion-btn-active-icon);
  transform: var(--bs-accordion-btn-icon-transform);
}
.accordion-button::after {
  flex-shrink: 0;
  width: var(--bs-accordion-btn-icon-width);
  height: var(--bs-accordion-btn-icon-width);
  margin-left: auto;
  content: "";
  background-image: var(--bs-accordion-btn-icon);
  background-repeat: no-repeat;
  background-size: var(--bs-accordion-btn-icon-width);
  transition: var(--bs-accordion-btn-icon-transition);
}
@media (prefers-reduced-motion: reduce) {
  .accordion-button::after {
    transition: none;
  }
}
.accordion-button:hover {
  z-index: 2;
}
.accordion-button:focus {
  z-index: 3;
  border-color: var(--bs-accordion-btn-focus-border-color);
  outline: 0;
  box-shadow: var(--bs-accordion-btn-focus-box-shadow);
}
.accordion-header {
  margin-bottom: 0;
}
.accordion-item {
  color: var(--bs-accordion-color);
  background-color: var(--bs-accordion-bg);
  border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
}
.accordion-item:first-of-type {
  border-top-left-radius: var(--bs-accordion-border-radius);
  border-top-right-radius: var(--bs-accordion-border-radius);
}
.accordion-item:first-of-type .accordion-button {
  border-top-left-radius: var(--bs-accordion-inner-border-radius);
  border-top-right-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:not(:first-of-type) {
  border-top: 0;
}
.accordion-item:last-of-type {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-item:last-of-type .accordion-button.collapsed {
  border-bottom-right-radius: var(--bs-accordion-inner-border-radius);
  border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
}
.accordion-item:last-of-type .accordion-collapse {
  border-bottom-right-radius: var(--bs-accordion-border-radius);
  border-bottom-left-radius: var(--bs-accordion-border-radius);
}
.accordion-body {
  padding: var(--bs-accordion-body-padding-y) var(--bs-accordion-body-padding-x);
}
.accordion-flush .accordion-collapse {
  border-width: 0;
}
.accordion-flush .accordion-item {
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}
.accordion-flush .accordion-item:first-child {
  border-top: 0;
}
.accordion-flush .accordion-item:last-child {
  border-bottom: 0;
}
.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
  border-radius: 0;
}
[data-bs-theme=dark] .accordion-button::after {
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2385afd4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2385afd4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--bs-breadcrumb-divider-color);
  content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--bs-breadcrumb-item-active-color);
}
.pagination {
  --bs-pagination-padding-x: 0.75rem;
  --bs-pagination-padding-y: 0.375rem;
  --bs-pagination-font-size: 0.875rem;
  --bs-pagination-color: var(--bs-link-color);
  --bs-pagination-bg: var(--bs-body-bg);
  --bs-pagination-border-width: var(--bs-border-width);
  --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-border-radius: var(--bs-border-radius);
  --bs-pagination-hover-color: var(--bs-link-hover-color);
  --bs-pagination-hover-bg: var(--bs-tertiary-bg);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: var(--bs-link-hover-color);
  --bs-pagination-focus-bg: var(--bs-secondary-bg);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: #337ab7;
  --bs-pagination-active-border-color: #337ab7;
  --bs-pagination-disabled-color: var(--bs-secondary-color);
  --bs-pagination-disabled-bg: var(--bs-secondary-bg);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: flex;
  padding-left: 0;
  list-style: none;
}
.page-link {
  position: relative;
  display: block;
  padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
  font-size: var(--bs-pagination-font-size);
  color: var(--bs-pagination-color);
  text-decoration: none;
  background-color: var(--bs-pagination-bg);
  border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .page-link {
    transition: none;
  }
}
.page-link:hover {
  z-index: 2;
  color: var(--bs-pagination-hover-color);
  background-color: var(--bs-pagination-hover-bg);
  border-color: var(--bs-pagination-hover-border-color);
}
.page-link:focus {
  z-index: 3;
  color: var(--bs-pagination-focus-color);
  background-color: var(--bs-pagination-focus-bg);
  outline: 0;
  box-shadow: var(--bs-pagination-focus-box-shadow);
}
.page-link.active, .active > .page-link {
  z-index: 3;
  color: var(--bs-pagination-active-color);
  background-color: var(--bs-pagination-active-bg);
  border-color: var(--bs-pagination-active-border-color);
}
.page-link.disabled, .disabled > .page-link {
  color: var(--bs-pagination-disabled-color);
  pointer-events: none;
  background-color: var(--bs-pagination-disabled-bg);
  border-color: var(--bs-pagination-disabled-border-color);
}
.page-item:not(:first-child) .page-link {
  margin-left: calc(var(--bs-border-width) * -1);
}
.page-item:first-child .page-link {
  border-top-left-radius: var(--bs-pagination-border-radius);
  border-bottom-left-radius: var(--bs-pagination-border-radius);
}
.page-item:last-child .page-link {
  border-top-right-radius: var(--bs-pagination-border-radius);
  border-bottom-right-radius: var(--bs-pagination-border-radius);
}
.pagination-lg {
  --bs-pagination-padding-x: 1.5rem;
  --bs-pagination-padding-y: 0.75rem;
  --bs-pagination-font-size: 1.09375rem;
  --bs-pagination-border-radius: var(--bs-border-radius-lg);
}
.pagination-sm {
  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.25rem;
  --bs-pagination-font-size: 0.765625rem;
  --bs-pagination-border-radius: var(--bs-border-radius-sm);
}
.badge {
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.35em;
  --bs-badge-font-size: 0.75em;
  --bs-badge-font-weight: 700;
  --bs-badge-color: #fff;
  --bs-badge-border-radius: var(--bs-border-radius);
  display: inline-block;
  padding: var(--bs-badge-padding-y) var(--bs-badge-padding-x);
  font-size: var(--bs-badge-font-size);
  font-weight: var(--bs-badge-font-weight);
  line-height: 1;
  color: var(--bs-badge-color);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--bs-badge-border-radius);
}
.badge:empty {
  display: none;
}
.btn .badge {
  position: relative;
  top: -1px;
}
.alert {
  --bs-alert-bg: transparent;
  --bs-alert-padding-x: 1rem;
  --bs-alert-padding-y: 1rem;
  --bs-alert-margin-bottom: 1rem;
  --bs-alert-color: inherit;
  --bs-alert-border-color: transparent;
  --bs-alert-border: var(--bs-border-width) solid var(--bs-alert-border-color);
  --bs-alert-border-radius: var(--bs-border-radius);
  --bs-alert-link-color: inherit;
  position: relative;
  padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
  margin-bottom: var(--bs-alert-margin-bottom);
  color: var(--bs-alert-color);
  background-color: var(--bs-alert-bg);
  border: var(--bs-alert-border);
  border-radius: var(--bs-alert-border-radius);
}
.alert-heading {
  color: inherit;
}
.alert-link {
  font-weight: 700;
  color: var(--bs-alert-link-color);
}
.alert-dismissible {
  padding-right: 3rem;
}
.alert-dismissible .btn-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  padding: 1.25rem 1rem;
}
.alert-primary {
  --bs-alert-color: var(--bs-primary-text-emphasis);
  --bs-alert-bg: var(--bs-primary-bg-subtle);
  --bs-alert-border-color: var(--bs-primary-border-subtle);
  --bs-alert-link-color: var(--bs-primary-text-emphasis);
}
.alert-secondary {
  --bs-alert-color: var(--bs-secondary-text-emphasis);
  --bs-alert-bg: var(--bs-secondary-bg-subtle);
  --bs-alert-border-color: var(--bs-secondary-border-subtle);
  --bs-alert-link-color: var(--bs-secondary-text-emphasis);
}
.alert-success {
  --bs-alert-color: var(--bs-success-text-emphasis);
  --bs-alert-bg: var(--bs-success-bg-subtle);
  --bs-alert-border-color: var(--bs-success-border-subtle);
  --bs-alert-link-color: var(--bs-success-text-emphasis);
}
.alert-info {
  --bs-alert-color: var(--bs-info-text-emphasis);
  --bs-alert-bg: var(--bs-info-bg-subtle);
  --bs-alert-border-color: var(--bs-info-border-subtle);
  --bs-alert-link-color: var(--bs-info-text-emphasis);
}
.alert-warning {
  --bs-alert-color: var(--bs-warning-text-emphasis);
  --bs-alert-bg: var(--bs-warning-bg-subtle);
  --bs-alert-border-color: var(--bs-warning-border-subtle);
  --bs-alert-link-color: var(--bs-warning-text-emphasis);
}
.alert-danger {
  --bs-alert-color: var(--bs-danger-text-emphasis);
  --bs-alert-bg: var(--bs-danger-bg-subtle);
  --bs-alert-border-color: var(--bs-danger-border-subtle);
  --bs-alert-link-color: var(--bs-danger-text-emphasis);
}
.alert-light {
  --bs-alert-color: var(--bs-light-text-emphasis);
  --bs-alert-bg: var(--bs-light-bg-subtle);
  --bs-alert-border-color: var(--bs-light-border-subtle);
  --bs-alert-link-color: var(--bs-light-text-emphasis);
}
.alert-dark {
  --bs-alert-color: var(--bs-dark-text-emphasis);
  --bs-alert-bg: var(--bs-dark-bg-subtle);
  --bs-alert-border-color: var(--bs-dark-border-subtle);
  --bs-alert-link-color: var(--bs-dark-text-emphasis);
}
@keyframes progress-bar-stripes {
  0% {
    background-position-x: 1rem;
  }
}
.progress,
.progress-stacked {
  --bs-progress-height: 1rem;
  --bs-progress-font-size: 0.65625rem;
  --bs-progress-bg: var(--bs-secondary-bg);
  --bs-progress-border-radius: var(--bs-border-radius);
  --bs-progress-box-shadow: var(--bs-box-shadow-inset);
  --bs-progress-bar-color: #fff;
  --bs-progress-bar-bg: #337ab7;
  --bs-progress-bar-transition: width 0.6s ease;
  display: flex;
  height: var(--bs-progress-height);
  overflow: hidden;
  font-size: var(--bs-progress-font-size);
  background-color: var(--bs-progress-bg);
  border-radius: var(--bs-progress-border-radius);
}
.progress-bar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  color: var(--bs-progress-bar-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--bs-progress-bar-bg);
  transition: var(--bs-progress-bar-transition);
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar {
    transition: none;
  }
}
.progress-bar-striped {
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: var(--bs-progress-height) var(--bs-progress-height);
}
.progress-stacked > .progress {
  overflow: visible;
}
.progress-stacked > .progress > .progress-bar {
  width: 100%;
}
.progress-bar-animated {
  animation: 1s linear infinite progress-bar-stripes;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar-animated {
    animation: none;
  }
}
.list-group {
  --bs-list-group-color: var(--bs-body-color);
  --bs-list-group-bg: var(--bs-body-bg);
  --bs-list-group-border-color: var(--bs-border-color);
  --bs-list-group-border-width: var(--bs-border-width);
  --bs-list-group-border-radius: var(--bs-border-radius);
  --bs-list-group-item-padding-x: 1rem;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-action-color: var(--bs-secondary-color);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
  --bs-list-group-action-active-color: var(--bs-body-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-bg);
  --bs-list-group-disabled-color: var(--bs-secondary-color);
  --bs-list-group-disabled-bg: var(--bs-body-bg);
  --bs-list-group-active-color: #fff;
  --bs-list-group-active-bg: #337ab7;
  --bs-list-group-active-border-color: #337ab7;
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border-radius: var(--bs-list-group-border-radius);
}
.list-group-numbered {
  list-style-type: none;
  counter-reset: section;
}
.list-group-numbered > .list-group-item::before {
  content: counters(section, ".") ". ";
  counter-increment: section;
}
.list-group-item-action {
  width: 100%;
  color: var(--bs-list-group-action-color);
  text-align: inherit;
}
.list-group-item-action:hover, .list-group-item-action:focus {
  z-index: 1;
  color: var(--bs-list-group-action-hover-color);
  text-decoration: none;
  background-color: var(--bs-list-group-action-hover-bg);
}
.list-group-item-action:active {
  color: var(--bs-list-group-action-active-color);
  background-color: var(--bs-list-group-action-active-bg);
}
.list-group-item {
  position: relative;
  display: block;
  padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x);
  color: var(--bs-list-group-color);
  text-decoration: none;
  background-color: var(--bs-list-group-bg);
  border: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}
.list-group-item:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.list-group-item:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
.list-group-item.disabled, .list-group-item:disabled {
  color: var(--bs-list-group-disabled-color);
  pointer-events: none;
  background-color: var(--bs-list-group-disabled-bg);
}
.list-group-item.active {
  z-index: 2;
  color: var(--bs-list-group-active-color);
  background-color: var(--bs-list-group-active-bg);
  border-color: var(--bs-list-group-active-border-color);
}
.list-group-item + .list-group-item {
  border-top-width: 0;
}
.list-group-item + .list-group-item.active {
  margin-top: calc(-1 * var(--bs-list-group-border-width));
  border-top-width: var(--bs-list-group-border-width);
}
.list-group-horizontal {
  flex-direction: row;
}
.list-group-horizontal > .list-group-item:first-child:not(:last-child) {
  border-bottom-left-radius: var(--bs-list-group-border-radius);
  border-top-right-radius: 0;
}
.list-group-horizontal > .list-group-item:last-child:not(:first-child) {
  border-top-right-radius: var(--bs-list-group-border-radius);
  border-bottom-left-radius: 0;
}
.list-group-horizontal > .list-group-item.active {
  margin-top: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item {
  border-top-width: var(--bs-list-group-border-width);
  border-left-width: 0;
}
.list-group-horizontal > .list-group-item + .list-group-item.active {
  margin-left: calc(-1 * var(--bs-list-group-border-width));
  border-left-width: var(--bs-list-group-border-width);
}
@media (min-width: 576px) {
  .list-group-horizontal-sm {
    flex-direction: row;
  }
  .list-group-horizontal-sm > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-sm > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 768px) {
  .list-group-horizontal-md {
    flex-direction: row;
  }
  .list-group-horizontal-md > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-md > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-md > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 992px) {
  .list-group-horizontal-lg {
    flex-direction: row;
  }
  .list-group-horizontal-lg > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-lg > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1200px) {
  .list-group-horizontal-xl {
    flex-direction: row;
  }
  .list-group-horizontal-xl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
@media (min-width: 1400px) {
  .list-group-horizontal-xxl {
    flex-direction: row;
  }
  .list-group-horizontal-xxl > .list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item:last-child:not(:first-child) {
    border-top-right-radius: var(--bs-list-group-border-radius);
    border-bottom-left-radius: 0;
  }
  .list-group-horizontal-xxl > .list-group-item.active {
    margin-top: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
    border-top-width: var(--bs-list-group-border-width);
    border-left-width: 0;
  }
  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
    margin-left: calc(-1 * var(--bs-list-group-border-width));
    border-left-width: var(--bs-list-group-border-width);
  }
}
.list-group-flush {
  border-radius: 0;
}
.list-group-flush > .list-group-item {
  border-width: 0 0 var(--bs-list-group-border-width);
}
.list-group-flush > .list-group-item:last-child {
  border-bottom-width: 0;
}
.list-group-item-primary {
  --bs-list-group-color: var(--bs-primary-text-emphasis);
  --bs-list-group-bg: var(--bs-primary-bg-subtle);
  --bs-list-group-border-color: var(--bs-primary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-primary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-primary-border-subtle);
  --bs-list-group-active-color: var(--bs-primary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-primary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-primary-text-emphasis);
}
.list-group-item-secondary {
  --bs-list-group-color: var(--bs-secondary-text-emphasis);
  --bs-list-group-bg: var(--bs-secondary-bg-subtle);
  --bs-list-group-border-color: var(--bs-secondary-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-secondary-border-subtle);
  --bs-list-group-active-color: var(--bs-secondary-bg-subtle);
  --bs-list-group-active-bg: var(--bs-secondary-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-secondary-text-emphasis);
}
.list-group-item-success {
  --bs-list-group-color: var(--bs-success-text-emphasis);
  --bs-list-group-bg: var(--bs-success-bg-subtle);
  --bs-list-group-border-color: var(--bs-success-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-success-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-success-border-subtle);
  --bs-list-group-active-color: var(--bs-success-bg-subtle);
  --bs-list-group-active-bg: var(--bs-success-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-success-text-emphasis);
}
.list-group-item-info {
  --bs-list-group-color: var(--bs-info-text-emphasis);
  --bs-list-group-bg: var(--bs-info-bg-subtle);
  --bs-list-group-border-color: var(--bs-info-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-info-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-info-border-subtle);
  --bs-list-group-active-color: var(--bs-info-bg-subtle);
  --bs-list-group-active-bg: var(--bs-info-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-info-text-emphasis);
}
.list-group-item-warning {
  --bs-list-group-color: var(--bs-warning-text-emphasis);
  --bs-list-group-bg: var(--bs-warning-bg-subtle);
  --bs-list-group-border-color: var(--bs-warning-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-warning-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-warning-border-subtle);
  --bs-list-group-active-color: var(--bs-warning-bg-subtle);
  --bs-list-group-active-bg: var(--bs-warning-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-warning-text-emphasis);
}
.list-group-item-danger {
  --bs-list-group-color: var(--bs-danger-text-emphasis);
  --bs-list-group-bg: var(--bs-danger-bg-subtle);
  --bs-list-group-border-color: var(--bs-danger-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-danger-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-danger-border-subtle);
  --bs-list-group-active-color: var(--bs-danger-bg-subtle);
  --bs-list-group-active-bg: var(--bs-danger-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-danger-text-emphasis);
}
.list-group-item-light {
  --bs-list-group-color: var(--bs-light-text-emphasis);
  --bs-list-group-bg: var(--bs-light-bg-subtle);
  --bs-list-group-border-color: var(--bs-light-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-light-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-light-border-subtle);
  --bs-list-group-active-color: var(--bs-light-bg-subtle);
  --bs-list-group-active-bg: var(--bs-light-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-light-text-emphasis);
}
.list-group-item-dark {
  --bs-list-group-color: var(--bs-dark-text-emphasis);
  --bs-list-group-bg: var(--bs-dark-bg-subtle);
  --bs-list-group-border-color: var(--bs-dark-border-subtle);
  --bs-list-group-action-hover-color: var(--bs-emphasis-color);
  --bs-list-group-action-hover-bg: var(--bs-dark-border-subtle);
  --bs-list-group-action-active-color: var(--bs-emphasis-color);
  --bs-list-group-action-active-bg: var(--bs-dark-border-subtle);
  --bs-list-group-active-color: var(--bs-dark-bg-subtle);
  --bs-list-group-active-bg: var(--bs-dark-text-emphasis);
  --bs-list-group-active-border-color: var(--bs-dark-text-emphasis);
}
.btn-close {
  --bs-btn-close-color: #000;
  --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  --bs-btn-close-opacity: 0.5;
  --bs-btn-close-hover-opacity: 0.75;
  --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(51, 122, 183, 0.25);
  --bs-btn-close-focus-opacity: 1;
  --bs-btn-close-disabled-opacity: 0.25;
  --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: var(--bs-btn-close-color);
  background: transparent var(--bs-btn-close-bg) center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: var(--bs-btn-close-opacity);
}
.btn-close:hover {
  color: var(--bs-btn-close-color);
  text-decoration: none;
  opacity: var(--bs-btn-close-hover-opacity);
}
.btn-close:focus {
  outline: 0;
  box-shadow: var(--bs-btn-close-focus-shadow);
  opacity: var(--bs-btn-close-focus-opacity);
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  opacity: var(--bs-btn-close-disabled-opacity);
}
.btn-close-white {
  filter: var(--bs-btn-close-white-filter);
}
[data-bs-theme=dark] .btn-close {
  filter: var(--bs-btn-close-white-filter);
}
.toast {
  --bs-toast-zindex: 1090;
  --bs-toast-padding-x: 0.75rem;
  --bs-toast-padding-y: 0.5rem;
  --bs-toast-spacing: 1.5rem;
  --bs-toast-max-width: 350px;
  --bs-toast-font-size: 0.875rem;
  --bs-toast-color: ;
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-border-width: var(--bs-border-width);
  --bs-toast-border-color: var(--bs-border-color-translucent);
  --bs-toast-border-radius: var(--bs-border-radius);
  --bs-toast-box-shadow: var(--bs-box-shadow);
  --bs-toast-header-color: var(--bs-secondary-color);
  --bs-toast-header-bg: rgba(var(--bs-body-bg-rgb), 0.85);
  --bs-toast-header-border-color: var(--bs-border-color-translucent);
  width: var(--bs-toast-max-width);
  max-width: 100%;
  font-size: var(--bs-toast-font-size);
  color: var(--bs-toast-color);
  pointer-events: auto;
  background-color: var(--bs-toast-bg);
  background-clip: padding-box;
  border: var(--bs-toast-border-width) solid var(--bs-toast-border-color);
  box-shadow: var(--bs-toast-box-shadow);
  border-radius: var(--bs-toast-border-radius);
}
.toast.showing {
  opacity: 0;
}
.toast:not(.show) {
  display: none;
}
.toast-container {
  --bs-toast-zindex: 1090;
  position: absolute;
  z-index: var(--bs-toast-zindex);
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
}
.toast-container > :not(:last-child) {
  margin-bottom: var(--bs-toast-spacing);
}
.toast-header {
  display: flex;
  align-items: center;
  padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x);
  color: var(--bs-toast-header-color);
  background-color: var(--bs-toast-header-bg);
  background-clip: padding-box;
  border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
  border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
  border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
}
.toast-header .btn-close {
  margin-right: calc(-0.5 * var(--bs-toast-padding-x));
  margin-left: var(--bs-toast-padding-x);
}
.toast-body {
  padding: var(--bs-toast-padding-x);
  word-wrap: break-word;
}
.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: ;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: var(--bs-box-shadow-sm);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: var(--bs-border-width);
  --bs-modal-title-line-height: 1.42857142;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: var(--bs-border-width);
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--bs-modal-margin);
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}
@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}
.modal.show .modal-dialog {
  transform: none;
}
.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}
.modal-dialog-scrollable {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}
.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - var(--bs-modal-margin) * 2);
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}
.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: #000;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop.show {
  opacity: var(--bs-backdrop-opacity);
}
.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-modal-header-padding);
  border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
  border-top-left-radius: var(--bs-modal-inner-border-radius);
  border-top-right-radius: var(--bs-modal-inner-border-radius);
}
.modal-header .btn-close {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5) calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y)) calc(-0.5 * var(--bs-modal-header-padding-x)) calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
}
.modal-title {
  margin-bottom: 0;
  line-height: var(--bs-modal-title-line-height);
}
.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--bs-modal-padding);
}
.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * 0.5);
  background-color: var(--bs-modal-footer-bg);
  border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
  border-bottom-right-radius: var(--bs-modal-inner-border-radius);
  border-bottom-left-radius: var(--bs-modal-inner-border-radius);
}
.modal-footer > * {
  margin: calc(var(--bs-modal-footer-gap) * 0.5);
}
@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1.75rem;
    --bs-modal-box-shadow: var(--bs-box-shadow);
  }
  .modal-dialog {
    max-width: var(--bs-modal-width);
    margin-right: auto;
    margin-left: auto;
  }
  .modal-sm {
    --bs-modal-width: 300px;
  }
}
@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    --bs-modal-width: 800px;
  }
}
@media (min-width: 1200px) {
  .modal-xl {
    --bs-modal-width: 1140px;
  }
}
.modal-fullscreen {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0;
}
.modal-fullscreen .modal-body {
  overflow-y: auto;
}
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-sm-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 767.98px) {
  .modal-fullscreen-md-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-md-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 991.98px) {
  .modal-fullscreen-lg-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-lg-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-header,
  .modal-fullscreen-lg-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-lg-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1199.98px) {
  .modal-fullscreen-xl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-header,
  .modal-fullscreen-xl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xl-down .modal-body {
    overflow-y: auto;
  }
}
@media (max-width: 1399.98px) {
  .modal-fullscreen-xxl-down {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
  }
  .modal-fullscreen-xxl-down .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-header,
  .modal-fullscreen-xxl-down .modal-footer {
    border-radius: 0;
  }
  .modal-fullscreen-xxl-down .modal-body {
    overflow-y: auto;
  }
}
.tooltip {
  --bs-tooltip-zindex: 1080;
  --bs-tooltip-max-width: 200px;
  --bs-tooltip-padding-x: 0.5rem;
  --bs-tooltip-padding-y: 0.25rem;
  --bs-tooltip-margin: ;
  --bs-tooltip-font-size: 0.765625rem;
  --bs-tooltip-color: var(--bs-body-bg);
  --bs-tooltip-bg: var(--bs-emphasis-color);
  --bs-tooltip-border-radius: var(--bs-border-radius);
  --bs-tooltip-opacity: 0.9;
  --bs-tooltip-arrow-width: 0.8rem;
  --bs-tooltip-arrow-height: 0.4rem;
  z-index: var(--bs-tooltip-zindex);
  display: block;
  margin: var(--bs-tooltip-margin);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857142;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-tooltip-font-size);
  word-wrap: break-word;
  opacity: 0;
}
.tooltip.show {
  opacity: var(--bs-tooltip-opacity);
}
.tooltip .tooltip-arrow {
  display: block;
  width: var(--bs-tooltip-arrow-width);
  height: var(--bs-tooltip-arrow-height);
}
.tooltip .tooltip-arrow::before {
  position: absolute;
  content: "";
  border-color: transparent;
  border-style: solid;
}
.bs-tooltip-top .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
  bottom: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
  top: -1px;
  border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-top-color: var(--bs-tooltip-bg);
}
/* rtl:begin:ignore */
.bs-tooltip-end .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
  left: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
  right: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * 0.5) 0;
  border-right-color: var(--bs-tooltip-bg);
}
/* rtl:end:ignore */
.bs-tooltip-bottom .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
  top: calc(-1 * var(--bs-tooltip-arrow-height));
}
.bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
  bottom: -1px;
  border-width: 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-bottom-color: var(--bs-tooltip-bg);
}
/* rtl:begin:ignore */
.bs-tooltip-start .tooltip-arrow, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
  right: calc(-1 * var(--bs-tooltip-arrow-height));
  width: var(--bs-tooltip-arrow-height);
  height: var(--bs-tooltip-arrow-width);
}
.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
  left: -1px;
  border-width: calc(var(--bs-tooltip-arrow-width) * 0.5) 0 calc(var(--bs-tooltip-arrow-width) * 0.5) var(--bs-tooltip-arrow-height);
  border-left-color: var(--bs-tooltip-bg);
}
/* rtl:end:ignore */
.tooltip-inner {
  max-width: var(--bs-tooltip-max-width);
  padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
  color: var(--bs-tooltip-color);
  text-align: center;
  background-color: var(--bs-tooltip-bg);
  border-radius: var(--bs-tooltip-border-radius);
}
.popover {
  --bs-popover-zindex: 1070;
  --bs-popover-max-width: 276px;
  --bs-popover-font-size: 0.765625rem;
  --bs-popover-bg: var(--bs-body-bg);
  --bs-popover-border-width: var(--bs-border-width);
  --bs-popover-border-color: var(--bs-border-color-translucent);
  --bs-popover-border-radius: var(--bs-border-radius-lg);
  --bs-popover-inner-border-radius: calc(var(--bs-border-radius-lg) - var(--bs-border-width));
  --bs-popover-box-shadow: var(--bs-box-shadow);
  --bs-popover-header-padding-x: 1rem;
  --bs-popover-header-padding-y: 0.5rem;
  --bs-popover-header-font-size: 0.875rem;
  --bs-popover-header-color: inherit;
  --bs-popover-header-bg: var(--bs-secondary-bg);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: 1rem;
  --bs-popover-body-color: var(--bs-body-color);
  --bs-popover-arrow-width: 1rem;
  --bs-popover-arrow-height: 0.5rem;
  --bs-popover-arrow-border: var(--bs-popover-border-color);
  z-index: var(--bs-popover-zindex);
  display: block;
  max-width: var(--bs-popover-max-width);
  font-family: var(--bs-font-sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 1.42857142;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  word-spacing: normal;
  line-break: auto;
  font-size: var(--bs-popover-font-size);
  word-wrap: break-word;
  background-color: var(--bs-popover-bg);
  background-clip: padding-box;
  border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-radius: var(--bs-popover-border-radius);
}
.popover .popover-arrow {
  display: block;
  width: var(--bs-popover-arrow-width);
  height: var(--bs-popover-arrow-height);
}
.popover .popover-arrow::before, .popover .popover-arrow::after {
  position: absolute;
  display: block;
  content: "";
  border-color: transparent;
  border-style: solid;
  border-width: 0;
}
.bs-popover-top > .popover-arrow, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow {
  bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-top > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before {
  bottom: 0;
  border-top-color: var(--bs-popover-arrow-border);
}
.bs-popover-top > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after {
  bottom: var(--bs-popover-border-width);
  border-top-color: var(--bs-popover-bg);
}
/* rtl:begin:ignore */
.bs-popover-end > .popover-arrow, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow {
  left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * 0.5) 0;
}
.bs-popover-end > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before {
  left: 0;
  border-right-color: var(--bs-popover-arrow-border);
}
.bs-popover-end > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after {
  left: var(--bs-popover-border-width);
  border-right-color: var(--bs-popover-bg);
}
/* rtl:end:ignore */
.bs-popover-bottom > .popover-arrow, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow {
  top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  border-width: 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-bottom > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before {
  top: 0;
  border-bottom-color: var(--bs-popover-arrow-border);
}
.bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
  top: var(--bs-popover-border-width);
  border-bottom-color: var(--bs-popover-bg);
}
.bs-popover-bottom .popover-header::before, .bs-popover-auto[data-popper-placement^=bottom] .popover-header::before {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: var(--bs-popover-arrow-width);
  margin-left: calc(-0.5 * var(--bs-popover-arrow-width));
  content: "";
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
}
/* rtl:begin:ignore */
.bs-popover-start > .popover-arrow, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow {
  right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
  width: var(--bs-popover-arrow-height);
  height: var(--bs-popover-arrow-width);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
}
.bs-popover-start > .popover-arrow::before, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before {
  right: 0;
  border-left-color: var(--bs-popover-arrow-border);
}
.bs-popover-start > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after {
  right: var(--bs-popover-border-width);
  border-left-color: var(--bs-popover-bg);
}
/* rtl:end:ignore */
.popover-header {
  padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
  margin-bottom: 0;
  font-size: var(--bs-popover-header-font-size);
  color: var(--bs-popover-header-color);
  background-color: var(--bs-popover-header-bg);
  border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
  border-top-left-radius: var(--bs-popover-inner-border-radius);
  border-top-right-radius: var(--bs-popover-inner-border-radius);
}
.popover-header:empty {
  display: none;
}
.popover-body {
  padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
  color: var(--bs-popover-body-color);
}
.carousel {
  position: relative;
}
.carousel.pointer-event {
  touch-action: pan-y;
}
.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-inner::after {
  display: block;
  clear: both;
  content: "";
}
.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-item {
    transition: none;
  }
}
.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block;
}
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
  transform: translateX(100%);
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
  transform: translateX(-100%);
}
.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {
  z-index: 1;
  opacity: 1;
}
.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-fade .active.carousel-item-start,
  .carousel-fade .active.carousel-item-end {
    transition: none;
  }
}
.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  padding: 0;
  color: #fff;
  text-align: center;
  background: none;
  border: 0;
  opacity: 0.5;
  transition: opacity 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-control-prev,
  .carousel-control-next {
    transition: none;
  }
}
.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #fff;
  text-decoration: none;
  outline: 0;
  opacity: 0.9;
}
.carousel-control-prev {
  left: 0;
}
.carousel-control-next {
  right: 0;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
}
/* rtl:options: {
  "autoRename": true,
  "stringMap":[ {
    "name"    : "prev-next",
    "search"  : "prev",
    "replace" : "next"
  } ]
} */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-right: 15%;
  margin-bottom: 1rem;
  margin-left: 15%;
}
.carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  flex: 0 1 auto;
  width: 30px;
  height: 3px;
  padding: 0;
  margin-right: 3px;
  margin-left: 3px;
  text-indent: -999px;
  cursor: pointer;
  background-color: #fff;
  background-clip: padding-box;
  border: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
@media (prefers-reduced-motion: reduce) {
  .carousel-indicators [data-bs-target] {
    transition: none;
  }
}
.carousel-indicators .active {
  opacity: 1;
}
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 15%;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}
.carousel-dark .carousel-control-prev-icon,
.carousel-dark .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
.carousel-dark .carousel-indicators [data-bs-target] {
  background-color: #000;
}
.carousel-dark .carousel-caption {
  color: #000;
}
[data-bs-theme=dark] .carousel .carousel-control-prev-icon,
[data-bs-theme=dark] .carousel .carousel-control-next-icon, [data-bs-theme=dark].carousel .carousel-control-prev-icon,
[data-bs-theme=dark].carousel .carousel-control-next-icon {
  filter: invert(1) grayscale(100);
}
[data-bs-theme=dark] .carousel .carousel-indicators [data-bs-target], [data-bs-theme=dark].carousel .carousel-indicators [data-bs-target] {
  background-color: #000;
}
[data-bs-theme=dark] .carousel .carousel-caption, [data-bs-theme=dark].carousel .carousel-caption {
  color: #000;
}
.spinner-grow,
.spinner-border {
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}
@keyframes spinner-border {
  to {
    transform: rotate(360deg) /* rtl:ignore */;
  }
}
.spinner-border {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.25em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}
.spinner-border-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
}
@keyframes spinner-grow {
  0% {
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: none;
  }
}
.spinner-grow {
  --bs-spinner-width: 2rem;
  --bs-spinner-height: 2rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-grow;
  background-color: currentcolor;
  opacity: 0;
}
.spinner-grow-sm {
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
}
@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    --bs-spinner-animation-speed: 1.5s;
  }
}
.offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm {
  --bs-offcanvas-zindex: 1045;
  --bs-offcanvas-width: 400px;
  --bs-offcanvas-height: 30vh;
  --bs-offcanvas-padding-x: 1rem;
  --bs-offcanvas-padding-y: 1rem;
  --bs-offcanvas-color: var(--bs-body-color);
  --bs-offcanvas-bg: var(--bs-body-bg);
  --bs-offcanvas-border-width: var(--bs-border-width);
  --bs-offcanvas-border-color: var(--bs-border-color-translucent);
  --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
  --bs-offcanvas-transition: transform 0.3s ease-in-out;
  --bs-offcanvas-title-line-height: 1.42857142;
}
@media (max-width: 575.98px) {
  .offcanvas-sm {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 575.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-sm {
    transition: none;
  }
}
@media (max-width: 575.98px) {
  .offcanvas-sm.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-sm.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-sm.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-sm.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-sm.showing, .offcanvas-sm.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-sm.showing, .offcanvas-sm.hiding, .offcanvas-sm.show {
    visibility: visible;
  }
}
@media (min-width: 576px) {
  .offcanvas-sm {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-sm .offcanvas-header {
    display: none;
  }
  .offcanvas-sm .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-md {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .offcanvas-md.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-md.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-md.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-md.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-md.showing, .offcanvas-md.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-md.showing, .offcanvas-md.hiding, .offcanvas-md.show {
    visibility: visible;
  }
}
@media (min-width: 768px) {
  .offcanvas-md {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-md .offcanvas-header {
    display: none;
  }
  .offcanvas-md .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-lg {
    transition: none;
  }
}
@media (max-width: 991.98px) {
  .offcanvas-lg.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-lg.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-lg.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-lg.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-lg.showing, .offcanvas-lg.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-lg.showing, .offcanvas-lg.hiding, .offcanvas-lg.show {
    visibility: visible;
  }
}
@media (min-width: 992px) {
  .offcanvas-lg {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-lg .offcanvas-header {
    display: none;
  }
  .offcanvas-lg .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1199.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xl {
    transition: none;
  }
}
@media (max-width: 1199.98px) {
  .offcanvas-xl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xl.showing, .offcanvas-xl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xl.showing, .offcanvas-xl.hiding, .offcanvas-xl.show {
    visibility: visible;
  }
}
@media (min-width: 1200px) {
  .offcanvas-xl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xl .offcanvas-header {
    display: none;
  }
  .offcanvas-xl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl {
    position: fixed;
    bottom: 0;
    z-index: var(--bs-offcanvas-zindex);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    color: var(--bs-offcanvas-color);
    visibility: hidden;
    background-color: var(--bs-offcanvas-bg);
    background-clip: padding-box;
    outline: 0;
    transition: var(--bs-offcanvas-transition);
  }
}
@media (max-width: 1399.98px) and (prefers-reduced-motion: reduce) {
  .offcanvas-xxl {
    transition: none;
  }
}
@media (max-width: 1399.98px) {
  .offcanvas-xxl.offcanvas-start {
    top: 0;
    left: 0;
    width: var(--bs-offcanvas-width);
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(-100%);
  }
  .offcanvas-xxl.offcanvas-end {
    top: 0;
    right: 0;
    width: var(--bs-offcanvas-width);
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateX(100%);
  }
  .offcanvas-xxl.offcanvas-top {
    top: 0;
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(-100%);
  }
  .offcanvas-xxl.offcanvas-bottom {
    right: 0;
    left: 0;
    height: var(--bs-offcanvas-height);
    max-height: 100%;
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%);
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.show:not(.hiding) {
    transform: none;
  }
  .offcanvas-xxl.showing, .offcanvas-xxl.hiding, .offcanvas-xxl.show {
    visibility: visible;
  }
}
@media (min-width: 1400px) {
  .offcanvas-xxl {
    --bs-offcanvas-height: auto;
    --bs-offcanvas-border-width: 0;
    background-color: transparent !important;
  }
  .offcanvas-xxl .offcanvas-header {
    display: none;
  }
  .offcanvas-xxl .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
    background-color: transparent !important;
  }
}
.offcanvas {
  position: fixed;
  bottom: 0;
  z-index: var(--bs-offcanvas-zindex);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  color: var(--bs-offcanvas-color);
  visibility: hidden;
  background-color: var(--bs-offcanvas-bg);
  background-clip: padding-box;
  outline: 0;
  transition: var(--bs-offcanvas-transition);
}
@media (prefers-reduced-motion: reduce) {
  .offcanvas {
    transition: none;
  }
}
.offcanvas.offcanvas-start {
  top: 0;
  left: 0;
  width: var(--bs-offcanvas-width);
  border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(-100%);
}
.offcanvas.offcanvas-end {
  top: 0;
  right: 0;
  width: var(--bs-offcanvas-width);
  border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateX(100%);
}
.offcanvas.offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(-100%);
}
.offcanvas.offcanvas-bottom {
  right: 0;
  left: 0;
  height: var(--bs-offcanvas-height);
  max-height: 100%;
  border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
  transform: translateY(100%);
}
.offcanvas.showing, .offcanvas.show:not(.hiding) {
  transform: none;
}
.offcanvas.showing, .offcanvas.hiding, .offcanvas.show {
  visibility: visible;
}
.offcanvas-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}
.offcanvas-backdrop.fade {
  opacity: 0;
}
.offcanvas-backdrop.show {
  opacity: 0.5;
}
.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
}
.offcanvas-header .btn-close {
  padding: calc(var(--bs-offcanvas-padding-y) * 0.5) calc(var(--bs-offcanvas-padding-x) * 0.5);
  margin-top: calc(-0.5 * var(--bs-offcanvas-padding-y));
  margin-right: calc(-0.5 * var(--bs-offcanvas-padding-x));
  margin-bottom: calc(-0.5 * var(--bs-offcanvas-padding-y));
}
.offcanvas-title {
  margin-bottom: 0;
  line-height: var(--bs-offcanvas-title-line-height);
}
.offcanvas-body {
  flex-grow: 1;
  padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
  overflow-y: auto;
}
.placeholder {
  display: inline-block;
  min-height: 1em;
  vertical-align: middle;
  cursor: wait;
  background-color: currentcolor;
  opacity: 0.5;
}
.placeholder.btn::before {
  display: inline-block;
  content: "";
}
.placeholder-xs {
  min-height: 0.6em;
}
.placeholder-sm {
  min-height: 0.8em;
}
.placeholder-lg {
  min-height: 1.2em;
}
.placeholder-glow .placeholder {
  animation: placeholder-glow 2s ease-in-out infinite;
}
@keyframes placeholder-glow {
  50% {
    opacity: 0.2;
  }
}
.placeholder-wave {
  -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
          mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
  -webkit-mask-size: 200% 100%;
          mask-size: 200% 100%;
  animation: placeholder-wave 2s linear infinite;
}
@keyframes placeholder-wave {
  100% {
    -webkit-mask-position: -200% 0%;
            mask-position: -200% 0%;
  }
}
.clearfix::after {
  display: block;
  clear: both;
  content: "";
}
.text-bg-primary {
  color: #fff !important;
  background-color: RGBA(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-secondary {
  color: #fff !important;
  background-color: RGBA(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-success {
  color: #fff !important;
  background-color: RGBA(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-info {
  color: #000 !important;
  background-color: RGBA(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-warning {
  color: #000 !important;
  background-color: RGBA(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-danger {
  color: #fff !important;
  background-color: RGBA(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-light {
  color: #000 !important;
  background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1)) !important;
}
.text-bg-dark {
  color: #fff !important;
  background-color: RGBA(var(--bs-dark-rgb), var(--bs-bg-opacity, 1)) !important;
}
.link-primary {
  color: RGBA(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-primary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-primary:hover, .link-primary:focus {
  color: RGBA(41, 98, 146, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(41, 98, 146, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(41, 98, 146, var(--bs-link-underline-opacity, 1)) !important;
}
.link-secondary {
  color: RGBA(var(--bs-secondary-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-secondary-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-secondary:hover, .link-secondary:focus {
  color: RGBA(86, 94, 100, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(86, 94, 100, var(--bs-link-underline-opacity, 1)) !important;
}
.link-success {
  color: RGBA(var(--bs-success-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-success-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-success:hover, .link-success:focus {
  color: RGBA(20, 108, 67, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(20, 108, 67, var(--bs-link-underline-opacity, 1)) !important;
}
.link-info {
  color: RGBA(var(--bs-info-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-info-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-info:hover, .link-info:focus {
  color: RGBA(61, 213, 243, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(61, 213, 243, var(--bs-link-underline-opacity, 1)) !important;
}
.link-warning {
  color: RGBA(var(--bs-warning-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-warning-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-warning:hover, .link-warning:focus {
  color: RGBA(255, 205, 57, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(255, 205, 57, var(--bs-link-underline-opacity, 1)) !important;
}
.link-danger {
  color: RGBA(var(--bs-danger-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-danger-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-danger:hover, .link-danger:focus {
  color: RGBA(176, 42, 55, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(176, 42, 55, var(--bs-link-underline-opacity, 1)) !important;
}
.link-light {
  color: RGBA(var(--bs-light-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-light-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-light:hover, .link-light:focus {
  color: RGBA(249, 250, 251, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(249, 250, 251, var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark {
  color: RGBA(var(--bs-dark-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-dark-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-dark:hover, .link-dark:focus {
  color: RGBA(26, 30, 33, var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(26, 30, 33, var(--bs-link-underline-opacity, 1)) !important;
}
.link-body-emphasis {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 1)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-body-emphasis:hover, .link-body-emphasis:focus {
  color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-opacity, 0.75)) !important;
  -webkit-text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
          text-decoration-color: RGBA(var(--bs-emphasis-color-rgb), var(--bs-link-underline-opacity, 0.75)) !important;
}
.focus-ring:focus {
  outline: 0;
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.icon-link {
  display: inline-flex;
  gap: 0.375rem;
  align-items: center;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
          text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 0.5));
  text-underline-offset: 0.25em;
  backface-visibility: hidden;
}
.icon-link > .bi {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  fill: currentcolor;
  transition: 0.2s ease-in-out transform;
}
@media (prefers-reduced-motion: reduce) {
  .icon-link > .bi {
    transition: none;
  }
}
.icon-link-hover:hover > .bi, .icon-link-hover:focus-visible > .bi {
  transform: var(--bs-icon-link-transform, translate3d(0.25em, 0, 0));
}
.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}
.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}
.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}
.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}
.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}
.sticky-bottom {
  position: sticky;
  bottom: 0;
  z-index: 1020;
}
@media (min-width: 576px) {
  .sticky-sm-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-sm-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 768px) {
  .sticky-md-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-md-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 992px) {
  .sticky-lg-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-lg-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1200px) {
  .sticky-xl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
@media (min-width: 1400px) {
  .sticky-xxl-top {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
  .sticky-xxl-bottom {
    position: sticky;
    bottom: 0;
    z-index: 1020;
  }
}
.hstack {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
}
.vstack {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-self: stretch;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vr {
  display: inline-block;
  align-self: stretch;
  width: var(--bs-border-width);
  min-height: 1em;
  background-color: currentcolor;
  opacity: 0.25;
}
.align-baseline {
  vertical-align: baseline !important;
}
.align-top {
  vertical-align: top !important;
}
.align-middle {
  vertical-align: middle !important;
}
.align-bottom {
  vertical-align: bottom !important;
}
.align-text-bottom {
  vertical-align: text-bottom !important;
}
.align-text-top {
  vertical-align: text-top !important;
}
.float-start {
  float: left !important;
}
.float-end {
  float: right !important;
}
.float-none {
  float: none !important;
}
.object-fit-contain {
  -o-object-fit: contain !important;
     object-fit: contain !important;
}
.object-fit-cover {
  -o-object-fit: cover !important;
     object-fit: cover !important;
}
.object-fit-fill {
  -o-object-fit: fill !important;
     object-fit: fill !important;
}
.object-fit-scale {
  -o-object-fit: scale-down !important;
     object-fit: scale-down !important;
}
.object-fit-none {
  -o-object-fit: none !important;
     object-fit: none !important;
}
.opacity-0 {
  opacity: 0 !important;
}
.opacity-25 {
  opacity: 0.25 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-75 {
  opacity: 0.75 !important;
}
.opacity-100 {
  opacity: 1 !important;
}
.overflow-auto {
  overflow: auto !important;
}
.overflow-hidden {
  overflow: hidden !important;
}
.overflow-visible {
  overflow: visible !important;
}
.overflow-scroll {
  overflow: scroll !important;
}
.overflow-x-auto {
  overflow-x: auto !important;
}
.overflow-x-hidden {
  overflow-x: hidden !important;
}
.overflow-x-visible {
  overflow-x: visible !important;
}
.overflow-x-scroll {
  overflow-x: scroll !important;
}
.overflow-y-auto {
  overflow-y: auto !important;
}
.overflow-y-hidden {
  overflow-y: hidden !important;
}
.overflow-y-visible {
  overflow-y: visible !important;
}
.overflow-y-scroll {
  overflow-y: scroll !important;
}
.d-inline {
  display: inline !important;
}
.d-inline-block {
  display: inline-block !important;
}
.d-block {
  display: block !important;
}
.d-grid {
  display: grid !important;
}
.d-inline-grid {
  display: inline-grid !important;
}
.d-table {
  display: table !important;
}
.d-table-row {
  display: table-row !important;
}
.d-table-cell {
  display: table-cell !important;
}
.d-flex {
  display: flex !important;
}
.d-inline-flex {
  display: inline-flex !important;
}
.d-none {
  display: none !important;
}
.shadow {
  box-shadow: var(--bs-box-shadow) !important;
}
.shadow-sm {
  box-shadow: var(--bs-box-shadow-sm) !important;
}
.shadow-lg {
  box-shadow: var(--bs-box-shadow-lg) !important;
}
.shadow-none {
  box-shadow: none !important;
}
.focus-ring-primary {
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-secondary {
  --bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-success {
  --bs-focus-ring-color: rgba(var(--bs-success-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-info {
  --bs-focus-ring-color: rgba(var(--bs-info-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-warning {
  --bs-focus-ring-color: rgba(var(--bs-warning-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-danger {
  --bs-focus-ring-color: rgba(var(--bs-danger-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-light {
  --bs-focus-ring-color: rgba(var(--bs-light-rgb), var(--bs-focus-ring-opacity));
}
.focus-ring-dark {
  --bs-focus-ring-color: rgba(var(--bs-dark-rgb), var(--bs-focus-ring-opacity));
}
.position-static {
  position: static !important;
}
.position-relative {
  position: relative !important;
}
.position-absolute {
  position: absolute !important;
}
.position-fixed {
  position: fixed !important;
}
.position-sticky {
  position: sticky !important;
}
.top-0 {
  top: 0 !important;
}
.top-50 {
  top: 50% !important;
}
.top-100 {
  top: 100% !important;
}
.bottom-0 {
  bottom: 0 !important;
}
.bottom-50 {
  bottom: 50% !important;
}
.bottom-100 {
  bottom: 100% !important;
}
.start-0 {
  left: 0 !important;
}
.start-50 {
  left: 50% !important;
}
.start-100 {
  left: 100% !important;
}
.end-0 {
  right: 0 !important;
}
.end-50 {
  right: 50% !important;
}
.end-100 {
  right: 100% !important;
}
.translate-middle {
  transform: translate(-50%, -50%) !important;
}
.translate-middle-x {
  transform: translateX(-50%) !important;
}
.translate-middle-y {
  transform: translateY(-50%) !important;
}
.border {
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-0 {
  border: 0 !important;
}
.border-top {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-top-0 {
  border-top: 0 !important;
}
.border-end {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-end-0 {
  border-right: 0 !important;
}
.border-bottom {
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-bottom-0 {
  border-bottom: 0 !important;
}
.border-start {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-start-0 {
  border-left: 0 !important;
}
.border-primary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}
.border-secondary {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-secondary-rgb), var(--bs-border-opacity)) !important;
}
.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}
.border-info {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-info-rgb), var(--bs-border-opacity)) !important;
}
.border-warning {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-warning-rgb), var(--bs-border-opacity)) !important;
}
.border-danger {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-danger-rgb), var(--bs-border-opacity)) !important;
}
.border-light {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-light-rgb), var(--bs-border-opacity)) !important;
}
.border-dark {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-dark-rgb), var(--bs-border-opacity)) !important;
}
.border-black {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-black-rgb), var(--bs-border-opacity)) !important;
}
.border-white {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-white-rgb), var(--bs-border-opacity)) !important;
}
.border-primary-subtle {
  border-color: var(--bs-primary-border-subtle) !important;
}
.border-secondary-subtle {
  border-color: var(--bs-secondary-border-subtle) !important;
}
.border-success-subtle {
  border-color: var(--bs-success-border-subtle) !important;
}
.border-info-subtle {
  border-color: var(--bs-info-border-subtle) !important;
}
.border-warning-subtle {
  border-color: var(--bs-warning-border-subtle) !important;
}
.border-danger-subtle {
  border-color: var(--bs-danger-border-subtle) !important;
}
.border-light-subtle {
  border-color: var(--bs-light-border-subtle) !important;
}
.border-dark-subtle {
  border-color: var(--bs-dark-border-subtle) !important;
}
.border-1 {
  border-width: 1px !important;
}
.border-2 {
  border-width: 2px !important;
}
.border-3 {
  border-width: 3px !important;
}
.border-4 {
  border-width: 4px !important;
}
.border-5 {
  border-width: 5px !important;
}
.border-opacity-10 {
  --bs-border-opacity: 0.1;
}
.border-opacity-25 {
  --bs-border-opacity: 0.25;
}
.border-opacity-50 {
  --bs-border-opacity: 0.5;
}
.border-opacity-75 {
  --bs-border-opacity: 0.75;
}
.border-opacity-100 {
  --bs-border-opacity: 1;
}
.w-25 {
  width: 25% !important;
}
.w-50 {
  width: 50% !important;
}
.w-75 {
  width: 75% !important;
}
.w-100 {
  width: 100% !important;
}
.w-auto {
  width: auto !important;
}
.mw-100 {
  max-width: 100% !important;
}
.vw-100 {
  width: 100vw !important;
}
.min-vw-100 {
  min-width: 100vw !important;
}
.h-25 {
  height: 25% !important;
}
.h-50 {
  height: 50% !important;
}
.h-75 {
  height: 75% !important;
}
.h-100 {
  height: 100% !important;
}
.h-auto {
  height: auto !important;
}
.mh-100 {
  max-height: 100% !important;
}
.vh-100 {
  height: 100vh !important;
}
.min-vh-100 {
  min-height: 100vh !important;
}
.flex-fill {
  flex: 1 1 auto !important;
}
.flex-row {
  flex-direction: row !important;
}
.flex-column {
  flex-direction: column !important;
}
.flex-row-reverse {
  flex-direction: row-reverse !important;
}
.flex-column-reverse {
  flex-direction: column-reverse !important;
}
.flex-grow-0 {
  flex-grow: 0 !important;
}
.flex-grow-1 {
  flex-grow: 1 !important;
}
.flex-shrink-0 {
  flex-shrink: 0 !important;
}
.flex-shrink-1 {
  flex-shrink: 1 !important;
}
.flex-wrap {
  flex-wrap: wrap !important;
}
.flex-nowrap {
  flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}
.justify-content-start {
  justify-content: flex-start !important;
}
.justify-content-end {
  justify-content: flex-end !important;
}
.justify-content-center {
  justify-content: center !important;
}
.justify-content-between {
  justify-content: space-between !important;
}
.justify-content-around {
  justify-content: space-around !important;
}
.justify-content-evenly {
  justify-content: space-evenly !important;
}
.align-items-start {
  align-items: flex-start !important;
}
.align-items-end {
  align-items: flex-end !important;
}
.align-items-center {
  align-items: center !important;
}
.align-items-baseline {
  align-items: baseline !important;
}
.align-items-stretch {
  align-items: stretch !important;
}
.align-content-start {
  align-content: flex-start !important;
}
.align-content-end {
  align-content: flex-end !important;
}
.align-content-center {
  align-content: center !important;
}
.align-content-between {
  align-content: space-between !important;
}
.align-content-around {
  align-content: space-around !important;
}
.align-content-stretch {
  align-content: stretch !important;
}
.align-self-auto {
  align-self: auto !important;
}
.align-self-start {
  align-self: flex-start !important;
}
.align-self-end {
  align-self: flex-end !important;
}
.align-self-center {
  align-self: center !important;
}
.align-self-baseline {
  align-self: baseline !important;
}
.align-self-stretch {
  align-self: stretch !important;
}
.order-first {
  order: -1 !important;
}
.order-0 {
  order: 0 !important;
}
.order-1 {
  order: 1 !important;
}
.order-2 {
  order: 2 !important;
}
.order-3 {
  order: 3 !important;
}
.order-4 {
  order: 4 !important;
}
.order-5 {
  order: 5 !important;
}
.order-last {
  order: 6 !important;
}
.m-0 {
  margin: 0 !important;
}
.m-1 {
  margin: 0.25rem !important;
}
.m-2 {
  margin: 0.5rem !important;
}
.m-3 {
  margin: 1rem !important;
}
.m-4 {
  margin: 1.5rem !important;
}
.m-5 {
  margin: 3rem !important;
}
.m-auto {
  margin: auto !important;
}
.mx-0 {
  margin-right: 0 !important;
  margin-left: 0 !important;
}
.mx-1 {
  margin-right: 0.25rem !important;
  margin-left: 0.25rem !important;
}
.mx-2 {
  margin-right: 0.5rem !important;
  margin-left: 0.5rem !important;
}
.mx-3 {
  margin-right: 1rem !important;
  margin-left: 1rem !important;
}
.mx-4 {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}
.mx-5 {
  margin-right: 3rem !important;
  margin-left: 3rem !important;
}
.mx-auto {
  margin-right: auto !important;
  margin-left: auto !important;
}
.my-0 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.my-1 {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}
.my-2 {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.my-3 {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
.my-4 {
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}
.my-5 {
  margin-top: 3rem !important;
  margin-bottom: 3rem !important;
}
.my-auto {
  margin-top: auto !important;
  margin-bottom: auto !important;
}
.mt-0 {
  margin-top: 0 !important;
}
.mt-1 {
  margin-top: 0.25rem !important;
}
.mt-2 {
  margin-top: 0.5rem !important;
}
.mt-3 {
  margin-top: 1rem !important;
}
.mt-4 {
  margin-top: 1.5rem !important;
}
.mt-5 {
  margin-top: 3rem !important;
}
.mt-auto {
  margin-top: auto !important;
}
.me-0 {
  margin-right: 0 !important;
}
.me-1 {
  margin-right: 0.25rem !important;
}
.me-2 {
  margin-right: 0.5rem !important;
}
.me-3 {
  margin-right: 1rem !important;
}
.me-4 {
  margin-right: 1.5rem !important;
}
.me-5 {
  margin-right: 3rem !important;
}
.me-auto {
  margin-right: auto !important;
}
.mb-0 {
  margin-bottom: 0 !important;
}
.mb-1 {
  margin-bottom: 0.25rem !important;
}
.mb-2 {
  margin-bottom: 0.5rem !important;
}
.mb-3 {
  margin-bottom: 1rem !important;
}
.mb-4 {
  margin-bottom: 1.5rem !important;
}
.mb-5 {
  margin-bottom: 3rem !important;
}
.mb-auto {
  margin-bottom: auto !important;
}
.ms-0 {
  margin-left: 0 !important;
}
.ms-1 {
  margin-left: 0.25rem !important;
}
.ms-2 {
  margin-left: 0.5rem !important;
}
.ms-3 {
  margin-left: 1rem !important;
}
.ms-4 {
  margin-left: 1.5rem !important;
}
.ms-5 {
  margin-left: 3rem !important;
}
.ms-auto {
  margin-left: auto !important;
}
.p-0 {
  padding: 0 !important;
}
.p-1 {
  padding: 0.25rem !important;
}
.p-2 {
  padding: 0.5rem !important;
}
.p-3 {
  padding: 1rem !important;
}
.p-4 {
  padding: 1.5rem !important;
}
.p-5 {
  padding: 3rem !important;
}
.px-0 {
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.px-1 {
  padding-right: 0.25rem !important;
  padding-left: 0.25rem !important;
}
.px-2 {
  padding-right: 0.5rem !important;
  padding-left: 0.5rem !important;
}
.px-3 {
  padding-right: 1rem !important;
  padding-left: 1rem !important;
}
.px-4 {
  padding-right: 1.5rem !important;
  padding-left: 1.5rem !important;
}
.px-5 {
  padding-right: 3rem !important;
  padding-left: 3rem !important;
}
.py-0 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
.py-1 {
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}
.py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.py-3 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}
.py-5 {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
}
.pt-0 {
  padding-top: 0 !important;
}
.pt-1 {
  padding-top: 0.25rem !important;
}
.pt-2 {
  padding-top: 0.5rem !important;
}
.pt-3 {
  padding-top: 1rem !important;
}
.pt-4 {
  padding-top: 1.5rem !important;
}
.pt-5 {
  padding-top: 3rem !important;
}
.pe-0 {
  padding-right: 0 !important;
}
.pe-1 {
  padding-right: 0.25rem !important;
}
.pe-2 {
  padding-right: 0.5rem !important;
}
.pe-3 {
  padding-right: 1rem !important;
}
.pe-4 {
  padding-right: 1.5rem !important;
}
.pe-5 {
  padding-right: 3rem !important;
}
.pb-0 {
  padding-bottom: 0 !important;
}
.pb-1 {
  padding-bottom: 0.25rem !important;
}
.pb-2 {
  padding-bottom: 0.5rem !important;
}
.pb-3 {
  padding-bottom: 1rem !important;
}
.pb-4 {
  padding-bottom: 1.5rem !important;
}
.pb-5 {
  padding-bottom: 3rem !important;
}
.ps-0 {
  padding-left: 0 !important;
}
.ps-1 {
  padding-left: 0.25rem !important;
}
.ps-2 {
  padding-left: 0.5rem !important;
}
.ps-3 {
  padding-left: 1rem !important;
}
.ps-4 {
  padding-left: 1.5rem !important;
}
.ps-5 {
  padding-left: 3rem !important;
}
.gap-0 {
  gap: 0 !important;
}
.gap-1 {
  gap: 0.25rem !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-3 {
  gap: 1rem !important;
}
.gap-4 {
  gap: 1.5rem !important;
}
.gap-5 {
  gap: 3rem !important;
}
.row-gap-0 {
  row-gap: 0 !important;
}
.row-gap-1 {
  row-gap: 0.25rem !important;
}
.row-gap-2 {
  row-gap: 0.5rem !important;
}
.row-gap-3 {
  row-gap: 1rem !important;
}
.row-gap-4 {
  row-gap: 1.5rem !important;
}
.row-gap-5 {
  row-gap: 3rem !important;
}
.column-gap-0 {
  -moz-column-gap: 0 !important;
       column-gap: 0 !important;
}
.column-gap-1 {
  -moz-column-gap: 0.25rem !important;
       column-gap: 0.25rem !important;
}
.column-gap-2 {
  -moz-column-gap: 0.5rem !important;
       column-gap: 0.5rem !important;
}
.column-gap-3 {
  -moz-column-gap: 1rem !important;
       column-gap: 1rem !important;
}
.column-gap-4 {
  -moz-column-gap: 1.5rem !important;
       column-gap: 1.5rem !important;
}
.column-gap-5 {
  -moz-column-gap: 3rem !important;
       column-gap: 3rem !important;
}
.font-monospace {
  font-family: var(--bs-font-monospace) !important;
}
.fs-1 {
  font-size: calc(1.34375rem + 1.125vw) !important;
}
.fs-2 {
  font-size: calc(1.3rem + 0.6vw) !important;
}
.fs-3 {
  font-size: calc(1.278125rem + 0.3375vw) !important;
}
.fs-4 {
  font-size: calc(1.25625rem + 0.075vw) !important;
}
.fs-5 {
  font-size: 1.09375rem !important;
}
.fs-6 {
  font-size: 0.875rem !important;
}
.fst-italic {
  font-style: italic !important;
}
.fst-normal {
  font-style: normal !important;
}
.fw-lighter {
  font-weight: lighter !important;
}
.fw-light {
  font-weight: 300 !important;
}
.fw-normal {
  font-weight: 400 !important;
}
.fw-medium {
  font-weight: 500 !important;
}
.fw-semibold {
  font-weight: 600 !important;
}
.fw-bold {
  font-weight: 700 !important;
}
.fw-bolder {
  font-weight: bolder !important;
}
.lh-1 {
  line-height: 1 !important;
}
.lh-sm {
  line-height: 1.25 !important;
}
.lh-base {
  line-height: 1.42857142 !important;
}
.lh-lg {
  line-height: 2 !important;
}
.text-start {
  text-align: left !important;
}
.text-end {
  text-align: right !important;
}
.text-center {
  text-align: center !important;
}
.text-decoration-none {
  text-decoration: none !important;
}
.text-decoration-underline {
  text-decoration: underline !important;
}
.text-decoration-line-through {
  text-decoration: line-through !important;
}
.text-lowercase {
  text-transform: lowercase !important;
}
.text-uppercase {
  text-transform: uppercase !important;
}
.text-capitalize {
  text-transform: capitalize !important;
}
.text-wrap {
  white-space: normal !important;
}
.text-nowrap {
  white-space: nowrap !important;
}
/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */
.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}
.text-secondary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
}
.text-success {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-success-rgb), var(--bs-text-opacity)) !important;
}
.text-info {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important;
}
.text-warning {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important;
}
.text-danger {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important;
}
.text-light {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important;
}
.text-dark {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}
.text-black {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-black-rgb), var(--bs-text-opacity)) !important;
}
.text-white {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-white-rgb), var(--bs-text-opacity)) !important;
}
.text-body {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
}
.text-muted {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}
.text-black-50 {
  --bs-text-opacity: 1;
  color: rgba(0, 0, 0, 0.5) !important;
}
.text-white-50 {
  --bs-text-opacity: 1;
  color: rgba(255, 255, 255, 0.5) !important;
}
.text-body-secondary {
  --bs-text-opacity: 1;
  color: var(--bs-secondary-color) !important;
}
.text-body-tertiary {
  --bs-text-opacity: 1;
  color: var(--bs-tertiary-color) !important;
}
.text-body-emphasis {
  --bs-text-opacity: 1;
  color: var(--bs-emphasis-color) !important;
}
.text-reset {
  --bs-text-opacity: 1;
  color: inherit !important;
}
.text-opacity-25 {
  --bs-text-opacity: 0.25;
}
.text-opacity-50 {
  --bs-text-opacity: 0.5;
}
.text-opacity-75 {
  --bs-text-opacity: 0.75;
}
.text-opacity-100 {
  --bs-text-opacity: 1;
}
.text-primary-emphasis {
  color: var(--bs-primary-text-emphasis) !important;
}
.text-secondary-emphasis {
  color: var(--bs-secondary-text-emphasis) !important;
}
.text-success-emphasis {
  color: var(--bs-success-text-emphasis) !important;
}
.text-info-emphasis {
  color: var(--bs-info-text-emphasis) !important;
}
.text-warning-emphasis {
  color: var(--bs-warning-text-emphasis) !important;
}
.text-danger-emphasis {
  color: var(--bs-danger-text-emphasis) !important;
}
.text-light-emphasis {
  color: var(--bs-light-text-emphasis) !important;
}
.text-dark-emphasis {
  color: var(--bs-dark-text-emphasis) !important;
}
.link-opacity-10 {
  --bs-link-opacity: 0.1;
}
.link-opacity-10-hover:hover {
  --bs-link-opacity: 0.1;
}
.link-opacity-25 {
  --bs-link-opacity: 0.25;
}
.link-opacity-25-hover:hover {
  --bs-link-opacity: 0.25;
}
.link-opacity-50 {
  --bs-link-opacity: 0.5;
}
.link-opacity-50-hover:hover {
  --bs-link-opacity: 0.5;
}
.link-opacity-75 {
  --bs-link-opacity: 0.75;
}
.link-opacity-75-hover:hover {
  --bs-link-opacity: 0.75;
}
.link-opacity-100 {
  --bs-link-opacity: 1;
}
.link-opacity-100-hover:hover {
  --bs-link-opacity: 1;
}
.link-offset-1 {
  text-underline-offset: 0.125em !important;
}
.link-offset-1-hover:hover {
  text-underline-offset: 0.125em !important;
}
.link-offset-2 {
  text-underline-offset: 0.25em !important;
}
.link-offset-2-hover:hover {
  text-underline-offset: 0.25em !important;
}
.link-offset-3 {
  text-underline-offset: 0.375em !important;
}
.link-offset-3-hover:hover {
  text-underline-offset: 0.375em !important;
}
.link-underline-primary {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-primary-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-secondary {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-secondary-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-success {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-success-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-info {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-info-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-warning {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-warning-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-danger {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-danger-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-light {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-light-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline-dark {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
          text-decoration-color: rgba(var(--bs-dark-rgb), var(--bs-link-underline-opacity)) !important;
}
.link-underline {
  --bs-link-underline-opacity: 1;
  -webkit-text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
          text-decoration-color: rgba(var(--bs-link-color-rgb), var(--bs-link-underline-opacity, 1)) !important;
}
.link-underline-opacity-0 {
  --bs-link-underline-opacity: 0;
}
.link-underline-opacity-0-hover:hover {
  --bs-link-underline-opacity: 0;
}
.link-underline-opacity-10 {
  --bs-link-underline-opacity: 0.1;
}
.link-underline-opacity-10-hover:hover {
  --bs-link-underline-opacity: 0.1;
}
.link-underline-opacity-25 {
  --bs-link-underline-opacity: 0.25;
}
.link-underline-opacity-25-hover:hover {
  --bs-link-underline-opacity: 0.25;
}
.link-underline-opacity-50 {
  --bs-link-underline-opacity: 0.5;
}
.link-underline-opacity-50-hover:hover {
  --bs-link-underline-opacity: 0.5;
}
.link-underline-opacity-75 {
  --bs-link-underline-opacity: 0.75;
}
.link-underline-opacity-75-hover:hover {
  --bs-link-underline-opacity: 0.75;
}
.link-underline-opacity-100 {
  --bs-link-underline-opacity: 1;
}
.link-underline-opacity-100-hover:hover {
  --bs-link-underline-opacity: 1;
}
.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity)) !important;
}
.bg-success {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
.bg-info {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important;
}
.bg-warning {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}
.bg-danger {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity)) !important;
}
.bg-light {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}
.bg-dark {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}
.bg-black {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important;
}
.bg-white {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important;
}
.bg-body {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}
.bg-transparent {
  --bs-bg-opacity: 1;
  background-color: transparent !important;
}
.bg-body-secondary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
}
.bg-body-tertiary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
}
.bg-opacity-10 {
  --bs-bg-opacity: 0.1;
}
.bg-opacity-25 {
  --bs-bg-opacity: 0.25;
}
.bg-opacity-50 {
  --bs-bg-opacity: 0.5;
}
.bg-opacity-75 {
  --bs-bg-opacity: 0.75;
}
.bg-opacity-100 {
  --bs-bg-opacity: 1;
}
.bg-primary-subtle {
  background-color: var(--bs-primary-bg-subtle) !important;
}
.bg-secondary-subtle {
  background-color: var(--bs-secondary-bg-subtle) !important;
}
.bg-success-subtle {
  background-color: var(--bs-success-bg-subtle) !important;
}
.bg-info-subtle {
  background-color: var(--bs-info-bg-subtle) !important;
}
.bg-warning-subtle {
  background-color: var(--bs-warning-bg-subtle) !important;
}
.bg-danger-subtle {
  background-color: var(--bs-danger-bg-subtle) !important;
}
.bg-light-subtle {
  background-color: var(--bs-light-bg-subtle) !important;
}
.bg-dark-subtle {
  background-color: var(--bs-dark-bg-subtle) !important;
}
.bg-gradient {
  background-image: var(--bs-gradient) !important;
}
.user-select-all {
  -webkit-user-select: all !important;
     -moz-user-select: all !important;
          user-select: all !important;
}
.user-select-auto {
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
}
.user-select-none {
  -webkit-user-select: none !important;
     -moz-user-select: none !important;
          user-select: none !important;
}
.pe-none {
  pointer-events: none !important;
}
.pe-auto {
  pointer-events: auto !important;
}
.rounded {
  border-radius: var(--bs-border-radius) !important;
}
.rounded-0 {
  border-radius: 0 !important;
}
.rounded-1 {
  border-radius: var(--bs-border-radius-sm) !important;
}
.rounded-2 {
  border-radius: var(--bs-border-radius) !important;
}
.rounded-3 {
  border-radius: var(--bs-border-radius-lg) !important;
}
.rounded-4 {
  border-radius: var(--bs-border-radius-xl) !important;
}
.rounded-5 {
  border-radius: var(--bs-border-radius-xxl) !important;
}
.rounded-circle {
  border-radius: 50% !important;
}
.rounded-pill {
  border-radius: var(--bs-border-radius-pill) !important;
}
.rounded-top {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}
.rounded-top-0 {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.rounded-top-1 {
  border-top-left-radius: var(--bs-border-radius-sm) !important;
  border-top-right-radius: var(--bs-border-radius-sm) !important;
}
.rounded-top-2 {
  border-top-left-radius: var(--bs-border-radius) !important;
  border-top-right-radius: var(--bs-border-radius) !important;
}
.rounded-top-3 {
  border-top-left-radius: var(--bs-border-radius-lg) !important;
  border-top-right-radius: var(--bs-border-radius-lg) !important;
}
.rounded-top-4 {
  border-top-left-radius: var(--bs-border-radius-xl) !important;
  border-top-right-radius: var(--bs-border-radius-xl) !important;
}
.rounded-top-5 {
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
}
.rounded-top-circle {
  border-top-left-radius: 50% !important;
  border-top-right-radius: 50% !important;
}
.rounded-top-pill {
  border-top-left-radius: var(--bs-border-radius-pill) !important;
  border-top-right-radius: var(--bs-border-radius-pill) !important;
}
.rounded-end {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
.rounded-end-0 {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.rounded-end-1 {
  border-top-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
}
.rounded-end-2 {
  border-top-right-radius: var(--bs-border-radius) !important;
  border-bottom-right-radius: var(--bs-border-radius) !important;
}
.rounded-end-3 {
  border-top-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
}
.rounded-end-4 {
  border-top-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
}
.rounded-end-5 {
  border-top-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
}
.rounded-end-circle {
  border-top-right-radius: 50% !important;
  border-bottom-right-radius: 50% !important;
}
.rounded-end-pill {
  border-top-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
}
.rounded-bottom {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}
.rounded-bottom-0 {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.rounded-bottom-1 {
  border-bottom-right-radius: var(--bs-border-radius-sm) !important;
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
}
.rounded-bottom-2 {
  border-bottom-right-radius: var(--bs-border-radius) !important;
  border-bottom-left-radius: var(--bs-border-radius) !important;
}
.rounded-bottom-3 {
  border-bottom-right-radius: var(--bs-border-radius-lg) !important;
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
}
.rounded-bottom-4 {
  border-bottom-right-radius: var(--bs-border-radius-xl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
}
.rounded-bottom-5 {
  border-bottom-right-radius: var(--bs-border-radius-xxl) !important;
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
}
.rounded-bottom-circle {
  border-bottom-right-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}
.rounded-bottom-pill {
  border-bottom-right-radius: var(--bs-border-radius-pill) !important;
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
}
.rounded-start {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}
.rounded-start-0 {
  border-bottom-left-radius: 0 !important;
  border-top-left-radius: 0 !important;
}
.rounded-start-1 {
  border-bottom-left-radius: var(--bs-border-radius-sm) !important;
  border-top-left-radius: var(--bs-border-radius-sm) !important;
}
.rounded-start-2 {
  border-bottom-left-radius: var(--bs-border-radius) !important;
  border-top-left-radius: var(--bs-border-radius) !important;
}
.rounded-start-3 {
  border-bottom-left-radius: var(--bs-border-radius-lg) !important;
  border-top-left-radius: var(--bs-border-radius-lg) !important;
}
.rounded-start-4 {
  border-bottom-left-radius: var(--bs-border-radius-xl) !important;
  border-top-left-radius: var(--bs-border-radius-xl) !important;
}
.rounded-start-5 {
  border-bottom-left-radius: var(--bs-border-radius-xxl) !important;
  border-top-left-radius: var(--bs-border-radius-xxl) !important;
}
.rounded-start-circle {
  border-bottom-left-radius: 50% !important;
  border-top-left-radius: 50% !important;
}
.rounded-start-pill {
  border-bottom-left-radius: var(--bs-border-radius-pill) !important;
  border-top-left-radius: var(--bs-border-radius-pill) !important;
}
.visible {
  visibility: visible !important;
}
.invisible {
  visibility: hidden !important;
}
.z-n1 {
  z-index: -1 !important;
}
.z-0 {
  z-index: 0 !important;
}
.z-1 {
  z-index: 1 !important;
}
.z-2 {
  z-index: 2 !important;
}
.z-3 {
  z-index: 3 !important;
}
@media (min-width: 576px) {
  .float-sm-start {
    float: left !important;
  }
  .float-sm-end {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
  .object-fit-sm-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-sm-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-sm-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-sm-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-sm-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-sm-inline {
    display: inline !important;
  }
  .d-sm-inline-block {
    display: inline-block !important;
  }
  .d-sm-block {
    display: block !important;
  }
  .d-sm-grid {
    display: grid !important;
  }
  .d-sm-inline-grid {
    display: inline-grid !important;
  }
  .d-sm-table {
    display: table !important;
  }
  .d-sm-table-row {
    display: table-row !important;
  }
  .d-sm-table-cell {
    display: table-cell !important;
  }
  .d-sm-flex {
    display: flex !important;
  }
  .d-sm-inline-flex {
    display: inline-flex !important;
  }
  .d-sm-none {
    display: none !important;
  }
  .flex-sm-fill {
    flex: 1 1 auto !important;
  }
  .flex-sm-row {
    flex-direction: row !important;
  }
  .flex-sm-column {
    flex-direction: column !important;
  }
  .flex-sm-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-sm-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-sm-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-sm-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-sm-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-sm-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-sm-wrap {
    flex-wrap: wrap !important;
  }
  .flex-sm-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-sm-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-sm-start {
    justify-content: flex-start !important;
  }
  .justify-content-sm-end {
    justify-content: flex-end !important;
  }
  .justify-content-sm-center {
    justify-content: center !important;
  }
  .justify-content-sm-between {
    justify-content: space-between !important;
  }
  .justify-content-sm-around {
    justify-content: space-around !important;
  }
  .justify-content-sm-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-sm-start {
    align-items: flex-start !important;
  }
  .align-items-sm-end {
    align-items: flex-end !important;
  }
  .align-items-sm-center {
    align-items: center !important;
  }
  .align-items-sm-baseline {
    align-items: baseline !important;
  }
  .align-items-sm-stretch {
    align-items: stretch !important;
  }
  .align-content-sm-start {
    align-content: flex-start !important;
  }
  .align-content-sm-end {
    align-content: flex-end !important;
  }
  .align-content-sm-center {
    align-content: center !important;
  }
  .align-content-sm-between {
    align-content: space-between !important;
  }
  .align-content-sm-around {
    align-content: space-around !important;
  }
  .align-content-sm-stretch {
    align-content: stretch !important;
  }
  .align-self-sm-auto {
    align-self: auto !important;
  }
  .align-self-sm-start {
    align-self: flex-start !important;
  }
  .align-self-sm-end {
    align-self: flex-end !important;
  }
  .align-self-sm-center {
    align-self: center !important;
  }
  .align-self-sm-baseline {
    align-self: baseline !important;
  }
  .align-self-sm-stretch {
    align-self: stretch !important;
  }
  .order-sm-first {
    order: -1 !important;
  }
  .order-sm-0 {
    order: 0 !important;
  }
  .order-sm-1 {
    order: 1 !important;
  }
  .order-sm-2 {
    order: 2 !important;
  }
  .order-sm-3 {
    order: 3 !important;
  }
  .order-sm-4 {
    order: 4 !important;
  }
  .order-sm-5 {
    order: 5 !important;
  }
  .order-sm-last {
    order: 6 !important;
  }
  .m-sm-0 {
    margin: 0 !important;
  }
  .m-sm-1 {
    margin: 0.25rem !important;
  }
  .m-sm-2 {
    margin: 0.5rem !important;
  }
  .m-sm-3 {
    margin: 1rem !important;
  }
  .m-sm-4 {
    margin: 1.5rem !important;
  }
  .m-sm-5 {
    margin: 3rem !important;
  }
  .m-sm-auto {
    margin: auto !important;
  }
  .mx-sm-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-sm-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-sm-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-sm-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-sm-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-sm-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-sm-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-sm-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-sm-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-sm-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-sm-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-sm-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-sm-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-sm-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-sm-0 {
    margin-top: 0 !important;
  }
  .mt-sm-1 {
    margin-top: 0.25rem !important;
  }
  .mt-sm-2 {
    margin-top: 0.5rem !important;
  }
  .mt-sm-3 {
    margin-top: 1rem !important;
  }
  .mt-sm-4 {
    margin-top: 1.5rem !important;
  }
  .mt-sm-5 {
    margin-top: 3rem !important;
  }
  .mt-sm-auto {
    margin-top: auto !important;
  }
  .me-sm-0 {
    margin-right: 0 !important;
  }
  .me-sm-1 {
    margin-right: 0.25rem !important;
  }
  .me-sm-2 {
    margin-right: 0.5rem !important;
  }
  .me-sm-3 {
    margin-right: 1rem !important;
  }
  .me-sm-4 {
    margin-right: 1.5rem !important;
  }
  .me-sm-5 {
    margin-right: 3rem !important;
  }
  .me-sm-auto {
    margin-right: auto !important;
  }
  .mb-sm-0 {
    margin-bottom: 0 !important;
  }
  .mb-sm-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-sm-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-sm-3 {
    margin-bottom: 1rem !important;
  }
  .mb-sm-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-sm-5 {
    margin-bottom: 3rem !important;
  }
  .mb-sm-auto {
    margin-bottom: auto !important;
  }
  .ms-sm-0 {
    margin-left: 0 !important;
  }
  .ms-sm-1 {
    margin-left: 0.25rem !important;
  }
  .ms-sm-2 {
    margin-left: 0.5rem !important;
  }
  .ms-sm-3 {
    margin-left: 1rem !important;
  }
  .ms-sm-4 {
    margin-left: 1.5rem !important;
  }
  .ms-sm-5 {
    margin-left: 3rem !important;
  }
  .ms-sm-auto {
    margin-left: auto !important;
  }
  .p-sm-0 {
    padding: 0 !important;
  }
  .p-sm-1 {
    padding: 0.25rem !important;
  }
  .p-sm-2 {
    padding: 0.5rem !important;
  }
  .p-sm-3 {
    padding: 1rem !important;
  }
  .p-sm-4 {
    padding: 1.5rem !important;
  }
  .p-sm-5 {
    padding: 3rem !important;
  }
  .px-sm-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-sm-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-sm-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-sm-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-sm-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-sm-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-sm-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-sm-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-sm-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-sm-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-sm-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-sm-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-sm-0 {
    padding-top: 0 !important;
  }
  .pt-sm-1 {
    padding-top: 0.25rem !important;
  }
  .pt-sm-2 {
    padding-top: 0.5rem !important;
  }
  .pt-sm-3 {
    padding-top: 1rem !important;
  }
  .pt-sm-4 {
    padding-top: 1.5rem !important;
  }
  .pt-sm-5 {
    padding-top: 3rem !important;
  }
  .pe-sm-0 {
    padding-right: 0 !important;
  }
  .pe-sm-1 {
    padding-right: 0.25rem !important;
  }
  .pe-sm-2 {
    padding-right: 0.5rem !important;
  }
  .pe-sm-3 {
    padding-right: 1rem !important;
  }
  .pe-sm-4 {
    padding-right: 1.5rem !important;
  }
  .pe-sm-5 {
    padding-right: 3rem !important;
  }
  .pb-sm-0 {
    padding-bottom: 0 !important;
  }
  .pb-sm-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-sm-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-sm-3 {
    padding-bottom: 1rem !important;
  }
  .pb-sm-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-sm-5 {
    padding-bottom: 3rem !important;
  }
  .ps-sm-0 {
    padding-left: 0 !important;
  }
  .ps-sm-1 {
    padding-left: 0.25rem !important;
  }
  .ps-sm-2 {
    padding-left: 0.5rem !important;
  }
  .ps-sm-3 {
    padding-left: 1rem !important;
  }
  .ps-sm-4 {
    padding-left: 1.5rem !important;
  }
  .ps-sm-5 {
    padding-left: 3rem !important;
  }
  .gap-sm-0 {
    gap: 0 !important;
  }
  .gap-sm-1 {
    gap: 0.25rem !important;
  }
  .gap-sm-2 {
    gap: 0.5rem !important;
  }
  .gap-sm-3 {
    gap: 1rem !important;
  }
  .gap-sm-4 {
    gap: 1.5rem !important;
  }
  .gap-sm-5 {
    gap: 3rem !important;
  }
  .row-gap-sm-0 {
    row-gap: 0 !important;
  }
  .row-gap-sm-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-sm-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-sm-3 {
    row-gap: 1rem !important;
  }
  .row-gap-sm-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-sm-5 {
    row-gap: 3rem !important;
  }
  .column-gap-sm-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-sm-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-sm-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-sm-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-sm-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-sm-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-sm-start {
    text-align: left !important;
  }
  .text-sm-end {
    text-align: right !important;
  }
  .text-sm-center {
    text-align: center !important;
  }
}
@media (min-width: 768px) {
  .float-md-start {
    float: left !important;
  }
  .float-md-end {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
  .object-fit-md-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-md-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-md-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-md-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-md-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-grid {
    display: grid !important;
  }
  .d-md-inline-grid {
    display: inline-grid !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: flex !important;
  }
  .d-md-inline-flex {
    display: inline-flex !important;
  }
  .d-md-none {
    display: none !important;
  }
  .flex-md-fill {
    flex: 1 1 auto !important;
  }
  .flex-md-row {
    flex-direction: row !important;
  }
  .flex-md-column {
    flex-direction: column !important;
  }
  .flex-md-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-md-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-md-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-md-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-md-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-md-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-md-wrap {
    flex-wrap: wrap !important;
  }
  .flex-md-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-md-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-md-start {
    justify-content: flex-start !important;
  }
  .justify-content-md-end {
    justify-content: flex-end !important;
  }
  .justify-content-md-center {
    justify-content: center !important;
  }
  .justify-content-md-between {
    justify-content: space-between !important;
  }
  .justify-content-md-around {
    justify-content: space-around !important;
  }
  .justify-content-md-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-md-start {
    align-items: flex-start !important;
  }
  .align-items-md-end {
    align-items: flex-end !important;
  }
  .align-items-md-center {
    align-items: center !important;
  }
  .align-items-md-baseline {
    align-items: baseline !important;
  }
  .align-items-md-stretch {
    align-items: stretch !important;
  }
  .align-content-md-start {
    align-content: flex-start !important;
  }
  .align-content-md-end {
    align-content: flex-end !important;
  }
  .align-content-md-center {
    align-content: center !important;
  }
  .align-content-md-between {
    align-content: space-between !important;
  }
  .align-content-md-around {
    align-content: space-around !important;
  }
  .align-content-md-stretch {
    align-content: stretch !important;
  }
  .align-self-md-auto {
    align-self: auto !important;
  }
  .align-self-md-start {
    align-self: flex-start !important;
  }
  .align-self-md-end {
    align-self: flex-end !important;
  }
  .align-self-md-center {
    align-self: center !important;
  }
  .align-self-md-baseline {
    align-self: baseline !important;
  }
  .align-self-md-stretch {
    align-self: stretch !important;
  }
  .order-md-first {
    order: -1 !important;
  }
  .order-md-0 {
    order: 0 !important;
  }
  .order-md-1 {
    order: 1 !important;
  }
  .order-md-2 {
    order: 2 !important;
  }
  .order-md-3 {
    order: 3 !important;
  }
  .order-md-4 {
    order: 4 !important;
  }
  .order-md-5 {
    order: 5 !important;
  }
  .order-md-last {
    order: 6 !important;
  }
  .m-md-0 {
    margin: 0 !important;
  }
  .m-md-1 {
    margin: 0.25rem !important;
  }
  .m-md-2 {
    margin: 0.5rem !important;
  }
  .m-md-3 {
    margin: 1rem !important;
  }
  .m-md-4 {
    margin: 1.5rem !important;
  }
  .m-md-5 {
    margin: 3rem !important;
  }
  .m-md-auto {
    margin: auto !important;
  }
  .mx-md-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-md-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-md-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-md-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-md-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-md-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-md-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-md-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-md-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-md-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-md-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-md-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-md-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-md-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-md-0 {
    margin-top: 0 !important;
  }
  .mt-md-1 {
    margin-top: 0.25rem !important;
  }
  .mt-md-2 {
    margin-top: 0.5rem !important;
  }
  .mt-md-3 {
    margin-top: 1rem !important;
  }
  .mt-md-4 {
    margin-top: 1.5rem !important;
  }
  .mt-md-5 {
    margin-top: 3rem !important;
  }
  .mt-md-auto {
    margin-top: auto !important;
  }
  .me-md-0 {
    margin-right: 0 !important;
  }
  .me-md-1 {
    margin-right: 0.25rem !important;
  }
  .me-md-2 {
    margin-right: 0.5rem !important;
  }
  .me-md-3 {
    margin-right: 1rem !important;
  }
  .me-md-4 {
    margin-right: 1.5rem !important;
  }
  .me-md-5 {
    margin-right: 3rem !important;
  }
  .me-md-auto {
    margin-right: auto !important;
  }
  .mb-md-0 {
    margin-bottom: 0 !important;
  }
  .mb-md-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-md-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-md-3 {
    margin-bottom: 1rem !important;
  }
  .mb-md-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-md-5 {
    margin-bottom: 3rem !important;
  }
  .mb-md-auto {
    margin-bottom: auto !important;
  }
  .ms-md-0 {
    margin-left: 0 !important;
  }
  .ms-md-1 {
    margin-left: 0.25rem !important;
  }
  .ms-md-2 {
    margin-left: 0.5rem !important;
  }
  .ms-md-3 {
    margin-left: 1rem !important;
  }
  .ms-md-4 {
    margin-left: 1.5rem !important;
  }
  .ms-md-5 {
    margin-left: 3rem !important;
  }
  .ms-md-auto {
    margin-left: auto !important;
  }
  .p-md-0 {
    padding: 0 !important;
  }
  .p-md-1 {
    padding: 0.25rem !important;
  }
  .p-md-2 {
    padding: 0.5rem !important;
  }
  .p-md-3 {
    padding: 1rem !important;
  }
  .p-md-4 {
    padding: 1.5rem !important;
  }
  .p-md-5 {
    padding: 3rem !important;
  }
  .px-md-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-md-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-md-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-md-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-md-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-md-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-md-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-md-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-md-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-md-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-md-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-md-0 {
    padding-top: 0 !important;
  }
  .pt-md-1 {
    padding-top: 0.25rem !important;
  }
  .pt-md-2 {
    padding-top: 0.5rem !important;
  }
  .pt-md-3 {
    padding-top: 1rem !important;
  }
  .pt-md-4 {
    padding-top: 1.5rem !important;
  }
  .pt-md-5 {
    padding-top: 3rem !important;
  }
  .pe-md-0 {
    padding-right: 0 !important;
  }
  .pe-md-1 {
    padding-right: 0.25rem !important;
  }
  .pe-md-2 {
    padding-right: 0.5rem !important;
  }
  .pe-md-3 {
    padding-right: 1rem !important;
  }
  .pe-md-4 {
    padding-right: 1.5rem !important;
  }
  .pe-md-5 {
    padding-right: 3rem !important;
  }
  .pb-md-0 {
    padding-bottom: 0 !important;
  }
  .pb-md-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-md-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-md-3 {
    padding-bottom: 1rem !important;
  }
  .pb-md-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-md-5 {
    padding-bottom: 3rem !important;
  }
  .ps-md-0 {
    padding-left: 0 !important;
  }
  .ps-md-1 {
    padding-left: 0.25rem !important;
  }
  .ps-md-2 {
    padding-left: 0.5rem !important;
  }
  .ps-md-3 {
    padding-left: 1rem !important;
  }
  .ps-md-4 {
    padding-left: 1.5rem !important;
  }
  .ps-md-5 {
    padding-left: 3rem !important;
  }
  .gap-md-0 {
    gap: 0 !important;
  }
  .gap-md-1 {
    gap: 0.25rem !important;
  }
  .gap-md-2 {
    gap: 0.5rem !important;
  }
  .gap-md-3 {
    gap: 1rem !important;
  }
  .gap-md-4 {
    gap: 1.5rem !important;
  }
  .gap-md-5 {
    gap: 3rem !important;
  }
  .row-gap-md-0 {
    row-gap: 0 !important;
  }
  .row-gap-md-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-md-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-md-3 {
    row-gap: 1rem !important;
  }
  .row-gap-md-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-md-5 {
    row-gap: 3rem !important;
  }
  .column-gap-md-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-md-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-md-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-md-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-md-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-md-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-md-start {
    text-align: left !important;
  }
  .text-md-end {
    text-align: right !important;
  }
  .text-md-center {
    text-align: center !important;
  }
}
@media (min-width: 992px) {
  .float-lg-start {
    float: left !important;
  }
  .float-lg-end {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
  .object-fit-lg-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-lg-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-lg-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-lg-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-lg-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-lg-inline {
    display: inline !important;
  }
  .d-lg-inline-block {
    display: inline-block !important;
  }
  .d-lg-block {
    display: block !important;
  }
  .d-lg-grid {
    display: grid !important;
  }
  .d-lg-inline-grid {
    display: inline-grid !important;
  }
  .d-lg-table {
    display: table !important;
  }
  .d-lg-table-row {
    display: table-row !important;
  }
  .d-lg-table-cell {
    display: table-cell !important;
  }
  .d-lg-flex {
    display: flex !important;
  }
  .d-lg-inline-flex {
    display: inline-flex !important;
  }
  .d-lg-none {
    display: none !important;
  }
  .flex-lg-fill {
    flex: 1 1 auto !important;
  }
  .flex-lg-row {
    flex-direction: row !important;
  }
  .flex-lg-column {
    flex-direction: column !important;
  }
  .flex-lg-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-lg-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-lg-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-lg-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-lg-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-lg-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-lg-wrap {
    flex-wrap: wrap !important;
  }
  .flex-lg-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-lg-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-lg-start {
    justify-content: flex-start !important;
  }
  .justify-content-lg-end {
    justify-content: flex-end !important;
  }
  .justify-content-lg-center {
    justify-content: center !important;
  }
  .justify-content-lg-between {
    justify-content: space-between !important;
  }
  .justify-content-lg-around {
    justify-content: space-around !important;
  }
  .justify-content-lg-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-lg-start {
    align-items: flex-start !important;
  }
  .align-items-lg-end {
    align-items: flex-end !important;
  }
  .align-items-lg-center {
    align-items: center !important;
  }
  .align-items-lg-baseline {
    align-items: baseline !important;
  }
  .align-items-lg-stretch {
    align-items: stretch !important;
  }
  .align-content-lg-start {
    align-content: flex-start !important;
  }
  .align-content-lg-end {
    align-content: flex-end !important;
  }
  .align-content-lg-center {
    align-content: center !important;
  }
  .align-content-lg-between {
    align-content: space-between !important;
  }
  .align-content-lg-around {
    align-content: space-around !important;
  }
  .align-content-lg-stretch {
    align-content: stretch !important;
  }
  .align-self-lg-auto {
    align-self: auto !important;
  }
  .align-self-lg-start {
    align-self: flex-start !important;
  }
  .align-self-lg-end {
    align-self: flex-end !important;
  }
  .align-self-lg-center {
    align-self: center !important;
  }
  .align-self-lg-baseline {
    align-self: baseline !important;
  }
  .align-self-lg-stretch {
    align-self: stretch !important;
  }
  .order-lg-first {
    order: -1 !important;
  }
  .order-lg-0 {
    order: 0 !important;
  }
  .order-lg-1 {
    order: 1 !important;
  }
  .order-lg-2 {
    order: 2 !important;
  }
  .order-lg-3 {
    order: 3 !important;
  }
  .order-lg-4 {
    order: 4 !important;
  }
  .order-lg-5 {
    order: 5 !important;
  }
  .order-lg-last {
    order: 6 !important;
  }
  .m-lg-0 {
    margin: 0 !important;
  }
  .m-lg-1 {
    margin: 0.25rem !important;
  }
  .m-lg-2 {
    margin: 0.5rem !important;
  }
  .m-lg-3 {
    margin: 1rem !important;
  }
  .m-lg-4 {
    margin: 1.5rem !important;
  }
  .m-lg-5 {
    margin: 3rem !important;
  }
  .m-lg-auto {
    margin: auto !important;
  }
  .mx-lg-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-lg-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-lg-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-lg-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-lg-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-lg-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-lg-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-lg-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-lg-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-lg-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-lg-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-lg-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-lg-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-lg-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-lg-0 {
    margin-top: 0 !important;
  }
  .mt-lg-1 {
    margin-top: 0.25rem !important;
  }
  .mt-lg-2 {
    margin-top: 0.5rem !important;
  }
  .mt-lg-3 {
    margin-top: 1rem !important;
  }
  .mt-lg-4 {
    margin-top: 1.5rem !important;
  }
  .mt-lg-5 {
    margin-top: 3rem !important;
  }
  .mt-lg-auto {
    margin-top: auto !important;
  }
  .me-lg-0 {
    margin-right: 0 !important;
  }
  .me-lg-1 {
    margin-right: 0.25rem !important;
  }
  .me-lg-2 {
    margin-right: 0.5rem !important;
  }
  .me-lg-3 {
    margin-right: 1rem !important;
  }
  .me-lg-4 {
    margin-right: 1.5rem !important;
  }
  .me-lg-5 {
    margin-right: 3rem !important;
  }
  .me-lg-auto {
    margin-right: auto !important;
  }
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
  .mb-lg-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-lg-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-lg-3 {
    margin-bottom: 1rem !important;
  }
  .mb-lg-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-lg-5 {
    margin-bottom: 3rem !important;
  }
  .mb-lg-auto {
    margin-bottom: auto !important;
  }
  .ms-lg-0 {
    margin-left: 0 !important;
  }
  .ms-lg-1 {
    margin-left: 0.25rem !important;
  }
  .ms-lg-2 {
    margin-left: 0.5rem !important;
  }
  .ms-lg-3 {
    margin-left: 1rem !important;
  }
  .ms-lg-4 {
    margin-left: 1.5rem !important;
  }
  .ms-lg-5 {
    margin-left: 3rem !important;
  }
  .ms-lg-auto {
    margin-left: auto !important;
  }
  .p-lg-0 {
    padding: 0 !important;
  }
  .p-lg-1 {
    padding: 0.25rem !important;
  }
  .p-lg-2 {
    padding: 0.5rem !important;
  }
  .p-lg-3 {
    padding: 1rem !important;
  }
  .p-lg-4 {
    padding: 1.5rem !important;
  }
  .p-lg-5 {
    padding: 3rem !important;
  }
  .px-lg-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-lg-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-lg-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-lg-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-lg-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-lg-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-lg-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-lg-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-lg-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-lg-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-lg-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-lg-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-lg-0 {
    padding-top: 0 !important;
  }
  .pt-lg-1 {
    padding-top: 0.25rem !important;
  }
  .pt-lg-2 {
    padding-top: 0.5rem !important;
  }
  .pt-lg-3 {
    padding-top: 1rem !important;
  }
  .pt-lg-4 {
    padding-top: 1.5rem !important;
  }
  .pt-lg-5 {
    padding-top: 3rem !important;
  }
  .pe-lg-0 {
    padding-right: 0 !important;
  }
  .pe-lg-1 {
    padding-right: 0.25rem !important;
  }
  .pe-lg-2 {
    padding-right: 0.5rem !important;
  }
  .pe-lg-3 {
    padding-right: 1rem !important;
  }
  .pe-lg-4 {
    padding-right: 1.5rem !important;
  }
  .pe-lg-5 {
    padding-right: 3rem !important;
  }
  .pb-lg-0 {
    padding-bottom: 0 !important;
  }
  .pb-lg-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-lg-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-lg-3 {
    padding-bottom: 1rem !important;
  }
  .pb-lg-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-lg-5 {
    padding-bottom: 3rem !important;
  }
  .ps-lg-0 {
    padding-left: 0 !important;
  }
  .ps-lg-1 {
    padding-left: 0.25rem !important;
  }
  .ps-lg-2 {
    padding-left: 0.5rem !important;
  }
  .ps-lg-3 {
    padding-left: 1rem !important;
  }
  .ps-lg-4 {
    padding-left: 1.5rem !important;
  }
  .ps-lg-5 {
    padding-left: 3rem !important;
  }
  .gap-lg-0 {
    gap: 0 !important;
  }
  .gap-lg-1 {
    gap: 0.25rem !important;
  }
  .gap-lg-2 {
    gap: 0.5rem !important;
  }
  .gap-lg-3 {
    gap: 1rem !important;
  }
  .gap-lg-4 {
    gap: 1.5rem !important;
  }
  .gap-lg-5 {
    gap: 3rem !important;
  }
  .row-gap-lg-0 {
    row-gap: 0 !important;
  }
  .row-gap-lg-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-lg-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-lg-3 {
    row-gap: 1rem !important;
  }
  .row-gap-lg-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-lg-5 {
    row-gap: 3rem !important;
  }
  .column-gap-lg-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-lg-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-lg-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-lg-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-lg-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-lg-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
  .text-lg-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .float-xl-start {
    float: left !important;
  }
  .float-xl-end {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
  .object-fit-xl-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-xl-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-xl-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-xl-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-xl-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-xl-inline {
    display: inline !important;
  }
  .d-xl-inline-block {
    display: inline-block !important;
  }
  .d-xl-block {
    display: block !important;
  }
  .d-xl-grid {
    display: grid !important;
  }
  .d-xl-inline-grid {
    display: inline-grid !important;
  }
  .d-xl-table {
    display: table !important;
  }
  .d-xl-table-row {
    display: table-row !important;
  }
  .d-xl-table-cell {
    display: table-cell !important;
  }
  .d-xl-flex {
    display: flex !important;
  }
  .d-xl-inline-flex {
    display: inline-flex !important;
  }
  .d-xl-none {
    display: none !important;
  }
  .flex-xl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xl-row {
    flex-direction: row !important;
  }
  .flex-xl-column {
    flex-direction: column !important;
  }
  .flex-xl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xl-center {
    justify-content: center !important;
  }
  .justify-content-xl-between {
    justify-content: space-between !important;
  }
  .justify-content-xl-around {
    justify-content: space-around !important;
  }
  .justify-content-xl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xl-start {
    align-items: flex-start !important;
  }
  .align-items-xl-end {
    align-items: flex-end !important;
  }
  .align-items-xl-center {
    align-items: center !important;
  }
  .align-items-xl-baseline {
    align-items: baseline !important;
  }
  .align-items-xl-stretch {
    align-items: stretch !important;
  }
  .align-content-xl-start {
    align-content: flex-start !important;
  }
  .align-content-xl-end {
    align-content: flex-end !important;
  }
  .align-content-xl-center {
    align-content: center !important;
  }
  .align-content-xl-between {
    align-content: space-between !important;
  }
  .align-content-xl-around {
    align-content: space-around !important;
  }
  .align-content-xl-stretch {
    align-content: stretch !important;
  }
  .align-self-xl-auto {
    align-self: auto !important;
  }
  .align-self-xl-start {
    align-self: flex-start !important;
  }
  .align-self-xl-end {
    align-self: flex-end !important;
  }
  .align-self-xl-center {
    align-self: center !important;
  }
  .align-self-xl-baseline {
    align-self: baseline !important;
  }
  .align-self-xl-stretch {
    align-self: stretch !important;
  }
  .order-xl-first {
    order: -1 !important;
  }
  .order-xl-0 {
    order: 0 !important;
  }
  .order-xl-1 {
    order: 1 !important;
  }
  .order-xl-2 {
    order: 2 !important;
  }
  .order-xl-3 {
    order: 3 !important;
  }
  .order-xl-4 {
    order: 4 !important;
  }
  .order-xl-5 {
    order: 5 !important;
  }
  .order-xl-last {
    order: 6 !important;
  }
  .m-xl-0 {
    margin: 0 !important;
  }
  .m-xl-1 {
    margin: 0.25rem !important;
  }
  .m-xl-2 {
    margin: 0.5rem !important;
  }
  .m-xl-3 {
    margin: 1rem !important;
  }
  .m-xl-4 {
    margin: 1.5rem !important;
  }
  .m-xl-5 {
    margin: 3rem !important;
  }
  .m-xl-auto {
    margin: auto !important;
  }
  .mx-xl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xl-0 {
    margin-top: 0 !important;
  }
  .mt-xl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xl-3 {
    margin-top: 1rem !important;
  }
  .mt-xl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xl-5 {
    margin-top: 3rem !important;
  }
  .mt-xl-auto {
    margin-top: auto !important;
  }
  .me-xl-0 {
    margin-right: 0 !important;
  }
  .me-xl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xl-3 {
    margin-right: 1rem !important;
  }
  .me-xl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xl-5 {
    margin-right: 3rem !important;
  }
  .me-xl-auto {
    margin-right: auto !important;
  }
  .mb-xl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xl-auto {
    margin-bottom: auto !important;
  }
  .ms-xl-0 {
    margin-left: 0 !important;
  }
  .ms-xl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xl-3 {
    margin-left: 1rem !important;
  }
  .ms-xl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xl-5 {
    margin-left: 3rem !important;
  }
  .ms-xl-auto {
    margin-left: auto !important;
  }
  .p-xl-0 {
    padding: 0 !important;
  }
  .p-xl-1 {
    padding: 0.25rem !important;
  }
  .p-xl-2 {
    padding: 0.5rem !important;
  }
  .p-xl-3 {
    padding: 1rem !important;
  }
  .p-xl-4 {
    padding: 1.5rem !important;
  }
  .p-xl-5 {
    padding: 3rem !important;
  }
  .px-xl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xl-0 {
    padding-top: 0 !important;
  }
  .pt-xl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xl-3 {
    padding-top: 1rem !important;
  }
  .pt-xl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xl-5 {
    padding-top: 3rem !important;
  }
  .pe-xl-0 {
    padding-right: 0 !important;
  }
  .pe-xl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xl-3 {
    padding-right: 1rem !important;
  }
  .pe-xl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xl-5 {
    padding-right: 3rem !important;
  }
  .pb-xl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xl-0 {
    padding-left: 0 !important;
  }
  .ps-xl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xl-3 {
    padding-left: 1rem !important;
  }
  .ps-xl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xl-5 {
    padding-left: 3rem !important;
  }
  .gap-xl-0 {
    gap: 0 !important;
  }
  .gap-xl-1 {
    gap: 0.25rem !important;
  }
  .gap-xl-2 {
    gap: 0.5rem !important;
  }
  .gap-xl-3 {
    gap: 1rem !important;
  }
  .gap-xl-4 {
    gap: 1.5rem !important;
  }
  .gap-xl-5 {
    gap: 3rem !important;
  }
  .row-gap-xl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xl-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-xl-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-xl-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-xl-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-xl-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-xl-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-xl-start {
    text-align: left !important;
  }
  .text-xl-end {
    text-align: right !important;
  }
  .text-xl-center {
    text-align: center !important;
  }
}
@media (min-width: 1400px) {
  .float-xxl-start {
    float: left !important;
  }
  .float-xxl-end {
    float: right !important;
  }
  .float-xxl-none {
    float: none !important;
  }
  .object-fit-xxl-contain {
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .object-fit-xxl-cover {
    -o-object-fit: cover !important;
       object-fit: cover !important;
  }
  .object-fit-xxl-fill {
    -o-object-fit: fill !important;
       object-fit: fill !important;
  }
  .object-fit-xxl-scale {
    -o-object-fit: scale-down !important;
       object-fit: scale-down !important;
  }
  .object-fit-xxl-none {
    -o-object-fit: none !important;
       object-fit: none !important;
  }
  .d-xxl-inline {
    display: inline !important;
  }
  .d-xxl-inline-block {
    display: inline-block !important;
  }
  .d-xxl-block {
    display: block !important;
  }
  .d-xxl-grid {
    display: grid !important;
  }
  .d-xxl-inline-grid {
    display: inline-grid !important;
  }
  .d-xxl-table {
    display: table !important;
  }
  .d-xxl-table-row {
    display: table-row !important;
  }
  .d-xxl-table-cell {
    display: table-cell !important;
  }
  .d-xxl-flex {
    display: flex !important;
  }
  .d-xxl-inline-flex {
    display: inline-flex !important;
  }
  .d-xxl-none {
    display: none !important;
  }
  .flex-xxl-fill {
    flex: 1 1 auto !important;
  }
  .flex-xxl-row {
    flex-direction: row !important;
  }
  .flex-xxl-column {
    flex-direction: column !important;
  }
  .flex-xxl-row-reverse {
    flex-direction: row-reverse !important;
  }
  .flex-xxl-column-reverse {
    flex-direction: column-reverse !important;
  }
  .flex-xxl-grow-0 {
    flex-grow: 0 !important;
  }
  .flex-xxl-grow-1 {
    flex-grow: 1 !important;
  }
  .flex-xxl-shrink-0 {
    flex-shrink: 0 !important;
  }
  .flex-xxl-shrink-1 {
    flex-shrink: 1 !important;
  }
  .flex-xxl-wrap {
    flex-wrap: wrap !important;
  }
  .flex-xxl-nowrap {
    flex-wrap: nowrap !important;
  }
  .flex-xxl-wrap-reverse {
    flex-wrap: wrap-reverse !important;
  }
  .justify-content-xxl-start {
    justify-content: flex-start !important;
  }
  .justify-content-xxl-end {
    justify-content: flex-end !important;
  }
  .justify-content-xxl-center {
    justify-content: center !important;
  }
  .justify-content-xxl-between {
    justify-content: space-between !important;
  }
  .justify-content-xxl-around {
    justify-content: space-around !important;
  }
  .justify-content-xxl-evenly {
    justify-content: space-evenly !important;
  }
  .align-items-xxl-start {
    align-items: flex-start !important;
  }
  .align-items-xxl-end {
    align-items: flex-end !important;
  }
  .align-items-xxl-center {
    align-items: center !important;
  }
  .align-items-xxl-baseline {
    align-items: baseline !important;
  }
  .align-items-xxl-stretch {
    align-items: stretch !important;
  }
  .align-content-xxl-start {
    align-content: flex-start !important;
  }
  .align-content-xxl-end {
    align-content: flex-end !important;
  }
  .align-content-xxl-center {
    align-content: center !important;
  }
  .align-content-xxl-between {
    align-content: space-between !important;
  }
  .align-content-xxl-around {
    align-content: space-around !important;
  }
  .align-content-xxl-stretch {
    align-content: stretch !important;
  }
  .align-self-xxl-auto {
    align-self: auto !important;
  }
  .align-self-xxl-start {
    align-self: flex-start !important;
  }
  .align-self-xxl-end {
    align-self: flex-end !important;
  }
  .align-self-xxl-center {
    align-self: center !important;
  }
  .align-self-xxl-baseline {
    align-self: baseline !important;
  }
  .align-self-xxl-stretch {
    align-self: stretch !important;
  }
  .order-xxl-first {
    order: -1 !important;
  }
  .order-xxl-0 {
    order: 0 !important;
  }
  .order-xxl-1 {
    order: 1 !important;
  }
  .order-xxl-2 {
    order: 2 !important;
  }
  .order-xxl-3 {
    order: 3 !important;
  }
  .order-xxl-4 {
    order: 4 !important;
  }
  .order-xxl-5 {
    order: 5 !important;
  }
  .order-xxl-last {
    order: 6 !important;
  }
  .m-xxl-0 {
    margin: 0 !important;
  }
  .m-xxl-1 {
    margin: 0.25rem !important;
  }
  .m-xxl-2 {
    margin: 0.5rem !important;
  }
  .m-xxl-3 {
    margin: 1rem !important;
  }
  .m-xxl-4 {
    margin: 1.5rem !important;
  }
  .m-xxl-5 {
    margin: 3rem !important;
  }
  .m-xxl-auto {
    margin: auto !important;
  }
  .mx-xxl-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  .mx-xxl-1 {
    margin-right: 0.25rem !important;
    margin-left: 0.25rem !important;
  }
  .mx-xxl-2 {
    margin-right: 0.5rem !important;
    margin-left: 0.5rem !important;
  }
  .mx-xxl-3 {
    margin-right: 1rem !important;
    margin-left: 1rem !important;
  }
  .mx-xxl-4 {
    margin-right: 1.5rem !important;
    margin-left: 1.5rem !important;
  }
  .mx-xxl-5 {
    margin-right: 3rem !important;
    margin-left: 3rem !important;
  }
  .mx-xxl-auto {
    margin-right: auto !important;
    margin-left: auto !important;
  }
  .my-xxl-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .my-xxl-1 {
    margin-top: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .my-xxl-2 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .my-xxl-3 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }
  .my-xxl-4 {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .my-xxl-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
  }
  .my-xxl-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mt-xxl-0 {
    margin-top: 0 !important;
  }
  .mt-xxl-1 {
    margin-top: 0.25rem !important;
  }
  .mt-xxl-2 {
    margin-top: 0.5rem !important;
  }
  .mt-xxl-3 {
    margin-top: 1rem !important;
  }
  .mt-xxl-4 {
    margin-top: 1.5rem !important;
  }
  .mt-xxl-5 {
    margin-top: 3rem !important;
  }
  .mt-xxl-auto {
    margin-top: auto !important;
  }
  .me-xxl-0 {
    margin-right: 0 !important;
  }
  .me-xxl-1 {
    margin-right: 0.25rem !important;
  }
  .me-xxl-2 {
    margin-right: 0.5rem !important;
  }
  .me-xxl-3 {
    margin-right: 1rem !important;
  }
  .me-xxl-4 {
    margin-right: 1.5rem !important;
  }
  .me-xxl-5 {
    margin-right: 3rem !important;
  }
  .me-xxl-auto {
    margin-right: auto !important;
  }
  .mb-xxl-0 {
    margin-bottom: 0 !important;
  }
  .mb-xxl-1 {
    margin-bottom: 0.25rem !important;
  }
  .mb-xxl-2 {
    margin-bottom: 0.5rem !important;
  }
  .mb-xxl-3 {
    margin-bottom: 1rem !important;
  }
  .mb-xxl-4 {
    margin-bottom: 1.5rem !important;
  }
  .mb-xxl-5 {
    margin-bottom: 3rem !important;
  }
  .mb-xxl-auto {
    margin-bottom: auto !important;
  }
  .ms-xxl-0 {
    margin-left: 0 !important;
  }
  .ms-xxl-1 {
    margin-left: 0.25rem !important;
  }
  .ms-xxl-2 {
    margin-left: 0.5rem !important;
  }
  .ms-xxl-3 {
    margin-left: 1rem !important;
  }
  .ms-xxl-4 {
    margin-left: 1.5rem !important;
  }
  .ms-xxl-5 {
    margin-left: 3rem !important;
  }
  .ms-xxl-auto {
    margin-left: auto !important;
  }
  .p-xxl-0 {
    padding: 0 !important;
  }
  .p-xxl-1 {
    padding: 0.25rem !important;
  }
  .p-xxl-2 {
    padding: 0.5rem !important;
  }
  .p-xxl-3 {
    padding: 1rem !important;
  }
  .p-xxl-4 {
    padding: 1.5rem !important;
  }
  .p-xxl-5 {
    padding: 3rem !important;
  }
  .px-xxl-0 {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
  .px-xxl-1 {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
  }
  .px-xxl-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
  }
  .px-xxl-3 {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
  }
  .px-xxl-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
  }
  .px-xxl-5 {
    padding-right: 3rem !important;
    padding-left: 3rem !important;
  }
  .py-xxl-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .py-xxl-1 {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .py-xxl-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }
  .py-xxl-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }
  .py-xxl-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  .py-xxl-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .pt-xxl-0 {
    padding-top: 0 !important;
  }
  .pt-xxl-1 {
    padding-top: 0.25rem !important;
  }
  .pt-xxl-2 {
    padding-top: 0.5rem !important;
  }
  .pt-xxl-3 {
    padding-top: 1rem !important;
  }
  .pt-xxl-4 {
    padding-top: 1.5rem !important;
  }
  .pt-xxl-5 {
    padding-top: 3rem !important;
  }
  .pe-xxl-0 {
    padding-right: 0 !important;
  }
  .pe-xxl-1 {
    padding-right: 0.25rem !important;
  }
  .pe-xxl-2 {
    padding-right: 0.5rem !important;
  }
  .pe-xxl-3 {
    padding-right: 1rem !important;
  }
  .pe-xxl-4 {
    padding-right: 1.5rem !important;
  }
  .pe-xxl-5 {
    padding-right: 3rem !important;
  }
  .pb-xxl-0 {
    padding-bottom: 0 !important;
  }
  .pb-xxl-1 {
    padding-bottom: 0.25rem !important;
  }
  .pb-xxl-2 {
    padding-bottom: 0.5rem !important;
  }
  .pb-xxl-3 {
    padding-bottom: 1rem !important;
  }
  .pb-xxl-4 {
    padding-bottom: 1.5rem !important;
  }
  .pb-xxl-5 {
    padding-bottom: 3rem !important;
  }
  .ps-xxl-0 {
    padding-left: 0 !important;
  }
  .ps-xxl-1 {
    padding-left: 0.25rem !important;
  }
  .ps-xxl-2 {
    padding-left: 0.5rem !important;
  }
  .ps-xxl-3 {
    padding-left: 1rem !important;
  }
  .ps-xxl-4 {
    padding-left: 1.5rem !important;
  }
  .ps-xxl-5 {
    padding-left: 3rem !important;
  }
  .gap-xxl-0 {
    gap: 0 !important;
  }
  .gap-xxl-1 {
    gap: 0.25rem !important;
  }
  .gap-xxl-2 {
    gap: 0.5rem !important;
  }
  .gap-xxl-3 {
    gap: 1rem !important;
  }
  .gap-xxl-4 {
    gap: 1.5rem !important;
  }
  .gap-xxl-5 {
    gap: 3rem !important;
  }
  .row-gap-xxl-0 {
    row-gap: 0 !important;
  }
  .row-gap-xxl-1 {
    row-gap: 0.25rem !important;
  }
  .row-gap-xxl-2 {
    row-gap: 0.5rem !important;
  }
  .row-gap-xxl-3 {
    row-gap: 1rem !important;
  }
  .row-gap-xxl-4 {
    row-gap: 1.5rem !important;
  }
  .row-gap-xxl-5 {
    row-gap: 3rem !important;
  }
  .column-gap-xxl-0 {
    -moz-column-gap: 0 !important;
         column-gap: 0 !important;
  }
  .column-gap-xxl-1 {
    -moz-column-gap: 0.25rem !important;
         column-gap: 0.25rem !important;
  }
  .column-gap-xxl-2 {
    -moz-column-gap: 0.5rem !important;
         column-gap: 0.5rem !important;
  }
  .column-gap-xxl-3 {
    -moz-column-gap: 1rem !important;
         column-gap: 1rem !important;
  }
  .column-gap-xxl-4 {
    -moz-column-gap: 1.5rem !important;
         column-gap: 1.5rem !important;
  }
  .column-gap-xxl-5 {
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
  }
  .text-xxl-start {
    text-align: left !important;
  }
  .text-xxl-end {
    text-align: right !important;
  }
  .text-xxl-center {
    text-align: center !important;
  }
}
@media (min-width: 1200px) {
  .fs-1 {
    font-size: 2.1875rem !important;
  }
  .fs-2 {
    font-size: 1.75rem !important;
  }
  .fs-3 {
    font-size: 1.53125rem !important;
  }
  .fs-4 {
    font-size: 1.3125rem !important;
  }
}
@media print {
  .d-print-inline {
    display: inline !important;
  }
  .d-print-inline-block {
    display: inline-block !important;
  }
  .d-print-block {
    display: block !important;
  }
  .d-print-grid {
    display: grid !important;
  }
  .d-print-inline-grid {
    display: inline-grid !important;
  }
  .d-print-table {
    display: table !important;
  }
  .d-print-table-row {
    display: table-row !important;
  }
  .d-print-table-cell {
    display: table-cell !important;
  }
  .d-print-flex {
    display: flex !important;
  }
  .d-print-inline-flex {
    display: inline-flex !important;
  }
  .d-print-none {
    display: none !important;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/* Zen Kaku Gothic New */
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-v18-japanese-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-v18-japanese-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-v18-japanese-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 100%;
  descent-override: 20%;
  line-gap-override: 0%;
}
/* Plus Jakarta Sans */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-v12-latin-200.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-v12-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-v12-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-v12-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-v12-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-v12-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
/* ↑ここまで先頭に追加して既存のインポート削除 */
body {
  color: #111111;
  transition: z-index 0ms 5.28455ms;
  background: #fff;
  margin: 0;
  padding-top: 132px;
}
@media only screen and (min-width: 768px) {
  body {
    padding-top: 152px;
  }
}
a {
  text-decoration: none;
}
pre {
  background-color: transparent;
  border: none;
  padding: 16px 0;
}
p {
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
見出し

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

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: #111111;
}
/*
ページヘッダ

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

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

Markup:
.ec-pageHeader
  h1 利用規約

Styleguide 1.1.2
*/
.ec-pageHeader h1, .ec-pageHeader .h1 {
  margin: 0 0 8px;
  padding: 8px 0 12px;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.ec-pageHeader h1 span.sub, .ec-pageHeader .h1 span.sub {
  font-size: 17px;
  display: block;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader h1 span.sub, .ec-pageHeader .h1 span.sub {
    font-size: 20px;
    font-weight: 500;
    width: auto;
    display: inline-block;
    vertical-align: middle;
  }
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader h1.-center, .ec-pageHeader .-center.h1 {
    justify-content: center;
  }
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader h1.-icon-login span, .ec-pageHeader .-icon-login.h1 span {
    display: flex;
    align-items: center;
    -moz-column-gap: 16px;
         column-gap: 16px;
  }
}
.ec-pageHeader h1.-icon-login::before, .ec-pageHeader .-icon-login.h1::before {
  content: "";
  background: url("../icon/icon_login.svg") no-repeat 50% 50%;
  background-size: 24px 24px;
  width: 48px;
  height: 48px;
  border: 1px solid #111111;
  flex-shrink: 0;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader h1.-icon-login::before, .ec-pageHeader .-icon-login.h1::before {
    width: 56px;
    height: 56px;
  }
}
.ec-pageHeader h1.-icon-cart::before, .ec-pageHeader .-icon-cart.h1::before {
  content: "";
  background: url("../icon/icon_cart.svg") no-repeat 50% 50%;
  background-size: 24px 24px;
  width: 48px;
  height: 48px;
  border: 1px solid #111111;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader h1.-icon-cart::before, .ec-pageHeader .-icon-cart.h1::before {
    width: 56px;
    height: 56px;
  }
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader h1, .ec-pageHeader .h1 {
    margin: 10px 16px 32px;
    font-size: 36px;
    font-weight: 500;
  }
}
.ec-pageHeader2 {
  margin-bottom: 56px;
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader2 {
    margin-bottom: 72px;
  }
}
.ec-pageHeader2 h1, .ec-pageHeader2 .h1 {
  font-size: 64px;
  line-height: 1;
  font-weight: 200;
  letter-spacing: 0.04em;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
@media only screen and (min-width: 768px) {
  .ec-pageHeader2 h1, .ec-pageHeader2 .h1 {
    font-size: 88px;
  }
}
.ec-pageHeader2 p {
  font-size: 14px;
  color: #0b364c;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/*
サブ見出し

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

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

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

Styleguide 1.1.3
*/
.ec-heading {
  margin: 24px 0;
}
/*
サブ見出し(太字)

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

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

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

Styleguide 1.1.4
*/
.ec-heading-bold {
  margin: 16px 0;
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-heading-bold {
    font-size: 18px;
  }
}
/*
背景付き見出し

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

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 .h1,
.ec-rectHeading h2,
.ec-rectHeading .h2,
.ec-rectHeading h3,
.ec-rectHeading .h3,
.ec-rectHeading h4,
.ec-rectHeading .h4,
.ec-rectHeading h5,
.ec-rectHeading .h5,
.ec-rectHeading h6,
.ec-rectHeading .h6 {
  padding: 16px 20px;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
}
.ec-rectHeading h1::before, .ec-rectHeading .h1::before,
.ec-rectHeading h2::before,
.ec-rectHeading .h2::before,
.ec-rectHeading h3::before,
.ec-rectHeading .h3::before,
.ec-rectHeading h4::before,
.ec-rectHeading .h4::before,
.ec-rectHeading h5::before,
.ec-rectHeading .h5::before,
.ec-rectHeading h6::before,
.ec-rectHeading .h6::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: #c3976f;
  border-radius: 50%;
}
/*
メッセージ見出し

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

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

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

Styleguide 1.1.6
*/
.ec-reportHeading {
  width: 100%;
  border-top: 1px dotted #ccc;
  margin: 20px 0 30px;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-reportHeading {
    border-top: 0;
    font-size: 32px;
  }
}
.ec-reportHeading h1, .ec-reportHeading .h1,
.ec-reportHeading h2,
.ec-reportHeading .h2,
.ec-reportHeading h3,
.ec-reportHeading .h3,
.ec-reportHeading h4,
.ec-reportHeading .h4,
.ec-reportHeading h5,
.ec-reportHeading .h5,
.ec-reportHeading h6,
.ec-reportHeading .h6,
.ec-reportHeading p {
  font-weight: bold;
  font-size: 24px;
}
@media only screen and (min-width: 768px) {
  .ec-reportHeading h1, .ec-reportHeading .h1,
  .ec-reportHeading h2,
  .ec-reportHeading .h2,
  .ec-reportHeading h3,
  .ec-reportHeading .h3,
  .ec-reportHeading h4,
  .ec-reportHeading .h4,
  .ec-reportHeading h5,
  .ec-reportHeading .h5,
  .ec-reportHeading h6,
  .ec-reportHeading .h6,
  .ec-reportHeading p {
    font-size: 32px;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
文字装飾

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

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;
}
@media only screen and (min-width: 768px) {
  .ec-price .ec-price__unit {
    font-size: 1em;
  }
}
.ec-price .ec-price__price {
  display: inline-block;
  padding: 0 0.3em;
  font-size: 18px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-price .ec-price__price {
    font-size: 1em;
  }
}
.ec-price .ec-price__tax {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .ec-price .ec-price__tax {
    font-size: 0.57em;
  }
}
/*
テキストの位置

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

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 !important;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
/*
メッセージテキスト

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

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

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


Styleguide 1.2.9
*/
.ec-reportDescription {
  margin-bottom: 32px;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}
/*
テキスト下部のスペース

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

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

Styleguide 1.2.10
*/
.ec-para-normal {
  margin-bottom: 16px;
}
h1, .h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 500;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
リスト

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

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%;
  margin-bottom: 16px;
}
.ec-borderedDefs__title {
  background: #f8f5ed;
  padding: 20px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: bold;
}
.ec-borderedDefs dl {
  display: flex;
  border-bottom: 1px dotted #ccc;
  margin: 0;
  padding: 10px 0 0;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .ec-borderedDefs dl {
    flex-wrap: nowrap;
    padding: 15px 0 4px;
  }
}
.ec-borderedDefs dt,
.ec-borderedDefs dd {
  padding: 0;
}
.ec-borderedDefs dt {
  font-weight: normal;
  width: 100%;
  padding-top: 0;
}
@media only screen and (min-width: 768px) {
  .ec-borderedDefs dt {
    padding-top: 14px;
    width: 30%;
  }
}
.ec-borderedDefs dd {
  padding: 0;
  width: 100%;
  line-height: 2.5;
}
@media only screen and (min-width: 768px) {
  .ec-borderedDefs dd {
    width: 70%;
    line-height: 3;
  }
}
.ec-borderedDefs p {
  line-height: 1.4;
}
.ec-list-chilled {
  display: table-row;
  border: 0 none;
  padding: 8px 0;
}
.ec-list-chilled dt,
.ec-list-chilled dd {
  display: table-cell;
  border-bottom: 1px dotted #ccc;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-list-chilled dt,
  .ec-list-chilled dd {
    padding: 16px 0;
  }
}
.ec-list-chilled dt {
  width: 30%;
}
.ec-list-chilled dd {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-list-chilled dd {
    padding: 16px;
  }
}
/*
ボーダーリスト

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

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;
}
@media only screen and (min-width: 768px) {
  .ec-borderedList {
    border-top: 1px dotted #e6e6e6;
  }
}
.ec-borderedList li {
  border-bottom: 1px dotted #e6e6e6;
}
.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;
}
.gd-heading__eyebrow {
  margin: 0;
  color: #9f7620;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.17em;
}
.gd-heading__title {
  margin: 0;
  margin-top: 34px;
  color: #111111;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Noto Serif JP", serif;
  font-weight: 400;
  font-size: clamp(32px, 2.75vw, 38px);
  line-height: 1.55;
  letter-spacing: 0.045em;
  white-space: nowrap;
}
@media (max-width: 700px) {
  .gd-heading__eyebrow {
    font-size: 11px;
  }
  .gd-heading__title {
    margin-top: 24px;
    font-size: clamp(30px, 3.1vw, 35px);
    line-height: 1.55;
    letter-spacing: 0.04em;
    white-space: normal;
  }
}
@media (max-width: 420px) {
  .gd-heading__title {
    font-size: 27px;
  }
}
.gd-headBar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #d2cec8;
}
.gd-headBar .ec-newsRole__headerCat dt {
  display: none;
}
@media (min-width: 701px) {
  .gd-headBar .ec-newsRole__headerCat dt {
    display: block;
  }
}
@media (min-width: 701px) {
  .gd-headBar {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 40px;
  }
}
.gd-headBar .gd-headBar__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #9f7620;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1;
}
.gd-headBar__title {
  margin: 0;
  color: #111111;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.3;
}
.gd-product-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gd-product-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #d2cec8;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease;
}
.gd-product-card:hover {
  border-color: #c2bdb5;
}
.gd-product-card__image {
  position: relative;
  aspect-ratio: 1/1;
  background: #f5f5f5;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gd-product-card__image img {
  width: 82%;
  height: 82%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.35s ease;
}
.gd-product-card:hover .gd-product-card__image img {
  transform: scale(1.05);
}
.gd-product-card__body {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 22px;
  flex: 1;
}
.gd-product-card__badge {
  align-self: flex-start;
  padding: 3px 12px;
  border: 1px solid #111111;
  border-radius: 999px;
  color: #111111;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  margin-bottom: 12px;
}
.gd-product-card__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #111111;
  margin-bottom: 10px;
}
.gd-product-card__label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.gd-product-card__label--chicken {
  color: #995a31;
}
.gd-product-card__label--horse {
  color: #aa1b48;
}
.gd-product-card__label--venison {
  color: #7a9a6b;
}
.gd-product-card__label--fish {
  color: #3385a8;
}
.gd-product-card__name {
  margin: 0 0 18px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: #111111;
}
.gd-product-card__desc {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: #111111;
}
@media (max-width: 640px) {
  .gd-product-list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .gd-product-card__body {
    padding: 16px 16px 20px;
  }
  .gd-product-card__label {
    font-size: 12px;
  }
  .gd-product-card__name {
    font-size: 17px;
  }
  .gd-product-card__desc {
    font-size: 13px;
  }
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
ボタンサイズ

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

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

Styleguide 2.1
*/
/*
通常ボタン

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

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

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

Styleguide 2.1.1
*/
.ec-inlineBtn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #111111;
  background-color: #f5f7f8;
  border-color: #ccc;
}
.ec-inlineBtn:focus, .ec-inlineBtn.focus, .ec-inlineBtn:active:focus, .ec-inlineBtn:active.focus, .ec-inlineBtn.active:focus, .ec-inlineBtn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-inlineBtn:hover, .ec-inlineBtn:focus, .ec-inlineBtn.focus {
  color: #111111;
  text-decoration: none;
}
.ec-inlineBtn:active, .ec-inlineBtn.active {
  outline: 0;
  background-image: none;
}
.ec-inlineBtn.disabled, .ec-inlineBtn[disabled], fieldset[disabled] .ec-inlineBtn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-inlineBtn:hover {
  color: #000;
  background-color: #f7f8f9;
  border-color: #d1d1d1;
}
.btn-check:focus + .ec-inlineBtn, .ec-inlineBtn:focus {
  color: #000;
  background-color: #f7f8f9;
  border-color: #d1d1d1;
  box-shadow: 0 0 0 0.25rem rgba(176, 176, 176, 0.5);
}
.btn-check:checked + .ec-inlineBtn, .btn-check:active + .ec-inlineBtn, .ec-inlineBtn:active, .ec-inlineBtn.active, .show > .ec-inlineBtn.dropdown-toggle {
  color: #000;
  background-color: #f7f9f9;
  border-color: #d1d1d1;
}
.btn-check:checked + .ec-inlineBtn:focus, .btn-check:active + .ec-inlineBtn:focus, .ec-inlineBtn:active:focus, .ec-inlineBtn.active:focus, .show > .ec-inlineBtn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(176, 176, 176, 0.5);
}
.ec-inlineBtn:disabled, .ec-inlineBtn.disabled {
  color: #111111;
  background-color: #f5f7f8;
  border-color: #ccc;
}
.ec-inlineBtn .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-inlineBtn a {
  color: inherit;
}
.ec-inlineBtn--primary {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #C3976F;
  border-color: #C3976F;
}
.ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary:active.focus, .ec-inlineBtn--primary.active:focus, .ec-inlineBtn--primary.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-inlineBtn--primary:hover, .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary.focus {
  color: #111111;
  text-decoration: none;
}
.ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active {
  outline: 0;
  background-image: none;
}
.ec-inlineBtn--primary.disabled, .ec-inlineBtn--primary[disabled], fieldset[disabled] .ec-inlineBtn--primary {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-inlineBtn--primary:hover {
  color: #000;
  background-color: #a6805e;
  border-color: #9c7959;
}
.btn-check:focus + .ec-inlineBtn--primary, .ec-inlineBtn--primary:focus {
  color: #000;
  background-color: #a6805e;
  border-color: #9c7959;
  box-shadow: 0 0 0 0.25rem rgba(204, 167, 133, 0.5);
}
.btn-check:checked + .ec-inlineBtn--primary, .btn-check:active + .ec-inlineBtn--primary, .ec-inlineBtn--primary:active, .ec-inlineBtn--primary.active, .show > .ec-inlineBtn--primary.dropdown-toggle {
  color: #000;
  background-color: #9c7959;
  border-color: #927153;
}
.btn-check:checked + .ec-inlineBtn--primary:focus, .btn-check:active + .ec-inlineBtn--primary:focus, .ec-inlineBtn--primary:active:focus, .ec-inlineBtn--primary.active:focus, .show > .ec-inlineBtn--primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(204, 167, 133, 0.5);
}
.ec-inlineBtn--primary:disabled, .ec-inlineBtn--primary.disabled {
  color: #fff;
  background-color: #C3976F;
  border-color: #C3976F;
}
.ec-inlineBtn--primary .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-inlineBtn--primary a {
  color: inherit;
}
.ec-inlineBtn--action {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #c39d4a;
  border-color: #c39d4a;
}
.ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action:active.focus, .ec-inlineBtn--action.active:focus, .ec-inlineBtn--action.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-inlineBtn--action:hover, .ec-inlineBtn--action:focus, .ec-inlineBtn--action.focus {
  color: #111111;
  text-decoration: none;
}
.ec-inlineBtn--action:active, .ec-inlineBtn--action.active {
  outline: 0;
  background-image: none;
}
.ec-inlineBtn--action.disabled, .ec-inlineBtn--action[disabled], fieldset[disabled] .ec-inlineBtn--action {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-inlineBtn--action:hover {
  color: #000;
  background-color: #a6853f;
  border-color: #9c7e3b;
}
.btn-check:focus + .ec-inlineBtn--action, .ec-inlineBtn--action:focus {
  color: #000;
  background-color: #a6853f;
  border-color: #9c7e3b;
  box-shadow: 0 0 0 0.25rem rgba(204, 172, 101, 0.5);
}
.btn-check:checked + .ec-inlineBtn--action, .btn-check:active + .ec-inlineBtn--action, .ec-inlineBtn--action:active, .ec-inlineBtn--action.active, .show > .ec-inlineBtn--action.dropdown-toggle {
  color: #000;
  background-color: #9c7e3b;
  border-color: #927638;
}
.btn-check:checked + .ec-inlineBtn--action:focus, .btn-check:active + .ec-inlineBtn--action:focus, .ec-inlineBtn--action:active:focus, .ec-inlineBtn--action.active:focus, .show > .ec-inlineBtn--action.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(204, 172, 101, 0.5);
}
.ec-inlineBtn--action:disabled, .ec-inlineBtn--action.disabled {
  color: #fff;
  background-color: #c39d4a;
  border-color: #c39d4a;
}
.ec-inlineBtn--action .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-inlineBtn--action a {
  color: inherit;
}
.ec-inlineBtn--cancel {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #888888;
  border-color: #888888;
}
.ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel:active.focus, .ec-inlineBtn--cancel.active:focus, .ec-inlineBtn--cancel.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-inlineBtn--cancel:hover, .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel.focus {
  color: #111111;
  text-decoration: none;
}
.ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active {
  outline: 0;
  background-image: none;
}
.ec-inlineBtn--cancel.disabled, .ec-inlineBtn--cancel[disabled], fieldset[disabled] .ec-inlineBtn--cancel {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-inlineBtn--cancel:hover {
  color: #fff;
  background-color: #747474;
  border-color: #6d6d6d;
}
.btn-check:focus + .ec-inlineBtn--cancel, .ec-inlineBtn--cancel:focus {
  color: #fff;
  background-color: #747474;
  border-color: #6d6d6d;
  box-shadow: 0 0 0 0.25rem rgba(154, 154, 154, 0.5);
}
.btn-check:checked + .ec-inlineBtn--cancel, .btn-check:active + .ec-inlineBtn--cancel, .ec-inlineBtn--cancel:active, .ec-inlineBtn--cancel.active, .show > .ec-inlineBtn--cancel.dropdown-toggle {
  color: #fff;
  background-color: #6d6d6d;
  border-color: #666666;
}
.btn-check:checked + .ec-inlineBtn--cancel:focus, .btn-check:active + .ec-inlineBtn--cancel:focus, .ec-inlineBtn--cancel:active:focus, .ec-inlineBtn--cancel.active:focus, .show > .ec-inlineBtn--cancel.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(154, 154, 154, 0.5);
}
.ec-inlineBtn--cancel:disabled, .ec-inlineBtn--cancel.disabled {
  color: #fff;
  background-color: #888888;
  border-color: #888888;
}
.ec-inlineBtn--cancel .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-inlineBtn--cancel a {
  color: inherit;
}
/*
ブロックボタン（全幅）

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

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

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

Styleguide 2.1.2
*/
.ec-blockBtn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #111111;
  background-color: #f5f7f8;
  border-color: #ccc;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}
.ec-blockBtn:focus, .ec-blockBtn.focus, .ec-blockBtn:active:focus, .ec-blockBtn:active.focus, .ec-blockBtn.active:focus, .ec-blockBtn.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-blockBtn:hover, .ec-blockBtn:focus, .ec-blockBtn.focus {
  color: #111111;
  text-decoration: none;
}
.ec-blockBtn:active, .ec-blockBtn.active {
  outline: 0;
  background-image: none;
}
.ec-blockBtn.disabled, .ec-blockBtn[disabled], fieldset[disabled] .ec-blockBtn {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-blockBtn:hover {
  color: #000;
  background-color: #f7f8f9;
  border-color: #d1d1d1;
}
.btn-check:focus + .ec-blockBtn, .ec-blockBtn:focus {
  color: #000;
  background-color: #f7f8f9;
  border-color: #d1d1d1;
  box-shadow: 0 0 0 0.25rem rgba(176, 176, 176, 0.5);
}
.btn-check:checked + .ec-blockBtn, .btn-check:active + .ec-blockBtn, .ec-blockBtn:active, .ec-blockBtn.active, .show > .ec-blockBtn.dropdown-toggle {
  color: #000;
  background-color: #f7f9f9;
  border-color: #d1d1d1;
}
.btn-check:checked + .ec-blockBtn:focus, .btn-check:active + .ec-blockBtn:focus, .ec-blockBtn:active:focus, .ec-blockBtn.active:focus, .show > .ec-blockBtn.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(176, 176, 176, 0.5);
}
.ec-blockBtn:disabled, .ec-blockBtn.disabled {
  color: #111111;
  background-color: #f5f7f8;
  border-color: #ccc;
}
.ec-blockBtn .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-blockBtn a {
  color: inherit;
}
.ec-blockBtn--primary {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #C3976F;
  border-color: #C3976F;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}
.ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary:active.focus, .ec-blockBtn--primary.active:focus, .ec-blockBtn--primary.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-blockBtn--primary:hover, .ec-blockBtn--primary:focus, .ec-blockBtn--primary.focus {
  color: #111111;
  text-decoration: none;
}
.ec-blockBtn--primary:active, .ec-blockBtn--primary.active {
  outline: 0;
  background-image: none;
}
.ec-blockBtn--primary.disabled, .ec-blockBtn--primary[disabled], fieldset[disabled] .ec-blockBtn--primary {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-blockBtn--primary:hover {
  color: #000;
  background-color: #a6805e;
  border-color: #9c7959;
}
.btn-check:focus + .ec-blockBtn--primary, .ec-blockBtn--primary:focus {
  color: #000;
  background-color: #a6805e;
  border-color: #9c7959;
  box-shadow: 0 0 0 0.25rem rgba(204, 167, 133, 0.5);
}
.btn-check:checked + .ec-blockBtn--primary, .btn-check:active + .ec-blockBtn--primary, .ec-blockBtn--primary:active, .ec-blockBtn--primary.active, .show > .ec-blockBtn--primary.dropdown-toggle {
  color: #000;
  background-color: #9c7959;
  border-color: #927153;
}
.btn-check:checked + .ec-blockBtn--primary:focus, .btn-check:active + .ec-blockBtn--primary:focus, .ec-blockBtn--primary:active:focus, .ec-blockBtn--primary.active:focus, .show > .ec-blockBtn--primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(204, 167, 133, 0.5);
}
.ec-blockBtn--primary:disabled, .ec-blockBtn--primary.disabled {
  color: #fff;
  background-color: #C3976F;
  border-color: #C3976F;
}
.ec-blockBtn--primary .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-blockBtn--primary a {
  color: inherit;
}
.ec-blockBtn--primary.-next {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-blockBtn--primary.-next::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("../icon/icon_next.svg") no-repeat;
  background-size: contain;
}
.ec-blockBtn--line {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #c39d4a;
  border-color: #c39d4a;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
  background-color: #00b900;
  border-color: #00b900;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-blockBtn--line:focus, .ec-blockBtn--line.focus, .ec-blockBtn--line:active:focus, .ec-blockBtn--line:active.focus, .ec-blockBtn--line.active:focus, .ec-blockBtn--line.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-blockBtn--line:hover, .ec-blockBtn--line:focus, .ec-blockBtn--line.focus {
  color: #111111;
  text-decoration: none;
}
.ec-blockBtn--line:active, .ec-blockBtn--line.active {
  outline: 0;
  background-image: none;
}
.ec-blockBtn--line.disabled, .ec-blockBtn--line[disabled], fieldset[disabled] .ec-blockBtn--line {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-blockBtn--line:hover {
  color: #000;
  background-color: #a6853f;
  border-color: #9c7e3b;
}
.btn-check:focus + .ec-blockBtn--line, .ec-blockBtn--line:focus {
  color: #000;
  background-color: #a6853f;
  border-color: #9c7e3b;
  box-shadow: 0 0 0 0.25rem rgba(204, 172, 101, 0.5);
}
.btn-check:checked + .ec-blockBtn--line, .btn-check:active + .ec-blockBtn--line, .ec-blockBtn--line:active, .ec-blockBtn--line.active, .show > .ec-blockBtn--line.dropdown-toggle {
  color: #000;
  background-color: #9c7e3b;
  border-color: #927638;
}
.btn-check:checked + .ec-blockBtn--line:focus, .btn-check:active + .ec-blockBtn--line:focus, .ec-blockBtn--line:active:focus, .ec-blockBtn--line.active:focus, .show > .ec-blockBtn--line.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(204, 172, 101, 0.5);
}
.ec-blockBtn--line:disabled, .ec-blockBtn--line.disabled {
  color: #fff;
  background-color: #c39d4a;
  border-color: #c39d4a;
}
.ec-blockBtn--line .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-blockBtn--line a {
  color: inherit;
}
.ec-blockBtn--line::before {
  content: "";
  display: block;
  width: 49px;
  height: 49px;
  background: url("../icon/icon_line.svg") no-repeat;
  background-size: contain;
}
.ec-blockBtn--action {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #c39d4a;
  border-color: #c39d4a;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}
.ec-blockBtn--action:focus, .ec-blockBtn--action.focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action:active.focus, .ec-blockBtn--action.active:focus, .ec-blockBtn--action.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-blockBtn--action:hover, .ec-blockBtn--action:focus, .ec-blockBtn--action.focus {
  color: #111111;
  text-decoration: none;
}
.ec-blockBtn--action:active, .ec-blockBtn--action.active {
  outline: 0;
  background-image: none;
}
.ec-blockBtn--action.disabled, .ec-blockBtn--action[disabled], fieldset[disabled] .ec-blockBtn--action {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-blockBtn--action:hover {
  color: #000;
  background-color: #a6853f;
  border-color: #9c7e3b;
}
.btn-check:focus + .ec-blockBtn--action, .ec-blockBtn--action:focus {
  color: #000;
  background-color: #a6853f;
  border-color: #9c7e3b;
  box-shadow: 0 0 0 0.25rem rgba(204, 172, 101, 0.5);
}
.btn-check:checked + .ec-blockBtn--action, .btn-check:active + .ec-blockBtn--action, .ec-blockBtn--action:active, .ec-blockBtn--action.active, .show > .ec-blockBtn--action.dropdown-toggle {
  color: #000;
  background-color: #9c7e3b;
  border-color: #927638;
}
.btn-check:checked + .ec-blockBtn--action:focus, .btn-check:active + .ec-blockBtn--action:focus, .ec-blockBtn--action:active:focus, .ec-blockBtn--action.active:focus, .show > .ec-blockBtn--action.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(204, 172, 101, 0.5);
}
.ec-blockBtn--action:disabled, .ec-blockBtn--action.disabled {
  color: #fff;
  background-color: #c39d4a;
  border-color: #c39d4a;
}
.ec-blockBtn--action .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-blockBtn--action a {
  color: inherit;
}
.ec-blockBtn--action.-back {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-blockBtn--action.-back::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("../icon/icon_back.svg") no-repeat;
  background-size: contain;
}
.ec-blockBtn--action.-dark {
  background-color: #888;
  border-color: #888;
}
.ec-blockBtn--cancel {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: #fff;
  background-color: #888888;
  border-color: #888888;
  display: block;
  width: 100%;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}
.ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel:active.focus, .ec-blockBtn--cancel.active:focus, .ec-blockBtn--cancel.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-blockBtn--cancel:hover, .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel.focus {
  color: #111111;
  text-decoration: none;
}
.ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active {
  outline: 0;
  background-image: none;
}
.ec-blockBtn--cancel.disabled, .ec-blockBtn--cancel[disabled], fieldset[disabled] .ec-blockBtn--cancel {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-blockBtn--cancel:hover {
  color: #fff;
  background-color: #747474;
  border-color: #6d6d6d;
}
.btn-check:focus + .ec-blockBtn--cancel, .ec-blockBtn--cancel:focus {
  color: #fff;
  background-color: #747474;
  border-color: #6d6d6d;
  box-shadow: 0 0 0 0.25rem rgba(154, 154, 154, 0.5);
}
.btn-check:checked + .ec-blockBtn--cancel, .btn-check:active + .ec-blockBtn--cancel, .ec-blockBtn--cancel:active, .ec-blockBtn--cancel.active, .show > .ec-blockBtn--cancel.dropdown-toggle {
  color: #fff;
  background-color: #6d6d6d;
  border-color: #666666;
}
.btn-check:checked + .ec-blockBtn--cancel:focus, .btn-check:active + .ec-blockBtn--cancel:focus, .ec-blockBtn--cancel:active:focus, .ec-blockBtn--cancel.active:focus, .show > .ec-blockBtn--cancel.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(154, 154, 154, 0.5);
}
.ec-blockBtn--cancel:disabled, .ec-blockBtn--cancel.disabled {
  color: #fff;
  background-color: #888888;
  border-color: #888888;
}
.ec-blockBtn--cancel .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-blockBtn--cancel a {
  color: inherit;
}
/*
アイコンボタン

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: -0.5em;
  margin-left: -0.5em;
  width: 1em;
  height: 1em;
  position: absolute;
  top: 50%;
  left: 50%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
その他のボタン

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

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;
}
@media only screen and (min-width: 768px) {
  .ec-blockTopBtn {
    right: 30px;
    bottom: 30px;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
フォーム部品(テキスト)

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

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=radio], .ec-birth input[type=radio], .ec-select input[type=radio], .ec-telInput input[type=radio], .ec-zipInput input[type=radio], .ec-numberInput input[type=radio], .ec-halfInput input[type=radio],
.ec-input input[type=checkbox],
.ec-birth input[type=checkbox],
.ec-select input[type=checkbox],
.ec-telInput input[type=checkbox],
.ec-zipInput input[type=checkbox],
.ec-numberInput input[type=checkbox],
.ec-halfInput input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.ec-input input[type=file], .ec-birth input[type=file], .ec-select input[type=file], .ec-telInput input[type=file], .ec-zipInput input[type=file], .ec-numberInput input[type=file], .ec-halfInput input[type=file] {
  display: block;
}
.ec-input input[type=range], .ec-birth input[type=range], .ec-select input[type=range], .ec-telInput input[type=range], .ec-zipInput input[type=range], .ec-numberInput input[type=range], .ec-halfInput input[type=range] {
  display: block;
  width: 100%;
}
.ec-input select[multiple], .ec-birth select[multiple], .ec-select select[multiple], .ec-telInput select[multiple], .ec-zipInput select[multiple], .ec-numberInput select[multiple], .ec-halfInput select[multiple],
.ec-input select[size],
.ec-birth select[size],
.ec-select select[size],
.ec-telInput select[size],
.ec-zipInput select[size],
.ec-numberInput select[size],
.ec-halfInput select[size] {
  height: auto;
}
.ec-input input[type=file]:focus, .ec-birth input[type=file]:focus, .ec-select input[type=file]:focus, .ec-telInput input[type=file]:focus, .ec-zipInput input[type=file]:focus, .ec-numberInput input[type=file]:focus, .ec-halfInput input[type=file]:focus,
.ec-input input[type=radio]:focus,
.ec-birth input[type=radio]:focus,
.ec-select input[type=radio]:focus,
.ec-telInput input[type=radio]:focus,
.ec-zipInput input[type=radio]:focus,
.ec-numberInput input[type=radio]:focus,
.ec-halfInput input[type=radio]:focus,
.ec-input input[type=checkbox]:focus,
.ec-birth input[type=checkbox]:focus,
.ec-select input[type=checkbox]:focus,
.ec-telInput input[type=checkbox]:focus,
.ec-zipInput input[type=checkbox]:focus,
.ec-numberInput input[type=checkbox]:focus,
.ec-halfInput input[type=checkbox]:focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
  display: block;
  width: 100%;
  height: 1rem px12px2 px;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius);
  -webkit-appearance: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
    transition: none;
  }
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-telInput input:focus, .ec-zipInput input:focus, .ec-numberInput input:focus, .ec-halfInput input:focus {
  border-color: #66afe9;
  outline: 0;
}
.ec-input input::-moz-placeholder, .ec-birth input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-telInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-halfInput input::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.ec-input input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder, .ec-select input:-ms-input-placeholder, .ec-telInput input:-ms-input-placeholder, .ec-zipInput input:-ms-input-placeholder, .ec-numberInput input:-ms-input-placeholder, .ec-halfInput input:-ms-input-placeholder {
  color: #999;
}
.ec-input input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder, .ec-select input::-webkit-input-placeholder, .ec-telInput input::-webkit-input-placeholder, .ec-zipInput input::-webkit-input-placeholder, .ec-numberInput input::-webkit-input-placeholder, .ec-halfInput input::-webkit-input-placeholder {
  color: #999;
}
.ec-input input::-ms-expand, .ec-birth input::-ms-expand, .ec-select input::-ms-expand, .ec-telInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-halfInput input::-ms-expand {
  border: 0;
  background-color: transparent;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-telInput input[disabled], .ec-zipInput input[disabled], .ec-numberInput input[disabled], .ec-halfInput input[disabled], .ec-input input[readonly], .ec-birth input[readonly], .ec-select input[readonly], .ec-telInput input[readonly], .ec-zipInput input[readonly], .ec-numberInput input[readonly], .ec-halfInput input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-halfInput input {
  opacity: 1;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-telInput input[disabled], .ec-zipInput input[disabled], .ec-numberInput input[disabled], .ec-halfInput input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-telInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-halfInput input {
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
    font-size: 0.875rem;
  }
}
.ec-input select, .ec-birth select, .ec-select select, .ec-telInput select, .ec-zipInput select, .ec-numberInput select, .ec-halfInput select {
  display: block;
  width: 100%;
  height: 1rem px12px2 px;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius);
  -webkit-appearance: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ec-input select, .ec-birth select, .ec-select select, .ec-telInput select, .ec-zipInput select, .ec-numberInput select, .ec-halfInput select {
    transition: none;
  }
}
.ec-input select:focus, .ec-birth select:focus, .ec-select select:focus, .ec-telInput select:focus, .ec-zipInput select:focus, .ec-numberInput select:focus, .ec-halfInput select:focus {
  border-color: #66afe9;
  outline: 0;
}
.ec-input select::-moz-placeholder, .ec-birth select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-telInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-halfInput select::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.ec-input select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder, .ec-select select:-ms-input-placeholder, .ec-telInput select:-ms-input-placeholder, .ec-zipInput select:-ms-input-placeholder, .ec-numberInput select:-ms-input-placeholder, .ec-halfInput select:-ms-input-placeholder {
  color: #999;
}
.ec-input select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder, .ec-select select::-webkit-input-placeholder, .ec-telInput select::-webkit-input-placeholder, .ec-zipInput select::-webkit-input-placeholder, .ec-numberInput select::-webkit-input-placeholder, .ec-halfInput select::-webkit-input-placeholder {
  color: #999;
}
.ec-input select::-ms-expand, .ec-birth select::-ms-expand, .ec-select select::-ms-expand, .ec-telInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-halfInput select::-ms-expand {
  border: 0;
  background-color: transparent;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-telInput select[disabled], .ec-zipInput select[disabled], .ec-numberInput select[disabled], .ec-halfInput select[disabled], .ec-input select[readonly], .ec-birth select[readonly], .ec-select select[readonly], .ec-telInput select[readonly], .ec-zipInput select[readonly], .ec-numberInput select[readonly], .ec-halfInput select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-halfInput select {
  opacity: 1;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-telInput select[disabled], .ec-zipInput select[disabled], .ec-numberInput select[disabled], .ec-halfInput select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-telInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-halfInput select {
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .ec-input select, .ec-birth select, .ec-select select, .ec-telInput select, .ec-zipInput select, .ec-numberInput select, .ec-halfInput select {
    font-size: 0.875rem;
  }
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
  display: block;
  width: 100%;
  height: 1rem px12px2 px;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius);
  -webkit-appearance: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
    transition: none;
  }
}
.ec-input textarea:focus, .ec-birth textarea:focus, .ec-select textarea:focus, .ec-telInput textarea:focus, .ec-zipInput textarea:focus, .ec-numberInput textarea:focus, .ec-halfInput textarea:focus {
  border-color: #66afe9;
  outline: 0;
}
.ec-input textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.ec-input textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder, .ec-select textarea:-ms-input-placeholder, .ec-telInput textarea:-ms-input-placeholder, .ec-zipInput textarea:-ms-input-placeholder, .ec-numberInput textarea:-ms-input-placeholder, .ec-halfInput textarea:-ms-input-placeholder {
  color: #999;
}
.ec-input textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder, .ec-select textarea::-webkit-input-placeholder, .ec-telInput textarea::-webkit-input-placeholder, .ec-zipInput textarea::-webkit-input-placeholder, .ec-numberInput textarea::-webkit-input-placeholder, .ec-halfInput textarea::-webkit-input-placeholder {
  color: #999;
}
.ec-input textarea::-ms-expand, .ec-birth textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-telInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-halfInput textarea::-ms-expand {
  border: 0;
  background-color: transparent;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-telInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-halfInput textarea[disabled], .ec-input textarea[readonly], .ec-birth textarea[readonly], .ec-select textarea[readonly], .ec-telInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-halfInput textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-halfInput textarea {
  opacity: 1;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-telInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-halfInput textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-telInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-halfInput textarea {
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
    font-size: 0.875rem;
  }
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-telInput input:focus, .ec-zipInput input:focus, .ec-numberInput input:focus, .ec-halfInput input:focus,
.ec-input textarea:focus,
.ec-birth textarea:focus,
.ec-select textarea:focus,
.ec-telInput textarea:focus,
.ec-zipInput textarea:focus,
.ec-numberInput textarea:focus,
.ec-halfInput textarea:focus {
  box-shadow: none;
  border-color: #3c8dbc;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
  height: 40px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-input input, .ec-birth input, .ec-select input, .ec-telInput input, .ec-zipInput input, .ec-numberInput input, .ec-halfInput input {
    margin-bottom: 16px;
  }
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-telInput textarea, .ec-zipInput textarea, .ec-numberInput textarea, .ec-halfInput textarea {
  height: auto;
  min-height: 100px;
}
.ec-input p, .ec-birth p, .ec-select p, .ec-telInput p, .ec-zipInput p, .ec-numberInput p, .ec-halfInput p {
  line-height: 1.4;
}
.ec-input .ec-errorMessage, .ec-birth .ec-errorMessage, .ec-select .ec-errorMessage, .ec-telInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-halfInput .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #de5d50;
}
.error.ec-input input, .error.ec-birth input, .error.ec-select input, .error.ec-telInput input, .error.ec-zipInput input, .error.ec-numberInput input, .error.ec-halfInput input,
.error.ec-input select,
.error.ec-birth select,
.error.ec-select select,
.error.ec-telInput select,
.error.ec-zipInput select,
.error.ec-numberInput select,
.error.ec-halfInput select,
.error.ec-input textarea,
.error.ec-birth textarea,
.error.ec-select textarea,
.error.ec-telInput textarea,
.error.ec-zipInput textarea,
.error.ec-numberInput textarea,
.error.ec-halfInput textarea {
  margin-bottom: 5px;
  border-color: #cf3f34;
  background: #fdf1f0;
}
.ec-checkbox .ec-errorMessage,
.ec-radio .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #de5d50;
}
.error.ec-checkbox input,
.error.ec-checkbox label,
.error.ec-checkbox div,
.error.ec-radio input,
.error.ec-radio label,
.error.ec-radio div {
  border-color: #cf3f34;
  background: #fdf1f0;
}
/*
フォーム（text２つ）

姓名など2つ入力させたい入力項目で使用します。

入力フォームを半分で用意したいときにも利用可能です。

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

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

Styleguide 3.1.2
*/
.ec-halfInput input[type=text] {
  display: inline-block;
  width: 47%;
  margin-left: 2%;
}
@media only screen and (min-width: 768px) {
  .ec-halfInput input[type=text] {
    margin-left: 15px;
    width: 45%;
  }
}
.ec-halfInput .ec-errorMessage {
  display: inline-block;
  width: 47%;
}
@media only screen and (min-width: 768px) {
  .ec-halfInput .ec-errorMessage {
    margin-left: 15px;
    width: 45%;
  }
}
.ec-halfInput input[type=text]:first-of-type,
.ec-halfInput .ec-errorMessage:first-of-type {
  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: 9em;
  font-size: 16px;
}
.ec-zipInput span {
  display: inline-block;
  padding: 0 5px 0 3px;
  margin-left: 5px;
}
.ec-zipInputHelp {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 16px;
  vertical-align: baseline;
  line-height: 0;
}
.ec-zipInputHelp .ec-zipInputHelp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background: #111111;
  border-radius: 50%;
  font-size: 13px;
  position: relative;
  top: -6px;
}
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
  width: 1em;
  height: 1em;
  line-height: 1;
}
.ec-zipInputHelp span {
  margin-left: 8px;
  display: inline-block;
  color: #0092c4;
  vertical-align: 3px;
}
.ec-zipAuto {
  margin-bottom: 16px;
}
.ec-zipAuto .ec-inlineBtn {
  font-weight: normal;
}
/*
電話番号ボタン

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

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

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

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

Styleguide 3.1.5
*/
.ec-telInput input {
  max-width: 12em;
  text-align: left;
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
フォーム部品(テキスト)

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

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=radio], .ec-birth input[type=radio], .ec-select input[type=radio], .ec-halfInput input[type=radio], .ec-numberInput input[type=radio], .ec-zipInput input[type=radio], .ec-telInput input[type=radio],
.ec-input input[type=checkbox],
.ec-birth input[type=checkbox],
.ec-select input[type=checkbox],
.ec-halfInput input[type=checkbox],
.ec-numberInput input[type=checkbox],
.ec-zipInput input[type=checkbox],
.ec-telInput input[type=checkbox] {
  margin: 4px 0 0;
  margin-top: 1px \9 ;
  line-height: normal;
}
.ec-input input[type=file], .ec-birth input[type=file], .ec-select input[type=file], .ec-halfInput input[type=file], .ec-numberInput input[type=file], .ec-zipInput input[type=file], .ec-telInput input[type=file] {
  display: block;
}
.ec-input input[type=range], .ec-birth input[type=range], .ec-select input[type=range], .ec-halfInput input[type=range], .ec-numberInput input[type=range], .ec-zipInput input[type=range], .ec-telInput input[type=range] {
  display: block;
  width: 100%;
}
.ec-input select[multiple], .ec-birth select[multiple], .ec-select select[multiple], .ec-halfInput select[multiple], .ec-numberInput select[multiple], .ec-zipInput select[multiple], .ec-telInput select[multiple],
.ec-input select[size],
.ec-birth select[size],
.ec-select select[size],
.ec-halfInput select[size],
.ec-numberInput select[size],
.ec-zipInput select[size],
.ec-telInput select[size] {
  height: auto;
}
.ec-input input[type=file]:focus, .ec-birth input[type=file]:focus, .ec-select 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-input input[type=radio]:focus,
.ec-birth input[type=radio]:focus,
.ec-select 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-input input[type=checkbox]:focus,
.ec-birth input[type=checkbox]:focus,
.ec-select 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 {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
  display: block;
  width: 100%;
  height: 1rem px12px2 px;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius);
  -webkit-appearance: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
    transition: none;
  }
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus {
  border-color: #66afe9;
  outline: 0;
}
.ec-input input::-moz-placeholder, .ec-birth input::-moz-placeholder, .ec-select input::-moz-placeholder, .ec-halfInput input::-moz-placeholder, .ec-numberInput input::-moz-placeholder, .ec-zipInput input::-moz-placeholder, .ec-telInput input::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.ec-input input:-ms-input-placeholder, .ec-birth input:-ms-input-placeholder, .ec-select 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 {
  color: #999;
}
.ec-input input::-webkit-input-placeholder, .ec-birth input::-webkit-input-placeholder, .ec-select 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 {
  color: #999;
}
.ec-input input::-ms-expand, .ec-birth input::-ms-expand, .ec-select input::-ms-expand, .ec-halfInput input::-ms-expand, .ec-numberInput input::-ms-expand, .ec-zipInput input::-ms-expand, .ec-telInput input::-ms-expand {
  border: 0;
  background-color: transparent;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], .ec-input input[readonly], .ec-birth input[readonly], .ec-select input[readonly], .ec-halfInput input[readonly], .ec-numberInput input[readonly], .ec-zipInput input[readonly], .ec-telInput input[readonly], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input {
  opacity: 1;
}
.ec-input input[disabled], .ec-birth input[disabled], .ec-select input[disabled], .ec-halfInput input[disabled], .ec-numberInput input[disabled], .ec-zipInput input[disabled], .ec-telInput input[disabled], fieldset[disabled] .ec-input input, fieldset[disabled] .ec-birth input, fieldset[disabled] .ec-select input, fieldset[disabled] .ec-halfInput input, fieldset[disabled] .ec-numberInput input, fieldset[disabled] .ec-zipInput input, fieldset[disabled] .ec-telInput input {
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
    font-size: 0.875rem;
  }
}
.ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select {
  display: block;
  width: 100%;
  height: 1rem px12px2 px;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius);
  -webkit-appearance: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select {
    transition: none;
  }
}
.ec-input select:focus, .ec-birth select:focus, .ec-select select:focus, .ec-halfInput select:focus, .ec-numberInput select:focus, .ec-zipInput select:focus, .ec-telInput select:focus {
  border-color: #66afe9;
  outline: 0;
}
.ec-input select::-moz-placeholder, .ec-birth select::-moz-placeholder, .ec-select select::-moz-placeholder, .ec-halfInput select::-moz-placeholder, .ec-numberInput select::-moz-placeholder, .ec-zipInput select::-moz-placeholder, .ec-telInput select::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.ec-input select:-ms-input-placeholder, .ec-birth select:-ms-input-placeholder, .ec-select 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 {
  color: #999;
}
.ec-input select::-webkit-input-placeholder, .ec-birth select::-webkit-input-placeholder, .ec-select 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 {
  color: #999;
}
.ec-input select::-ms-expand, .ec-birth select::-ms-expand, .ec-select select::-ms-expand, .ec-halfInput select::-ms-expand, .ec-numberInput select::-ms-expand, .ec-zipInput select::-ms-expand, .ec-telInput select::-ms-expand {
  border: 0;
  background-color: transparent;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], .ec-input select[readonly], .ec-birth select[readonly], .ec-select select[readonly], .ec-halfInput select[readonly], .ec-numberInput select[readonly], .ec-zipInput select[readonly], .ec-telInput select[readonly], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select {
  opacity: 1;
}
.ec-input select[disabled], .ec-birth select[disabled], .ec-select select[disabled], .ec-halfInput select[disabled], .ec-numberInput select[disabled], .ec-zipInput select[disabled], .ec-telInput select[disabled], fieldset[disabled] .ec-input select, fieldset[disabled] .ec-birth select, fieldset[disabled] .ec-select select, fieldset[disabled] .ec-halfInput select, fieldset[disabled] .ec-numberInput select, fieldset[disabled] .ec-zipInput select, fieldset[disabled] .ec-telInput select {
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .ec-input select, .ec-birth select, .ec-select select, .ec-halfInput select, .ec-numberInput select, .ec-zipInput select, .ec-telInput select {
    font-size: 0.875rem;
  }
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
  display: block;
  width: 100%;
  height: 1rem px12px2 px;
  padding: 6px 20px;
  font-size: 16px;
  line-height: 1.42857142;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  background-image: none;
  border: 1px solid #ccc;
  border-radius: var(--bs-border-radius);
  -webkit-appearance: none;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  border-radius: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
    transition: none;
  }
}
.ec-input textarea:focus, .ec-birth textarea:focus, .ec-select textarea:focus, .ec-halfInput textarea:focus, .ec-numberInput textarea:focus, .ec-zipInput textarea:focus, .ec-telInput textarea:focus {
  border-color: #66afe9;
  outline: 0;
}
.ec-input textarea::-moz-placeholder, .ec-birth textarea::-moz-placeholder, .ec-select textarea::-moz-placeholder, .ec-halfInput textarea::-moz-placeholder, .ec-numberInput textarea::-moz-placeholder, .ec-zipInput textarea::-moz-placeholder, .ec-telInput textarea::-moz-placeholder {
  color: #999;
  opacity: 1;
}
.ec-input textarea:-ms-input-placeholder, .ec-birth textarea:-ms-input-placeholder, .ec-select 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 {
  color: #999;
}
.ec-input textarea::-webkit-input-placeholder, .ec-birth textarea::-webkit-input-placeholder, .ec-select 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 {
  color: #999;
}
.ec-input textarea::-ms-expand, .ec-birth textarea::-ms-expand, .ec-select textarea::-ms-expand, .ec-halfInput textarea::-ms-expand, .ec-numberInput textarea::-ms-expand, .ec-zipInput textarea::-ms-expand, .ec-telInput textarea::-ms-expand {
  border: 0;
  background-color: transparent;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], .ec-input textarea[readonly], .ec-birth textarea[readonly], .ec-select textarea[readonly], .ec-halfInput textarea[readonly], .ec-numberInput textarea[readonly], .ec-zipInput textarea[readonly], .ec-telInput textarea[readonly], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea {
  opacity: 1;
}
.ec-input textarea[disabled], .ec-birth textarea[disabled], .ec-select textarea[disabled], .ec-halfInput textarea[disabled], .ec-numberInput textarea[disabled], .ec-zipInput textarea[disabled], .ec-telInput textarea[disabled], fieldset[disabled] .ec-input textarea, fieldset[disabled] .ec-birth textarea, fieldset[disabled] .ec-select textarea, fieldset[disabled] .ec-halfInput textarea, fieldset[disabled] .ec-numberInput textarea, fieldset[disabled] .ec-zipInput textarea, fieldset[disabled] .ec-telInput textarea {
  cursor: not-allowed;
}
@media only screen and (min-width: 768px) {
  .ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
    font-size: 0.875rem;
  }
}
.ec-input input:focus, .ec-birth input:focus, .ec-select input:focus, .ec-halfInput input:focus, .ec-numberInput input:focus, .ec-zipInput input:focus, .ec-telInput input:focus,
.ec-input textarea:focus,
.ec-birth textarea:focus,
.ec-select textarea:focus,
.ec-halfInput textarea:focus,
.ec-numberInput textarea:focus,
.ec-zipInput textarea:focus,
.ec-telInput textarea:focus {
  box-shadow: none;
  border-color: #3c8dbc;
}
.ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
  height: 40px;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-input input, .ec-birth input, .ec-select input, .ec-halfInput input, .ec-numberInput input, .ec-zipInput input, .ec-telInput input {
    margin-bottom: 16px;
  }
}
.ec-input textarea, .ec-birth textarea, .ec-select textarea, .ec-halfInput textarea, .ec-numberInput textarea, .ec-zipInput textarea, .ec-telInput textarea {
  height: auto;
  min-height: 100px;
}
.ec-input p, .ec-birth p, .ec-select p, .ec-halfInput p, .ec-numberInput p, .ec-zipInput p, .ec-telInput p {
  line-height: 1.4;
}
.ec-input .ec-errorMessage, .ec-birth .ec-errorMessage, .ec-select .ec-errorMessage, .ec-halfInput .ec-errorMessage, .ec-numberInput .ec-errorMessage, .ec-zipInput .ec-errorMessage, .ec-telInput .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #de5d50;
}
.error.ec-input input, .error.ec-birth input, .error.ec-select input, .error.ec-halfInput input, .error.ec-numberInput input, .error.ec-zipInput input, .error.ec-telInput input,
.error.ec-input select,
.error.ec-birth select,
.error.ec-select select,
.error.ec-halfInput select,
.error.ec-numberInput select,
.error.ec-zipInput select,
.error.ec-telInput select,
.error.ec-input textarea,
.error.ec-birth textarea,
.error.ec-select textarea,
.error.ec-halfInput textarea,
.error.ec-numberInput textarea,
.error.ec-zipInput textarea,
.error.ec-telInput textarea {
  margin-bottom: 5px;
  border-color: #cf3f34;
  background: #fdf1f0;
}
.ec-checkbox .ec-errorMessage,
.ec-radio .ec-errorMessage {
  margin-bottom: 25px;
  font-size: 12px;
  font-weight: bold;
  color: #de5d50;
}
.error.ec-checkbox input,
.error.ec-checkbox label,
.error.ec-checkbox div,
.error.ec-radio input,
.error.ec-radio label,
.error.ec-radio div {
  border-color: #cf3f34;
  background: #fdf1f0;
}
/*
フォーム（text２つ）

姓名など2つ入力させたい入力項目で使用します。

入力フォームを半分で用意したいときにも利用可能です。

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

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

Styleguide 3.1.2
*/
.ec-halfInput input[type=text] {
  display: inline-block;
  width: 47%;
  margin-left: 2%;
}
@media only screen and (min-width: 768px) {
  .ec-halfInput input[type=text] {
    margin-left: 15px;
    width: 45%;
  }
}
.ec-halfInput .ec-errorMessage {
  display: inline-block;
  width: 47%;
}
@media only screen and (min-width: 768px) {
  .ec-halfInput .ec-errorMessage {
    margin-left: 15px;
    width: 45%;
  }
}
.ec-halfInput input[type=text]:first-of-type,
.ec-halfInput .ec-errorMessage:first-of-type {
  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: 9em;
  font-size: 16px;
}
.ec-zipInput span {
  display: inline-block;
  padding: 0 5px 0 3px;
  margin-left: 5px;
}
.ec-zipInputHelp {
  display: inline-block;
  margin-left: 10px;
  margin-bottom: 16px;
  vertical-align: baseline;
  line-height: 0;
}
.ec-zipInputHelp .ec-zipInputHelp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  background: #111111;
  border-radius: 50%;
  font-size: 13px;
  position: relative;
  top: -6px;
}
.ec-zipInputHelp .ec-zipInputHelp__icon .ec-icon img {
  width: 1em;
  height: 1em;
  line-height: 1;
}
.ec-zipInputHelp span {
  margin-left: 8px;
  display: inline-block;
  color: #0092c4;
  vertical-align: 3px;
}
.ec-zipAuto {
  margin-bottom: 16px;
}
.ec-zipAuto .ec-inlineBtn {
  font-weight: normal;
}
/*
電話番号ボタン

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

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

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

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

Styleguide 3.1.5
*/
.ec-telInput input {
  max-width: 12em;
  text-align: left;
}
/*
フォーム部品(その他)

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

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

Styleguide 3.2
*/
/*
ラジオ（水平）

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

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

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

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

Styleguide 3.2.2
*/
body main select {
  -webkit-appearance: unset !important;
     -moz-appearance: unset !important;
          appearance: unset !important;
  position: relative;
  background-image: url("../icon/icon_select.svg") !important;
  background-repeat: no-repeat;
  background-position: top 50% right 12px;
}
body main input[type=radio] {
  accent-color: #db5331;
}
.ec-radio div {
  display: inline-block;
}
.ec-radio label {
  margin-right: 20px;
}
.ec-radio input {
  margin-right: 10px;
  margin-bottom: 10px;
  accent-color: #db5331;
}
.ec-radio span {
  font-weight: normal;
}
/*
ラジオ(垂直)

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

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

ex [購入画面 お支払方法](http://demo3.ec-cube.net/shopping)

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

Styleguide 3.2.3
*/
.ec-blockRadio label {
  display: block;
}
.ec-blockRadio span {
  padding-left: 10px;
  font-weight: normal;
}
/*
セレクトボックス

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

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

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

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

Styleguide 3.2.4
*/
.ec-selects {
  margin-bottom: 20px;
  border-bottom: 1px dotted #ccc;
}
.ec-select {
  margin-bottom: 16px;
}
.ec-select select {
  display: inline-block;
  width: auto;
  max-width: 100%;
  background-color: rgb(248, 248, 248);
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
.ec-select select:focus {
  box-shadow: none;
}
.ec-select label {
  margin-right: 10px;
  font-weight: bold;
}
.ec-select label:nth-child(3) {
  margin-left: 10px;
  font-weight: bold;
}
.ec-select__delivery {
  display: block;
  margin-right: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-select__delivery {
    display: inline-block;
  }
}
.ec-select__time {
  display: block;
}
@media only screen and (min-width: 768px) {
  .ec-select__time {
    display: inline-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: 80px;
  margin: 0 0 10px;
  background-color: rgb(248, 248, 248);
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
.ec-birth select:focus {
  box-shadow: none;
}
@media only screen and (min-width: 768px) {
  .ec-birth select {
    margin: 0 8px 10px;
  }
}
.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;
  margin-bottom: 5px;
  font-weight: 500;
}
.ec-checkbox input {
  margin-bottom: 10px;
  accent-color: #b88b2d;
}
.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 デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
フォームラベル

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

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

Styleguide 3.3
*/
/*
ラベル

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

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

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

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

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

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


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

Styleguide 3.3.2
*/
.ec-required {
  display: inline-block;
  margin-left: 0.8em;
  vertical-align: 2px;
  color: #de5d50;
  font-size: 12px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .ec-required {
    margin-left: 1em;
  }
}
/*
アイコン

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

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

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

Styleguide 4.1
*/
.ec-icon img {
  max-width: 80px;
  max-height: 80px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
.ec-flex {
  display: block;
  margin: 0;
  justify-content: space-between;
}
@media only screen and (min-width: 768px) {
  .ec-flex {
    display: flex;
  }
}
/*
グリッド

画面を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;
}
@media only screen and (min-width: 768px) {
  .ec-grid2 {
    display: flex;
  }
}
.ec-grid2 .ec-grid2__cell {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid2 .ec-grid2__cell {
    width: 50%;
  }
}
.ec-grid2 .ec-grid2__cell2 {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid2 .ec-grid2__cell2 {
    width: 100%;
  }
}
/*
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;
}
@media only screen and (min-width: 768px) {
  .ec-grid3 {
    display: flex;
  }
}
.ec-grid3 .ec-grid3__cell {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid3 .ec-grid3__cell {
    width: 33.3333333333%;
  }
}
.ec-grid3 .ec-grid3__cell2 {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid3 .ec-grid3__cell2 {
    width: 66.6666666667%;
  }
}
.ec-grid3 .ec-grid3__cell3 {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid3 .ec-grid3__cell3 {
    width: 100%;
  }
}
/*
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;
}
@media only screen and (min-width: 768px) {
  .ec-grid4 {
    display: flex;
  }
}
.ec-grid4 .ec-grid4__cell {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid4 .ec-grid4__cell {
    width: 25%;
  }
}
/*
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;
}
@media only screen and (min-width: 768px) {
  .ec-grid6 {
    display: flex;
  }
}
.ec-grid6 .ec-grid6__cell {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid6 .ec-grid6__cell {
    width: 16.6666666667%;
  }
}
.ec-grid6 .ec-grid6__cell2 {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid6 .ec-grid6__cell2 {
    width: 33.3333333333%;
  }
}
.ec-grid6 .ec-grid6__cell3 {
  position: relative;
  min-height: 1px;
}
@media (min-width: 768px) {
  .ec-grid6 .ec-grid6__cell3 {
    width: 50%;
  }
}
/*
中央寄せグリッド 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;
}
@media only screen and (min-width: 768px) {
  .ec-off1Grid {
    display: block;
    margin: 0;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .ec-off1Grid {
    display: flex;
  }
}
.ec-off1Grid .ec-off1Grid__cell {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .ec-off1Grid .ec-off1Grid__cell {
    position: relative;
    min-height: 1px;
    margin-left: 8.3333333333%;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .ec-off1Grid .ec-off1Grid__cell {
    width: 83.3333333333%;
  }
}
/*
中央寄せグリッド 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;
}
@media only screen and (min-width: 768px) {
  .ec-off2Grid {
    display: flex;
  }
}
.ec-off2Grid .ec-off2Grid__cell {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .ec-off2Grid .ec-off2Grid__cell {
    position: relative;
    min-height: 1px;
    margin-left: 16.6666666667%;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .ec-off2Grid .ec-off2Grid__cell {
    width: 66.6666666667%;
  }
}
/*
中央寄せグリッド 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;
}
@media only screen and (min-width: 768px) {
  .ec-off3Grid {
    display: flex;
  }
}
.ec-off3Grid .ec-off3Grid__cell {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .ec-off3Grid .ec-off3Grid__cell {
    position: relative;
    min-height: 1px;
    margin-left: 25%;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .ec-off3Grid .ec-off3Grid__cell {
    width: 50%;
  }
}
/*
中央寄せグリッド 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;
}
@media only screen and (min-width: 768px) {
  .ec-off4Grid {
    display: flex;
  }
}
.ec-off4Grid .ec-off4Grid__cell {
  margin: 0;
}
@media only screen and (min-width: 768px) {
  .ec-off4Grid .ec-off4Grid__cell {
    position: relative;
    min-height: 1px;
    margin-left: 33.3333333333%;
  }
}
@media only screen and (min-width: 768px) and (min-width: 768px) {
  .ec-off4Grid .ec-off4Grid__cell {
    width: 33.3333333333%;
  }
}
/*
グリッドオプション

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

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

オリジナルグリッド（レイアウト用）

*/
.ec-originalGrid {
  max-width: 784px;
  margin: 0 auto;
}
/*

オリジナルグリッド（商品詳細用）

*/
.ec-originalGrid2 {
  max-width: 1232px;
  margin: 0 auto;
}
@media (min-width: 920px) {
  .ec-originalGrid2__inner {
    display: grid;
    gap: 0 56px;
    grid-template-columns: 55.8441558442% 39.6103896104%;
    grid-template-rows: auto 1fr;
  }
}
.ec-originalGrid2__productCell {
  grid-column: 1;
  grid-row: 1;
}
.ec-originalGrid2__cartCell {
  grid-column: 2;
  grid-row: 1/3;
  margin-bottom: 33px;
  padding-bottom: 33px;
  border-bottom: 1px solid #F8F5ED;
}
@media (min-width: 920px) {
  .ec-originalGrid2__cartCell {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
}
.ec-originalGrid2__infoCell {
  grid-column: 1;
  grid-row: 2;
}
/*
オリジナルグリッド（お問い合わせ用）
*/
.ec-originalGrid3 {
  max-width: 840px;
  margin: 0 auto;
}
.ec-originalGrid4 {
  max-width: 1080px;
  margin: 0 auto;
}
.ec-btnGrid {
  max-width: 305px;
  margin: 0 auto;
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
レイアウト

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

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

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

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

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

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

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


Styleguide 5.2.1
*/
.ec-imageGrid {
  display: table;
  width: 100%;
}
.ec-imageGrid .ec-imageGrid__img {
  display: table-cell;
  padding: 10px 0;
  width: 100px;
}
@media only screen and (min-width: 768px) {
  .ec-imageGrid .ec-imageGrid__img {
    padding: 10px 0;
    width: 130px;
  }
}
.ec-imageGrid .ec-imageGrid__img img {
  width: 100%;
}
.ec-imageGrid .ec-imageGrid__content {
  vertical-align: middle;
  display: table-cell;
  padding-left: 20px;
}
.ec-imageGrid .ec-imageGrid__content span {
  margin-left: 10px;
}
.ec-imageGrid .ec-imageGrid__content p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 700;
}
.ec-imageGrid .ec-imageGrid__content p a {
  color: inherit;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
ログイン

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

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

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

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

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

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


Styleguide 6.1.1
*/
.ec-loginBlock {
  max-width: 619px;
  margin: 64px auto 0;
}
.ec-login {
  margin: 0 0 20px;
  padding: 64px;
  border-radius: 24px;
  height: auto;
  background: #f6f2e8;
  border: 1px solid #111111;
  box-sizing: border-box;
}
@media only screen and (min-width: 768px) {
  .ec-login {
    padding: 64px;
  }
}
.ec-login .ec-login__header {
  text-align: center;
}
.ec-login .ec-login__header__logo {
  width: 261px;
  margin: 0 auto 40px;
}
.ec-login .ec-login__header h1, .ec-login .ec-login__header .h1 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 32px;
}
.ec-login .ec-icon {
  margin-bottom: 10px;
}
.ec-login .ec-icon img {
  width: 90px;
  height: 90px;
  display: inline-block;
}
.ec-login .ec-login__input input[type=email],
.ec-login .ec-login__input input[type=password],
.ec-login .ec-login__input input[type=text] {
  border: none;
  font-size: 16px;
  height: 56px;
  padding-left: 56px;
  position: relative;
  border-radius: 8px;
}
.ec-login .ec-login__input .ec-checkbox span {
  margin-left: 5px;
  font-weight: normal;
}
.ec-login .ec-login__mailInput {
  position: relative;
}
.ec-login .ec-login__mailInput::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../icon/icon_login.svg") no-repeat;
  background-size: contain;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
}
.ec-login .ec-login__passInput {
  position: relative;
}
.ec-login .ec-login__passInput::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../icon/icon_password.svg") no-repeat;
  background-size: contain;
  position: absolute;
  left: 16px;
  top: 16px;
  z-index: 2;
}
.ec-login .ec-login__actions {
  color: #fff;
  margin-bottom: 16px;
}
.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__block {
  margin: 32px 0;
}
.ec-login .ec-login__link {
  margin-left: 0;
}
.ec-login .ec-login__link a.ec-link {
  font-size: 12px;
  color: #111111;
  text-decoration: underline;
}
.ec-login .ec-login__link .ec-blockBtn {
  background-color: #c3976f;
  color: #fff;
}
.ec-login .ec-errorMessage {
  color: #de5d50;
  margin-bottom: 20px;
}
/*
ゲスト購入

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

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

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

Styleguide 6.1.2
*/
.ec-guest {
  display: table;
  margin: 0;
  padding: 13%;
  height: auto;
  box-sizing: border-box;
  background: #f3f4f4;
}
@media only screen and (min-width: 768px) {
  .ec-guest {
    height: 100%;
    margin: 0 16px;
  }
}
.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 デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * 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;
}
@media only screen and (min-width: 768px) {
  .ec-displayB {
    flex-direction: row;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-displayB .ec-displayB__cell {
    width: 31.4466%;
    margin-bottom: 0;
  }
}
.ec-displayB .ec-displayB__cell:hover {
  text-decoration: none;
}
.ec-displayB .ec-displayB__cell:hover img {
  opacity: 0.8;
}
.ec-displayB .ec-displayB__cell:hover a {
  text-decoration: none;
}
.ec-displayB .ec-displayB__img {
  margin-bottom: 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: #111111;
  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;
}
@media only screen and (min-width: 768px) {
  .ec-displayC .ec-displayC__cell {
    width: 22.8775%;
  }
}
.ec-displayC .ec-displayC__cell:hover a {
  text-decoration: none;
}
.ec-displayC .ec-displayC__cell:hover img {
  opacity: 0.8;
}
.ec-displayC .ec-displayC__img {
  display: block;
  width: 100%;
  margin-bottom: 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: #111111;
}
.ec-displayC .ec-displayC__price {
  display: block;
  width: 100%;
  font-weight: bold;
  color: #111111;
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-displayD {
    box-sizing: border-box;
    flex-wrap: nowrap;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-displayD .ec-displayD__cell {
    width: 14.3083%;
    margin-bottom: 16px;
  }
}
.ec-displayD .ec-displayD__cell:hover {
  text-decoration: none;
}
.ec-displayD .ec-displayD__cell:hover img {
  opacity: 0.8;
}
.ec-displayD .ec-displayD__img {
  display: block;
  width: 100%;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * 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: -0.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;
}
@media only screen and (min-width: 768px) {
  .ec-topicpath {
    padding: 30px 0 10px;
    border: 0;
    font-size: 16px;
  }
}
.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 デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
@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;
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
カート

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

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


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

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

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

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

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

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

Styleguide 7.3.1
*/
.ec-progress {
  margin: 0 auto;
  padding: 8px 0 16px;
  display: table;
  table-layout: fixed;
  width: 100%;
  max-width: 600px;
  list-style: none;
}
@media only screen and (min-width: 768px) {
  .ec-progress {
    margin-bottom: 50px;
    padding: 0;
  }
}
.ec-progress .ec-progress__item {
  display: table-cell;
  position: relative;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  z-index: 10;
}
.ec-progress .ec-progress__item:after {
  content: "";
  position: absolute;
  display: block;
  background: #E6E6E6;
  width: 100%;
  height: 0.25em;
  top: 1.25em;
  left: 50%;
  margin-left: 1.5em\9 ;
  z-index: -1;
}
.ec-progress .ec-progress__item:last-child:after {
  display: none;
}
.ec-progress .ec-progress__number {
  line-height: 30px;
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
  font-size: 12px;
  background: #b88b2d;
  color: #fff;
  top: 0;
  left: 18px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  border-radius: 50%;
}
@media only screen and (min-width: 768px) {
  .ec-progress .ec-progress__number {
    line-height: 42px;
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
}
.ec-progress .ec-progress__label {
  font-size: 12px;
}
.ec-progress .is-complete .ec-progress__number {
  background: #C3976F;
}
.ec-progress .is-complete .ec-progress__label {
  color: #C3976F;
}
/*
カートナビゲーション

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

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
*/
@media only screen and (min-width: 768px) {
  .ec-cartNaviWrap {
    position: relative;
  }
}
.ec-cartNavi {
  position: relative;
  margin-left: 8px;
  transition: 300ms margin ease;
}
@media only screen and (min-width: 768px) {
  .ec-cartNavi {
    position: relative;
    margin-left: 16px;
  }
}
.ec-cartNavi .ec-cartNavi__link {
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #111111;
  text-indent: -9999px;
  background: #fff url("../icon/icon_cart.svg") no-repeat center;
  background-size: 15px 15px;
  position: relative;
  top: -2px;
  transition: 300ms width ease, 300ms height ease, 300ms background-size ease;
}
@media only screen and (min-width: 768px) {
  .ec-cartNavi .ec-cartNavi__link {
    background-size: auto auto;
    width: 56px;
    height: 56px;
  }
}
.ec-cartNavi .ec-cartNavi__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 99999px;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  font-size: 11px;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  background-color: #e94f2a;
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .ec-cartNavi .ec-cartNavi__badge {
    width: 24px;
    height: 24px;
  }
}
.ec-cartNavi .ec-cartNavi__price {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-cartNavi .ec-cartNavi__price {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    vertical-align: middle;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .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;
}
@media only screen and (min-width: 768px) {
  .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-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;
}
@media only screen and (min-width: 768px) {
  .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-cartNaviNull .ec-cartNaviNull__message {
  border: 1px solid #d9d9d9;
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #f99;
}
.ec-cartNaviNull .ec-cartNaviNull__message p {
  margin: 0;
}
.ec-cartNaviNull.is-active {
  display: block;
}
/*
総計

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

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

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

Styleguide 7.3.8
*/
.ec-totalBox {
  background: #f3f3f3;
  padding: 16px;
  margin-bottom: 16px;
}
.ec-totalBox .ec-totalBox__spec {
  display: flex;
  justify-content: space-between;
  -ms-flex-pack: space-between;
  margin-bottom: 8px;
}
.ec-totalBox .ec-totalBox__spec dt {
  font-weight: normal;
  text-align: left;
}
.ec-totalBox .ec-totalBox__spec dd {
  text-align: right;
}
.ec-totalBox .ec-totalBox__spec .ec-totalBox .ec-totalBox__spec__specTotal {
  color: #de5d50;
}
.ec-totalBox .ec-totalBox__total {
  border-top: 1px dotted #ccc;
  padding: 8px 0;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
}
.ec-totalBox .ec-totalBox__paymentTotal {
  border-top: 1px dotted #ccc;
  padding: 8px 0;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
}
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__price,
.ec-totalBox .ec-totalBox__paymentTotal .ec-totalBox__taxLabel {
  color: #de5d50;
}
.ec-totalBox .ec-totalBox__price {
  margin-left: 16px;
  font-size: 16px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-totalBox .ec-totalBox__price {
    font-size: 24px;
  }
}
.ec-totalBox .ec-totalBox__taxLabel {
  margin-left: 8px;
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .ec-totalBox .ec-totalBox__taxLabel {
    font-size: 14px;
  }
}
.ec-totalBox .ec-totalBox__taxRate {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  font-size: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-totalBox .ec-totalBox__taxRate {
    font-size: 12px;
  }
}
.ec-totalBox .ec-totalBox__taxRate dt {
  font-weight: normal;
  text-align: left;
  margin-right: 8px;
}
.ec-totalBox .ec-totalBox__taxRate dt::before {
  content: "[ ";
}
.ec-totalBox .ec-totalBox__taxRate dd {
  text-align: right;
}
.ec-totalBox .ec-totalBox__taxRate dd::after {
  content: " ]";
}
.ec-totalBox .ec-totalBox__pointBlock {
  padding: 18px 20px 10px;
  margin-bottom: 10px;
  background: #fff;
}
.ec-totalBox .ec-totalBox__btn {
  color: #fff;
}
.ec-totalBox .ec-totalBox__btn a {
  color: inherit;
  text-decoration: none;
}
.ec-totalBox .ec-totalBox__btn a:hover {
  text-decoration: none;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--action {
  font-size: 16px;
  font-weight: bold;
}
.ec-totalBox .ec-totalBox__btn .ec-blockBtn--cancel {
  margin-top: 8px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
お知らせ

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

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;
}
@media only screen and (min-width: 768px) {
  .ec-news {
    margin-right: 3%;
  }
}
@media only screen and (min-width: 768px) {
  .ec-news {
    margin-bottom: 32px;
  }
}
.ec-news .ec-news__title {
  font-weight: bold;
  padding: 8px;
  font-size: 16px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-news .ec-news__title {
    padding: 16px;
    text-align: left;
    font-size: 24px;
  }
}
.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 0.2s ease-out;
}
.ec-newsline.is_active .ec-newsline__description {
  height: auto;
  transition: all 0.2s ease-out;
  padding-bottom: 16px;
}
.ec-newsline.is_active .ec-icon img {
  transform: rotateX(180deg);
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
マイページ

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

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
*/
.mypage .ec-layoutRole .ec-layoutRole__contents {
  max-width: 1200px;
  padding: 0;
  margin: 0 auto 120px;
}
.ec-mypage__main {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
  .ec-mypage__main {
    width: auto;
    margin-bottom: 0;
  }
}
.ec-mypage__side {
  background: #fbf8f1;
  border-radius: 16px;
  padding: 12px 32px;
}
@media only screen and (min-width: 768px) {
  .ec-mypage__side {
    width: auto;
  }
}
.ec-mypage__side h3, .ec-mypage__side .h3 {
  background: #fff;
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
  border-radius: 16px;
  padding: 14px 24px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.ec-mypage__side h3::before, .ec-mypage__side .h3::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url("../icon/icon_mypage.svg") no-repeat;
}
@media only screen and (min-width: 768px) {
  .ec-mypageBlock {
    display: grid;
    grid-template-columns: 744px 400px;
    gap: 56px;
    justify-content: space-between;
    align-items: flex-start;
  }
}
.ec-navlistRole #stripe_payment_mypage_card_info {
  display: none;
}
.ec-navlistRole .ec-navlistRole__navlist2 {
  padding: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px dotted #d2d2d2;
  list-style: none;
}
.ec-navlistRole .ec-navlistRole__navlist2 a {
  color: inherit;
  text-decoration: none;
}
.ec-navlistRole .ec-navlistRole__navlist2 a:hover {
  text-decoration: none;
}
.ec-navlistRole .ec-navlistRole__navlist2 li {
  margin-bottom: 12px;
}
.ec-navlistRole .ec-navlistRole__navlist2 li:last-child {
  margin-bottom: 0;
}
.ec-navlistRole .ec-navlistRole__navlist2 li a {
  font-size: 14px;
}
.ec-navlistRole .ec-navlistRole__navlist {
  padding: 0;
  margin: 0;
  list-style: none;
}
.ec-navlistRole .ec-navlistRole__navlist a {
  color: inherit;
  text-decoration: none;
}
.ec-navlistRole .ec-navlistRole__navlist a:hover {
  text-decoration: none;
}
.ec-navlistRole .ec-navlistRole__item {
  border-bottom: 1px solid #efe9dc;
}
.ec-navlistRole .ec-navlistRole__item:last-child {
  border-bottom: none;
}
.ec-navlistRole .ec-navlistRole__item:hover {
  background: #f5efe2;
}
.ec-navlistRole .ec-navlistRole__item.subscription a::before {
  background: url("../icon/icon_subscription.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.history a::before {
  background: url("../icon/icon_bag.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.change a::before {
  background: url("../icon/icon_member.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.petinfo a::before {
  background: url("../icon/icon_pet.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.delivery a::before {
  background: url("../icon/icon_delivery.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.cardchange a::before {
  background: url("../icon/icon_card.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.changepass a::before {
  background: url("../icon/icon_pass.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item.logout a::before {
  background: url("../icon/icon_logout.svg") no-repeat;
  background-size: contain;
}
.ec-navlistRole .ec-navlistRole__item a {
  margin: auto;
  padding: 24px 10px;
  width: 100%;
  display: flex;
  font-weight: 500;
  font-size: 16px;
  align-items: center;
  line-height: 1;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-navlistRole .ec-navlistRole__item a::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
}
.ec-navlistRole .active a {
  color: #de5d50;
}
/*
マイページ（お気に入り機能無効）

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

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

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

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

Styleguide 9.1.2
*/
/*
Welcome メッセージ

マイページで表示するログイン名の表示コンポーネントです。

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

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

Styleguide 9.1.3
*/
.ec-welcomeMsg {
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  margin: 1em 0;
  padding-bottom: 32px;
  text-align: center;
  border-bottom: 1px dotted #ccc;
}
.ec-welcomeMsg:after {
  content: " ";
  display: table;
}
.ec-welcomeMsg:after {
  clear: both;
}
.ec-welcomeMsg textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-welcomeMsg ul,
.ec-welcomeMsg ol {
  list-style: none;
}
.ec-welcomeMsg img {
  max-width: 100%;
}
.ec-welcomeMsg html {
  box-sizing: border-box;
}
.ec-welcomeMsg *,
.ec-welcomeMsg *::before,
.ec-welcomeMsg *::after {
  box-sizing: inherit;
}
.ec-welcomeMsg img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-welcomeMsg {
    padding-left: 26px;
    padding-right: 26px;
  }
}
/*
お気に入り一覧

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

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 {
  margin-bottom: 10px;
  text-align: center;
}
.ec-favoriteRole .ec-favoriteRole__item img {
  width: auto;
  max-height: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-favoriteRole .ec-favoriteRole__item {
    width: 25%;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .mypage .ec-mypageRole {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
.mypage .ec-mypage__main .ec-editRole {
  border-radius: 12px !important;
  border: 1px solid #d2cec8 !important;
}
.mypage .mypage-block-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 18px 24px !important;
  background: #fff !important;
  border-bottom: 1px solid #ebe7e1 !important;
  border-radius: 12px 12px 0 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
.mypage .mypage-block-title .ec-icon {
  margin: 0 !important;
}
.mypage .mypage-block-title .ec-icon img {
  width: 20px !important;
  height: 20px !important;
}
.mypage .mypage-block-title .ec-mypageTopRole__headerCount {
  margin-left: auto !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: #111 !important;
}
.mypage .mypage-block-title .ec-mypageTopRole__headerCount span,
.mypage .mypage-block-title .ec-mypageTopRole__headerCount .num {
  color: #111 !important;
}
.mypage .order-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 64px 24px 72px !important;
}
.mypage .order-empty .order-empty__text {
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #8a857e !important;
}
.mypage .order-empty .order-empty__note {
  margin: 8px 0 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  color: #8a857e !important;
}
.mypage .ec-editRole input[type=text],
.mypage .ec-editRole input[type=email],
.mypage .ec-editRole input[type=tel],
.mypage .ec-editRole input[type=password],
.mypage .ec-editRole input[type=number],
.mypage .ec-editRole select {
  height: 44px !important;
  font-size: 16px !important;
  padding: 0 14px !important;
  border: 1px solid #ccc !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  line-height: normal !important;
}
.mypage .ec-editRole select {
  padding-right: 36px !important;
}
.mypage .ec-editRole input[type=radio],
.mypage .ec-editRole input[type=checkbox] {
  accent-color: #b88b2d !important;
}
.mypage #zip-search-btn.ec-inlineBtn {
  background: #b88b2d !important;
  border: 1px solid #b88b2d !important;
  color: #fff !important;
}
.mypage #zip-search-btn.ec-inlineBtn:hover {
  background: #c39d4a !important;
  border-color: #c39d4a !important;
  color: #fff !important;
}
.mypage .ec-editRole .gd-change-complete__text {
  margin: 0 !important;
  padding: 48px 24px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #111 !important;
  text-align: center !important;
}
.mypage .ec-mypage__main {
  font-size: 15px !important;
  font-weight: 500 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs.view_solid_border {
  border: 1px solid #d2cec8 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
  margin: 0 0 24px !important;
  width: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title {
  background: #fafafa !important;
  border-bottom: 1px solid #ebe7e1 !important;
  border-radius: 12px 12px 0 0 !important;
  margin: 0 !important;
  padding: 18px 24px !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title h5, .mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title .h5 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #111 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title .tl_order_id {
  color: #77736d !important;
  font-weight: 400 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__inner {
  padding: 24px !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs dt {
  color: #77736d !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs dd {
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-mypageTopRole__actionBar {
  background: transparent !important;
  padding: 16px 24px 0 !important;
}
.mypage .ec-mypage__main .ec-addressList {
  padding-top: 0 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs.view_solid_border:first-child {
  margin-top: 0 !important;
}
.mypage .ec-blockBtn--cancel {
  background: #fff !important;
  color: #77736d !important;
  border: 1px solid #d2cec8 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 240px !important;
}
.mypage .ec-blockBtn--cancel:hover:not(:disabled) {
  background: #f5efe2 !important;
  color: #55514d !important;
  border-color: #c8c2b8 !important;
}
.mypage .mypage_main_footer {
  border-top: none !important;
}
@media (max-width: 767px) {
  .mypage .ec-layoutRole__main {
    padding-top: 0 !important;
  }
}
.mypage .gd-history-back-top .ec-blockBtn--cancel.min {
  height: 30px !important;
  line-height: 1 !important;
}
@media (max-width: 767px) {
  .mypage .ec-pageHeader h1, .mypage .ec-pageHeader .h1 {
    text-align: left !important;
    margin-bottom: 16px !important;
  }
}
@media (max-width: 767px) {
  body.mypage .ec-layoutRole .ec-layoutRole__contents .ec-layoutRole__main {
    padding-top: 0 !important;
  }
  body.mypage .ec-layoutRole .ec-layoutRole__contents {
    padding-top: 28px !important;
    margin-bottom: 40px !important;
  }
}
@media (max-width: 767px) {
  .mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__inner {
    padding: 16px !important;
  }
  .delivery-card__body,
  .coupon-card__body {
    padding: 8px 16px 12px !important;
  }
  .mypage .ec-mypage__main.history .ec-borderedDefs__inner {
    padding: 16px !important;
  }
  /* 見出し帯もSPで詰める */
  .mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title,
  .coupon-card__header,
  .delivery-card__header {
    padding: 14px 16px !important;
  }
}
@media (max-width: 767px) {
  .mypage .ec-mypage__main .ec-addressList .ec-borderedDefs dt,
  .mypage .ec-mypage__main.history .ec-borderedDefs dt,
  .delivery-card__body dt,
  .coupon-card__body dt {
    font-size: 13px !important;
  }
}
@media (max-width: 767px) {
  .mypage .order-empty .order-empty__text,
  .delivery-empty__text,
  .ec-couponBox__empty {
    font-size: 15px !important;
  }
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs .ec-borderedDefs__inner dl:last-child {
  border-bottom: none !important;
}
.mypage .ec-mypage__main.history .ec-borderedDefs .ec-borderedDefs__inner dl {
  border-bottom: 1px solid #ebe7e1 !important;
}
.mypage .ec-mypage__main.history .ec-borderedDefs .ec-borderedDefs__inner dl:last-child {
  border-bottom: none !important;
}
.mypage .ec-mypage__main.history .mypage-block-title {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.mypage .ec-mypage__main.history .ec-borderedDefs__inner {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
@media (max-width: 767px) {
  .mypage .ec-mypage__main.history .mypage-block-title,
  .mypage .ec-mypage__main.history .ec-borderedDefs__inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}
.mypage .ec-mypage__main.history .ec-borderedDefs {
  padding: 0 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs .ec-borderedDefs__inner dl {
  border-bottom: 1px solid #ebe7e1 !important;
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs .ec-borderedDefs__inner dl:last-child {
  border-bottom: none !important;
}
@media (max-width: 767px) {
  .mypage .ec-mypage__main.history .ec-orderDelivery__item .ec-imageGrid__img {
    flex: 0 0 64px !important;
    width: 64px !important;
    height: 64px !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .mypage .ec-mypage__main.history .ec-orderDelivery__item .ec-imageGrid__img img {
    width: 64px !important;
    height: 64px !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
    display: block !important;
  }
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title .tl_order_no {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title .tl_order_no {
    font-size: 14px !important;
  }
}
.mypage .ec-mypage__main .ec-addressList .ec-borderedDefs__title .tl_order_date {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: #77736d;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.mypage .gd-card-last4 {
  color: #77736d;
  margin-left: 4px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
.ec-original__layout {
  border: 2px solid #f6f2e8;
  border-radius: 8px;
  overflow: hidden;
}
.ec-original__layout__header {
  background: #f6f2e8;
  padding: 15px 20px;
}
.ec-original__layout__title {
  margin: 0;
  font-size: 18px;
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
}
.ec-original__layout__title.-entry::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../icon/icon_entry.svg") no-repeat;
}
.ec-original__layout__title.-pet::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../icon/icon_pet.svg") no-repeat;
}
.ec-original__layout__inner {
  padding: 28px 32px 32px;
}
.ec-topicPath {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-topicPath {
    display: block;
  }
}
.ec-topicPath ol {
  justify-content: flex-start;
  padding-left: 0;
  margin: 0 0 32px;
  -moz-column-gap: 8px;
       column-gap: 8px;
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-topicPath ol {
    display: flex;
  }
}
.ec-topicPath ol li {
  font-size: 13px;
  font-weight: 500;
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-topicPath ol li:first-child::before {
  content: none;
}
.ec-topicPath ol li::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url("../img/common/icon_topicPath.svg") no-repeat;
  background-size: contain;
  position: relative;
  top: 2px;
}
.ec-topicPath ol li a {
  color: #111111;
}
.gd-prodgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.gd-prodgrid__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid #ece6e0;
  border-radius: 12px;
  overflow: hidden;
}
.gd-prodgrid__panel {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  background: #f5f1ea;
  border-radius: 12px 12px 0 0;
  border-bottom: 1px solid #e6e0d6;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
}
.gd-prodgrid__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.4s ease;
}
.gd-prodgrid__item:hover .gd-prodgrid__img {
  transform: scale(1.04);
}
.gd-prodgrid__body {
  padding: 20px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.gd-prodgrid__label {
  align-self: flex-start;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--bs-body-font-family);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.gd-prodgrid__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #be9949;
}
.gd-prodgrid__label--chicken {
  color: #ad642d;
}
.gd-prodgrid__label--chicken::before {
  background: #ad642d;
}
.gd-prodgrid__label--horse {
  color: #bc2258;
}
.gd-prodgrid__label--horse::before {
  background: #bc2258;
}
.gd-prodgrid__label--venison {
  color: #668d37;
}
.gd-prodgrid__label--venison::before {
  background: #668d37;
}
.gd-prodgrid__label--fish {
  color: #1188b0;
}
.gd-prodgrid__label--fish::before {
  background: #1188b0;
}
.gd-prodgrid__name {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: 20px;
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.02em;
  line-height: 1.4;
}
.gd-prodgrid__desc {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: 15px;
  font-weight: 500;
  color: #111;
  line-height: 1.85;
  letter-spacing: 0.01em;
}
@media (max-width: 900px) {
  .gd-prodgrid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .gd-prodgrid::-webkit-scrollbar {
    display: none;
  }
  .gd-prodgrid__item {
    flex: 0 0 100%;
    scroll-snap-align: center;
  }
  .gd-prodgrid__panel {
    aspect-ratio: 4/3;
    padding: 10px;
  }
  .gd-prodgrid__img {
    max-width: 62%;
    max-height: 92%;
  }
  .gd-prodgrid__body {
    padding: 20px;
  }
  .gd-prodgrid__name {
    font-size: 18px;
  }
  .gd-prodgrid__desc {
    font-size: 14px;
    line-height: 1.9;
  }
}
.gd-prodgrid-dots {
  display: none;
}
@media (max-width: 900px) {
  .gd-prodgrid-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 20px;
  }
}
.gd-prodgrid-dots__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #d8cfc2;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.gd-prodgrid-dots__dot[aria-current=true] {
  background: #7a6f62;
  transform: scale(1.15);
}
.ec-productRole__others .section-heading .gd-heading__eyebrow {
  position: relative;
  margin-top: 0;
  padding-bottom: 20px;
}
.ec-productRole__others .section-heading .gd-heading__eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 1px;
  background: #be9949;
}
.ec-productRole__others .section-heading {
  margin-bottom: 52px;
}
html body .ec-productRole__others {
  padding-top: 100px !important;
  padding-bottom: 148px !important;
  border-top: 1px solid #e6ddd0 !important;
}
@media (max-width: 900px) {
  html body .ec-productRole__others {
    padding-top: 64px !important;
    padding-bottom: 80px !important;
  }
  html body .ec-productRole__others .section-heading {
    margin-bottom: 32px !important;
  }
}
.gd-prodgrid__badge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid #111;
  border-radius: 999px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}
@media (max-width: 900px) {
  .gd-prodgrid__badge {
    font-size: 11px;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
標準セクション

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

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

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

Styleguide 11.1
*/
.ec-role {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-role:after {
  content: " ";
  display: table;
}
.ec-role:after {
  clear: both;
}
.ec-role textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-role ul,
.ec-role ol {
  list-style: none;
}
.ec-role img {
  max-width: 100%;
}
.ec-role html {
  box-sizing: border-box;
}
.ec-role *,
.ec-role *::before,
.ec-role *::after {
  box-sizing: inherit;
}
.ec-role img {
  width: 100%;
}
/*
マイページセクション

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

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

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

Styleguide 11.1.2
*/
.ec-mypageRole {
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
}
.ec-mypageRole:after {
  content: " ";
  display: table;
}
.ec-mypageRole:after {
  clear: both;
}
.ec-mypageRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-mypageRole ul,
.ec-mypageRole ol {
  list-style: none;
}
.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%;
}
@media only screen and (min-width: 768px) {
  .ec-mypageRole {
    padding-left: 26px;
    padding-right: 26px;
  }
}
@media only screen and (min-width: 768px) {
  .ec-mypageRole .ec-pageHeader h1, .ec-mypageRole .ec-pageHeader .h1 {
    margin: 10px 0 48px;
    padding: 8px 0 18px;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * 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 {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  transition: transform 0.3s;
}
.ec-layoutRole .ec-layoutRole__header {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 200;
  height: 72px;
  padding: 16px 24px;
  background: #fff;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__header {
    height: 128px;
    padding: 32px 20px 0;
    transition: 300ms height ease, 300ms padding ease;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled {
    height: 80px;
    padding: 12px 40px 0;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-headerRole__logo {
    width: 200px;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-headerNaviRole__list {
    padding-top: 0;
    padding-bottom: 0;
    position: relative;
    top: 7px;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-headerNaviRole__list > li > a {
    padding: 8px 0;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-cartNavi {
    margin-left: 8px;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-headerNaviRole__right {
    top: 8px;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-headerNav .ec-headerNav__item a {
    width: 40px;
    height: 40px;
    background-size: 17px 17px;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-cartNavi__link {
    width: 40px;
    height: 40px;
    background-size: 17px 17px;
  }
  .ec-layoutRole .ec-layoutRole__header.is-scrolled .ec-headerNaviRole__megamenu {
    top: 6px;
  }
}
@media (min-width: 1320px) {
  .ec-layoutRole .ec-layoutRole__header {
    padding: 32px 40px 0;
  }
}
.ec-layoutRole .ec-layoutRole__header .ec-headerNaviRole {
  padding: 0;
}
.ec-layoutRole .ec-layoutRole__contentTop {
  padding: 0;
}
.ec-layoutRole .ec-layoutRole__contents {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-wrap: nowrap;
  flex-grow: 1;
}
.ec-layoutRole .ec-layoutRole__main {
  width: 100%;
}
.ec-layoutRole .ec-layoutRole__mainWithColumn {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__mainWithColumn {
    width: 75%;
  }
}
.ec-layoutRole .ec-layoutRole__mainBetweenColumn {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__mainBetweenColumn {
    width: 50%;
  }
}
.ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-layoutRole .ec-layoutRole__left, .ec-layoutRole .ec-layoutRole__right {
    display: block;
    width: 25%;
  }
}
.ec-headerRole {
  padding: 32px 40px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: auto;
}
.ec-headerRole:after {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole:after {
    content: " ";
    display: table;
  }
  .ec-headerRole:after {
    clear: both;
  }
}
.ec-headerRole::before {
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole {
    width: 100%;
  }
  .ec-headerRole:after {
    content: " ";
    display: table;
  }
  .ec-headerRole:after {
    clear: both;
  }
}
.ec-headerRole__logo {
  width: 152px;
  position: absolute;
  top: 0;
  left: 0;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole__logo {
    width: 200px;
    transition: 300ms width ease;
  }
}
@media (min-width: 1200px) {
  .ec-headerRole__logo {
    width: 260px;
  }
}
.ec-headerRole__logo img {
  max-width: 100%;
  display: block;
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-headerRole .ec-headerRole__navSP {
    display: none;
  }
}
.ec-headerNaviRole {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.ec-headerNaviRole .fa-bars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole {
    padding-bottom: 40px;
  }
}
@media (min-width: 1500px) {
  .ec-headerNaviRole {
    justify-content: center;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__search {
  display: none;
}
@media only screen and (min-width: 768px) {
  .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: block;
}
@media only screen and (min-width: 768px) {
  .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__right {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.ec-headerNaviRole .ec-headerNaviRole__list {
  list-style: none;
  -moz-column-gap: 12px;
       column-gap: 12px;
  margin-bottom: 0;
  background: rgba(248, 245, 237, 0.6);
  padding: 0 20px;
  border-radius: 30px;
  display: none;
  transition: 300ms top ease, 300ms padding ease;
}
@media (min-width: 1120px) {
  .ec-headerNaviRole .ec-headerNaviRole__list {
    display: flex;
    margin-right: 140px;
  }
}
@media (min-width: 1280px) {
  .ec-headerNaviRole .ec-headerNaviRole__list {
    padding: 0 40px;
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__list li.is-active > a::after {
  transform: rotate(180deg);
}
.ec-headerNaviRole .ec-headerNaviRole__list li > a {
  color: var(--bs-black);
  font-size: 16px;
  padding: 16px 0;
  display: block;
  font-weight: 700;
  color: #111111;
  letter-spacing: 0.04em;
}
.ec-headerNaviRole .ec-headerNaviRole__list li > a.ac {
  display: flex;
  -moz-column-gap: 4px;
       column-gap: 4px;
}
.ec-headerNaviRole .ec-headerNaviRole__list li > a.ac::after {
  display: block;
  content: "";
  width: 24px;
  height: 24px;
  background: url("../icon/icon_down.svg") no-repeat;
}
.ec-headerNaviRole .ec-headerNaviRole__overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: -1;
  display: none;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu {
  background: #fbfbfb;
  position: fixed;
  left: 16px;
  top: 16px;
  right: 16px;
  z-index: -1;
  border-radius: 16px;
  padding: 118px 20px 64px;
  display: none;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__inner {
  max-width: 1200px;
  margin: 0 auto;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__title {
  margin-bottom: 40px;
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__title span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 48px;
  font-weight: 200;
  margin-right: 16px;
  display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__list {
  padding: 0;
  margin: 0 0 47px;
  list-style: none;
  display: flex;
  -moz-column-gap: 32px;
       column-gap: 32px;
  text-align: center;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__list li {
  width: calc((100% - 128px) / 5);
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__list li figure {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__list li figure img {
  width: 100%;
  max-width: 100%;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__list li h3, .ec-headerNaviRole .ec-headerNaviRole__megamenu__list li .h3 {
  font-size: 18px;
  font-weight: 700;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__price {
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__price .yen {
  font-size: 18px;
  font-emphasize: 700px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__price .num {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__price .note {
  font-size: 12px;
  font-weight: 500;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  -moz-column-gap: 24px;
       column-gap: 24px;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial a {
  color: #111111;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block {
  display: flex;
  align-items: center;
  -moz-column-gap: 60px;
       column-gap: 60px;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block::after {
  content: "";
  display: block;
  width: 23.5294117647vw;
  max-width: 320px;
  height: 1px;
  background: #d9d9d9;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a {
  background: #f8f5ed;
  border-radius: 12px;
  display: block;
  padding: 16px 78px 16px 16px;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a {
    display: flex;
    -moz-column-gap: 32px;
         column-gap: 32px;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .fig figure {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .fig {
    width: 200px;
  }
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .fig img {
  width: 100%;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info h3, .ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .h3 {
  font-size: 18px;
  font-weight: 700;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info h3 span, .ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .h3 span {
  display: inline-block;
  background: #fff;
  border: 1px solid #000;
  border-radius: 24px;
  padding: 4px 8px;
  line-height: 1;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -2px;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info p {
  margin-bottom: 15px;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .ec-badge {
  background: #e94f2a;
  border-radius: 32px;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  vertical-align: middle;
  margin-right: 4px;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .ec-strike {
  color: #888888;
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .ec-strike span {
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .price {
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .price .yen {
  font-size: 18px;
  font-emphasize: 700px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e94f2a;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .price .num {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e94f2a;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__block a .info .price .note {
  font-size: 12px;
  margin: 0 5px;
  font-weight: 500;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__link {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  align-items: center;
  white-space: nowrap;
}
.ec-headerNaviRole .ec-headerNaviRole__megamenu__trial__link::after {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  background: url("../icon/icon_mega.svg") no-repeat;
  background-size: contain;
}
.ec-headerNaviRole .ec-headerNaviRole__nav {
  display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__nav a {
  color: inherit;
  text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__nav a:hover {
  text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__cart {
  display: inline-block;
}
.ec-headerNaviRole .ec-headerNaviRole__cart a {
  color: inherit;
  text-decoration: none;
}
.ec-headerNaviRole .ec-headerNaviRole__cart a:hover {
  text-decoration: none;
}
.ec-headerNaviRole__hamburger {
  margin-left: 8px;
}
.ec-headerNaviRole__hamburger button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: url("../icon/icon_humberger.svg") no-repeat;
  outline: none;
  width: 40px;
  height: 40px;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole__hamburger {
    margin-left: 16px;
    width: 56px;
    height: 56px;
  }
  .ec-headerNaviRole__hamburger button {
    width: 56px;
    height: 56px;
    background-size: contain;
  }
}
@media (min-width: 1120px) {
  .ec-headerNaviRole__hamburger {
    display: none;
  }
}
.ec-headerNaviRole__smp {
  background: rgba(0, 0, 0, 0.2);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  height: 100%;
  overflow-y: scroll;
  padding: 16px;
  z-index: 50;
  display: none;
}
.ec-headerNaviRole__smp__close {
  position: absolute;
  right: 0;
  top: 0;
}
.ec-headerNaviRole__smp__close button {
  outline: none;
  width: 40px;
  height: 40px;
  border: none;
  background: url("../icon/icon_close.svg") no-repeat;
  background-size: contain;
}
.ec-headerNaviRole__smp__inner {
  background: #f8f5ed;
  border-radius: 16px;
  position: relative;
  padding: 40px 30px;
  overflow: hidden;
}
.ec-headerNaviRole__smp__inner ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.ec-headerNaviRole__smp__inner ul li {
  margin-bottom: 40px;
}
.ec-headerNaviRole__smp__inner ul li:last-child {
  margin-bottom: 0;
}
.ec-headerNaviRole__smp__inner ul li a {
  color: #111111;
  font-weight: 700;
  font-size: 18px;
}
.ec-headerNaviRole__smp__inner ul li a.ac {
  display: flex;
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-content: center;
}
.ec-headerNaviRole__smp__inner ul li a.ac.is-active::after {
  transform: rotate(180deg);
}
.ec-headerNaviRole__smp__inner ul li a.ac::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("../icon/icon_ac.svg") no-repeat;
  position: relative;
  top: 3px;
}
.ec-headerNaviRole__smp__sub {
  padding-top: 24px;
  display: none;
}
.ec-headerNaviRole__smp__sub ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 16px;
}
.ec-headerNaviRole__smp__sub ul li {
  width: calc((100% - 16px) / 2);
}
.ec-headerNaviRole__smp__sub ul li figure {
  border-radius: 15px;
  overflow: hidden;
}
.ec-headerNaviRole__smp__sub ul li figure img {
  max-width: 100%;
}
.ec-headerNaviRole__smp__sub ul li h3, .ec-headerNaviRole__smp__sub ul li .h3 {
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole__smp__sub__list {
  margin-bottom: 28px !important;
}
.ec-headerNaviRole__smp__sub__list li {
  margin-bottom: 0 !important;
}
.ec-headerNaviRole__smp__sub__list li figure img {
  max-width: 100%;
  width: 100%;
}
.ec-headerNaviRole__smp__sub__price {
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole__smp__sub__price .yen {
  font-size: 18px;
  font-emphasize: 700px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-headerNaviRole__smp__sub__price .num {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-headerNaviRole__smp__sub__price .note {
  font-size: 12px;
  font-weight: 500;
}
.ec-headerNaviRole__smp__sub__trial a {
  background: #f8f5ed;
  border-radius: 12px;
  display: block;
  padding: 16px 78px 16px 16px;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole__smp__sub__trial a {
    display: flex;
    -moz-column-gap: 32px;
         column-gap: 32px;
  }
}
.ec-headerNaviRole__smp__sub__trial a .fig figure {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-headerNaviRole__smp__sub__trial a .fig {
    width: 200px;
  }
}
.ec-headerNaviRole__smp__sub__trial a .fig img {
  width: 100%;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.ec-headerNaviRole__smp__sub__trial a .info h3, .ec-headerNaviRole__smp__sub__trial a .info .h3 {
  font-size: 18px;
  font-weight: 700;
}
.ec-headerNaviRole__smp__sub__trial a .info h3 span, .ec-headerNaviRole__smp__sub__trial a .info .h3 span {
  display: inline-block;
  background: #fff;
  border: 1px solid #000;
  border-radius: 24px;
  padding: 4px 8px;
  line-height: 1;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -2px;
}
.ec-headerNaviRole__smp__sub__trial a .info p {
  margin-bottom: 15px;
}
.ec-headerNaviRole__smp__sub__trial a .info .ec-badge {
  background: #e94f2a;
  border-radius: 32px;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  vertical-align: middle;
  margin-right: 4px;
}
.ec-headerNaviRole__smp__sub__trial a .info .ec-strike {
  color: #888888;
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole__smp__sub__trial a .info .ec-strike span {
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-headerNaviRole__smp__sub__trial a .info .price {
  font-size: 14px;
  font-weight: 700;
}
.ec-headerNaviRole__smp__sub__trial a .info .price .yen {
  font-size: 18px;
  font-emphasize: 700px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e94f2a;
}
.ec-headerNaviRole__smp__sub__trial a .info .price .num {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e94f2a;
}
.ec-headerNaviRole__smp__sub__trial a .info .price .note {
  font-size: 12px;
  margin: 0 5px;
  font-weight: 500;
}
.ec-headerNaviRole__smp__sub__trial a {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
}
.ec-headerNavSP {
  display: block;
  cursor: pointer;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
}
.ec-headerNavSP .fas {
  vertical-align: top;
}
@media only screen and (min-width: 768px) {
  .ec-headerNavSP {
    display: none;
  }
}
.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: #111111;
  -webkit-text-size-adjust: 100%;
}
.ec-headerTitle textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-headerTitle ul,
.ec-headerTitle ol {
  list-style: none;
}
.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, .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;
}
@media only screen and (min-width: 768px) {
  .ec-headerTitle .ec-headerTitle__title a {
    font-size: 40px;
  }
}
.ec-headerTitle .ec-headerTitle__title a:hover {
  opacity: 0.8;
}
.ec-headerTitle .ec-headerTitle__subtitle {
  font-size: 10px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-headerTitle .ec-headerTitle__subtitle {
    font-size: 16px;
    margin-bottom: 10px;
  }
}
.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 {
  margin-left: 0;
  display: inline-block;
  font-size: 28px;
}
.ec-headerNav .ec-headerNav__item a {
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #111111;
  background: #fff url("../icon/icon_login.svg") no-repeat center;
  background-size: 15px 15px;
  transition: 300ms width ease, 300ms height ease, 300ms background-size ease;
}
@media only screen and (min-width: 768px) {
  .ec-headerNav .ec-headerNav__item a {
    width: 56px;
    height: 56px;
    background-size: auto auto;
  }
}
.ec-headerNav .ec-headerNav__item a span {
  visibility: hidden;
}
.ec-headerNav .ec-headerNav__itemIcon {
  display: inline-block;
  margin-right: 10px;
  margin-left: 10px;
  font-size: 18px;
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-headerNav .ec-headerNav__itemIcon {
    margin-right: 0;
    font-size: 20px;
  }
}
.ec-headerNav .ec-headerNav__itemLink {
  display: none;
  font-size: 14px;
  vertical-align: middle;
  color: black;
}
/*
ヘッダー：検索ボックス

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

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

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

Styleguide 11.2.4
*/
.ec-headerSearch:after {
  content: " ";
  display: table;
}
.ec-headerSearch:after {
  clear: both;
}
.ec-headerSearch .ec-headerSearch__category {
  float: none;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__category {
    float: left;
    width: 43%;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__category .ec-select select {
    max-width: 165px;
    height: 36px;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .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__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: #111111;
  border: 1px solid #ccc;
  background-color: #f6f6f6;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .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] {
  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;
}
@media only screen and (min-width: 768px) {
  .ec-headerSearch .ec-headerSearch__keyword input[type=search] {
    font-size: 12px;
  }
}
.ec-headerSearch .ec-headerSearch__keyword .ec-icon {
  width: 22px;
  height: 22px;
}
.ec-headerSearch .ec-headerSearch__keywordBtn {
  border: 0;
  background: none;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-55%);
  display: block;
  white-space: nowrap;
  z-index: 1;
}
/*
ヘッダー：カテゴリナビ

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

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

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

Styleguide 11.2.5
*/
.ec-categoryNaviRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  display: none;
}
.ec-categoryNaviRole:after {
  content: " ";
  display: table;
}
.ec-categoryNaviRole:after {
  clear: both;
}
.ec-categoryNaviRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-categoryNaviRole ul,
.ec-categoryNaviRole ol {
  list-style: none;
}
.ec-categoryNaviRole img {
  max-width: 100%;
}
.ec-categoryNaviRole html {
  box-sizing: border-box;
}
.ec-categoryNaviRole *,
.ec-categoryNaviRole *::before,
.ec-categoryNaviRole *::after {
  box-sizing: inherit;
}
.ec-categoryNaviRole img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-categoryNaviRole {
    display: block;
    width: 100%;
  }
  .ec-categoryNaviRole a {
    color: inherit;
    text-decoration: none;
  }
  .ec-categoryNaviRole a:hover {
    text-decoration: none;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav {
    display: inline-block;
  }
}
.ec-itemNav__nav li {
  float: none;
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li {
    float: left;
    width: auto;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li a {
    text-align: center;
    border-bottom: none;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul {
    display: block;
    z-index: 100;
    position: absolute;
  }
}
.ec-itemNav__nav li ul li {
  overflow: hidden;
  width: 100%;
  height: auto;
  transition: 0.3s;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul li {
    overflow: hidden;
    height: 0;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav > li:hover > ul > li {
    overflow: visible;
    height: auto;
  }
}
.ec-itemNav__nav li ul li ul {
  top: 0;
  left: 100%;
  width: auto;
}
@media only screen and (min-width: 768px) {
  .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;
  }
}
@media only screen and (min-width: 768px) {
  .ec-itemNav__nav li ul li:hover > ul > li {
    overflow: visible;
    height: auto;
    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 {
  overflow-y: scroll;
  background: black;
  width: 260px;
  height: 100vh;
  transform: translateX(-300px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  transition: z-index 0ms 1ms;
}
@media only screen and (min-width: 768px) {
  .ec-drawerRole {
    display: none;
  }
}
.ec-drawerRole .ec-headerSearchArea {
  padding: 20px 10px;
  width: 100%;
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerSearch {
  padding: 16px 8px 26px;
  background: #ebebeb;
  color: #636378;
}
.ec-drawerRole .ec-headerSearch select {
  width: 100% !important;
}
.ec-drawerRole .ec-headerCategoryArea .ec-headerCategoryArea__heading {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 1em 10px;
  font-size: 16px;
  font-weight: bold;
  color: black;
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea p {
  margin-top: 0;
  margin-bottom: 0;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li a {
  border-bottom: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  color: black;
  font-weight: normal;
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li a {
  border-bottom: 1px solid #ccc;
  padding-left: 20px;
  font-weight: normal;
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover > a {
  background: #f8f8f8;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav > li:hover li:hover > a {
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li a {
  padding-left: 40px;
  color: black;
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li:hover ul li ul li a:hover {
  background: white;
}
.ec-drawerRole .ec-headerCategoryArea .ec-itemNav__nav li ul li ul li ul li a {
  padding-left: 60px;
  font-weight: normal;
}
.ec-drawerRole .ec-headerLinkArea {
  background: black;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__list {
  border-top: 1px solid #ccc;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__item {
  display: block;
  border-bottom: 1px solid #ccc;
  padding: 15px 20px;
  font-size: 16px;
  font-weight: bold;
  color: white;
}
.ec-drawerRole .ec-headerLinkArea .ec-headerLink__icon {
  display: inline-block;
  width: 28px;
  font-size: 17px;
}
.ec-drawerRoleClose {
  display: none;
  cursor: pointer;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 10px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  color: black;
  background: white;
  position: fixed;
  top: 10px;
  left: 270px;
  z-index: 1000;
}
.ec-drawerRoleClose .fas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .ec-drawerRoleClose {
    display: none;
  }
}
.ec-drawerRole.is_active {
  display: block;
  transform: translateX(0);
  transition: all 0.3s;
  z-index: 100000;
}
@media only screen and (min-width: 768px) {
  .ec-drawerRole.is_active {
    display: none;
  }
}
.ec-drawerRoleClose.is_active {
  display: inline-block;
  transition: all 0.3s;
}
@media only screen and (min-width: 768px) {
  .ec-drawerRoleClose.is_active {
    display: none;
  }
}
.ec-overlayRole {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: 0;
  background: transparent;
  transform: translateX(0);
  transition: all 0.3s;
  visibility: hidden;
}
@media only screen and (min-width: 768px) {
  .ec-overlayRole {
    display: none;
  }
}
.have_curtain .ec-overlayRole {
  display: block;
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  visibility: visible;
}
@media only screen and (min-width: 768px) {
  .have_curtain .ec-overlayRole {
    display: none;
  }
}
/*
ヘッダー：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-maintenanceAlert {
  background: steelblue;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  z-index: 9999;
  display: flex;
  font-weight: bold;
}
.ec-maintenanceAlert > * {
  margin: auto;
}
.ec-maintenanceAlert .ec-maintenanceAlert__icon {
  display: inline-block;
  margin-right: 1rem;
  width: 20px;
  height: 20px;
  color: #fff;
  fill: #fff;
  vertical-align: top;
}
.ec-maintenanceAlert + * {
  margin-top: 50px;
}
/* devモードの追加 */
.ec-debugModeAlert {
  background: red;
  height: 50px;
  position: fixed;
  top: 0;
  width: 100%;
  color: white;
  z-index: 9999;
  display: flex;
  font-weight: bold;
}
.ec-debugModeAlert > * {
  margin: auto;
}
.ec-debugModeAlert .ec-debugModeAlert__icon {
  display: inline-block;
  margin-right: 1rem;
  width: 20px;
  height: 20px;
  color: #fff;
  fill: #fff;
  vertical-align: top;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
フッター

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

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

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

Styleguide 11.3
*/
.ec-footerRole {
  border-top: 1px solid #111111;
  background: #fff;
}
.ec-footerRole .ec-footerRole__inner {
  padding: 80px 24px;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__inner {
    padding: 124px 80px;
  }
}
.ec-footerRole .ec-footerRole__inner ul {
  list-style: none;
}
.ec-footerRole .ec-footerRole__inner::after {
  content: none;
}
@media (min-width: 1000px) {
  .ec-footerRole .ec-footerRole__inner {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 50px;
         column-gap: 50px;
    justify-content: space-between;
  }
}
.ec-footerRole .ec-footerRole__l {
  display: flex;
  flex-wrap: wrap;
  -moz-column-gap: 64px;
       column-gap: 64px;
  margin-bottom: 60px;
}
.ec-footerRole .ec-footerRole__l > * {
  min-width: 0;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__l {
    margin-bottom: 0;
  }
}
@media (min-width: 1000px) {
  .ec-footerRole .ec-footerRole__l {
    flex-wrap: nowrap;
  }
}
.ec-footerRole .ec-footerRole__products dt {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}
.ec-footerRole .ec-footerRole__products dd ul {
  padding-left: 0;
}
.ec-footerRole .ec-footerRole__products dd ul li {
  margin-bottom: 24px;
  position: relative;
  padding-left: 16px;
  /* SP ではリンクの当たり判定を 44px にしてある（common.scss）。
     余白 24px はその上に乗るので、行が 17px だった頃の値のままだと
     間延びする。領域で間隔が付くぶん詰める */
}
@media only screen and (max-width: 767px) {
  .ec-footerRole .ec-footerRole__products dd ul li {
    margin-bottom: 4px;
  }
}
.ec-footerRole .ec-footerRole__products dd ul li::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: #d9d9d9;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 10px;
}
.ec-footerRole .ec-footerRole__products dd ul li a {
  color: #111111;
  font-size: 12px;
  font-weight: 500;
  text-wrap-mode: wrap;
}
.ec-footerRole .ec-footerRole__nav {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__nav__wrap {
    display: flex;
    -moz-column-gap: 64px;
         column-gap: 64px;
  }
}
.ec-footerRole .ec-footerRole__nav dt {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__nav dd {
    margin-top: 65px;
  }
}
.ec-footerRole .ec-footerRole__nav li {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__nav li {
    margin-bottom: 40px;
  }
}
.ec-footerRole .ec-footerRole__nav li a {
  color: #111111;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ec-footerRole .ec-footerRole__sns {
  margin: 60px 0 0;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__sns {
    margin-top: 0;
  }
}
.ec-footerRole .ec-footerRole__sns dt {
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.04em;
  margin-bottom: 40px;
}
.ec-footerRole .ec-footerRole__sns li {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__sns li {
    margin-bottom: 37px;
  }
}
.ec-footerRole .ec-footerRole__sns li.insta a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../icon/icon_instagram.svg") no-repeat;
  background-size: contain;
}
.ec-footerRole .ec-footerRole__sns li.line a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../icon/icon_line.svg") no-repeat;
  background-size: contain;
}
.ec-footerRole .ec-footerRole__sns li a {
  color: #111111;
  font-size: 16px;
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
@media (min-width: 1000px) {
  .ec-footerRole .ec-footerRole__r {
    width: 400px;
  }
}
.ec-footerRole .ec-footerRole__r .ec-blockBtn--primary:hover {
  color: #fff;
}
.ec-footerRole .ec-footerRole__logo {
  margin-bottom: 76px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__logo {
    margin-bottom: 84px;
    max-width: 400px;
    margin: 0 auto 84px;
    text-align: left;
  }
}
.ec-footerRole .ec-footerRole__logo img {
  width: 100%;
}
.ec-footerRole .ec-footerRole__inner2 {
  border-top: 1px solid #111111;
  padding: 64px 24px;
}
.ec-footerRole .ec-footerRole__inner2 ul {
  list-style: none;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__inner2 {
    padding: 96px 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .ec-footerRole .ec-footerRole__inner2::after {
    content: none;
  }
}
.ec-footerRole .ec-footerRole__link {
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__link {
    display: flex;
    align-items: center;
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
.ec-footerRole .ec-footerRole__link li {
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
  .ec-footerRole .ec-footerRole__link li {
    margin-bottom: 0;
  }
}
.ec-footerRole .ec-footerRole__link li a {
  color: #111111;
  font-size: 14px;
  display: flex;
  align-items: center;
  -moz-column-gap: 12px;
       column-gap: 12px;
  letter-spacing: 0.04em;
}
.ec-footerRole .ec-footerRole__copyright {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.04em;
}
/*
フッターナビ

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

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

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

Styleguide 11.3.1
*/
.ec-footerNavi {
  padding: 0;
  color: white;
  list-style: none;
  text-align: center;
}
.ec-footerNavi .ec-footerNavi__link {
  display: block;
}
@media only screen and (min-width: 768px) {
  .ec-footerNavi .ec-footerNavi__link {
    display: inline-block;
  }
}
.ec-footerNavi .ec-footerNavi__link a {
  display: block;
  border-bottom: 1px solid #7d7d7d;
  padding: 15px 0;
  font-size: 14px;
  color: inherit;
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .ec-footerNavi .ec-footerNavi__link a {
    display: inline-block;
    border-bottom: none;
    margin: 0 10px;
    padding: 0;
    text-decoration: underline;
  }
}
.ec-footerNavi .ec-footerNavi__link:hover a {
  opacity: 0.8;
  text-decoration: none;
}
/*
フッタータイトル

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

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

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

Styleguide 11.3.2
*/
.ec-footerTitle {
  padding: 40px 0 60px;
  text-align: center;
  color: white;
}
@media only screen and (min-width: 768px) {
  .ec-footerTitle {
    padding: 50px 0 80px;
  }
}
.ec-footerTitle .ec-footerTitle__logo {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}
.ec-footerTitle .ec-footerTitle__logo a {
  color: inherit;
  text-decoration: none;
}
.ec-footerTitle .ec-footerTitle__logo a:hover {
  text-decoration: none;
}
.ec-footerTitle .ec-footerTitle__logo a {
  font-size: 22px;
  color: inherit;
}
@media only screen and (min-width: 768px) {
  .ec-footerTitle .ec-footerTitle__logo a {
    font-size: 24px;
  }
}
.ec-footerTitle .ec-footerTitle__logo:hover a {
  opacity: 0.8;
  text-decoration: none;
}
.ec-footerTitle .ec-footerTitle__copyright {
  font-size: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-footerTitle .ec-footerTitle__copyright {
    font-size: 12px;
  }
}
/*
 * 11.4 Mypage Top（マイページ トップ index.twig）
 * index.twig のインラインスタイル抽出先（見た目を変えない純リファクタリング）。
 * 配送追跡 UI の共有クラスは project/16.3.orderTracking を参照。
 */
.ec-mypageTopRole {
  /* お知らせバナー（bootstrap `.alert` と同名プロパティのため併記して 0,2,0 で勝たせる） */
  /* お知らせ見出し（h2 のデフォルト margin/font-size を上書き） */
  /* 見出し右端の件数表示ラッパ */
  /* 注文履歴カード下部の操作ボタン帯 */
}
.ec-mypageTopRole__notice.alert {
  background: #fff7e6;
  border-color: #ffc107;
  color: #7a4f00;
}
.ec-mypageTopRole__noticeHeading {
  margin: 0 0 6px;
  font-size: 16px;
}
.ec-mypageTopRole__headerCount {
  margin-left: auto;
  padding-right: 1rem;
}
.ec-mypageTopRole__actionBar {
  background-color: #f8f9fa;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
トップページ

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

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

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

Styleguide 12.1
*/
.ec-sliderRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  margin-bottom: 24px;
}
.ec-sliderRole:after {
  content: " ";
  display: table;
}
.ec-sliderRole:after {
  clear: both;
}
.ec-sliderRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-sliderRole ul,
.ec-sliderRole ol {
  list-style: none;
}
.ec-sliderRole img {
  max-width: 100%;
}
.ec-sliderRole html {
  box-sizing: border-box;
}
.ec-sliderRole *,
.ec-sliderRole *::before,
.ec-sliderRole *::after {
  box-sizing: inherit;
}
.ec-sliderRole img {
  width: 100%;
}
.ec-sliderRole ul {
  padding: 0;
  list-style: none;
}
.ec-sliderItemRole {
  border-bottom: 1px solid #f6f2e8;
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  padding: 0;
  margin-bottom: 24px;
}
.ec-sliderItemRole:after {
  content: " ";
  display: table;
}
.ec-sliderItemRole:after {
  clear: both;
}
.ec-sliderItemRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-sliderItemRole ul,
.ec-sliderItemRole ol {
  list-style: none;
}
.ec-sliderItemRole img {
  max-width: 100%;
}
.ec-sliderItemRole html {
  box-sizing: border-box;
}
.ec-sliderItemRole *,
.ec-sliderItemRole *::before,
.ec-sliderItemRole *::after {
  box-sizing: inherit;
}
.ec-sliderItemRole img {
  width: 100%;
}
.ec-sliderItemRole ul {
  padding: 0;
  list-style: none;
}
.ec-sliderItemRole .item_visual .slick-slide {
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 1/1;
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
  .ec-sliderItemRole .item_visual .slick-slide {
    margin-bottom: 30px;
  }
}
.ec-sliderItemRole .item_visual .slick-slide img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}
.ec-sliderItemRole .item_nav {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0;
  -moz-column-gap: 24px;
       column-gap: 24px;
}
.ec-sliderItemRole .slideThumb {
  border-radius: 16px;
  margin-bottom: 40px;
  overflow: hidden;
  max-width: 118px;
  opacity: 0.8;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  cursor: pointer;
}
@media only screen and (min-width: 768px) {
  .ec-sliderItemRole .slideThumb {
    border-radius: 24px;
  }
}
.ec-sliderItemRole .slideThumb:focus {
  outline: none;
}
.ec-sliderItemRole .slideThumb:hover {
  opacity: 1;
}
.ec-sliderItemRole .slideThumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
アイキャッチ

トップページ アイキャッチ部に関する 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 */
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole {
    flex-wrap: nowrap;
  }
}
.ec-eyecatchRole .ec-eyecatchRole__image {
  display: block;
  margin-bottom: 40px;
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole .ec-eyecatchRole__image {
    order: 2;
  }
}
.ec-eyecatchRole .ec-eyecatchRole__intro {
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole .ec-eyecatchRole__intro {
    padding-right: 5%;
    order: 1;
  }
}
.ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
  margin-bottom: 0.8em;
  font-size: 16px;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole .ec-eyecatchRole__introEnTitle {
    margin-top: 45px;
  }
}
.ec-eyecatchRole .ec-eyecatchRole__introTitle {
  margin-bottom: 0.8em;
  font-size: 24px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole .ec-eyecatchRole__introTitle {
    margin-bottom: 1em;
    font-size: 26px;
  }
}
.ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 2;
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole .ec-eyecatchRole__introDescriptiron {
    margin-bottom: 30px;
  }
}
.ec-eyecatchRole .ec-eyecatchRole__introDescription {
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 2;
}
@media only screen and (min-width: 768px) {
  .ec-eyecatchRole .ec-eyecatchRole__introDescription {
    margin-bottom: 30px;
  }
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
ボタン

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

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

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

Styleguide 12.3
*/
/*
通常ボタン

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

Markup:
.ec-inlineBtn--top more

Styleguide 12.3.1
*/
.ec-inlineBtn--top {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: white;
  background-color: black;
  border-color: black;
}
.ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top:active.focus, .ec-inlineBtn--top.active:focus, .ec-inlineBtn--top.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-inlineBtn--top:hover, .ec-inlineBtn--top:focus, .ec-inlineBtn--top.focus {
  color: #111111;
  text-decoration: none;
}
.ec-inlineBtn--top:active, .ec-inlineBtn--top.active {
  outline: 0;
  background-image: none;
}
.ec-inlineBtn--top.disabled, .ec-inlineBtn--top[disabled], fieldset[disabled] .ec-inlineBtn--top {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-inlineBtn--top:hover {
  color: #fff;
  background-color: black;
  border-color: black;
}
.btn-check:focus + .ec-inlineBtn--top, .ec-inlineBtn--top:focus {
  color: #fff;
  background-color: black;
  border-color: black;
  box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5);
}
.btn-check:checked + .ec-inlineBtn--top, .btn-check:active + .ec-inlineBtn--top, .ec-inlineBtn--top:active, .ec-inlineBtn--top.active, .show > .ec-inlineBtn--top.dropdown-toggle {
  color: #fff;
  background-color: black;
  border-color: black;
}
.btn-check:checked + .ec-inlineBtn--top:focus, .btn-check:active + .ec-inlineBtn--top:focus, .ec-inlineBtn--top:active:focus, .ec-inlineBtn--top.active:focus, .show > .ec-inlineBtn--top.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5);
}
.ec-inlineBtn--top:disabled, .ec-inlineBtn--top.disabled {
  color: white;
  background-color: black;
  border-color: black;
}
.ec-inlineBtn--top .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-inlineBtn--top a {
  color: inherit;
}
/*
ロングボタン（全幅）

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

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

Styleguide 2.1.2
*/
.ec-blockBtn--top {
  display: inline-block;
  margin-bottom: 0;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 48px;
  white-space: nowrap;
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 0.875rem;
  --bs-btn-border-radius: 1.42857142;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 10px 16px;
  text-decoration: none;
  color: white;
  background-color: black;
  border-color: black;
  display: block;
  height: 56px;
  line-height: 56px;
  padding-top: 0;
  padding-bottom: 0;
}
.ec-blockBtn--top:focus, .ec-blockBtn--top.focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top:active.focus, .ec-blockBtn--top.active:focus, .ec-blockBtn--top.active.focus {
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.ec-blockBtn--top:hover, .ec-blockBtn--top:focus, .ec-blockBtn--top.focus {
  color: #111111;
  text-decoration: none;
}
.ec-blockBtn--top:active, .ec-blockBtn--top.active {
  outline: 0;
  background-image: none;
}
.ec-blockBtn--top.disabled, .ec-blockBtn--top[disabled], fieldset[disabled] .ec-blockBtn--top {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: 0.65;
}
.ec-blockBtn--top:hover {
  color: #fff;
  background-color: black;
  border-color: black;
}
.btn-check:focus + .ec-blockBtn--top, .ec-blockBtn--top:focus {
  color: #fff;
  background-color: black;
  border-color: black;
  box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5);
}
.btn-check:checked + .ec-blockBtn--top, .btn-check:active + .ec-blockBtn--top, .ec-blockBtn--top:active, .ec-blockBtn--top.active, .show > .ec-blockBtn--top.dropdown-toggle {
  color: #fff;
  background-color: black;
  border-color: black;
}
.btn-check:checked + .ec-blockBtn--top:focus, .btn-check:active + .ec-blockBtn--top:focus, .ec-blockBtn--top:active:focus, .ec-blockBtn--top.active:focus, .show > .ec-blockBtn--top.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(38, 38, 38, 0.5);
}
.ec-blockBtn--top:disabled, .ec-blockBtn--top.disabled {
  color: white;
  background-color: black;
  border-color: black;
}
.ec-blockBtn--top .ec-icon img {
  width: 1em;
  vertical-align: text-bottom;
}
.ec-blockBtn--top a {
  color: inherit;
}
@media only screen and (min-width: 768px) {
  .ec-blockBtn--top {
    max-width: 260px;
  }
}
/*
見出し

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

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: 0.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: 0.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: 0.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: 0.15em;
  vertical-align: 2px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
トピック（アイテム2列）

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

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

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

Styleguide 12.5.1
*/
.ec-topicRole {
  padding: 40px 0;
  background: #F8F8F8;
}
@media only screen and (min-width: 768px) {
  .ec-topicRole {
    padding: 60px 0;
  }
}
.ec-topicRole .ec-topicRole__list {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .ec-topicRole .ec-topicRole__list {
    flex-wrap: nowrap;
  }
}
.ec-topicRole .ec-topicRole__listItem {
  margin-bottom: 20px;
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .ec-topicRole .ec-topicRole__listItem {
    width: 50%;
  }
  .ec-topicRole .ec-topicRole__listItem:not(:last-of-type) {
    margin-right: 30px;
  }
}
.ec-topicRole .ec-topicRole__listItemTitle {
  margin-top: 0.5em;
  font-size: 14px;
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-topicRole .ec-topicRole__listItemTitle {
    margin-top: 1em;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
カテゴリ（アイテム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;
}
@media only screen and (min-width: 768px) {
  .ec-newItemRole {
    padding: 60px 0;
  }
}
.ec-newItemRole .ec-newItemRole__list {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .ec-newItemRole .ec-newItemRole__list {
    flex-wrap: nowrap;
  }
}
.ec-newItemRole .ec-newItemRole__listItem {
  margin-bottom: 4%;
  width: 48%;
  height: auto;
}
.ec-newItemRole .ec-newItemRole__listItem:not(:first-child) a {
  color: black;
}
@media only screen and (min-width: 768px) {
  .ec-newItemRole .ec-newItemRole__listItem {
    margin-bottom: 15px;
    width: 25%;
  }
  .ec-newItemRole .ec-newItemRole__listItem:not(:last-of-type) {
    margin-right: 30px;
  }
}
.ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
  margin-right: 4%;
}
@media only screen and (min-width: 768px) {
  .ec-newItemRole .ec-newItemRole__listItem:nth-child(odd) {
    margin-right: 30px;
  }
}
.ec-newItemRole .ec-newItemRole__listItemHeading {
  margin-top: calc(45% - 20px);
}
.ec-newItemRole .ec-newItemRole__listItemTitle {
  margin: 8px 0;
  font-size: 14px;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-newItemRole .ec-newItemRole__listItemTitle {
    margin: 20px 0 10px;
  }
}
.ec-newItemRole .ec-newItemRole__listItemPrice {
  font-size: 12px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
カテゴリ（アイテム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;
}
@media only screen and (min-width: 768px) {
  .ec-categoryRole {
    padding: 60px 0;
  }
}
.ec-categoryRole .ec-categoryRole__list {
  display: flex;
  flex-wrap: wrap;
}
@media only screen and (min-width: 768px) {
  .ec-categoryRole .ec-categoryRole__list {
    flex-wrap: nowrap;
  }
}
.ec-categoryRole .ec-categoryRole__listItem {
  margin-bottom: 20px;
  width: 100%;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .ec-categoryRole .ec-categoryRole__listItem {
    width: 33.3333333333%;
  }
  .ec-categoryRole .ec-categoryRole__listItem:not(:last-of-type) {
    margin-right: 30px;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
見出し

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

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

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

Styleguide 12.8.1
*/
.ec-newsRole {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole {
    padding: 60px 0 0;
  }
}
.ec-newsRole__pagination .ec-pagerRole__list {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.ec-newsRole__pagination .ec-pagerRole__item--disabled {
  opacity: 0.5;
}
.ec-newsRole__pagination .ec-pagerRole__item--prev {
  margin-right: 20px;
}
.ec-newsRole__pagination .ec-pagerRole__item--next {
  margin-left: 20px;
}
.ec-newsRole__pagination .ec-pagerRole__item--next .ec-icon {
  transform: rotate(180deg);
  display: block;
}
.ec-newsRole__headerCat {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-newsRole__headerCat dl {
  gap: 10px 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ec-newsRole__headerCat dl dd {
  margin-bottom: 0;
}
.ec-newsRole__headerCat dl dd ul {
  gap: 10px;
  flex-wrap: wrap;
}
.ec-newsRole__headerCat dl dd ul a {
  padding: 8px 17px;
  line-height: 1;
  border: 1px solid #be9949;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #be9949;
  display: block;
  transition: background 300ms, color 300ms;
}
.ec-newsRole__headerCat dl dd ul a.is-active {
  color: #fff;
  background: #be9949;
}
.ec-newsRole__headerCat dl dd ul a:hover {
  color: #fff;
  background: #be9949;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__list {
    display: flex;
    gap: 80px 76px;
    flex-wrap: wrap;
    margin-bottom: 80px;
  }
}
.ec-newsRole .ec-newsRole__listItem {
  margin-bottom: 44px;
}
.ec-newsRole .ec-newsRole__listItem:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__listItem {
    width: calc((100% - 152px) / 3);
    margin-bottom: 0;
  }
}
.ec-newsRole .ec-newsRole__listItem a {
  color: #111111;
}
.ec-newsRole .ec-newsRole__listItemImage {
  aspect-ratio: 360/262;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 18px;
}
.ec-newsRole .ec-newsRole__listItemImage img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.ec-newsRole .ec-newsRole__listItemCat span {
  display: block;
  padding: 8px 17px;
  line-height: 1;
  border: 1px solid #be9949;
  background: #be9949;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  display: block;
  transition: background 300ms, color 300ms;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__listItemCat span {
    font-size: 13px;
  }
}
.ec-newsRole .ec-newsRole__listItemDate {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__listItemDate {
    font-size: 14px;
  }
}
.ec-newsRole .ec-newsRole__listItemTitle {
  font-size: 17px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__listItemTitle {
    font-size: 18px;
  }
}
.ec-newsRole .ec-newsRole__header {
  display: block !important;
  margin-bottom: 48px;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__header {
    margin-bottom: 80px;
  }
}
@media (min-width: 1000px) {
  .ec-newsRole .ec-newsRole__header {
    display: flex !important;
    -moz-column-gap: 64px;
         column-gap: 64px;
    justify-content: space-between;
  }
}
.ec-newsRole .ec-newsRole__header h1, .ec-newsRole .ec-newsRole__header .h1 {
  display: flex;
  -moz-column-gap: 64px;
       column-gap: 64px;
  justify-content: space-between;
  align-items: center;
  line-height: 130%;
  font-size: 36px;
  flex-grow: 1;
  font-weight: 500;
}
@media (min-width: 1000px) {
  .ec-newsRole .ec-newsRole__header h1::after, .ec-newsRole .ec-newsRole__header .h1::after {
    content: "";
    display: block;
    width: 150px;
    height: 1px;
    display: block;
    background: #111111;
  }
}
.ec-newsRole .ec-newsRole__header .newsRole__header__info {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
}
@media (min-width: 1000px) {
  .ec-newsRole .ec-newsRole__header .newsRole__header__info {
    flex-shrink: 0;
    display: block;
    margin-top: 0;
  }
}
.ec-newsRole .ec-newsRole__header .cat {
  display: block;
  padding: 8px 17px;
  line-height: 1;
  border: 1px solid #be9949;
  background: #be9949;
  border-radius: 16px;
  font-size: 13px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  display: block;
  transition: background 300ms, color 300ms;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__header .cat {
    margin-bottom: 24px;
  }
}
.ec-newsRole .ec-newsRole__header .date {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 500;
}
.ec-newsRole .ec-newsRole__article {
  max-width: 860px;
  margin: 0 auto;
}
.ec-newsRole .ec-newsRole__articleImage {
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 48px;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleImage {
    margin-bottom: 96px;
  }
}
.ec-newsRole .ec-newsRole__articleImage img {
  width: 100%;
}
.ec-newsRole .ec-newsRole__articleExcerpt {
  border-top: 1px solid #b4b4b4;
  border-bottom: 1px solid #b4b4b4;
  padding: 32px 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 175%;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleExcerpt {
    padding: 32px 48px;
    font-size: 18px;
  }
}
.ec-newsRole .ec-newsRole__articleContent h2, .ec-newsRole .ec-newsRole__articleContent .h2 {
  margin: 48px 0;
  font-size: 26px;
  line-height: 140%;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent h2, .ec-newsRole .ec-newsRole__articleContent .h2 {
    margin: 80px 0;
    font-size: 32px;
  }
}
.ec-newsRole .ec-newsRole__articleContent h3, .ec-newsRole .ec-newsRole__articleContent .h3 {
  margin: 48px 0;
  font-size: 21px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent h3, .ec-newsRole .ec-newsRole__articleContent .h3 {
    margin: 80px 0;
    font-size: 24px;
  }
}
.ec-newsRole .ec-newsRole__articleContent ul,
.ec-newsRole .ec-newsRole__articleContent ol,
.ec-newsRole .ec-newsRole__articleContent dl {
  margin: 20px 0;
  padding: 0;
}
.ec-newsRole .ec-newsRole__articleContent ul li,
.ec-newsRole .ec-newsRole__articleContent ul dt,
.ec-newsRole .ec-newsRole__articleContent ul dd,
.ec-newsRole .ec-newsRole__articleContent ol li,
.ec-newsRole .ec-newsRole__articleContent ol dt,
.ec-newsRole .ec-newsRole__articleContent ol dd,
.ec-newsRole .ec-newsRole__articleContent dl li,
.ec-newsRole .ec-newsRole__articleContent dl dt,
.ec-newsRole .ec-newsRole__articleContent dl dd {
  margin-bottom: 10px;
}
.ec-newsRole .ec-newsRole__articleContent p {
  font-size: 15px;
  margin: 20px 0;
  line-height: 175%;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent p {
    font-size: 16px;
    margin: 20px 0;
  }
}
.ec-newsRole .ec-newsRole__articleContent figure {
  margin: 20px 0;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent figure {
    margin: 20px 0;
  }
}
.ec-newsRole .ec-newsRole__articleContent figure img {
  border-radius: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent figure img {
    font-size: 24px;
  }
}
.ec-newsRole .ec-newsRole__articleContent figure figcaption {
  font-size: 12px;
  font-weight: 500;
  margin-top: 14px;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent figure figcaption {
    margin-top: 28px;
  }
}
.ec-newsRole .ec-newsRole__articleContent table {
  margin: 20px 0;
  border-collapse: collapse;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-newsRole .ec-newsRole__articleContent table {
    margin: 20px 0;
  }
}
.ec-newsRole .ec-newsRole__articleContent table tr th,
.ec-newsRole .ec-newsRole__articleContent table tr td {
  border-bottom: 1px solid #e6e6e6;
  padding: 32px 0 !important;
}
.ec-newsRole .ec-newsRole__articleContent table tr th {
  padding-left: 64px;
  text-align: left;
}
.ec-newsRole .ec-newsRole__articleFooter ul {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.ec-newsRole .ec-newsRole__articleFooter ul li a {
  display: flex;
  align-items: center;
  -moz-column-gap: 16px;
       column-gap: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #111111;
}
.ec-newsRole .ec-newsRole__articleFooter ul li.prev a::before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: url("../icon/icon_prev.svg") no-repeat;
}
.ec-newsRole .ec-newsRole__articleFooter ul li.next a::after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: url("../icon/icon_prev.svg") no-repeat;
  transform: rotate(180deg);
}
.ec-newsRole__empty {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
/* 前後記事が無いときはページャー項目を出さない */
.ec-newsRole__articleFooter li.is-disabled {
  display: none;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
見出し

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

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

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

Styleguide 12.9.1
*/
/* 背景や文字の色調整 */
.ec-calendar {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
  .ec-calendar {
    flex-direction: row;
    margin-left: -30px;
  }
}
.ec-calendar__month {
  border-collapse: collapse;
  margin-top: 30px;
}
@media screen and (min-width: 768px) {
  .ec-calendar__month {
    margin-top: 0;
    margin-left: 30px;
  }
}
.ec-calendar__month th, .ec-calendar__month td {
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
  padding: 8px;
  text-align: center;
  vertical-align: middle;
}
.ec-calendar .ec-calendar__title {
  border: 0;
}
.ec-calendar .ec-calendar__sun {
  background: #F8F8F8;
  color: #DE5D50;
}
.ec-calendar .ec-calendar__mon, .ec-calendar .ec-calendar__tue, .ec-calendar .ec-calendar__wed, .ec-calendar .ec-calendar__thu, .ec-calendar .ec-calendar__fri {
  background: #F8F8F8;
  color: #333;
}
.ec-calendar .ec-calendar__sat {
  background: #F8F8F8;
  color: #5CB1B1;
}
.ec-calendar .ec-calendar__day {
  background: #FFF;
  color: #333;
}
.ec-calendar .ec-calendar__holiday {
  background: #FFF;
  color: #DE5D50 !important;
}
.ec-calendar .ec-calendar__today {
  color: #333;
  position: relative;
  z-index: 1;
}
.ec-calendar .ec-calendar__today::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #FFFDE7;
  transform: translate(-50%, -50%);
  z-index: -1;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
検索ラベル

商品一覧 ヘッダー部 に関する 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;
}
@media only screen and (min-width: 768px) {
  .ec-searchnavRole {
    margin: 0 auto 120px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.4;
    color: #111111;
    -webkit-text-size-adjust: 100%;
    width: 100%;
    max-width: 1272px;
  }
  .ec-searchnavRole:after {
    content: " ";
    display: table;
  }
  .ec-searchnavRole:after {
    clear: both;
  }
  .ec-searchnavRole textarea {
    /* for chrome fontsize bug */
    font-family: sans-serif;
  }
  .ec-searchnavRole ul,
  .ec-searchnavRole ol {
    list-style: none;
  }
  .ec-searchnavRole img {
    max-width: 100%;
  }
  .ec-searchnavRole html {
    box-sizing: border-box;
  }
  .ec-searchnavRole *,
  .ec-searchnavRole *::before,
  .ec-searchnavRole *::after {
    box-sizing: inherit;
  }
  .ec-searchnavRole img {
    width: 100%;
  }
}
.ec-searchnavRole .ec-searchnavRole__infos {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  display: flex;
  border-top: 0;
  margin-bottom: 16px;
  padding-top: 5px;
  flex-direction: column;
}
.ec-searchnavRole .ec-searchnavRole__infos:after {
  content: " ";
  display: table;
}
.ec-searchnavRole .ec-searchnavRole__infos:after {
  clear: both;
}
.ec-searchnavRole .ec-searchnavRole__infos textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-searchnavRole .ec-searchnavRole__infos ul,
.ec-searchnavRole .ec-searchnavRole__infos ol {
  list-style: none;
}
.ec-searchnavRole .ec-searchnavRole__infos img {
  max-width: 100%;
}
.ec-searchnavRole .ec-searchnavRole__infos html {
  box-sizing: border-box;
}
.ec-searchnavRole .ec-searchnavRole__infos *,
.ec-searchnavRole .ec-searchnavRole__infos *::before,
.ec-searchnavRole .ec-searchnavRole__infos *::after {
  box-sizing: inherit;
}
.ec-searchnavRole .ec-searchnavRole__infos img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .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: 16px;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-searchnavRole .ec-searchnavRole__counter {
    margin-bottom: 0;
    width: 50%;
  }
}
.ec-searchnavRole .ec-searchnavRole__actions {
  text-align: right;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-searchnavRole .ec-searchnavRole__actions {
    width: 50%;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
商品一覧

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

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

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

Styleguide 13.2

*/
.ec-shelfRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  max-width: 1272px;
  margin-bottom: 0;
  padding: 0 20px 120px;
}
.ec-shelfRole:after {
  content: " ";
  display: table;
}
.ec-shelfRole:after {
  clear: both;
}
.ec-shelfRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-shelfRole ul,
.ec-shelfRole ol {
  list-style: none;
}
.ec-shelfRole img {
  max-width: 100%;
}
.ec-shelfRole html {
  box-sizing: border-box;
}
.ec-shelfRole *,
.ec-shelfRole *::before,
.ec-shelfRole *::after {
  box-sizing: inherit;
}
.ec-shelfRole img {
  width: 100%;
}
.ec-shelfRole__trial {
  max-width: 1272px;
  margin: 0 auto 40px;
  padding: 0 20px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial {
    margin-bottom: 80px;
  }
}
.ec-shelfRole__trial__wrap figure {
  margin: 0 auto;
  width: -moz-fit-content;
  width: fit-content;
  display: none;
}
.ec-shelfRole__trial__wrap figure img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial__wrap figure {
    display: block;
  }
}
@media (min-width: 1200px) {
  .ec-shelfRole__trial__wrap {
    display: flex;
    align-items: center;
    -moz-column-gap: 46px;
         column-gap: 46px;
    flex-wrap: wrap;
  }
  .ec-shelfRole__trial__wrap > figure {
    margin-bottom: 0;
    width: 30.6818181818%;
  }
}
.ec-shelfRole__trial__block {
  width: 100%;
  margin: 0 auto;
  background: #f6f2e8;
  border-radius: 16px;
  padding: 20px;
}
.ec-shelfRole__trial__block a {
  background: #f8f5ed;
  border-radius: 12px;
  display: block;
  padding: 16px 78px 16px 16px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial__block a {
    display: flex;
    -moz-column-gap: 32px;
         column-gap: 32px;
  }
}
.ec-shelfRole__trial__block a .fig figure {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial__block a .fig {
    width: 200px;
  }
}
.ec-shelfRole__trial__block a .fig img {
  width: 100%;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.ec-shelfRole__trial__block a .info h3, .ec-shelfRole__trial__block a .info .h3 {
  font-size: 18px;
  font-weight: 700;
}
.ec-shelfRole__trial__block a .info h3 span, .ec-shelfRole__trial__block a .info .h3 span {
  display: inline-block;
  background: #fff;
  border: 1px solid #000;
  border-radius: 24px;
  padding: 4px 8px;
  line-height: 1;
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
  margin-left: 4px;
  position: relative;
  top: -2px;
}
.ec-shelfRole__trial__block a .info p {
  margin-bottom: 15px;
}
.ec-shelfRole__trial__block a .info .ec-badge {
  background: #e94f2a;
  border-radius: 32px;
  color: #fff;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  vertical-align: middle;
  margin-right: 4px;
}
.ec-shelfRole__trial__block a .info .ec-strike {
  color: #888888;
  font-size: 14px;
  font-weight: 700;
}
.ec-shelfRole__trial__block a .info .ec-strike span {
  text-decoration: line-through;
  font-size: 16px;
  font-weight: 400;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ec-shelfRole__trial__block a .info .price {
  font-size: 14px;
  font-weight: 700;
}
.ec-shelfRole__trial__block a .info .price .yen {
  font-size: 18px;
  font-emphasize: 700px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e94f2a;
}
.ec-shelfRole__trial__block a .info .price .num {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e94f2a;
}
.ec-shelfRole__trial__block a .info .price .note {
  font-size: 12px;
  margin: 0 5px;
  font-weight: 500;
}
@media (min-width: 1200px) {
  .ec-shelfRole__trial__block {
    width: 40.5844155844%;
    margin-right: 0;
  }
}
.ec-shelfRole__trial__block__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
.ec-shelfRole__trial__block h3, .ec-shelfRole__trial__block .h3 {
  margin-bottom: 30px;
  line-height: 1.5;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial__block h3, .ec-shelfRole__trial__block .h3 {
    text-align: left;
  }
}
.ec-shelfRole__trial__block .a {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 0 20px 20px;
  color: #c3976f;
}
.ec-shelfRole__trial__block .b {
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid;
  border-top: 1px solid;
  text-align: center;
  font-weight: 700;
}
.ec-shelfRole__trial__block a {
  color: #111111;
  padding: 40px;
}
.ec-shelfRole__trial__block a .fig {
  width: auto;
  max-width: 310px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial__block a .fig {
    width: 310px;
  }
}
.ec-shelfRole__trial__block a .info h3, .ec-shelfRole__trial__block a .info .h3 {
  margin: 10px 0 20px;
  font-size: 28px;
}
.ec-shelfRole__trial__block a .info h3 span, .ec-shelfRole__trial__block a .info .h3 span {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfRole__trial__block a .info h3 span, .ec-shelfRole__trial__block a .info .h3 span {
    display: inline-block;
    margin-top: 0;
  }
}
.ec-shelfRole__trial__block a .info .price .num {
  font-size: 38px;
  font-weight: 500;
}
.ec-shelfRole__trial__block a .info .price + p {
  font-size: 16px;
  font-weight: 500;
  margin-top: 30px;
}
.ec-shelfRole__trial__block a .info .price .a {
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 0 20px 20px;
  color: #c3976f;
}
.ec-shelfRole__trial__block a .info .price .b {
  padding: 10px 0px 10px 0px;
  border-bottom: 1px solid;
  border-top: 1px solid;
  text-align: center;
  font-weight: 700;
}
.ec-shelfRole__header {
  max-width: 1272px;
  margin: 0 auto;
  padding: 0 20px;
}
.ec-shelfRole__body {
  background: #fff;
  border-radius: 48px 48px 0 0;
  padding-top: 80px;
}
/*
商品一覧グリッド

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

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

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

Styleguide 13.2.1

*/
.ec-shelfGrid {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
  gap: 46px;
  padding: 0;
  list-style: none;
}
.ec-shelfGrid a {
  color: inherit;
  text-decoration: none;
}
.ec-shelfGrid a:hover {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGrid {
    gap: 120px 46px;
  }
}
.ec-shelfGrid .ec-shelfGrid__item {
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGrid .ec-shelfGrid__item {
    width: auto;
    margin: 0;
  }
}
.ec-shelfGrid .ec-shelfGrid__item-image {
  margin-bottom: 30px;
  text-align: center;
  border-radius: 16px;
  overflow: hidden;
}
.ec-shelfGrid .ec-shelfGrid__item img {
  width: 100%;
  max-height: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGrid .ec-shelfGrid__item {
    width: calc((100% - 92px) / 3);
  }
}
.ec-shelfGrid .ec-shelfGrid__item__block {
  padding: 0 16px;
}
.ec-shelfGrid .ec-shelfGrid__item__block .ec-product__freearea {
  margin-bottom: 30px;
}
.ec-shelfGrid .ec-shelfGrid__item__block .ec-product__freearea ul {
  margin: 0;
  padding: 0;
}
.ec-shelfGrid .ec-shelfGrid__item__title {
  margin-bottom: 24px;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  -moz-column-gap: 20px;
       column-gap: 20px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGrid .ec-shelfGrid__item__title {
    display: block;
  }
}
@media (min-width: 1200px) {
  .ec-shelfGrid .ec-shelfGrid__item__title {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    -moz-column-gap: 20px;
         column-gap: 20px;
  }
}
.ec-shelfGrid .ec-shelfGrid__item__title h3, .ec-shelfGrid .ec-shelfGrid__item__title .h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGrid .ec-shelfGrid__item__title h3, .ec-shelfGrid .ec-shelfGrid__item__title .h3 {
    margin: 0;
  }
}
.ec-shelfGrid .ec-shelfGrid__item__title p {
  font-size: 14px;
  font-weight: 500;
}
.ec-shelfGrid .ec-shelfGrid__item__title figure {
  width: 112px;
  margin: 0 auto 20px;
}
@media (min-width: 1200px) {
  .ec-shelfGrid .ec-shelfGrid__item__title figure {
    width: 112px;
    margin: 0;
  }
}
@media only screen and (min-width: 768px) {
  .ec-shelfGrid .ec-shelfGrid__item__title__inner {
    width: calc(100% - 132px);
  }
}
.ec-shelfGrid .ec-shelfGrid__item__icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-productRole__btn {
  margin-top: auto;
  margin-bottom: 15px;
}
.ec-shelfGrid .ec-shelfGrid__item__price {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 20px;
}
.ec-shelfGrid .ec-shelfGrid__item__price .yen {
  font-size: 20px;
}
.ec-shelfGrid .ec-shelfGrid__item__price .note {
  font-size: 14px;
  font-weight: 500;
}
.ec-shelfGrid .ec-shelfGrid__item__price .num {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  font-weight: 600;
}
.ec-shelfGrid .ec-shelfGrid__item__pack {
  font-size: 14px;
  font-weight: 500;
}
.ec-shelfGrid .ec-shelfGrid__item__pack span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
}
.ec-shelfGrid .ec-shelfGrid__item__pack span span {
  color: #d9d9d9;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-blockBtn--action {
  margin-top: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 9px;
       column-gap: 9px;
}
.ec-shelfGrid .ec-shelfGrid__item .ec-blockBtn--action::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("../img/product/icon_cart.svg") no-repeat;
  background-size: contain;
}
.ec-shelfGrid .ec-shelfGrid__title {
  margin-bottom: 7px;
}
.ec-shelfGrid .ec-shelfGrid__price {
  font-weight: bold;
}
/*
13.2.2 商品一覧グリッド（中央寄せ）

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

SP版２列、PC版４列の特殊グリッドを構成します。
商品のあまりはセンタリングされ、中央に表示されます。

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

Styleguide 13.2.2

*/
.ec-shelfGridCenter {
  display: flex;
  margin-left: 0;
  margin-right: 0;
  flex-wrap: wrap;
  padding: 0;
  list-style: none;
  justify-content: center;
}
.ec-shelfGridCenter a {
  color: inherit;
  text-decoration: none;
}
.ec-shelfGridCenter a:hover {
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGridCenter {
    margin-left: -16px;
    margin-right: -16px;
  }
}
.ec-shelfGridCenter .ec-shelfGridCenter__item {
  margin-bottom: 36px;
  width: 50%;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item-image {
  margin-bottom: 10px;
  text-align: center;
}
.ec-shelfGridCenter .ec-shelfGridCenter__item img {
  width: auto;
  max-height: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGridCenter .ec-shelfGridCenter__item {
    padding: 0 16px;
    width: 25%;
  }
}
.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;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(odd) {
    padding: 0 16px;
  }
}
.ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
  padding-left: 8px;
}
@media only screen and (min-width: 768px) {
  .ec-shelfGridCenter .ec-shelfGridCenter__item:nth-child(even) {
    padding: 0 16px;
  }
}
.ec-shelfGridCenter .ec-shelfGridCenter__title {
  margin-bottom: 7px;
}
.ec-shelfGridCenter .ec-shelfGridCenter__plice {
  font-weight: bold;
}
/*
商品一覧フッター

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

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

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

Styleguide 13.3

*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
カート追加モーダル

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

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

+ec-modal

Styleguide 13.4

*/
.ec-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 100%;
  height: 100%;
}
.ec-modal.small {
  width: 30%;
}
.ec-modal.full {
  width: 100%;
  height: 100%;
}
.ec-modal .ec-modal-overlay {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
.ec-modal .ec-modal-wrap {
  position: relative;
  border-radius: 2px;
  border: 1px solid #333;
  background-color: #fff;
  width: 90%;
  margin: 20px;
  padding: 40px 5px;
}
@media only screen and (min-width: 768px) {
  .ec-modal .ec-modal-wrap {
    padding: 40px 10px;
    width: 50%;
    margin: 20px auto;
  }
}
.ec-modal .ec-modal-close {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 10px;
  font-size: 20px;
  height: 30px;
  width: 20px;
}
.ec-modal .ec-modal-close:hover {
  color: #4b5361;
}
.ec-modal .ec-modal-box {
  text-align: center;
}
.ec-modal .ec-role {
  margin-top: 20px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
商品詳細

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

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


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

Styleguide 14.1
*/
#page_product_list .ec-layoutRole .ec-layoutRole__contents {
  max-width: none;
}
#page_product_list .ec-topicPath {
  margin-bottom: 200px;
}
.product_page .ec-layoutRole .ec-layoutRole__contents {
  max-width: 1232px;
}
.ec-productRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  max-width: unset;
  margin-bottom: 40px;
}
.ec-productRole:after {
  content: " ";
  display: table;
}
.ec-productRole:after {
  clear: both;
}
.ec-productRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-productRole ul,
.ec-productRole ol {
  list-style: none;
}
.ec-productRole img {
  max-width: 100%;
}
.ec-productRole html {
  box-sizing: border-box;
}
.ec-productRole *,
.ec-productRole *::before,
.ec-productRole *::after {
  box-sizing: inherit;
}
.ec-productRole img {
  width: 100%;
}
.ec-productRole__modal {
  border-radius: 48px;
  border: 1px solid #111111;
  background: #fff;
  display: flex;
  padding: 10px 15px;
  color: #111111;
  line-height: 1;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  font-weight: 700;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-productRole__price2 {
  margin-bottom: 30px;
}
.ec-productRole__price2 .ec-price__price2 {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.ec-productRole__price2 .ec-price2__tax {
  font-weight: 500;
  font-size: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.ec-productRole__price2 p {
  margin-top: 20px;
}
.ec-productRole__point {
  border-top: 1px solid #111111;
  padding: 80px 0;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point {
    padding: 120px 0;
  }
}
.ec-productRole__point .ec-productRole {
  max-width: 1232px;
  margin: 0 auto;
}
.ec-productRole__point__block {
  margin-bottom: 56px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__block {
    display: flex;
    -moz-column-gap: 72px;
         column-gap: 72px;
    margin-bottom: 80px;
    align-items: center;
  }
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__block figure {
    width: 50%;
  }
}
.ec-productRole__point__block figure img {
  border-radius: 16px;
  overflow: hidden;
}
.ec-productRole__point__block:nth-child(odd) {
  flex-direction: row-reverse;
  /* SP で横並びのままだと、見出し 220px / 情報 110px / 画像 20px が
     350px に詰め込まれる。画像は object-fit: cover なので 1152x841 の絵が
     20x643 の細い帯に切り取られて何も読めない。
     詳細ページ側の order: 1 / 2 / 4 は縦積み前提の指定なので、
     SP は縦に積む（偶数番目は既に縦積みで正しく出ている）。 */
}
@media only screen and (max-width: 767px) {
  .ec-productRole__point__block:nth-child(odd) {
    flex-direction: column;
  }
}
.ec-productRole__point__block:last-child {
  margin-bottom: 0;
}
.ec-productRole__point__info {
  margin-bottom: 32px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info {
    width: 50%;
    margin-bottom: 0;
  }
}
.ec-productRole__point__info__no {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #c3976f;
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.ec-productRole__point__info__no span {
  margin-right: 10px;
  background: #c3976f;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 12px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border-radius: 16px;
}
.ec-productRole__point__info h2, .ec-productRole__point__info .h2 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 30px;
  line-height: 1.5;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info h2, .ec-productRole__point__info .h2 {
    font-size: 36px;
    margin-bottom: 45px;
  }
}
.ec-productRole__point__info h3, .ec-productRole__point__info .h3 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 30px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info h3, .ec-productRole__point__info .h3 {
    font-size: 18px;
  }
}
.ec-productRole__point__info p {
  font-weight: 500;
  font-size: 15px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info p {
    font-size: 18px;
  }
}
.ec-productRole__point__info__flex {
  margin-top: 30px;
  display: flex;
  -moz-column-gap: 28px;
       column-gap: 28px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info__flex {
    margin-top: 45px;
  }
}
.ec-productRole__point__info__flex dl dt {
  font-weight: 700;
  color: #c3976f;
  font-size: 16px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info__flex dl dt {
    font-size: 18px;
  }
}
.ec-productRole__point__info__flex dl dd {
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__point__info__flex dl dd {
    font-size: 18px;
  }
}
.ec-productRole__for {
  border-top: 1px solid #111111;
  padding: 80px 0;
  overflow-x: hidden;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for {
    padding: 120px 0;
  }
}
.ec-productRole__for .ec-productRole {
  padding: 0;
  margin-bottom: 0;
}
.ec-productRole__for h2, .ec-productRole__for .h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 48px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for h2, .ec-productRole__for .h2 {
    font-size: 36px;
  }
  .ec-productRole__for h2 br, .ec-productRole__for .h2 br {
    display: none;
  }
}
.ec-productRole__for h2 span, .ec-productRole__for .h2 span {
  display: block;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  margin-top: 30px;
}
.ec-productRole__for__slide .slick-prev,
.ec-productRole__for__slide .slick-next {
  top: 25%;
  width: 64px;
  height: 64px;
}
.ec-productRole__for__slide .slick-prev {
  left: 5.8823529412vw;
  background: url("../icon/icon_slide.svg") no-repeat center center;
  background-size: contain;
  z-index: 1;
}
.ec-productRole__for__slide .slick-prev::before {
  content: none;
}
.ec-productRole__for__slide .slick-prev:hover {
  background: url("../icon/icon_slide.svg") no-repeat center center;
  background-size: contain;
}
.ec-productRole__for__slide .slick-next {
  right: 5.8823529412vw;
  background: url("../icon/icon_slide2.svg") no-repeat center center;
  background-size: contain;
  z-index: 1;
}
.ec-productRole__for__slide .slick-next::before {
  content: none;
}
.ec-productRole__for__slide .slick-next:hover {
  background: url("../icon/icon_slide2.svg") no-repeat center center;
  background-size: contain;
}
.ec-productRole__for .slide-item {
  padding: 0 10px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for .slide-item {
    padding: 0 40px;
  }
}
.ec-productRole__for .slide-item figure {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for .slide-item figure {
    margin-bottom: 40px;
  }
}
.ec-productRole__for .slide-item dl {
  margin-bottom: 24px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for .slide-item dl {
    margin-bottom: 40px;
  }
}
.ec-productRole__for .slide-item dl dt {
  margin-right: 10px;
  background: #c3976f;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 12px;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  border-radius: 16px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for .slide-item dl dt {
    margin-bottom: 40px;
  }
}
.ec-productRole__for .slide-item dl dd {
  font-weight: 500;
  font-size: 22px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for .slide-item dl dd {
    font-size: 28px;
  }
}
.ec-productRole__for .slide-item p {
  font-weight: 500;
  font-size: 15px;
  line-height: 175%;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__for .slide-item p {
    font-size: 16px;
  }
}
.ec-productRole__others {
  border-top: 1px solid #111111;
  padding: 80px 0;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__others {
    padding: 120px 0;
  }
}
.ec-productRole__others .ec-productRole {
  max-width: 1232px;
  margin: 0 auto;
}
.ec-productRole__others .ec-productRole h2, .ec-productRole__others .ec-productRole .h2 {
  margin-bottom: 48px;
}
.ec-productRole__others .ec-productRole h2 span, .ec-productRole__others .ec-productRole .h2 span {
  display: block;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__others .ec-productRole .product-row {
    display: flex;
    flex-wrap: wrap;
    gap: 72px 48px;
  }
}
.ec-productRole__others .ec-productRole .product-row .product-card {
  margin-bottom: 48px;
}
.ec-productRole__others .ec-productRole .product-row .product-card a {
  color: #111111;
}
@media only screen and (min-width: 768px) {
  .ec-productRole__others .ec-productRole .product-row .product-card {
    width: calc((100% - 96px) / 3);
    margin-bottom: 0;
  }
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-image-container {
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 32px;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content {
  padding: 0 24px;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content h3, .ec-productRole__others .ec-productRole .product-row .product-card .product-content .h3 {
  font-size: 20px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 28px;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group {
  text-align: center;
  margin-bottom: 28px;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group .price-symbol {
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group .price-symbol--special {
  color: #e94f2a;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group .price-amount {
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group .price-amount--special {
  color: #e94f2a;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group .price-range {
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
.ec-productRole__others .ec-productRole .product-row .product-card .product-content .price-group .price-note {
  font-weight: 500;
  font-size: 16px;
}
.ec-productRole__others .ec-productRole .product-row .product-card .description-text {
  font-size: 16px;
  font-weight: 500;
}
.ec-productRole .ec-productRole__img {
  margin-right: 0;
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__img {
    margin-right: 16px;
    margin-bottom: 0;
  }
}
.ec-productRole .ec-productRole__profile {
  margin-left: 0;
  background: #f6f2e8;
  padding: 37px 16px;
  border-radius: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__profile {
    border-radius: 24px;
    padding: 48px 40px;
  }
}
.ec-productRole .ec-productRole__title .ec-headingTitle {
  font-size: 28px;
  font-weight: 500;
  line-height: 140%;
  margin-bottom: 32px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__title .ec-headingTitle {
    font-size: 36px;
  }
}
.ec-productRole .ec-productRole__tags {
  padding: 0;
  margin: 0 0 10px;
  display: flex;
  gap: 10px;
}
.ec-productRole .ec-productRole__tag {
  background: #c3976f;
  color: #fff;
  padding: 5px 17px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  border-radius: 16px;
}
.ec-productRole .ec-productRole__description {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 32px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__description {
    font-size: 18px;
  }
}
.ec-productRole .ec-productRole__buyTab {
  border: 1px solid #111111;
  border-radius: 8px;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
}
.ec-productRole .ec-productRole__buyTab li {
  width: 50%;
  position: relative;
}
.ec-productRole .ec-productRole__buyTab li:first-child {
  border-right: 1px solid #111111;
}
.ec-productRole .ec-productRole__buyTab li:first-child a {
  border-radius: 8px 0 0 8px;
}
.ec-productRole .ec-productRole__buyTab li:last-child a {
  border-radius: 0 8px 8px 0;
}
.ec-productRole .ec-productRole__buyTab li:last-child::after {
  content: "";
  display: block;
  width: 89px;
  height: 28px;
  background: url("../icon/icon_recommend.svg") no-repeat;
  background-size: contain;
  position: absolute;
  top: -12px;
  right: 22px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab li:last-child::after {
    top: -12px;
    right: -5px;
  }
}
.ec-productRole .ec-productRole__buyTab li a {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #111111;
  padding: 18px 10px;
  font-size: 14px;
  font-weight: 500;
  -moz-column-gap: 8px;
       column-gap: 8px;
  position: relative;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab li a {
    font-size: 18px;
    padding: 24px 10px;
  }
}
.ec-productRole .ec-productRole__buyTab li a.is-active {
  background: #fff;
}
.ec-productRole .ec-productRole__buyTab li a.is-active span::after {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #db5331;
  border-radius: 50%;
  position: absolute;
  left: -27px;
  top: 2px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab li a.is-active span::after {
    top: 5px;
  }
}
.ec-productRole .ec-productRole__buyTab li a span {
  position: relative;
}
.ec-productRole .ec-productRole__buyTab li a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #111111;
}
.ec-productRole .ec-productRole__buyTab__list {
  margin: 0 0 32px;
  padding: 0;
}
.ec-productRole .ec-productRole__buyTab__list__item {
  margin-bottom: 16px;
}
.ec-productRole .ec-productRole__buyTab__list__item label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  border-radius: 12px;
  padding: 18px 18px 18px 40px;
  overflow: hidden;
  position: relative;
}
@media (min-width: 1200px) {
  .ec-productRole .ec-productRole__buyTab__list__item label {
    flex-wrap: nowrap;
  }
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__list__item label {
    padding: 18px 18px 18px 54px;
  }
}
.ec-productRole .ec-productRole__buyTab__list__item label:has(input:checked)::after {
  display: block;
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e94f2a;
  position: absolute;
  top: 18px;
  left: 18px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__list__item label:has(input:checked)::after {
    width: 14px;
    height: 14px;
    top: 23px;
    left: 23px;
  }
}
.ec-productRole .ec-productRole__buyTab__list__item label::before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #111111;
  border-radius: 50%;
  position: absolute;
  top: 14px;
  left: 14px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__list__item label::before {
    width: 24px;
    height: 24px;
    left: 18px;
    top: 18px;
  }
}
.ec-productRole .ec-productRole__buyTab__list__item label input {
  display: none;
}
.ec-productRole .ec-productRole__buyTab__label {
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__label {
    font-size: 20px;
  }
}
.ec-productRole .ec-productRole__buyTab__label span {
  font-size: 11px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__label span {
    font-size: 14px;
  }
}
.ec-productRole .ec-productRole__buyTab__label__custom {
  border: 1px solid #000;
  color: #111111;
  font-size: 9px;
  border-radius: 24px;
  padding: 4px 8px;
  letter-spacing: 0;
  margin-top: 15px;
  width: -moz-fit-content;
  width: fit-content;
  white-space: nowrap;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__label__custom {
    font-size: 12px;
  }
}
.ec-productRole .ec-productRole__buyTab__price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  -moz-column-gap: 5px;
       column-gap: 5px;
  margin-top: 10px;
}
@media (min-width: 1200px) {
  .ec-productRole .ec-productRole__buyTab__price {
    justify-content: flex-end;
    margin-top: 0;
  }
}
.ec-productRole .ec-productRole__buyTab__price .off {
  background: #db5331;
  color: #fff;
  font-size: 11px;
  font-family: serif;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 16px;
  margin-bottom: 4px;
  width: -moz-fit-content;
  width: fit-content;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__price .off {
    font-size: 13px;
  }
}
.ec-productRole .ec-productRole__buyTab__price .default {
  color: #888;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__price .default {
    font-size: 10px;
  }
}
.ec-productRole .ec-productRole__buyTab__price .default span {
  text-decoration: line-through;
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__price .default span {
    font-size: 12px;
  }
}
.ec-productRole .ec-productRole__buyTab__price .main {
  display: flex;
  align-items: baseline;
  font-size: 24px;
  font-weight: 700;
  color: #000;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
@media (min-width: 1200px) {
  .ec-productRole .ec-productRole__buyTab__price .main {
    width: auto;
    justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__price .main {
    font-size: 30px;
    width: 100%;
  }
}
.ec-productRole .ec-productRole__buyTab__price .main .yen {
  font-size: 16px;
  margin-right: 2px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__price .main .yen {
    font-size: 20px;
  }
}
.ec-productRole .ec-productRole__buyTab__price .main .tax {
  font-size: 11px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  margin-left: 4px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__price .main .tax {
    font-size: 14px;
  }
}
.ec-productRole .ec-productRole__buyTab__info {
  padding: 0 20px;
  margin-bottom: 32px;
}
.ec-productRole .ec-productRole__buyTab__point {
  margin: 0 0 32px;
  padding: 0;
}
.ec-productRole .ec-productRole__buyTab__point li {
  margin-bottom: 16px;
  position: relative;
  padding-left: 25px;
  font-size: 12px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__point li {
    font-size: 16px;
    padding-left: 30px;
  }
}
.ec-productRole .ec-productRole__buyTab__point li::before {
  content: "";
  display: block;
  background: url("../icon/icon_point.svg") no-repeat;
  width: 18px;
  height: 18px;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__point li::before {
    width: 24px;
    height: 24px;
  }
}
.ec-productRole .ec-productRole__buyTab__explain dt {
  border-radius: 32px;
  background: #378a69;
  width: -moz-fit-content;
  width: fit-content;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 8px 12px;
  margin-bottom: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__buyTab__explain dt {
    font-size: 14px;
  }
}
.ec-productRole .ec-productRole__buyTab__explain dd {
  font-size: 14px;
  line-height: 175%;
}
.ec-productRole .ec-productRole__buyTab__explain dd ul {
  margin: 0;
  padding: 0;
}
.ec-productRole .ec-productRole__buyTab__explain dd ul li {
  position: relative;
  padding-left: 15px;
}
.ec-productRole .ec-productRole__buyTab__explain dd ul li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
}
.ec-productRole .ec-productRole__priceRegular {
  padding-top: 14px;
}
.ec-productRole .ec-productRole__priceRegularTax {
  margin-left: 5px;
  font-size: 10px;
}
.ec-productRole .ec-productRole__price {
  color: #de5d50;
  font-size: 28px;
  padding: 0;
  border-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__price {
    padding: 14px 0;
    border-bottom: 1px dotted #ccc;
  }
}
.ec-productRole .ec-productRole__code {
  padding: 14px 0;
  border-bottom: 1px dotted #ccc;
}
.ec-productRole .ec-productRole__category {
  padding: 14px 0;
  border-bottom: 1px dotted #ccc;
}
.ec-productRole .ec-productRole__category a {
  color: #33a8d0;
}
.ec-productRole .ec-productRole__category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ec-productRole .ec-productRole__actions {
  padding: 14px 0;
}
.ec-productRole .ec-productRole__actions .ec-select select {
  height: 40px;
  max-width: 100%;
  min-width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__actions .ec-select select {
    min-width: 350px;
    max-width: 350px;
  }
}
.ec-productRole .ec-productRole__btn {
  width: 100%;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__btn {
    margin-bottom: 16px;
  }
}
.ec-productRole .ec-productRole__textBlock__title {
  margin-bottom: 40px;
}
.ec-productRole .ec-productRole__textBlock__title:has(.extension-toggle-icon) {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ec-productRole .ec-productRole__textBlock__title .extension-toggle-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url("../icon/icon_ac.svg") no-repeat 0 0;
  background-size: contain;
  text-indent: -999px;
  overflow: hidden;
}
.ec-productRole .ec-productRole__textBlock__title__select {
  position: relative;
}
.ec-productRole .ec-productRole__textBlock__title__select h2, .ec-productRole .ec-productRole__textBlock__title__select .h2 {
  cursor: pointer;
  background: url("../icon/icon_ac.svg") no-repeat 100% 50%;
  background-size: 32px 32px;
  padding: 2px 35px 2px 0;
}
.ec-productRole .ec-productRole__textBlock__title__select h2.is-active, .ec-productRole .ec-productRole__textBlock__title__select .is-active.h2 {
  background-image: url("../icon/icon_ac_ov.svg");
}
.ec-productRole .ec-productRole__textBlock__title__select .select {
  position: absolute;
  border-radius: 16px;
  border: 1px solid #6d6d68;
  background: #fff;
  top: 100%;
  padding: 16px;
  display: none;
  z-index: 20;
}
.ec-productRole .ec-productRole__textBlock__title__select .select li a {
  display: block;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #111111;
}
.ec-productRole .ec-productRole__textBlock__title__select .select li a:hover {
  background: #f8f5ed;
  border-radius: 8px;
}
.ec-productRole .ec-productRole__textBlock__tabs {
  display: flex;
  margin: 0 0 36px;
  padding: 0;
}
.ec-productRole .ec-productRole__textBlock__tabs li {
  width: 25%;
}
.ec-productRole .ec-productRole__textBlock__tabs li a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #eeb232;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.64px;
  color: #888;
  padding: 10px;
  min-height: 55px;
  height: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__textBlock__tabs li a {
    font-size: 16px;
    padding: 18px;
    min-height: unset;
  }
  .ec-productRole .ec-productRole__textBlock__tabs li a br {
    display: none;
  }
}
.ec-productRole .ec-productRole__textBlock__tabs li a.is-active {
  color: #111111;
  border: 1px solid #eeb232;
  border-radius: 8px 8px 0 0;
  border-bottom: unset;
}
.ec-productRole .ec-productRole__textBlock__content h3, .ec-productRole .ec-productRole__textBlock__content .h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 32px;
}
.ec-productRole .ec-productRole__textBlock__content h3 span, .ec-productRole .ec-productRole__textBlock__content .h3 span {
  font-size: 16px;
}
.ec-productRole .ec-productRole__textBlock__content.feature h4, .ec-productRole .ec-productRole__textBlock__content.feature .h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 16px;
}
.ec-productRole .ec-productRole__textBlock__content.feature p {
  font-size: 14px;
  margin-bottom: 32px;
}
.ec-productRole .ec-productRole__textBlock__content.feature dl {
  margin-bottom: 24px;
}
.ec-productRole .ec-productRole__textBlock__content.feature dl dt {
  border-radius: 32px;
  background: #eeb232;
  padding: 8px 12px;
  line-height: 1;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  margin-bottom: 16px;
  color: #fff;
}
.ec-productRole .ec-productRole__textBlock__content.feature dl dd {
  font-size: 14px;
}
.ec-productRole .ec-productRole__textBlock__content.material figure {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 20px;
}
.ec-productRole .ec-productRole__textBlock__content.material ul {
  margin: 0 -12px;
  padding: 0;
}
.ec-productRole .ec-productRole__textBlock__content.material ul .slick-slide {
  margin: 0 12px;
}
.ec-productRole .ec-productRole__textBlock__content.material .slick-dots {
  position: relative;
  bottom: auto;
  margin-top: 32px;
  margin-bottom: 32px;
}
.ec-productRole .ec-productRole__textBlock__content.material .slick-dots li.slick-active button::before {
  background-color: #eeb232;
}
.ec-productRole .ec-productRole__textBlock__content.material .slick-dots li button:before {
  opacity: 1;
  background-color: #dadada;
}
.ec-productRole .ec-productRole__textBlock__content.material dl {
  margin-bottom: 0;
}
.ec-productRole .ec-productRole__textBlock__content.material dl dt {
  border-radius: 32px;
  background: #eeb232;
  padding: 8px 12px;
  line-height: 1;
  width: -moz-fit-content;
  width: fit-content;
  font-size: 14px;
  margin: 0 auto 16px;
  color: #fff;
}
.ec-productRole .ec-productRole__textBlock__content.material dl dd {
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__textBlock__content.ingredients .ec-productRole__textBlock__content__wrap {
    display: flex;
    justify-content: space-between;
    -moz-column-gap: 32px;
         column-gap: 32px;
  }
}
.ec-productRole .ec-productRole__textBlock__content.ingredients .ec-productRole__textBlock__content__wrap > div {
  margin-bottom: 24px;
  border-top: 1px solid #b4b4b4;
  padding-top: 24px;
}
@media only screen and (min-width: 768px) {
  .ec-productRole .ec-productRole__textBlock__content.ingredients .ec-productRole__textBlock__content__wrap > div {
    width: calc((100% - 32px) / 2);
    margin-bottom: 0;
  }
}
.ec-productRole .ec-productRole__textBlock__content.ingredients .ec-productRole__textBlock__content__wrap > div table {
  width: 100%;
}
.ec-productRole .ec-productRole__textBlock__content.ingredients .ec-productRole__textBlock__content__wrap > div table td {
  width: 50%;
  padding-bottom: 10px;
  font-size: 16px;
}
.ec-productRole .ec-productRole__textBlock__content.ingredients .ec-productRole__textBlock__content__note {
  font-size: 14px;
  margin-top: 12px;
}
.ec-productRole .ec-productRole__trial__off {
  display: flex;
  -moz-column-gap: 4px;
       column-gap: 4px;
  margin-bottom: 5px;
  align-items: flex-start;
}
.ec-productRole .ec-productRole__trial__off__price {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #888;
  font-size: 20px;
  font-weight: 400;
  text-decoration: line-through;
}
.ec-productRole .ec-productRole__trial__off__price .yen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}
.ec-productRole .ec-productRole__trial__price {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 30px;
}
.ec-productRole .ec-productRole__trial__price .price {
  color: #e94f2a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 42px;
  font-weight: 500;
}
.ec-productRole .ec-productRole__trial__price .price .yen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  font-weight: 700;
}
.ec-productRole .ec-productRole__trial__price .note {
  font-size: 12px;
  font-weight: 500;
  display: inline-block;
  margin: 0 10px;
}
.ec-productRole .ec-productRole__trial__cont {
  background: #fff;
  border-radius: 12px;
  padding: 32px 15px;
  margin-bottom: 30px;
}
.ec-productRole .ec-productRole__trial__cont p {
  margin-bottom: 24px;
  font-size: 20px;
  font-weight: 500;
}
.ec-productRole .ec-productRole__trial__cont p span {
  font-size: 17px;
  font-weight: 700;
}
.ec-productRole .ec-productRole__priceInline {
  display: flex;
  align-items: baseline;
}
.ec-productRole .ec-productRole__priceInline--product {
  margin: 12px 6px 0 0;
  justify-content: flex-start;
}
.ec-productRole .ec-productRole__priceInline--cart {
  margin: 12px 0;
}
.ec-productRole .ec-productRole__trial--spaced {
  margin: 12px 6px 0 0;
}
.ec-productRole .ec-productRole__textBlock__title:has(.extension-toggle-icon) {
  cursor: pointer;
}
.ec-productRole .ec-productRole__buyTab__label {
  white-space: nowrap;
}
.ec-productRole .alert {
  margin: 20px 0;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
カート

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

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

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

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

Styleguide 15.1

*/
.ec-cartRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-cartRole:after {
  content: " ";
  display: table;
}
.ec-cartRole:after {
  clear: both;
}
.ec-cartRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-cartRole ul,
.ec-cartRole ol {
  list-style: none;
}
.ec-cartRole img {
  max-width: 100%;
}
.ec-cartRole html {
  box-sizing: border-box;
}
.ec-cartRole *,
.ec-cartRole *::before,
.ec-cartRole *::after {
  box-sizing: inherit;
}
.ec-cartRole img {
  width: 100%;
}
.ec-cartRole::before {
  display: none;
}
.ec-cartRole .ec-cartRole__progress {
  width: 100%;
  text-align: center;
}
.ec-cartRole .ec-cartRole__error {
  width: 100%;
  text-align: center;
}
.ec-cartRole .ec-cartRole__error .ec-alert-warning {
  max-width: 80%;
  display: inline-block;
}
.ec-cartRole .ec-cartRole__totalText {
  margin-bottom: 0;
  padding: 16px 0 6px;
  width: 100%;
  text-align: center;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole .ec-cartRole__totalText {
    margin-bottom: 30px;
    padding: 0;
  }
}
.ec-cartRole .ec-cartRole__cart {
  margin: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole .ec-cartRole__cart {
    margin: 0 10%;
  }
}
.ec-cartRole .ec-cartRole__actions {
  text-align: right;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole .ec-cartRole__actions {
    width: 30%;
    margin-right: 10%;
  }
}
.ec-cartRole .ec-cartRole__total {
  padding: 15px 0 30px;
  font-weight: bold;
  font-size: 16px;
}
.ec-cartRole .ec-cartRole__totalAmount {
  margin-left: 30px;
  color: #de5d50;
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole .ec-cartRole__totalAmount {
    font-size: 24px;
  }
}
.ec-cartRole .ec-blockBtn--action {
  margin-bottom: 10px;
}
@media (min-width: 1000px) {
  .ec-cartRole__wrap {
    display: flex;
    justify-content: space-between;
    -moz-column-gap: 64px;
         column-gap: 64px;
  }
}
.ec-cartRole__main {
  margin-bottom: 50px;
}
@media (min-width: 1000px) {
  .ec-cartRole__main {
    width: 63.6363636364%;
    margin-bottom: 0;
  }
}
.ec-cartRole__main__trial__header {
  display: flex;
  align-items: center;
  -moz-column-gap: 32px;
       column-gap: 32px;
}
.ec-cartRole__main__trial__header figure {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}
.ec-cartRole__main__trial__header dl {
  margin-bottom: 0;
}
.ec-cartRole__main__trial__header dl dt {
  margin-bottom: 20px;
}
.ec-cartRole__main__trial__header dl dd {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
  font-size: 17px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__trial__header dl dd {
    font-size: 20px;
  }
}
.ec-cartRole__main__trial__list {
  margin: 0;
  padding: 0;
}
.ec-cartRole__main__trial__list li {
  display: flex;
  align-items: center;
  -moz-column-gap: 20px;
       column-gap: 20px;
  border-top: 1px solid #e6e6e6;
  margin-top: 16px;
  padding-top: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__trial__list li {
    -moz-column-gap: 25px;
         column-gap: 25px;
    margin-top: 25px;
    padding-top: 25px;
  }
}
.ec-cartRole__main__trial__list li figure {
  margin-bottom: 0;
  max-width: 60px;
}
.ec-cartRole__main__trial__list li dl {
  margin-bottom: 0;
}
.ec-cartRole__main__trial__list li dl dt {
  font-size: 14px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__trial__list li dl dt {
    font-size: 18px;
  }
}
.ec-cartRole__main__trial__list li dl dd {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
}
.ec-cartRole__main__subscription__list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 48px 16px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__subscription__list {
    gap: 56px 48px;
  }
}
.ec-cartRole__main__subscription__list li {
  width: calc((100% - 16px) / 2);
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__subscription__list li {
    width: calc((100% - 48px) / 2);
  }
}
.ec-cartRole__main__subscription__list figure {
  overflow: hidden;
  margin-bottom: 20px;
  border-radius: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__subscription__list figure {
    margin-bottom: 32px;
    border-radius: 24px;
  }
}
.ec-cartRole__main__subscription__list dl {
  margin-bottom: 32px;
}
.ec-cartRole__main__subscription__list dl dd {
  font-weight: 700;
  font-size: 17px;
  margin-top: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__subscription__list dl dd {
    font-size: 20px;
  }
}
.ec-cartRole__main__subscription__list dl dd span {
  font-size: 18px;
}
.ec-cartRole__main__subscription__controls {
  border: 1px solid #111111;
  border-radius: 32px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 5px;
}
.ec-cartRole__main__subscription__controls button {
  display: block;
  background: none;
  outline: none;
  border: none;
  width: 20px;
  height: 20px;
}
.ec-cartRole__main__subscription__controls button.minus {
  background: url("../icon/icon_minus.svg") no-repeat;
}
.ec-cartRole__main__subscription__controls button.plus {
  background: url("../icon/icon_puls.svg") no-repeat;
}
.ec-cartRole__main__subscription__controls span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__main__subscription__contents {
    padding: 0 24px;
  }
}
@media (min-width: 1000px) {
  .ec-cartRole__side {
    width: 384px;
  }
}
.ec-cartRole__side__content {
  background: #f8f5ed;
  border-radius: 24px;
  padding: 40px 32px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRole__side__content {
    padding: 32px 40px;
  }
}
.ec-cartRole__side__content .product {
  font-size: 28px;
  font-weight: 500;
}
.ec-cartRole__side__header {
  border-bottom: 1px solid #b4b4b4;
  padding-bottom: 24px;
  margin-bottom: 24px;
}
.ec-cartRole__side__header .pack-controls .amount {
  font-size: 18px;
  font-weight: 500;
}
.ec-cartRole__side__header .pack-controls .amount .num {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
}
.ec-cartRole__side__header .pack-controls .amount .separator {
  font-size: 20px;
  display: inline-block;
  margin: 0 5px;
  font-weight: 500;
}
.ec-cartRole__side__header .pack-controls .clear {
  font-size: 16px;
  font-weight: 500;
  color: #111111;
  text-decoration: underline;
  display: flex;
  align-items: center;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-cartRole__side__header .pack-controls .clear::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("../icon/icon_clear.svg") no-repeat;
  background-size: contain;
}
.ec-cartRole__side__product ul {
  margin: 0;
  padding: 0;
}
.ec-cartRole__side__product ul li {
  display: flex;
  align-items: center;
  -moz-column-gap: 25px;
       column-gap: 25px;
  border-bottom: 1px solid #b4b4b4;
  margin-bottom: 25px;
  padding-bottom: 25px;
}
.ec-cartRole__side__product ul li figure {
  margin-bottom: 0;
}
.ec-cartRole__side__product ul li dl {
  margin-bottom: 0;
}
.ec-cartRole__side__product ul li dl dt {
  font-size: 18px;
  font-weight: 700;
}
.ec-cartRole__side__product ul li dl dd {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
}
.ec-cartRole__side__coupon label {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 12px;
}
.ec-cartRole__side__coupon__input {
  border-radius: 84px;
  border: 1px #111111 solid;
  background: #fff;
  display: flex;
  padding: 4px;
  justify-content: space-between;
}
.ec-cartRole__side__coupon__input input {
  border: none;
  outline: none;
  border-radius: 84px 0 0 84px;
  padding-left: 24px;
  font-size: 14px;
}
.ec-cartRole__side__coupon__input button {
  background: #b88b2d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 2px 10px;
  color: #fff;
  border-radius: 84px;
}
.ec-cartRole__side__price {
  border-radius: 12px;
  border: 1px solid #111111;
  background: #fff;
  padding: 22px 24px;
}
.ec-cartRole__side__price .ec-icon2 {
  line-height: 1;
}
.ec-cartRole__side__price .label {
  font-size: 18px;
  font-weight: 700;
}
.ec-cartRole__side__price .yen {
  font-size: 14px;
  font-weight: 700;
}
.ec-cartRole__side__price .price {
  font-size: 20px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 500;
}
.ec-cartRole__side__price .off {
  color: #888;
}
.ec-cartRole__side__price .total {
  color: #000;
}
.ec-cartRole__side__price .total.trial {
  color: #e94f2a;
}
.ec-cartRole__side__price .total .yen {
  font-size: 24px;
}
.ec-cartRole__side__price .total .price {
  font-size: 32px;
}
.ec-cartRole__side__price .line-through {
  text-decoration: line-through;
}
.ec-cartRole__side .ec-blockBtn--action {
  margin-top: 24px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 9px;
       column-gap: 9px;
}
.ec-cartRole__side .ec-blockBtn--action::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("../img/product/icon_cart.svg") no-repeat;
  background-size: contain;
}
.ec-cartRole__side__note {
  margin: 0 24px;
  padding: 0;
}
.ec-cartRole__side__note li {
  font-size: 14px;
  text-indent: -1em;
  margin-left: 1em;
}
/*
カート商品表示枠（テーブルヘッダ）

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

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

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

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

Styleguide 15.1.2
*/
.ec-cartTable {
  display: table;
  border-top: 1px dotted #ccc;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-cartTable {
    border-top: none;
  }
}
/*
カート商品表示枠（テーブルヘッダ）

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

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;
}
@media only screen and (min-width: 768px) {
  .ec-cartHeader {
    display: table-row;
  }
}
.ec-cartHeader .ec-cartHeader__label {
  display: table-cell;
  padding: 16px;
  text-align: center;
  background: #f4f3f0;
  overflow-x: hidden;
  font-weight: bold;
}
.ec-cartCompleteRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-cartCompleteRole:after {
  content: " ";
  display: table;
}
.ec-cartCompleteRole:after {
  clear: both;
}
.ec-cartCompleteRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-cartCompleteRole ul,
.ec-cartCompleteRole ol {
  list-style: none;
}
.ec-cartCompleteRole img {
  max-width: 100%;
}
.ec-cartCompleteRole html {
  box-sizing: border-box;
}
.ec-cartCompleteRole *,
.ec-cartCompleteRole *::before,
.ec-cartCompleteRole *::after {
  box-sizing: inherit;
}
.ec-cartCompleteRole img {
  width: 100%;
}
/*
カート内商品

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

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

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

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

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


Styleguide 15.1.4
*/
.ec-cartRow {
  display: table-row;
}
.ec-cartRow .ec-cartRow__delColumn {
  border-bottom: 1px dotted #ccc;
  text-align: center;
  display: table-cell;
  width: 14%;
  vertical-align: middle;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__delColumn {
    width: 8.3333333%;
  }
}
.ec-cartRow .ec-cartRow__delColumn .ec-icon img {
  width: 1.5em;
  height: 1.5em;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__delColumn .ec-icon img {
    width: 1em;
    height: 1em;
  }
}
.ec-cartRow .ec-cartRow__contentColumn {
  border-bottom: 1px dotted #ccc;
  padding: 10px 0;
  display: table;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__contentColumn {
    display: table-cell;
  }
}
.ec-cartRow .ec-cartRow__img {
  display: table-cell;
  width: 40%;
  vertical-align: middle;
  padding-right: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__img {
    display: inline-block;
    min-width: 80px;
    max-width: 100px;
    padding-right: 0;
  }
}
.ec-cartRow .ec-cartRow__summary {
  display: table-cell;
  margin-left: 5px;
  font-weight: bold;
  vertical-align: middle;
  width: 46%;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__summary {
    display: inline-block;
    width: calc(100% - 130px);
    margin-left: 20px;
    vertical-align: middle;
  }
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__name {
  margin-bottom: 5px;
}
.ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
  display: block;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__summary .ec-cartRow__sutbtotalSP {
    display: none;
  }
}
.ec-cartRow .ec-cartRow__amountColumn {
  display: table-cell;
  border-bottom: 1px dotted #ccc;
  vertical-align: middle;
  text-align: center;
  width: 20%;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__amountColumn {
    width: 16.66666667%;
  }
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
  display: none;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amount {
    display: block;
  }
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
  display: block;
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountSP {
    display: none;
  }
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
  display: flex;
  justify-content: center;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpDown {
    display: block;
  }
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton {
  margin: 0 2px;
  display: inline-block;
  border: 2px solid #c9c9c9;
  border-radius: 50%;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  cursor: pointer;
  line-height: 40px;
  vertical-align: middle;
  position: relative;
  text-align: center;
  background: #fff;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountUpButton .ec-cartRow__amountUpButton__icon img {
  display: block;
  margin-left: -0.4em;
  width: 0.8em;
  height: 0.8em;
  position: absolute;
  top: 28%;
  left: 50%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
  margin: 0 2px;
  display: inline-block;
  border: 2px solid #c9c9c9;
  border-radius: 50%;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  height: 30px;
  cursor: pointer;
  line-height: 40px;
  vertical-align: middle;
  position: relative;
  text-align: center;
  background: #fff;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButton .ec-cartRow__amountDownButton__icon img, .ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled .ec-cartRow__amountDownButton__icon img {
  display: block;
  margin-left: -0.4em;
  width: 0.8em;
  height: 0.8em;
  position: absolute;
  top: 28%;
  left: 50%;
}
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
  cursor: default;
}
.ec-cartRow .ec-cartRow__subtotalColumn {
  display: none;
  border-bottom: 1px dotted #ccc;
  text-align: right;
  width: 16.66666667%;
}
@media only screen and (min-width: 768px) {
  .ec-cartRow .ec-cartRow__subtotalColumn {
    display: table-cell;
  }
}
/*
カート内商品(商品が１の場合)

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

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

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

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

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


Styleguide 15.1.5
*/
.ec-cartRow .ec-cartRow__amountColumn .ec-cartRow__amountDownButtonDisabled {
  cursor: default;
}
/*
アラート

カート内の商品に問題があることを示す警告メッセージです。

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

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

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

Styleguide 15.1.6
*/
.ec-alert-warning {
  width: 100%;
  padding: 10px;
  text-align: center;
  background: #f99;
  margin-bottom: 20px;
}
.ec-alert-warning .ec-alert-warning__inner {
  display: inline-block;
}
.ec-alert-warning .ec-alert-warning__inner__item {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.ec-alert-warning .ec-alert-warning__icon {
  display: inline-block;
  margin-right: 1rem;
  width: 20px;
  height: 20px;
  color: #fff;
  fill: #fff;
  vertical-align: top;
}
.ec-alert-warning .ec-alert-warning__text {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  position: relative;
  flex: 1;
  word-break: break-all;
}
/*
アラート(空)

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

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

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

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

Styleguide 15.1.7
*/
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
注文内容確認

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

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

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

Styleguide 15.2
*/
.ec-orderRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}
.ec-orderRole:after {
  content: " ";
  display: table;
}
.ec-orderRole:after {
  clear: both;
}
.ec-orderRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-orderRole ul,
.ec-orderRole ol {
  list-style: none;
}
.ec-orderRole img {
  max-width: 100%;
}
.ec-orderRole html {
  box-sizing: border-box;
}
.ec-orderRole *,
.ec-orderRole *::before,
.ec-orderRole *::after {
  box-sizing: inherit;
}
.ec-orderRole img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-orderRole {
    margin-top: 20px;
    flex-direction: row;
  }
}
.ec-orderRole .ec-inlineBtn {
  font-weight: normal;
}
.mypage .ec-orderRole .ec-inlineBtn {
  font-weight: bold;
}
.ec-orderRole .ec-orderRole__detail {
  padding: 0;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-orderRole .ec-orderRole__detail {
    padding: 0 16px;
    width: 66.66666%;
  }
}
.ec-orderRole .ec-orderRole__summary {
  width: 100%;
}
.ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
  display: inline-block;
}
@media only screen and (min-width: 768px) {
  .ec-orderRole .ec-orderRole__summary {
    width: 33.33333%;
    padding: 0 16px;
  }
  .ec-orderRole .ec-orderRole__summary .ec-inlineBtn {
    display: none;
  }
}
.ec-orderRole .ec-borderedList {
  margin-bottom: 20px;
  border-top: 1px dotted #ccc;
}
@media only screen and (min-width: 768px) {
  .ec-orderRole .ec-borderedList {
    border-top: none;
  }
}
/*
注文履歴詳細 オーダ情報

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

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

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

Styleguide 15.2.1
*/
.ec-orderOrder {
  margin-bottom: 30px;
}
.ec-orderOrder .ec-orderOrder__items {
  border-bottom: 1px dotted #ccc;
  border-top: 1px dotted #ccc;
}
.ec-orderOrder__block {
  border: 1px solid #d2cec8;
  border-radius: 16px;
  overflow: hidden;
  margin-top: 32px;
  font-size: 14px;
}
.ec-orderOrder__block.ec-orderAccount {
  margin-top: 0;
}
.ec-orderOrder__inner {
  padding: 28px 32px;
}
.ec-orderProduct ul li {
  border-bottom: 1px solid #e6e6e6;
}
.ec-orderProduct ul li .ec-imageGrid__img {
  width: 80px;
  padding-right: 20px;
}
.ec-orderProduct ul li:last-child {
  border-bottom: none;
}
.ec-orderDelivery__edit {
  border-top: 1px solid #e6e6e6;
  padding-top: 16px;
  margin-top: 24px;
}
.ec-orderDelivery__wrap {
  display: flex;
  -moz-column-gap: 30px;
       column-gap: 30px;
}
.ec-orderDelivery__actions .ec-selects {
  border-bottom: unset;
  margin-bottom: 0;
}
/*
注文履歴詳細 お客様情報

マイページ 注文詳細部に関する 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;
  font-size: 14px;
  font-weight: 500;
}
.ec-orderAccount p + p {
  margin-top: 16px;
}
.ec-orderAccount:after {
  content: " ";
  display: table;
}
.ec-orderAccount:after {
  clear: both;
}
.ec-orderAccount .ec-orderAccount__change {
  display: inline-block;
  margin-left: 10px;
  float: right;
}
.ec-orderAccount .ec-orderAccount__account {
  margin-bottom: 16px;
}
/*
注文詳細 配送情報

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

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

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

Styleguide 15.2.3
*/
.ec-orderDelivery .ec-orderDelivery__title {
  padding: 16px 0 17px;
  font-weight: bold;
  font-size: 18px;
  position: relative;
}
.ec-orderDelivery .ec-orderDelivery__change {
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
}
.ec-orderDelivery .ec-orderDelivery__items {
  border-bottom: 1px dotted #ccc;
  border-top: 1px dotted #ccc;
}
.ec-orderDelivery .ec-orderDelivery__address {
  margin: 10px 0 18px;
}
.ec-orderDelivery .ec-orderDelivery__address p {
  margin: 0;
}
/*
注文履歴詳細 支払情報

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

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

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

Styleguide 15.2.4
*/
/*
注文履歴詳細 お問い合わせ

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

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

Markup:
.ec-orderRole
  .ec-orderConfirm
    .ec-rectHeading
      h2 お問い合わせ
    p 記載なし

Styleguide 15.2.5
*/
.ec-orderConfirm {
  margin-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .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 {
  height: 96px;
}
/*
お届け先の複数指定

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

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

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

Styleguide 15.2.6
*/
.ec-AddAddress {
  padding: 0 10px;
}
@media only screen and (min-width: 768px) {
  .ec-AddAddress {
    margin: 0 10%;
  }
}
.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: block;
}
@media only screen and (min-width: 768px) {
  .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%;
}
@media only screen and (min-width: 768px) {
  .ec-AddAddress .ec-AddAddress__selectAddress select {
    min-width: 350px;
  }
}
.ec-AddAddress .ec-AddAddress__selectNumber {
  display: block;
}
@media only screen and (min-width: 768px) {
  .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;
}
@media only screen and (min-width: 768px) {
  .ec-AddAddress .ec-AddAddress__actions {
    width: 33.3333%;
    min-width: 250px;
    margin: 0 auto;
  }
}
.ec-AddAddress .ec-AddAddress__actions .ec-blockBtn--action {
  margin-bottom: 8px;
}
.ec-AddAddress .ec-AddAddress__new {
  margin-bottom: 20px;
}
/*
購入フロー 注文ブロック余白・複数配送先ラベル・区切り線

Shopping/index・Shopping/confirm の注文ブロック(.ec-orderOrder__block)間の
下余白、複数配送先ラベル、配送先間の区切り線に付いていたインラインスタイルを
FLOCSS 化したもの。裸の .ec-orderOrder__block(余白なし)には付与しないため、
余白は modifier で明示する。

Styleguide 15.3
*/
.ec-orderOrder__block--spaced {
  margin-bottom: 30px;
}
.ec-orderDelivery__shippingLabel {
  font-weight: 600;
}
.ec-orderDelivery__divider {
  margin: 16px 0;
  border-color: #eee;
}
/*
カート 画像・サイド・注文ボタンのインラインスタイル抽出

Cart/index および配送遅延バナースニペットに付いていたインラインスタイルを
FLOCSS 化したもの。object-fit はデフォルト(fill)と異なるためクラスで明示する。

Styleguide 15.4
*/
/* figure 内の商品画像(競合ルールなし。descendant で generic img に勝たせる) */
.ec-cartRole__main__trial__header figure img {
  width: 180px;
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
}
.ec-cartRole__main__trial__list li figure img {
  -o-object-fit: cover;
     object-fit: cover;
}
.ec-cartRole__main__subscription__list li figure img {
  -o-object-fit: cover;
     object-fit: cover;
}
/* トライアル(bundle)時のサイド見出しは区切り線なし。
   非bundle側(.ec-cartRole__side__header 単体)は border-bottom を維持するため modifier で限定 */
.ec-cartRole__side__header--flush {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
/* クーポンの次画面反映予告メモ */
.ec-cartRole__side__couponNote {
  font-size: 14px;
  color: #888;
  font-weight: 500;
}
/* NOTE: frame 未充足時の注文ボタンの inline style="opacity:0.5;cursor:not-allowed"
   は button-spinner.css が [style*="cursor: not-allowed"] で「ローディング無効」と
   「frame未充足無効」を判別する機能マーカーのため抽出せず保持する。 */
/* 配送遅延カートバナー(.alert の配色を上書き。JS で d-none 解除時に表示) */
.ec-cartShippingDelayBanner {
  background: #fff7e6;
  border-color: #ffc107;
  color: #7a4f00;
}
.ec-cartRole__main__trial__list li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.ec-cartRole__main__trial__list li figure {
  flex: 0 0 auto !important;
  margin: 0 !important;
}
.ec-cartRole__main__trial__list li dl {
  flex: 1 1 auto !important;
  margin: 0 !important;
  min-width: 0 !important;
}
.ec-cartRole__main__trial__list li .gd-trial-qty {
  flex: 0 0 auto !important;
  margin: 0 0 0 auto !important;
  white-space: nowrap !important;
  color: #111 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
}
@media (max-width: 991.98px) {
  .goodish-cart-page .ec-cartRole__main__trial__list {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  .goodish-cart-page .ec-cartRole__main__trial__list li {
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid #e5e0d8 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .goodish-cart-page .ec-cartRole__main__trial__list li figure {
    width: 72px !important;
    height: 78px !important;
    flex: 0 0 72px !important;
    margin: 0 !important;
  }
  .goodish-cart-page .ec-cartRole__main__trial__list li figure img {
    height: 68px !important;
    -o-object-fit: contain !important;
       object-fit: contain !important;
  }
  .goodish-cart-page .ec-cartRole__main__trial__list li dl {
    flex: 1 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
  }
  .goodish-cart-page .ec-cartRole__main__trial__list li .gd-trial-qty {
    flex: 0 0 auto !important;
    margin: 0 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #111 !important;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/*
注文履歴一覧

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

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

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

Styleguide 16.1
*/
.ec-historyRole .ec-historyRole__contents {
  padding-top: 1em;
  padding-bottom: 16px;
  border-top: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  color: #111111;
}
@media only screen and (min-width: 768px) {
  .ec-historyRole .ec-historyRole__contents {
    flex-direction: row;
  }
}
.ec-historyRole .ec-historyRole__header {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-historyRole .ec-historyRole__header {
    width: 33.3333%;
  }
}
.ec-historyRole .ec-historyRole__detail {
  border-top: 1px dotted #ccc;
  width: 100%;
}
.ec-historyRole .ec-historyRole__detail .ec-imageGrid:nth-of-type(1) {
  border-top: none;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailTitle {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: bold;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailPrice {
  margin-bottom: 8px;
  font-size: 1rem;
  font-weight: bold;
}
@media only screen and (min-width: 768px) {
  .ec-historyRole .ec-historyRole__detail {
    width: 66.6666%;
    border-top: none;
  }
}
/*
注文履歴一覧 規格

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

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: 0.5rem;
  font-size: 1.6rem;
}
.ec-historyRole .ec-historyRole__detail .ec-historyRole__detailOption::after {
  display: inline-block;
  padding-left: 0.5rem;
  content: "/";
  font-weight: bold;
}
/*
注文履歴一覧ヘッダ

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

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

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

Styleguide 16.1.2
*/
.ec-historyListHeader .ec-historyListHeader__date {
  font-weight: bold;
  font-size: 16px;
}
@media only screen and (min-width: 768px) {
  .ec-historyListHeader .ec-historyListHeader__date {
    font-weight: bold;
    font-size: 20px;
  }
}
.ec-historyListHeader .ec-historyListHeader__action {
  margin: 16px 0;
}
.ec-historyListHeader .ec-historyListHeader__action a {
  font-size: 12px;
  font-weight: normal;
}
@media only screen and (min-width: 768px) {
  .ec-historyListHeader .ec-historyListHeader__action a {
    font-size: 14px;
  }
}
/**
 * ECCUBE 固有のスタイルユーティリティ
 */
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
注文履歴詳細

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

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

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

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

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

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

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

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

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

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

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

Styleguide 16.2.6
*/
.ec-orderMail {
  padding-bottom: 10px;
  border-bottom: 1px dotted #ccc;
  margin-bottom: 16px;
}
.ec-orderMail .ec-orderMail__time {
  margin: 0;
}
.ec-orderMail .ec-orderMail__body {
  display: none;
}
.ec-orderMail .ec-orderMail__time {
  margin-bottom: 4px;
}
.ec-orderMail .ec-orderMail__link {
  margin-bottom: 4px;
}
.ec-orderMail .ec-orderMail__link a {
  color: #0092C4;
  text-decoration: none;
  cursor: pointer;
}
.ec-orderMail .ec-orderMail__link a:hover {
  color: #33A8D0;
}
.ec-orderMail .ec-orderMail__close a {
  color: #0092C4;
  text-decoration: none;
  cursor: pointer;
}
.ec-orderMail .ec-orderMail__close a:hover {
  color: #33A8D0;
}
/*
 * 16.3 Order Tracking（注文の配送追跡 UI）
 * history.twig / index.twig 双方の注文一覧で共有する yamato 追跡ボックスの
 * インラインスタイル抽出先（見た目を変えない純リファクタリング）。
 * 追跡ボタンの display:inline-flex / align-items / justify-content / text-decoration:none は
 * btn-theme.css `.mypage-btn-min` が既に付与しているため、非冗長な差分のみを抽出する。
 */
/*
 * 配送会社ロゴ（.tracking-carrier の flex item）
 * style.css には `.ec-mypageRole img { width: 100% }`（詳細度 0,1,1）があり、
 * 単一クラス（0,1,0）では負けて width:auto が失われ、幅が伸びて折返し崩れが起きる。
 * img+クラス（0,1,1）とし style.css 末尾（後勝ち）で width:auto を勝たせる。
 * 元インライン(1,0,0,0)の height:18px / width:auto を維持する。
 */
img.ec-orderTracking__carrierLogo {
  height: 18px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}
.ec-orderTracking {
  /* 追跡ボタン：.mypage-btn-min が未指定の gap のみ付与 */
  /* 追跡ボタン内アイコン svg（flex 縮小の抑止のみ） */
}
.ec-orderTracking__btn {
  gap: 6px;
}
.ec-orderTracking__btnIcon {
  flex-shrink: 0;
}
/*
 * 16.4 Order History（マイページ 注文履歴）
 * history.twig のインラインスタイル抽出先（見た目を変えない純リファクタリング）。
 * 配送追跡 UI の共有クラスは project/16.3.orderTracking を参照。
 */
.ec-orderHistoryRole {
  /* 注文状況アイコンを右寄せ（.ec-icon3 は margin-left 未指定のため単一クラスで足りる） */
  /* 領収書欄の補足テキスト（キャンセル済み/未発送の案内） */
  /* POST 用の画面外フォーム（視覚的に隠すが display は保持し JS 送信を維持） */
}
.ec-orderHistoryRole__statusIcon {
  margin-left: auto;
}
.ec-orderHistoryRole__receiptNote {
  font-size: 0.9em;
}
.ec-orderHistoryRole__hiddenForm {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
/*
住所一覧

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

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

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

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

Styleguide 17.1

*/
.ec-addressRole .ec-addressRole__item {
  border-top: 1px dotted #ccc;
}
.ec-addressRole .ec-addressRole__actions {
  margin-top: 32px;
  padding-bottom: 20px;
  border-bottom: 1px dotted #ccc;
}
.ec-addressList .ec-addressList__item {
  display: table;
  width: 100%;
  position: relative;
  border-bottom: 1px dotted #ccc;
}
.ec-addressList .ec-addressList__remove {
  vertical-align: middle;
  padding: 16px;
  text-align: center;
}
.ec-addressList .ec-addressList__remove .ec-icon img {
  width: 1em;
  height: 1em;
}
.ec-addressList .ec-addressList__address {
  display: table-cell;
  vertical-align: middle;
  padding: 16px;
  margin-right: 4em;
  width: 80%;
}
.ec-addressList .ec-addressList__action {
  position: relative;
  vertical-align: middle;
  text-align: right;
  top: 27px;
  padding-right: 10px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
パスワードリセット

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

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

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

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

Styleguide 18.1

*/
.ec-forgotRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-forgotRole:after {
  content: " ";
  display: table;
}
.ec-forgotRole:after {
  clear: both;
}
.ec-forgotRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-forgotRole ul,
.ec-forgotRole ol {
  list-style: none;
}
.ec-forgotRole img {
  max-width: 100%;
}
.ec-forgotRole html {
  box-sizing: border-box;
}
.ec-forgotRole *,
.ec-forgotRole *::before,
.ec-forgotRole *::after {
  box-sizing: inherit;
}
.ec-forgotRole img {
  width: 100%;
}
.ec-forgotRole .ec-forgotRole__intro {
  font-size: 16px;
}
.ec-forgotRole .ec-forgotRole__form {
  margin-bottom: 16px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
会員登録

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

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

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

Styleguide 19.1

*/
.ec-registerRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-registerRole:after {
  content: " ";
  display: table;
}
.ec-registerRole:after {
  clear: both;
}
.ec-registerRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-registerRole ul,
.ec-registerRole ol {
  list-style: none;
}
.ec-registerRole img {
  max-width: 100%;
}
.ec-registerRole html {
  box-sizing: border-box;
}
.ec-registerRole *,
.ec-registerRole *::before,
.ec-registerRole *::after {
  box-sizing: inherit;
}
.ec-registerRole img {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-registerRole {
    padding-top: 38px;
  }
}
.ec-registerRole__actions {
  padding-top: 20px;
  text-align: center;
}
.ec-registerRole__actions p {
  margin-bottom: 16px;
}
.ec-registerRole__actions dl {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0 4px;
}
.ec-registerRole__actions dl dt {
  width: 30%;
  flex-shrink: 0;
}
.ec-registerRole__actions dl dd {
  width: 70%;
  text-align: left;
}
.ec-registerRole__actions dl dd .ec-checkbox label {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  font-weight: 400;
  font-size: 12px;
  line-height: 175%;
}
.ec-registerRole__actions dl dd .ec-checkbox label input {
  width: 24px;
  height: 24px;
  border-color: #d2d2d2;
}
.ec-registerRole .ec-blockBtn--action {
  margin-bottom: 16px;
}
.ec-registerCompleteRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-registerCompleteRole:after {
  content: " ";
  display: table;
}
.ec-registerCompleteRole:after {
  clear: both;
}
.ec-registerCompleteRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-registerCompleteRole ul,
.ec-registerCompleteRole ol {
  list-style: none;
}
.ec-registerCompleteRole img {
  max-width: 100%;
}
.ec-registerCompleteRole html {
  box-sizing: border-box;
}
.ec-registerCompleteRole *,
.ec-registerCompleteRole *::before,
.ec-registerCompleteRole *::after {
  box-sizing: inherit;
}
.ec-registerCompleteRole img {
  width: 100%;
}
.ec-RegisterRole__actions {
  padding: 0 30px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
お問い合わせ

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

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

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

Styleguide 19.2

*/
.ec-contactRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-contactRole:after {
  content: " ";
  display: table;
}
.ec-contactRole:after {
  clear: both;
}
.ec-contactRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-contactRole ul,
.ec-contactRole ol {
  list-style: none;
}
.ec-contactRole img {
  max-width: 100%;
}
.ec-contactRole html {
  box-sizing: border-box;
}
.ec-contactRole *,
.ec-contactRole *::before,
.ec-contactRole *::after {
  box-sizing: inherit;
}
.ec-contactRole img {
  width: 100%;
}
.ec-contactRole .ec-contactRole__actions {
  padding-top: 20px;
}
.ec-contactRole__block {
  padding: 32px;
  border: 1px solid #d2cec8;
  border-radius: 16px;
}
.ec-contactConfirmRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-contactConfirmRole:after {
  content: " ";
  display: table;
}
.ec-contactConfirmRole:after {
  clear: both;
}
.ec-contactConfirmRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-contactConfirmRole ul,
.ec-contactConfirmRole ol {
  list-style: none;
}
.ec-contactConfirmRole img {
  max-width: 100%;
}
.ec-contactConfirmRole html {
  box-sizing: border-box;
}
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
  box-sizing: inherit;
}
.ec-contactConfirmRole img {
  width: 100%;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
  padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
  margin-bottom: 16px;
}
.ec-contactCompleteRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-contactCompleteRole:after {
  content: " ";
  display: table;
}
.ec-contactCompleteRole:after {
  clear: both;
}
.ec-contactCompleteRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-contactCompleteRole ul,
.ec-contactCompleteRole ol {
  list-style: none;
}
.ec-contactCompleteRole img {
  max-width: 100%;
}
.ec-contactCompleteRole html {
  box-sizing: border-box;
}
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
  box-sizing: inherit;
}
.ec-contactCompleteRole img {
  width: 100%;
}
/* CONTACT LEAD: 見出し・説明文（コンシェルジュ／サポートと同体裁）2026-09-01 */
.ec-contactRole__lead {
  text-align: center !important;
  margin-bottom: 40px;
}
.ec-contactRole__lead h2, .ec-contactRole__lead .h2 {
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
  line-height: 1.5 !important;
}
.ec-contactRole__lead p {
  text-align: center !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}
@media (max-width: 767px) {
  .ec-contactRole__lead {
    margin-bottom: 28px;
  }
  .ec-contactRole__lead h2, .ec-contactRole__lead .h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  .ec-contactRole__lead p {
    font-size: 15px !important;
  }
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
お客様情報の入力

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

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

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

Styleguide 19.3

*/
.ec-customerRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-customerRole:after {
  content: " ";
  display: table;
}
.ec-customerRole:after {
  clear: both;
}
.ec-customerRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-customerRole ul,
.ec-customerRole ol {
  list-style: none;
}
.ec-customerRole img {
  max-width: 100%;
}
.ec-customerRole html {
  box-sizing: border-box;
}
.ec-customerRole *,
.ec-customerRole *::before,
.ec-customerRole *::after {
  box-sizing: inherit;
}
.ec-customerRole img {
  width: 100%;
}
.ec-customerRole .ec-customerRole__actions {
  padding-top: 20px;
}
.ec-customerRole .ec-blockBtn--action {
  margin-bottom: 10px;
}
@media only screen and (min-width: 768px) {
  .ec-customerRole .ec-blockBtn--action {
    margin-bottom: 16px;
  }
}
.ec-contactConfirmRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-contactConfirmRole:after {
  content: " ";
  display: table;
}
.ec-contactConfirmRole:after {
  clear: both;
}
.ec-contactConfirmRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-contactConfirmRole ul,
.ec-contactConfirmRole ol {
  list-style: none;
}
.ec-contactConfirmRole img {
  max-width: 100%;
}
.ec-contactConfirmRole html {
  box-sizing: border-box;
}
.ec-contactConfirmRole *,
.ec-contactConfirmRole *::before,
.ec-contactConfirmRole *::after {
  box-sizing: inherit;
}
.ec-contactConfirmRole img {
  width: 100%;
}
.ec-contactConfirmRole .ec-contactConfirmRole__actions {
  padding-top: 20px;
}
.ec-contactConfirmRole .ec-blockBtn--action {
  margin-bottom: 16px;
}
.ec-contactCompleteRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
}
.ec-contactCompleteRole:after {
  content: " ";
  display: table;
}
.ec-contactCompleteRole:after {
  clear: both;
}
.ec-contactCompleteRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-contactCompleteRole ul,
.ec-contactCompleteRole ol {
  list-style: none;
}
.ec-contactCompleteRole img {
  max-width: 100%;
}
.ec-contactCompleteRole html {
  box-sizing: border-box;
}
.ec-contactCompleteRole *,
.ec-contactCompleteRole *::before,
.ec-contactCompleteRole *::after {
  box-sizing: inherit;
}
.ec-contactCompleteRole img {
  width: 100%;
}
/*
会員登録フロー インラインスタイル抽出

Entry/index・confirm・complete・activate の純presentationalインラインを
FLOCSS 化したもの。いずれも単一クラス(0,1,0)を style.css 末尾に追記し、
基底(.ec-blockBtn--action など同詳細度)に対して後勝ちさせる。

Styleguide 19.4
*/
/* 登録完了/有効化ページ カートへ進むボタンの微小下余白(基底 margin-bottom:0 を上書き) */
.ec-registerCompleteRole__cartBtn {
  margin-bottom: 3px;
}
/* 登録完了ページ 迷惑メール注意書き */
.ec-registerCompleteRole__mailNote {
  font-size: 12px;
  color: #888;
}
/* 確認ページ 未登録項目の淡色表示 */
.ec-registerConfirmRole__unset {
  color: #999;
}
/* 登録フォーム ペット追加ボタンの上余白 */
.ec-registerRole__petAddBtn {
  margin-top: 10px;
}
/* 登録フォーム 同意文の字面。
   .ec-checkbox span { font-weight: normal }(form-theme, 0,2,0)に勝つため
   element+2class(0,2,1)で詳細度を確保する */
.ec-checkbox span.ec-registerRole__agreeText {
  font-weight: 500;
  line-height: 1.8;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
@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 {
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  text-align: center;
  box-sizing: border-box;
}
.ec-404Role textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-404Role ul,
.ec-404Role ol {
  list-style: none;
}
.ec-404Role img {
  max-width: 100%;
}
.ec-404Role html {
  box-sizing: border-box;
}
.ec-404Role *,
.ec-404Role *::before,
.ec-404Role *::after {
  box-sizing: inherit;
}
.ec-404Role img {
  width: 100%;
}
.ec-404Role .ec-404Role__icon img {
  width: 1em;
  height: 1em;
}
.ec-404Role .ec-404Role__title {
  font-weight: bold;
  font-size: 25px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
退会手続き

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

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

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

Styleguide 21.1

*/
.ec-withdrawRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  text-align: center;
  padding: 0 16px;
}
.ec-withdrawRole:after {
  content: " ";
  display: table;
}
.ec-withdrawRole:after {
  clear: both;
}
.ec-withdrawRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-withdrawRole ul,
.ec-withdrawRole ol {
  list-style: none;
}
.ec-withdrawRole img {
  max-width: 100%;
}
.ec-withdrawRole html {
  box-sizing: border-box;
}
.ec-withdrawRole *,
.ec-withdrawRole *::before,
.ec-withdrawRole *::after {
  box-sizing: inherit;
}
.ec-withdrawRole img {
  width: 100%;
}
.ec-withdrawRole .ec-withdrawRole__title {
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 24px;
}
.ec-withdrawRole .ec-withdrawRole__description {
  margin-bottom: 32px;
  font-size: 16px;
  text-align: left;
  padding: 20px;
}
/*
退会手続き実行確認

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

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

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

Styleguide 21.1.2

*/
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__cancel {
  margin-bottom: 20px;
}
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__title {
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 24px;
}
.ec-withdrawConfirmRole .ec-withdrawConfirmRole__description {
  margin-bottom: 32px;
  font-size: 16px;
  text-align: left;
  padding: 20px;
}
/**
メディアクエリ
SP フォーストで記述する。
Twitter Bootstrap デフォルト準拠
 */
/**
SP（$desktop 未満）。media_desktop の裏返しで、境界がずれないよう
同じ変数から max-width を作る。

素の @media を書くと 768 を max-width 側にも書いてしまい、
min-width: 768px と 768px ちょうどで同時に成立する（後勝ちで表示が決まる）。
 */
/**
タブレット帯（$desktop 以上 $desktop2 未満）
 */
/*
会員情報編集完了

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

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

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

Styleguide 22.1

*/
.ec-userEditCompleteRole {
  margin: 0 auto 120px;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 1.4;
  color: #111111;
  -webkit-text-size-adjust: 100%;
  width: 100%;
  max-width: 1272px;
  text-align: center;
  padding: 0 16px;
}
.ec-userEditCompleteRole:after {
  content: " ";
  display: table;
}
.ec-userEditCompleteRole:after {
  clear: both;
}
.ec-userEditCompleteRole textarea {
  /* for chrome fontsize bug */
  font-family: sans-serif;
}
.ec-userEditCompleteRole ul,
.ec-userEditCompleteRole ol {
  list-style: none;
}
.ec-userEditCompleteRole img {
  max-width: 100%;
}
.ec-userEditCompleteRole html {
  box-sizing: border-box;
}
.ec-userEditCompleteRole *,
.ec-userEditCompleteRole *::before,
.ec-userEditCompleteRole *::after {
  box-sizing: inherit;
}
.ec-userEditCompleteRole img {
  width: 100%;
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__title {
  margin-bottom: 16px;
  font-weight: bold;
  font-size: 24px;
}
@media only screen and (min-width: 768px) {
  .ec-userEditCompleteRole .ec-userEditCompleteRole__title {
    font-size: 32px;
  }
}
.ec-userEditCompleteRole .ec-userEditCompleteRole__description {
  margin-bottom: 32px;
  font-size: 16px;
}
.ec-faqRole {
  padding: 0 20px;
  margin-bottom: 120px;
}
.ec-faqRole__search {
  background: #f8f5ed;
  padding: 40px 24px;
  border-radius: 24px;
  margin-bottom: 80px;
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__search {
    padding: 48px 128px;
  }
}
.ec-faqRole__search__title {
  margin: 0 0 30px;
  font-size: 18px;
  font-weight: 500;
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__search__title {
    font-size: 24px;
    margin: 0 0 36px;
  }
}
.ec-faqRole__search__wrap {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  margin-bottom: 24px;
}
.ec-faqRole__search__wrap .ec-blockBtn--action {
  padding-block: 0.6rem;
  height: auto;
  line-height: 1.1;
}
.ec-faqRole__search__wrap .form-control {
  padding-block: 0.6rem;
}
.ec-faqRole__search__wrap .ec-blockBtn--action {
  width: 135px;
}
.ec-faqRole__keywords {
  gap: 10px;
}
.ec-faqRole__keywords li a {
  line-height: 1;
  border-radius: 16px;
  border: 1px solid #c3976f;
  background: #fff;
  color: #c3976f;
  padding: 5px 17px;
  font-size: 14px;
  font-weight: 700;
}
.ec-faqRole__side {
  margin-bottom: 60px;
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__side {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__side .position-sticky.top-0 {
    top: 80px !important;
  }
}
.ec-faqRole__side h5, .ec-faqRole__side .h5 {
  font-family: "Plus Jakarta Sans";
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 32px;
}
.ec-faqRole__side ul li.active a {
  background: #c3976f;
  color: #fff;
}
.ec-faqRole__side ul li a {
  font-size: 16px;
  font-weight: 500;
  color: #111111;
  padding: 12px 24px;
  display: block;
  border-radius: 32px;
}
.ec-faqRole__main h2, .ec-faqRole__main .h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 56px;
}
.ec-faqRole__main .faq-accordions {
  counter-reset: num;
}
.ec-faqRole__main .faq-accordions .faq-question {
  counter-increment: num;
}
.ec-faqRole__main .faq-accordions .faq-question::before {
  content: "Q" counter(num) ".";
  color: #c3976f;
  font-family: "Plus Jakarta Sans";
  font-size: 28px;
  position: absolute;
  left: 0;
  top: -3px;
  font-weight: 300;
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__main .faq-accordions .faq-question::before {
    left: 16px;
  }
}
.ec-faqRole__main .faq-accordions .faq-question::after {
  content: "";
  display: block;
  width: 48px;
  height: 28px;
  border: 1px solid #c3976f;
  border-radius: 16px;
  position: absolute;
  right: 0;
  top: 0;
}
.ec-faqRole__main .faq-accordion {
  border-bottom: 1px solid #dde1ec;
  margin-bottom: 45px;
  padding-bottom: 40px;
}
.ec-faqRole__main .faq-question {
  position: relative;
  cursor: pointer;
}
.ec-faqRole__main .faq-question.active div::after {
  transform: rotate(0);
}
.ec-faqRole__main .faq-question div {
  padding: 0 50px 0 50px;
  font-size: 18px;
  letter-spacing: 0.02em;
  line-height: 175%;
  letter-spacing: 0.04em;
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__main .faq-question div {
    padding: 0 100px 0 100px;
  }
}
.ec-faqRole__main .faq-question div::before {
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: #c3976f;
  position: absolute;
  right: 20px;
  top: 13px;
}
.ec-faqRole__main .faq-question div::after {
  transform: rotate(90deg);
  content: "";
  display: block;
  width: 8px;
  height: 1px;
  background: #c3976f;
  position: absolute;
  right: 20px;
  top: 13px;
  transition: 0.3s transform;
}
.ec-faqRole__main .faq-answer {
  padding: 35px 0 0;
  font-size: 16px;
  line-height: 175%;
  display: none;
}
@media only screen and (min-width: 768px) {
  .ec-faqRole__main .faq-answer {
    padding: 30px 100px 0 100px;
  }
}
.ec-faqRole__contact {
  border-top: 1px solid #111111;
  padding: 120px 20px;
}
.ec-faqRole__contact .ec-layoutRole__contents {
  display: block;
}
.ec-faqRole__contact .ec-layoutRole__contents .ec-supportRole__inner {
  justify-content: center;
  text-align: center;
}
.ec-faqRole__contact .ec-layoutRole__contents .ec-supportRole__block__item {
  background-color: #f8f5ed;
}
.ec-faqRole__contact .ec-layoutRole__contents .ec-supportRole__block__item.-mail {
  background-image: url("../img/support/icon_mail2.svg");
}
/*
 * 24.1 Subscription Detail（マイページ 定期便詳細）
 * subscription_detail.twig のインラインスタイル抽出先（見た目不変のリファクタリング）
 */
.ec-subscriptionDetailRole__alert {
  border-radius: 4px;
}
.ec-subscriptionDetailRole__alertText {
  font-weight: 500;
}
.ec-subscriptionDetailRole__alertText--warning {
  color: #856404;
}
.ec-subscriptionDetailRole__alertText--danger {
  color: #721c24;
}
.ec-subscriptionDetailRole__notice {
  font-size: 12px;
}
.ec-subscriptionDetailRole__intervalGroup {
  max-width: 250px;
}
/*
 * thumb: bootstrap `.img-fluid`(max-width:100%, 0,1,0) が後続CSSにも定義され
 * style.css 末尾の単一クラスでは負けるため、親Roleでスコープし 0,2,0 で勝たせる。
 * 元インライン(1,0,0,0)の max-width:150px を維持する。
 */
.ec-subscriptionDetailRole .ec-subscriptionDetailRole__thumb {
  max-width: 150px;
}
/*
 * btnDanger: btn-theme.css `.mypage-btn-min-outline.-gray`(詳細度 0,2,0) が
 * style.css より後に読み込まれるため、詳細度を 0,3,0 にして勝たせる。
 * 元インライン(1,0,0,0)の見た目 #c53030 を維持する。
 */
.mypage-btn-min-outline.-gray.ec-subscriptionDetailRole__btnDanger {
  color: #c53030;
  border-color: #c53030;
}
.mypage-btn-min-outline.-gray.ec-subscriptionDetailRole__btnDanger[disabled] {
  opacity: 0.5;
}
/*
 * 24.2 Subscription（マイページ 定期便一覧）
 * subscription.twig のインラインスタイル抽出先（見た目を変えない純リファクタリング）。
 * 各ページは style.css の後に form-theme.css / btn-theme.css を読み込むため、
 * それらと同名プロパティで競合する箇所は詳細度 0,2,0 以上で勝たせる。
 */
.ec-subscriptionRole {
  /* タブ見出しの borderedDefs から枠線と余白を除去（form-theme `.ec-borderedDefs` 0,1,0 に勝つ 0,2,0） */
  /* alert の角丸（bootstrap `.alert` と同名プロパティのため併記して 0,2,0 で勝たせる） */
  /* 変更締切テキスト（alert-warning からの継承色より span 直指定が優先 0,1,0） */
  /* dt 見出し内アイコン svg */
  /* 配送遅延の注意書き（font-size のみ。既存 `.deli-date .notice` と同値 12px のため見た目不変） */
  /* 一覧下部の操作ボタン帯 */
}
.ec-subscriptionRole__tabDefs.ec-borderedDefs {
  border: none;
  padding: 0;
}
.ec-subscriptionRole__alert.alert {
  border-radius: 4px;
}
.ec-subscriptionRole__deadlineText {
  font-weight: 500;
  color: #856404;
}
.ec-subscriptionRole__dtIcon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
}
.ec-subscriptionRole__notice {
  font-size: 12px;
}
.ec-subscriptionRole__actionBar {
  background-color: #f8f9fa;
}
.ec-subscriptionRole__actionBar--suspended {
  background-color: #f5f5f5;
}
.epark-quota-banner {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px 0;
  color: #92400e;
  border: 1px solid #fbbf24;
}
.epark-quota-banner__lead {
  font-size: 16px;
}
.epark-quota-banner__note {
  font-size: 14px;
  margin-top: 4px;
}
.epark-quota-banner__closed {
  color: #991b1b;
}
/*
 * 26.1 CouponBox（マイページ クーポンBOX）
 * coupon.twig のインラインスタイル抽出先。
 * 各ページは style.css の後に form-theme.css / btn-theme.css を読み込むため、
 * それらと同名プロパティで競合する箇所は詳細度 0,2,0 以上で勝たせる。
 */
.ec-couponBox {
  /*
   * タブは定期便（ご利用中／停止中）と同じセグメント型にそろえる。
   * 定期便側は .ec-productRole 配下なので product の buyTab がそのまま効くが、
   * この画面は配下ではないため見た目をここで持つ。
   * おすすめアイコン（buyTab の li:last-child::after）は持ち込まない。
   */
  /* 商品詳細の購入タイプ選択(buyTab)と同じセグメント型に統一 */
  /* 左カラム：割引額＋ステータス（クリーム背景で強調） */
}
.ec-couponBox__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  border: 1px solid #d2cec8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.ec-couponBox__tab {
  display: flex;
  min-width: 0;
}
.ec-couponBox__tab:first-child a {
  border-right: 1px solid #d2cec8;
}
.ec-couponBox__tab a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 72px;
  padding: 14px 18px 14px 48px;
  color: #59544f;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  /* ラジオ外枠 */
  /* ラジオ中点 */
}
.ec-couponBox__tab a::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #d2cec8;
  background: #fff;
}
.ec-couponBox__tab a::after {
  content: "";
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
}
@media only screen and (min-width: 768px) {
  .ec-couponBox__tab a {
    font-size: 16px;
  }
}
.ec-couponBox__tab a[aria-selected=true] {
  color: #111111;
  background: #fbf6ea;
}
.ec-couponBox__tab a[aria-selected=true]::before {
  border-color: #b88b2d;
}
.ec-couponBox__tab a[aria-selected=true]::after {
  background: #b88b2d;
}
.ec-couponBox__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ec-couponBox__item {
  display: flex;
  align-items: stretch;
  border: 1px solid #d2cec8;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  background: #fff;
}
.ec-couponBox__item-left {
  flex: 0 0 132px;
  padding: 20px 14px;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  /* 破線の切り取り線 */
  border-right: 2px dashed #d2cec8;
}
.ec-couponBox__item-right {
  flex: 1 1 auto;
  padding: 20px 24px;
  min-width: 0;
}
.ec-couponBox__item--used, .ec-couponBox__item--expired {
  opacity: 0.6;
}
.ec-couponBox__badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #fff;
  color: #b88b2d;
  border: 1px solid #e5d5a8;
  margin: 0;
}
.ec-couponBox__discount {
  font-size: 22px;
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  margin: 0;
}
.ec-couponBox__name {
  font-size: 15px;
  font-weight: 600;
  color: #111;
  margin: 0 0 14px;
}
.ec-couponBox__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}
.ec-couponBox__tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #77736d;
  background: #f5f2ec;
  border: 1px solid #e5e0d8;
}
.ec-couponBox__tag--gift {
  color: #b88b2d;
  background: #fbf6ea;
  border-color: #e5d5a8;
}
.ec-couponBox__detailRow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
}
.ec-couponBox__detailRow dt {
  flex: 0 0 92px;
  color: #8a857e;
  font-size: 13px;
  font-weight: 600;
  margin: 0;
}
.ec-couponBox__detailRow dd {
  margin: 0;
  font-size: 14px;
  color: #111;
}
.ec-couponBox__code {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0.04em;
}
.ec-couponBox__codeBox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 0 0 14px;
  background: #faf8f3;
  border: 1px dashed #c9a86a;
  border-radius: 8px;
}
.ec-couponBox__codeLabel {
  font-size: 11px;
  font-weight: 600;
  color: #8a857e;
  white-space: nowrap;
}
.ec-couponBox__codeValue {
  flex: 1 1 auto;
  min-width: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.06em;
  word-break: break-all;
}
.ec-couponBox__copyBtn {
  flex: 0 0 auto;
  padding: 6px 14px;
  border: 0;
  border-radius: 6px;
  background: #b88b2d;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.ec-couponBox__copyBtn:hover {
  background: #a87d26;
}
.ec-couponBox__copyBtn.is-copied {
  background: #4caf50;
}
.ec-couponBox__detail {
  margin: 0;
}
.ec-couponBox__empty {
  margin: 0 0 24px;
  padding: 56px 24px 60px;
  text-align: center;
  background: #fff;
  border: 1px solid #d2cec8;
  border-radius: 12px;
  color: #8a857e;
  font-size: 16px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
/*
 * 狭い端末ほど「利用済み・期限切れ（0）」が入りにくい。
 * 折り返さずに収めるため、幅に応じて文字と丸を詰める。
 */
@media only screen and (max-width: 767px) {
  /* buyTab仕様（ラジオは::before/::after絶対配置）。左paddingでラジオ分を確保して重なり防止 */
  .ec-couponBox__tab a {
    padding: 14px 10px 14px 42px;
    min-height: 60px;
    font-size: 13px;
  }
  .ec-couponBox__tab a::before {
    left: 14px;
    width: 18px;
    height: 18px;
  }
  .ec-couponBox__tab a::after {
    left: 19px;
    width: 8px;
    height: 8px;
  }
}
/* iPhone SE 世代（375px 未満）はさらに詰める */
@media (max-width: 374px) {
  .ec-couponBox__tab a {
    padding: 12px 6px 12px 36px;
    font-size: 12px;
  }
  .ec-couponBox__tab a::before {
    left: 12px;
    width: 16px;
    height: 16px;
  }
  .ec-couponBox__tab a::after {
    left: 16px;
    width: 8px;
    height: 8px;
  }
}
/* クーポンカード（お届け先カード delivery-card と同じ構造・トーン） */
.coupon-card {
  border: 1px solid #d2cec8;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  margin-bottom: 16px;
}
.coupon-card--used, .coupon-card--expired {
  opacity: 0.6;
}
.coupon-card__header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  background: #fafafa;
  border-bottom: 1px solid #ebe7e1;
}
.coupon-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #111;
  margin: 0;
}
.coupon-card__discountBadge {
  flex: 0 0 auto;
  padding: 5px 14px;
  border-radius: 999px;
  background: #fff;
  color: #df4545;
  border: 1px solid #df4545;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.coupon-card__body {
  padding: 8px 24px 16px;
}
.coupon-card__body dl {
  display: flex;
  align-items: flex-start;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid #ebe7e1;
}
.coupon-card__body dl:last-child {
  border-bottom: none;
}
.coupon-card__body dt {
  flex: 0 0 120px;
  font-size: 14px;
  font-weight: 600;
  color: #77736d;
}
.coupon-card__body dd {
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: #111;
  margin: 0;
}
.coupon-card__discount {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.coupon-card__code {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #111;
  margin-right: 12px;
}
.coupon-card__row2 {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #ebe7e1;
}
.coupon-card__row2 dl {
  flex: 1 1 0;
  min-width: 0;
  border-bottom: none;
}
@media (max-width: 767px) {
  .coupon-card__row2 {
    flex-direction: column;
    gap: 0;
    border-bottom: none;
  }
  .coupon-card__row2 dl {
    border-bottom: 1px solid #ebe7e1;
  }
}
.coupon-card__copyBtn {
  padding: 5px 14px;
  border: 1px solid #d2cec8;
  border-radius: 6px;
  background: #fff;
  color: #55514d;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.coupon-card__copyBtn:hover {
  background: #f5f2ec;
  border-color: #c8c2b8;
}
.coupon-card__copyBtn.is-copied {
  background: #edf7ed;
  color: #4caf50;
  border-color: #b5dbb5;
}
.ec-footerRole .ec-footerRole__nav dd {
  margin: 0;
}
/*
テキスト

Styleguide 1.0
*/
.le-4 {
  letter-spacing: 0.04em !important;
}
.le-8 {
  letter-spacing: 0.08em !important;
}
.fw-500 {
  font-weight: 500 !important;
}
.fw-700 {
  font-weight: 700 !important;
}
body .pet-image-preview {
  border: unset;
  background-color: #f5f5f5;
}
body .add-pet-button {
  background: #c3976f;
  transition-duration: opaity 0.2s;
}
body .add-pet-button:hover {
  opacity: 0.8;
}
/*
ボタン

Styleguide 2.0
*/
/*
フォーム

Styleguide 3.0
*/
.form-check-input:checked {
  border-color: #b88b2d;
  background-color: #b88b2d;
}
/*
アイコン

Styleguide 4.0
*/
.ec-icon2 {
  background: #c3976f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 32px;
  width: -moz-fit-content;
  width: fit-content;
  padding: 5px 10px;
  line-height: 1;
}
@media only screen and (min-width: 768px) {
  .ec-icon2 {
    font-size: 13px;
  }
}
.ec-icon2.-subscription {
  background: #fff;
  color: #111111;
  border: 1px solid #111111;
}
.ec-icon2.-off {
  color: #fff;
  background-color: #e94f2a;
}
.ec-icon3 {
  background: #888888;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 36px;
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  line-height: 1;
}
/*
グリッド

Styleguide 5.0
*/
/*
ログイン
Styleguide 6.0
*/
/*
商品

Styleguide 7.0
*/
/*
お知らせ

Styleguide 8.0
*/
/*
マイページ

Styleguide 9.0
*/
.ec-mypage__main {
  font-size: 14px;
}
.ec-mypage__main .pet-accordion-header {
  font-size: 16px;
}
.ec-mypage__main .ec-editRole {
  border: 1px solid #d2cec8;
  border-radius: 8px;
  padding-bottom: 32px;
}
.ec-mypage__main .mypage-block-title {
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  align-items: center;
  background: #f8f5ed;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px 0 15px 20px;
  gap: 10px;
  font-size: 16px;
}
.ec-mypage__main .mypage-block-title .ec-icon {
  margin-right: 0;
}
.ec-mypage__main .mypage-block-title span {
  font-size: 14px;
  font-weight: 500;
}
.ec-mypage__main .mypage-block-title span .num {
  color: #e94f2a;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  font-weight: 600;
}
.ec-mypage__main .ec-borderedDefs {
  padding: 0 32px;
  font-size: 14px;
}
.ec-mypage__main .ec-borderedDefs__inner {
  padding: 0 20px;
}
.ec-blockBtn--cancel {
  background-color: #b88b2d;
}
.mypage_main_footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
}
.mypage_main_footer .ec-blockBtn--cancel.min {
  height: 30px;
  line-height: 0;
  width: 77px;
}
.mypage_main_footer p a {
  color: #111111;
  border-bottom: 1px solid #111111;
}
.mypage_main_footer p a:hover {
  color: #111111;
}
.mypage_main_footer .btn-add-pet {
  background-color: #b88b2d;
  border-radius: 48px;
  height: 56px;
}
.mypage-btn-min {
  background-color: #b88b2d;
  border-radius: 20px;
  font-size: 14px;
  color: #ffffff;
  height: 30px;
  line-height: 0;
  padding: 0 5%;
}
.mypage-btn-min.-delete {
  background-color: #888888;
}
.mypage-w-btn {
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 32px;
  color: #111111;
  padding: 5px 20px;
}
.ec-addressList__address dl {
  display: flex;
  border-bottom: 1px solid #e6e6e6;
}
.ec-addressList__address dl dt {
  width: 35%;
}
.ec-mypage__main .ec-card-info {
  margin-bottom: 32px;
}
.ec-mypage__main .ec-card-info dl {
  display: block;
  border: 1px solid #d2cec8;
  border-radius: 8px;
  padding: 0;
}
.ec-mypage__main .ec-card-info dt {
  display: flex;
  justify-content: left;
  background: #f8f5ed;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 10px 0 15px 20px;
  width: 100%;
}
.ec-mypage__main .ec-card-info dd {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px;
  width: 100%;
}
.ec-card-add {
  border: 1px solid #d2cec8;
  border-radius: 8px;
  padding-bottom: 20px;
}
.ec-mypage__main .ec-icon {
  width: 20px;
  line-height: 20px;
  margin-right: 10px;
}
#page_mypage_delivery .ec-off1Grid {
  margin: 0 20px;
}
/*
トライアル商品

Styleguide 9.0
*/
/* カスタマイズ用CSS */
/* ========================================
   お支払い方法 - Stripeカード表示（新デザイン）
   ======================================== */
/* Stripe決済用の新しいカードスタイル */
.ec-cartRole__wrap .ec-orderPayment label span {
  font-weight: 500;
}
.payment-method-card {
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: 15px;
}
.payment-method-card h3, .payment-method-card .h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: normal;
}
.payment-method-card input[type=radio] {
  position: absolute;
  opacity: 0;
}
.payment-method-card .card-selection {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.payment-method-card .radio-indicator {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #999;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}
.payment-method-card input[type=radio]:checked ~ .card-selection .radio-indicator,
.payment-method-card input[type=radio]:checked ~ label .radio-indicator {
  border-color: #d32f2f;
}
.payment-method-card input[type=radio]:checked ~ .card-selection .radio-indicator::after,
.payment-method-card input[type=radio]:checked ~ label .radio-indicator::after {
  content: "";
  width: 10px;
  height: 10px;
  background: #d32f2f;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.payment-method-card .card-info-display {
  display: flex;
  align-items: center;
  flex-grow: 1;
}
.payment-method-card .card-info-display span {
  font-weight: 500;
  font-size: large;
}
.payment-method-card .card-brand {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
}
.payment-method-card .card-brand img {
  border: solid 1px #f9f9f9;
  background-color: #f9f9f9;
  border-radius: 2px;
}
.payment-method-card .card-number {
  font-size: 14px;
  margin-right: 16px;
}
.payment-method-card .card-name {
  font-size: 14px;
  margin-right: 16px;
}
.payment-method-card .card-expiry {
  font-size: 14px;
  color: #666;
}
.payment-method-card .card-icons-wrap {
  display: flex;
  align-items: center;
  /* flex-start から center に変更 */
  gap: 20px;
  margin-top: 10px;
  margin-left: 30px;
}
.payment-method-card .card-icons {
  display: flex;
  gap: 8px;
}
.payment-method-card .card-icons img {
  height: 30px;
  width: auto;
  border: solid 1px #f9f9f9;
  background-color: #f9f9f9;
  border-radius: 2px;
}
.payment-method-card .add-card-section {
  padding-top: 20px;
}
.payment-method-card .add-card-section label {
  font-size: large;
  font-weight: 500;
}
.payment-method-card .add-card-section img {
  border: solid 1px #f9f9f9;
  background-color: #f9f9f9;
  border-radius: 2px;
}
.payment-method-card .add-card-link {
  display: inline-flex;
  align-items: center;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
}
.payment-method-card .add-card-link:hover {
  text-decoration: underline;
}
.payment-method-card .add-card-icon {
  margin-right: 8px;
  font-size: 18px;
}
.payment-method-card .payment-notes {
  margin-top: 0;
  font-size: 12px;
  font-weight: 500;
  color: #666;
  line-height: 1.6;
}
.payment-method-card .payment-notes p {
  margin: 0 0 4px 0;
}
/* ========================================
   SP版レスポンシブ対応
   ======================================== */
@media (max-width: 767px) {
  .payment-method-card {
    margin-left: 0;
    padding: 15px;
  }
  .payment-method-card .card-info-display {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .payment-method-card .card-brand {
    order: 1;
    margin-bottom: 5px;
  }
  .payment-method-card .card-number {
    order: 2;
    margin-right: 0;
    font-size: 16px;
  }
  .payment-method-card .card-name {
    order: 3;
    margin-right: 0;
    font-size: 14px;
    color: #666;
  }
  .payment-method-card .card-expiry {
    order: 4;
    font-size: 14px;
  }
  .payment-method-card .card-icons-wrap {
    flex-direction: column;
    margin-left: 0;
    margin-top: 20px;
    gap: 15px;
  }
  .payment-method-card .card-icons {
    order: 1;
    justify-content: flex-start;
  }
  .payment-method-card .payment-notes {
    order: 2;
    font-size: 11px;
    line-height: 1.5;
  }
  .payment-method-card .add-card-section {
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
  }
  .payment-method-card .add-card-section label {
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
  }
  .payment-method-card .add-card-section label > div:first-child {
    margin-bottom: 10px;
  }
  .payment-method-card .add-card-section label > div:last-child {
    margin-left: 0 !important;
  }
}
/* ========================================
   Stripeカード登録モーダル
   ======================================== */
#stripeCardModal .modal-dialog {
  max-width: 600px;
}
#stripeCardModal .modal-header {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 25px;
}
#stripeCardModal .modal-title {
  font-size: 18px;
  font-weight: 600;
}
#stripeCardModal .modal-body {
  padding: 25px;
}
#stripeCardModal .form-group label {
  font-weight: 500;
  margin-bottom: 10px;
}
#stripeCardModal .form-group label .text-danger {
  font-size: 12px;
  margin-left: 4px;
}
#modal-payment-element {
  padding: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  min-height: 180px;
}
#stripeCardModal .card-brand-icons {
  display: flex;
  gap: 8px;
}
#stripeCardModal .card-brand-icons img {
  height: 30px;
  width: auto;
  border: solid 1px #f9f9f9;
  background-color: #f9f9f9;
  border-radius: 2px;
  padding: 4px 8px;
}
#stripeCardModal .form-check {
  margin-top: 20px;
  padding-left: 0;
}
#stripeCardModal .form-check-input {
  margin-right: 8px;
}
#stripeCardModal .form-check-label {
  font-weight: 500;
  cursor: pointer;
}
#stripeCardModal .payment-notes {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 4px;
  margin-top: 20px;
}
#stripeCardModal .payment-notes p {
  font-size: 12px;
  line-height: 1.6;
}
#stripeCardModal .modal-footer {
  border-top: 1px solid #e0e0e0;
  padding: 15px 25px;
}
#stripeCardModal .btn-secondary {
  background-color: #fff;
  border: 1px solid #ddd;
  color: #333;
  padding: 10px 24px;
  font-weight: 500;
}
#stripeCardModal .btn-primary {
  background-color: #2e5c9a;
  border: 1px solid #2e5c9a;
  padding: 10px 24px;
  font-weight: 500;
}
#stripeCardModal .btn-primary:hover {
  background-color: #1e4c8a;
  border-color: #1e4c8a;
}
#modal-card-errors {
  margin-top: 15px;
  font-size: 14px;
}
/* SP版レスポンシブ対応 */
@media (max-width: 767px) {
  #stripeCardModal .modal-dialog {
    max-width: 95%;
    margin: 10px auto;
  }
  #stripeCardModal .modal-body {
    padding: 20px;
  }
  #stripeCardModal .modal-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  #stripeCardModal .modal-footer .btn {
    width: 100%;
    margin: 5px 0;
  }
  #stripeCardModal .modal-footer .btn-secondary {
    margin-top: 0;
  }
  #stripeCardModal .card-brand-icons {
    flex-wrap: wrap;
  }
}
/*
共通コンポーネント

Styleguide 11.0
*/
/*
トップページ

Styleguide 12.0
*/
.remodal {
  background: unset !important;
}
.front_page {
  padding-top: 0;
  overflow-x: hidden;
}
.front_page__float {
  position: fixed;
  right: 32px;
  display: none;
  bottom: 32px;
  background: #f6f0e1;
  border-radius: 16px;
  box-shadow: 8px 0px 28px rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
  .front_page__float {
    display: block;
  }
}
.front_page__float button {
  position: absolute;
  top: -12px;
  right: 17px;
  width: 24px;
  height: 24px;
  background: url("../icon/icon_close_float.svg") no-repeat;
  background-size: contain;
  outline: none;
  border: unset;
}
.front_page__float a {
  padding: 16px 32px 16px 16px;
  justify-content: center;
  align-items: center;
  gap: 32px;
  display: inline-flex;
}
.front_page__float a figure {
  width: 180px;
}
.front_page__float a figure img {
  max-width: 100%;
  filter: drop-shadow(-4px -4px 24px rgba(0, 0, 0, 0.2));
  position: relative;
  top: 8px;
}
.front_page__float__text__01 {
  align-self: stretch;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  display: flex;
  color: #111111;
  font-size: 18px;
  font-weight: 700;
  line-height: 27px;
  letter-spacing: 0.72px;
  margin-bottom: 10px;
}
.front_page__float__text__01__icon {
  padding: 5px 8px;
  background: white;
  border-radius: 24px;
  outline: 1px black solid;
  outline-offset: -1px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  display: flex;
}
.front_page__float__text__01__icon__inner {
  color: #111111;
  font-size: 12px;
  font-weight: 500;
  line-height: 16.8px;
  word-wrap: break-word;
}
.front_page__float__text__02 {
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
  margin-bottom: 10px;
}
.front_page__float__text__02__badge {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 7px;
  padding-bottom: 7px;
  background: #e94f2a;
  border-radius: 32px;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  display: flex;
}
.front_page__float__text__02__badge__inner {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  display: flex;
  color: white;
  font-size: 11px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 700;
  line-height: 15.4px;
  letter-spacing: 0.88px;
  word-wrap: break-word;
}
.front_page__float__text__offprice {
  align-items: center;
  display: flex;
}
.front_page__float__text__offprice .yen {
  color: #888888;
  font-size: 14px;
  font-weight: 700;
  line-height: 24.5px;
  letter-spacing: 0.56px;
}
.front_page__float__text__offprice .price {
  color: #888888;
  font-size: 16px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 400;
  text-decoration: line-through;
  line-height: 20.8px;
}
.front_page__float__text__03 {
  justify-content: flex-start;
  align-items: flex-end;
  gap: 4px;
  display: flex;
}
.front_page__float__text__03 .price {
  align-items: flex-end;
  display: flex;
}
.front_page__float__text__03 .price .yen {
  color: #e94f2a;
  font-size: 18px;
  font-weight: 700;
  line-height: 31.5px;
  letter-spacing: 0.72px;
}
.front_page__float__text__03 .price .num {
  color: #e94f2a;
  font-size: 22px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 600;
  line-height: 28.6px;
  word-wrap: break-word;
}
.front_page__float__text__03 .tax {
  color: #111111;
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  letter-spacing: 0.48px;
}
.front_page__float__text__03 .trial {
  color: #111111;
  font-size: 14px;
  font-weight: 700;
  line-height: 24.5px;
  letter-spacing: 0.56px;
}
.front_page .ec-layoutRole .ec-layoutRole__header {
  background: unset;
}
.front_page .ec-headerNaviRole .ec-headerNaviRole__list {
  background-color: rgba(248, 245, 237, 0.6);
}
.front_page .remodal {
  background: unset;
  max-width: 1080px;
  text-align: left;
}
.front_page__kv {
  margin: 4px 4px 0;
  border-radius: 12px;
  margin-bottom: 48px;
  overflow: hidden;
  height: calc(100vh - 16px);
  position: relative;
}
@media only screen and (min-width: 768px) {
  .front_page__kv {
    margin: 8px 8px 0;
    border-radius: 16px;
    margin-bottom: 160px;
  }
}
.front_page__kv__inner {
  width: 100%;
  height: 100%;
}
.front_page__kv video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.front_page__kv__logo {
  width: 268px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
@media only screen and (min-width: 768px) {
  .front_page__kv__logo {
    width: 361px;
  }
}
.front_page__kv__logo img {
  max-width: 100%;
}
.front_page__intro {
  padding: 0 32px;
  background: url("../img/top/bg_intro_smp.svg") no-repeat right 48px top 0;
}
@media only screen and (min-width: 768px) {
  .front_page__intro {
    max-width: 1342px;
    width: 100%;
    margin: 0 auto;
    background: url("../img/top/bg_intro.webp") no-repeat 2.9411764706vw 100%;
    background-size: 90.2941176471vw auto;
    padding: 0 0 735px;
  }
}
@media (min-width: 1342px) {
  .front_page__intro {
    background-position: 40px 100%;
    background-size: 1228px auto;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__intro__block {
    width: 496px;
    margin-left: 7.6470588235vw;
  }
}
.front_page__intro__block h2, .front_page__intro__block .h2 {
  font-size: 30px;
  color: #bc772f;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
  margin-bottom: 56px;
}
@media only screen and (min-width: 768px) {
  .front_page__intro__block h2, .front_page__intro__block .h2 {
    font-size: 44px;
    margin-bottom: 80px;
  }
}
.front_page__intro__block p {
  font-size: 16px;
  font-weight: 500;
  line-height: 175%;
  letter-spacing: 0.64px;
}
.front_page__intro__block p + p {
  margin-top: 56px;
}
.front_page__intro figure {
  margin: 56px -30px 0;
}
@media only screen and (min-width: 768px) {
  .front_page__intro figure {
    display: none;
  }
}
.front_page__intro figure img {
  max-width: 100%;
}
.front_page__intro2 {
  padding-top: 72px;
}
@media only screen and (min-width: 768px) {
  .front_page__intro2 {
    background: url("../img/top/bg_intro4.webp") no-repeat 50% 0;
    background-size: 1360px auto;
    padding-bottom: 80px;
  }
}
@media (min-width: 1200px) {
  .front_page__intro2 {
    background: url("../img/top/bg_intro2.webp") no-repeat 0 0, url("../img/top/bg_intro3.webp") no-repeat right 0 bottom 282px;
    background-size: 360px auto, 360px auto;
  }
}
.front_page__intro2__block {
  padding: 0 30px;
}
@media only screen and (min-width: 768px) {
  .front_page__intro2__block {
    width: 29.4117647059vw;
    margin: 0 auto;
    min-width: 400px;
    padding: 0;
  }
}
.front_page__intro2__block h2, .front_page__intro2__block .h2 {
  color: #bc772f;
  font-size: 26px;
  margin-bottom: 56px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
@media only screen and (min-width: 768px) {
  .front_page__intro2__block h2, .front_page__intro2__block .h2 {
    font-size: 38px;
    margin-bottom: 80px;
  }
}
.front_page__intro2__block p {
  font-size: 16px;
  font-weight: 500;
  line-height: 175%;
  letter-spacing: 0.64px;
}
.front_page__intro2__block p + p {
  margin-top: 40px;
}
@media only screen and (min-width: 768px) {
  .front_page__intro2__block p + p {
    margin-top: 56px;
  }
}
.front_page__intro2__block figure {
  margin: 56px -30px 120px;
}
.front_page__intro2__block figure img {
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .front_page__intro2__block figure {
    display: none;
  }
}
.front_page__intro2__note {
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  padding: 32px 0;
  margin-top: 48px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.7;
}
.front_page__point {
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .front_page__point {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 10px;
  }
}
.front_page__point .splide__arrows button {
  background: unset;
  border: unset;
  width: 64px;
  height: 64px;
  background: url("../icon/icon_slide.svg") no-repeat;
  background-size: contain;
  overflow: hidden;
  text-indent: -9999px;
}
.front_page__point .splide__arrows button svg {
  display: none;
}
.front_page__point .splide__arrows button.splide__arrow--prev {
  left: calc(50% - 50vw + 10px);
}
@media (min-width: 1600px) {
  .front_page__point .splide__arrows button.splide__arrow--prev {
    left: -100px;
  }
}
.front_page__point .splide__arrows button.splide__arrow--next {
  right: calc(50% - 50vw + 10px);
  background-image: url("../icon/icon_slide2.svg");
}
@media (min-width: 1600px) {
  .front_page__point .splide__arrows button.splide__arrow--next {
    right: -100px;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__point__inner {
    padding-top: 80px;
    position: relative;
    max-width: 1360px;
    margin: 0 auto 10px;
  }
}
.front_page__point__slide {
  border-radius: 32px 32px 0 0;
  padding: 48px 30px 80px;
}
.front_page__point__slide.slide01 {
  background: #fdfbf6;
}
.front_page__point__slide.slide02 {
  background: #f8f5ed;
  position: relative;
  margin-top: -40px;
}
.front_page__point__slide.slide03 {
  background-color: #f6f0e1;
  position: relative;
  margin-top: -40px;
}
.front_page__point__slide.slide04 {
  background-color: #f2ead9;
  border-radius: 32px;
  position: relative;
  margin-top: -40px;
  padding-bottom: 48px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide.slide04 {
    margin-right: 100px !important;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide {
    background: #f8f5ed !important;
    padding: 30px 30px 48px;
    border-radius: 32px;
    width: 1344px;
    margin-top: 0 !important;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__list {
    display: flex;
    -moz-column-gap: 8px;
         column-gap: 8px;
    height: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__list__wrapper {
    position: relative;
    width: 100%;
    overflow: visible !important;
  }
}
@media (min-width: 1700px) {
  .front_page__point__slide {
    padding: 48px;
  }
}
@media (min-width: 980px) {
  .front_page__point__slide__inner {
    position: relative;
    display: flex;
    -moz-column-gap: 30px;
         column-gap: 30px;
    position: relative;
    height: 100%;
    -moz-column-gap: 72px;
         column-gap: 72px;
  }
}
.front_page__point__slide__inner::before {
  content: "愛犬しあわせ食ポイント ";
  font-size: 14px;
  color: #c3976f;
  font-weight: 700;
  background: #fff;
  border-radius: 32px;
  border: 1px solid #c3976f;
  background: #fff;
  padding: 2px 12px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__inner::before {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
  }
}
.front_page__point__slide__nav {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36.7647058824vw;
  max-width: 530px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__nav {
    display: block;
  }
}
@media (min-width: 900px) {
  .front_page__point__slide__nav {
    bottom: -15px;
  }
}
@media (min-width: 1500px) {
  .front_page__point__slide__nav {
    bottom: 0;
  }
}
.front_page__point__slide__nav img {
  max-width: 100%;
}
.front_page__point__slide__nav .current {
  font-size: 128px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.front_page__point__slide__contents {
  position: relative;
  margin-top: 48px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__contents {
    width: calc((120% - 50px) / 2);
  }
}
@media (min-width: 980px) {
  .front_page__point__slide__contents {
    width: calc((120% - 72px) / 2);
  }
}
@media (min-width: 1700px) {
  .front_page__point__slide__contents {
    position: static;
  }
}
.front_page__point__slide__contents h2, .front_page__point__slide__contents .h2 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__contents h2, .front_page__point__slide__contents .h2 {
    font-size: 36px;
  }
}
.front_page__point__slide__contents h3, .front_page__point__slide__contents .h3 {
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 40px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__contents h3, .front_page__point__slide__contents .h3 {
    font-size: 18px;
  }
}
.front_page__point__slide__contents p {
  font-size: 15px;
  font-weight: 500;
  line-height: 175%;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide figure {
    width: calc((100% - 50px) / 2);
  }
}
@media (min-width: 9100px) {
  .front_page__point__slide figure {
    width: calc((100% - 72px) / 2);
  }
}
.front_page__point__slide__contents2 {
  margin-top: 60px;
}
@media only screen and (min-width: 768px) {
  .front_page__point__slide__contents2 {
    margin-top: 0;
    width: calc((80% - 50px) / 2);
  }
}
@media (min-width: 980px) {
  .front_page__point__slide__contents2 {
    width: calc((80% - 72px) / 2);
  }
}
.front_page__point__slide__contents2 ul li {
  display: flex;
  -moz-column-gap: 40px;
       column-gap: 40px;
  align-items: center;
}
.front_page__point__slide__contents2 ul li:nth-child(2) {
  flex-direction: row-reverse;
}
.front_page__point__slide__contents2 ul li dl {
  width: 55%;
}
.front_page__point__slide__contents2 ul li dl dt {
  color: #b48459;
  font-size: 16px;
  font-weight: 700;
}
.front_page__point__slide__contents2 ul li dl dd {
  font-size: 14px;
  font-weight: 500;
  margin-top: 20px;
}
.front_page__point__slide__contents2 ul li figure {
  width: 45%;
  margin-top: 0;
  margin-bottom: 0;
}
.front_page__point__slide__btn {
  margin-top: 40px;
  width: -moz-fit-content;
  width: fit-content;
}
.front_page__point__slide__btn a {
  border-radius: 48px;
  border: 1px solid #111111;
  background: #fff;
  display: flex;
  padding: 10px 15px;
  color: #111111;
  line-height: 1;
  font-size: 14px;
  font-weight: 700;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.front_page__point__slide figure {
  border-radius: 24px;
  overflow: hidden;
  margin-top: 60px;
}
@media (min-width: 900px) {
  .front_page__point__slide figure {
    margin-top: 0;
    width: calc((80% - 50px) / 2);
  }
}
@media (min-width: 980px) {
  .front_page__point__slide figure {
    width: calc((80% - 72px) / 2);
  }
}
.front_page__point__slide figure img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}
.front_page__authoritys {
  border-bottom: 1px solid #111111;
}
.front_page__authoritys__inner {
  max-width: 1273px;
  margin: 0 auto 80px;
  padding: 0 30px;
}
@media only screen and (min-width: 768px) {
  .front_page__authoritys__inner {
    display: flex;
    padding: 0 20px;
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__authoritys__block {
    width: 50%;
    padding-top: 160px;
    padding-bottom: 190px;
  }
}
.front_page__authoritys__block h2, .front_page__authoritys__block .h2 {
  text-align: center;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 32px;
}
@media only screen and (min-width: 768px) {
  .front_page__authoritys__block h2, .front_page__authoritys__block .h2 {
    font-size: 36px;
    margin-bottom: 40px;
  }
}
.front_page__authoritys__block h2 span, .front_page__authoritys__block .h2 span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  font-weight: 500;
  display: block;
  margin-top: 32px;
}
.front_page__authoritys__block figure {
  border-radius: 16px;
  overflow: hidden;
}
.front_page__authoritys__block figure img {
  max-width: 100%;
}
.front_page__authoritys__block a {
  color: #111111;
  display: block;
  background: url("../img/top/icon_link.svg") no-repeat right 0 top 50%;
}
.front_page__authoritys__block dl {
  margin-top: 40px;
}
.front_page__authoritys__block dl dt {
  font-size: 14px;
  font-weight: 500;
}
.front_page__authoritys__block dl dd {
  margin-top: 20px;
  font-size: 24px;
  font-weight: 700;
}
.front_page__authoritys__block dl dd span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  font-weight: 400;
  margin-left: 11px;
}
.front_page__authoritys__block p {
  font-weight: 500;
  font-size: 16px;
  margin-top: 36px;
}
@media only screen and (min-width: 768px) {
  .front_page__authoritys__block p {
    margin-top: 48px;
    font-size: 20px;
  }
}
.front_page__authoritys__block:first-child {
  margin-bottom: 64px;
  padding-bottom: 64px;
  padding-top: 80px;
  border-bottom: 1px solid #d9d9d9;
}
@media only screen and (min-width: 768px) {
  .front_page__authoritys__block:first-child {
    border-right: 1px solid #d9d9d9;
    padding-right: 40px;
    border-bottom: unset;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 160px;
  }
}
@media (min-width: 1700px) {
  .front_page__authoritys__block:first-child {
    padding-right: 84px;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__authoritys__block:last-child {
    padding-left: 40px;
  }
}
@media (min-width: 1700px) {
  .front_page__authoritys__block:last-child {
    padding-left: 84px;
  }
}
.front_page__product {
  padding: 96px 0;
}
@media only screen and (min-width: 768px) {
  .front_page__product {
    padding: 140px 0;
  }
}
.front_page__product button {
  background: unset;
  border: unset;
  width: 64px;
  height: 64px;
  background: url("../icon/icon_slide.svg") no-repeat;
  background-size: contain;
  overflow: hidden;
  text-indent: -9999px;
  position: absolute;
  z-index: 3;
  top: 30%;
}
.front_page__product button svg {
  display: none;
}
.front_page__product button.splide__arrow--prev {
  left: 10px;
}
@media only screen and (min-width: 768px) {
  .front_page__product button.splide__arrow--prev {
    left: 100px;
  }
}
.front_page__product button.splide__arrow--next {
  right: 10px;
  background-image: url("../icon/icon_slide2.svg");
}
@media only screen and (min-width: 768px) {
  .front_page__product button.splide__arrow--next {
    right: 100px;
  }
}
.front_page__product__inner {
  max-width: 1273px;
  margin: 0 auto;
  padding: 0 30px;
}
@media only screen and (min-width: 768px) {
  .front_page__product__inner {
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.front_page__product__inner h2, .front_page__product__inner .h2 {
  margin-top: 0;
  font-size: 16px;
  font-weight: 700;
  margin-left: 24px;
  margin-bottom: 72px;
  margin-left: 0;
}
.front_page__product__inner h2 span, .front_page__product__inner .h2 span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 56px;
  font-weight: 200;
  display: block;
}
@media only screen and (min-width: 768px) {
  .front_page__product__inner h2 span, .front_page__product__inner .h2 span {
    margin-right: 24px;
    display: inline;
    font-size: 80px;
  }
}
.front_page__product__inner .splide__arrows {
  display: flex;
  -moz-column-gap: 16px;
       column-gap: 16px;
  position: absolute;
  justify-content: space-between;
  left: 10px;
  right: 10px;
  z-index: 20;
  top: 45%;
}
@media only screen and (min-width: 768px) {
  .front_page__product__inner .splide__arrows {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    justify-content: flex-start;
  }
}
.front_page__product__inner .splide__arrows button {
  background: unset;
  border: unset;
  width: 64px;
  height: 64px;
  background: url("../icon/icon_slide.svg") no-repeat;
  background-size: contain;
  overflow: hidden;
  text-indent: -9999px;
}
.front_page__product__inner .splide__arrows button.splide__arrow--next {
  transform: rotate(180deg);
}
.front_page__product__slide {
  margin-bottom: 48px;
}
@media only screen and (min-width: 768px) {
  .front_page__product__slide {
    margin-bottom: 70px;
  }
}
.front_page__product .splide__slide {
  padding: 0 10px;
}
@media (min-width: 1700px) {
  .front_page__product .splide__slide {
    padding: 0 40px;
  }
}
.front_page__product .splide__slide a {
  color: #111111;
}
.front_page__product .splide__slide figure {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 36px;
}
@media only screen and (min-width: 768px) {
  .front_page__product .splide__slide figure {
    margin-bottom: 44px;
  }
}
.front_page__product .splide__slide figure img {
  width: 100%;
  max-width: 100%;
}
.front_page__product .splide__slide .ec-shelfGrid__item__icons {
  display: flex;
  gap: 10px;
  padding: 0 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.front_page__product .splide__slide dl {
  padding: 0 24px;
}
.front_page__product .splide__slide dl dt {
  font-size: 18px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .front_page__product .splide__slide dl dt {
    font-size: 22px;
  }
}
.front_page__product .splide__slide dl dd {
  font-size: 14px;
  font-weight: 500;
  margin-top: 28px;
}
@media only screen and (min-width: 768px) {
  .front_page__product .splide__slide dl dd {
    font-size: 16px;
  }
}
.front_page__news {
  border-top: 1px solid #111111;
  padding: 96px 0;
}
@media only screen and (min-width: 768px) {
  .front_page__news {
    padding: 136px 0;
  }
}
.front_page__news .ec-newsRole {
  padding-top: 0;
}
.front_page__news__inner {
  padding: 0 30px;
}
@media only screen and (min-width: 768px) {
  .front_page__news__inner {
    max-width: 1270px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
.front_page__news__inner h2, .front_page__news__inner .h2 {
  font-size: 16px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 48px;
  margin-left: 0;
}
@media only screen and (min-width: 768px) {
  .front_page__news__inner h2, .front_page__news__inner .h2 {
    margin-left: 24px;
    margin-bottom: 72px;
  }
}
.front_page__news__inner h2 span, .front_page__news__inner .h2 span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 56px;
  font-weight: 200;
  display: block;
}
@media only screen and (min-width: 768px) {
  .front_page__news__inner h2 span, .front_page__news__inner .h2 span {
    display: inline;
    font-size: 80px;
    margin-right: 24px;
  }
}
.front_page__news .ec-newsRole__list {
  margin-bottom: 72px;
}
.front_page__news .ec-newsRole__list p {
  margin-top: 28px;
}
.front_page__news__btn {
  max-width: 305px;
  margin: 0 auto;
}
.front_page__usage {
  background: #f8f5ed;
  border-radius: 32px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage {
    margin: 0 8px;
  }
}
.front_page__usage__inner {
  padding: 80px 30px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__inner {
    padding: 120px 20px;
    max-width: 1128px;
    margin: 0 auto;
  }
}
.front_page__usage__inner h2, .front_page__usage__inner .h2 {
  margin-bottom: 56px;
  font-size: 28px;
  font-weight: 500;
  text-align: center;
  margin-top: 0;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__inner h2, .front_page__usage__inner .h2 {
    font-size: 36px;
    margin-bottom: 72px;
  }
}
.front_page__usage__inner h2 span, .front_page__usage__inner .h2 span {
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: block;
  margin-top: 32px;
  font-size: 14px;
}
.front_page__usage__lead {
  text-align: center;
  margin-bottom: 56px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__lead {
    margin-bottom: 64px;
  }
}
.front_page__usage__lead dt {
  font-size: 18px;
  font-weight: 700;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__lead dt {
    font-size: 22px;
  }
  .front_page__usage__lead dt br {
    display: none;
  }
}
.front_page__usage__lead dt span {
  text-decoration: underline;
  -webkit-text-decoration-color: #be9949;
          text-decoration-color: #be9949;
  text-underline-offset: 5px;
}
.front_page__usage__lead dd {
  margin-top: 40px;
}
.front_page__usage__lead dd ul {
  text-align: left;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
}
.front_page__usage__lead dd ul li {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.front_page__usage__lead dd ul li span {
  text-decoration: underline;
  -webkit-text-decoration-color: #be9949;
          text-decoration-color: #be9949;
  text-underline-offset: 5px;
  margin-right: 10px;
  white-space: nowrap;
}
.front_page__usage__lead dd ul li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #c3976f;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: 8px;
}
.front_page__usage__block {
  background: #fff;
  border-radius: 16px;
  padding: 56px 24px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__block {
    border-radius: 24px;
    padding: 72px 34px;
  }
}
.front_page__usage__block h3, .front_page__usage__block .h3 {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 40px;
  line-height: 1.6;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__block h3, .front_page__usage__block .h3 {
    font-size: 26px;
  }
}
.front_page__usage__block h3 span.line, .front_page__usage__block .h3 span.line {
  text-decoration: underline;
  -webkit-text-decoration-color: #be9949;
          text-decoration-color: #be9949;
  text-underline-offset: 5px;
}
.front_page__usage__block h3 span.sub, .front_page__usage__block .h3 span.sub {
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: block;
  margin-top: 32px;
  font-size: 14px;
}
.front_page__usage__list {
  display: grid;
  grid-template-columns: repeat(2, 50%);
  grid-template-rows: auto auto;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__list {
    grid-template-columns: repeat(3, 33.3333333333%);
  }
}
.front_page__usage__item {
  text-align: center;
  padding: 24px 0 56px;
  font-size: 15px;
  font-weight: 700;
  position: relative;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item {
    font-size: 18px;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(1)::before {
    content: "";
    display: block;
    height: 1px;
    width: 30px;
    background: #fff;
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 3;
  }
}
.front_page__usage__item:nth-child(1)::after {
  content: "";
  display: block;
  height: 30px;
  width: 1px;
  background: #fff;
  right: -1px;
  position: absolute;
  bottom: 0;
  z-index: 3;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(1)::after {
    height: 60px;
    bottom: -30px;
  }
}
.front_page__usage__item:nth-child(2) {
  border-right: none;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(2) {
    border-right: 1px solid #d9d9d9;
  }
  .front_page__usage__item:nth-child(2)::before {
    content: "";
    display: block;
    height: 1px;
    width: 60px;
    background: #fff;
    position: absolute;
    left: -30px;
    bottom: -1px;
    z-index: 3;
  }
  .front_page__usage__item:nth-child(2)::after {
    content: "";
    display: block;
    height: 30px;
    width: 1px;
    background: #fff;
    right: -1px;
    position: absolute;
    bottom: -1px;
    z-index: 3;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(3) {
    border-right: unset;
  }
}
.front_page__usage__item:nth-child(3)::before {
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  z-index: 3;
  width: 1px;
  height: 15px;
  right: -1px;
  bottom: -1px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(3)::before {
    right: 0;
    height: 1px;
    width: 30px;
  }
}
.front_page__usage__item:nth-child(4) {
  border-right: none;
}
.front_page__usage__item:nth-child(4)::before {
  content: "";
  display: block;
  background: #fff;
  position: absolute;
  z-index: 3;
  width: 1px;
  height: 15px;
  left: -1px;
  top: -1px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(4)::before {
    content: none;
  }
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(4) {
    border-right: 1px solid #d9d9d9;
    padding-bottom: 0;
    border-bottom: unset;
    border-top: 1px solid #d9d9d9;
  }
}
.front_page__usage__item:nth-child(5) {
  border-right: unset;
  border-bottom: unset;
  padding-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item:nth-child(5) {
    border-top: 1px solid #d9d9d9;
  }
}
.front_page__usage__item.-twocol {
  grid-column: 1/3;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item.-twocol {
    grid-column: 2/4;
  }
}
.front_page__usage__item.-twocol figure {
  width: 300px;
  margin: 0 auto 20px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item.-twocol figure {
    width: 380px;
    margin: 0 auto 30px;
  }
}
.front_page__usage__item.-twocol figure img {
  max-width: 100%;
  display: block;
}
.front_page__usage__item.-twocol dl {
  margin-bottom: 0;
}
.front_page__usage__item.-twocol dl dt {
  text-decoration: underline;
  -webkit-text-decoration-color: #be9949;
          text-decoration-color: #be9949;
  text-underline-offset: 5px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item.-twocol dl dt br {
    display: none;
  }
}
.front_page__usage__item.-twocol dl dd {
  font-size: 14px;
  margin-top: 20px;
}
@media only screen and (min-width: 768px) {
  .front_page__usage__item.-twocol dl dd br {
    display: none;
  }
}
.front_page__modal__close {
  display: block;
  width: 56px;
  height: 56px;
  position: absolute;
  background: url("../icon/icon_modal_close.svg") no-repeat;
  background-size: contain;
  box-shadow: unset;
  border: unset;
  top: -20px;
  right: -20px;
}
.front_page__modal__dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.front_page__modal__content {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 20px;
}
@media only screen and (min-width: 768px) {
  .front_page__modal__content {
    padding: 56px;
  }
}
.front_page__modal__content.-modal1 h2, .front_page__modal__content.-modal1 .h2 {
  font-size: 18px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 48px;
}
@media only screen and (min-width: 768px) {
  .front_page__modal__content.-modal1 ul {
    display: flex;
    -moz-column-gap: 40px;
         column-gap: 40px;
  }
  .front_page__modal__content.-modal1 ul li {
    width: 33%;
  }
}
.front_page__modal__content.-modal1 h3, .front_page__modal__content.-modal1 .h3 {
  background: #f8f5ed;
  color: #c3976f;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border-radius: 32px;
  padding: 5px 16px;
}
.front_page__modal__content.-modal1 dl dt {
  margin-top: 20px;
  font-size: 16px;
  display: flex;
  -moz-column-gap: 5px;
       column-gap: 5px;
  align-items: center;
}
.front_page__modal__content.-modal1 dl dt::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #c3976f;
  border-radius: 50%;
}
.front_page__modal__content.-modal1 dl + h3, .front_page__modal__content.-modal1 dl + .h3 {
  margin-top: 50px;
}
@media only screen and (min-width: 768px) {
  .front_page__modal__content.-modal2 ul {
    display: flex;
    -moz-column-gap: 28px;
         column-gap: 28px;
  }
}
.front_page__modal__content.-modal2 ul li {
  margin-bottom: 20px;
}
.front_page__modal__content.-modal2 ul li:last-child {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .front_page__modal__content.-modal2 ul li {
    width: calc((100% - 56px) / 3);
  }
}
.front_page__modal__content.-modal2 ul li img {
  max-width: 100%;
  width: 100%;
}
.front_page__modal__content.-modal2 ul li dl {
  margin-bottom: 0;
}
.front_page__modal__content.-modal2 ul li dl dt {
  font-size: 16px;
  font-weight: 700;
  color: #b48459;
  margin-bottom: 20px;
}
.front_page__modal__content.-modal2 ul li dl dd {
  font-size: 14px;
  font-weight: 500;
}
.front_page .ec-footerRole {
  border-top: unset;
}
/*
商品一覧

Styleguide 13.0
*/
#page_product_list {
  background: #ddd4c2 url("../img/product/bg_smp.png") no-repeat 50% 0;
  background-size: 430px auto;
}
@media (min-width: 430px) {
  #page_product_list {
    background-size: 100% auto;
  }
}
@media (min-width: 768px) {
  #page_product_list {
    background: #ddd4c2 url("../img/product/bg.webp") no-repeat 50% 0;
    background-size: 1360px auto;
  }
}
@media (min-width: 1300px) {
  #page_product_list {
    background-size: 100% auto;
  }
}
#page_product_list .ec-pageHeader2 {
  margin-bottom: 260px;
}
@media only screen and (min-width: 768px) {
  #page_product_list .ec-pageHeader2 {
    margin-bottom: 72px;
  }
}
#page_product_list .ec-layoutRole .ec-layoutRole__header {
  background: none;
}
#page_product_list .ec-layoutRole {
  background: none;
}
#page_product_list .ec-topicPath * {
  color: #fff;
}
#page_product_list .ec-topicPath li::before {
  background-image: url("../img/common/icon_topicPath_white.svg");
}
/*
商品詳細

Styleguide 14.0
*/
/*
注文

Styleguide 15.0
*/
/*
注文履歴

Styleguide 16.0
*/
/*
住所一覧

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

Styleguide 18.0
*/
/*
フォーム

Styleguide 19.0
*/
/*
404ページ

Styleguide 20.0
*/
/*
退会手続き

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

Styleguide 22.0
*/
.ec-privacyRole p {
  font-size: 16px;
  line-height: 175%;
}
.ec-privacyRole p + p {
  margin-top: 48px;
}
.ec-privacyRole p a {
  color: #111111;
}
.ec-privacyRole h2, .ec-privacyRole .h2 {
  font-weight: 700;
  font-size: 18px;
  margin: 48px 0;
}
.ec-privacyRole ul ul,
.ec-privacyRole ul ol,
.ec-privacyRole ol ul,
.ec-privacyRole ol ol {
  font-size: 14px;
  margin-top: 24px;
}
.ec-privacyRole ul {
  margin: 48px 0 0;
  padding: 0;
}
.ec-privacyRole ul li {
  padding-left: 15px;
  position: relative;
  margin-top: 15px;
}
.ec-privacyRole ul li::before {
  content: "・";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.ec-privacyRole ol {
  margin-top: 48px 0 0;
  padding-left: 0;
  counter-reset: num;
}
.ec-privacyRole ol > li {
  padding-left: 15px;
  position: relative;
  margin-top: 15px;
  counter-increment: num;
}
.ec-privacyRole ol > li::before {
  content: counter(num) ".";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}
.cart_page .ec-layoutRole__contents {
  max-width: 1272px;
}
.ec-supportRole {
  padding: 56px 20px 0;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole {
    padding: 0 20px;
  }
}
.ec-supportRoleBlock {
  max-width: 1152px;
  margin: 0 auto 80px;
  background: #fff;
}
@media only screen and (min-width: 768px) {
  .ec-supportRoleBlock {
    padding: 0px;
  }
}
.ec-supportRole__inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 56px;
  flex-wrap: wrap;
  gap: 40px;
}
.ec-supportRole__header h2, .ec-supportRole__header .h2 {
  margin-top: 0;
  margin-bottom: 6px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  font-weight: 400;
}
.ec-supportRole__header p {
  font-size: 14px;
  font-weight: 700;
}
.ec-supportRole__btn {
  text-align: left;
  width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole__btn {
    text-align: right;
    width: auto;
  }
}
.ec-supportRole__btn p {
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 16px;
}
.ec-supportRole__block {
  margin-bottom: 56px;
}
@media (min-width: 1040px) {
  .ec-supportRole__block {
    display: flex;
    -moz-column-gap: 24px;
         column-gap: 24px;
  }
}
.ec-supportRole__block__item {
  background: #fff;
  border: 1px solid #d2cec8;
  padding: 32px 24px;
  border-radius: 12px;
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole__block__item {
    padding: 30px 30px 34px;
  }
}
@media (min-width: 1040px) {
  .ec-supportRole__block__item {
    width: calc((100% - 48px) / 3);
  }
}
.ec-supportRole__block__item.-tel {
  background: #fff;
  margin-bottom: 40px;
}
@media (min-width: 1040px) {
  .ec-supportRole__block__item.-tel {
    margin-bottom: 0;
  }
}
.ec-supportRole__block__item.-mail {
  background: #fff;
}
.ec-supportRole__block__title dt {
  font-size: 20px;
  font-weight: 600;
}
.ec-supportRole__block__title dd {
  font-size: 14px;
  font-weight: 500;
  margin-top: 30px;
}
.ec-supportRole__block__telephone dt {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
}
.ec-supportRole__block__telephone dd {
  font-size: 12px;
  font-weight: 500;
}
.ec-supportRole__block2 {
  border-radius: 16px;
  border: 1px solid #c3976f;
  background: #fff;
  position: relative;
  margin-bottom: 56px;
  padding: 32px 24px;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole__block2 {
    padding: 64px 48px;
  }
}
.ec-supportRole__block2::before {
  content: "";
  width: 138px;
  height: 36px;
  background: url("../img/support/icon_block2.svg") no-repeat;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -20px;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole__block2::before {
    width: 276px;
    height: 72px;
    top: -35px;
  }
}
.ec-supportRole__block2 h3, .ec-supportRole__block2 .h3 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 30px;
}
.ec-supportRole__block2 h3 span, .ec-supportRole__block2 .h3 span {
  display: block;
  font-weight: 500;
  font-size: 16px;
  margin-bottom: 20px;
}
.ec-supportRole__block2 p {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 40px;
}
.ec-supportRole__block2 p span {
  color: #c3976f;
  border-bottom: 1px solid #c3976f;
}
.ec-supportRole__block3 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 40px 80px;
}
.ec-supportRole__block3 .l ul {
  margin-bottom: 20px;
}
.ec-supportRole__block3 .l ul li {
  font-size: 16px;
  font-weight: 500;
  display: flex;
  align-items: center;
  margin-bottom: 19px;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-supportRole__block3 .l ul li::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #c3976f;
}
.ec-supportRole__block3 .l dl {
  display: flex;
  -moz-column-gap: 8px;
       column-gap: 8px;
  align-items: center;
  margin-bottom: 0;
  flex-wrap: wrap;
}
.ec-supportRole__block3 .l dl dt {
  background: #c3976f;
  border-radius: 16px;
  color: #fff;
  padding: 5px 12px;
}
.ec-supportRole__block3 .l dl dd {
  margin-bottom: 0;
}
.ec-supportRole__block3 .l dl dd a {
  font-size: 14px;
  color: #111111;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.ec-supportRole__block3 .r {
  width: 334px;
}
.ec-supportRole__line {
  background: #fff;
  position: relative;
  border-radius: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 32px 24px;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole__line {
    padding: 64px 48px;
  }
}
.ec-supportRole__line .l {
  display: flex;
  align-items: center;
  -moz-column-gap: 40px;
       column-gap: 40px;
  flex-wrap: wrap;
}
.ec-supportRole__line .l::before {
  content: "";
  display: block;
  width: 112px;
  flex-shrink: 0;
  height: 112px;
  border: 1px solid #111111;
  border-radius: 50%;
  background: url("../icon/icon_line.svg") no-repeat 50% 50%;
  background-size: 50px 50px;
}
.ec-supportRole__line .r .ec-blockBtn--action.-line {
  background-color: #00b900;
  border-color: #00b900;
}
@media only screen and (min-width: 768px) {
  .ec-supportRole__line .r .ec-blockBtn--action.-line {
    width: 334px;
  }
}
.ec-supportRole__line .r .ec-blockBtn--action.-line a {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ec-supportRole__line .r .ec-blockBtn--action.-line a::before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  background: url("../icon/icon_line.svg") no-repeat 50% 50%;
  background-size: contain;
}
.ec-supportRole__line__title h3, .ec-supportRole__line__title .h3 {
  margin: 0 0 30px;
  font-size: 26px;
  font-weight: 700;
}
.ec-supportRole__line__title p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
}
.ec-authoritysRole {
  padding: 0 20px;
}
.ec-authoritysRole__inner {
  max-width: 1080px;
  margin: 0 auto;
}
.ec-authoritysRole__header {
  margin-bottom: 50px;
}
@media only screen and (min-width: 768px) {
  .ec-authoritysRole__header {
    display: flex;
    gap: 48px;
    margin-bottom: 100px;
  }
}
.ec-authoritysRole__header figure {
  max-width: 300px;
  margin: 0 auto;
}
@media only screen and (min-width: 768px) {
  .ec-authoritysRole__header figure {
    width: 36.6666666667%;
    max-width: unset;
  }
}
.ec-authoritysRole__header figure img {
  display: block;
  width: 100%;
  max-width: 100%;
}
@media only screen and (min-width: 768px) {
  .ec-authoritysRole__info {
    width: 51.0185185185%;
  }
}
.ec-authoritysRole__info h1, .ec-authoritysRole__info .h1 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 48px;
  line-height: 1.5;
  letter-spacing: 1.04px;
}
.ec-authoritysRole__name {
  margin-bottom: 48px;
}
.ec-authoritysRole__name dt {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 20px;
}
.ec-authoritysRole__name dd {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 0;
}
.ec-authoritysRole__name dd span {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  margin-left: 10px;
  font-size: 14px;
}
.ec-authoritysRole__profile {
  display: flex;
  -moz-column-gap: 32px;
       column-gap: 32px;
}
.ec-authoritysRole__profile dl {
  margin-bottom: 0;
  width: 50%;
}
.ec-authoritysRole__profile dl dt {
  font-size: 16px;
  font-weight: 700;
  color: #c3976f;
  border-bottom: 1px solid #b4b4b4;
  padding-bottom: 15px;
  margin-bottom: 20px;
}
.ec-authoritysRole__profile dl dd ul li {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
  display: flex;
  -moz-column-gap: 5px;
       column-gap: 5px;
}
.ec-authoritysRole__profile dl dd ul li::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: #c3976f;
  border-radius: 50%;
  position: relative;
  top: 5px;
}
.ec-authoritysRole__profile dl dd ul li:last-child {
  margin-bottom: 0;
}
.ec-authoritysRole__contents {
  max-width: 860px;
  margin: 0 auto 120px;
}
.ec-authoritysRole__contents h2, .ec-authoritysRole__contents .h2 {
  display: flex;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  -moz-column-gap: 16px;
       column-gap: 16px;
  margin-bottom: 50px;
}
.ec-authoritysRole__contents h2::before, .ec-authoritysRole__contents .h2::before {
  content: "Q.";
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  color: #c3976f;
  font-size: 32px;
  position: relative;
  top: -3px;
}
.ec-authoritysRole__contents p {
  padding-left: 50px;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 76px;
  line-height: 175%;
}
.ec-authoritysRole__contents .ec-blockBtn--action {
  max-width: 320px;
  margin: 0 auto;
}
.ec-authoritysRole__association {
  border-top: 1px solid #b4b4b4;
  border-bottom: 1px solid #b4b4b4;
  padding: 48px 0;
  margin-bottom: 70px;
}
.ec-authoritysRole__association dl {
  margin-bottom: 0;
}
@media only screen and (min-width: 768px) {
  .ec-authoritysRole__association dl {
    display: flex;
    justify-content: center;
    -moz-column-gap: 48px;
         column-gap: 48px;
    align-items: center;
  }
}
.ec-authoritysRole__association dl dt {
  width: 160px;
  margin: 0 auto 30px;
}
@media only screen and (min-width: 768px) {
  .ec-authoritysRole__association dl dt {
    margin: 0;
  }
}
.ec-authoritysRole__association dl dt img {
  max-width: 100%;
}
.ec-authoritysRole__association dl dd {
  margin-bottom: 0;
  font-size: 18px;
  font-weight: 500;
}
.ec-conciergeRole {
  margin-bottom: 60px;
  padding: 0 20px;
  /* 入力欄: パスワード再発行画面と同じ見た目 2026-08-31 */
  /* フォーム: 再発行画面と同じ縦積み・全幅レイアウト 2026-08-31 */
  /* --- SP最適化 2026-08-31 --- */
}
@media only screen and (min-width: 768px) {
  .ec-conciergeRole {
    margin-bottom: 120px;
  }
}
.ec-conciergeRole__block {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d2cec8;
  border-radius: 12px;
  padding: 40px 24px 44px;
}
@media only screen and (min-width: 768px) {
  .ec-conciergeRole__block {
    padding: 48px 56px 52px;
  }
}
.ec-conciergeRole__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .ec-conciergeRole__inner {
    padding: 0;
  }
}
.ec-conciergeRole__inner h2, .ec-conciergeRole__inner .h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 32px;
}
@media only screen and (min-width: 768px) {
  .ec-conciergeRole__inner h2 br, .ec-conciergeRole__inner .h2 br {
    display: none;
  }
}
.ec-conciergeRole__inner h2::before, .ec-conciergeRole__inner .h2::before {
  content: "";
  display: block;
  width: 241px;
  height: 18px;
  background: url("../img/concierge/h2_before.svg") no-repeat;
  background-size: contain;
  margin: 0 auto 18px;
}
.ec-conciergeRole__lead {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 56px;
}
.ec-conciergeRole__lead span {
  text-decoration: underline;
  -webkit-text-decoration-color: #be9949;
          text-decoration-color: #be9949;
  text-underline-offset: 5px;
}
.ec-conciergeRole__point {
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media only screen and (min-width: 768px) {
  .ec-conciergeRole__point {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}
.ec-conciergeRole__point li {
  font-size: 15px;
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: 0;
  text-align: center;
  background: #faf7f1;
  border: 1px solid #ece6e0;
  border-radius: 12px;
  padding: 24px 16px;
}
.ec-conciergeRole__point li::before {
  content: "";
  display: block;
  width: 44px;
  height: 44px;
  background: url(../img/concierge/chevron_right.svg) no-repeat;
  background-size: contain;
  margin: 0 auto 14px;
}
.ec-conciergeRole__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
}
.ec-conciergeRole__form .ec-blockBtn--action {
  width: 100%;
  height: 56px;
  border-radius: 48px;
}
.ec-conciergeRole__input,
.ec-conciergeRole input[type=email].ec-conciergeRole__input,
.ec-conciergeRole input[type=text].ec-conciergeRole__input {
  width: 100% !important;
  height: 56px !important;
  max-height: 56px !important;
  padding: 0 18px !important;
  border: 1px solid #d2cec8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 15px !important;
}
.ec-conciergeRole__input::-moz-placeholder, .ec-conciergeRole input[type=email].ec-conciergeRole__input::-moz-placeholder, .ec-conciergeRole input[type=text].ec-conciergeRole__input::-moz-placeholder {
  color: #9a9a9a;
}
.ec-conciergeRole__input::placeholder,
.ec-conciergeRole input[type=email].ec-conciergeRole__input::placeholder,
.ec-conciergeRole input[type=text].ec-conciergeRole__input::placeholder {
  color: #9a9a9a;
}
.ec-conciergeRole__input:focus,
.ec-conciergeRole input[type=email].ec-conciergeRole__input:focus,
.ec-conciergeRole input[type=text].ec-conciergeRole__input:focus {
  outline: none;
  border-color: #be9949;
}
@media (max-width: 767px) {
  .ec-conciergeRole {
    /* チェックカード: アイコン左・テキスト右の横並び */
  }
  .ec-conciergeRole__block {
    padding: 32px 20px 36px;
  }
  .ec-conciergeRole__inner h2, .ec-conciergeRole__inner .h2 {
    font-size: 24px !important;
    margin-bottom: 20px !important;
  }
  .ec-conciergeRole__inner h2::before, .ec-conciergeRole__inner .h2::before {
    margin: 0 auto 14px !important;
  }
  .ec-conciergeRole__lead {
    font-size: 15px !important;
    line-height: 1.8 !important;
    margin-bottom: 28px !important;
  }
  .ec-conciergeRole__point {
    margin-bottom: 32px;
    gap: 10px;
  }
  .ec-conciergeRole__point li {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    -moz-column-gap: 12px !important;
         column-gap: 12px !important;
    text-align: left !important;
    padding: 14px 16px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }
  .ec-conciergeRole__point li::before {
    width: 20px !important;
    height: 21px !important;
    margin: 0 !important;
  }
  .ec-conciergeRole__privacy {
    margin: 24px 0 32px;
    font-size: 14px;
  }
  .ec-conciergeRole__list {
    padding: 24px 16px;
  }
}
.ec-conciergeRole__privacy {
  margin: 40px 0 56px;
  font-size: 16px;
  font-weight: 500;
}
.ec-conciergeRole__privacy a {
  color: #111111;
  text-decoration: underline;
}
.ec-conciergeRole__list {
  border-top: 1px solid #b4b4b4;
  border-bottom: 1px solid #b4b4b4;
  padding: 40px 24px;
}
.ec-conciergeRole__list ul li {
  line-height: 1.9;
  word-break: break-all;
  overflow-wrap: anywhere;
  font-size: 13px;
  font-weight: 500;
}
.ec-conciergeRole__list ul li::before {
  content: "・";
  text-indent: 1em;
  margin-left: -1em;
}
.ec-conciergeRole__complete {
  border-radius: 12px;
  border: 1px solid #b88b2d;
  background: #fff;
  text-align: center;
  padding: 48px;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 56px;
}
.ec-subscription__tab {
  border: 1px solid #111111;
  border-radius: 8px;
  margin: 0 0 28px;
  padding: 0;
  display: flex;
}
.ec-subscription__tab li {
  width: 50%;
  position: relative;
}
.ec-subscription__tab li.is-active a {
  background: unset;
  color: #111111;
}
.ec-subscription__tab li.is-active a::before {
  background-image: url("../icon/subscription_on.svg");
}
.ec-subscription__tab li a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: rgba(17, 17, 17, 0.7);
  padding: 16px 0;
  -moz-column-gap: 8px;
       column-gap: 8px;
  background: #f8f5ed;
  letter-spacing: 0.04em;
}
.ec-subscription__tab li a::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url("../icon/subscription_off.svg") no-repeat;
  background-size: contain;
}
.ec-subscription__tab li:first-child {
  border-right: 1px solid #111111;
}
.ec-subscription__tab li:first-child a {
  border-radius: 8px 0 0 8px;
}
.ec-subscription__tab li:last-child a {
  border-radius: 0 8px 8px 0;
}
.ec-subscription__btn {
  max-width: 320px;
  margin: 0 auto 28px;
}
.ec-subscription__btn.-mini {
  width: -moz-fit-content;
  width: fit-content;
}
.ec-subscription__btn.-mini a {
  font-size: 14px;
  padding: 10px 24px;
}
.ec-subscription__btn.-mini a::before {
  content: none;
}
.ec-subscription__btn.-restart a::before {
  background-image: url("../icon/icon-sub02.svg");
}
.ec-subscription__btn a {
  background: #b88b2d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  line-height: 1;
  justify-content: center;
  align-items: center;
  border-radius: 48px;
  padding: 15px;
  -moz-column-gap: 8px;
       column-gap: 8px;
}
.ec-subscription__btn a::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url("../icon/icon-sub01.svg") no-repeat;
  background-size: contain;
}
.ec-subscription__header {
  background: #f8f5ed;
  padding: 20px 120px 20px 20px;
  border-radius: 8px;
  position: relative;
}
.ec-subscription__header dl {
  margin-bottom: 0;
  -moz-column-gap: 16px;
       column-gap: 16px;
}
.ec-subscription__header dl dt {
  font-size: 16px;
  font-weight: 700;
}
.ec-subscription__header dl dd {
  font-size: 14px;
  font-weight: 500;
  margin-top: 2px;
}
.ec-subscription__header dl dt,
.ec-subscription__header dl dd {
  margin-bottom: 0;
}
.ec-subscription__header .ec-subscription__btn {
  position: absolute;
  top: 13px;
  right: 20px;
}
.ec-subscription__price {
  margin: 28px 20px 45px;
  border-bottom: 1px solid #d2d2d2;
  padding-bottom: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.ec-subscription__price__title {
  font-weight: 700;
  font-size: 18px;
  margin-top: 8px;
}
.ec-subscription__price__title span {
  font-size: 16px;
}
.ec-subscription__price__text {
  display: flex;
  align-items: center;
}
.ec-subscription__price__text .ec-icon2 {
  font-size: 14px;
  letter-spacing: 0.08em;
  margin-right: 8px;
  text-align: center;
}
.ec-subscription__price__text__offprice {
  color: #888;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  text-decoration: line-through;
  margin-right: 18px;
}
.ec-subscription__price__text__offprice .yen {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  text-decoration: none;
  font-size: 14px;
}
.ec-subscription__price__text__realprice {
  font-size: 28px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-weight: 500;
}
.ec-subscription__price__text__realprice .yen {
  font-weight: 700;
  font-size: 24px;
}
.ec-subscription__price__text__realprice .note {
  font-weight: 50;
  font-size: 12px;
}
.ec-subscription__block2 {
  border: 1px solid #d2cec8;
  border-radius: 8px;
  padding: 28px 32px;
}
.ec-subscription__block2 dl {
  display: flex;
  border-bottom: 1px solid #d2cec8;
  margin-bottom: 24px;
  padding-bottom: 24px;
}
.ec-subscription__block2 dl:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.ec-subscription__block2 dl dt {
  width: 30%;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.ec-subscription__block2 dl dd {
  width: 70%;
  font-weight: 50;
  font-size: 14px;
  padding-right: 80px;
  position: relative;
}
.ec-subscription__block2 dl dd a.ec-subscription__block2__changebtn {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #000;
  color: #111111;
  border-radius: 36px;
  display: block;
  padding: 8px 16px;
}
.ec-subscription__lead {
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 24px;
  padding-bottom: 24px;
}
.ec-subscription__note {
  margin-top: 24px;
  font-size: 14px;
  font-weight: 500;
}
.ec-subscription__block3 .ec-borderedList {
  border-top: unset;
}
.ec-subscription__block3 .ec-borderedList li {
  border-bottom-style: solid;
  border-color: #e6e6e6;
}
.ec-subscription__block3 .ec-borderedList li:last-child {
  border-bottom: none;
}
.ec-subscription__block3 .ec-subscription__price {
  margin-inline: 0;
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list {
  gap: 20px;
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list li {
  width: calc((100% - 20px) / 2);
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  -moz-column-gap: 10px;
       column-gap: 10px;
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list li figure {
  width: 100px;
  flex-shrink: 0;
  border-radius: 8px;
  margin-bottom: 0;
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list li dl dd {
  margin-top: 0;
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list li .ec-cartRole__main__subscription__contents {
  padding: 0;
  width: calc(100% - 100px - 10px);
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list li .ec-cartRole__main__subscription__contents h3, .ec-subscription__block4 .ec-cartRole__main__subscription__list li .ec-cartRole__main__subscription__contents .h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}
.ec-subscription__block4 .ec-cartRole__main__subscription__list li .ec-cartRole__main__subscription__contents .ec-cartRole__main__subscription__price {
  margin-inline: 0;
  margin-top: 8px;
}
/* SUPPORT LEAD: サポートページのタイトル・説明文（コンシェルジュと同体裁）2026-09-01 */
.ec-supportRole__lead {
  text-align: center !important;
  margin-bottom: 40px;
}
.ec-supportRole__lead h2, .ec-supportRole__lead .h2 {
  text-align: center !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  margin: 0 0 16px !important;
  line-height: 1.5 !important;
}
.ec-supportRole__lead p {
  text-align: center !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.8 !important;
  margin: 0 !important;
}
@media (max-width: 767px) {
  .ec-supportRole__lead {
    margin-bottom: 28px;
  }
  .ec-supportRole__lead h2, .ec-supportRole__lead .h2 {
    font-size: 22px !important;
    margin-bottom: 12px !important;
  }
  .ec-supportRole__lead p {
    font-size: 15px !important;
  }
}
/* SUPPORT FAQ BTN: よくあるご質問ボタンをアウトライン化（フッターと同仕様）2026-09-01 */
.ec-supportRole__block__item.-faq .ec-blockBtn--action {
  background: transparent !important;
  border: 1px solid #111111 !important;
  border-radius: 999px !important;
  color: #111111 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  transition: background-color 0.2s, color 0.2s !important;
}
.ec-supportRole__block__item.-faq .ec-blockBtn--action:hover,
.ec-supportRole__block__item.-faq .ec-blockBtn--action:focus {
  background: #c39d4a !important;
  border-color: #c39d4a !important;
  color: #fff !important;
}
/* SUPPORT MAIL BTN: メール（お問い合わせフォーム）を主ボタンとして強調 2026-09-01 */
.ec-supportRole__block__item.-mail .ec-blockBtn--action {
  width: 100% !important;
  height: 60px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
}
/* SUPPORT SP TOP: SPでカード上端をコンシェルジュと揃える（-56px）2026-09-01 */
@media (max-width: 767px) {
  .ec-supportRole {
    margin-top: -56px !important;
  }
}
/* SUPPORT SP CARD GAP: SPでカード間の余白を均一に 2026-09-01 */
@media (max-width: 1023px) {
  .ec-supportRole__block__item {
    margin-bottom: 20px !important;
  }
  .ec-supportRole__block__item:last-child {
    margin-bottom: 0 !important;
  }
}
/* SUPPORT SP BLOCK BOTTOM: SPでカード群の下余白を詰める 2026-09-01 */
@media (max-width: 767px) {
  .ec-supportRole__block {
    margin-bottom: 0 !important;
  }
}