/* =========================================================
   このファイルは about-4.html 専用。
   サイト全体で使う共通スタイル（色・ヘッダー・フッター・基本のリンク色など）は
   base.css に置くこと。ここには about-4.html だけの見た目
   （ヒーローの演出・お悩みセクションなど）のみを書く。
   ========================================================= */

/* ---------- ヒーロー ---------- */
.bb-hero{
  position:relative;
  /* full-bleed（画面幅いっぱい）。100vw 単体の横スクロール対策で left/transform 併用 */
  width:100vw;
  /* 【1】1920pxで頭打ち。これ以上広い画面では横に伸ばさず、left:50%＋translateX(-50%) で中央寄せ。 */
  max-width:1920px;
  left:50%;
  transform:translateX(-50%);
  overflow:hidden;
  /* 箱の縦横比を実画像(about-4/hero-ai-support-wide.png 1521×934)に合わせ、cover の過剰トリミングを防ぐ。
     min-height=極狭画面の下限 / max-height=極広画面の上限。 */
  aspect-ratio:1521 / 934;
  min-height:560px;
  max-height:1000px;
  background-color:var(--bb-pink-bg);            /* 読み込み前・端のフォールバック。写真は ::before に分離 */
  display:flex;
  align-items:center;                            /* コピーを縦中央に */
}

/* ===== ヒーローの focus-in 演出（ぼかし＋透明→くっきり）=====
   背景写真は要素背景だとアニメできないので ::before に分離。
   写真 → AI → 日本語見出し → リード → ボタン の順に時間差でくっきり（波紋状に後を追う）。 */
@keyframes bb-focus-in{
  from{ filter:blur(12px); opacity:0; }
  to  { filter:blur(0);    opacity:1; }
}
.bb-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;                                     /* .bb-hero-wave(1)・粒(2)・コピー(2)より後ろ */
  pointer-events:none;
  background-image:url("../img/about-4/hero-ai-support-wide.png");
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
}
/* 文字・ボタンは .bb-hero-copy 内に限定（.bb-btn-coral は他セクションでも使うため）。
   .bb-ai の focus-in は下の「.bb-hero h1 .bb-ai」側に集約（シマーと2本立てで指定するため）。 */

/* 初期状態: ローディング終了までは非表示のまま待たせる */
.bb-hero::before,
.bb-hero-copy .hero-jp,
.bb-hero-copy p.lead,
.bb-hero-copy .bb-btn-coral,
.bb-hero h1 .bb-ai{
  opacity:0;
  filter:blur(12px);
}

/* ローディング終了後（.bb-hero に is-ready が付いてから）にアニメーション開始 */
.bb-hero.is-ready::before{
  animation:bb-focus-in 1s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}
.bb-hero.is-ready .bb-hero-copy .hero-jp{
  animation:bb-focus-in .9s cubic-bezier(0.55, 0.085, 0.68, 0.53) .75s both;
}
.bb-hero.is-ready .bb-hero-copy p.lead{
  animation:bb-focus-in .9s cubic-bezier(0.55, 0.085, 0.68, 0.53) 1.05s both;
}
.bb-hero.is-ready .bb-hero-copy .bb-btn-coral{
  animation:bb-focus-in .9s cubic-bezier(0.55, 0.085, 0.68, 0.53) 1.35s both;
}
.bb-hero.is-ready h1 .bb-ai{
  animation:
    bb-focus-in .9s cubic-bezier(0.55, 0.085, 0.68, 0.53) .45s both,
    bb-ai-shimmer 4s linear 1.3s infinite;
}

/* 動きを減らす設定：アニメ無効＝最初から通常表示（blurなし・opacity:1）。
   is-ready は reduced-motion でも JS が付与するため、上の「初期状態」ブロックや
   「.bb-hero.is-ready …」の指定より詳細度を上げて（.is-ready 込みで）打ち消す。
   （style.css の .bb-page-hero.is-ready … と同じ考え方） */
@media (prefers-reduced-motion: reduce){
  .bb-hero::before,
  .bb-hero-copy .bb-ai,
  .bb-hero-copy .hero-jp,
  .bb-hero-copy p.lead,
  .bb-hero-copy .bb-btn-coral,
  .bb-hero.is-ready::before,
  .bb-hero.is-ready .bb-hero-copy .hero-jp,
  .bb-hero.is-ready .bb-hero-copy p.lead,
  .bb-hero.is-ready .bb-hero-copy .bb-btn-coral,
  .bb-hero.is-ready h1 .bb-ai{
    animation:none;
    filter:none;
    opacity:1;
  }
}

/* Safari(WebKit)対策：filter:blur() を animation で変化させると、終了後も
   コンポジットが更新されずぼやけたまま固まることがある既知の不具合がある。
   ::before は擬似要素なので JS から直接 style を書き換えられないため、
   about.js 側で animationend を拾って .is-before-settled を付与し、
   アニメーションを外して静的な filter:none/opacity:1 に切り替えることで
   スタイル変更を発生させ、強制的に再描画させる（実要素側は about.js 内で
   inline style を使って同じことを行う）。 */
.bb-hero.is-before-settled::before{
  animation:none;
  filter:none;
  opacity:1;
}

/* Wix実測：AI=124px / 日本語見出し=66px / リード=25px（太字・太字・通常）。
   スマホでは大きすぎるので clamp() で比率を保ったまま縮小。 */
/* h1自身の font-size は「見えないストラット(行の土台)」を縮めるためだけに小さくする。
   実際の文字サイズは中の .bb-ai / .hero-jp が各自の clamp() で持つので見た目は不変。 */
