@charset "utf-8";

/* ------------------------------------
 * sofybe 子ページ共通
 * --------------------------------- */

/* .uc-page-body {
  padding-top: calc(var(--header-height-03) * 1px);
} */

.sofybe-cart-float-btn-01 {
  top: calc((var(--header-height-01) + var(--header-height-02) + var(--header-height-03) + 20) * 1px);
}

.sofybe-cart-float-btn-01.is-scrolled {
  top: calc((var(--header-height-03) + 20) * 1px);
}

.sofybe-header-site {
  box-shadow: none;
}

.black-bg {
  top: calc((var(--header-height-01) + var(--header-height-02) + var(--header-height-03)) * 1px);
}

.is-fixed .black-bg,
.is-fixed .nav-wrap.active {
  top: calc((var(--header-height-02) + var(--header-height-03)) * 1px);
}

.uc-list.anchor-link-list {
  position: relative;
  z-index: 4;
  width: 100%;
  margin-top: 0;
  transition: top 0.3s;
}

.anchor-link-list.is-fixed {
  position: fixed;
  top: 0;
}

.anchor-link-list {
  padding: 14px 16px;
  background: linear-gradient(0deg, #FFE4F0 0%, #FFE4F0 100%), linear-gradient(90deg, rgb(255 197 223 / 0%) 0%, rgb(255 197 223 / 40%) 100%);
  box-shadow: 0 5px 10px 0 rgb(105 23 60 / 20%);
  background-blend-mode: normal, multiply;
}

.reference-header-01:has(.nav-wrap.active)+.uc-page-body .anchor-link-list {
  box-shadow: none;
}

.anchor-link-list ul {
  display: flex;
  column-gap: 25px;
  align-items: center;
  margin-bottom: 0;
}

.anchor-link-list li {
  position: relative;
  margin-left: 0;
  font-size: calc(12 * var(--rem));
  font-weight: 600;
  line-height: calc(12 / 12);
  color: var(--sofybe-color-blue-01);
  letter-spacing: normal;
  list-style: none;
}

.anchor-link-list li a,
.anchor-link-list li :hover {
  color: var(--sofybe-color-blue-01);
}

.anchor-link-list li:not(:first-child)::after {
  position: absolute;
  top: 50%;
  left: -16px;
  display: block;
  width: 6px;
  height: 6px;
  content: "";
  background: #F4A3C8;
  border-radius: 50%;
  translate: 0 -50%;
}

.main-kv-section {
  position: relative;
  background: linear-gradient(0deg, #FDF4F5 0%, #FDF4F5 100%), linear-gradient(180deg, #FFF0F7 0%, #FFEFF7 50%, #E7FBFF 100%);
}

.main-kv-section::after {
  position: absolute;
  right: 0;
  bottom: calc((100vw / 375) * -15);
  width: calc((100vw / 375) * (750 / 2));
  height: calc((100vw / 375) * (184 / 2));
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/wave_kv_sp.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

.block-01 {
  background: linear-gradient(180deg, #FFF0F7 0%, #FFEFF7 50%, #E7FBFF 100%);
}

.wave-block-01 {
  position: relative;
}

.wave-block-01::after {
  position: absolute;
  right: 0;
  z-index: 1;
  width: calc((100vw / 375) * (750 / 2));
  height: calc((100vw / 375) * (184 / 2));
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/wave_01_sp.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

@media screen and (max-width: 768px) {
  .wave-block-pt-01 {
    padding-top: calc((100vw / 375) * 92);
  }
}

@media screen and (min-width: 769px) {
  .wave-block-pt-01 {
    padding-top: calc((100vw / 1280) * 92);
  }

  .main-kv-section::after {
    bottom: 0;
    width: 1280px;
    height: 92px;
    background-image: url("/content/dam/sites/www_sofybe_jp/common/wave_kv_pc.png");
    background-position: center bottom;
  }

  .wave-block-01::after {
    width: 1280px;
    height: 92px;
    background-image: url("/content/dam/sites/www_sofybe_jp/common/wave_01_pc.png");
  }
}

@media screen and (min-width: 1280px) {
  .main-kv-section::after {
    width: calc((100vw / 1280) * 1280);
    height: calc((100vw / 1280) * 92);
  }

  .wave-block-01::after {
    width: calc((100vw / 1280) * 1280);
    height: calc((100vw / 1280) * 92);
  }

}

/* ボイス */
.voice-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.CMP-CM10-text:has(>.voice-text) {
  width: 100%;
  max-width: calc(100% - 96px);
}

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

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

.voice-text {
  position: relative;
  padding: 16px;
  font-size: calc(13 * var(--rem));
  font-weight: 400;
  line-height: calc(23.4 / 13);
  color: var(--sofybe-color-black-01);
  text-align: left;
  letter-spacing: calc(0.65 * var(--rem));
  background-color: var(--sofybe-color-white-01);
  border-radius: 10px;
  filter: drop-shadow(0 0 10px rgb(0 0 0 / 10%));
}

.voice-text::after {
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 26px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-voice_bubble_01.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  transform: translateY(50%);
}

.voice>.CMP-CM05-block:nth-child(odd) .voice-text {
  margin-right: 20px;
}

.voice>.CMP-CM05-block:nth-child(even) .voice-text {
  margin-left: 20px;
}

.voice>.CMP-CM05-block:nth-child(odd) .voice-text::after {
  right: -16px;
  bottom: 50%;
}

.voice>.CMP-CM05-block:nth-child(even) .voice-text::after {
  top: 50%;
  left: -16px;
  rotate: 180deg;
}

.voice-image {
  width: 100%;
  max-width: 96px;
}


/* FAQ */

.sofybe-block:has(.faq) {
  padding-inline: 10px;
  padding-bottom: 56px;
}

.faq-accordion-details {
  padding: 15px 16px 16px 18px;
  border-bottom: 1px solid #B3B3B3;
}

.faq-accordion-details summary {
  cursor: pointer;
}

.faq-block .faq-accordion-text {
  position: relative;
  padding-left: 12px;
  font-size: calc(16 * var(--rem));
  font-weight: 700;
  line-height: calc(22.4 / 16);
  color: var(--sofybe-color-black-01);
  text-align: left;
  letter-spacing: calc(0.8 * var(--rem));
}

.faq-block .faq-accordion-text::before {
  position: absolute;
  left: -14px;
  content: "Q.";
}

.faq-accordion-details .faq-accordion-text::after {
  position: absolute;
  top: 50%;
  right: -20px;
  left: auto;
  width: 14px;
  height: 8px;
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-arrow_03.svg");
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
  rotate: 180deg;
  transition-duration: 0.5s;
  transition-property: rotate;
}

.faq-accordion-details.is-opened .faq-accordion-text::after {
  rotate: 0deg;
}

.faq-content {
  display: flex;
  align-items: flex-start;
  overflow: hidden;

  /* font-size: calc(14 * var(--rem));
  font-weight: 400;
  line-height: calc(19.6 / 14);
  color: var(--sofybe-color-black-01);
  letter-spacing: calc(0.7 * var(--rem)); */
}

.faq-content::before {
  display: inline-block;
  width: 20px;
  margin-top: 14px;
  font-size: 14px;
  font-weight: 400;
  line-height: calc(14 / 14);
  color: var(--sofybe-color-black-01);
  letter-spacing: calc(0.56 * var(--rem));
  content: "A.";
}

.faq-block .faq-accordion-text {
  position: relative;
  display: block;
  width: 96%;
  padding-left: 21px;
  font-size: calc(16 * var(--rem));
  font-weight: 700;
  line-height: calc(22.4 / 16);
  color: var(--sofybe-color-black-01);
  text-align: left;
  letter-spacing: calc(0.8 * var(--rem));
}

.faq-block .faq-accordion-text::before {
  position: absolute;
  left: -5px;
  content: "Q.";
}

.faq-block .faq-answer-block {
  display: flex;
  flex-direction: column;
  width: calc(100% - 35px);
  margin-block: 10px;
  font-size: calc(14 * var(--rem));
  font-weight: 400;
  line-height: calc(22.4 / 14);
  color: var(--sofybe-color-black-01);
  text-align: left;
  letter-spacing: calc(0.7 * var(--rem));
}

.faq-answer-list ul {
  margin-bottom: 0;
}

.faq-answer-list ul li {
  margin-left: 0;
  list-style: none;
}

.faq-answer-list.uc-list {
  margin-top: 0;
}

/* .faq-block .CMP-CM10-text:has(.faq-answer-text),
.faq-block .CMP-CM30-link-list:has(.faq-answer-list) {
  width: calc(100% - 0.6em);
  margin-left: auto;
}

.faq-block .CMP-CM10-text .faq-answer-text {
  margin-top: 0;
}

.faq-answer-list ul {
  margin-bottom: 0;
}

.faq-answer-list ul li {
  margin-left: 0;
  list-style: none;
}

.faq-answer-list.uc-list {
  margin-top: 0;
}

.faq-block .CMP-CM05-block:has(>.faq-answer-block) {
  display: flex;
  align-items: flex-start;
  padding-inline: 18px;
  font-size: calc(14 * var(--rem));
  font-weight: 400;
  line-height: calc(19.6 / 14);
  color: var(--sofybe-color-black-01);
  letter-spacing: calc(0.7 * var(--rem));
}

.faq-block .CMP-CM05-block:has(>.faq-answer-block)::before {
  display: inline-block;
  width: 16px;
  content: "A.";
}

.faq-block .uc-accordion-btn {
  position: relative;
  right: -10px;
  cursor: pointer;
}

.faq-block .uc-accordion-btn .uc-mod-state-open {
  all: unset;
  width: 14px;
  height: 8px;
  background-image: url("/content/dam/sites/www_sofybe_jp/common/icon/icon-arrow_03.svg");
  background-repeat: no-repeat;
  background-size: contain;
  rotate: 180deg;
  transition-duration: 0.5s;
  transition-property: rotate;
}

.faq-block .uc-is-open .uc-accordion-btn .uc-mod-state-open {
  rotate: 0deg;
}

html[data-script-enabled="true"] .faq-block .uc-js-tgl-01.uc-is-open .uc-state-open,
html[data-script-enabled="true"] .faq-block .uc-js-tgl-01 .uc-state-open {
  display: block;
}

html[data-script-enabled="true"] .faq-block .uc-js-tgl-01.uc-is-open .uc-state-close,
html[data-script-enabled="true"] .faq-block .uc-js-tgl-01 .uc-state-close {
  display: none;
} */

/* アプリ紹介 シェアパーツ */

.app-01-block-wrap .CMP-CM15-html:has(div[data-gtm-visibility]) {
  background-color: #FFF2F4;
}

.app-01-block {
  position: relative;
  padding-block: 56px;
  background-color: #FFF2F4;
}

.app-01-block::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc((100vw / 375) * (750 / 2));
  height: calc((100vw / 375) * (882 / 2));
  content: "";
  background-image: url("/content/dam/sites/www_sofybe_jp/common/bg-app-01_sp.png");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: contain;
  translate: -50%;
}

.app-01-heading>* {
  padding-inline: 20px;
  margin-bottom: 16px;
  font-size: calc(20 * var(--rem));
  font-weight: 800;
  line-height: calc(32 / 20);
  color: var(--sofybe-color-black-01);
  text-align: center;
  letter-spacing: calc(1 * var(--rem));
}

.CMP-CM10-text .app-01-text {
  margin-block: 0 32px;
}

.app-01-text {
  padding-inline: 20px;
  font-size: calc(14 * var(--rem));
  font-weight: 500;
  line-height: calc(25.2 / 14);
  color: var(--sofybe-color-black-02);
  text-align: center;
  letter-spacing: calc(0.7 * var(--rem));
}

.app-01-logo {
  width: calc((100vw / 375) * 270);
  margin-bottom: 24px;
}

@media screen and (max-width: 768px) {
  .CMP-CM11-image-and-text:has(._sp-none) {
    display: none;
  }
}

.app-01-button-block {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  padding-inline: 39px;
  margin-bottom: 32px;
}

.CMP-CM05-block:has(>.app-01-point-block) {
  width: calc((100vw / 375) * 309);
  margin-right: 16px;
}

.app-01-point-block {
  height: 100%;
  padding: 35px 22px 40px;
  background-color: var(--sofybe-color-white-01);
  border-radius: 20px;
}

.app-01-point-heading>* {
  font-size: calc(19 * var(--rem));
  font-weight: 700;
  line-height: calc(30.4 / 19);
  color: var(--sofybe-color-black-02);
  text-align: left;
  letter-spacing: calc(0.95 * var(--rem));
}

.app-01-point-heading img {
  width: 63px;
  margin-right: 16px;
}

.app-01-point-heading span {
  display: flex;
  align-items: center;
  justify-content: center;
}

.CMP-CM10-text .app-01-point-text {
  margin-block: 19px 32px;
}

.app-01-point-text {
  font-size: calc(13 * var(--rem));
  font-weight: 400;
  line-height: calc(23.4 / 13);
  color: var(--sofybe-color-black-01);
  text-align: center;
  letter-spacing: normal;
}

.CMP-CM05-block:has(>.app-01-point-slider) {
  padding-left: 16px;
}

.app-01-point-slider {
  display: flex;
  justify-content: center;
}

.app-01-point-slider .slick-track {
  display: flex;
}

.app-01-point-slider .slick-slide {
  height: auto !important;
}

/* その他の商品 */

.sofybe-block:has(.products-others-slider) {
  padding-inline: 0;
}

.products-others-heading>* {
  margin-bottom: 20px;
  font-size: calc(20 * var(--rem));
  font-weight: 800;
  line-height: calc(36 / 20);
  color: #666;
  text-align: center;
  letter-spacing: calc(1 * var(--rem));
}

.CMP-CM05-block:has(>.products-others-slider) {
  padding-left: 16px;
}

.products-others-slider .uc-mod-media-01 {
  width: calc((100vw / 375) * 325);
}


@media screen and (min-width: 769px) {
  .sofybe-header {
    box-shadow: none;
  }

  .anchor-link-list {
    padding: 24.5px 20px;
  }

  .anchor-link-list ul {
    column-gap: 40px;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
  }

  .anchor-link-list li {
    font-size: calc(18.2 * var(--rem));
    line-height: calc(18.2 / 18.2);
  }

  .anchor-link-list li:not(:first-child)::after {
    left: -24px;
    width: 8px;
    height: 8px;
  }

  /* ボイス */
  .voice-block {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
    margin-bottom: 22px;
  }

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

  .CMP-CM10-text:has(>.voice-text) {
    max-width: 880px;
  }

  .voice-text {
    padding: 24px;
    font-size: calc(19.5 * var(--rem));
    font-weight: 400;
    line-height: calc(35.1 / 19.5);
    letter-spacing: calc(0.975 * var(--rem));
    border-radius: 15px;
  }

  .voice>.CMP-CM05-block:nth-child(odd) .voice-text::after {
    right: -20px;
    bottom: 50%;
  }

  .voice>.CMP-CM05-block:nth-child(even) .voice-text::after {
    top: 50%;
    left: -20px;
    rotate: 180deg;
  }


  .voice>.CMP-CM05-block:nth-child(odd) .voice-text {
    margin-right: 16px;
  }

  .voice>.CMP-CM05-block:nth-child(even) .voice-text {
    margin-left: 16px;
  }

  .voice-image {
    width: 100%;
    max-width: 146px;
  }

  .voice-annotation-list {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
  }

  /* FAQ */

  .sofybe-block:has(.faq) {
    padding-bottom: 120px;
  }

  .faq-block {
    width: 100%;
    max-width: 1040px;
    margin-inline: auto;
  }

  .faq-accordion-details {
    padding: 26px 16px 20px 18px;
  }

  .faq-block .faq-accordion-text {
    width: 98%;
    padding-left: 29px;
    font-size: calc(20 * var(--rem));
    line-height: calc(28 / 20);
    letter-spacing: calc(1 * var(--rem));
  }

  .faq-content {
    /* font-size: calc(18 * var(--rem));
    line-height: calc(28.8 / 18);
    letter-spacing: calc(0.9 * var(--rem)); */
  }

  .faq-content::before {
    width: 32px;
    margin-top: 16px;
    font-size: 20px;
    line-height: calc(20 / 20);
    letter-spacing: calc(1 * var(--rem));
  }

  .faq-block .faq-answer-block {
    width: calc(100% - 37px);
    font-size: calc(20 * var(--rem));
    line-height: calc(36 / 20);
    letter-spacing: calc(0.8 * var(--rem));
  }

  /*
  .faq-block .CMP-CM05-block:has(>.faq-answer-block) {
    font-size: calc(20 * var(--rem));
    line-height: calc(28 / 20);
    letter-spacing: calc(1 * var(--rem));
  }

  .faq-block .CMP-CM05-block:has(>.faq-answer-block)::before {
    width: 22px;
  }  */

  /* アプリ紹介 シェアパーツ */

  .app-01-block {
    padding-block: 120px;
  }

  .app-01-block::before {
    top: 189px;
    width: 100%;
    height: 446px;
    background-image: url("/content/dam/sites/www_sofybe_jp/common/bg-app-01_pc.png");
  }

  .app-01-heading>* {
    margin-bottom: 40px;
    font-size: calc(28 * var(--rem));
    font-weight: 800;
    line-height: calc(50.4 / 28);
    letter-spacing: calc(1.4 * var(--rem));
  }

  .app-01-logo {
    width: 100%;
    max-width: 359px;
    margin-bottom: 35px;
  }

  .CMP-CM10-text .app-01-text {
    margin-bottom: 20px;
  }

  .app-01-button-block {
    padding-inline: 0;
    margin-inline: auto;
    margin-bottom: 80px;
  }

  .app-01-button-01 {
    width: 142px;
  }

  .app-01-button-02 {
    width: 176px;
  }

  .app-01-qr-01 {
    width: 95px;
  }

  .app-01-point-slider {
    width: 100%;
    max-width: 1103px;
    margin-inline: auto;
  }

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

  .app-01-point-block {
    padding-bottom: 23px;
  }

  .app-01-point-text {
    font-size: calc(14 * var(--rem));
    line-height: calc(25.2 / 14);
    letter-spacing: calc(1.4 * var(--rem));
  }

  .CMP-CM10-text .app-01-point-text {
    margin-block: 13px 29px;
  }

  /* その他の商品 */

  .sofybe-block:has(.products-others-slider) {
    padding-top: 120px;
  }

  .products-others-heading>* {
    margin-bottom: 56px;
    font-size: calc(32 * var(--rem));
    line-height: calc(57.6 / 32);
    letter-spacing: calc(1.6 * var(--rem));
  }

  .products-others-slider {
    display: flex;
    gap: 40px;
    align-items: center;
    justify-content: center;
  }

  .products-others-slider .uc-mod-media-01 {
    width: 100%;
    max-width: 325px;
  }
}