/* =============================================
   下層ページ専用スタイル (collection / roms)
   ※ 共通・Topページのスタイルは style.css。
     本ファイルは style.css の後に読み込むこと。
     クラスはページ毎プレフィックス: collection=.cl- / roms=.rm-
============================================= */

/* =============================================
   COLLECTION PAGE (下層) — SEC 1: HERO
============================================= */
.cl-hero {
  position: relative;
  background: var(--bg-warm);
  height: clamp(400px, 36.12vw, 520px);
  overflow: hidden;
}

.cl-hero-flower {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Figma: 1440×520 基準の配置 */
.cl-hero-flower--top {
  top: -17.5%;
  right: -3.06%;
  width: 56.25%;
}

.cl-hero-flower--left {
  bottom: -15.77%;
  left: -2.37%;
  width: 48.75%;
}

.cl-hero-flower--right {
  bottom: -22.02%;
  right: -2.14%;
  width: 59.23%;
}

.cl-hero-inner {
  position: relative;
  z-index: 2;
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
}

.cl-hero-heading {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(44px, 4.45vw, 64px);
  line-height: 1.26;
  letter-spacing: 0;
  color: var(--red);
}

.cl-hero-tag {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  color: var(--red);
}

.cl-hero-belt {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 51.53%;
  width: clamp(300px, 32.23vw, 464px);
  transform: translateY(-50%);
}

.cl-hero-belt img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .cl-hero {
    height: auto;
    min-height: 560px;
    padding: 160px 0 0;
  }

  .cl-hero-flower--top {
    top: -140px;
    right: -378px;
    width: 810px;
    max-width: none;
  }

  .cl-hero-flower--left {
    bottom: -82px;
    left: -34px;
    width: 702px;
    max-width: none;
  }

  .cl-hero-flower--right {
    display: none !important;
  }

  .cl-hero-inner {
    width: calc(100% - 48px);
    height: auto;
    display: block;
  }

  .cl-hero-heading {
    font-size: clamp(44px, 12.8vw, 52px);
  }

  .cl-hero-belt {
    top: auto;
    bottom: 70px;
    left: auto;
    right: 0;
    transform: none;
    width: min(78.5%, 314px);
  }
}


/* =============================================
   ROMS PAGE (下層) — SEC 1: HERO
   ※ 背景・花・見出しは collection の .cl-hero* を流用。
     ベルト画像のみ ROMS 固有(Figma: 630×404 @ x703,y68 / 1440×520)。
============================================= */
.rm-hero-belt {
  position: absolute;
  z-index: 1;
  top: 13.08%;
  left: 48.82%;
  width: clamp(400px, 43.75vw, 630px);
}

.rm-hero-belt img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .rm-hero-belt {
    top: auto;
    left: auto;
    right: -80px;
    bottom: 30px;
    width: min(110%, 441px);
  }
}


/* =============================================
   ROMS PAGE — SEC 2: Rocotte Order Made System
   ※ 方眼格子 + 上下16px赤ライン(Topページ brand-intro 流用)
============================================= */
.rm-oms {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    #FAF8F5;
  border-top: 16px solid var(--red);
  border-bottom: 16px solid var(--red);
  padding: 16px 0 180px;
}

.rm-oms-container {
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

/* パンくず（Figma: y32 / Home ＞ ROMS） */
.rm-breadcrumb ol {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rm-breadcrumb li,
.rm-breadcrumb a {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.108em;
  color: var(--red);
}
.rm-breadcrumb-sep {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.25em;
}
.rm-breadcrumb a:hover {
  opacity: 0.7;
}

/* 2カラム（左テキスト552 / 右画像480 / gap88） */
.rm-oms-inner {
  margin-top: 128px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 7.86vw, 88px);
}

.rm-oms-text {
  flex: 1 1 552px;
  min-width: 0;
}

.rm-oms-heading {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(24px, 3.6vw, 40px);
  line-height: 1.26;
  letter-spacing: 0;
  color: var(--red);
}

.rm-oms-sub {
  margin-top: 15px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.108em;
  color: var(--red);
}

.rm-oms-label {
  position: relative;
  margin-top: 56px;
  padding-left: 16px;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--red);
}
.rm-oms-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 21px;
  background: var(--red);
}

.rm-oms-body {
  margin-top: 24px;
}
.rm-oms-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.rm-oms-body p + p {
  margin-top: 8px;
}
.rm-oms-body strong {
  font-weight: 400;
}
.rm-oms-body .rm-oms-body-sep {
  margin-top: 24px;
}
.rm-oms-body .rm-oms-note {
  margin-top: 8px;
  font-size: 14px;
}

.rm-oms-visual {
  flex: 0 0 clamp(320px, 33.33vw, 480px);
}
.rm-oms-visual img {
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .rm-oms-inner {
    margin-top: 88px;
  }
}

@media (max-width: 767px) {
  .rm-oms {
    padding-bottom: 96px;
  }
  .rm-oms-inner {
    margin-top: 56px;
    flex-direction: column;
  }
  .rm-oms-heading {
    font-size: 32px;
  }
  .rm-oms-visual {
    flex-basis: auto;
    width: min(100%, 480px);
    margin: 0 auto;
  }
}


/* =============================================
   ROMS PAGE — SEC 3: オーダーの流れ / Flow
   ※ 背景 #B72B2F / 白カード内に6ステップのタイムライン
============================================= */
.rm-flow {
  background: #B72B2F;
  padding: clamp(80px, 12.5vw, 180px) 0;
}

.rm-flow-container {
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

.rm-flow-head {
  text-align: center;
  color: #fff;
}
.rm-flow-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
}
.rm-flow-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.108em;
}
.rm-flow-lead {
  margin-top: clamp(36px, 4.4vw, 56px);
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
}
.rm-flow-lead strong {
  font-weight: 400;
}

/* 白カード（Figma: #FAF8F5 / padding 80） */
.rm-flow-card {
  margin-top: clamp(48px, 5.55vw, 80px);
  background: var(--bg-warm);
  padding: clamp(28px, 5.55vw, 80px);
}

.rm-flow-illust {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3.33vw, 48px);
}
.rm-flow-illust img {
  flex: 0 1 280px;
  min-width: 0;
  width: 100%;
  max-width: 280px;
  height: auto;
}

/* 6ステップ・タイムライン */
.rm-flow-steps {
  position: relative;
  list-style: none;
  margin-top: clamp(32px, 3.33vw, 48px);
}
/* 縦の連結線（円の中心 x16） */
.rm-flow-steps::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--red);
  z-index: 0;
}

.rm-flow-step {
  position: relative;
  padding-bottom: 16px;
}
.rm-flow-step:last-child {
  padding-bottom: 0;
}

.rm-flow-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rm-flow-num {
  position: relative;
  z-index: 1;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  /* 奇数（1,3,5）= アウトライン */
  background: var(--bg-warm);
  color: var(--red);
  border: 1px solid var(--red);
}
/* 偶数（2,4,6）= 塗り */
.rm-flow-step:nth-child(even) .rm-flow-num {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.rm-flow-step-title {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  color: var(--red);
}

.rm-flow-step-body {
  margin-top: 16px;
  padding-left: 40px;
}
.rm-flow-step-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.625;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.rm-flow-step-body p + p {
  margin-top: 8px;
}
.rm-flow-note {
  font-size: 14px !important;
  line-height: 1.571 !important;
}
.rm-flow-guide-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  color: var(--red);
}
.rm-flow-guide-link:hover {
  opacity: 0.7;
}

/* 下部リンク（白・下線・中央） */
.rm-flow-link {
  display: block;
  width: fit-content;
  margin: clamp(48px, 5.55vw, 80px) auto 0;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.15em;
  color: #fff;
}
.rm-flow-link:hover {
  border-bottom-color: #fff;
}

@media (max-width: 767px) {
  .rm-flow-heading {
    font-size: 32px;
  }
  .rm-flow-card {
    padding: 24px 20px;
  }
  .rm-flow-illust {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .rm-flow-illust img {
    flex: initial;
  }
  /* body は 40px インデントを維持（連結線が本文に重ならないように） */
}


/* =============================================
   ROMS PAGE — SEC 4: オーダー事例 / Custom Cases
   ※ Figma 1440×1720 基準の絶対配置ステージ（デスクトップ）。
     花背景は白88%オーバーレイ相当で薄く。SPは縦積みに再構成。
============================================= */
.rm-cases {
  position: relative;
  background: url(../images/common/bg-flower-transparent.webp) no-repeat top center / cover fixed var(--bg-warm);
  overflow: hidden;
}

/* 薄い花背景（Rectangle 221 白88% 相当）— セクション横幅いっぱい */
.rm-cases-flowers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.rm-cases-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 1720;
}

