/* =========================================================
   ブランドカラー設計LP 専用スタイル
   styles.css（AURIA共通）の後に読み込む。共通部分は上書きせず、
   このページだけの「ミスティブルーを主役にする」調整と、
   固有パーツ（掛け算の図・色見本・追従CTA）を足している。
   ========================================================= */
.bc-page {
  /* ブランドカラー4色。ミスティブルーを主役、イエローは光の一点、
     ネイビーは文字と細線、ホワイトは余白として使う。 */
  --bc-mist: #add8e6;
  --bc-mist-deep: #7cb4d0;
  --bc-mist-pale: #eaf3fa;
  --bc-yellow: #e8c35c;
  --bc-yellow-deep: #c9a132;

  /* このページの淡いブルー面は、ミスティブルー寄りに少しだけ寄せる */
  --color-canvas-cool: #eaf3fa;
}

/* ---------------------------------------------------------
   ヒーロー：写真の上に、ミスティブルーの薄い膜を一枚
   （印象戦略LPと同じ構造のまま、色でこのページらしさを出す）
   --------------------------------------------------------- */
.bc-page .hero { background: linear-gradient(180deg, var(--bc-mist-pale) 0%, var(--color-canvas) 78%); }
.bc-page .hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg,
    rgba(173, 216, 230, 0.30) 0%,
    rgba(173, 216, 230, 0.10) 42%,
    rgba(255, 255, 255, 0.00) 72%);
  pointer-events: none;
}
.bc-page .hero-note { border-left-color: var(--bc-yellow); }

/* 見出し「あなたの想いを、／未来への約束の色へ。」を、意図した2行のまま見せる。
   32rem だと2行目が数pxだけ溢れて3行に割れるため、少しだけ広げている。 */
.bc-page .hero-text { width: min(100%, 34rem); }

/* 写真が明るくても文字が沈まないよう、背後の光を共通LPより少し厚くする。
   写真を差し替えても読みやすさが変わらないための保険。 */
.bc-page .hero-text::before {
  inset: -18% -14%;
  background: radial-gradient(62% 62% at 52% 48%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(247, 244, 240, 0.86) 42%,
    rgba(247, 244, 240, 0.42) 68%,
    transparent 86%);
  filter: blur(14px);
}
/* 写真の上に乗る補足文は、muted のままだと沈むので一段濃くする */
.bc-page .hero-sub,
.bc-page .hero-actions-note { color: var(--color-text); }

@media (max-width: 860px) {
  /* スマホでは画像が静的配置になるので、膜も画像の帯に合わせる */
  .bc-page .hero-media { position: relative; }
}

/* ---------------------------------------------------------
   横スクロール防止
   画像＋テキストのスライドイン（translateX 30px / 画像の scale 1.035）が、
   画面幅1100px前後で右にはみ出し、横スクロールバーを出してしまう。
   セクション単位で横方向だけクリップして塞ぐ。
   overflow-x: clip はスクロールコンテナを作らないので、
   縦方向の影も sticky ヘッダーもそのまま生きる（hidden だと壊れる）。
   --------------------------------------------------------- */
.bc-page .sec { overflow-x: clip; }

/* ---------------------------------------------------------
   COMING SOON ボタン（note公開までの暫定表示）
   note記事が公開されたら、HTML側のリンクと文言を戻し、
   btn-soon クラスを外すだけで通常のCTAに戻る。
   --------------------------------------------------------- */
.bc-page .btn-soon {
  font-family: var(--script);
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.22em;
  text-indent: 0.22em;   /* 字間ぶんの右寄りを打ち消して、中央に見せる */
}
.bc-page .btn-lg.btn-soon { font-size: 1.25rem; }
.bc-page .nav-cta {
  font-family: var(--script);
  font-size: 0.875rem;
  font-style: italic;
  letter-spacing: 0.12em;
}

/* ステップ本文の強調（納品物）は、本文と同じ扱いで色だけ濃くする */
.bc-page .steps p strong { color: var(--color-ink); font-weight: 700; }

/* ---------------------------------------------------------
   「好き」×「似合う」＝「魅力」
   3つの箱を演算子でつなぎ、最後の1つだけに光を落とす
   --------------------------------------------------------- */
