/* ============================================================
   Rafale Holdings ― BUSINESS 04 / STORE DEVELOPMENT
   ------------------------------------------------------------
   読み込み順は
     css/style.css → css/business-detail.css → css/store-development.css
   で、このファイルは「差分だけ」です。

   HEROの組み方、Rの置き方、料金カード、FAQ、CONTACT は
   WEB PRODUCTION / MARKETING と同じCSSをそのまま使うので、
   3ページのデザインは必ず揃います。style.css と business-detail.css は
   書き換えていません。

   スクロール性能について:
   ここで足しているのは静的な余白・文字・罫線の指定だけです。
   常時まわるアニメーション、filter / backdrop-filter、will-change、
   JavaScript は1つも追加していません。
   ============================================================ */

/* ------------------------------------------------------------
   セクションの光（このページで新しく増える2つだけ）
   動きは既存のキーフレームを使い回している。
   ------------------------------------------------------------ */
#flow::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(52% 40% at 74% 24%, rgba(228, 236, 244, 0.58), rgba(228,236,244,0) 74%), radial-gradient(44% 34% at 16% 72%, rgba(250, 247, 242, 0.56), rgba(250,247,242,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightBiz 27s ease-in-out infinite;
}
#related::before {
  /* 下の1枚は、このグラデーションをそのままブラウザに描かせて焼いた画像です。
     スクロール中に毎回グラデーションを計算し直すのがいちばん重かったため
     （iPhone想定の計測で描画時間の約1/3がここでした）、絵に置き換えています。
     作り直すときは、この元データを 72x72 で描いて撮り直してください:
     radial-gradient(50% 38% at 22% 22%, rgba(250, 246, 240, 0.62), rgba(250,246,240,0) 74%), radial-gradient(44% 34% at 80% 62%, rgba(226, 238, 246, 0.44), rgba(226,238,246,0) 76%) */
  background-image: url(data:image/webp;base64,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);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  animation: lightComp 26s ease-in-out infinite;
}

/* ------------------------------------------------------------
   HERO
   見出しが2行（STORE / DEVELOPMENT）で、他の2ページより横に長い。
   さらに施工についての但し書きが1行入るので、
   文字側を広く・Rをやや小さくして釣り合いを取っている。
   （Rのデザインそのものは変えていない）
   ------------------------------------------------------------ */
.sd-page .bd-hero-grid {
  grid-template-columns: minmax(0, 1fr) clamp(200px, 25vw, 340px);
  gap: clamp(28px, 4vw, 64px);
}
/* DEVELOPMENT は PRODUCTION より1文字長いぶん、上限をわずかに下げる */
.sd-page .bd-hero-title { font-size: clamp(2.5rem, 5.9vw, 4.9rem); }

/* 施工についての但し書き。説明文の一段下に、色を落として置く。 */
.sd-hero-note {
  margin-top: clamp(12px, 1.6vh, 18px);
  padding-left: 15px;
  border-left: 1px solid rgba(170, 138, 86, 0.4);
  font-size: clamp(0.85rem, 1.4vw, 0.92rem);
  line-height: 1.95; letter-spacing: 0.03em; color: var(--label);
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-out) 3.05s forwards;
}

/* ------------------------------------------------------------
   注記（SERVICES の中と、セクション末尾で使う）
   ------------------------------------------------------------ */
.sd-note {
  max-width: 740px;
  margin-top: clamp(12px, 1.6vh, 18px);
  padding-left: 16px;
  border-left: 1px solid rgba(170, 138, 86, 0.35);
  font-size: clamp(0.85rem, 1.4vw, 0.92rem);
  line-height: 2.0; letter-spacing: 0.03em; color: var(--label);
}
/* SERVICES の行の中では、番号→事業名→説明と同じ流れで現れる */
.biz-row .sd-note {
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  transition-property: opacity, transform, filter;
  transition-duration: 0.85s, 0.85s, 0.85s;
  transition-timing-function: var(--ease-out);
}
.biz-row.is-visible .sd-note {
  opacity: 1; transform: none; filter: blur(0); transition-delay: 0.28s;
}
.biz-row:hover .sd-note { transform: translateX(6px); transition-delay: 0s; }

/* セクションの締めに単独で置くとき */
.sd-note--block { margin-top: clamp(34px, 4.6vh, 52px); max-width: 820px; }

/* ------------------------------------------------------------
   PRODUCE FLOW
   縦一本の細い罫線に、段階ごとの点を打つ。
   図面や3Dは使わず、既存の「罫線と余白」だけで流れを見せる。
   担当（Rafale / 提携施工会社）を右に置き、役割の境目が読めるようにする。
   ------------------------------------------------------------ */
.sd-flow { display: grid; }