/* コラージュ（グループ書き出し画像を絶対配置） */
.rm-cases-collage {
  position: absolute;
  height: auto;
  z-index: 2;
}
.rm-cases-collage--left {
  left: 10.42%;
  top: 10.47%;
  width: 43.54%;
  z-index: 3;
}
.rm-cases-collage--right {
  left: 50.28%;
  top: 39.42%;
  width: 39.31%;
}

/* テキストブロック（右上） */
.rm-cases-text {
  position: absolute;
  left: 58.19%;
  top: 11.34%;
  width: 30.69%;
  z-index: 2;
}
.rm-cases-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}
.rm-cases-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.3;
  letter-spacing: 0.108em;
  color: var(--red);
}
.rm-cases-body {
  margin-top: clamp(32px, 3.9vw, 56px);
}
.rm-cases-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: #302F2F;
}
.rm-cases-body p + p {
  margin-top: 1.5em;
}
.rm-cases-body strong {
  font-weight: 400;
}

/* 赤いCTAスクエア（下部左） */
.rm-cases-cta {
  position: absolute;
  left: 11.11%;
  top: 71.05%;
  width: 27.78%;
  aspect-ratio: 1 / 1;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #B72B2F; /* オーダーの流れ(Flow)の背景色 */
  border: 1px solid transparent;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.rm-cases-cta span {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(12px, 1.04vw, 15px);
  letter-spacing: 0.15em;
  color: #fff;
  transition: color 0.3s var(--ease-out), border-bottom-color 0.3s var(--ease-out);
}
/* ホバー: 四角とテキストの色を反転 + 四角に赤1pxの線 */
.rm-cases-cta:hover {
  background: #fff;
  border-color: var(--red);
}
.rm-cases-cta:hover span {
  color: #B72B2F;
  border-bottom-color: rgba(183, 43, 47, 0.6);
}

/* ---- SP：縦積みに再構成 ---- */
@media (max-width: 767px) {
  .rm-cases {
    background-image: none;
  }

  .rm-cases-stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding: 0 0 120px;
  }
  .rm-cases-flowers {
    height: auto;
    opacity: 0.16;
  }
  .rm-cases-text {
    position: static;
    left: auto;
    top: auto;
    width: calc(100% - 80px);
    order: 1;
    margin-top: 120px;
  }
  .rm-cases-heading {
    font-size: 32px;
  }
  .rm-cases-tag {
    font-size: 16px;
  }
  .rm-cases-body p {
    font-size: 16px;
  }
  .rm-cases-collage {
    position: static;
    left: auto;
    top: auto;
  }
  .rm-cases-collage--left {
    width: 100%;
    order: 2;
  }
  .rm-cases-collage--right {
    width: 100%;
    order: 3;
  }
  .rm-cases-cta {
    position: static;
    left: auto;
    top: auto;
    width: min(80%, 320px);
    order: 4;
    aspect-ratio: 320 / 115;
    margin-top: 40px;
  }
  .rm-cases-cta span {
    font-size: 15px;
  }
}


/* =============================================
   COLLECTION PAGE — SEC 2: 革と色のロコッテ
============================================= */
.cl-material {
  /* 格子はTopページ brand-intro と共通 */
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    #FAF8F5;
  border-top: 16px solid var(--red);
  border-bottom: 16px solid var(--red);
  padding: 32px 0 122px;
}

.cl-material-container {
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

.cl-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.cl-breadcrumb li {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.106em;
  color: var(--red);
}

.cl-breadcrumb-sep {
  font-size: 10px;
  font-weight: 600;
}

.cl-breadcrumb a {
  transition: opacity 0.3s ease;
}

.cl-breadcrumb a:hover {
  opacity: 0.6;
}

.cl-material-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6.1vw, 88px);
  margin-top: 127px;
}

.cl-material-text {
  max-width: 582px;
}

.cl-material-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--red);
}

.cl-material-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.106em;
  color: var(--red);
}

.cl-material-body {
  margin-top: 56px;
}

.cl-material-body p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}

.cl-material-body p + p {
  margin-top: 24px;
}

.cl-material-body strong {
  font-weight: 500;
}

.cl-material-visual {
  position: relative;
  flex-shrink: 0;
  width: clamp(320px, 31.25vw, 450px);
  aspect-ratio: 450 / 539;
}

.cl-material-visual img {
  position: absolute;
  height: auto;
}

/* Figma: 450×539 基準の%配置 */
.cl-material-photo {
  left: 7.04%;
  top: 8.15%;
  width: 83.67%;
  z-index: 1;
}

.cl-material-wave {
  left: 53.11%;
  top: 0;
  width: 46.67%;
  z-index: 2;
}

.cl-material-dahlia {
  left: 0;
  top: 77.74%;
  width: 26.22%;
  z-index: 2;
}

@media (max-width: 1023px) {
  .cl-material-inner {
    flex-direction: column;
    align-items: center;
    margin-top: 96px;
  }

  .cl-material-text {
    max-width: 640px;
  }

  .cl-material-visual {
    width: min(76vw, 450px);
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .cl-material {
    border-top-width: 12px;
    border-bottom-width: 12px;
    padding: 16px 0 120px;
  }

  .cl-material-container {
    width: calc(100% - 80px);
  }

  .cl-breadcrumb li {
    font-size: 14px;
  }

  .cl-material-inner {
    margin-top: 72px;
  }

  .cl-material-text {
    order: 1;
  }

  .cl-material-heading {
    font-size: 32px;
  }

  .cl-material-body {
    margin-top: 40px;
  }

  .cl-material-visual {
    width: min(84vw, 400px);
    margin-top: 0;
  }
}


/* =============================================
   COLLECTION PAGE — SEC 3: 製品一覧
============================================= */
.cl-products {
  background: #B72B2F;
  padding: 180px 0;
}

.cl-products-container {
  width: min(100% - 80px, 1080px);
  margin: 0 auto;
}

.cl-products-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  color: #FFFFFF;
  text-align: center;
}

.cl-products-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.106em;
  color: #FFFFFF;
  text-align: center;
}

.cl-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 80px;
  padding: 0;
  list-style: none;
}

.cl-product-card {
  background: var(--bg-warm);
  padding: 40px 64px;
}

/* 市松状に格子入りカード (Topページ brand-intro と共通の格子) */
.cl-product-card:nth-child(4n+2),
.cl-product-card:nth-child(4n+3) {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    #FAF8F5;
}

.cl-product-title {
  font-family: 'Outfit', 'Noto Sans JP', sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 1.95vw, 28px);
  line-height: 1.25;
  color: var(--red);
  text-align: center;
}

.cl-product-img {
  margin-top: 24px;
}

.cl-product-img img {
  width: 100%;
  height: auto;
}

.cl-product-body {
  margin-top: 24px;
}

.cl-product-body p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.0375em;
  color: var(--black);
}

.cl-product-body p + p {
  margin-top: 8px;
}

.cl-product-link {
  display: inline-block;
  margin-top: 24px;
  font-family: 'LINE Seed JP', var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}

.cl-product-link:hover {
  opacity: 0.6;
}

@media (max-width: 1023px) {
  .cl-products {
    padding: 120px 0;
  }

  .cl-product-card {
    padding: 32px clamp(20px, 3.9vw, 40px);
  }

  
  .cl-products-grid {
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .cl-products {
    padding: 96px 0;
  }

  .cl-products-container {
    width: calc(100% - 80px);
  }

  .cl-products-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 56px;
  }

  .cl-product-card {
    padding: 32px 24px;
  }

  /* 1カラム時は交互に格子 */
  .cl-product-card:nth-child(4n+2),
  .cl-product-card:nth-child(4n+3) {
    background: var(--bg-warm);
  }

  .cl-product-card:nth-child(even) {
    background:
      repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
      repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
      #FAF8F5;
  }
  .cl-product-title {
    font-size: clamp(26px, 1.95vw, 28px);
  }

  .cl-products-heading {
    font-size: 32px;
  }

}


/* =============================================
   COLLECTION PAGE — SEC 4: 「裏赤」のはなし
============================================= */
.cl-urared {
  /* 格子はTopページ brand-intro と共通 */
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    #FAF8F5;
  padding: 180px 0;
}

.cl-urared-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6.3vw, 91px);
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

.cl-urared-text {
  max-width: 587px;
}

.cl-urared-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}

.cl-urared-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.106em;
  color: var(--red);
}

.cl-urared-body {
  margin-top: 56px;
}

.cl-urared-body p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}

.cl-urared-body p + p {
  margin-top: 24px;
}

.cl-urared-body strong {
  font-weight: 500;
}