.bb-hero h1{ font-weight:900; font-size:16px; line-height:1; margin:0 0 1.25rem; }
/* 「AI」は大きいぶん行ボックスを膨らませて行間を空けるので、line-height を詰めて overflow させる */
.bb-hero h1 .bb-ai{
  display:inline-block;
  font-size:clamp(60px, 10vw, 124px);
  line-height:.75;
  margin:0;
  /* 流れるグラデーション（テキストシマー）。--bb-red→--bb-orange→--bb-coral を左右対称に並べ、
     継ぎ目なくループさせる。background-clip:text のため color は transparent に。 */
  color:transparent;
  background:linear-gradient(90deg,
    var(--bb-red) 0%,
    var(--bb-orange) 25%,
    var(--bb-coral) 50%,
    var(--bb-orange) 75%,
    var(--bb-red) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  /* 1) focus-in で現れる → 2) 現れきったら（≒1.3s以降）shimmer が流れ続ける、の2段構え。
     animation は上の「.bb-hero.is-ready h1 .bb-ai」側に移動（ローディング終了後に開始）。 */
}
@keyframes bb-ai-shimmer{
  to{ background-position:200% center; }
}
/* 動きを減らす設定：シマーを止めて従来どおりの単色に戻す（コントラスト担保） */
@media (prefers-reduced-motion: reduce){
  .bb-hero h1 .bb-ai{
    animation:none;
    background:none;
    color:var(--bb-red);
  }
}
.bb-hero h1 .hero-jp{
  font-weight:900;
  font-size:clamp(32px, 5.5vw, 66px);
  line-height:1.05;                              /* 「活用を、」/「もっと身近に。」間の行間 */
  margin:0;
}
.bb-hero p.lead{ color:#333; font-weight:400; font-size:clamp(16px, 2.2vw, 25px); margin:0 0 1.5rem; }

/* ボタンだけ .bb-hero-copy 内で水平中央寄せ（見出し・リードは左揃えのまま） */
.bb-hero-copy .bb-btn-coral{
  display:block;
  width:fit-content;
  margin-inline:auto;
}

/* 見出し・リード・ボタンを背景画像の上に重ねる */
.bb-hero-copy{
  position:relative;
  z-index:2;
  width:fit-content;                             /* 箱を実際の文字幅に合わせる（ボタン中央位置を見えている文字と揃える） */
  max-width:100%;
  /* もしリード文が3行に折り返す場合は、上2行を min-width:560px 等に置き換えて2行を維持しつつ最小化 */
  /* 左端＝中央コンテナ(xxl=1320px)の左端。paddingではなくmarginで確保して本文幅を削らない */
  margin-left:max(1.25rem, calc((100vw - 1320px) / 2 + .75rem));
  padding-top:4.5rem;
  padding-bottom:6rem;                           /* 波型SVGと重ならないよう下を多めに */
  padding-right:1rem;
}

/* 下端の波型マスク。SVGパスは反転前提で作成し、scaleY(-1) で下辺フラットを下端に。 */
.bb-hero-wave{
  position:absolute;
  left:0;
  bottom:-1px;                                   /* ヘアライン隙間防止 */
  width:100%;
  height:auto;
  display:block;
  transform:scaleY(-1);
  transform-origin:center;
  z-index:1;                                     /* 背景画像より前・コピーより後ろ */
  pointer-events:none;
}

/* ---------- ヒーローの光の粒 ---------- */
/* .bb-hero の中、写真背景(要素背景)より前・.bb-hero-copy(z-index:2)より後ろに敷く。
   z-index:2＋DOM順で copy より前に置く → 波(z:1)の上、テキストの下。個体差は各 span の
   inline カスタムプロパティ、動きは共有 @keyframes bb-particle-rise-a/b/c の3種。 */
.bb-hero-particles{
  position:absolute;
  inset:0;
  z-index:2;                                     /* .bb-hero-copy と同値。DOM順で copy が上に描かれる */
  overflow:hidden;
  pointer-events:none;
}
.bb-particle{
  position:absolute;
  left:var(--x);
  bottom:-10vh;                                  /* 画面下の少し外から出発 */
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  /* 中心は常に白い丸（明るい背景写真にも同化しない）。色みは外周の box-shadow の暈だけで出す。 */
  background:radial-gradient(circle,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.6) 45%,
    transparent 75%);
  opacity:0;                                     /* keyframe で 0→--peak→0 と滑らかに揺らす */
  will-change:transform, opacity;
  animation:bb-particle-rise-a var(--duration) linear var(--delay) infinite;
}
.bb-particle--b{ animation-name:bb-particle-rise-b; }
.bb-particle--c{ animation-name:bb-particle-rise-c; }

/* 3種とも「下→上へ約1.2画面ぶん上昇」＋横ゆらぎ。中盤のゆらぎ方と scale の緩急だけ変える。
   0%と100%は opacity:0 で、ループの継ぎ目が目立たないようにする。 */
@keyframes bb-particle-rise-a{
  0%   { opacity:0;          transform:translate3d(0, 0, 0) scale(.55); }
  12%  { opacity:var(--peak); }
  50%  { transform:translate3d(calc(var(--drift) * .5), -60vh, 0) scale(1); }
  88%  { opacity:var(--peak); }
  100% { opacity:0;          transform:translate3d(var(--drift), -120vh, 0) scale(.7); }
}
@keyframes bb-particle-rise-b{
  0%   { opacity:0;          transform:translate3d(0, 0, 0) scale(.6); }
  15%  { opacity:var(--peak); }
  45%  { transform:translate3d(calc(var(--drift) * -0.7), -55vh, 0) scale(1.05); }
  85%  { opacity:var(--peak); }
  100% { opacity:0;          transform:translate3d(calc(var(--drift) * .4), -120vh, 0) scale(.65); }
}
@keyframes bb-particle-rise-c{
  0%   { opacity:0;          transform:translate3d(0, 0, 0) scale(.5); }
  10%  { opacity:var(--peak); }
  35%  { transform:translate3d(var(--drift), -38vh, 0) scale(.95); }
  65%  { transform:translate3d(calc(var(--drift) * -0.4), -72vh, 0) scale(1.1); }
  90%  { opacity:var(--peak); }
  100% { opacity:0;          transform:translate3d(0, -120vh, 0) scale(.7); }
}

/* アニメ抑制時は動かさない（粒は opacity:0 のまま＝見えない） */
@media (prefers-reduced-motion: reduce){
  .bb-particle{ animation:none; }
}
/* モバイル(≤767.98px)は粒を完全非表示（狭い画面では演出過多＋負荷）。
   タブレット(768〜991px)は表示のまま・box-shadow なし。 */
@media (max-width:767.98px){
  .bb-hero-particles{ display:none; }
}
/* 色つきの光暈（box-shadow）は PC幅のみ。タブレット・スマホは白い中心のみのシンプルな粒。
   ぼかし半径 = 粒サイズ * 2.5（初期値）。にじみ弱→3〜3.5／強→2前後。色は inline の --core（暖色）。 */
@media (min-width:992px){
  .bb-particle{ box-shadow:0 0 calc(var(--size) * 2.5) 0 var(--core); }
}

@media (max-width:991.98px){
  .bb-hero{
    min-height:auto;
  }
  .bb-hero::before{
    background-position:right top;               /* 【1】上部が切れないよう上寄せに（写真は ::before に移動） */
  }
  .bb-hero-copy{
    width:100%;
    margin-left:0;
    padding:3rem 1.25rem 4.5rem;
  }
}

/* スマホ(≤767.98px)：差し替えたモバイル画像(635×1199 の縦長)の全体を見せるため、
   箱の高さを「中身(文字量)」ではなく「画像の縦横比」で決める。
   height:auto のままだと、文字が少ないこのページでは箱が画像より低くなり、
   ::before の cover が画像の上下を大きく削って、下部のロボット・吹き出しが
   画面外に消えてしまう（＝「上のほうしか見えない」状態）。
   ※ 写真の上に文字を重ねるオーバーレイ方式は維持（縦積みにはしない）。 */
@media (max-width:767.98px){
  .bb-hero{
    /* 箱の高さを画像の比率から逆算（画面幅 × 1199/635）。cover が縦横どちらも
       削らず縦長画像の全体が収まる。aspect-ratio ではなく min-height にするのは、
       極端に狭い画面で中身(コピー)が箱より高くなったとき overflow:hidden で
       切れるのを避け、その場合だけ箱を伸ばして逃がすため。
       上限 1200px：〜約635px幅までは上限に当たらず画像フル表示。それより広い
       (デスクトップを狭めた・大型フォルダブル等)ときだけ頭打ちにして、
       767px幅で画像縦の約17%トリミング（≒550px幅相当の見た目）で止める。
       ※以前は 860px（約41%トリミング）。ズーム解消を優先して引き上げた。
       767/768 境界のジャンプ幅（モバイル1200px→デスクトップ約470px）は許容。 */
    aspect-ratio:auto;                             /* base の 1521/934 を打ち消す */
    height:auto;
    min-height:min(100vw * 1199 / 635, 1200px);
    max-height:none;
    /* 既定は中身を上詰めに（下の .bb-hero-copy は align-self:stretch で個別に
       全高へ伸ばすが、フォールバックとしてここでも上詰めを指定しておく）。
       画像上側の余白に見出し・リードを乗せ、下部のイラストにかぶせない。 */
    align-items:flex-start;
  }
  /* 横長の hero-ai-support-wide.png は cover だと、縦長になった箱で左右が
     大きく切れる。モバイル専用に用意した縦長画像へ差し替える。
     箱の高さを画像比率から逆算している幅では background-position はほぼ効かないが、
     上限(1200px)で頭打ちになった幅では下側が削れるため上端基準にしておく。 */
  .bb-hero::before{
    background-image:url("../img/about-4/hero-ai-support-mobile.webp");
    background-position:center top;
  }
  /* コピー箱をヒーロー全高に伸ばす（align-self:stretch で align-items:flex-start を
     この要素だけ上書き）。中身の見出し・リードは通常フローで上から流れるので
     位置は変わらず、下端だけがヒーロー下端まで届く＝下のボタンを絶対配置する際の
     bottom 基準がヒーロー下端になる。 */
  .bb-hero-copy{
    align-self:stretch;
    /* 絶対配置に切り出したボタンぶんの流し込み余白は不要になったので圧縮 */
    padding-bottom:1.5rem;
  }

  /* CTAボタンだけ通常フローから外し、ヒーロー下部＝画像のロボットの足元と
     下端の波装飾（.bb-hero-wave, z-index:1）の隙間へ、絶対配置で水平中央寄せ。
     ・中央寄せは translateX ではなく left:0/right:0 + margin-inline:auto で行う
       → hover の transform:translateY(-3px) や focus-in の登場演出（opacity/blur）と
         干渉しない（登場アニメの animation 指定は上位ルールのまま維持）。
     ・ボタンは z-index:2 の .bb-hero-copy 内なので、波（z-index:1）より前に描画され隠れない。
     ・bottom はロボットの足元と波（下端 約40px を占める）の間に収まる値を実機で微調整。 */
  .bb-hero-copy .bb-btn-coral{
    position:absolute;
    left:0;
    right:0;
    bottom:4.5rem;
    margin-inline:auto;
    width:fit-content;
  }
}

/* 【2】タブレット幅(768〜991.98px)：コピー箱をデスクトップと同じ「文字幅・左寄せ」に戻す。
   ↑の 991.98px ブロックの width:100% / margin-left:0 を打ち消す（モバイル≤767pxは対象外）。 */
@media (min-width:768px) and (max-width:991.98px){
  .bb-hero-copy{
    width:fit-content;
    max-width:100%;
    margin-left:max(1.25rem, calc((100vw - 1320px) / 2 + .75rem));
    padding-left:0;
  }
}
.bb-btn-coral{
  display:inline-block;
  /* グラデーションボタン。見出し「AI」のシマー（--bb-red→--bb-orange→--bb-coral）と同系配色。
     斜め120deg・静止。box-shadow は終点コーラル寄りの色で浮遊感を出す。 */
  background:linear-gradient(120deg, var(--bb-red) 0%, var(--bb-orange) 50%, var(--bb-coral) 100%);
  color:#fff;
  padding:.85rem 2.1rem;                         /* Wix実測 262×55px に合わせて約1.2倍（≈13.6px 33.6px） */
  border-radius:999px;
  font-weight:700;
  font-size:1.15rem;                             /* ≈18.4px */
  border:none;
  box-shadow:0 8px 20px rgba(242,114,111,.42);   /* --bb-coral #F2726F 系 */
  transition:transform .2s ease, box-shadow .2s ease;
}
.bb-btn-coral:hover{
  color:#fff;
  transform:translateY(-3px);                    /* 少し浮き上がる */
  box-shadow:0 13px 28px rgba(242,114,111,.5);
}

/* ---------- ストーリー：お悩みセクション ---------- */
/* overflow は付けない（::before 装飾の上端が切れるため）。重なり順は ::before の z-index で制御。 */
.bb-story{
  background:#fff;
  position:relative;
}

/* 波型のすぐ下に薄ピンクの同心円(波紋)装飾。about-4/deco-ripple.png を180度回転して敷く。 */
.bb-story::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:600px;                                   /* Wix実測：固定 600×400px */
  max-width:80vw;                                /* スマホでは大きすぎるので上限だけ設定 */
  aspect-ratio:3 / 2;                            /* 600:400 */
  /* translate の縦値が「上の切れ」と「下の余白」の調整ツマミ（0%に近いほど下がる／マイナスを増やすほど上がる）。 */
  transform:translate(-50%, -40%) rotate(180deg);
  background:url("../img/about-4/deco-ripple.png") no-repeat center center;
  background-size:contain;
  opacity:.7;                                    /* うっすら見える程度 */
  pointer-events:none;
  z-index:1;                                     /* ヒーロー背景画像より前面（切れずに上へはみ出せる） */
}
/* 見出しブロックを装飾の下へずらす（padding-top が「見出しとの余白」の調整ツマミ）＆常に前面に */
.bb-story > .container{
  position:relative;
  z-index:2;
  padding-top:clamp(3rem, 7vw, 5.5rem);
}
/* solve-box を包む2つ目の container だけ padding-top を打ち消す（悩みゾーン〜解決ゾーンの間の
   白い空きを詰める。見出し側の1つ目 container は上の指定のまま）。
   ※ .bb-worry-zone と container の間に .bb-zone-fade(height:0) を挟んだので隣接は .bb-zone-fade。 */