.bc-formula {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  max-width: 60rem;
  margin: clamp(2.5rem, 6vw, 3.5rem) auto clamp(2.5rem, 6vw, 3.5rem);
}
.bc-f-cell {
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.75rem, 3.4vw, 2.5rem) clamp(1rem, 2.4vw, 1.75rem);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-align: center;
}
.bc-f-label {
  margin: 0 0 0.5rem;
  font-size: 0.75rem; line-height: 1.8; letter-spacing: 0.12em;
  color: var(--color-text-muted);
}
.bc-f-word {
  margin: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 4.2vw, 2rem);
  font-weight: 600; line-height: 1.4; letter-spacing: 0.12em;
  color: var(--color-ink);
}
.bc-f-note {
  margin: 0;
  font-size: 0.8125rem; line-height: 1.95;
  color: var(--color-text-muted);
}
/* 答えの箱だけ、うっすら光をまとう */
.bc-f-cell-accent {
  border-color: rgba(232, 195, 92, 0.55);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(232, 195, 92, 0.12) 0%, transparent 62%),
    #fff;
  box-shadow: 0 16px 38px rgba(27, 42, 74, 0.08);
}
.bc-f-cell-accent .bc-f-word { position: relative; display: inline-block; }
.bc-f-cell-accent .bc-f-word::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -0.14em;
  height: 2px; background: var(--bc-yellow);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--motion-emphasis) var(--ease-enter) 320ms;
}
.bc-formula.is-visible .bc-f-cell-accent .bc-f-word::after { transform: scaleX(1); }

.bc-f-op {
  align-self: center;
  font-family: var(--serif);
  font-size: clamp(1.125rem, 2.6vw, 1.75rem);
  font-weight: 600;
  line-height: 1;
  color: var(--bc-mist-deep);
}

@media (max-width: 780px) {
  .bc-formula { grid-template-columns: 1fr; gap: 0.6rem; }
  .bc-f-op { padding: 0.15rem 0; }
  .bc-f-cell { padding: 1.5rem 1.25rem; }
  .bc-f-note br { display: none; }
}

/* ---------------------------------------------------------
   あき自身の色（実例セクション）
   --------------------------------------------------------- */
.bc-mist-sec {
  background:
    radial-gradient(80% 60% at 12% 0%, rgba(173, 216, 230, 0.22) 0%, transparent 60%),
    var(--color-canvas);
}