.cl-urared-visual {
  position: relative;
  flex-shrink: 0;
  width: clamp(320px, 30.7vw, 442px);
  aspect-ratio: 442 / 607;
}

.cl-urared-visual img {
  position: absolute;
  height: auto;
}

/* Figma: 442×607 基準の%配置 */
.cl-urared-paper {
  left: 19.23%;
  top: 25.21%;
  width: 66.06%;
  z-index: 0;
}

.cl-urared-photo-hand {
  left: 41.86%;
  top: 0;
  width: 58.14%;
  z-index: 1;
}

.cl-urared-photo-belt {
  left: 0;
  top: 27.84%;
  width: 79.64%;
  z-index: 2;
}

.cl-urared-clip {
  left: 35.07%;
  top: 21.75%;
  width: 13.8%;
  z-index: 3;
}

@media (max-width: 1023px) {
  .cl-urared {
    padding: 120px 0;
  }

  .cl-urared-inner {
    flex-direction: column;
    align-items: center;
  }

  .cl-urared-text {
    max-width: 640px;
  }

  .cl-urared-visual {
    width: min(76vw, 442px);
    margin-top: 16px;
  }
}

@media (max-width: 767px) {

  .cl-urared-inner {
    width: calc(100% - 80px);
  }

  .cl-urared-body {
    margin-top: 40px;
  }

  .cl-urared-heading {
    font-size: 32px;
  }

  .cl-urared-visual {
    width: min(84vw, 400px);
  }
}


/* =============================================
   COLLECTION PAGE — SEC 5: ROMSという、選びかた
============================================= */
.cl-roms {
  position: relative;
  background: var(--bg-warm);
  padding: clamp(70px, 8.33vw, 120px) clamp(20px, 5.56vw, 80px);
  overflow: hidden;
}

.cl-roms-band {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.cl-roms-band--top { top: 0; }
.cl-roms-band--bottom { bottom: 0; }

.cl-roms-card {
  position: relative;
  z-index: 1;
  background: #FFFFFF;
  max-width: 1280px;
  margin: 0 auto;
  padding: 90px clamp(24px, 4.2vw, 60px) 110px;
}

.cl-roms-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.cl-roms-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}

.cl-roms-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.106em;
  color: var(--red);
}

.cl-roms-body {
  margin-top: 56px;
}

.cl-roms-body p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}

.cl-roms-body p + p {
  margin-top: 24px;
}

.cl-roms-body strong {
  font-weight: 500;
}

.cl-roms-link {
  display: inline-block;
  margin-top: 24px;
  font-family: 'LINE Seed JP', var(--font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity 0.3s ease;
}

.cl-roms-link:hover {
  opacity: 0.6;
}

/* ポラロイド (カード基準 1280×750 の%配置) */
.cl-roms-polaroid {
  position: absolute;
  pointer-events: none;
}

.cl-roms-polaroid img {
  position: absolute;
  height: auto;
}

.cl-roms-polaroid--1 {
  left: 0;
  top: -50px;
  width: 25.78%;
  aspect-ratio: 330 / 335;
}

.cl-roms-paper--1 {
  left: 25.76%;
  top: 44.48%;
  width: 73.03%;
  z-index: 0;
}

.cl-roms-photo--blue {
  left: 0;
  top: 0;
  width: 87.58%;
  z-index: 1;
}

.cl-roms-clip--1 {
  left: 73.6%;
  top: 35.5%;
  width: 26.4%;
  z-index: 2;
}

.cl-roms-polaroid--2 {
  left: 75.31%;
  bottom: -50px;
  width: 27.81%;
  aspect-ratio: 356 / 477;
}

.cl-roms-paper--2 {
  left: 0;
  top: 0;
  width: 67.7%;
  z-index: 0;
}

.cl-roms-photo--cream {
  left: 6.74%;
  top: 9.01%;
  width: 93.26%;
  z-index: 1;
}

.cl-roms-clip--2 {
  left: 52.53%;
  top: 1.68%;
  width: 25.28%;
  z-index: 2;
}

@media (max-width: 1023px) {
  .cl-roms-card {
    padding-top: 110px;
    padding-bottom: 130px;
  }

  .cl-roms-polaroid--1 {
    width: clamp(150px, 24vw, 330px);
    top: -40px;
  }

  .cl-roms-polaroid--2 {
    width: clamp(170px, 26vw, 356px);
    left: auto;
    right: -12px;
    bottom: -40px;
  }
}

@media (max-width: 767px) {
  .cl-roms {
    padding: 86.5vw 30px 64.5vw;
    background:
    url(../images/common/bg-flower-sp.webp) no-repeat top center / 100% auto,
    url(../images/common/bg-flower2-sp.webp) no-repeat top min(165vw, 660px) center / 100% auto;
  }

  .cl-roms-card {
    padding: 41.25vw 30px 88.75vw;
  }

  .cl-roms-inner {
    text-align: left;
  }

  .cl-roms-heading {
    font-size: 32px;
  }

  .cl-roms-polaroid--1 {
    width: 82.5vw;
    top: -56.5vw;
    left: calc(50% - 41.25vw);
  }

  .cl-roms-polaroid--2 {
    width: 80vw;
    right: calc(50% - 40vw);
    bottom: -34.5vw;
  }
}

/* =============================================
   COLLECTION PAGE — SEC 6: ロコッテのベルトをお手元に
============================================= */
.cl-toyou {
  background: #FFFFFF;
  padding: 180px 0 240px;
}

.cl-toyou-inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6.1vw, 88px);
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

.cl-toyou-text {
  max-width: 672px;
}

.cl-toyou-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}

.cl-toyou-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.106em;
  color: var(--red);
}

.cl-toyou-body {
  margin-top: 56px;
}

.cl-toyou-body p {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}

.cl-toyou-body p + p {
  margin-top: 24px;
}

.cl-toyou-body strong {
  font-weight: 500;
}

.cl-toyou-visual {
  flex-shrink: 0;
  width: clamp(280px, 25vw, 360px);
}

.cl-toyou-visual img {
  width: 100%;
  height: auto;
}

@media (max-width: 1023px) {
  .cl-toyou {
    padding: 120px 0 160px;
  }

  .cl-toyou-inner {
    flex-direction: column;
    align-items: center;
  }

  .cl-toyou-text {
    max-width: 640px;
  }

  .cl-toyou-visual {
    width: min(64vw, 360px);
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .cl-toyou {
    padding: 30vw 0;
  }

  .cl-toyou-inner {
    width: calc(100% - 80px);
  }

  .cl-toyou-heading {
    font-size: 32px;
  }

  .cl-toyou-body {
    margin-top: 40px;
  }

  .cl-toyou-visual {
    width: min(76vw, 320px);
  }
}


/* =============================================================================
   FIRST PAGE (下層) — 初めてのベルト交換 / First Step
   ※ hero は .cl-hero*、パンくずは .rm-breadcrumb、3STEPは .rm-flow-* を流用
============================================================================= */

/* ---- SEC HERO ---- (背景・花・見出しは .cl-hero*) */
.fs-hero-img {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: clamp(460px, 58.75vw, 846px);
}
.fs-hero-img img {
  width: 100%;
  height: auto;
}

/* ---- SEC 1: Message（方眼＋中央揃え） ---- */
.fs-intro {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    #FAF8F5;
  border-top: 16px solid var(--red);
  border-bottom: 16px solid var(--red);
  padding: 16px 0 clamp(96px, 12.5vw, 180px);
}
.fs-container {
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}
.fs-intro .rm-breadcrumb {
  padding-top: 16px;
}

/* 中央揃えメッセージ（Sec1・Sec4 共通） */
.fs-msg {
  max-width: 640px;
  margin: clamp(72px, 8.9vw, 128px) auto 0;
  text-align: center;
}
.fs-msg-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}
.fs-msg-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.108em;
  color: var(--red);
}
.fs-msg-body {
  margin-top: clamp(40px, 3.9vw, 56px);
}
.fs-msg-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.fs-msg-body p + p {
  margin-top: 32px;
}
.fs-msg-body strong {
  font-weight: 400;
}
@media (max-width: 767px) {
  .fs-intro .rm-breadcrumb {
    padding-top: 0;
  }
  .fs-msg {
    max-width: none;
    margin-top: 64px;
    text-align: left;
  }
  .fs-msg-heading {
    font-size: 32px;
  }
  .fs-msg-body {
    margin-top: 48px;
  }
  .fs-msg-body p {
    text-align: left;
  }
}