.bb-zone-fade + .container{
  padding-top:0;
}
.bb-story h2.bb-gradient,
.bb-story .bb-sub{ position:relative; z-index:2; }
.bb-story h2.bb-gradient{
  font-weight:700;
  /* 常に1行。狭い画面でも収まるよう下限を下げ、上限は 52px。 */
  white-space:nowrap;
  font-size:clamp(15px, 3.6vw, 52px);
  display:inline-block;
  margin-bottom:1.25rem;                         /* mb-2(0.5rem) を上書き。下の悩みゾーンとの余白を確保 */
  /* position:relative は上の共通ルールで付与済み。マーカー帯(::before)の基準になる。 */
}
/* 文字色は単色（赤）。横グラデ＋background-clip:text は終端が弱く見えるため不採用。 */
.bb-story h2.bb-gradient .bb-gradient-text{
  color:var(--bb-red);
}
/* 「もっとラクに」の波打ち演出。各文字を inline-block 化し translateY（static 時は transform なし＝レイアウト不変）。
   about.js が画面内で .is-waving を付与 → keyframe を3回再生して静止。GSAP 未読込／reduced-motion では動かない。 */
.bb-story h2.bb-gradient .bb-wave{ white-space:nowrap; }
.bb-story h2.bb-gradient .bb-wave > span{ display:inline-block; }
.bb-story h2.bb-gradient.is-waving .bb-wave > span{
  /* 1サイクル 1.9s ＝ 前半(0〜50%≒1s)でゆっくり上下1往復 → 後半(50〜100%≒0.9s)は静止して待つ。
     3回くり返して rest(translateY:0) で停止。1文字あたり合計 ≒ 5.7s。 */
  animation:bb-wave-bounce 1.9s ease-in-out 3 both;
}
.bb-story h2.bb-gradient.is-waving .bb-wave > span:nth-child(2){ animation-delay:.07s; }
.bb-story h2.bb-gradient.is-waving .bb-wave > span:nth-child(3){ animation-delay:.14s; }
.bb-story h2.bb-gradient.is-waving .bb-wave > span:nth-child(4){ animation-delay:.21s; }
.bb-story h2.bb-gradient.is-waving .bb-wave > span:nth-child(5){ animation-delay:.28s; }
.bb-story h2.bb-gradient.is-waving .bb-wave > span:nth-child(6){ animation-delay:.35s; }
@keyframes bb-wave-bounce{
  0%           { transform:translateY(0); }        /* 開始 */
  25%          { transform:translateY(-0.3em); }   /* ≒0.5s：一番上 */
  50%, 100%    { transform:translateY(0); }        /* ≒1s で戻り、以降 ≒0.9s は静止して待つ */
}
/* 動きを減らす設定：波打ちなし（about.js も .is-waving を付けないが念のため明示） */
@media (prefers-reduced-motion: reduce){
  .bb-story h2.bb-gradient .bb-wave > span{ animation:none; transform:none; }
}
/* マーカー（蛍光ペン）帯：文字の後ろを左→右に伸びる（z-index:-1 で文字より後ろ・h2 背景より前）。
   base（JSなし／reduced-motion）＝幅100%の静止ハイライト／.js-marker＝初期0%で隠す／
   .is-marked（画面に入るたび付与）＝0%→100%を1回再生。 */
.bb-story h2.bb-gradient::before{
  content:"";
  position:absolute;
  /* filter:blur ぶん外側に広げる。h2 は overflow:visible／上下は container padding と
     mb-2 の余白内、左右は中央寄せで十分空いており他要素と重ならない。 */
  inset:-3px -10px;
  z-index:-1;
  /* 上下端が透明へフェードする帯＝硬い長方形の輪郭を出さない。
     左右（伸びる先端）は下の filter:blur でやわらげる。 */
  background-image:linear-gradient(180deg,
    rgba(255,219,183,0)   0%,
    rgba(255,219,183,.58) 22%,
    rgba(255,219,183,.58) 78%,
    rgba(255,219,183,0)   100%);
  background-repeat:no-repeat;
  background-position:0 80%;                     /* 下寄りの帯（蛍光ペンでなぞった位置） */
  background-size:100% 52%;                      /* base＝満タン（JSなし時の静止フォールバック） */
  filter:blur(1.5px);                            /* 全体をふわっと（先端も柔らかく） */
}
/* GSAP が使える時：about.js が h2 に .js-marker を即付与 → 初期状態は「隠す」 */
.bb-story h2.bb-gradient.js-marker::before{ background-size:0% 52%; }
/* 画面に入るたび about.js が .is-marked を付け直す（＋強制リフロー）→ 頭から再生 */
.bb-story h2.bb-gradient.js-marker.is-marked::before{
  animation:bb-marker-sweep 1.5s ease-in-out both;
}
@keyframes bb-marker-sweep{
  from{ background-size:0%   52%; }
  to  { background-size:100% 52%; }
}
/* 動きを減らす設定：about.js は early return（.js-marker を付けない）ので base の
   「幅100%・ぼやけた静止ハイライト」がそのまま出る。念のため明示しておく。 */
