@charset "UTF-8";
/* ==================================================
 * ベーススタイル
 * ================================================== */
html {
  box-sizing: border-box;
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  overscroll-behavior: none;
}

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

header {
  z-index: 2;
  position: relative;
}

body, main, footer, aside {
  z-index: 1;
  position: relative;
}

section {
  outline: none;
}

ul, ol, li, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

p, dl {
  margin: 0;
}

dt {
  display: inline;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

strong {
  font-weight: inherit;
  font-size: 1.15em;
}

hr {
  margin: 0;
  border: none;
}

iframe {
  border: none;
}

button {
  padding: 0;
  border-width: 0;
  background-color: transparent;
  color: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}

input::-moz-focus-inner {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  font-size: 62.5%;
  word-wrap: break-word;
}

body {
  background: var(--bg-base, none);
  background-color: var(--bc-base, #edf4fc);
  color: var(--c-base, #333333);
  font-weight: var(--fw-base, inherit);
  font-size: var(--fs-base, 1.2rem);
  line-height: var(--lh-base, 1.75);
  font-family: var(--family-base, "'Noto Sans JP', -apple-system, BlinkMacSystemFont, Arial, YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, Meiryo, メイリオ, sans-serif");
  letter-spacing: var(--ls-base, 0.08em);
}
@media (min-width: 768px) {
  body {
    font-size: var(--fs-base-pc, 1.4rem);
  }
}

a:link,
a:visited {
  color: inherit;
  text-decoration: underline;
}

main {
  overflow: hidden;
}

img,
svg {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

:root {
  --slick-color-default: #fff;
  --slick-color-accent: #333333;
  --slick-back-color-default: #333333;
  --slick-back-color-accent: #70D3F5;
  --slick-dots-color-default: #8a8a8a;
  --container-width-raw-sp: 768;
  --container-width-raw: 1027;
  --c-main: #70D3F5;
  --c-accent: #ffe203;
  --c-black: #333333;
  --c-white: #fff;
  --c-gray: #8a8a8a;
  --c-red: #A30000;
  --c-pink: #D01180;
  --c-skyblue: #70D3F5;
  --c-blue: #006BBD;
  --c-yellow: #ffe203;
  --c-orange: #ff3c00;
  --c-green: #0c6e7a;
  --c-base: #333333;
  --c-link: currentColor;
  --c-disabled: #fff;
  --bc-main: #70D3F5;
  --bc-accent: #ffe203;
  --bc-black: #333333;
  --bc-white: #fff;
  --bc-gray: #8a8a8a;
  --bc-red: #A30000;
  --bc-pink: #D01180;
  --bc-skyblue: #70D3F5;
  --bc-blue: #006BBD;
  --bc-yellow: #ffe203;
  --bc-orange: #ff3c00;
  --bc-green: #0c6e7a;
  --bc-base: #edf4fc;
  --bc-disabled: #333333;
  --fs-xs: 1.2rem;
  --fs-s: 1.4rem;
  --fs-m: 1.6rem;
  --fs-l: 2rem;
  --fs-xl: 2.5rem;
  --fs-xxl: 3.6rem;
  --fs-base: 1.2rem;
  --fs-base-pc: 1.4rem;
  --weights-s: 400;
  --weights-m: 500;
  --weights-l: 600;
  --weights-xl: 700;
  --weights-xxl: 800;
  --weights-exl: 900;
  --weights-base: 400;
  --lh-base: 1.75;
  --ls-xs: 0.02em;
  --ls-s: 0.05em;
  --ls-m: 0.08em;
  --ls-l: 0.2em;
  --family-sans-serif: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Arial, YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, Meiryo, メイリオ, sans-serif;
  --family-serif: 'Noto Serif JP', 游明朝体, YuMincho, 游明朝, 'Yu Mincho', 'ヒラギノ明朝 ProN W3', 'Hiragino Mincho ProN W3', HiraMinProN-W3, 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', HGS明朝E, 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
  --family-round: 'M PLUS Rounded 1c', sans-serif;
  --family-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, Arial, YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Osaka, Meiryo, メイリオ, sans-serif;
  --space-xxs: 0.5rem;
  --space-xs: 1rem;
  --space-s: 2rem;
  --space-m: 3rem;
  --space-l: 5rem;
  --space-xl: 8rem;
  --space-xxl: 10rem;
}

/* ==================================================
 * レイアウトスタイル
 * ================================================== */
/* ヘッダー読み込んだ際のレイヤーシフト防止用 */
#header_lower_area {
  z-index: 100;
  position: sticky;
  top: 0;
  aspect-ratio: 752/102;
}
@media (min-width: 768px) {
  #header_lower_area {
    aspect-ratio: initial;
    height: 80px;
  }
}

/* ==================================================
 * コンポーネントスタイル
 * ================================================== */
.anime-fadeIn {
  animation: fade-in 1s 1s ease-in-out forwards;
  opacity: 0;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.container {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2.5%;
  padding-left: 2.5%;
}
@media (min-width: 768px) {
  .container {
    max-width: 1027px;
    padding-right: 0;
    padding-left: 0;
  }
}

.container-fluid {
  margin-right: -6%;
  margin-left: -6%;
}
@media (min-width: 768px) {
  .container-fluid {
    margin-right: -3rem;
    margin-left: -3rem;
  }
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

@media (min-width: 768px) {
  .pc-grid {
    display: flex;
    flex-wrap: wrap;
  }
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  min-width: 0;
  word-wrap: break-word;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .pc-col-1, .pc-col-2, .pc-col-3, .pc-col-4, .pc-col-5, .pc-col-6, .pc-col-7, .pc-col-8, .pc-col-9, .pc-col-10, .pc-col-11, .pc-col-12 {
    min-width: 0;
    word-wrap: break-word;
  }
  .pc-col-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }
  .pc-col-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }
  .pc-col-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
  .pc-col-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }
  .pc-col-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }
  .pc-col-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .pc-col-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }
  .pc-col-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
  .pc-col-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }
  .pc-col-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }
  .pc-col-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
  .pc-col-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.icon-dot::before {
  aspect-ratio: 1/1;
  background-color: var(--icon-dot-color, currentColor);
  content: "";
  -webkit-mask-size: var(--icon-dot-size, 0.8em);
  width: 1em;
          mask-size: var(--icon-dot-size, 0.8em);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx=\"12\" cy=\"12\" r=\"12\"/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx=\"12\" cy=\"12\" r=\"12\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
  display: inline-block;
  vertical-align: middle;
          mask-position: center;
}