/* ---- SEC 2: 縦書き（腕元から始まる…） ---- */
.fs-taste {
  position: relative;
  z-index: 1;
  background: url(../images/roms-page/roms-cases-flowers.webp) no-repeat top center / cover fixed var(--bg-warm);
  padding: 0 0 325px;
}
.fs-taste-flowers {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px; /* ステージ(1440基準)を超えて縦に伸び、次セクションへはみ出すのを防ぐ */
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.fs-taste-stage {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  aspect-ratio: 1440 / 864;
}
.fs-taste-img {
  position: absolute;
  height: auto;
  z-index: 2;
}
.fs-taste-img--left  { left: 10.56%; top: 24.07%; width: 22.08%; }
.fs-taste-img--rtop  { left: 68.0%;  top: 9.26%;  width: 25.07%; }
/* 次セクションにまたがる写真（ステージ下端をはみ出す） */
.fs-taste-img--rbot  { left: 60.21%; top: 54.51%; width: 25.42%; z-index: 3; }

/* 縦書き見出し・サブ */
.fs-taste-heading {
  position: absolute;
  left: 50.9%;
  top: 25.8%;
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(21px, 2.08vw, 30px);
  line-height: 1.3;
  letter-spacing: 0.1em;
  color: var(--black);
}
.fs-taste-heading > span { display: block; }
.fs-taste-heading-a { font-weight: 400; }
.fs-taste-heading-b { font-weight: 300; }

.fs-taste-sub {
  position: absolute;
  left: 43.8%;
  top: 25.8%;
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(15px, 1.39vw, 20px);
  line-height: 1.25;
  letter-spacing: 0.08em;
  color: var(--black);
}
.fs-taste-sub > span { display: block; }
.fs-accent { color: var(--red); }

@media (max-width: 767px) {
  .fs-taste {
    background-image: none;
    padding-bottom: 0;
  }
}

/* ---- SEC 3: ベルト交換の流れ / Flow（赤背景・3STEP） ---- */
.fs-flow {
  position: relative;
  z-index: 0;
  background: #B72B2F;
  padding: clamp(88px, 12.5vw, 180px) 0 clamp(80px, 12.5vw, 180px);
}
.fs-flow-container {
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}
.fs-flow-top {
  display: flex;
  gap: clamp(32px, 3.96vw, 57px);
  align-items: flex-start;
}
.fs-flow-photo {
  flex: 0 0 clamp(300px, 34.4vw, 495px);
}
.fs-flow-photo img { width: 100%; height: auto; }
.fs-flow-intro { flex: 1 1 auto; min-width: 0; }
.fs-flow-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
  color: #fff;
}
.fs-flow-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.108em;
  color: #fff;
}
.fs-flow-lead { margin-top: clamp(36px, 3.9vw, 56px); }
.fs-flow-lead p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: #fff;
}
.fs-flow-lead p + p { margin-top: 24px; }

.fs-flow-card {
  margin-top: clamp(48px, 5.5vw, 80px);
  background: var(--bg-warm);
  padding: clamp(32px, 5.55vw, 80px);
}
.fs-flow-card-title {
  text-align: center;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(20px, 2.22vw, 32px);
  color: var(--red);
}
.fs-flow-card-inner {
  margin-top: clamp(32px, 3.3vw, 48px);
  display: flex;
  gap: clamp(24px, 2.78vw, 40px);
  align-items: flex-start;
}
.fs-flow-card-photos { flex: 0 0 clamp(240px, 34vw, 378px); }
.fs-flow-card-photos img { width: 100%; height: auto; }
.fs-flow-steps { flex: 1 1 auto; min-width: 0; margin-top: 0; }

@media (max-width: 767px) {
  .fs-flow-heading {
    font-size: 32px;
  }
  .fs-flow-card-title {
    font-size: clamp(24px, 2.22vw, 32px);
  }
}

/* ---- SEC 4: おうちでも、簡単に（白カード・左右はみ出し画像） ---- */
.fs-home {
  background: var(--bg-warm);
  padding: clamp(56px, 7vw, 100px) 0;
  overflow: hidden;
}
.fs-home-card {
  position: relative;
  width: min(100% - 40px, 1200px);
  margin: 0 auto;
  background: #fff;
  padding: clamp(56px, 6vw, 88px) clamp(24px, 5vw, 72px);
}
.fs-home-text {
  position: relative;
  z-index: 2;
  /* max-width: 640px; */
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.fs-home-belt {
  position: absolute;
  left: -4.83%;
  top: 6.5%;
  width: 25%;
  height: auto;
  z-index: 1;
}
.fs-home-illust {
  position: absolute;
  right: -1.67%;
  top: 58.9%;
  width: 23.33%;
  height: auto;
  /* z-index: 3; */
  z-index: 1;
}
/* リンク（赤・下線・中央） */
.fs-home-link {
  display: block;
  width: fit-content;
  margin: clamp(28px, 3vw, 40px) auto 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(238, 29, 35, 0.5);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.15em;
  color: var(--red);
}
.fs-home-link:hover { border-bottom-color: var(--red); }

@media (max-width: 767px) {
  .fs-home-link {
    width: auto;
    max-width: 254px;
  }
}

/* ---- SEC 5: 店舗で選ぶ楽しさ（左テキスト・右コラージュ） ---- */
.fs-store {
  background: #fff;
  padding: clamp(64px, 9vw, 130px) 0;
}
.fs-store-inner {
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 6.8vw, 88px);
}
.fs-store-text { flex: 1 1 590px; min-width: 0; }
.fs-store-body { margin-top: clamp(40px, 3.9vw, 56px); }
.fs-store-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.fs-store-body p + p { margin-top: 24px; }
.fs-store-body strong { font-weight: 400; }
.fs-store-img { flex: 0 0 clamp(300px, 30.7vw, 442px); align-self: flex-start; }

/* =========================== SP（≤767px） =========================== */
@media (max-width: 767px) {
  .fs-hero-img {
    right: auto;
    left: -12px;
    width: 174%;
    max-width: 846px;
  }

  .fs-taste-stage {
    aspect-ratio: auto;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: flex-start;
    gap: 24px;
    padding: 94.25vw 0 137vw;
    background:
    url(../images/common/bg-flower-sp.webp) no-repeat top center / 100% auto,
    url(../images/common/bg-flower2-sp.webp) no-repeat bottom 120.75vw center / 100% auto;
  }
  .fs-taste-heading {
    position: static;
    font-size: 24px;
    letter-spacing: 0.15em;
    min-height: 320px;
  }
  .fs-taste-sub {
    position: static;
    font-size: 16px;
    margin-top: 80px;
    letter-spacing: 0.1em;
    min-height: 320px;
  }
  .fs-taste-img--left  {
    left: 7.5vw;
    top: auto;
    bottom: 30vw;
    width: 49.5%;
  }
  .fs-taste-img--rtop {
    left: 9.75vw;
    top: 25vw;
    width: 57.5vw;
  }
  .fs-taste-img--rbot {
    left: auto;
    top: auto;
    right: 5.75vw;
    bottom: 81vw;
    width: 55vw;
    z-index: 1;
  }

  .fs-flow-top { flex-direction: column; gap: 32px; }
  .fs-flow-photo { flex-basis: auto; width: min(100%, 460px); }
  .fs-flow-card-inner { flex-direction: column; gap: 28px; }
  .fs-flow-card-photos { flex-basis: auto; width: min(100%, 420px); margin: 0 auto; }

  .fs-home {
    padding: 170px 30px 262px;
  }
  .fs-home-card {
    width: auto;
    padding: 100px 30px;
    margin-inline: 0;
  }
  .fs-home-belt {
    left: -60px;
    top: -130px;
    width: 200px;
  }
  .fs-home-illust {
    right: -30px;
    top: auto;
    bottom: -162px;
    width: 220px;
  }

  .fs-store {
    padding-block: 120px;
  }
  .fs-store-inner { flex-direction: column; gap: 40px; }
  .fs-store-inner.fs-store-inner-rev-sp { flex-direction: column-reverse;}
  .fs-store-img {
    flex-basis: auto;
    width: min(100%, 320px);
    margin: 0 auto;
    align-self: center;
    height: auto;
  }

  .fs-store-text { order: 1 }
}


/* =============================================================================
   BRAND STORY PAGE (下層) — ブランドストーリー / Brand Story
   ※ hero は .cl-hero*、パンくずは .rm-breadcrumb、赤背景は #B72B2F を流用。
     クラス接頭辞: bs-
============================================================================= */

/* ---- SEC 1: HERO ---- (背景・見出しは .cl-hero*。花配置とベルトのみ固有)
   Figma 1440×520 基準:
     flower-top    810×280 @ x674,y-91 (右上)
     flower-bottom 1505×331 @ x-34,y290 (下・全幅バンド)
     belt-s-img    466×363 @ x755,y79 (右・6本ベルト・縦中央) */