@media (prefers-reduced-motion: reduce){
  .bb-story h2.bb-gradient::before{ animation:none; background-size:100% 52%; }
}
/* 目標 36px。スマホ幅での不自然な折り返しを防ぐため clamp() で連続縮小（@media 上書きなし）。
   ~950px 以上で 36px(2.25rem)、狭くなるほど緩やかに縮小し下限 1.375rem(22px)＝単調非増加。 */
.bb-story .bb-sub{ color:#888; font-size:clamp(1.375rem, 3.8vw, 2.25rem); margin-bottom:40px; }
/* 「お悩み」だけ強調：太字＋一回り大きく（em で親サイズ追従）。line-height は親のまま＝行が膨らまない。 */
.bb-story .bb-sub .bb-sub-highlight{ font-weight:700; font-size:1.2em; }

/* ---------- 悩みゾーン（p.bb-sub ＋ .bb-worries を包む沈んだトーンの全幅帯）---------- */
/* 見出しゾーンと .bb-solve-box に挟まれた「悩みの帯」。.bb-hero と同じ全幅フルブリード
   （width:100vw＋left:50%＋translateX(-50%)）。背景は上端くすみピンク #e4d2d8 → 下端 白 #ffffff の縦グラデ、
   下端はまっすぐ。.bb-worries の負マージンによる列の重なりに干渉しないよう overflow は visible のまま。 */
.bb-worry-zone{
  position:relative;
  z-index:2;                                     /* .bb-story::before(z:1) より前 */
  width:100vw;
  max-width:100vw;
  left:50%;
  transform:translateX(-50%);
  margin-top:clamp(1.25rem, calc(-0.25rem + 7.5vw), 6.5rem);   /* 見出しとの間。画面幅に応じてスケール（PC上限6.5rem／スマホ下限1.25rem） */
  /* 上下余白はロボット・吹き出しの通常マージンのみ。下端はまっすぐで、後続要素はこの padding 下端が境目になる。 */
  padding:clamp(1.75rem, 5vw, 3.75rem) clamp(0.5rem, 2vw, 2rem);
  /* padding-top だけ約25%増し ＝ p.bb-sub をアーチ帯の中でもう少し下寄りに（帯上端との詰まり解消）。 */
  padding-top:clamp(2.25rem, 6.3vw, 4.75rem);
  /* 縦グラデ：上端くすみピンク #e4d2d8 → 下端 白 #ffffff。下端は塗り切りでフェードなし、
     形はまっすぐ（clip-path なし）。 */
  background:linear-gradient(180deg,
    #e4d2d8 0%,
    #ffffff 100%);
  text-align:center;                             /* p.bb-sub の中央寄せ（旧 .container.text-center の代替） */
}

/* 悩みゾーン上端のアーチ(∩)カット。.bb-hero-wave と同じく白(#fff＝.bb-story の背景色)のSVG形状を重ねてマスク。
   パスは二次ベジェ曲線(Q)1本の弧で、中央を盛り上げ両端(y=150)は帯の高さいっぱいまで白。
   .bb-worry-zone の高さ・padding-top には影響しない独立レイヤー（ぼかし不使用）。 */
.bb-worry-arch{
  position:absolute;
  top:-1px;                                      /* ヘアライン隙間防止（上は白セクションなので見えない） */
  left:0;
  width:100%;
  height:auto;
  display:block;
  z-index:1;                                     /* 帯のグレー背景より前・.bb-sub / .bb-worries(z-index:2)より後ろ */
  pointer-events:none;
}

/* ---------- 悩みゾーン→解決ゾーンの境目 ---------- */
/* height:0 の基準 div。.bb-worry-zone の（まっすぐな）下端＝この要素の上端。
   隣接する .container の padding-top 打ち消し（.bb-zone-fade + .container）に使う。 */
.bb-zone-fade{
  position:relative;
  z-index:3;
  height:0;
  width:100vw;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none;
}

/* お悩み3カラム：flex 直並べ。gap:0 ＋ .bb-worry の負マージンで透明余白を重ねて密着させる */
.bb-worries{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:0;                                         /* 隙間は .bb-worry の負マージンで作る */
  flex-wrap:nowrap;                              /* 【1】どの画面幅でも絶対に折り返さない */
  max-width:1760px;
  margin:0 auto;
  padding-inline:1rem;
  position:relative;
  z-index:2;
}
.bb-worry{
  position:relative;
  /* 【1】固定 width をやめ、親幅に応じて3列が均等に縮む（折り返し防止） */
  flex:1 1 0;
  min-width:0;
  max-width:560px;                               /* 広い画面では Wix実測どおり最大560pxで頭打ち */
  /* 透明余白の重なり量。画面幅に比例して滑らかに変化させる（幅ごとの固定値をやめてジャンプ解消）。
     広い画面では -5rem で頭打ち、狭くなるほど 0 に近づく。 */
  margin-inline:clamp(-5rem, -4.2vw, -0.4rem);
}
.bb-worry:first-child{ margin-left:0; }
.bb-worry:last-child{ margin-right:0; }

/* 3列を「左→中央→右」の順に1列ずつ拡大する6秒ループ（自動・無限）。各列は自区間(2秒)の中央でピーク、
   区間の終わりで等倍に戻る。列全体(.bb-worry)を1ユニットで scale し、ピーク前後だけ z-index を上げる。
   0%と100%が同じ状態なのでループの継ぎ目でジャンプしない。 */
.bb-worries .bb-worry{
  z-index:1;
  transform-origin:center center;   /* 上下対称に膨らむ。傾いた吹き出しの列がズレて見える場合は center bottom も可 */
  will-change:transform;
  animation:bb-worry-pulse 6s ease-in-out infinite;
}
/* ピーク時刻 = 1s + delay（mod 6）。中央=3s ⇒ delay 2s(≡-4s)／右=5s ⇒ delay 4s(≡-2s)。
   負値で指定＝読み込み直後から定常ループ（両列とも内部時刻は scale(1) の平坦区間で開始）。 */
.bb-worries .bb-worry:nth-child(2){ animation-delay:-4s; }   /* 中央：ピーク 3s */
.bb-worries .bb-worry:nth-child(3){ animation-delay:-2s; }   /* 右　：ピーク 5s */

@keyframes bb-worry-pulse{
  0%     { transform:scale(1);    z-index:1; }
  5%     { z-index:6; }
  16.67% { transform:scale(1.12); z-index:6; }   /* 自区間の中央（≒1秒）でピーク */
  30%    { z-index:6; }
  33.34% { transform:scale(1);    z-index:1; }   /* 自区間の終わり（≒2秒）で等倍に戻る */
  100%   { transform:scale(1);    z-index:1; }
}

/* 動きを減らす設定：拡大縮小ループを止めて常に等倍で静止 */
@media (prefers-reduced-motion: reduce){
  .bb-worries .bb-worry{ animation:none; transform:none; }
}

/* 吹き出し（下向きしっぽ付きの画像。CSSの角丸ボックスは廃止） */
.bb-bubble{
  position:relative;
  width:100%;
  aspect-ratio:551 / 310;                        /* Wix実測 551×310px（＝about-4/speech-bubble.png 全体） */
  background:url("../img/about-4/speech-bubble.png") no-repeat center top;
  background-size:contain;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 左右余白は吹き出し幅に対する%指定なので、幅が変わっても比率一定（@media 切替なし）。 */
  padding:0 24%;
  /* 薄グレーの吹き出しがくすみピンク背景に溶けないよう輪郭に影。
     drop-shadow は背景画像の透過形状（しっぽ含む）をなぞる。--left/--right の rotate にも追従。 */
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.17));
}
.bb-bubble--left{ background-image:url("../img/about-4/speech-bubble-flipped.png"); transform:rotate(-4deg); }
.bb-bubble--right{ transform:rotate(4deg); }     /* 中央はまっすぐ。左右だけ傾ける */
.bb-bubble p{
  margin:0;
  /* Wix実測 17px。狭くなるほど連続的に縮小（@media 切替は廃止） */
  font-size:clamp(6px, 1.4vw, 17px);
  font-weight:500;
  line-height:1.4;
  color:#6b6b6b;
  text-align:center;
}
/* 吹き出しの傾きを文字側で相殺（文字は回転させない） */
.bb-bubble--left  p{ transform:rotate(4deg); }
.bb-bubble--right p{ transform:rotate(-4deg); }