.sd-step {
  position: relative;
  display: grid;
  grid-template-columns: clamp(46px, 4.6vw, 66px) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: clamp(14px, 2vw, 30px);
  padding: clamp(20px, 2.6vh, 28px) 0 clamp(20px, 2.6vh, 28px) clamp(20px, 2.6vw, 32px);
}
/* 縦の罫線。行ごとに引いているので、続けて並ぶと1本に見える */
.sd-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: rgba(30, 50, 70, 0.12);
}
.sd-step:first-child::before { top: 50%; }
.sd-step:last-child::before  { bottom: 50%; }
/* 段階の点 */
.sd-step::after {
  content: ""; position: absolute; left: -3px; top: calc(clamp(20px, 2.6vh, 28px) + 0.55em);
  width: 7px; height: 7px; border-radius: 50%;
  background: #C3AA79;
}
/* 施工の段は、担当が変わることが分かるように点を白抜きにする */
.sd-step--partner::after { background: var(--paper); box-shadow: inset 0 0 0 1px #A9906A; }

.sd-step-num {
  font-family: var(--font-en); font-weight: 400;
  font-size: clamp(0.82rem, 1.3vw, 0.92rem);
  letter-spacing: 0.16em; color: #8A6A3C; opacity: 0.85;
}
.sd-step-body { display: block; }
.sd-step-en {
  display: block;
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(0.8rem, 1.2vw, 0.88rem);
  line-height: 1.6; letter-spacing: 0.12em; color: var(--ink);
}
.sd-step-jp {
  display: block; margin-top: 7px;
  font-size: clamp(0.92rem, 1.5vw, 1rem);
  line-height: 1.8; letter-spacing: 0.05em; color: var(--sub);
}
.sd-step-role {
  justify-self: end; text-align: right;
  font-size: 0.78rem; line-height: 1.8; letter-spacing: 0.06em; color: var(--label);
  white-space: nowrap;
}
.sd-step--partner .sd-step-role { color: #8A6A3C; }

/* ------------------------------------------------------------
   PLAN の注記（3行）
   ------------------------------------------------------------ */
.sd-plan-notes {
  margin-top: clamp(28px, 4vh, 44px);
  display: grid; gap: 6px;
  font-size: 0.86rem; line-height: 2; letter-spacing: 0.04em; color: var(--label);
}

/* ------------------------------------------------------------
   RELATED SERVICES
   ------------------------------------------------------------ */
.sd-related {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.sd-related-item {
  display: flex; flex-direction: column; align-items: flex-start;
  padding-top: clamp(20px, 2.6vh, 28px);
  border-top: 1px solid rgba(30, 50, 70, 0.12);
}
.sd-related-num {
  font-family: var(--font-en); font-weight: 400;
  font-size: 0.8rem; letter-spacing: 0.16em; color: #8A6A3C; opacity: 0.85;
}
.sd-related-name {
  margin-top: clamp(14px, 1.8vh, 20px);
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(1.06rem, 1.9vw, 1.32rem);
  line-height: 1.5; letter-spacing: 0.12em; color: var(--ink);
}
.sd-related-desc {
  margin-top: clamp(10px, 1.4vh, 14px); max-width: 26em;
  font-size: clamp(0.94rem, 1.6vw, 1rem); line-height: 2.15; color: var(--sub);
}
.sd-related-link { margin-top: clamp(20px, 2.8vh, 30px); }

/* FAQ の本文中から関連ページへ渡すリンク */
.sd-inline-link {
  color: #7A6136;
  border-bottom: 1px solid rgba(170, 138, 86, 0.32);
  transition: color 0.6s var(--ease), border-color 0.6s var(--ease);
}
.sd-inline-link:hover { color: #6B5430; border-bottom-color: rgba(170, 138, 86, 0.6); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .sd-page .bd-hero-grid { grid-template-columns: minmax(0, 1fr) clamp(180px, 24vw, 270px); }
  .sd-related { gap: clamp(22px, 3vh, 34px); }
}

@media (max-width: 768px) {
  /* business-detail.css は SELECTED WORKS → PLAN の境目だけを詰めているが、
     このページに SELECTED WORKS は無い。共通の余白へ戻す。 */
  .sd-page #plan { padding-top: clamp(120px, 17vh, 220px); }

  /* HERO は他の事業詳細ページと同じく1カラムへ戻す。
     （上の .sd-page .bd-hero-grid はPC・タブレット用の指定なので、
       ここで打ち消さないとスマホでも2カラムのままになる） */
  .sd-page .bd-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* DEVELOPMENT が1行に収まり、右に余白が残る大きさ（320pxでも折り返さない） */
  .sd-page .bd-hero-title { font-size: clamp(1.85rem, 9.2vw, 3rem); }
  .sd-hero-note { padding-left: 13px; font-size: 0.84rem; }

  /* PRODUCE FLOW ― 担当は行の下へ回す（横に並べると窮屈になるため） */
  .sd-step {
    grid-template-columns: clamp(38px, 10vw, 46px) minmax(0, 1fr);
    gap: 10px 12px;
    padding-left: 18px;
  }
  .sd-step-role {
    grid-column: 2; justify-self: start; text-align: left;
    white-space: normal; margin-top: 8px; font-size: 0.76rem;
  }
  .sd-step-jp { font-size: 0.94rem; }

  .sd-related { grid-template-columns: minmax(0, 1fr); }
  .sd-note { padding-left: 13px; font-size: 0.84rem; line-height: 1.95; }
  .sd-plan-notes { font-size: 0.82rem; line-height: 1.95; }
}

@media (max-width: 480px) {
  .sd-related-link { width: 100%; justify-content: center; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .sd-hero-note { opacity: 1; animation: none; }
}