.bs-hero-flower--top {
  top: -17.5%;
  right: -3.06%;
  width: 56.25%;
}

.bs-hero-flower--bottom {
  bottom: -19.42%;
  left: -2.36%;
  width: 104.51%;
  max-width: none;
}

.bs-hero-belt {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 52.43%;
  width: clamp(300px, 32.36vw, 466px);
  transform: translateY(-50%);
}

.bs-hero-belt img {
  width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .cl-hero.bs-hero {
    padding-top: 180px;
    padding-bottom: 62px;
  }

  .bs-hero-flower--top {
    top: -140px;
    right: -378px;
    width: 810px;
    max-width: none;
  }

  .bs-hero-flower--bottom {
    bottom: -100px;
    left: -34px;
    width: 1505px;
    max-width: none;
  }

  .bs-hero-belt {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: min(64%, 420px);
    margin: 35px 30px 0 auto;
  }
}


/* ---- SEC 2: Wristwear with a wink ----
   赤背景 #B72B2F + 白方眼格子 + 上下16px赤ライン。
   左=写真/花/波線コラージュ(単一画像)、右=白テキスト。斜めの透かし文字を背後に。 */
.bs-wink {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(255, 255, 255, 0.085) 48px, rgba(255, 255, 255, 0.085) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(255, 255, 255, 0.085) 48px, rgba(255, 255, 255, 0.085) 49px),
    #B72B2F;
  border-top: 16px solid var(--red);
  border-bottom: 16px solid var(--red);
  padding: 16px 0 clamp(80px, 13.6vw, 164px);
}

/* 斜めの透かし（Everyday, softly reimagined.） */
.bs-wink-watermark {
  position: absolute;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1893px, 131.5%);
  max-width: none;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.bs-wink-container {
  position: relative;
  z-index: 1;
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

/* パンくず（赤背景なので白） */
.bs-breadcrumb-light li,
.bs-breadcrumb-light a {
  color: #fff;
}

.bs-wink-inner {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 5.55vw, 80px);
  margin-top: clamp(64px, 8.8vw, 127px);
}

.bs-wink-collage {
  flex: 0 0 clamp(300px, 32.85vw, 473px);
}
.bs-wink-collage img {
  width: 100%;
  height: auto;
}

.bs-wink-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 567px;
  margin-top: clamp(48px, 9.4vw, 136px);
}

.bs-wink-heading {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.26;
  color: #fff;
}

.bs-wink-sub {
  margin-top: 15px;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.108em;
  color: #fff;
}
.bs-wink-sub strong {
  font-weight: 500;
}

.bs-wink-body {
  margin-top: clamp(40px, 3.9vw, 56px);
}
.bs-wink-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: #fff;
}
.bs-wink-body p + p {
  margin-top: 32px;
}
.bs-wink-body strong {
  font-weight: 400;
}
.bs-wink-emph {
  font-size: 20px !important;
  font-weight: 400 !important;
}

@media (max-width: 1023px) {
  .bs-wink-inner {
    flex-direction: column;
    align-items: center;
  }
  .bs-wink-collage {
    flex-basis: auto;
    width: min(72%, 473px);
  }
  .bs-wink-text {
    margin-top: 48px;
    max-width: 640px;
  }
}

@media (max-width: 767px) {
  .bs-wink {
    border-top-width: 12px;
    border-bottom-width: 12px;
    padding-bottom: clamp(128px, 13.6vw, 164px);
  }
  .bs-wink-container {
    width: calc(100% - 80px);
  }
  .bs-wink-watermark {
    top: 72px;
    width: min(1893px, 200%);
  }
  .bs-wink-inner {
    margin-top: 95px;
    gap: 0;
  }
  .bs-wink-collage {
    width: min(100%, 320px);
  }
  .bs-wink-text {
    margin-top: 48px;
  }
}


/* =============================================================================
   STYLING PAGE (下層) — スタイリングについて
   ※ hero=.cl-hero* / パンくず=.rm-breadcrumb / Sec6=.fs-store* を流用
============================================================================= */

/* ---- HERO 画像（右・全高） ---- */
.st-hero-img {
  position: absolute;
  z-index: 1;
  left: 47.99%;
  top: 0;
  height: 100%;
}
.st-hero-img img { height: 100%; width: auto; display: block; }

/* ---- SEC1: 装いに、ひと粒の色を。 ---- */
.st-color {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238,29,35,0.08) 48px, rgba(238,29,35,0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238,29,35,0.08) 48px, rgba(238,29,35,0.08) 49px),
    #FAF8F5;
  border-top: 16px solid var(--red);
  border-bottom: 16px solid var(--red);
  padding: 16px 0 clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.st-container { width: min(100% - 80px, 1120px); margin: 0 auto; }
.st-color .rm-breadcrumb { padding-top: 16px; }

.st-color-inner {
  max-width: 888px;
  margin: clamp(64px, 8vw, 120px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(40px, 6.1vw, 88px);
}
.st-graph {
  flex: 0 0 clamp(240px, 24.3vw, 350px);
  text-align: center;
}
.st-donut {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#E4E2E0 0 34%, #B72B2F 34% 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.st-donut::before {
  content: "";
  position: absolute;
  inset: 18.7%;
  border-radius: 50%;
  background: #FAF8F5;
}
.st-donut-label {
  position: relative;
  z-index: 1;
  color: #B72B2F;
  display: flex;
  align-items: baseline;
  line-height: 1;
}
.st-donut-label .s { font-family: var(--font-jp); font-weight: 500; font-size: clamp(15px, 1.53vw, 22px); }
.st-donut-label .big { font-family: var(--font-en); font-weight: 500; font-size: clamp(34px, 3.6vw, 52px); letter-spacing: -0.02em; }
.st-graph-note {
  margin-top: 24px;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: clamp(12px, 0.97vw, 14px);
  line-height: 1.8;
  letter-spacing: 0.02em;
  color: var(--black);
}

.st-color-text { flex: 1 1 450px; min-width: 0; }
.st-color-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}
.st-color-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.108em;
  color: var(--red);
}
.st-color-body { margin-top: clamp(36px, 3.9vw, 56px); }
.st-color-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.st-color-body p + p { margin-top: 24px; }

/* ベルトのマーキー */
.st-scroller { overflow: hidden; margin-top: clamp(56px, 7vw, 100px); }
.st-scroller-track {
  display: flex;
  width: max-content;
  animation: st-marquee 55s linear infinite;
}
.st-scroller-track img { height: clamp(120px, 11.8vw, 170px); width: auto; display: block; }
@keyframes st-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .st-scroller-track { animation: none; } }

@media (max-width: 767px) {
  .st-color .rm-breadcrumb { padding-top: 0; }
  .st-color-heading {
    font-size: 32px;
  }
}