/* ロボット＋マークを包む箱。max-content でロボット画像の幅ちょうどに縮む＝
   マークの %指定がロボットのサイズ変化に自動追従する（@media 不要で連続）。 */
.bb-worry-figure{
  position:relative;
  width:max-content;
  max-width:100%;
  margin:-6% auto 0;                             /* 中央寄せ＋吹き出しのしっぽに密着 */
}
/* 両端ロボットの内向きシフト。1920px〜320px を1本の clamp() で連続変化（@media 廃止）。 */
.bb-worry:first-child .bb-worry-figure{ left:clamp(0.5rem, 4.6vw, 5.5rem); }
.bb-worry:last-child  .bb-worry-figure{ left:clamp(-5.5rem, -4.6vw, -0.5rem); }

/* ロボット：aspect-ratio 指定なし、height:auto で各画像の元比率を保持
   （worry-robot-shrug=0.79 / worry-robot-typing=0.85 / worry-robot-thinking=0.80）。幅は clamp() で連続。 */
.bb-worry-robot{
  position:relative;
  z-index:2;
  display:block;
  width:clamp(48px, 14vw, 224px);
  height:auto;
}
/* 左端(worry-robot-typing)は他より小さく見えるので少し大きめの clamp()（幅で指定＝figure の max-content が安定）。 */
.bb-worry:first-child .bb-worry-robot{ width:clamp(52px, 15vw, 240px); }

/* 添えアイコン：位置・サイズはすべて「ロボット箱(.bb-worry-figure)に対する%」。
   ロボットが vw で伸縮すると同じ比率で追従するので、@media も clamp も不要で連続。 */
.bb-worry-mark{
  position:absolute;
  z-index:3;
  height:auto;
  pointer-events:none;
}
/* ％はすべて .bb-worry-figure(=ロボット箱)基準なので、1920px でも 320px でも同じ見た目。 */
.bb-worry-mark--q{     left:-20%; top:6%;   width:42%; transform:rotate(-30deg); }  /* 左ロボの頭〜肩の左上（PCには重ねない） */
.bb-worry-mark--swirl{ right:2%;  top:-4%;  width:42%; transform:rotate(50deg); }  /* 右ロボの右耳あたり */

/* モバイル(≤767.98px)専用：リード文の強制改行＋リード文の可読性対策（色は不変）。 */
@media (max-width:767.98px){
  .bb-hero p.lead br{ display:block !important; }

  /* 文字の後ろに蛍光ペン風の帯。box-decoration-break:clone で各行にフィット
     （改行ごとに帯が分かれる＝1枚の四角い箱にならない）。背景画像は元のまま。 */
  .bb-hero-copy p.lead{ line-height:2; }
  .bb-hero-copy p.lead .bb-hl{
    background:rgba(255,255,255,0.82);
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    padding:0.08em 0.32em;
    border-radius:4px;
  }

  /* ============================================================
     お悩み見出し（.bb-story h2.bb-gradient）モバイル専用調整。
     about-4.html 側で「その業務、」の直後に <br class="d-md-none"> を入れ、
     モバイルだけ2行にした。それに伴う2点の対応（デスクトップ=常に1行は不変）。
     ============================================================ */

  /* ① 文字サイズ拡大。
     デスクトップの clamp(15px, 3.6vw, 52px) は「絶対1行」用に下限15pxまで
     絞っていた値。2行に分けたモバイルでは下限をここまで下げる必要がないので
     モバイル専用に置き換える。
       - 5vw：2行目「AIでもっとラクにできるかもしれません」は全角約18字＋
         .bb-gradient-text の padding-inline 0.15em×2 で約18.3em 相当。h2 は
         white-space:nowrap のまま（行内では折り返さない＝溢れると横スクロール）。
         使える幅は「ビューポート − Bootstrap .container 左右余白24px」。
         最狭の基準幅 375px で 5vw=18.75px → 2行目≒343px ＜ 使用可 351px（余裕約8px）。
         理論上限は約5.1vw（375pxで余裕ほぼ0）なので、5vw で打ち止め。
         ※ 5.5〜6vw は 375px で 2行目が約20〜60px はみ出すため不採用。
       - 下限15px：〜約320px幅の端末用の保険（現行と同値。320px以下は今回対象外）。
       - 上限34px：約680px幅で頭打ち。768pxのデスクトップ(3.6vw≒27.6px)との境界で
         文字サイズが多少跳ねるのは許容（実機スマホは768pxをまたがない）。 */
  .bb-story h2.bb-gradient{
    font-size:clamp(15px, 5vw, 34px);
    line-height:1.65;                              /* 2行の行間＋各行のマーカー帯が次行と干渉しない高さ */
  }

  /* ② マーカー（蛍光ペン）帯を2行対応にする。
     デスクトップの ::before は「h2 全体を覆う1枚の絶対配置ボックス」なので、
     2行になると帯が2行目の位置にしか出ない。モバイルだけ ::before を止め、
     テキストを内包するインライン要素 .bb-gradient-text の background として描く。
     box-decoration-break:clone で行ごとに背景ボックスが分割され、1行目・2行目
     それぞれの文字下に帯が乗る（.bb-hero-copy .bb-hl と同じ手法）。
     既存資産の流用：
       - スイープは同じ @keyframes bb-marker-sweep（background-size 0%→100%）。
       - JS（about.js）の .js-marker（初期=隠す）／.is-marked（画面内で再生）
         制御はそのまま。帯を乗せる対象要素が ::before → .bb-gradient-text に
         変わるだけで、クラスの付け外しは一切変更なし。
     デスクトップから変わる点（2行化に伴い許容）：
       - スイープが「1本の連続した掃き」ではなく「各行同時に左→右」になる。
       - 先端のぼかし（::before の filter:blur）は無し。blur を文字を持つ
         .bb-gradient-text に掛けると赤文字までボケるため。帯の上下端の
         やわらかさは linear-gradient 自体のフェードで従来どおり保たれる。 */
  .bb-story h2.bb-gradient::before{ display:none; }   /* デスクトップ用の1枚箱マーカーを停止 */

  .bb-story h2.bb-gradient .bb-gradient-text{
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
    background-image:linear-gradient(180deg,
      rgba(255,219,183,0)   0%,
      rgba(255,219,183,.58) 22%,
      rgba(255,219,183,.58) 78%,
      rgba(255,219,183,0)   100%);
    background-repeat:no-repeat;
    background-position:0 80%;                     /* 下寄りの帯（デスクトップ ::before と同値） */
    background-size:100% 52%;                      /* JSなし／reduced-motion 時の静止フォールバック（満タン） */
    padding-inline:0.15em;                         /* 帯が文字の左右にほんの少しはみ出す（負マージンは付けない＝溢れ防止） */
  }
  /* GSAP 有効時：about.js が .js-marker を即付与 → 初期は「幅0%＝隠す」 */
  .bb-story h2.bb-gradient.js-marker .bb-gradient-text{ background-size:0% 52%; }
  /* 画面に入るたび about.js が .is-marked を付け直す → 0%→100% を各行同時に再生 */
  .bb-story h2.bb-gradient.js-marker.is-marked .bb-gradient-text{
    animation:bb-marker-sweep 1.5s ease-in-out both;
  }
}

/* 動きを減らす設定（モバイル）：デスクトップ側 ::before の同等ルール(上部)に合わせた明示。
   about.js は reduced-motion 時 early return で .js-marker を付けないため、実際には
   .bb-gradient-text は base の 100% 52%（満タン静止）のまま。念のため固定しておく。 */
@media (max-width:767.98px) and (prefers-reduced-motion: reduce){
  .bb-story h2.bb-gradient .bb-gradient-text{ animation:none; background-size:100% 52%; }
}