.icon-square::before {
  aspect-ratio: 1/1;
  background-color: var(--icon-square-color, currentColor);
  content: "";
  -webkit-mask-size: var(--icon-square-size, 0.8em);
  width: 1em;
          mask-size: var(--icon-square-size, 0.8em);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect width=\"20\" height=\"20\"/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><rect width=\"20\" height=\"20\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
  display: inline-block;
  vertical-align: middle;
          mask-position: center;
}

.icon-arrow-right::before {
  aspect-ratio: 1/1;
  background-color: var(--icon-arrow-right-color, currentColor);
  content: "";
  -webkit-mask-size: var(--icon-arrow-right-size, 0.8em);
  width: 1em;
          mask-size: var(--icon-arrow-right-size, 0.8em);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d=\"M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z\"/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d=\"M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
  display: inline-block;
  vertical-align: middle;
          mask-position: center;
}

.icon-arrow-left::before {
  aspect-ratio: 1/1;
  background-color: var(--icon-arrow-left-color, currentColor);
  content: "";
  -webkit-mask-size: var(--icon-arrow-left-size, 0.8em);
  width: 1em;
          mask-size: var(--icon-arrow-left-size, 0.8em);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d=\"M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z\"/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d=\"M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
  display: inline-block;
  vertical-align: middle;
          mask-position: center;
}

