@charset "utf-8";

/* ------------------------------------
 * sofybe共通
 * --------------------------------- */

html {
  overflow-x: clip;
}

html:has(.sofybe-modal-01.is-active) {
  overflow: hidden;
}

:lang(ja) :is(body, button, input, optgroup, select, textarea),
:lang(ja)[data-script-enabled="true"] :is(body, button, input, optgroup, select, textarea),
:lang(ja)[data-webfont-loaded="true"] :is(body, button, input, optgroup, select, textarea),
:lang(ja)[data-webfont-loaded="false"] :is(body, button, input, optgroup, select, textarea) {
  font-family: "Noto Sans JP", sans-serif;
}

body {
  overflow-x: clip;
  font-family: "Noto Sans JP", sans-serif;
}

:root {
  --sofybe-color-black-01: #333;
  --sofybe-color-black-02: #242828;
  --sofybe-color-white-01: #fff;
  --sofybe-color-blue-01: #254978;
  --sofybe-color-blue-02: #0080CC;
  --sofybe-color-blue-03: #2157A4;
  --sofybe-color-blue-04: #19356F;
  --sofybe-color-pink-01: #EE579B;
  --sofybe-color-pink-02: #FFF2F8;
  --sofybe-color-pink-03: #F4ADCD;
  --root-font-size: 10;
  --rem: 1rem / var(--root-font-size);
  --header-height-01: 45;
  --header-height-02: 60;
  --header-height-03: 40;
}

