.SP {
  position: relative;
  /* 設計幅390pxの土台。物理pxで固定すると流体ズームに乗らず、幅390px超の端末
     （iPhone Pro Max=430 等）や幅<1024へ縮めたとき（DevToolsドッキング等）に
     右側へ地の背景が露出する。100% でビューポート幅を満たし等比拡縮させる。 */
  width: 100%;
  max-width: 390rem;
  height: 13179rem;
  margin: 0 auto;
  /* viewport 固定の c-top-bg を見せるため透過。bg-01 ベタ白だと固定背景を覆い隠す。 */
  background-color: transparent;
  overflow: hidden;
}

.SP .link-icon {
  position: relative;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(
    90deg,
    rgba(255, 145, 67, 1) 0%,
    rgba(255, 98, 67, 1) 100%
  );
}

.SP .frame-10 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
  top: 770rem;
  left: 0;
}

.SP .main-contents {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  /* 旧 #FBF9F8 + main-contents-bg-sp.svg ×3 のパッチワーク背景は撤去。
     viewport 固定の c-top-bg（components/top-bg.css）が背景パターンを供給する。 */
  background-color: transparent;
}

.SP .frame-14 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  position: relative;
  flex: 0 0 auto;
}

/* 「全ての製品を見る」(SP) は共通 c-button（primary-white）へ委譲。
   旧 .SP .sub-link-btn / .text-wrapper-15 / .link-icon-3（all-products 専用）は撤去。
   ※ PC の .element-top .link-icon-3（products-strip 用）は別物なので保持。 */

.SP .frame-27 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP .sp-ps-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
}

.SP .view-8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
  padding: 24rem 20rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  background-color: var(--color-bg-02);
  border-radius: 24rem;
  border: 4rem solid;
  border-color: #ffffff;
}

.SP .h {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--color-neutral-04);
}

.SP .h-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  padding: 0px 0px 8rem;
  position: relative;
  flex: 0 0 auto;
  border-bottom-width: 2rem;
  border-bottom-style: solid;
  border-color: #ff6243;
}

.SP .h-2 {
  position: relative;
  width: fit-content;
  margin-top: -2.00rem;
  font-family: var(--font-jp);
  font-weight: 700;
  color: var(--color-neutral-01);
  font-size: 20rem;
  letter-spacing: 0.80rem;
  line-height: 36.0rem;
  white-space: nowrap;
}

.SP .frame-59 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rem;
  padding: 0px 0px 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.SP .text-wrapper-32 {
  flex: 1;
  margin-top: -1.00px;
  font-weight: 500;
  color: var(--color-neutral-01);
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: 25.2rem;
  position: relative;
  font-family: var(--font-jp);
}

.SP .frame-60 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-radius: 12rem;
}

.SP .frame-61 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8rem;
  padding: 0px 0px 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-color: var(--color-neutral-04);
}

.SP .frame-62 {
  display: flex;
  width: 110rem;
  align-items: center;
  gap: 8rem;
  position: relative;
  flex: 0 0 auto;
}

.SP .text-wrapper-33 {
  margin-top: -1.00px;
  font-weight: 700;
  color: var(--color-neutral-01);
  font-size: 16rem;
  letter-spacing: 0;
  line-height: 24rem;
  position: relative;
  width: fit-content;
  font-family: var(--font-jp);
  white-space: nowrap;
}

.SP .frame-63 {
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10rem 10rem;
  display: flex;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

/* 長いカテゴリー名がピル幅を押し広げ、横スクロールが発生するのを防ぐ。
   カテゴリーのピルは最大幅 100% で折り返す（区分ラジオは短いため対象外）。 */
.SP #js-category-checkboxes-top-sp .c-field__check {
  max-width: 100%;
  height: auto;
  min-height: 50rem;
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.SP #js-category-checkboxes-top-sp .c-field__check-text {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

/* 区分ラジオ / カテゴリーチェックボックスのピル本体は c-field（field.css）に統一。
   旧 .SP .radio-btn / .radio-btn-2 / .checkbox-radio-btn / text-wrapper-34..36 は撤去。
   SP では .frame-63（コンテナ）のみ層を担当。文字サイズ 12px は field.css の
   @media SP 既定（44 高さ / padding 16）に揃え、本ページ側での縮小は廃止。 */

.SP .txt-area {
  display: flex;
  height: 56rem;
  align-items: center;
  justify-content: center;
  gap: 14rem;
  padding: 0px 24rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  background-color: #ffffff;
  border-radius: 32rem;
}

.SP .frame-64 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
  position: relative;
  flex: 1;
  flex-grow: 1;
}

.SP .text-wrapper-38 {
  position: relative;
  flex: 1;
  margin-top: -1.00px;
  font-family: var(--font-jp);
  font-weight: 500;
  color: var(--color-neutral-02);
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: normal;
}

.SP .frame-65 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16rem;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

/* リセットボタンは共通 c-button（secondary-close）へ委譲。旧 .SP .reset-icon-btn は撤去。
   .text-wrapper-39 は PC フッター（footer-compact）でも使用のため据置。 */

.SP .text-wrapper-39 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: 700;
  color: #000000;
  font-size: 14rem;
  text-align: center;
  letter-spacing: 0.56rem;
  line-height: normal;
  position: relative;
  font-family: var(--font-jp);
}

/* 検索ボタンは共通 c-button（search）へ委譲。旧 .SP .closereset / .SP .search-icon-btn は撤去。
   .text-wrapper-40 は PC フッター（footer-compact）でも使用のため据置。 */

.SP .text-wrapper-40 {
  width: fit-content;
  margin-top: -1.00px;
  font-weight: 700;
  color: #ffffff;
  font-size: 14rem;
  text-align: center;
  letter-spacing: 0.56rem;
  line-height: normal;
  position: relative;
  font-family: var(--font-jp);
}

/* ===== SP調整（完成系寄せ / PC非影響） ===== */
@media screen and (max-width: 1023.98px) {
  .SP {
    height: auto;
    overflow: visible;
    overflow-x: clip;
  }

  

  .SP .frame-10 {
    z-index: 2;
  }

  

  

  

  

  

  

  /* JSによってこのクラスが付与されると transform 方式のスライドへ切替 */

  .SP .sp-carousel-item,
  .SP .frame-53.sp-carousel-item,
  .SP .frame-56.sp-carousel-item,
  .SP .frame-57.sp-carousel-item,
  .SP .frame-29.sp-carousel-item {
    flex: 0 0 84%;
    max-width: 84%;
    margin: 0;
    scroll-snap-align: center;
  }

  

  

  

  

  /* 旧 .SP .reset-icon-btn / .search-icon-btn の SP 調整は共通 c-button へ委譲済みのため撤去。 */

}