.icon-cart::before {
  aspect-ratio: 1/1;
  background-color: var(--icon-cart-color, currentColor);
  content: "";
  -webkit-mask-size: var(--icon-cart-size, 1em);
  width: 1em;
          mask-size: var(--icon-cart-size, 1em);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 225.2 212.9'><path d=\"M0,0c15.5,0,31,0.1,46.5,0.1c7.7,0,11.5,2.8,12.7,10.4c2.5,15.4,4.5,30.8,6.7,46.2c2.6,18,5.2,36.1,7.8,54.1 c0.5,3.4,1,6.9,1.2,10.4c0.2,2.6,0.9,3.9,3.9,3.9c35-0.1,70-0.1,105-0.1c0.6,0,1.3-0.3,2.2-0.5c2.7-22.1,5.5-44,8.3-66.5 c-33,0-65.6,0-98.8,0c-1.1-8-2.1-15.6-3.3-24c1.9,0,3.6,0,5.4,0c37,0,74,0.1,111-0.1c7.6-0.1,13.3,2,16.6,9c0,1.7,0,3.3,0,5 c-1.4,8.8-2.9,17.6-4,26.5c-2.3,17.8-4.4,35.6-6.7,53.4c-0.4,3.3-0.8,6.6-1.3,9.9c-1.1,8-4.7,11.1-13.1,11.1 c-42.2,0-84.3,0.1-126.5,0.1c-2.3,0-4.7,0-7,0c-7.6-0.1-12-3.6-13.1-10.9c-1.9-12.5-3.4-25-5.2-37.5c-3.2-22.8-6.5-45.6-9.8-68.5 c-0.4-2.6-0.7-5.2-1-8.1c-7.3,0-14.1-0.3-20.9,0.1C8.8,24.5,3.1,22.4,0,15C0,10,0,5,0,0z\"/><path d=\"M108.9,189.3c0.1,13.1-10.2,23.5-23.2,23.6C73.1,213,62.1,202,62.1,189.4c0.1-12.8,10.8-23.3,23.7-23.3 C98.6,166.1,108.8,176.4,108.9,189.3z\"/><path d=\"M203.9,189.7c-0.1,13-10.5,23.3-23.6,23.2c-12.4-0.1-23.1-11-23.2-23.4c-0.1-12.5,10.9-23.4,23.7-23.4 C193.9,166.1,204,176.4,203.9,189.7z\"/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 225.2 212.9'><path d=\"M0,0c15.5,0,31,0.1,46.5,0.1c7.7,0,11.5,2.8,12.7,10.4c2.5,15.4,4.5,30.8,6.7,46.2c2.6,18,5.2,36.1,7.8,54.1 c0.5,3.4,1,6.9,1.2,10.4c0.2,2.6,0.9,3.9,3.9,3.9c35-0.1,70-0.1,105-0.1c0.6,0,1.3-0.3,2.2-0.5c2.7-22.1,5.5-44,8.3-66.5 c-33,0-65.6,0-98.8,0c-1.1-8-2.1-15.6-3.3-24c1.9,0,3.6,0,5.4,0c37,0,74,0.1,111-0.1c7.6-0.1,13.3,2,16.6,9c0,1.7,0,3.3,0,5 c-1.4,8.8-2.9,17.6-4,26.5c-2.3,17.8-4.4,35.6-6.7,53.4c-0.4,3.3-0.8,6.6-1.3,9.9c-1.1,8-4.7,11.1-13.1,11.1 c-42.2,0-84.3,0.1-126.5,0.1c-2.3,0-4.7,0-7,0c-7.6-0.1-12-3.6-13.1-10.9c-1.9-12.5-3.4-25-5.2-37.5c-3.2-22.8-6.5-45.6-9.8-68.5 c-0.4-2.6-0.7-5.2-1-8.1c-7.3,0-14.1-0.3-20.9,0.1C8.8,24.5,3.1,22.4,0,15C0,10,0,5,0,0z\"/><path d=\"M108.9,189.3c0.1,13.1-10.2,23.5-23.2,23.6C73.1,213,62.1,202,62.1,189.4c0.1-12.8,10.8-23.3,23.7-23.3 C98.6,166.1,108.8,176.4,108.9,189.3z\"/><path d=\"M203.9,189.7c-0.1,13-10.5,23.3-23.6,23.2c-12.4-0.1-23.1-11-23.2-23.4c-0.1-12.5,10.9-23.4,23.7-23.4 C193.9,166.1,204,176.4,203.9,189.7z\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
  display: inline-block;
  vertical-align: middle;
          mask-position: center;
}