/* ---------- お悩み解決の導線（.bb-solve-box） ---------- */
/* ピンクの波背景を全幅で敷き、その上に白い角丸カードを浮かせる。.bb-story(白)の内側なので
   100vw＋left:50%＋translateX(-50%) でビューポート中央基準の全幅バンドにする（.bb-hero と同じ手法）。 */
.bb-solve-box{
  position:relative;
  width:100vw;
  max-width:100vw;
  left:50%;
  transform:translateX(-50%);
  margin-top:0;                                  /* 悩みゾーン下端（まっすぐ・白）とそのまま連結 */
  /* 上下余白＝白カード上下のピンク余白＝玉が漂える空間。上下同値でカードを中央に維持。 */
  padding-inline:1rem;
  padding-block:clamp(4rem, 11.5vw, 13rem);      /* セクションの縦幅（上限 13rem） */
  text-align:center;
  overflow:hidden;
  isolation:isolate;   /* .bb-orbs 用に独立した重ね合わせコンテキストを作り、演出をこの帯の中だけに閉じる */
  /* 波模様は既存のピンク波画像で代用。上端(0-20%)と下端(72-100%)は #fff へフェードさせ、
     隣接する .bb-story の白パディング／.bb-cando の白地となめらかに繋ぐ
     （帯の縁に全幅のくっきり線を出さない）。読めない場合の保険で下地に薄ピンクの単色も敷く。 */
  background:
    linear-gradient(180deg,
      #fff 0%,
      rgba(255,255,255,0) 20%,
      rgba(255,255,255,0) 72%,
      #fff 100%),
    var(--bb-pink-bg);
}
.bb-solve-card{
  position:relative;
  z-index:1;           /* .bb-orbs(z-index:0)より前。文言カードは常に光点の上 */
  max-width:600px;
  margin-inline:auto;
  padding:clamp(2rem, 5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem);
  background:#fff;
  border-radius:1.25rem;
  box-shadow:0 20px 44px -16px rgba(190,110,120,.4);
  overflow:hidden;     /* シャイン帯を角丸カード内にクリップ（box-shadow は外側なので影響なし） */
}
/* カードを斜めに通り過ぎる反射（シャイン）。無限ループで、@keyframes 0-60% 待機（≈2.7秒）→ 60-100% 通過（≈1.8秒）。
   斜めの linear-gradient を背景にして background-position でスクロールさせる方式
   （回転長方形の translate は四隅のカバーに幾何ズレが出るため不採用）。 */
.bb-solve-card::before{
  content:"";
  position:absolute;
  inset:0;                                       /* カード等身大。角丸は overflow:hidden でクリップ */
  z-index:2;                                     /* カード内の文字・ボタンより手前（帯を上に通す） */
  pointer-events:none;                           /* ボタンのクリック／ホバーを邪魔しない */
  /* 真っ白でなく“ごくわずかに暖色”の半透明白。中央 0.66 → 両端 透明。 */
  background-image:linear-gradient(120deg,
    rgba(255,255,255,0)   44%,
    rgba(255,251,246,.22) 47%,
    rgba(255,244,235,.66) 50%,
    rgba(255,251,246,.22) 53%,
    rgba(255,255,255,0)   56%);
  background-repeat:no-repeat;
  background-size:260% 260%;                     /* カードより大きく取り、position で帯を通過させる */
  background-position:150% 150%;                 /* 待機位置＝帯は左上の外（@keyframes 0-60% と一致） */
  animation:bb-card-shine 4.5s ease-in-out infinite;
}
@keyframes bb-card-shine{
  0%, 60% { background-position:150% 150%; }     /* 待機：帯はカード左上の外で静止（≈2.7秒） */
  100%    { background-position:-50% -50%; }     /* 通過：左上→右下へ斜めに抜ける（≈1.8秒） */
}
/* 動きを減らす設定：シャインは出さない（通常の白いカードのまま） */
@media (prefers-reduced-motion: reduce){
  .bb-solve-card::before{ display:none; }
}
.bb-solve-lead{
  font-size:clamp(1.45rem, 3vw, 1.95rem);        /* ロゴ height は px 固定なのでこの font-size には連動しない */
  font-weight:700;
  line-height:1.7;
}
/* height・vertical-align とも px 固定。.bb-solve-lead の font-size を変えてもロゴは連動して拡大しない。 */
.bb-solve-card img{ height:37.2px; vertical-align:-10px; margin:0 .15em; }
/* 上限 1.35rem。スマホ幅で「＼ … ／」が2行に折り返すため clamp() で ~600px 未満は連続縮小。 */
.bb-solve-note{ color:#9a8a8a; letter-spacing:.08em; font-size:clamp(1.1rem, 3.4vw, 1.35rem); margin-bottom:1.5rem; }

/* ---------- お悩み導線の背景演出：色の丸ぼかし玉 ---------- */
/* 個別の丸ぼかし要素8個で演出（text-shadow 大量生成方式は灰色に濁るため不採用）。色・大きさ・位置・アニメは各自に指定。
   閉じ込めは .bb-solve-box の overflow:hidden / isolation:isolate ＋ .bb-solve-card{ z-index:1 } で担保。 */
.bb-orbs{
  position:absolute;
  inset:0;
  z-index:0;                 /* .bb-solve-box の背景より前・.bb-solve-card(z-index:1)より後ろ */
  pointer-events:none;
  overflow:hidden;
  /* 上下端で玉自身をフェードさせ、overflow:hidden の直線カットが見えないようにする。
     背景の白フェード範囲（.bb-solve-box の linear-gradient 上0-20%／下72-100%）に合わせる。
     黒=そのまま見える／transparent=消える。数値は Live Server で背景と見比べて微調整。 */
  -webkit-mask-image:linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 88%, transparent 100%);
  mask-image:linear-gradient(to bottom,
    transparent 0%, #000 10%, #000 88%, transparent 100%);
}
.bb-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(40px);         /* ぼかし量。大きいほど輪郭が柔らかい（円がくっきりしすぎたら上げる） */
  opacity:.6;                /* 薄い/飛ぶなら .75 前後へ */
  will-change:transform;
}
/* 8個それぞれ色・大きさ・初期位置をバラバラに（位置は % 指定で画面幅に追従）。
   色相(hsl の1つ目)は 340-360／0-40 の暖色（赤・ピンク・オレンジ）のみ。 */
/* animation: <keyframe> <duration> <delay(負=途中から)> infinite ease-in-out。alternate は付けない
   （0%/100% がどちらも opacity:0 で継ぎ目が目立たない）。左側の玉は主に右へ、右側の玉は主に左へ流す。 */
.bb-orb--1{ width:180px; height:180px; top:10%; left:8%;  background:hsl(350 85% 65%); animation:bb-orb-drift-a 15s -3s  infinite ease-in-out; }
.bb-orb--2{ width:220px; height:220px; top:55%; left:15%; background:hsl(15  90% 60%); animation:bb-orb-drift-c 19s -9s  infinite ease-in-out; }
.bb-orb--3{ width:160px; height:160px; top:5%;  left:60%; background:hsl(340 90% 70%); animation:bb-orb-drift-b 13s -6s  infinite ease-in-out; }
.bb-orb--4{ width:200px; height:200px; top:50%; left:75%; background:hsl(25  95% 62%); animation:bb-orb-drift-b 17s -12s infinite ease-in-out; }
.bb-orb--5{ width:140px; height:140px; top:70%; left:45%; background:hsl(355 85% 68%); animation:bb-orb-drift-a 12s -2s  infinite ease-in-out; }
.bb-orb--6{ width:170px; height:170px; top:20%; left:35%; background:hsl(10  90% 65%); animation:bb-orb-drift-c 20s -14s infinite ease-in-out; }
.bb-orb--7{ width:150px; height:150px; top:35%; left:88%; background:hsl(0   90% 66%); animation:bb-orb-drift-b 14s -7s  infinite ease-in-out; }
.bb-orb--8{ width:190px; height:190px; top:78%; left:22%; background:hsl(20  92% 63%); animation:bb-orb-drift-a 18s -10s infinite ease-in-out; }

/* 0%/100% は opacity:0（＝見えない）で揃える。中盤で大きく移動しつつ現れて消える。
   translate は 100〜280px と玉の直径以上に取り、"その場で震える" にならないようにする。 */
@keyframes bb-orb-drift-a{
  0%   { transform:translate(0, 0)          scale(0.9);  opacity:0; }
  15%  { opacity:.7; }
  50%  { transform:translate(180px, -150px) scale(1.15); opacity:.55; }
  85%  { opacity:.6; }
  100% { transform:translate(280px, 70px)   scale(0.85); opacity:0; }
}
@keyframes bb-orb-drift-b{
  0%   { transform:translate(0, 0)           scale(1);   opacity:0; }
  22%  { opacity:.6; }
  55%  { transform:translate(-200px, 140px)  scale(0.9); opacity:.45; }
  82%  { opacity:.65; }
  100% { transform:translate(-110px, -190px) scale(1.1); opacity:0; }
}
@keyframes bb-orb-drift-c{
  0%   { transform:translate(0, 0)         scale(0.95); opacity:0; }
  18%  { opacity:.65; }
  48%  { transform:translate(120px, 185px) scale(1.2);  opacity:.6; }
  78%  { opacity:.5; }
  100% { transform:translate(-60px, 260px) scale(0.9);  opacity:0; }
}

/* 「アニメーションを減らす」設定の端末では静止させる */
@media (prefers-reduced-motion: reduce){
  .bb-orb{ animation:none; }
}

/* ---------- できることセクション ---------- */
.bb-cando{ background:#fff; }
/* Bootstrap h2 標準（PC ≈2rem）ではセクション見出しとして小さいので明示指定。
   画面幅で連続変化（PC上限 2.9rem ≈ 標準の約1.45倍／狭幅は下限 2rem）。
   ロゴ画像(.bb-cando h2 img)は height:1.1em で文字サイズに連動して一緒に拡大する。 */
.bb-cando h2{ font-size:clamp(2rem, 4.5vw, 2.9rem); }
/* 狭幅で「ができること」がロゴと同じ行に半端に収まり語中で折り返すのを防ぐ。
   nowrap でこの語をひとまとまりにし、折り返す時は「ロゴ／ができること」の2行に。 */
.bb-cando h2 .bb-cando-h2-text{ white-space:nowrap; }
.bb-cando h2 img{ height:1.1em; vertical-align:-4px; margin-right:.3em; }

/* 4カードは Bootstrap グリッド（.row.g-4 / .col-md-6 / .col-lg-3）で
   モバイル1列・タブレット2列・PC4列。3Dフェードインの奥行き用に perspective を敷く。 */
.bb-cando-cards{ perspective:1200px; }

.bb-feature-card{
  height:100%;
  padding:1.1rem 1.25rem 1.25rem;
  text-align:center;
  background:#fff;
  border:1px solid #f1d3d7;
  border-radius:1rem;
  box-shadow:0 10px 28px -16px rgba(180,110,120,.45);
}
/* スクロール連動アニメの初期状態。GSAP + ScrollTrigger が読み込めた時だけ
   JS が各カードに .js-cando-anim を付与する。CSS 単体では opacity:0 を固定しない
   （JS 失敗時にカードが永久に消えるのを防ぐフォールバック）。 */
.bb-feature-card.js-cando-anim{ opacity:0; }

.bb-feature-illust{
  height:120px;
  margin-bottom:.85rem;
  display:flex;
  align-items:center;
  justify-content:center;
  /* 個別イラストは4枚とも透過グレースケール線画。Wix版と同じく白カード地に直接置く。 */
  overflow:hidden;
}
.bb-feature-illust img{ max-width:100%; max-height:100%; object-fit:contain; }
.bb-feature-illust svg{ width:54px; height:54px; color:var(--bb-coral); }
.bb-feature-card h3{
  font-size:1.02rem; font-weight:700; margin-bottom:.4rem;
  line-height:1.4;
  /* 2行になる場合は左右の行の長さを均等に寄せる（未対応ブラウザは通常折り返し） */
  text-wrap:balance;
  /* 見出しが1行のカードと2行のカードが混在しても本文の開始位置を揃える。
     1.4(line-height) × 2行 ＝ 2.8em ぶんの高さを常に確保し、中で天地中央に置く。 */
  min-height:2.8em;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bb-feature-card p{
  font-size:.85rem; color:#555; margin:0;
  /* 最後の行が「化。」のように極端に短くなる孤立文字を自動で回避
     （未対応ブラウザは通常の折り返しに戻るだけ） */
  text-wrap:pretty;
}

/* ---- 中央画像＋四隅アイコン（ハブレイアウト） ---- */
/* 個々のアイコン（.bb-badge）はアイコン＋説明文<p>を1セットにしたブロック。 */
.bb-cando-hub .bb-badge{ text-align:center; }
/* スクロール連動フェードインの初期状態。about.js が GSAP を読めた時だけ
   .js-badge-anim を付与する（.bb-feature-card.js-cando-anim と同じフォールバック設計。
   JS 失敗時はクラスが付かず＝アイコンも文字もそのまま表示）。 */
.bb-cando-hub .bb-badge.js-badge-anim{ opacity:0; }
.bb-cando-hub .bb-icon-circle{
  width:68px;height:68px;border-radius:50%;
  background:var(--bb-pink-bg);
  display:flex;align-items:center;justify-content:center;
  color:var(--bb-red);
  margin:0 auto .6rem;
}
.bb-cando-hub .bb-icon-circle img{ width:36px; height:36px; object-fit:contain; }
/* 「的と矢」だけ視覚的重心の補正（矢羽根に重みが偏るため右上へごく僅かに）。
   円(68px)と画像(36px)の余白は各辺16pxあり、この程度ではみ出さない。他3アイコンは対象外。 */
.bb-icon-target{ transform:translate(2px, -2px); }
.bb-cando-hub .bb-badge p{ font-size:.95rem; font-weight:500; margin:0; }

/* モバイル／タブレット（〜991px）：四隅配置だと窮屈・重なりが起きやすいため、
   この幅では「アイコン4つ（2×2）→ 中央画像」の縦順に切り替える。
   中央画像の下に続くカード4枚は .bb-cando-hub の外なので自動的にこの後ろに並ぶ。 */
.bb-cando-hub{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:1.75rem 1rem;
  max-width:440px;
  margin-left:auto;
  margin-right:auto;
  justify-items:center;
  align-items:start;
}
.bb-cando-hub .bb-badge{ max-width:200px; }
.bb-badge--tl{ grid-area:1 / 1; }        /* 1段目・左 */
.bb-badge--tr{ grid-area:1 / 2; }        /* 1段目・右 */
.bb-badge--bl{ grid-area:2 / 1; }        /* 2段目・左 */
.bb-badge--br{ grid-area:2 / 2; }        /* 2段目・右 */
.bb-cando-hub-center{ grid-area:3 / 1 / 4 / -1; }  /* 3段目・全幅に画像 */
.bb-cando-hub-center img{
  display:block;
  width:clamp(190px, 54vw, 260px);
  height:auto;
  margin:0 auto;
}

/* PC（992px以上）：3列グリッドで中央＝画像・四隅＝アイコン。
   中央セルが2行ぶんをまたぎ、四隅のアイコンが画像を囲む。 */
@media (min-width:992px){
  .bb-cando-hub{
    grid-template-columns:1fr auto 1fr;
    grid-template-rows:auto auto;
    gap:2.5rem 2rem;
    max-width:900px;
    align-items:center;
  }
  .bb-cando-hub .bb-badge{ max-width:210px; }
  .bb-cando-hub-center{
    grid-column:2;
    grid-row:1 / span 2;
    order:0;
  }
  .bb-cando-hub-center img{ width:clamp(280px, 30vw, 380px); }
  .bb-badge--tl{ grid-column:1; grid-row:1; }
  .bb-badge--tr{ grid-column:3; grid-row:1; }
  .bb-badge--bl{ grid-column:1; grid-row:2; }
  .bb-badge--br{ grid-column:3; grid-row:2; }
}

/* ---------- こんなこともできる？ ---------- */
.bb-more{
  /* 背景画像（Wix版のピンクの波デザイン）を全幅フルブリードで敷く。
     .bb-more は body 直下の <section>＝すでに画面幅いっぱいなので、100vw トリックは不要。
     cover＝縦横比を保ったまま短辺基準で全面を覆う（伸び縮み・タイル状の繰り返しなし）。
     下敷きの linear-gradient は画像読み込み前・失敗時のフォールバック（淡いピンク）。 */
  background:
    url("../img/about-4/bg-pink-wave.png") center center / cover no-repeat,
    linear-gradient(120deg, var(--bb-pink-bg) 0%, var(--bb-pink-mid) 55%, #f6b9be 100%);
  background-color:var(--bb-pink-bg);
  color:var(--bb-black);
  position:relative;
  overflow:hidden;
}
/* セクションの縦幅を詰める。HTML 側は py-4 py-lg-5（実効：モバイル 1.5rem／lg以上 3rem）、
   その上乗せぶんを .bb-more .container の padding で調整。 */
.bb-more .container{ padding-top:clamp(0.75rem, 2vw, 1.25rem); padding-bottom:clamp(0.75rem, 2vw, 1.25rem); }
/* 赤 → オレンジ → サーモンの一方向グラデ文字（ヒーロー「AI」と同系だが3色に整理）。シマーは付けず静止表示。 */
.bb-more h2{
  font-weight:800;
  font-size:clamp(2.2rem, 5vw, 3.2rem);
  line-height:1.3;
  margin-bottom:1.25rem;
  color:transparent;
  background:linear-gradient(90deg,
    #d9333f 0%,
    #ee7800 50%,
    #ec6d71 100%);
  background-size:100% auto;
  -webkit-background-clip:text;
  background-clip:text;
  display:inline-block;
}
.bb-more p{ color:#6b4a4a; }
/* 見出し直下のリード文：やや大きめ・太字寄り。 */
.bb-more p.mb-1{ font-size:clamp(1.1rem, 2.2vw, 1.4rem); font-weight:600; line-height:1.8; }
/* 説明文：リードより少し小さめの読みやすい本文サイズ・ゆったりした行間。 */
.bb-more p.mb-4{ font-size:clamp(1rem, 1.6vw, 1.15rem); line-height:1.95; margin-top:.75rem; }
/* ボタンはヒーロー・解決カードと同じグラデーション（.bb-btn-coral）。影だけ背景に馴染む色に上書き。 */
.bb-more .bb-btn-coral{ margin-top:.5rem; box-shadow:0 12px 26px -12px rgba(150,70,80,.55); }
/* PC幅（lg以上）：本文と同じく左寄せにする。以前はボタンだけ列幅内で水平中央に
   置いていたが、本文の左端と揃わず浮いて見えるため margin-inline を 0 にした。
   991px以下は HTML 側の text-center が効いて中央に来る。 */
@media (min-width:992px){
  .bb-more .bb-btn-coral{ display:block; width:fit-content; margin-inline:0; }
}
/* PC幅では画像列で横並び、モバイルでは col-lg-* が解けて縦積み。
   セクションの縦幅がロボット画像に引っ張られないよう、以前よりひとまわり小さく。 */
.bb-more-robot{ max-width:clamp(190px, 27vw, 300px); }

/* ---------- 共通フッターの弧について ---------- */
/* 以前ここに about-4 専用の「穴あき弧」（SVGマスク）を書いていたが、同じ方式を
   base.css / style.css の .bb-footer-arc 本体に取り込んで全ページ共通にしたため削除。
   弧の形や深さを変えたい場合は base.css（と style.css）の .bb-footer-arc を編集する。 */

/* Loading（読み込み画面） */
/* ============================================================
   Loading（ロゴを見せる読み込み画面）
   読み込み中は <html class="is-loading"> で背後のスクロールを止め、
   完了すると .bb-loader に .is-done が付いて上方向に開きながら消える。
   ============================================================ */
html.is-loading,
html.is-loading body {
  overflow: hidden;
}

/* 幕そのものは透明な入れ物。白地は中の縦パネルが受け持つ */
.bb-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
}

/* 開き終わったら描画対象から完全に外す */
.bb-loader.is-hidden {
  display: none;
}

/* ---- 幕を構成する縦パネル ---- */
/* 6枚を横に並べ、左から順に少しずつ遅らせて上へ引き上げる。
   1枚の板が上がるより、細い板が波打つように抜けるほうが動きが出る */
.bb-loader__panels {
  position: absolute;
  inset: 0;
  display: flex;
}

.bb-loader__panels span {
  position: relative;
  flex: 1;
  background: #fff;
  will-change: transform;
  transition: transform 0.95s cubic-bezier(0.76, 0, 0.24, 1);
  transition-delay: calc(var(--i, 0) * 0.07s);
  /* 板の継ぎ目に隙間が出ないよう、隣とわずかに重ねる */
  margin-right: -1px;
}

/* 幕が開き始めたら、まだ要素が残っていてもクリックは背後のページへ通す */
.bb-loader.is-done {
  pointer-events: none;
}

.bb-loader.is-done .bb-loader__panels span {
  transform: translateY(-100%);
}

/* 引き上がる板の下端にグラデーションの線を出し、光が上へ抜けるように見せる */
.bb-loader__panels span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--bb-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
  transition-delay: calc(var(--i, 0) * 0.07s);
}

.bb-loader.is-done .bb-loader__panels span::after {
  opacity: 0.9;
}

.bb-loader__inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}

/* 退場が始まったら、ロゴ以外は先に引いて主役を1つに絞る */
.bb-loader.is-exiting .bb-loader__bar,
.bb-loader.is-exiting .bb-loader__mark {
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* ロゴの背後で薄く回り続けるシンボルマーク */
.bb-loader__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(150px, 24vw, 210px);
  translate: -50% -50%;
  opacity: 0.07;
  animation: bb-loader-spin 14s linear infinite;
}

@keyframes bb-loader-spin {
  to { rotate: 360deg; }
}

.bb-loader__logo {
  width: clamp(150px, 26vw, 230px);
  opacity: 0;
  animation: bb-loader-logo-in 1s 0.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes bb-loader-logo-in {
  from { opacity: 0; translate: 0 14px; scale: 0.96; filter: blur(6px); }
  to   { opacity: 1; translate: 0 0;    scale: 1;    filter: blur(0); }
}

/* 進捗バーの溝。
   fill-mode に forwards ではなく backwards を使うのは、退場時に .is-exiting で
   opacity を上書きできるようにするため。アニメーションの forwards が残っていると
   後から書いたクラスの指定より強く、フェードアウトが効かなくなる。
   backwards なら遅延中だけ from（透明）を保ち、終わったら下の opacity:1 に戻る */
.bb-loader__bar {
  position: relative;
  width: clamp(120px, 20vw, 180px);
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(28, 35, 51, 0.12);
  opacity: 1;
  animation: bb-loader-fade-in 0.6s 0.5s ease backwards;
}

@keyframes bb-loader-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 溝の中を左から右へ伸びるグラデーション */
.bb-loader__bar i {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  background: var(--bb-gradient);
  scale: 0 1;
  animation: bb-loader-bar 1.5s 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bb-loader-bar {
  from { scale: 0 1; }
  to   { scale: 1 1; }
}

/* 動きを抑える設定の環境では、板の引き上げもロゴの移動も行わず、
   全体を静かにフェードさせるだけにする */
@media (prefers-reduced-motion: reduce) {
  .bb-loader {
    transition: opacity 0.4s ease;
  }

  .bb-loader.is-done {
    opacity: 0;
  }

  .bb-loader.is-done .bb-loader__panels span {
    transform: none;
    transition: none;
  }

  .bb-loader__panels span::after {
    display: none;
  }

  .bb-loader__mark,
  .bb-loader__logo,
  .bb-loader__bar,
  .bb-loader__bar i {
    animation: none;
    opacity: 1;
  }

  .bb-loader__mark {
    opacity: 0.07;
  }

  .bb-loader__bar i {
    scale: 1 1;
  }
}

/* 「できること」カードの見出しが、幅によって熟語の途中で割れていた
   （992〜1280px あたりで「紙をデータに、業／務をもっとラクに」）。
   auto-phrase で日本語の文節をまたがずに折り返し、balance で行の長さを揃える。
   未対応ブラウザではこれまでどおりの折り返しになるだけ。 */
.bb-feature-card h3{
  word-break: auto-phrase;
  text-wrap: balance;
}