/* ---- スタイリング紹介：背景ゾーン ---- */
.st-scenes { position: relative; padding: clamp(80px, 12.5vw, 180px) 0; }
.st-scenes--red { background: #B72B2F; }
/* Scene 03/04 ゾーン：花背景をビューポートに固定（フルスクリーン・パララックス）。
   background-attachment:fixed で画面に固定し、cover で横幅・縦ともいっぱいに。
   背景はこのセクションの箱の中だけに描画されるので、Scene03/04 の間だけ表示される。 */
.st-scenes--warm {
  background-color: var(--bg-warm);
  background-image: url("../images/common/bg-flower-transparent.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
.st-scenes--grid {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238,29,35,0.08) 48px, rgba(238,29,35,0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238,29,35,0.08) 48px, rgba(238,29,35,0.08) 49px),
    #FBF9F6;
}
.st-scenes-flowers {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1440px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.st-scenes-heading {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
  margin-bottom: clamp(48px, 7vw, 100px);
}
.st-scenes-heading span {
  display: block;
  margin-top: 12px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.108em;
}

/* ---- シーン共通（1040 基準の絶対配置ステージ / cqw） ---- */
.st-scene {
  position: relative;
  z-index: 1;
  container-type: inline-size;
  width: min(100% - 80px, 1040px);
  margin: 0 auto;
}
.st-scene + .st-scene { margin-top: clamp(80px, 12.5vw, 180px); }

.st-sc-img { position: absolute; height: auto; }
.st-sc-deco { z-index: 1; }
.st-sc-p1 { z-index: 2; }
.st-sc-p2 { z-index: 2; }
.st-sc-wrist { z-index: 4; }

/* テキストカード */
.st-sc-textcard {
  position: absolute;
  left: 44.33%;
  width: 55.67%;
  z-index: 3;
  padding: 7.7cqw;
}
.st-sc-textcard--plain { background: #FAF8F5; }
.st-sc-textcard--white { background: #fff; }
.st-sc-textcard--grid {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 4.6cqw, rgba(238,29,35,0.08) 4.6cqw, rgba(238,29,35,0.08) 4.7cqw),
    repeating-linear-gradient(90deg, transparent, transparent 4.6cqw, rgba(238,29,35,0.08) 4.6cqw, rgba(238,29,35,0.08) 4.7cqw),
    #FAF8F5;
}
.st-sc-scene {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 3.08cqw;
  line-height: 1.25;
  color: var(--red);
}
.st-sc-sub {
  position: relative;
  margin-top: 3.08cqw;
  padding-left: 1.54cqw;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1.92cqw;
  line-height: 1.3;
  color: var(--red);
}
.st-sc-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 0.38cqw;
  background: var(--red);
}
.st-sc-body { margin-top: 2.3cqw; }
.st-sc-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.54cqw;
  line-height: 1.625;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.st-sc-body p + p { margin-top: 0.77cqw; }

/* 使用ベルトカード */
.st-sc-beltcard {
  position: absolute;
  left: 0;
  width: 55.67%;
  z-index: 3;
  padding: 7.7cqw;
}
.st-sc-beltcard--plain { background: #FAF8F5; }
.st-sc-beltcard--white { background: #fff; }
.st-sc-beltcard--grid {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 4.6cqw, rgba(238,29,35,0.08) 4.6cqw, rgba(238,29,35,0.08) 4.7cqw),
    repeating-linear-gradient(90deg, transparent, transparent 4.6cqw, rgba(238,29,35,0.08) 4.6cqw, rgba(238,29,35,0.08) 4.7cqw),
    #FAF8F5;
}
.st-sc-belt-label {
  position: relative;
  padding-left: 1.54cqw;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1.92cqw;
  line-height: 1.3;
  color: var(--red);
}
.st-sc-belt-label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 0.38cqw;
  background: var(--red);
}
.st-sc-belt-item {
  margin-top: 2.3cqw;
  display: flex;
  gap: 1.7cqw;
  align-items: flex-start;
}
.st-sc-belt-img { flex: 0 0 15.4cqw; width: 15.4cqw; height: auto; }
.st-sc-belt-info { flex: 1 1 auto; min-width: 0; }
.st-sc-belt-name {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.54cqw;
  line-height: 1.625;
  color: var(--black);
}
.st-sc-belt-name--2 { margin-top: 2cqw; }
.st-sc-belt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.5cqw;
  padding: 1cqw 2cqw;
  background: var(--red);
  color: #fff;
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: 1.35cqw;
  letter-spacing: 0.05em;
  border-radius: 2px;
  transition: opacity 0.25s;
}
.st-sc-belt-btn:hover { opacity: 0.85; }

@media (min-width: 768px) {
  /* シーン別 配置・アスペクト比 */
  .st-scene--1 { aspect-ratio: 1040 / 1340; }
  .st-scene--1 .st-sc-deco  { left: 11.06%; top: 32.39%; width: 31.56%; }
  .st-scene--1 .st-sc-p1    { left: 0;      top: 0;      width: 37.12%; }
  .st-scene--1 .st-sc-p2    { left: 17.79%; top: 34.40%; width: 32.99%; }
  .st-scene--1 .st-sc-wrist { left: 63.37%; top: 52.69%; width: 31.73%; }
  .st-scene--1 .st-sc-textcard { top: 10.45%; }
  .st-scene--1 .st-sc-beltcard { top: 72.39%; }
  
  .st-scene--2 { aspect-ratio: 1040 / 1348; }
  .st-scene--2 .st-sc-deco  { left: 11.06%; top: 32.79%; width: 31.56%; }
  .st-scene--2 .st-sc-p1    { left: 2.69%;  top: 0;      width: 40.37%; }
  .st-scene--2 .st-sc-p2    { left: 17.79%; top: 34.79%; width: 32.99%; }
  .st-scene--2 .st-sc-wrist { left: 59.52%; top: 50.45%; width: 39.23%; }
  .st-scene--2 .st-sc-textcard { top: 10.39%; }
  .st-scene--2 .st-sc-beltcard { top: 72.55%; }
  
  .st-scene--3 { aspect-ratio: 1040 / 1340; }
  .st-scene--3 .st-sc-deco  { left: 11.06%; top: 32.39%; width: 31.56%; }
  .st-scene--3 .st-sc-p1    { left: 2.69%;  top: 0;      width: 36.73%; }
  .st-scene--3 .st-sc-p2    { left: 17.69%; top: 34.40%; width: 32.99%; }
  .st-scene--3 .st-sc-wrist { left: 62.88%; top: 52.69%; width: 32.40%; }
  .st-scene--3 .st-sc-textcard { top: 10.45%; }
  .st-scene--3 .st-sc-beltcard { top: 72.39%; }
  
  .st-scene--4 { aspect-ratio: 1040 / 1211; }
  .st-scene--4 .st-sc-deco  { left: 8.17%;  top: 25.76%; width: 31.56%; }
  .st-scene--4 .st-sc-p1    { left: 2.69%;  top: 0;      width: 34.52%; }
  .st-scene--4 .st-sc-wrist { left: 60.48%; top: 59.62%; width: 37.31%; }
  .st-scene--4 .st-sc-textcard { top: 11.56%; }
  .st-scene--4 .st-sc-beltcard { top: 58.30%; }
  
  .st-scene--5 { aspect-ratio: 1040 / 1212; }
  .st-scene--5 .st-sc-deco  { left: 11.06%; top: 23.43%; width: 31.56%; }
  .st-scene--5 .st-sc-p1    { left: 2.69%;  top: 0;      width: 41.30%; }
  .st-scene--5 .st-sc-wrist { left: 63.08%; top: 63.53%; width: 31.63%; }
  .st-scene--5 .st-sc-textcard { top: 11.55%; }
  .st-scene--5 .st-sc-beltcard { top: 61.55%; }
}

/* =========================== SP（≤767px） =========================== */
@media (max-width: 767px) {

  .st-scenes {
    padding-block: 120px;
  }

  .st-scenes-heading {
    font-size: 32px;
  }

  .st-hero-img {
    left: auto;
    right: 0;
    top: auto;
    bottom: 0;
    height: auto;
    width: min(79%, 316px);
  }
  .st-hero-img img { height: auto; width: 100%; }

  .st-container {
    width: auto;
    margin-inline: 40px;
  }
  .st-color-inner {
    flex-direction: column;
    gap: 40px;
    margin-top: 56px;
  }
  .st-graph {
    flex-basis: auto;
    width: 100%;
    order: 1;
    text-align: left;
  }

  .st-donut {
    width: 280px;
    max-width: 100%;
    margin-inline: auto;
  }
  .st-donut-label .s {
    font-size: 33px;
  }
  .st-donut-label .big {
    font-size: 62px;
    letter-spacing: 0em;
  }
  .st-graph-note {
    margin-top: 32px;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.04286em;
  }

  .st-color-text {
    flex-basis: auto;
  }

  .st-scene {
    container-type: normal;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 40px);
  }

  .st-sc-img,
  .st-sc-textcard,
  .st-sc-beltcard {
    position: relative;
    width: 100%;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 0;
  }
  .st-sc-img {
    max-width: 100%;
  }
  .st-sc-textcard,
  .st-sc-beltcard {
    max-width: calc(100% - 40px);
  }

  .st-sc-img.st-sc-deco { 
    position: absolute;
    z-index: 0;
    top: 408px;
    left: 0;
    max-width: 320px;
  }
  .st-sc-img.st-sc-p1 {
    order: 1;
    max-width: 336px;
    margin-right: auto;
    margin-bottom: -62px;
  }
  .st-sc-img.st-sc-p2 {
    order: 2;
    z-index: 1;
    max-width: 290px;
    margin-left: auto;
    margin-bottom: -20px;
  }
  .st-sc-img.st-sc-wrist {
    order: 4;
    max-width: 270px;
    margin-inline: auto;
  }
  .st-sc-textcard {
    order: 3;
    padding: 32px 24px;
    margin-bottom: 32px;
  }
  .st-sc-beltcard {
    order: 5;
    padding: 32px 24px;
    margin-top: 32px;
  }

  .st-sc-scene {
    font-size: 32px;
  }
  .st-sc-sub {
    font-size: 20px;
    padding-left: 16px;
    margin-top: 32px;
  }
  .st-sc-sub::before {
    width: 3px;
    top: 0;
    bottom: 0;
  }
  .st-sc-body {
    margin-top: 24px;
  }
  .st-sc-body p {
    font-size: 16px;
  }
  .st-sc-belt-label {
    font-size: 20px;
    padding-left: 16px;
  }
  .st-sc-belt-label::before {
    width: 3px;
    top: 0;
    bottom: 0;
  }
  .st-sc-belt-item {
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
    margin-top: 24px;
  }
  .st-sc-belt-img {
    flex-basis: 160px;
    width: 160px;
  }
  .st-sc-belt-name {
    font-size: 16px;
  }
  .st-sc-belt-btn {
    font-size: 14px;
    padding: 11px 32px;
    margin-top: 16px;
    border-radius: 21px;
  }
  .st-scenes-heading span { font-size: 15px; }

  /* SP: fixed 背景は iOS で不安定なので解除し、花 img を上部表示に戻す */
  .st-scenes--warm {
    background-image: none;
    background-attachment: scroll;
  }
  .st-scenes--warm .st-scenes-flowers { display: block; }

    /* シーン別 配置 */
  .st-scene--1 {}
  .st-scene--1 .st-sc-img.st-sc-deco  {}
  .st-scene--1 .st-sc-img.st-sc-p1    {}
  .st-scene--1 .st-sc-img.st-sc-p2    {}
  .st-scene--1 .st-sc-img.st-sc-wrist {}
  .st-scene--1 .st-sc-textcard {}
  .st-scene--1 .st-sc-beltcard {}
  
  .st-scene--2 {}
  .st-scene--2 .st-sc-img.st-sc-deco  {
    top: 205px;
  }
  .st-scene--2 .st-sc-img.st-sc-p1    {}
  .st-scene--2 .st-sc-img.st-sc-p2    {}
  .st-scene--2 .st-sc-img.st-sc-wrist {
    max-width: 338px;
  }
  .st-scene--2 .st-sc-textcard {}
  .st-scene--2 .st-sc-beltcard {}
  
  .st-scene--3 {}
  .st-scene--3 .st-sc-img.st-sc-deco  {}
  .st-scene--3 .st-sc-img.st-sc-p1    {}
  .st-scene--3 .st-sc-img.st-sc-p2    {}
  .st-scene--3 .st-sc-img.st-sc-wrist {}
  .st-scene--3 .st-sc-textcard {}
  .st-scene--3 .st-sc-beltcard {}
  
  .st-scene--4 {}
  .st-scene--4 .st-sc-img.st-sc-deco  {
    top: 288px;
  }
  .st-scene--4 .st-sc-img.st-sc-p1    {
    margin-bottom: 86px;
  }
  .st-scene--4 .st-sc-img.st-sc-wrist {
    max-width: 338px;
  }
  .st-scene--4 .st-sc-textcard {}
  .st-scene--4 .st-sc-beltcard {}
  
  .st-scene--5 {}
  .st-scene--5 .st-sc-img.st-sc-deco  {
    top: 135px;
    left: auto;
    right: 0;
  }
  .st-scene--5 .st-sc-img.st-sc-p1    {
    max-width: 360px;
    margin-bottom: 32px;
  }
  .st-scene--5 .st-sc-img.st-sc-wrist {}
  .st-scene--5 .st-sc-textcard {}
  .st-scene--5 .st-sc-beltcard {}
}