/* ==================================================
 * 受付期間終了時の切り替わり
 * ================================================== */
/*
  『受付終了いたしました』表示切り替わり用
  id="reception_closed" を設定時に合わせてセット利用
*/
#reception_closed.display_none {
  display: none;
}

/*
 『受付期間』終了打ち消し線用
  id="reception_period" がセットされているところに自動でクラスが付与される
*/
#reception_period.strikethrough {
  text-decoration: line-through;
}

/* ==================================================
 * 商品プルダウン表示のデフォルトスタイル
 * ================================================== */
/* チェックボックスとそのラベル非表示用 */
.add_check,
.add_check_label {
  display: none;
}

/* プルダウン用 */
.select-box {
  --select-arrow-size: 4px;
  --select-arrow-gutter: 4px;
  display: inline-block;
  position: relative;
  width: 100%;
  border: solid 1px var(--select-box-border-color, #aaa);
  vertical-align: middle;
}
.select-box::before {
  position: absolute;
  width: 0;
  height: 0;
  margin: auto;
  inset: 0 var(--select-arrow-gutter) 0 auto;
  border-width: 6px var(--select-arrow-size) 0 var(--select-arrow-size);
  border-style: solid;
  border-color: currentColor transparent transparent transparent;
  content: "";
  opacity: 0.2;
  pointer-events: none;
}
.select-box select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  width: 100%;
  padding: 10px 5px;
  padding-right: calc(var(--select-arrow-size) * 2 + var(--select-arrow-gutter) * 2);
  border: none;
  background-color: var(--select-box-bc-color, #f7f7f7);
  box-shadow: none;
  color: var(--select-box-color, #444);
  text-indent: 0.01px;
  text-overflow: ellipsis;
  cursor: pointer;
}
.select-box select::-ms-expand {
  display: none;
}
@media (min-width: 768px) {
  .select-box {
    --select-arrow-size: 5px;
    --select-arrow-gutter: 6px;
  }
  .select-box::before {
    border-width: 8px var(--select-arrow-size) 0 var(--select-arrow-size);
  }
  .select-box select {
    padding: 15px;
    padding-right: calc(var(--select-arrow-size) * 2 + var(--select-arrow-gutter) * 2);
  }
}

/* ==================================================
 * カートボタン周り表示のデフォルトスタイル
 * ================================================== */
.js-button.is-disabled {
  background-color: var(--bc-disabled, #333333);
  color: var(--c-disabled, #fff);
  pointer-events: none;
}

/* 『商品はこちら』用ボタン */
a.product-list-button,
.product-list-button {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding: 0.5em 1em;
  border-radius: 2px;
  background-color: var(--product-list-button-bc, #ffe203);
  color: var(--product-list-button-c, #333333);
  font-weight: 600;
  font-size: 1.4rem;
  text-decoration: none;
}
a.product-list-button:active,
.product-list-button:active {
  transform: scale(0.95);
  transition: 0.2s;
}
a.product-list-button:hover, a.product-list-button:focus,
.product-list-button:hover,
.product-list-button:focus {
  opacity: 0.8;
}
@media (min-width: 768px) {
  a.product-list-button,
  .product-list-button {
    font-size: 1.6rem;
  }
}

/* 『カートに入れる』用ボタン */
.cart-single-button {
  display: flex;
  position: relative;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: var(--cart-button-w, 37.6rem);
  max-width: var(--cart-button-mw, 100%);
  margin-right: auto;
  margin-left: auto;
  padding: 0.5em 1em;
  border-radius: 2px;
  background-color: var(--cart-button-bc, #70D3F5);
  color: var(--cart-button-c, #333333);
  font-weight: var(--cart-button-weight, 600);
  font-size: var(--cart-button-fs, 1.4rem);
  text-decoration: none;
  transition: 0.4s;
}
.cart-single-button:active {
  transform: scale(0.95);
  transition: 0.2s;
}
.cart-single-button:hover, .cart-single-button:focus {
  opacity: 0.8;
}
.cart-single-button:disabled, .cart-single-button.cart_disabled {
  pointer-events: none;
}
@media (min-width: 768px) {
  .cart-single-button {
    font-size: var(--cart-button-fs, 1.6rem);
  }
}

/* 在庫なし状態の場合のスタイル付与 ※シングルのみ */
.cart_status_text {
  display: none;
  z-index: 1;
  position: absolute;
  place-items: center;
  inset: 0;
  background: var(--bc-disabled);
  color: var(--c-disabled);
}

.cart-single-button:disabled .cart_status_text, .cart-single-button.cart_disabled .cart_status_text {
  display: grid;
}

/* 『商品詳細』用ボタン(カートインAPIとは関係ないが併用が多いためここに記載) */
a.cart-single-detail-button,
.cart-single-detail-button {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: var(--detail-button-w, 31.3rem);
  max-width: var(--detail-button-mw, 80%);
  margin-right: auto;
  margin-left: auto;
  padding: 0.5em 1em;
  border-radius: 2px;
  background-color: var(--detail-button-bc, #8bceea);
  color: var(--detail-button-c, #333333);
  font-weight: var(--detail-button-weight, 600);
  font-size: var(--detail-button-fs, 1.4rem);
  text-decoration: none;
}
a.cart-single-detail-button:hover, a.cart-single-detail-button:focus,
.cart-single-detail-button:hover,
.cart-single-detail-button:focus {
  opacity: 0.8;
}
a.cart-single-detail-button:active,
.cart-single-detail-button:active {
  transform: scale(0.95);
  transition: 0.2s;
}
@media (min-width: 768px) {
  a.cart-single-detail-button,
  .cart-single-detail-button {
    font-size: var(--detail-button-fs, 1.6rem);
  }
}

/* 『まとめてカートに入れる』用ボタン */
.cart-all-button {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  width: var(--cart-all-button-w, 40.5rem);
  max-width: var(--cart-all-button-mw, 80%);
  margin-right: auto;
  margin-left: auto;
  padding: 0.5em 1em;
  border-radius: 2px;
  background-color: var(--cart-all-button-bc, #70D3F5);
  color: var(--cart-all-button-c, #333333);
  font-weight: var(--cart-all-button-weight, 600);
  font-size: var(--cart-all-button-fs, 1.6rem);
  text-decoration: none;
}
.cart-all-button:hover, .cart-all-button:focus {
  opacity: 0.8;
}
.cart-all-button:active {
  transform: scale(0.95);
  transition: 0.2s;
}
.cart-all-button::before {
  display: inline-block;
  width: var(--cart-all-button-icon-w, 1.15em);
  height: var(--cart-all-button-icon-h, 1.15em);
  margin-right: 0.5em;
  background-color: var(--cart-all-button-icon-color, currentColor);
  content: "";
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 225.2 212.9'><path d=\"M0,0c15.5,0,31,0.1,46.5,0.1c7.7,0,11.5,2.8,12.7,10.4c2.5,15.4,4.5,30.8,6.7,46.2c2.6,18,5.2,36.1,7.8,54.1 c0.5,3.4,1,6.9,1.2,10.4c0.2,2.6,0.9,3.9,3.9,3.9c35-0.1,70-0.1,105-0.1c0.6,0,1.3-0.3,2.2-0.5c2.7-22.1,5.5-44,8.3-66.5 c-33,0-65.6,0-98.8,0c-1.1-8-2.1-15.6-3.3-24c1.9,0,3.6,0,5.4,0c37,0,74,0.1,111-0.1c7.6-0.1,13.3,2,16.6,9c0,1.7,0,3.3,0,5 c-1.4,8.8-2.9,17.6-4,26.5c-2.3,17.8-4.4,35.6-6.7,53.4c-0.4,3.3-0.8,6.6-1.3,9.9c-1.1,8-4.7,11.1-13.1,11.1 c-42.2,0-84.3,0.1-126.5,0.1c-2.3,0-4.7,0-7,0c-7.6-0.1-12-3.6-13.1-10.9c-1.9-12.5-3.4-25-5.2-37.5c-3.2-22.8-6.5-45.6-9.8-68.5 c-0.4-2.6-0.7-5.2-1-8.1c-7.3,0-14.1-0.3-20.9,0.1C8.8,24.5,3.1,22.4,0,15C0,10,0,5,0,0z\"/><path d=\"M108.9,189.3c0.1,13.1-10.2,23.5-23.2,23.6C73.1,213,62.1,202,62.1,189.4c0.1-12.8,10.8-23.3,23.7-23.3 C98.6,166.1,108.8,176.4,108.9,189.3z\"/><path d=\"M203.9,189.7c-0.1,13-10.5,23.3-23.6,23.2c-12.4-0.1-23.1-11-23.2-23.4c-0.1-12.5,10.9-23.4,23.7-23.4 C193.9,166.1,204,176.4,203.9,189.7z\"/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 225.2 212.9'><path d=\"M0,0c15.5,0,31,0.1,46.5,0.1c7.7,0,11.5,2.8,12.7,10.4c2.5,15.4,4.5,30.8,6.7,46.2c2.6,18,5.2,36.1,7.8,54.1 c0.5,3.4,1,6.9,1.2,10.4c0.2,2.6,0.9,3.9,3.9,3.9c35-0.1,70-0.1,105-0.1c0.6,0,1.3-0.3,2.2-0.5c2.7-22.1,5.5-44,8.3-66.5 c-33,0-65.6,0-98.8,0c-1.1-8-2.1-15.6-3.3-24c1.9,0,3.6,0,5.4,0c37,0,74,0.1,111-0.1c7.6-0.1,13.3,2,16.6,9c0,1.7,0,3.3,0,5 c-1.4,8.8-2.9,17.6-4,26.5c-2.3,17.8-4.4,35.6-6.7,53.4c-0.4,3.3-0.8,6.6-1.3,9.9c-1.1,8-4.7,11.1-13.1,11.1 c-42.2,0-84.3,0.1-126.5,0.1c-2.3,0-4.7,0-7,0c-7.6-0.1-12-3.6-13.1-10.9c-1.9-12.5-3.4-25-5.2-37.5c-3.2-22.8-6.5-45.6-9.8-68.5 c-0.4-2.6-0.7-5.2-1-8.1c-7.3,0-14.1-0.3-20.9,0.1C8.8,24.5,3.1,22.4,0,15C0,10,0,5,0,0z\"/><path d=\"M108.9,189.3c0.1,13.1-10.2,23.5-23.2,23.6C73.1,213,62.1,202,62.1,189.4c0.1-12.8,10.8-23.3,23.7-23.3 C98.6,166.1,108.8,176.4,108.9,189.3z\"/><path d=\"M203.9,189.7c-0.1,13-10.5,23.3-23.6,23.2c-12.4-0.1-23.1-11-23.2-23.4c-0.1-12.5,10.9-23.4,23.7-23.4 C193.9,166.1,204,176.4,203.9,189.7z\"/></svg>");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
  display: inline-block;
  vertical-align: middle;
          mask-position: center;
}
@media (min-width: 768px) {
  .cart-all-button {
    font-size: var(--cart-all-button-fs, 2rem);
  }
}

/* ==================================================
 * プラグイン初期スタイルのオーバーライド
 * ================================================== */
.slick-autoplay-toggle-button {
  position: absolute;
}

.slick-dots {
  position: absolute;
  right: 0;
  bottom: 1em;
  left: 0;
  margin: 0 -1rem -1rem;
  text-align: center;
  pointer-events: none;
}

/* アクセシビリティー用追加 */
.slick-autoplay-toggle-button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 2px;
  background-color: var(--slick-back-color-default);
  line-height: 1;
}

.slick-autoplay-toggle-button:focus,
.slick-autoplay-toggle-button:hover {
  background-color: var(--slick-back-color-accent);
}

.slick-dots button {
  background-color: var(--slick-dots-back-color-default, #d9d9d9);
  color: var(--slick-dots-color-text-default, #333333);
}
.slick-dots li:has(.slick-active) button {
  mix-blend-mode: darken;
}
.slick-dots li.slick-active button {
  background-color: var(--slick-dots-back-color-accent, #333333);
  color: var(--slick-dots-color-text-accent, #fff);
}