@media screen and (min-width: 769px) {
  :root {
    --header-height-01: 56;
    --header-height-02: 84;
    --header-height-03: 67;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0;
}

button {
  padding: 0;
  appearance: none;
  cursor: pointer;
  outline: none;
  background-color: transparent;
  border: none;
}

sub {
  bottom: 0;
}

.CMP-CM15-html.section>div[data-gtm-visibility] {
  font-size: 0;
}

/* ------------------------------------
 * header
 * --------------------------------- */

.uc-page-header .uc-header-company {
  /* position: fixed;
  z-index: 4; */
  width: 100%;

  /* display: none; */
  margin-bottom: 0;
  background-color: var(--sofybe-color-white-01);

}

.sofybe-header {
  /* position: fixed;
  z-index: 4; */
  width: 100%;
  background-color: var(--sofybe-color-white-01);
  box-shadow: 0 5px 10px 0 rgb(105 23 60 / 20%);
}

.sofybe-header .CMP-CM28-reference:has(>.cq-dd-paragraph) {
  height: calc(var(--header-height-01) * 1px);
}

.CMP-CM05-block:has(>.sofybe-header-site) {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 16px;
  margin: 0 auto;
  background-color: var(--sofybe-color-white-01);
  box-shadow: 0 5px 10px 0 rgb(105 23 60 / 20%);

}


/* .CMP-CM05-block:has(>.sofybe-header-site).is-fixed {
  position: fixed;
  top: 0;
} */

.sofybe-header-site-inner {
  width: 100%;
  max-width: 1280px;
}

.sofybe-header-site .header-logo {
  width: 100%;
  max-width: 79px;
}

.nav-wrap {
  visibility: hidden;
  height: 0;
  opacity: 0;
}

body:has(.active) {
  overflow: hidden;
}

.active,
.active .other-recommend-sp {
  visibility: visible;
  opacity: unset;
}

.nav-wrap.active,
.active .nav-list {
  display: block;
}

.hamburger-nav-button {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: 2;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  cursor: pointer;
  translate: 0 -50%;
}

.nav-wrap.active {
  position: absolute;
  top: calc((var(--header-height-01) + var(--header-height-02) - 5) * 1px);
  right: 0;
  left: 0;
  z-index: 4;
  width: 100%;
  height: 100vh;
  overflow: auto;
  background-color: var(--sofybe-color-pink-02);
}

.nav {
  position: relative;
}

.nav-wrap.active .nav::after {
  position: absolute;
  width: 100%;
  height: calc(263px / 2);
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/wave_nav_sp.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100%;
}

@media screen and (min-width: 393px) {
  .nav-wrap.active::after {
    width: calc((100vw / 393) * (788 / 2));
    height: calc((100vw / 393) * (263 / 2));
  }
}

:is(html, body):has(.nav-wrap.active) {
  overflow: hidden;
}

.hamburger-nav-button .hamburger-nav {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 2px;
  background: var(--sofybe-color-blue-02);
  opacity: 1;
  translate: -50% -50%;
  transition: rotate 0.4s, opacity 0.4s, margin-top 0.4s;
}

.hamburger-nav-button .hamburger-nav:nth-child(1) {
  margin-top: -4px;
}

.hamburger-nav-button .hamburger-nav:nth-child(2) {
  margin-top: 4px;
}


[aria-expanded="true"].hamburger-nav-button .hamburger-nav:nth-child(1) {
  margin-top: 0;
  rotate: 25deg;
}

[aria-expanded="true"].hamburger-nav-button .hamburger-nav:nth-child(2) {
  margin-top: 0;
  rotate: -25deg;
}

.nav-wrap .uc-list {
  margin-top: 46px;
  font-size: calc(21 * var(--rem));
  font-weight: 800;
  line-height: calc(25.2 / 21);
  color: var(--sofybe-color-blue-01);
  letter-spacing: 2.1px;
}

.nav-wrap .uc-list a {
  color: var(--sofybe-color-blue-01);
}

.nav-wrap .uc-list li {
  margin-top: 34px;
  text-align: center;
  list-style: none;
}

@media screen and (min-width: 769px) {
  .uc-page-header .uc-header-company {
    display: block;
  }

  .sofybe-header-site {
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
  }

  .CMP-CM05-block:has(>.sofybe-header-site) {
    padding: 29px 20px;
  }

  .sofybe-header-site .header-logo {
    max-width: 110.6px;
  }

  .hamburger-nav-button {
    right: 0;
    width: 56px;
    height: 56px;
  }

  .hamburger-nav-button .hamburger-nav {
    width: 56px;
    height: 3px;
  }

  .hamburger-nav-button .hamburger-nav:nth-child(1) {
    margin-top: -6px;
  }

  .hamburger-nav-button .hamburger-nav:nth-child(2) {
    margin-top: 6px;
  }

  .nav-wrap.active {
    position: fixed;
    top: calc((var(--header-height-01) + var(--header-height-02)) * 1px);
    left: auto;
    max-width: 390px;
  }

  .nav-wrap.active .nav::after {
    bottom: 100px;
    width: 390px;
    height: 160px;
    background-image: url("/content/dam/sites/www_sofybe_jp/common/wave_nav_pc.png");
  }

  .nav-wrap .uc-list {
    display: grid;
    place-items: center center;
    height: 800px;
    padding-bottom: 160px;
    margin-top: 0;
    font-size: calc(20 * var(--rem));
    line-height: calc(24 / 20);
    color: var(--sofybe-color-blue-01);
    letter-spacing: 2px;
  }

  .nav-wrap .uc-list li {
    margin-top: 40px;
  }

  .black-bg {
    position: fixed;
    left: 0;
    z-index: 1;
    visibility: hidden;
    width: 100vw;
    height: 100vh;
    cursor: pointer;
    background-color: #b7b7b7;
    opacity: 0;
    transition: all 0.6s;
  }

  .CMP-CM05-block:has(.nav-wrap.active)+.CMP-CM15-html>.black-bg {
    visibility: visible;
    opacity: 0.8;
  }
}

@media screen and (max-width: 768px) {
  .CMP-CM05-block:has(>.sofybe-header-site) {
    height: calc(var(--header-height-02) * 1px);
  }

}

/* ------------------------------------
 * Body
 * --------------------------------- */

/* heading */
.CMP-CM09-heading:has(.primary-none) {
  height: 0;
}

.primary-none>* {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
}

.primary>* {
  font-size: calc(30 * var(--rem));
  font-weight: 800;
  line-height: calc(36 / 30);
  color: var(--sofybe-color-blue-01);
  text-align: center;
  letter-spacing: normal;
}

.secondary>* {
  font-size: calc(21 * var(--rem));
  font-weight: 800;
  line-height: calc(42 / 21);
  color: var(--sofybe-color-blue-01);
  text-align: center;
  letter-spacing: calc(1.85 * var(--rem));
}

.tertiary>* {
  font-size: calc(18 * var(--rem));
  font-weight: 800;
  line-height: calc(25.2 / 18);
  color: var(--sofybe-color-blue-01);
  text-align: center;
  letter-spacing: calc(0.9 * var(--rem));
}

/* テキスト */
.sofybe-text-01 {
  font-size: calc(15 * var(--rem));
  font-weight: 400;
  line-height: calc(27 / 15);
  color: var(--sofybe-color-black-01);
  text-align: center;
  letter-spacing: calc(1.5 * var(--rem));
}

.lineup-label-01 {
  width: fit-content;
  padding: 2px 13px;
  font-size: calc(9 * var(--rem));
  font-weight: 600;
  line-height: calc(10.8 / 9);
  color: var(--sofybe-color-blue-02);
  text-align: center;
  letter-spacing: calc(2.7 * var(--rem));
  border: 1px solid var(--sofybe-color-blue-02);
}

.lineup-label-01-custom[class] {
  margin-inline: auto;
}

/* 大枠 */
.sofybe-block {
  padding: 40px 16px;
}

/* ボタン */
.sofybe-btn-01 button,
.sofybe-btn-01 a {
  position: relative;
  display: inline-block;
  min-width: 240px;
  padding: 15.5px 28px;
  font-size: calc(18 * var(--rem));
  font-weight: 800;
  line-height: calc(25.3 / 18);
  color: var(--sofybe-color-white-01);
  text-align: center;
  letter-spacing: calc(1.8 * var(--rem));
  cursor: pointer;
  background: var(--cta, linear-gradient(90deg, #F4ADCD 0%, #F489B9 100%));
  border: 0;
  border-radius: 40px;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 10%);
}

.sofybe-btn-01 button:hover,
.sofybe-btn-01 a:hover {
  text-decoration: none;
  background: linear-gradient(90deg, #F7C5DC 0%, #F7ACCE 100%);
}

@media screen and (max-width: 374px) {

  .sofybe-btn-01 button,
  .sofybe-btn-01 a {
    width: 100%;
    min-width: unset;
    max-width: calc((100vw / 375) * 240);
  }
}

.sofybe-btn-01 a:visited,
.sofybe-btn-01 a:link {
  color: var(--sofybe-color-white-01);
}

.sofybe-btn-01 button::after,
.sofybe-btn-01 a::after {
  position: absolute;
  right: 14px;
  bottom: 50%;
  display: inline-block;
  width: 8px;
  height: 14px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-arrow_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%);
}

.sofybe-btn-custom-01 {
  text-align: center;
}

.sofybe-btn-01.back-btn-01 button,
.sofybe-btn-01.back-btn-01 a {
  width: fit-content;
  min-width: 242px;
  padding: 19.5px 31px 19.5px 44px;
  padding-left: 44px;
  font-size: calc(16 * var(--rem));
  line-height: calc(19.2 / 16);
  letter-spacing: calc(0, 8 * var(--rem));
}

.sofybe-btn-01.back-btn-01 button::after,
.sofybe-btn-01.back-btn-01 a::after {
  content: unset;
}

.sofybe-btn-01.back-btn-01 button::before,
.sofybe-btn-01.back-btn-01 a::before {
  position: absolute;
  bottom: 50%;
  left: 24px;
  display: inline-block;
  width: 8px;
  height: 14px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-arrow_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: scale(-1, 1) translateY(50%);
}

.CMP-CM10-text .back-btn-01 {
  margin-top: 0;
}

.sofybe-btn-01.read-more-btn-01 button,
.sofybe-btn-01.read-more-btn-01 a {
  padding-right: 36px;
  font-size: calc(16 * var(--rem));
  line-height: calc(22.4 / 16);
  letter-spacing: calc(0.8 * var(--rem));
}

.sofybe-btn-01.read-more-btn-01 button:hover,
.sofybe-btn-01.read-more-btn-01 a:hover {
  text-decoration: none;
}

.sofybe-btn-01.read-more-btn-01 button::after,
.sofybe-btn-01.read-more-btn-01 a::after {
  content: unset;
}

.sofybe-btn-01.read-more-btn-01 button::before,
.sofybe-btn-01.read-more-btn-01 a::before {
  position: absolute;
  right: 19px;
  bottom: 50%;
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-plus_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: scale(-1, 1) translateY(50%);
}


.sofybe-btn-01.blank-btn-01 button::after,
.sofybe-btn-01.blank-btn-01 a::after {
  width: 18px;
  height: 18px;
  font-size: 0;
  content: "別ウインドウで開きます";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-blank_02.svg");
}


/* .CMP-CM10-text .readmore-btn-02 {
  margin-top: 0;
}

.sofybe-btn-01.readmore-btn-02 button::after,
.sofybe-btn-01.readmore-btn-02 a::after {
  content: unset;
}

.sofybe-btn-01.readmore-btn-02 button::before,
.sofybe-btn-01.readmore-btn-02 a::before {
  position: absolute;
  right: 24px;
  bottom: 50%;
  display: inline-block;
  width: 8px;
  height: 14px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-arrow_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%) rotateZ(90deg);
}

.CMP-CM10-text .readmore-btn-02 {
  margin-top: 0;
} */

/* htmlコンポーネントのアコーディオン */
summary {
  /* display: list-item;以外を指定してデフォルトの三角形アイコン削除 */
  display: block;
}

/* Safariで表示されるデフォルトの三角形アイコンを非表示 */
summary::-webkit-details-marker {
  display: none;
}

/* もっと見る アコーディオンボタン */
.read-more-accordion-01 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 240px;
  padding: 18px 43px 18px 24px;
  margin-inline: auto;
  font-size: calc(16 * var(--rem));
  font-weight: 800;
  line-height: calc(16 / 16);
  color: var(--sofybe-color-white-01);
  text-align: center;
  letter-spacing: normal;
  cursor: pointer;
  background: var(--cta, linear-gradient(90deg, #F4ADCD 0%, #F489B9 100%));
  border: 0;
  border-radius: 40px;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 10%);
}

.read-more-accordion-01:hover {
  text-decoration: none;
  background: linear-gradient(90deg, #F7C5DC 0%, #F7ACCE 100%);
}

@media screen and (max-width: 374px) {
  .read-more-accordion-01 {
    width: 100%;
    min-width: unset;
    max-width: calc((100vw / 375) * 240);
  }
}

.read-more-accordion-01::after {
  position: absolute;
  top: 25%;
  right: 32px;
  bottom: 20%;
  width: 8px;
  height: 14px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-arrow_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  border: none;
  transform: translateY(50%) rotateZ(90deg);
}

/* もっと見る アコーディオン */
.more-accordion-block {
  display: flex;
  flex-direction: column-reverse;
}

.more-accordion-block.is-opened .read-more-accordion-01::after {
  transform: translateY(50%) rotateZ(-90deg);
}

.more-accordion-block .icon::before {
  content: unset;
}

.more-accordion-block .icon::after {
  content: unset;
}

/* カートボタン */
.CMP-CM10-text .sofybe-cart-float-btn-01 {
  margin-top: 0;
}

.sofybe-cart-float-btn-01 {
  position: fixed;
  top: calc((var(--header-height-01) + var(--header-height-02) + 20) * 1px);
  right: 12px;
  z-index: 3;
}

.sofybe-cart-float-btn-01.is-scrolled {
  top: 15px;
  transition: top 0.3s;
}

.sofybe-cart-float-btn-01 a {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 140px;
  padding: 10px 25px 10px 16px;
  font-size: calc(13 * var(--rem));
  font-weight: 700;
  line-height: calc(13 / 13);
  color: var(--sofybe-color-white-01);
  text-align: center;
  letter-spacing: unset;
  cursor: pointer;
  background: linear-gradient(0deg, rgb(244 173 205 / 60%) 0%, rgb(244 173 205 / 60%) 100%), linear-gradient(90deg, #F4ADCD 0%, #F489B9 100%);
  border: 1px solid rgb(255 255 255 / 60%);
  border-radius: 20px;
  box-shadow: 2px 2px 0 0 rgb(0 0 0 / 20%);
  background-blend-mode: multiply, normal;
}

.sofybe-cart-float-btn-01 a:hover {
  text-decoration: none;
  background: linear-gradient(90deg, #F7C5DC 0%, #F7ACCE 100%);
}

.sofybe-cart-float-btn-01 a:visited,
.sofybe-cart-float-btn-01 a:link {
  color: var(--sofybe-color-white-01);
}

.sofybe-cart-float-btn-01 a::after {
  position: absolute;
  right: 10px;
  bottom: 50%;
  display: inline-block;
  width: 14px;
  height: 14px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-cart_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%);
}

.sofybe-cart-btn a {
  position: relative;
  display: block;
  width: 100%;
  font-size: calc(16 * var(--rem));
  font-weight: 700;
  line-height: calc(16 / 16);
  color: var(--sofybe-color-white-01);
  text-align: center;
  letter-spacing: calc(1.6 * var(--rem));
  cursor: pointer;
  background: linear-gradient(90deg, #F4ADCD 0%, #F489B9 100%);
  border-radius: 40px;
  box-shadow: 1.403px 1.403px 0 0 rgb(0 0 0 / 10%);
}

.sofybe-cart-btn a:hover {
  text-decoration: none;
  background: linear-gradient(90deg, #F7C5DC 0%, #F7ACCE 100%);
}

.sofybe-cart-btn a:visited,
.sofybe-cart-btn a:link {
  color: var(--sofybe-color-white-01);
}

.sofybe-cart-btn a::after {
  position: absolute;
  right: 20px;
  bottom: 50%;
  display: inline-block;
  width: 18px;
  height: 18px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-cart_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%);
}

.sofybe-cart-btn-01 a {
  max-width: 295px;
  padding: 15px 40px;
}

.sofybe-cart-btn-02 a {
  max-width: 209px;
  padding: 15px 39px;
}

.sofybe-cart-btn-custom-01 a {
  margin-inline: auto;
}

/* banner */
.banner-block {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.banner-block .uc-mod-media-01.banner-image a .uc-caption::after {
  content: unset;
}

.banner-block .uc-mod-media-01.banner-image .uc-caption,
.banner-block .uc-mod-media-01.banner-image a .uc-caption {
  padding: 0;
  margin-top: 8px;
  font-size: calc(14 * var(--rem));
  font-weight: 400;
  line-height: calc(25.2 / 14);
  color: var(--sofybe-color-black-01);
  letter-spacing: calc(0.7 * var(--rem));
}

.banner-block .uc-mod-media-01.banner-image.banner-image-blank a .uc-caption {
  position: relative;
  padding-left: 24px;
}

.banner-block .uc-mod-media-01.banner-image.banner-image-blank a .uc-caption::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  font-size: 0;
  content: "別ウインドウで開きます";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-blank_01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}

/* SalesEnd */
.sofybe-block :has(.SalesEnd-section) {
  padding-inline: 10px;
}

.SalesEnd-section {
  padding: 24px;
  background-color: var(--sofybe-color-white-01);
  border: 3px solid var(--sofybe-color-pink-01)
}

.SalesEnd-heading>* {
  font-size: calc(20 * var(--rem));
  font-weight: 700;
  line-height: calc(36 / 20);
  color: var(--sofybe-color-pink-01);
  text-align: center;
  letter-spacing: calc(1 * var(--rem));
}

.SalesEnd-text-01,
.SalesEnd-text-02 {
  font-size: calc(14 * var(--rem));
  font-weight: 400;
  line-height: calc(22.4 / 14);
  color: var(--sofybe-color-black-01);
  text-align: center;
  letter-spacing: calc(0.7 * var(--rem));
}

.SalesEnd-text-02 {
  font-weight: 700;
}

.SalesEnd-text-03 {
  font-size: calc(18 * var(--rem));
  font-weight: 700;
  line-height: calc(28.8 / 18);
  color: var(--sofybe-color-black-01);
  text-align: center;
  letter-spacing: calc(0.9 * var(--rem));
}

.SalesEnd-text-01 {
  margin-top: 10px;
}

.CMP-CM10-text .SalesEnd-text-02 {
  margin-top: 20px;
}

.CMP-CM10-text .SalesEnd-text-03 {
  margin-top: 0;
}

/* SalesInfo */

.CMP-CM34-rich-text .SalesInfo {
  margin-top: 0;
}

.SalesInfo {
  padding: 16px 20px;
  font-size: calc(14 * var(--rem));
  font-weight: 700;
  line-height: calc(25.2 / 14);
  color: var(--sofybe-color-black-01);
  text-align: center;
  letter-spacing: calc(0.7 * var(--rem));
  background: var(--sofybe-color-white-01);
  box-shadow: 0 0 20px 0 rgb(51 51 51 / 7%);
}

/* .SalesInfo a,
.SalesInfo a:link,
.SalesInfo a:visited {
  color: var(--sofybe-color-pink-01);
  text-decoration: underline;
} */

/* 注釈 */
.uc-list.annotation-list-01 {
  margin-top: 0;
}

.annotation-list-01 ul {
  margin-bottom: 0;
}

.annotation-list-01 ul li {
  margin-left: 0;
  font-size: calc(10 * var(--rem));
  font-weight: 400;
  line-height: calc(18 / 10);
  color: #666;
  letter-spacing: calc(0.2 * var(--rem));
  list-style: none;
}

.annotation-list-custom-01 ul li {
  text-align: center;
}

.annotation-list-custom-02 ul li {
  text-align: right;
}

.annotation-list-indent-01 ul li {
  padding-left: 1.0em;
  text-indent: -1.0em;
}

/* 動画 */
.sofybe-video .uc-mod-media-02 .uc-object {
  width: 100%;
  max-width: 960px;
}

/* コンポーネントの設定リセット */
.uc-mod-media-01 {
  margin-bottom: 0;
}

.uc-mod-media-02 {
  margin-bottom: 0;
}

.CMP-CM18-video div {
  margin-top: 0;
}

@media screen and (min-width: 769px) {

  /* 大枠 */
  .sofybe-block {
    padding: 80px 20px;
  }

  /* heading */
  .primary>* {
    font-size: calc(52 * var(--rem));
    line-height: calc(62.4 / 52);
  }

  .secondary>* {
    font-size: calc(34 * var(--rem));
    font-weight: 700;
    line-height: calc(47.6 / 34);
    letter-spacing: calc(3.4 * var(--rem));
  }

  .tertiary>* {
    font-size: calc(24 * var(--rem));
    line-height: calc(33.6 / 24);
    letter-spacing: calc(2.4 * var(--rem));
  }

  /* テキスト */
  .sofybe-text-01 {
    font-size: calc(18 * var(--rem));
    line-height: calc(36 / 18);
    letter-spacing: calc(1.8 * var(--rem));
  }

  /* ボタン */
  .sofybe-cart-float-btn-01 {
    top: calc((var(--header-height-01) + var(--header-height-02) + 24) * 1px);
    right: 26px;
  }

  .sofybe-cart-float-btn-01.is-scrolled {
    top: 25px;
  }

  .sofybe-cart-float-btn-01 a {
    min-width: 248px;
    padding: 18px 32px 18px 24px;
    font-size: calc(19 * var(--rem));
    line-height: calc(19 / 19);
    letter-spacing: calc(1.9 * var(--rem));
    border-radius: 48px;
  }

  .sofybe-cart-float-btn-01 a::after {
    right: 20px;
    width: 21px;
    height: 21px;
  }

  .sofybe-cart-btn a {
    font-size: calc(20 * var(--rem));
    line-height: calc(20 / 20);
    letter-spacing: calc(2 * var(--rem));
  }

  .sofybe-cart-btn a::after {
    width: 24px;
    height: 24px;
  }

  .sofybe-cart-btn-01 a {
    max-width: 313px;
    padding: 15px 40px;
  }

  .sofybe-cart-btn-02 a {
    max-width: 323px;
    padding: 20px 47px;
  }


  .sofybe-btn-01 button,
  .sofybe-btn-01 a {
    width: 100%;
    min-width: unset;
    max-width: 336px;
    padding: 15.5px 40px;
    font-size: calc(20 * var(--rem));
    line-height: calc(28 / 20);
    letter-spacing: calc(1 * var(--rem));
  }

  .sofybe-btn-01.read-more-btn-01 button,
  .sofybe-btn-01.read-more-btn-01 a {
    padding-right: 52px;
    font-size: calc(20 * var(--rem));
    line-height: calc(28 / 20);
    letter-spacing: calc(1 * var(--rem));
  }

  .sofybe-btn-01.read-more-btn-01 button::before,
  .sofybe-btn-01.read-more-btn-01 a::before {
    right: 28px;
    width: 18px;
    height: 18px;
  }

  /* banner */
  .banner-block {
    flex-direction: row;
    max-width: 1200px;
    margin-inline: auto;
  }

  .banner-block .CMP-CM11-image-and-text .banner-image {
    width: 100%;
    max-width: 333px;
  }

  /* SalesEnd */

  .SalesEnd-section {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
  }

  .SalesEnd-heading>* {
    font-size: calc(22 * var(--rem));
    line-height: calc(39.6 / 22);
    letter-spacing: calc(1.1 * var(--rem));
  }

  .SalesEnd-text-01,
  .SalesEnd-text-02 {
    font-size: calc(16 * var(--rem));
    line-height: calc(28.8 / 16);
    letter-spacing: calc(0.8 * var(--rem));
  }

  .SalesEnd-text-03 {
    font-size: calc(20 * var(--rem));
    line-height: calc(36 / 20);
    letter-spacing: calc(1 * var(--rem));
  }

  .lineup-label-01 {
    width: fit-content;
    padding: 8px 16px;
    font-size: calc(12 * var(--rem));
    line-height: calc(14.4 / 12);
    letter-spacing: calc(3.6 * var(--rem));
  }

  /* SalesInfo */

  .SalesInfo {
    width: 100%;
    max-width: 704px;
    padding: 10px;
    font-size: calc(16 * var(--rem));
    line-height: calc(28.8 / 16);
    letter-spacing: calc(0.8 * var(--rem));
  }

  .CMP-CM34-rich-text .SalesInfo {
    margin-inline: auto;
  }

  /* 注釈 */

  .annotation-list-01 ul li {
    font-size: calc(12 * var(--rem));
    line-height: calc(21.6 / 12);
    letter-spacing: calc(0.6 * var(--rem));
  }
}

/* ------------------------------------
 * footer
 * --------------------------------- */

.uc-page-footer {
  background-color: var(--sofybe-color-white-01);
}

/* ------------------------------------
 * ブロックスキップ
 * --------------------------------- */

.accessibility-jump-main a {
  position: relative;
  display: block;
  display: -webkit-box;
  display: flexbox;
  display: flex;
  align-items: flex-end;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 0;
  font-size: 0;
  color: #666;
  text-align: center;
  text-decoration: underline;
  background: none;
  transition:
    height 0.35s ease-in-out,
    background 0.35s linear 0.35s,
    font-size 0.35s linear 0.35s;
  transition:
    height 0.35s ease-in-out,
    background 0.35s linear 0.35s,
    font-size 0.35s linear 0.35s,
    z-index linear 0.35s;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -ms-flex-align: center;
}

.accessibility-jump-main a:focus {
  z-index: 100;
  height: 36px;
  font-size: 16px;
  color: #666;
  outline: none;
  background-color: #fedeed;
  transition: height 0.35s ease-in-out;
}

.accessibility-jump-main a span {
  align-content: baseline;
  margin-bottom: 10px;
  line-height: 1;
}

.accessibility-jump-main.is-hidden a {
  height: 0;
  font-size: 0;
  background: none;
}

[id]:focus-visible {
  outline-width: 0;
  outline-color: rgb(255 255 255 / 0%);
}

/* ------------------------------------
 * 汎用
 * --------------------------------- */

/* 別窓アイコン */
.text-blank-01 a,
.text-blank-02 a {
  position: relative;
}

.text-blank-01 a::before,
.text-blank-02 a::after {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  font-size: 0;
  content: "別ウインドウで開きます";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-blank_01.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateY(-50%);
}

.text-blank-01 a::before {
  left: -16px;
}

.text-blank-02 a::after {
  right: auto;
}

/* color */
.sofybe-color-black-01,
.sofybe-color-black-01>* {
  color: var(--sofybe-color-black-01);
}

.sofybe-color-black-02,
.sofybe-color-black-02>* {
  color: var(--sofybe-color-black-02);
}

.sofybe-color-white-01,
.sofybe-color-white-01>* {
  color: var(--sofybe-color-white-01);
}

.sofybe-color-blue-01,
.sofybe-color-blue-01>* {
  color: var(--sofybe-color-blue-01);
}

.sofybe-color-blue-02,
.sofybe-color-blue-02>* {
  color: var(--sofybe-color-blue-02);
}

.sofybe-color-blue-03,
.sofybe-color-blue-03>* {
  color: var(--sofybe-color-blue-03);
}

.sofybe-color-blue-04,
.sofybe-color-blue-04>* {
  color: var(--sofybe-color-blue-04);
}

.sofybe-color-pink-01,
.sofybe-color-pink-01>* {
  color: var(--sofybe-color-pink-01);
}

.sofybe-color-pink-02,
.sofybe-color-pink-02>* {
  color: var(--sofybe-color-pink-02);
}

.sofybe-color-pink-03,
.sofybe-color-pink-03>* {
  color: var(--sofybe-color-pink-03);
}

/* grid 中央寄せ */
.grid-center {
  align-items: center;
  justify-content: center;
}

/* margin-inline 中央寄せ */
.m-inline-auto[class] {
  margin-inline: auto;
}

/* max-width */
[class*="max-w"][class] {
  margin-inline: auto;
}

.max-w-1040 {
  max-width: 1040px;
}

.max-w-740 {
  max-width: 740px;
}

.max-w-350 {
  max-width: 350px;
}

/* margin,padding */
._mb_10 {
  margin-bottom: 10px;
}

._mb_16 {
  margin-bottom: 16px;
}

._mb_24 {
  margin-bottom: 24px;
}

._mb_32 {
  margin-bottom: 32px;
}

._pt_64 {
  padding-top: 64px;
}

._pb_08 {
  padding-bottom: 8px;
}

._pb_16 {
  padding-bottom: 16px;
}

._pb_24 {
  padding-bottom: 24px;
}

._pb_64 {
  padding-bottom: 64px;
}

._element-none {
  display: none;
}

@media screen and (max-width: 768px) {
  ._mt_m11_sp {
    margin-top: -11px;
  }

  ._mt_10_sp {
    margin-top: 10px;
  }

  ._mt_20_sp {
    margin-top: 20px;
  }

  ._mt_24_sp {
    margin-top: 24px;
  }

  ._mt_32_sp {
    margin-top: 32px;
  }

  ._mt_40_sp {
    margin-top: 40px;
  }

  ._mb_03_sp {
    margin-bottom: 3px;
  }

  ._mb_04_sp {
    margin-bottom: 4px;
  }

  ._mb_08_sp {
    margin-bottom: 8px;
  }

  ._mb_10_sp {
    margin-bottom: 10px;
  }

  ._mb_12_sp {
    margin-bottom: 12px;
  }

  ._mb_14_sp {
    margin-bottom: 14px;
  }

  ._mb_16_sp {
    margin-bottom: 16px;
  }

  ._mb_20_sp {
    margin-bottom: 20px;
  }

  ._mb_24_sp {
    margin-bottom: 24px;
  }

  ._mb_28_sp {
    margin-bottom: 28px;
  }

  ._mb_30_sp {
    margin-bottom: 30px;
  }

  ._mb_32_sp {
    margin-bottom: 32px;
  }

  ._mb_40_sp {
    margin-bottom: 40px;
  }

  ._mb_56_sp {
    margin-bottom: 56px;
  }

  ._mb_60_sp {
    margin-bottom: 60px;
  }

  ._mb_98_sp {
    margin-bottom: 98px;
  }

  ._pt_08_sp {
    padding-top: 8px;
  }

  ._pt_10_sp {
    padding-top: 10px;
  }

  ._pt_16_sp {
    padding-top: 16px;
  }

  ._pt_21_sp {
    padding-top: 21px;
  }

  ._pt_24_sp {
    padding-top: 24px;
  }

  ._pt_32_sp {
    padding-top: 32px;
  }

  ._pt_40_sp {
    padding-top: 40px;
  }

  ._pt_56_sp {
    padding-top: 56px;
  }

  ._pt_64_sp {
    padding-top: 64px;
  }

  ._pt_80_sp {
    padding-top: 80px;
  }

  ._pt_90_sp {
    padding-top: 90px;
  }

  .pr-21_sp {
    padding-right: 21px;
  }

  ._pb_04_sp {
    padding-bottom: 4px;
  }

  ._pb_06_sp {
    padding-bottom: 6px;
  }

  ._pb_08_sp {
    padding-bottom: 8px;
  }

  ._pb_12_sp {
    padding-bottom: 12px;
  }

  ._pb_16_sp {
    padding-bottom: 16px;
  }

  ._pb_20_sp {
    padding-bottom: 20px;
  }

  ._pb_24_sp {
    padding-bottom: 24px;
  }

  ._pb_28_sp {
    padding-bottom: 28px;
  }

  ._pb_40_sp {
    padding-bottom: 40px;
  }

  ._pb_56_sp {
    padding-bottom: 56px;
  }

  ._pb_60_sp {
    padding-bottom: 60px;
  }

  ._pb_64_sp {
    padding-bottom: 64px;
  }

  ._pb_80_sp {
    padding-bottom: 80px;
  }

  .pl-21_sp {
    padding-left: 21px;
  }

  ._sp-none {
    display: none;
  }

}

@media screen and (min-width: 769px) {
  ._mt_m20_pc {
    margin-top: -20px;
  }

  ._mt_10_pc {
    margin-top: 10px;
  }

  ._mt_16_pc {
    margin-top: 16px;
  }

  ._mt_30_pc {
    margin-top: 30px;
  }

  ._mt_36_pc {
    margin-top: 36px;
  }

  ._mt_40_pc {
    margin-top: 40px;
  }

  ._mt_50_pc {
    margin-top: 50px;
  }

  ._mt_64_pc {
    margin-top: 64px;
  }

  ._mb_04_pc {
    margin-bottom: 4px;
  }

  ._mb_08_pc {
    margin-bottom: 8px;
  }

  ._mb_10_pc {
    margin-bottom: 10px;
  }

  ._mb_12_pc {
    margin-bottom: 12px;
  }

  ._mb_16_pc {
    margin-bottom: 16px;
  }

  ._mb_20_pc {
    margin-bottom: 20px;
  }

  ._mb_24_pc {
    margin-bottom: 24px;
  }

  ._mb_26_pc {
    margin-bottom: 26px;
  }

  ._mb_32_pc {
    margin-bottom: 32px;
  }

  ._mb_35_pc {
    margin-bottom: 35px;
  }

  ._mb_40_pc {
    margin-bottom: 40px;
  }

  ._mb_45_pc {
    margin-bottom: 45px;
  }

  ._mb_48_pc {
    margin-bottom: 48px;
  }

  ._mb_55_pc {
    margin-bottom: 55px;
  }

  ._mb_56_pc {
    margin-bottom: 56px;
  }

  ._mb_62_pc {
    margin-bottom: 62px;
  }

  ._mb_64_pc {
    margin-bottom: 64px;
  }

  ._mb_80_pc {
    margin-bottom: 80px;
  }

  ._mb_91_pc {
    margin-bottom: 91px;
  }

  ._mb_96_pc {
    margin-bottom: 96px;
  }

  ._mb_110_pc {
    margin-bottom: 110px;
  }

  ._pt_16_pc {
    padding-top: 16px;
  }

  ._pt_20_pc {
    padding-top: 20px;
  }

  ._pt_24_pc {
    padding-top: 24px;
  }

  ._pt_30_pc {
    padding-top: 30px;
  }

  ._pt_32_pc {
    padding-top: 32px;
  }

  ._pt_50_pc {
    padding-top: 50px;
  }

  ._pt_56_pc {
    padding-top: 56px;
  }

  ._pt_60_pc {
    padding-top: 60px;
  }

  ._pb_12_pc {
    padding-bottom: 12px;
  }

  ._pb_16_pc {
    padding-bottom: 16px;
  }

  ._pb_20_pc {
    padding-bottom: 20px;
  }

  ._pb_28_pc {
    padding-bottom: 28px;
  }

  ._pb_30_pc {
    padding-bottom: 30px;
  }

  ._pb_32_pc {
    padding-bottom: 32px;
  }

  ._pb_40_pc {
    padding-bottom: 40px;
  }

  ._pb_48_pc {
    padding-bottom: 48px;
  }

  ._pb_52_pc {
    padding-bottom: 52px;
  }

  ._pb_55_pc {
    padding-bottom: 55px;
  }

  ._pb_60_pc {
    padding-bottom: 60px;
  }

  ._pb_65_pc {
    padding-bottom: 65px;
  }

  ._pb_80_pc {
    padding-bottom: 80px;
  }

  ._pb_106_pc {
    padding-bottom: 106px;
  }

  ._pb_200_pc {
    padding-bottom: 200px;
  }

  ._mb_120_pc {
    margin-bottom: 120px;
  }

  ._pc-none {
    display: none;
  }
}