body {
  background: #FFFFFF;
}
.c-button {
  background: #eff2f4;
}
.c-button,
.c-button:link,
.c-button:hover,
.c-button:active,
.c-button:visited {
  color: #35454c;
}
.c-button:hover {
  background: #dfe5e8;
}
.c-button--primary {
  background: #feedeb;
}
.c-button--primary,
.c-button--primary:link,
.c-button--primary:hover,
.c-button--primary:active,
.c-button--primary:visited {
  color: #86251e;
}
.c-button--primary:hover {
  background: #fdd9d7;
}
.c-button--danger {
  background: <{$button3_bgcolor}>;
}
.c-button--danger,
.c-button--danger:link,
.c-button--danger:hover,
.c-button--danger:active,
.c-button--danger:visited {
  color: <{$button3_font_color}>;
}
.c-button--danger:hover {
  background: <{$button3_bgcolor_hover}>;
}
.c-input--text {
  border-color: #d7dee2;
}
.c-input--text:focus {
  border-color: #607d8b;
}

/* Bio QUON account/login custom header */
body {
  min-width: 0;
  background: #fff;
  color: #333;
  font-family: "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  letter-spacing: 0;
}

.title_area.p-shop__header.p-shop__header--title {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  height: 64px;
  min-height: 64px;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.title_area.p-shop__header.p-shop__header--title > a {
  display: flex;
  align-items: center;
  width: min(1120px, 100%);
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
  color: #333;
  text-decoration: none;
  box-sizing: border-box;
}

.shop_title.p-shop__title {
  display: block;
  font-size: 0;
  line-height: 1;
  color: transparent;
}

.shop_title.p-shop__title::after {
  content: "Bio QUON";
  color: #333;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
}

.base02.p-page__container.p-page__body {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 48px 24px 56px;
  box-sizing: border-box;
}

.c-button__group--sub {
  position: fixed;
  top: 0;
  right: max(24px, calc((100vw - 1120px) / 2 + 24px));
  z-index: 60;
  display: flex;
  align-items: center;
  height: 64px;
  margin: 0;
  padding: 0;
}

.c-button__group--sub .c-button-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 112px;
  padding: 0 16px;
  border: 1px solid #5cbcb8;
  border-radius: 4px;
  background: #5cbcb8;
  color: #fff !important;
  font-size: 0;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
  box-sizing: border-box;
}

.c-button__group--sub .c-button-sm::before {
  content: "ECサイトへ";
  font-size: 13px;
  letter-spacing: 0;
}

.c-button__group--sub .c-button-sm:hover {
  border-color: #48aaa6;
  background: #48aaa6;
}

.p-page__title {
  color: #333;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.c-button--login.c-button--primary,
.c-button--primary[type="submit"] {
  background: #5cbcb8 !important;
  color: #fff !important;
}

.c-button--login.c-button--primary:hover,
.c-button--primary[type="submit"]:hover {
  background: #48aaa6 !important;
}

.c-input--text:focus {
  border-color: #5cbcb8 !important;
  box-shadow: 0 0 0 2px rgba(92, 188, 184, .16);
}

.p-page__footer,
.p-page__copyright,
.p-page__secure {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media (max-width: 767px) {
  .title_area.p-shop__header.p-shop__header--title > a {
    padding: 0 20px;
  }

  .shop_title.p-shop__title::after {
    font-size: 21px;
  }

  .base02.p-page__container.p-page__body {
    padding: 36px 20px 48px;
  }

  .c-button__group--sub {
    right: 20px;
  }

  .c-button__group--sub .c-button-sm {
    min-width: 64px;
    height: 34px;
    padding: 0 12px;
  }

  .c-button__group--sub .c-button-sm::before {
    content: "ECへ";
    font-size: 12px;
  }
}
/* Bio QUON color tuning */
.shop_title.p-shop__title {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0;
  line-height: 1;
  color: transparent;
}

.shop_title.p-shop__title::before {
  content: "Bio";
  color: #333333;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0;
}

.shop_title.p-shop__title::after {
  content: "QUON";
  color: #2aa8bd;
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0;
}

.c-button__group--sub {
  right: max(48px, calc((100vw - 1120px) / 2 + 48px));
}

.c-button__group--sub .c-button-sm {
  border-color: #2aa8bd;
  background: #2aa8bd;
  color: #fff !important;
  font-weight: 700;
}

.c-button__group--sub .c-button-sm:hover {
  border-color: #2499ad;
  background: #2499ad;
}

.c-button__group--sub .c-button-sm::before {
  content: "ECサイトへ";
}

.c-button--login.c-button--primary,
.c-button--primary[type="submit"] {
  background: #2aa8bd !important;
  color: #fff !important;
}

.c-button--login.c-button--primary:hover,
.c-button--primary[type="submit"]:hover {
  background: #2499ad !important;
}

@media (max-width: 767px) {
  .shop_title.p-shop__title::before,
  .shop_title.p-shop__title::after {
    font-size: 38px;
  }

  .c-button__group--sub {
    right: 40px;
  }

  .c-button__group--sub .c-button-sm {
    min-width: 128px;
  }

  .c-button__group--sub .c-button-sm::before {
    content: "ECサイトへ";
  }
}
/* Move EC button left */
.c-button__group--sub {
  right: max(176px, calc((100vw - 1120px) / 2 + 176px));
}

@media (max-width: 767px) {
  .c-button__group--sub {
    right: 168px;
  }
}
/* Reduce Bio QUON logo size */
.shop_title.p-shop__title {
  gap: 4px;
}

.shop_title.p-shop__title::before,
.shop_title.p-shop__title::after {
  font-size: 24px !important;
}

@media (max-width: 767px) {
  .shop_title.p-shop__title::before,
  .shop_title.p-shop__title::after {
    font-size: 21px !important;
  }
}
/* Responsive account header fix */
@media (max-width: 767px) {
  .c-button__group--sub {
    right: 20px !important;
  }
}

/* Bio QUON logged-in member QR start */
form[action$="/customer/my_account/profile"]::before {
  content: "実店舗用 会員証明QR\A このQRはログイン済みマイページにのみ表示されます。\A 店舗スタッフへこの画面ごとご提示ください。";
  display: block;
  box-sizing: border-box;
  max-width: 420px;
  min-height: 322px;
  margin: 0 auto 28px;
  padding: 224px 20px 20px;
  border: 1px solid #48b0ae;
  border-radius: 12px;
  background-color: #ffffff;
  background-image: url("https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=BIOQUON_MEMBER_PAGE_VERIFIED");
  background-repeat: no-repeat;
  background-position: center 24px;
  background-size: 180px 180px;
  box-shadow: 0 10px 28px rgba(40, 34, 26, 0.08);
  color: #333333;
  font-size: 14px;
  line-height: 1.7;
  text-align: center;
  white-space: pre-line;
}
/* Bio QUON logged-in member QR end */


.p-page__wrap form::before{background-image:url(https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=https://bioquon-ec.shop/?mode=f4);}