/* ---- SEC 3: ロコッテの歩み / History（縦書き editorial）----
   Figma 1440×2032 基準の絶対配置ステージ。フォントは cqw でステージ幅に連動させ、
   縦書きテキストが常に収まるようにする。花枠は roms-cases-flowers を流用。 */
/* 花背景をビューポートに固定（フルスクリーン・パララックス）。
   styling ページ Scene03/04 (.st-scenes--warm) と同じ方式。
   background-attachment:fixed で画面に固定し、cover で画面いっぱいに。
   背景はこのセクションの箱の中だけに描画される。 */
.bs-history {
  position: relative;
  overflow: hidden;
  background-color: var(--bg-warm);
  background-image: url("../images/roms-page/roms-cases-flowers.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
/* PCは固定背景を使うので、上部の花 img は非表示 */
.bs-history .bs-history-flowers { display: none; }

.bs-history-stage {
  container-type: inline-size;
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  aspect-ratio: 1440 / 2032;
}

/* 花枠 img（SP用フォールバック。PCは固定背景を使うため非表示） */
.bs-history-flowers {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 白カード（Figma Rectangle 220 / x120 y200 1200×1592） */
.bs-history-card {
  position: absolute;
  z-index: 1;
  left: 8.333%;
  top: 9.843%;
  width: 83.333%;
  height: 78.346%;
  background: #fff;
}

/* 左右の写真クラスタ（赤い糸込みの合成画像） */
.bs-history-left,
.bs-history-right {
  position: absolute;
  z-index: 2;
  height: auto;
}
.bs-history-left {
  left: 5.9%;
  top: 7.87%;
  width: 34.24%;
}
.bs-history-right {
  left: 67.5%;
  top: 35.68%;
  width: 29.4%;
}

/* 見出し（ロコッテの歩み ＋ History） */
.bs-history-heading {
  position: absolute;
  z-index: 2;
  top: 13.78%;
  right: 20.14%;
  display: flex;
  align-items: flex-start;
  gap: 0.4cqw;
}
.bs-history-title {
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: 2.778cqw;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: var(--red);
}
.bs-history-label {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 1.111cqw;
  letter-spacing: 0.08em;
  color: var(--red);
  margin-top: 0.3cqw;
}

/* 縦書き本文ブロック（右端＋上端で配置、左へ流れる） */
.bs-history-txt {
  position: absolute;
  z-index: 2;
  writing-mode: vertical-rl;
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 1.111cqw;
  line-height: 1.625;
  letter-spacing: 0.16em;
  color: var(--black);
}
.bs-history-txt p {
  font-weight: 300;
}
.bs-history-txt p + p {
  margin-block-start: 0.9em;
}
.bs-history-strong {
  font-weight: 400 !important;
}

.bs-history-txt1 {
  top: 13.78%;
  right: 29.86%;
  height: 21.46%;
}
.bs-history-txt2 {
  top: 39.17%;
  right: 33.47%;
  height: 22.44%;
}
.bs-history-txt3 {
  top: 65.55%;
  right: 39.17%;
  height: 18.7%;
}

/* SP: 固定背景は iOS で不安定なので解除し、花 img を表示に戻す
   （st-scenes--warm と同じ扱い。SEC3 の SP 縦積みレイアウトは別途作り込み予定） */
@media (max-width: 767px) {
  /* .bs-history {
    background-image: none;
    background-attachment: scroll;
  }
  .bs-history .bs-history-flowers { display: block; } */


  .bs-history {
    background: url(../images/common/bg-flower-sp.webp) no-repeat top left / 100% auto var(--bg-warm);
  }
  /* PCは固定背景を使うので、上部の花 img は非表示 */
  /* .bs-history .bs-history-flowers { display: none; } */

  .bs-history-stage {
    width: auto;
    aspect-ratio: auto;
    padding: 140px 30px;
    margin: 212px 30px 184px;
    background: #fff;
    text-shadow: 1px 1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, -1px -1px 1px #fff;
  }

  /* 見出し（ロコッテの歩み ＋ History） */
  .bs-history-heading {
    position: static;
    justify-content: flex-end;
    gap: 16px;
  }
  .bs-history-title {
    font-weight: 400;
    font-size: 32px;
    line-height: 1;
    letter-spacing: 0;
  }
  .bs-history-label {
    text-orientation: sideways;
    font-size: 16px;
    letter-spacing: 0.01em;
    margin-top: 0;
  }

  /* 縦書き本文ブロック（右端＋上端で配置、左へ流れる） */
  .bs-history-txt {
    position: static;
    width: 100%;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0;
  }
  .bs-history-txt p {
    font-weight: 300;
    letter-spacing: 3px;
  }
  .bs-history-txt p + p {
    margin-block-start: 0.9em;
  }
  .bs-history-large {
    font-size: 20px;
  }

  .bs-history-txt-block {
    display: block;
    min-height: 450px;
  }
  .bs-history-txt-block.bs-history-txt-block--1 {
    display: flex;
    flex-direction: row-reverse;
    min-height: calc(428px + 40px);
  }
  .bs-history-txt-block.bs-history-txt-block--2 {
    min-height: calc(436px + 40px);
  }
  .bs-history-txt-block.bs-history-txt-block--3 {
    min-height: calc(456px + 40px);
  }
  .bs-history-txt-block.bs-history-txt-block--4 {
    min-height: calc(399px + 40px);
  }
  .bs-history-txt-block.bs-history-txt-block--5 {
    min-height: calc(323px + 0px);
  }

  .bs-history-txt[data-index] {
    display: flex;
    flex-direction: row-reverse;
    width: auto;
    font-size: 16px;
    line-height: calc(26 / 16);
    writing-mode: initial;
  }
  .bs-history-txt[data-index] p {
    writing-mode: vertical-rl;
  }
  .bs-history-txt[data-index] p + p {
    margin-right: 1em;
  }
  .bs-history-txt[data-index="1"] {
    margin-right: 43px;
  }
  .bs-history-txt[data-index="2"] {
    justify-content: flex-end;
  }
  .bs-history-txt[data-index="3"] {
    letter-spacing: .01em;
  }
  .bs-history-txt[data-index="4"] {
    justify-content: center;
  }
  .bs-history-txt[data-index="5"] {
    justify-content: center;
  }

  .bs-history-left-sp {
    position: absolute;
    top: -92px;
    left: -30px;
    width: 282px;
  }
  .bs-history-right-sp {
    position: absolute;
    top: 476px;
    right: -30px;
    width: 142px;
  }
  .bs-history-bottom-sp {
    position: absolute;
    right: -30px;
    bottom: -64px;
    width: 240px;
  }
}

/* ---- SEC 4: 豊富なラインナップ / Lineup ----
   白背景 + 赤方眼格子。上=左ベルト画像/右テキスト、右上=カラーベルト円弧、
   中下=Kitchen|Atelier のベン図（赤枠楕円2つ重ね）、下=マーキー。 */
.bs-lineup {
  position: relative;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(238, 29, 35, 0.08) 48px, rgba(238, 29, 35, 0.08) 49px),
    #FFFFFF;
  padding: clamp(96px, 13.9vw, 200px) 0 clamp(48px, 5vw, 64px);
}

.bs-lineup-inner {
  position: relative;
  width: min(100% - 80px, 1120px);
  margin: 0 auto;
}

/* カラーベルトの円弧（右上・上端はみ出し） */
.bs-lineup-arc {
  position: absolute;
  z-index: 1;
  top: clamp(-176px, -13vw, -132px);
  right: -12.6%;
  width: clamp(210px, 21.7vw, 313px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* 上段：2カラム */
.bs-lineup-top {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 5vw, 72px);
}

.bs-lineup-carousel {
  position: relative;
  flex: 0 0 clamp(320px, 33vw, 475px);
  aspect-ratio: 475 / 554;
}
.bs-lineup-carousel img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: 1s opacity;
}
.bs-lineup-carousel img.is-active {
  opacity: 1;
}
.bs-lineup-dots {
  position: absolute;
  top: calc(100% + 26px);
  left: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
.bs-lineup-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #E0D8CF;
  cursor: pointer;
}
.bs-lineup-dots span.is-active {
  background: var(--red);
}

.bs-lineup-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 573px;
}
.bs-lineup-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}
.bs-lineup-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.108em;
  color: var(--red);
}
.bs-lineup-body {
  margin-top: clamp(40px, 3.9vw, 56px);
}
.bs-lineup-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.bs-lineup-body p + p {
  margin-top: 32px;
}
.bs-lineup-body strong {
  font-weight: 400;
}