/* 色見本：色・名前・カラーコード・込めた意味をひと組で見せる */
.bc-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: clamp(2.5rem, 6vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}
.bc-swatches li {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.5rem 0.75rem 1.6rem;
  background: #fff;
  text-align: center;
}
.bc-chip {
  width: 52px; height: 52px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 6px 16px rgba(27, 42, 74, 0.14), inset 0 0 0 1px rgba(27, 42, 74, 0.08);
}
.bc-swatches b {
  font-family: var(--script);
  font-size: 0.9375rem; font-weight: 600; font-style: italic; letter-spacing: 0.08em;
  color: var(--color-ink);
}
.bc-swatches i {
  margin-top: 0.15rem;
  font-size: 0.6875rem; font-style: normal; letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.bc-swatches small {
  margin-top: 0.75rem;
  font-size: 0.75rem; line-height: 1.7;
  color: var(--color-text-muted);
}
@media (max-width: 720px) {
  .bc-swatches { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .bc-swatches { grid-template-columns: 1fr; }
  .bc-swatches li { flex-direction: row; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.25rem; }
  .bc-chip { width: 40px; height: 40px; margin-bottom: 0; flex: 0 0 auto; }
  .bc-swatches small { margin-top: 0; }
}

/* ---------------------------------------------------------
   最終CTA：ミスティブルーの光を中央から
   --------------------------------------------------------- */
.bc-final {
  background:
    radial-gradient(72% 90% at 50% 0%, rgba(173, 216, 230, 0.38) 0%, transparent 64%),
    var(--color-canvas-warm);
}

/* ---------------------------------------------------------
   追従CTA（スマホ中心。ヒーローを抜けたら下から現れる）
   --------------------------------------------------------- */
.bc-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 0.75rem clamp(1rem, 4vw, 2rem) calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-border);
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--motion-emphasis) var(--ease-enter),
              opacity var(--motion-base) var(--ease-move),
              visibility 0s linear var(--motion-emphasis);
}
.bc-sticky.is-shown {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: transform var(--motion-emphasis) var(--ease-enter),
              opacity var(--motion-base) var(--ease-move),
              visibility 0s;
}
.bc-sticky-inner {
  display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 2rem);
  width: min(100%, var(--wrap)); margin-inline: auto;
}
.bc-sticky-text {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.9375rem; letter-spacing: 0.06em;
  color: var(--color-ink);
}
.bc-sticky .btn { padding: 0.8em 2.2em; font-size: 0.875rem; white-space: nowrap; }
@media (max-width: 640px) {
  .bc-sticky-text { display: none; }
  .bc-sticky .btn { display: block; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-sticky { transition: none; }
  .bc-formula.is-visible .bc-f-cell-accent .bc-f-word::after { transition: none; }
}

/* =========================================================
   セクション見出し・写真の見せ方・奥行き（brand-color.js と対で動く）
   細い罫＋小ラベル＋巨大な英字、写真の裁ち落とし、パララックス、
   ファーストビューの広がり。色と文章は変えず、置き方と動きだけを担う。
   ========================================================= */

/* 役目が重複した元の小ラベル（why color? など）を隠す */
.px-hidden { display: none !important; }

/* ---------------------------------------------------------
   1. セクション見出し
      細い横罫 ＋ 小さなラベル ＋ 巨大な英字。
      英字は「読ませる文字」ではなく「余白の主役」として置く。
   --------------------------------------------------------- */
.px-head {
  width: min(100% - 2.5rem, var(--wrap));
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid var(--color-border);
}
.px-head__label {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 clamp(0.75rem, 2vw, 1.25rem);
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: var(--color-text-muted);
}
/* ラベルの前に置く小さな印。参考サイトのアイコンにあたる位置。
   AURIAは「光の一点」なので、ゴールドの小さな菱形にしている。 */
.px-head__mark {
  width: 9px; height: 9px;
  flex: 0 0 auto;
  background: var(--bc-yellow, #e8c35c);
  transform: rotate(45deg);
}
.px-head__en {
  margin: 0;
  font-family: var(--script);
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bc-mist, #add8e6);
}
/* 左右交互に置いて、スクロールにリズムを作る */
.px-head--right { text-align: right; }
.px-head--right .px-head__label { justify-content: flex-end; }

/* 巨大な英字は、下からせり上がって現れる */
.js-anim .px-head .px-head__en {
  opacity: 0;
  transform: translateY(0.42em);
  clip-path: inset(0 0 -20% 0);
}
.js-anim .px-head.is-visible .px-head__en {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-emphasis) var(--ease-enter) 120ms,
              transform var(--motion-scene) var(--ease-enter) 120ms;
}

/* ---------------------------------------------------------
   2. 写真のパララックス（奥行き）
      器を切り抜き、中の画像を縦に大きめに作っておく。
      JSが中身だけをゆっくり動かすので、写真が奥にあるように見える。
   --------------------------------------------------------- */
.px-view {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 150px 150px 16px 16px;
  background: var(--color-canvas-cool);
  box-shadow: 0 26px 56px rgba(27, 42, 74, 0.13);
}
.px-view .px-img {
  position: absolute;
  inset: -12% 0;              /* 上下に余白を持たせ、動かす余地を作る */
  width: 100%;
  height: 124%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  will-change: transform;
}
/* 元の figure 側の装飾は器へ移したので消す */
.feature-media { border-radius: 0; box-shadow: none; background: none; }

/* ---------------------------------------------------------
   3. 写真を画面の端まで裁ち落とす
      参考サイトの「画像が画面外へ抜けていく」開放感。
      奇数行は左へ、偶数行（.alt）は右へ抜ける。
   --------------------------------------------------------- */
.bc-page {
  /* 画面の端から .wrap の端までの余白。裁ち落としはこの分だけ外へ出す */
  --px-gutter: calc((100vw - min(100vw - 2.5rem, var(--wrap))) / 2);
}

@media (min-width: 821px) {
  .bc-page .sec .feature {
    grid-template-columns: 1fr 1fr;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .bc-page .sec .feature > .feature-media {
    margin-left: calc(var(--px-gutter) * -1);
    width: calc(100% + var(--px-gutter));
  }
  .bc-page .sec .feature.alt > .feature-media {
    margin-left: 0;
    margin-right: calc(var(--px-gutter) * -1);
  }
  .bc-page .sec .feature .px-view { aspect-ratio: 3 / 4; border-radius: 0 200px 0 0; }
  .bc-page .sec .feature.alt .px-view { border-radius: 200px 0 0 0; }
}

/* ---------------------------------------------------------
   4. ファーストビューが、スクロールで画面いっぱいに広がる
      --px-open は 0（最初）→ 1（広がりきり）をJSが渡す。
   --------------------------------------------------------- */
.hero { --px-open: 0; }
.hero .hero-media {
  --px-inset: calc((1 - var(--px-open)) * clamp(1rem, 3.5vw, 3rem));
  inset: var(--px-inset);
  border-radius: calc((1 - var(--px-open)) * 20px);
  overflow: hidden;
}
.hero .hero-media .hero-img { border-radius: inherit; }

@media (max-width: 860px) {
  /* スマホは画像が上の帯になるので、広がる演出は使わない */
  .hero .hero-media { inset: auto; border-radius: 0; }
}

/* ---------------------------------------------------------
   5. 縦書きのリード（本文の横に一言そえる）
      本番の worldview で使っている縦書きを、本文側にも展開する。
   --------------------------------------------------------- */
.px-vlead {
  writing-mode: vertical-rl;
  margin: 0 0 0 auto;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  letter-spacing: 0.18em;
  line-height: 2.2;
  color: var(--color-ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   6. 見出し・本文まわりの微調整
      巨大な英字が入ったぶん、日本語見出しは少し小さく静かに。
   --------------------------------------------------------- */
.bc-page .feature-body .sec-title { font-size: clamp(1.375rem, 3.4vw, 1.875rem); }
.bc-page .sec { padding: clamp(4rem, 10vw, 7rem) 0; }
.bc-page .sec-tint { background: var(--color-canvas-cool); }


@media (prefers-reduced-motion: reduce) {
  .js-anim .px-head .px-head__en { opacity: 1; transform: none; }
  .px-view .px-img { transform: none !important; }
}