/* ベン図（Kitchen | Atelier、赤枠楕円2つ重ね） */
.bs-lineup-venn {
  position: relative;
  width: min(100%, 1040px);
  height: clamp(220px, 19.17vw, 276px);
  margin: clamp(80px, 8.3vw, 120px) auto 0;
}
.bs-venn-cell {
  position: absolute;
  top: 0;
  height: 100%;
  width: 53.846%;
  border: 1px solid var(--red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bs-venn-cell--kitchen { left: 0; }
.bs-venn-cell--atelier { right: 0; }
.bs-venn-inner {
  position: relative;
  z-index: 1;
}
.bs-venn-title {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(30px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}
.bs-venn-sub {
  margin-top: 16px;
  font-family: var(--font-jp);
  font-weight: 400;
  font-size: clamp(13px, 1.11vw, 16px);
  line-height: 1.5;
  color: var(--red);
}

/* マーキー（Designing the joy of every today.） */
.bs-lineup-marquee {
  margin-top: clamp(40px, 3.5vw, 48px);
  width: 100%;
  overflow: hidden;
}
.bs-lineup-marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
  animation: bs-marquee 36s linear infinite;
}
.bs-lineup-marquee-track span {
  font-family: var(--font-en);
  font-weight: 100;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--red);
  padding-right: 0.6em;
}
@keyframes bs-marquee {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bs-lineup-marquee-track { animation: none; }
}

@media (max-width: 1023px) {
  .bs-lineup-top {
    flex-direction: column;
    align-items: center;
  }
  .bs-lineup-carousel {
    flex-basis: auto;
    width: min(72%, 475px);
  }
  .bs-lineup-text {
    max-width: 640px;
    margin-top: 48px;
  }
  .bs-lineup-arc {
    top: clamp(-120px, -11vw, -80px);
    right: -4%;
  }
}

@media (max-width: 767px) {
  .bs-lineup {
    overflow: visible;
    overflow-x: clip;
    padding-top: 124px;
    padding-bottom: 76px;
  }
  .bs-lineup-inner {
    width: calc(100% - 80px);
  }
  .bs-lineup-text {
    margin-top: 0;
  }
  .bs-lineup-carousel {
    order: 1;
    width: 100%;
    max-width: 475px;
  }
  .bs-lineup-body {
    margin-top: 40px;
  }
  /* ベン図：縦積み（Kitchen上・Atelier下） */
  .bs-lineup-venn {
    height: auto;
  }
  .bs-venn-cell {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    height: clamp(200px, 56vw, 240px);
    border-radius: 120px;
  }
  .bs-venn-cell--atelier {
    margin-top: -34px;
  }
  .bs-lineup-arc {
    width: 193px;
    top: -210px;
    right: -40px;
    z-index: 10;
  }
  .bs-lineup-marquee-track span {
    font-size: 40px;
  }
}


/* ---- SEC 5: 色づくりへのこだわり / Kitchen ----
   暖色背景 + 白カード + 中央揃えテキスト。傾いたイラスト2枚が角からはみ出す。 */
.bs-kitchen {
  position: relative;
  background: var(--bg-warm);
  padding: clamp(80px, 12.4vw, 120px) 0;
}

.bs-kitchen-card {
  position: relative;
  width: min(100% - 80px, 1280px);
  margin: 0 auto;
  background: #fff;
  padding: clamp(64px, 9vw, 100px) clamp(24px, 5vw, 72px);
}

.bs-kitchen-illust {
  position: absolute;
  z-index: 2;
  height: auto;
}
.bs-kitchen-illust--tr {
  top: clamp(-24px, -2vw, -20px);
  right: clamp(-44px, -3.3vw, -30px);
  width: clamp(220px, 25.07vw, 361px);
}
.bs-kitchen-illust--bl {
  bottom: clamp(-44px, -3.5vw, -30px);
  left: clamp(-44px, -3.3vw, -30px);
  width: clamp(220px, 25.28vw, 364px);
}

.bs-kitchen-text {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}
.bs-kitchen-heading {
  font-family: var(--font-jp);
  font-weight: 500;
  font-size: clamp(28px, 2.78vw, 40px);
  line-height: 1.2;
  color: var(--red);
}
.bs-kitchen-tag {
  margin-top: 15px;
  font-family: var(--font-en);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: 0.108em;
  color: var(--red);
}
.bs-kitchen-body {
  margin-top: clamp(40px, 3.9vw, 56px);
}
.bs-kitchen-body p {
  font-family: var(--font-jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: 0.0375em;
  color: var(--black);
}
.bs-kitchen-body p + p {
  margin-top: 24px;
}
.bs-kitchen-body strong {
  font-weight: 400;
}

@media (max-width: 767px) {
  .bs-kitchen {
    padding-top: 275px;
    padding-bottom: 281px;
  }
  .bs-kitchen-card {
    width: calc(100% - 60px);
    padding: 166px 30px;
  }
  .bs-kitchen-illust--tr {
    top: -155px;
    right: calc(50% - 160px);
    width: 320px;
  }
  .bs-kitchen-illust--bl {
    bottom: -160px;
    left: calc(50% - 160px);
    width: 320px;
  }
  .bs-kitchen-text {
    text-align: left;
  }
  .bs-kitchen-heading {
    font-size: 32px;
  }
}


/* ---- SEC 6: ものづくりへのこだわり / Atelier ----
   .fs-store*（左テキスト＋右コラージュ）を流用。見出しのみ太字(700)が固有。 */
.bs-atelier-heading {
  font-weight: 700;
}
@media (max-width: 767px) {
  .bs-atelier-heading {
    font-size: 32px;
  }
}

/* ============================================================
Helper Class
============================================================ */

.tcu-all {
  text-combine-upright: all;
}

@media (max-width: 767px) {
  .pc-show {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .sp-show {
    display: none !important;
  }
}