/* Ported verbatim from 現行LP index.html (features section styles). Do not reinterpret. */
:root{

}



/* ================================
   Layout: Container
   ================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}



@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  46.81% { opacity: 0.5; transform: scale(1.3); }
}



/* ================================
   Features Section
   ================================ */
.features {
  padding: var(--section-py-pc) 0;
  background: var(--bg-white);
}



.section-header {
  text-align: center;
  margin-bottom: 72px;
}



.section-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--clanexe-purple);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 14px;
}



.section-title {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 18px;
}



.section-description {
  font-size: clamp(14px, 1.6vw, 17px);
  color: var(--text-secondary);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.8;
}



/* ================================
   Scroll Lock 演出
   各FEATUREカードを画面中央に固定（sticky）
   ================================ */

/* feature-list は relative にして、stickyの基準を提供 */
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}



/* 各カードの滞留領域（高さで滞留時間を決める） */
.feature-sticky-wrapper {
  min-height: 200vh;
  position: relative;
}



/* カードを画面中央に固定 */
.feature-sticky-wrapper > .feature-card {
  position: sticky;
  top: calc(50vh - 350px);
  height: 700px;
  width: 100%;
}



/* セクションヘッダーも同様にstickyで画面中央に固定
   FEATUREカードと同じサイズ・配置感に統一するため、固定高さ700pxで包み、
   内部flexで実コンテンツを縦中央配置 */
.feature-sticky-wrapper--header > .section-header {
  position: sticky;
  top: calc(50vh - 350px);
  height: 700px;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}



/* ================================
   Header Story Animation v3 (v1.13)
   設計思想: 「カメラが横移動する映画」
   - 主役は中央に来て、終わったら左へ流れて退場
   - F03チャットバブルのスタイル（角丸方向・色・余白）を継承
   - 6人のメンバーが個別に発言する
   ================================ */
.header-story {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 40px auto 0;
  height: 320px;
  pointer-events: none;
  user-select: none;
  overflow: visible;
}



.story-stage {
  position: absolute;
  inset: 0;
}



/* === アクター共通 === */
.story-actor {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}



.story-actor .actor-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-white);
  border: 2px solid var(--border-light);
  box-shadow: 0 4px 14px rgba(91, 87, 178, 0.10);
  position: relative;
  z-index: 2;
}



.story-actor .actor-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}



/* === Role ラベル: アイコンの上に役職を表示（小さめ） === */
.story-actor .actor-role {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.7;
}



/* メンバー6人の名前ラベルは Role ラベルと同じ距離(4px)でアイコンに寄せる */
.actor-member .actor-label {
  margin-top: 4px;
}



/*
  === You: イラスト差し替え用プレースホルダー ===
  後でイラストを入れる時は、.actor-you-image の中身を
  <img src="..." alt="You"> に置換するだけでOK。
  サイズ・配置は actor-you-image 側で固定。
*/
.actor-you-image {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ECECF0;
  border: 2px solid #D8D8E0;
  box-shadow: 0 4px 14px rgba(91, 87, 178, 0.06);
  overflow: hidden;
}


.actor-you-image > svg,
.actor-you-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


.actor-you-image > svg {
  width: 36px;
  height: 36px;
  color: #8A8A9E;
  object-fit: none;
}



/* === ClanExe コアAI === */
.actor-clan .actor-icon {
  background: linear-gradient(135deg, var(--clanexe-purple) 0%, var(--clanexe-purple-light) 100%);
  border-color: var(--clanexe-purple);
  box-shadow: 0 6px 20px rgba(91, 87, 178, 0.32);
}


.actor-clan .actor-icon svg {
  width: 28px;
  height: 28px;
  color: #FFFFFF;
}



/* === メンバー6人 === */
.actor-member .actor-icon {
  width: 52px;
  height: 52px;
  font-size: 16px;
  font-weight: 700;
  color: var(--bg-white);
  border-width: 2px;
}



.actor-m1 .actor-icon { background: var(--clanexe-purple-light); border-color: var(--clanexe-purple-light); }


.actor-m2 .actor-icon { background: #7BB89B; border-color: #7BB89B; }


.actor-m3 .actor-icon { background: #D9986B; border-color: #D9986B; }


.actor-m4 .actor-icon { background: #6BA3D9; border-color: #6BA3D9; }


.actor-m5 .actor-icon { background: #C783BA; border-color: #C783BA; }


.actor-m6 .actor-icon { background: #E5C46B; border-color: #E5C46B; }



/* === AIパネル === */
.actor-panel {
  width: 132px;
  height: 132px;
}


.actor-panel .panel-grid {
  width: 132px;
  height: 132px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(7, 1fr);
  gap: 3px;
}


.actor-panel .panel-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clanexe-purple-bg);
  border: 1.5px solid var(--clanexe-purple-light);
  opacity: 0.5;
}


.actor-panel .actor-label {
  margin-top: 14px;
}



/* === パネル回答吹き出し ===
   パネル登場後、周囲にランダム配置で8個ポップ。
   小さめサイズ（フォント11px、padding 6×10）で可愛らしく。
*/
.panel-reply {
  font-size: 11px;
  padding: 5px 9px;
  font-weight: 500;
  line-height: 1.4;
  background: var(--bg-white);
  border-color: var(--border-light);
  color: var(--text-secondary);
  box-shadow: 0 3px 10px rgba(91, 87, 178, 0.10);
}



/* ================================
   Summary Flow (シーン6最終)
   過程の振り返り: ラウンドロビン → パネル → レポート
   ミニチュアサイズで左から流入、最終的にAoi/Youの左側に展開
   ================================ */
.summary-flow {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  pointer-events: none;
}



/* 横並びの3ステップ */
.flow-row {
  display: flex;
  align-items: center;
  gap: 22px;
}



/* フロー全体の注釈 */
.flow-note {
  font-size: 10px;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  opacity: 0.7;
  text-align: center;
  white-space: nowrap;
}



.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}



.flow-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.05em;
  white-space: nowrap;
}



.flow-arrow {
  font-size: 24px;
  color: var(--clanexe-purple-light);
  font-weight: 300;
  line-height: 1;
  margin-top: -24px; /* ラベル分を打ち消して中央揃え */
}



/* === ミニラウンドロビン (6人円形配置の縮小版) === */
.flow-roundrobin {
  position: relative;
  width: 140px;
  height: 140px;
}



.flow-mini-member {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid;
  transform: translate(-50%, -50%);
}



/* 6人を半径56pxの円周上に60度刻みで配置 */
.flow-mini-member.fm-1 { background: var(--clanexe-purple-light); border-color: var(--clanexe-purple-light); transform: translate(-50%, -50%) translate(0, -56px); }


.flow-mini-member.fm-2 { background: #7BB89B; border-color: #7BB89B; transform: translate(-50%, -50%) translate(48px, -28px); }


.flow-mini-member.fm-3 { background: #D9986B; border-color: #D9986B; transform: translate(-50%, -50%) translate(48px, 28px); }


.flow-mini-member.fm-4 { background: #6BA3D9; border-color: #6BA3D9; transform: translate(-50%, -50%) translate(0, 56px); }


.flow-mini-member.fm-5 { background: #C783BA; border-color: #C783BA; transform: translate(-50%, -50%) translate(-48px, 28px); }


.flow-mini-member.fm-6 { background: #E5C46B; border-color: #E5C46B; transform: translate(-50%, -50%) translate(-48px, -28px); }



/* 議論サークル（縮小） */
.flow-roundrobin::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  border: 1.5px dashed var(--clanexe-purple-light);
  opacity: 0.5;
  transform: translate(-50%, -50%);
}



/* === ミニパネル === */
.flow-panel {
  width: 84px;
  height: 84px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
}


.flow-panel-dot {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--clanexe-purple-light);
  opacity: 0.6;
}



/* === ミニレポート === */
.flow-report {
  width: 44px;
  height: 52px;
  border-radius: 5px;
  background: var(--bg-white);
  border: 2px solid var(--clanexe-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(91, 87, 178, 0.18);
}


.flow-report svg {
  width: 24px;
  height: 24px;
  color: var(--clanexe-purple);
}



/* === レポート === */
.actor-report .actor-icon {
  width: 52px;
  height: 60px;
  border-radius: 6px;
  background: var(--bg-white);
  border: 2px solid var(--clanexe-purple);
  box-shadow: 0 6px 20px rgba(91, 87, 178, 0.22);
}


.actor-report .actor-icon svg {
  width: 28px;
  height: 28px;
  color: var(--clanexe-purple);
}



/* === 吹き出し（F03チャットスタイル継承） ===
   角尖り方式: 吹き出し本体の1つの角を尖らせて、それがアイコンを指す。
   - .corner-top-left  : 左上が尖る → 左下にアイコン → 吹き出しはアイコンの「右上」に置く
   - .corner-top-right : 右上が尖る → 右下にアイコン → 吹き出しはアイコンの「左上」に置く
*/
.story-bubble {
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--bg-gray);
  border: 1px solid var(--border-lighter);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-primary);
  box-shadow: 0 4px 14px rgba(26, 26, 46, 0.06);
  opacity: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  z-index: 5;
  will-change: transform, opacity;
  border-radius: 12px;
  font-weight: 500;
}



/* 4方向の角尖り: 吹き出しの4つの角のどれか1つを尖らせる
   尖った角がアイコンを指す方向を表す。
   - corner-tl: 左上尖り → アイコンは吹き出しの「左上」 → 吹き出しはアイコンの右下に置く
   - corner-tr: 右上尖り → アイコンは吹き出しの「右上」 → 吹き出しはアイコンの左下に置く
   - corner-bl: 左下尖り → アイコンは吹き出しの「左下」 → 吹き出しはアイコンの右上に置く
   - corner-br: 右下尖り → アイコンは吹き出しの「右下」 → 吹き出しはアイコンの左上に置く
*/
.story-bubble.corner-tl {
  border-radius: 4px 12px 12px 12px;
}


.story-bubble.corner-tr {
  border-radius: 12px 4px 12px 12px;
}


.story-bubble.corner-bl {
  border-radius: 12px 12px 12px 4px;
}


.story-bubble.corner-br {
  border-radius: 12px 12px 4px 12px;
}



/* 旧クラス互換 */
.story-bubble.corner-top-left { border-radius: 4px 12px 12px 12px; }


.story-bubble.corner-top-right { border-radius: 12px 4px 12px 12px; }



/* 自分発言（パープル背景・白文字） */
.story-bubble.is-self {
  background: var(--clanexe-purple);
  border-color: var(--clanexe-purple);
  color: #FFFFFF;
}



/* You の吹き出しはグレー寄りでモノローグ感を表現（斜体は使わない） */
.bubble-you {
  background: #F4F4F7;
  border-color: #E0E0E8;
  color: var(--text-secondary);
}



/* You の最終発話用クラス（互換性のため残置、現在は通常体で統一） */
.bubble-you.bubble-you-final {
  font-style: normal;
}



/* メンバー個別吹き出しの色 */
.bubble-m1 { background: var(--clanexe-purple-light); border-color: var(--clanexe-purple-light); color: #FFFFFF; }


.bubble-aoi-1, .bubble-aoi-2 { background: var(--clanexe-purple-light); border-color: var(--clanexe-purple-light); color: #FFFFFF; }


.bubble-m2 { background: #7BB89B; border-color: #7BB89B; color: #FFFFFF; }


.bubble-m3 { background: #D9986B; border-color: #D9986B; color: #FFFFFF; }


.bubble-m4 { background: #6BA3D9; border-color: #6BA3D9; color: #FFFFFF; }


.bubble-m5 { background: #C783BA; border-color: #C783BA; color: #FFFFFF; }


.bubble-m6 { background: #E5C46B; border-color: #E5C46B; color: #4A3A1E; }



.bubble-member-panel {
  font-size: 12px;
  padding: 7px 11px;
  background: var(--clanexe-purple-light);
  border-color: var(--clanexe-purple-light);
  color: #FFFFFF;
}



.bubble-report {
  font-size: 13px;
  padding: 8px 12px;
}



/* === 議論サークル === */
.discuss-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}


.discuss-circle svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}


.discuss-circle circle {
  fill: none;
  stroke: var(--clanexe-purple-light);
  stroke-width: 1.5;
  stroke-dasharray: 6 8;
  opacity: 0.6;
}



/* === メンバー1からパネルへの線 === */
.connector-line {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Aoi(-90)右端=-64から+2px=-62 〜 Panel(+80)左端=+14から-2px=+12
     線長 74px、中心x = -25、margin-left = -25 - 37 = -62 */
  width: 74px;
  height: 2px;
  margin: -1px 0 0 -62px;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}


.connector-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}


.connector-line line {
  stroke: var(--clanexe-purple-light);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}



/* ================================
   タイムライン (合計 22秒)
   シーン1 [0%   - 14%] 0.0-3.0s   You中央でモヤモヤ
   シーン2 [14%  - 27%] 3.0-6.0s   ClanExe登場、Youは少し左
   シーン3 [27%  - 41%] 6.0-9.0s   You退場、ClanExeが「メンバーを集めましょう」と発言、メンバー6人集結
   シーン4 [41%  - 73%] 9.0-16.0s  ClanExe退場、円形配置で議論（6人が順次発言）
   シーン5 [73%  - 91%] 16.0-20.0s 5人退場、メンバー1だけ残ってパネル登場、メンバー1発言
   シーン6 [91%  - 100%]20.0-22.0s レポート登場 → 左へ流れて退場
   ================================ */

@keyframes act-you {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(0) scale(0.94); }
  2.81%   { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1); }
  13.11%  { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1); }
  /* シーン2: ClanExe登場でYouは左へ。距離488px確保のため -244 */
  16.85%  { opacity: 1; transform: translate(-50%, -50%) translateX(-244px) scale(1); }
  25.28%  { opacity: 1; transform: translate(-50%, -50%) translateX(-244px) scale(1); }
  30%  { opacity: 0; transform: translate(-50%, -50%) translateX(-700px) scale(1); }
  /* シーン6: Youが画面右から再登場、最終位置(+400, 0) */
  96%   { opacity: 0; transform: translate(-50%, -50%) translateX(700px) scale(1); }
  98%   { opacity: 1; transform: translate(-50%, -50%) translateX(400px) scale(1); }
  100%  { opacity: 1; transform: translate(-50%, -50%) translateX(400px) scale(1); }
}



@keyframes bubble-you-anim {
  /* You: corner-bl (左下尖り) → 吹き出しはアイコンの「右上」
     ax=0/-244, w=346, dx=+207, dy=-53  → tx=207/-37, ty=-53 */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(207px, -53px) scale(0.92); }
  3.74%   { opacity: 1; transform: translate(-50%, -50%) translate(207px, -53px) scale(1); }
  13.11%  { opacity: 1; transform: translate(-50%, -50%) translate(207px, -53px) scale(1); }
  16.85%  { opacity: 1; transform: translate(-50%, -50%) translate(-37px, -53px) scale(1); }
  25.28%  { opacity: 1; transform: translate(-50%, -50%) translate(-37px, -53px) scale(1); }
  30%  { opacity: 0; transform: translate(-50%, -50%) translate(-700px, -53px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-700px, -53px) scale(1); }
}



@keyframes act-clan {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(700px) scale(0.94); }
  13.11%  { opacity: 0; transform: translate(-50%, -50%) translateX(700px) scale(0.94); }
  /* シーン2: 距離488px確保のため +244 */
  16.85%  { opacity: 1; transform: translate(-50%, -50%) translateX(244px) scale(1); }
  25.28%  { opacity: 1; transform: translate(-50%, -50%) translateX(244px) scale(1); }
  30%  { opacity: 1; transform: translate(-50%, -50%) translateX(0) scale(1); }
  /* シーン3後半: メンバーが集結している間、ClanExeはやや左へ */
  35.57%  { opacity: 1; transform: translate(-50%, -50%) translateX(-100px) scale(1); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translateX(-100px) scale(1); }
  43.06%  { opacity: 0; transform: translate(-50%, -50%) translateX(-700px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(-700px) scale(1); }
}



/* ClanExeの吹き出し: corner-tr (右上尖り) → 吹き出しはアイコンの「左下」
   ①ax=+244, w=178, dx=-123, dy=+53 → tx=121, ty=53
   ②ax=0→-100, w=178 → tx=-123→-223, ty=53
*/
@keyframes bubble-clan-1 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(700px, 53px) scale(0.92); }
  13.11%  { opacity: 0; transform: translate(-50%, -50%) translate(700px, 53px) scale(0.92); }
  16.85%  { opacity: 1; transform: translate(-50%, -50%) translate(121px, 53px) scale(1); }
  23.40%  { opacity: 1; transform: translate(-50%, -50%) translate(121px, 53px) scale(1); }
  26.21%  { opacity: 0; transform: translate(-50%, -50%) translate(121px, 53px) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(121px, 53px) scale(0.96); }
}



/* Aoi の早期発話① 「了解です！」 シーン2
   Aoi位置 (+244, 0), corner-tr (右上尖り) → 左下配置
   w=94, dx=-(34+47)=-81 → tx=244-81=163, ty=+53 */
@keyframes bubble-aoi-1 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(700px, 53px) scale(0.92); }
  13.11%  { opacity: 0; transform: translate(-50%, -50%) translate(700px, 53px) scale(0.92); }
  16.85%  { opacity: 1; transform: translate(-50%, -50%) translate(163px, 53px) scale(1); }
  23.40%  { opacity: 1; transform: translate(-50%, -50%) translate(163px, 53px) scale(1); }
  26.21%  { opacity: 0; transform: translate(-50%, -50%) translate(163px, 53px) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(163px, 53px) scale(0.96); }
}



/* Aoi の早期発話② 「メンバーを集めましょう」 シーン3
   Aoi位置 (0, 0), corner-br (右下尖り) → 左上配置
   tx=-123, ty=-53 (Aoiは中央で固定、移動しない) */
@keyframes bubble-aoi-2 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-123px, -53px) scale(0.92); }
  27.15%  { opacity: 0; transform: translate(-50%, -50%) translate(-123px, -53px) scale(0.92); }
  30%  { opacity: 1; transform: translate(-50%, -50%) translate(-123px, -53px) scale(1); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translate(-123px, -53px) scale(1); }
  43.06%  { opacity: 0; transform: translate(-50%, -50%) translate(-123px, -53px) scale(0.96); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-123px, -53px) scale(0.96); }
}



@keyframes bubble-clan-2 {
  /* ClanExe② corner-br (右下尖り) → 吹き出しはアイコンの「左上」
     ax=0→-100, w=178, dx=-123, dy=-53 → tx=-123→-223, ty=-53 */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-123px, -53px) scale(0.92); }
  27.15%  { opacity: 0; transform: translate(-50%, -50%) translate(-123px, -53px) scale(0.92); }
  30%  { opacity: 1; transform: translate(-50%, -50%) translate(-123px, -53px) scale(1); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translate(-223px, -53px) scale(1); }
  43.06%  { opacity: 0; transform: translate(-50%, -50%) translate(-700px, -53px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-700px, -53px) scale(1); }
}



/*
  メンバーは ClanExe の「メンバーを集めましょう」吹き出し直後に右から入場。
  シーン3後半で集結 (32-41%) → シーン4で円形配置 (46-73%)
*/

@keyframes act-m1 {
  /* シーン1: 画面外右で待機 */
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(700px); }
  13.11%  { opacity: 0; transform: translate(-50%, -50%) translateX(700px); }
  /* シーン2: 右から登場、Youと並ぶ位置(+244, 0) → 「お手伝いしましょうか？」発話 */
  16.85%  { opacity: 1; transform: translate(-50%, -50%) translate(244px, 0); }
  25.28%  { opacity: 1; transform: translate(-50%, -50%) translate(244px, 0); }
  /* シーン3: 中央(0, 0)へ移動 → 「メンバーを集めましょう」発話 */
  30%     { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translate(0, 0); }
  /* シーン4: 議論シーン円形配置の上ポジション (0, -100) */
  43.06%  { opacity: 1; transform: translate(-50%, -50%) translate(0, -100px); }
  68.34%  { opacity: 1; transform: translate(-50%, -50%) translate(0, -100px); }
  /* シーン5: パネル相手の位置 (-90, 0) */
  79.40%  { opacity: 1; transform: translate(-50%, -50%) translate(-90px, 0); }
  /* シーン6: 報告位置(+90, -13)へ。Youのアイコン中心と上下揃えるためy=-13 */
  95%     { opacity: 1; transform: translate(-50%, -50%) translate(-90px, 0); }
  98%     { opacity: 1; transform: translate(-50%, -50%) translate(90px, -13px); }
  100%    { opacity: 1; transform: translate(-50%, -50%) translate(90px, -13px); }
}



@keyframes act-m2 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  30.89%  { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  36.51%  { opacity: 1; transform: translate(-50%, -50%) translateX(80px); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translateX(80px); }
  43.06%  { opacity: 1; transform: translate(-50%, -50%) translate(86px, -50px); }
  68.34%  { opacity: 1; transform: translate(-50%, -50%) translate(86px, -50px); }
  79.40%  { opacity: 0; transform: translate(-50%, -50%) translate(560px, -50px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(560px, -50px); }
}



@keyframes act-m3 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  31.83%  { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  37.45%  { opacity: 1; transform: translate(-50%, -50%) translateX(140px); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translateX(140px); }
  43.06%  { opacity: 1; transform: translate(-50%, -50%) translate(86px, 50px); }
  68.34%  { opacity: 1; transform: translate(-50%, -50%) translate(86px, 50px); }
  79.40%  { opacity: 0; transform: translate(-50%, -50%) translate(560px, 50px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(560px, 50px); }
}



@keyframes act-m4 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  32.77%  { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  38.38%  { opacity: 1; transform: translate(-50%, -50%) translateX(200px); }
  43.06%  { opacity: 1; transform: translate(-50%, -50%) translate(0, 100px); }
  68.34%  { opacity: 1; transform: translate(-50%, -50%) translate(0, 100px); }
  79.40%  { opacity: 0; transform: translate(-50%, -50%) translate(0, 560px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(0, 560px); }
}



@keyframes act-m5 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  33.70%  { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  39.32%  { opacity: 1; transform: translate(-50%, -50%) translateX(260px); }
  43.06%  { opacity: 1; transform: translate(-50%, -50%) translate(-86px, 50px); }
  68.34%  { opacity: 1; transform: translate(-50%, -50%) translate(-86px, 50px); }
  79.40%  { opacity: 0; transform: translate(-50%, -50%) translate(-560px, 50px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-560px, 50px); }
}



@keyframes act-m6 {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  34.64%  { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  40.26%  { opacity: 1; transform: translate(-50%, -50%) translateX(320px); }
  43.06%  { opacity: 1; transform: translate(-50%, -50%) translate(-86px, -50px); }
  68.34%  { opacity: 1; transform: translate(-50%, -50%) translate(-86px, -50px); }
  79.40%  { opacity: 0; transform: translate(-50%, -50%) translate(-560px, -50px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-560px, -50px); }
}



/* === 議論シーン: 各メンバーの吹き出し ===
   各メンバーの位置に応じて、吹き出しが円の外側に向かうよう4方向の角尖りを使い分ける。
   配置式: dx = ±(w/2 + 34), dy = ±53 で計算（dy=53は h/2(19) + ギャップ34）
*/

/* m1 (上 0,-100) → 吹き出しは右上に出す → corner-bl
   w=150 → dx=+109, dy=-53 → tx=109, ty=-153 */
@keyframes bubble-m1-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(109px, -153px) scale(0.85); }
  44%  { opacity: 0; transform: translate(-50%, -50%) translate(109px, -153px) scale(0.85); }
  45.87%  { opacity: 1; transform: translate(-50%, -50%) translate(109px, -153px) scale(1); }
  51.49%  { opacity: 1; transform: translate(-50%, -50%) translate(109px, -153px) scale(1); }
  53.36%  { opacity: 0; transform: translate(-50%, -50%) translate(109px, -153px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(109px, -153px) scale(0.95); }
}



/* m2 (右上 86,-50) → 吹き出しは右上に出す → corner-bl
   w=136 → dx=+102, dy=-53 → tx=188, ty=-103 */
@keyframes bubble-m2-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(188px, -111px) scale(0.85); }
  47.74%  { opacity: 0; transform: translate(-50%, -50%) translate(188px, -111px) scale(0.85); }
  49.62%  { opacity: 1; transform: translate(-50%, -50%) translate(188px, -111px) scale(1); }
  55.23%  { opacity: 1; transform: translate(-50%, -50%) translate(188px, -111px) scale(1); }
  57.11%  { opacity: 0; transform: translate(-50%, -50%) translate(188px, -111px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(188px, -111px) scale(0.95); }
}



/* m3 (右下 86,50) → 吹き出しは右下に出す → corner-tl
   w=164 → dx=+116, dy=+53 → tx=202, ty=103 */
@keyframes bubble-m3-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(202px, 99px) scale(0.85); }
  51.49%  { opacity: 0; transform: translate(-50%, -50%) translate(202px, 99px) scale(0.85); }
  53.36%  { opacity: 1; transform: translate(-50%, -50%) translate(202px, 99px) scale(1); }
  59%  { opacity: 1; transform: translate(-50%, -50%) translate(202px, 99px) scale(1); }
  60.85%  { opacity: 0; transform: translate(-50%, -50%) translate(202px, 99px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(202px, 99px) scale(0.95); }
}



/* m4 (下 0,100) → 吹き出しは右下に出す → corner-tl
   w=178 → dx=+123, dy=+53 → tx=123, ty=153 */
@keyframes bubble-m4-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(123px, 169px) scale(0.85); }
  55.23%  { opacity: 0; transform: translate(-50%, -50%) translate(123px, 169px) scale(0.85); }
  57.11%  { opacity: 1; transform: translate(-50%, -50%) translate(123px, 169px) scale(1); }
  62.72%  { opacity: 1; transform: translate(-50%, -50%) translate(123px, 169px) scale(1); }
  64.60%  { opacity: 0; transform: translate(-50%, -50%) translate(123px, 169px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(123px, 169px) scale(0.95); }
}



/* m5 (左下 -86,50) → 吹き出しは左下に出す → corner-tr
   w=136 → dx=-102, dy=+53 → tx=-188, ty=103 */
@keyframes bubble-m5-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-188px, 103px) scale(0.85); }
  59%  { opacity: 0; transform: translate(-50%, -50%) translate(-188px, 103px) scale(0.85); }
  60.85%  { opacity: 1; transform: translate(-50%, -50%) translate(-188px, 103px) scale(1); }
  66.47%  { opacity: 1; transform: translate(-50%, -50%) translate(-188px, 103px) scale(1); }
  68.34%  { opacity: 0; transform: translate(-50%, -50%) translate(-188px, 103px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-188px, 103px) scale(0.95); }
}



/* m6 (左上 -86,-50) → 吹き出しは左上に出す → corner-br
   w=150 → dx=-109, dy=-53 → tx=-195, ty=-103 */
@keyframes bubble-m6-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-195px, -103px) scale(0.85); }
  62.72%  { opacity: 0; transform: translate(-50%, -50%) translate(-195px, -103px) scale(0.85); }
  64.60%  { opacity: 1; transform: translate(-50%, -50%) translate(-195px, -103px) scale(1); }
  75.66%  { opacity: 1; transform: translate(-50%, -50%) translate(-195px, -103px) scale(1); }
  77.53%  { opacity: 0; transform: translate(-50%, -50%) translate(-195px, -103px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-195px, -103px) scale(0.95); }
}



@keyframes discuss-fade {
  0%   { opacity: 0; }
  43.06%  { opacity: 0; }
  45.87%  { opacity: 1; }
  68.34%  { opacity: 1; }
  79.40%  { opacity: 0; }
  100% { opacity: 0; }
}



@keyframes member-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(91, 87, 178, 0.10); transform: scale(1); }
  46.81%      { box-shadow: 0 0 0 10px rgba(91, 87, 178, 0.18), 0 4px 14px rgba(91, 87, 178, 0.20); transform: scale(1.10); }
}



@keyframes act-panel {
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  68.34%  { opacity: 0; transform: translate(-50%, -50%) translateX(560px); }
  81.28%  { opacity: 1; transform: translate(-50%, -50%) translateX(80px); }
  91.57%  { opacity: 1; transform: translate(-50%, -50%) translateX(80px); }
  95.32%  { opacity: 0; transform: translate(-50%, -50%) translateX(-560px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(-560px); }
}



@keyframes panel-react {
  0%, 100% { opacity: 0.5; transform: scale(1); background: var(--clanexe-purple-bg); }
  46.81%      { opacity: 1; transform: scale(1.25); background: var(--clanexe-purple); }
}



/* === パネル回答吹き出し（8個、ランダム配置で順次ポップ）===
   タイミング: 88%〜91% で順次出現、92%で全て退場
   各吹き出しは story-stage 中心(0,0) を起点とする絶対座標
*/
@keyframes panel-reply-1 {
  /* (-50, -90) 左上, corner-br */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-50px, -90px) scale(0.6); }
  87.83%  { opacity: 0; transform: translate(-50%, -50%) translate(-50px, -90px) scale(0.6); }
  88.77%  { opacity: 1; transform: translate(-50%, -50%) translate(-50px, -90px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(-50px, -90px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(-50px, -90px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-50px, -90px) scale(0.95); }
}



@keyframes panel-reply-2 {
  /* (220, -90) 右上, corner-bl */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(220px, -90px) scale(0.6); }
  88.30%{ opacity: 0; transform: translate(-50%, -50%) translate(220px, -90px) scale(0.6); }
  89.23%{ opacity: 1; transform: translate(-50%, -50%) translate(220px, -90px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(220px, -90px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(220px, -90px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(220px, -90px) scale(0.95); }
}



@keyframes panel-reply-3 {
  /* (-50, 90) 左下, corner-tr */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-50px, 90px) scale(0.6); }
  88.77%  { opacity: 0; transform: translate(-50%, -50%) translate(-50px, 90px) scale(0.6); }
  89.70%  { opacity: 1; transform: translate(-50%, -50%) translate(-50px, 90px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(-50px, 90px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(-50px, 90px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-50px, 90px) scale(0.95); }
}



@keyframes panel-reply-4 {
  /* (220, 90) 右下, corner-tl */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(220px, 90px) scale(0.6); }
  89.23%{ opacity: 0; transform: translate(-50%, -50%) translate(220px, 90px) scale(0.6); }
  90.17%{ opacity: 1; transform: translate(-50%, -50%) translate(220px, 90px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(220px, 90px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(220px, 90px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(220px, 90px) scale(0.95); }
}



@keyframes panel-reply-5 {
  /* (80, -130) 真上, corner-bl */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(80px, -130px) scale(0.6); }
  89.70%  { opacity: 0; transform: translate(-50%, -50%) translate(80px, -130px) scale(0.6); }
  90.64%  { opacity: 1; transform: translate(-50%, -50%) translate(80px, -130px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(80px, -130px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(80px, -130px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(80px, -130px) scale(0.95); }
}



@keyframes panel-reply-6 {
  /* (80, 130) 真下, corner-tl */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(80px, 130px) scale(0.6); }
  90.17%{ opacity: 0; transform: translate(-50%, -50%) translate(80px, 130px) scale(0.6); }
  91.11%{ opacity: 1; transform: translate(-50%, -50%) translate(80px, 130px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(80px, 130px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(80px, 130px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(80px, 130px) scale(0.95); }
}



@keyframes panel-reply-7 {
  /* (120, -150) パネル左上の更に上、メンバー1と被らない */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(120px, -150px) scale(0.6); }
  90.64%  { opacity: 0; transform: translate(-50%, -50%) translate(120px, -150px) scale(0.6); }
  91.57%  { opacity: 1; transform: translate(-50%, -50%) translate(120px, -150px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(120px, -150px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(120px, -150px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(120px, -150px) scale(0.95); }
}



@keyframes panel-reply-8 {
  /* (40, 150) パネル下の少し左 */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(40px, 150px) scale(0.6); }
  91.11%{ opacity: 0; transform: translate(-50%, -50%) translate(40px, 150px) scale(0.6); }
  92%{ opacity: 1; transform: translate(-50%, -50%) translate(40px, 150px) scale(1); }
  92.51%  { opacity: 1; transform: translate(-50%, -50%) translate(40px, 150px) scale(1); }
  94.38%  { opacity: 0; transform: translate(-50%, -50%) translate(40px, 150px) scale(0.95); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(40px, 150px) scale(0.95); }
}



@keyframes connector-fade {
  0%   { opacity: 0; }
  81.28%  { opacity: 0; }
  84.09%  { opacity: 0.7; }
  91.57%  { opacity: 0.7; }
  95.32%  { opacity: 0; }
  100% { opacity: 0; }
}



/* メンバー1（パネル相手）の吹き出し
   m1=(-90, 0) → corner-br（右下尖り） → アイコンの左上に配置
   w=262 → dx=-w/2-34=-165, dy=-53 → tx=-255, ty=-53
   タイミング: レポート(94%出現)の前に必ず消える(91%完全退場) */
@keyframes bubble-member-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-255px, -53px) scale(0.92); }
  81.28%  { opacity: 0; transform: translate(-50%, -50%) translate(-255px, -53px) scale(0.92); }
  84.09%  { opacity: 1; transform: translate(-50%, -50%) translate(-255px, -53px) scale(1); }
  88.77%  { opacity: 1; transform: translate(-50%, -50%) translate(-255px, -53px) scale(1); }
  91.57%  { opacity: 0; transform: translate(-50%, -50%) translate(-560px, -53px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-560px, -53px) scale(1); }
}



@keyframes act-report {
  /* v1.39: 実物大のReportは出さない（フロー内のミニレポートに役目を譲る） */
  0%   { opacity: 0; transform: translate(-50%, -50%) translateX(0) scale(0.4); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateX(0) scale(0.4); }
}



@keyframes bubble-report-anim {
  /* レポートは物なので発話しない。常に非表示 */
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-109px, -53px) scale(0.92); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(-109px, -53px) scale(0.92); }
}



/* Aoi（m1）の最終発話「6人で議論し、声を集めてまとめました」
   m1=(-90,0)→(+90,-13), corner-bl(左下尖り) → 右上配置
   v1.36: AoiのY位置に追従して -13、最終: tx=243, ty=-84 */
@keyframes bubble-aoi-final {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(75px, -84px) scale(0.85); }
  96%  { opacity: 0; transform: translate(-50%, -50%) translate(75px, -84px) scale(0.85); }
  98%  { opacity: 1; transform: translate(-50%, -50%) translate(243px, -84px) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(243px, -84px) scale(1); }
}



/* You の最終発話「ありがとう！助かったよ」
   You=(+400, 0), corner-tr(右上尖り) → 左下配置
   v1.38 微調整: Youと一緒に右へ6px → tx=284, ty=+44 */
@keyframes bubble-you-final {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(284px, 44px) scale(0.85); }
  98%  { opacity: 0; transform: translate(-50%, -50%) translate(284px, 44px) scale(0.85); }
  99%  { opacity: 1; transform: translate(-50%, -50%) translate(284px, 44px) scale(1); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(284px, 44px) scale(1); }
}


@keyframes summary-flow-anim {
  0%   { opacity: 0; transform: translate(-50%, -50%) translate(-700px, 14px); }
  96%  { opacity: 0; transform: translate(-50%, -50%) translate(-700px, 14px); }
  /* シーン6で左から流入。注釈分の高さを考慮して y=+14 にすることで
     フロー本体（ラウンドロビン等）の中心を y=0 に揃える */
  98%  { opacity: 1; transform: translate(-50%, -50%) translate(-188px, 14px); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate(-188px, 14px); }
}



/* ================================
   再生制御 (合計 22秒)
   ================================ */
.header-story.is-playing .actor-you      { animation: act-you 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-you     { animation: bubble-you-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-clan     { animation: act-clan 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-clan-1  { animation: bubble-clan-1 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-clan-2  { animation: bubble-clan-2 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-aoi-1   { animation: bubble-aoi-1 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-aoi-2   { animation: bubble-aoi-2 23.5s var(--ease) forwards; }



.header-story.is-playing .actor-m1       { animation: act-m1 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-m2       { animation: act-m2 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-m3       { animation: act-m3 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-m4       { animation: act-m4 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-m5       { animation: act-m5 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-m6       { animation: act-m6 23.5s var(--ease) forwards; }



.header-story.is-playing .bubble-m1      { animation: bubble-m1-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-m2      { animation: bubble-m2-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-m3      { animation: bubble-m3-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-m4      { animation: bubble-m4-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-m5      { animation: bubble-m5-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-m6      { animation: bubble-m6-anim 23.5s var(--ease) forwards; }



.header-story.is-playing .discuss-circle { animation: discuss-fade 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-panel    { animation: act-panel 23.5s var(--ease) forwards; }


.header-story.is-playing .actor-report   { animation: act-report 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-member-panel { animation: bubble-member-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-aoi-final { animation: bubble-aoi-final 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-you-final { animation: bubble-you-final 23.5s var(--ease) forwards; }


.header-story.is-playing .summary-flow { animation: summary-flow-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .bubble-report  { animation: bubble-report-anim 23.5s var(--ease) forwards; }


.header-story.is-playing .connector-line { animation: connector-fade 23.5s var(--ease) forwards; }



/* 議論シーン中、メンバーが発言時に少し光る */
.header-story.is-playing .actor-m1 .actor-icon { animation: member-pulse 1.0s ease-in-out 10.8s 1; }


.header-story.is-playing .actor-m2 .actor-icon { animation: member-pulse 1.0s ease-in-out 11.7s 1; }


.header-story.is-playing .actor-m3 .actor-icon { animation: member-pulse 1.0s ease-in-out 12.5s 1; }


.header-story.is-playing .actor-m4 .actor-icon { animation: member-pulse 1.0s ease-in-out 13.4s 1; }


.header-story.is-playing .actor-m5 .actor-icon { animation: member-pulse 1.0s ease-in-out 14.3s 1; }


.header-story.is-playing .actor-m6 .actor-icon { animation: member-pulse 1.0s ease-in-out 15.1s 1; }



/* パネルドット波及 */
.header-story.is-playing .panel-dot:nth-child(7n+1) { animation: panel-react 1.4s ease-in-out 19.8s 1; }


.header-story.is-playing .panel-dot:nth-child(7n+2) { animation: panel-react 1.4s ease-in-out 19.9s 1; }


.header-story.is-playing .panel-dot:nth-child(7n+3) { animation: panel-react 1.4s ease-in-out 20.0s 1; }


.header-story.is-playing .panel-dot:nth-child(7n+4) { animation: panel-react 1.4s ease-in-out 20.1s 1; }


.header-story.is-playing .panel-dot:nth-child(7n+5) { animation: panel-react 1.4s ease-in-out 20.2s 1; }


.header-story.is-playing .panel-dot:nth-child(7n+6) { animation: panel-react 1.4s ease-in-out 20.3s 1; }


.header-story.is-playing .panel-dot:nth-child(7n+7) { animation: panel-react 1.4s ease-in-out 20.4s 1; }



/* パネル回答吹き出し（8個） */
.header-story.is-playing .panel-reply-1 { animation: panel-reply-1 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-2 { animation: panel-reply-2 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-3 { animation: panel-reply-3 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-4 { animation: panel-reply-4 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-5 { animation: panel-reply-5 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-6 { animation: panel-reply-6 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-7 { animation: panel-reply-7 23.5s var(--ease) forwards; }


.header-story.is-playing .panel-reply-8 { animation: panel-reply-8 23.5s var(--ease) forwards; }

@media (max-width: 899px){

  .header-story {
    display: none;
  }
}



.feature-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}



.feature-card:nth-child(even) {
  direction: rtl;
}


.feature-card:nth-child(even) .feature-content {
  direction: ltr;
}


.feature-card:nth-child(even) .feature-visual {
  direction: ltr;
}



.feature-content .feature-num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--clanexe-purple);
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}




.feature-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin-bottom: 12px;
}



.feature-tagline {
  font-size: clamp(15px, 1.6vw, 17px);
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}



.feature-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}



.feature-status.beta {
  background: rgba(91, 87, 178, 0.1);
  color: var(--clanexe-purple);
  border: 1px solid rgba(91, 87, 178, 0.2);
}



.feature-status.ga {
  background: rgba(111, 163, 199, 0.12);
  color: #4A7A9C;
  border: 1px solid rgba(111, 163, 199, 0.25);
}



.feature-status.future {
  background: rgba(168, 153, 104, 0.12);
  color: #7A6E4A;
  border: 1px solid rgba(168, 153, 104, 0.25);
}



.feature-status .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}



.feature-list-detail {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}



.feature-list-detail li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}



.feature-list-detail li svg {
  width: 18px;
  height: 18px;
  color: var(--clanexe-purple);
  flex-shrink: 0;
  margin-top: 2px;
}



/* Feature Visuals */
.feature-visual {
  position: relative;
  aspect-ratio: 4/3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}



.feature-visual-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-tertiary);
  text-align: center;
  align-self: stretch;
  padding: 0 4px;
}



.feature-visual:has(.char-maker-card) {
  aspect-ratio: auto;
}



/* SVG図解は親いっぱいに広げるが、CharacterMaker内のSVGは個別サイズに従う */
.feature-visual > svg {
  width: 100%;
  height: 100%;
}



/* ================================
   Interactive Character Maker Card
   ================================ */
.char-maker-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border: 2px solid var(--clanexe-purple);
  border-radius: 16px;
  padding: 24px 28px;
  box-shadow: 0 8px 24px rgba(91, 87, 178, 0.10);
  position: relative;
}



/* Header: Avatar + Role */
.char-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}



.char-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(120, 114, 201, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s var(--ease);
}



.char-avatar svg {
  width: 32px;
  height: 32px;
  color: var(--clanexe-purple);
  transition: transform 0.3s var(--ease);
}



.char-role-block {
  flex: 1;
  min-width: 0;
}



.char-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  transition: opacity 0.2s var(--ease);
}



/* Section */
.char-section {
  margin-bottom: 16px;
}



.char-section:last-of-type {
  margin-bottom: 18px;
}



.char-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}



.char-section-counter {
  font-size: 9px;
  font-weight: 600;
  color: var(--clanexe-purple);
  letter-spacing: 0.05em;
  background: var(--clanexe-purple-bg);
  padding: 2px 8px;
  border-radius: 999px;
}



/* Row (Mind / Style) */
.char-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}



.char-row-key {
  font-size: 12px;
  font-weight: 700;
  color: var(--clanexe-purple);
  width: 44px;
  flex-shrink: 0;
}



/* Clickable Field */
.char-field {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: #fff;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-align: left;
  width: 100%;
}



.char-field:hover {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg-light);
}



.char-field.is-active {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  box-shadow: 0 0 0 3px rgba(91, 87, 178, 0.12);
}



.char-field-value {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  transition: opacity 0.2s var(--ease);
}



.char-field-caret {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease), color 0.2s var(--ease);
}



.char-field:hover .char-field-caret,
.char-field.is-active .char-field-caret {
  color: var(--clanexe-purple);
}



.char-field.is-active .char-field-caret {
  transform: rotate(180deg);
}



/* Role-specific field (smaller, badge-like) */
.char-field-role {
  padding: 5px 10px;
  border-radius: 6px;
  display: inline-flex;
  width: auto;
  background: var(--clanexe-purple-bg);
  border-color: transparent;
}



.char-field-role .char-field-value {
  font-size: 11px;
  font-weight: 500;
  color: var(--clanexe-purple);
}



.char-field-role:hover {
  background: var(--clanexe-purple-bg);
  border-color: var(--clanexe-purple);
}



/* Multi-select field (chips inside) */
.char-field-multi {
  align-items: flex-start;
  padding: 8px 12px;
  min-height: 44px;
}



.char-field-multi .char-chips {
  flex: 1;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}



.char-field-multi .char-field-caret {
  margin-top: 4px;
}



.char-chip {
  display: inline-block;
  padding: 3px 9px;
  background: var(--clanexe-purple-bg);
  color: var(--clanexe-purple);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}



/* Field value transition */
.char-field-value.changing,
.char-name.changing {
  opacity: 0.3;
}



.char-avatar.changing svg {
  transform: scale(0.85);
}



/* Hint */
.char-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  letter-spacing: 0.02em;
}



/* ================================
   Popover
   ================================ */
.char-popover {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(91, 87, 178, 0.10),
    0 16px 40px rgba(91, 87, 178, 0.18);
  padding: 14px;
  min-width: 240px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s var(--ease);
  pointer-events: none;
}



.char-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}



.char-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-lighter);
}



.char-popover-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



.char-popover-counter {
  font-size: 10px;
  font-weight: 600;
  color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  padding: 2px 8px;
  border-radius: 999px;
}



.char-popover-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}



.char-option {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  font-family: inherit;
}



.char-option:hover {
  border-color: var(--clanexe-purple);
  color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg-light);
}



.char-option.is-selected {
  background: var(--clanexe-purple);
  border-color: var(--clanexe-purple);
  color: #fff;
  font-weight: 500;
}



.char-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}



.char-option.is-disabled:hover {
  background: #fff;
  border-color: var(--border-light);
  color: var(--text-secondary);
}



.char-option-check {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}



.char-option:not(.is-selected) .char-option-check {
  display: none;
}



.char-popover-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-lighter);
  display: none;
  justify-content: flex-end;
}



.char-popover-footer.is-visible {
  display: flex;
}



.char-popover-close {
  padding: 6px 16px;
  background: var(--clanexe-purple);
  color: #fff;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease);
  font-family: inherit;
}



.char-popover-close:hover {
  background: var(--clanexe-purple-dark);
}

@media (max-width: 599px){

  .char-maker-card {
    padding: 20px 18px;
  }

  .char-card-header {
    gap: 12px;
    margin-bottom: 20px;
  }

  .char-avatar {
    width: 48px;
    height: 48px;
  }

  .char-avatar svg {
    width: 28px;
    height: 28px;
  }

  .char-name {
    font-size: 16px;
  }

  .char-row-key {
    font-size: 11px;
  }

  .char-field-value {
    font-size: 11px;
  }

  .char-chip {
    font-size: 9px;
    padding: 3px 8px;
  }

  .char-popover {
    min-width: 220px;
    max-width: calc(100vw - 80px);
  }
}



/* ================================
   Interactive Team Builder
   ================================ */
.team-builder {
  width: 100%;
  max-width: 480px;
  background: #fff;
  border: 2px solid var(--clanexe-purple);
  border-radius: 16px;
  padding: 24px 24px 20px;
  box-shadow: 0 8px 24px rgba(91, 87, 178, 0.10);
  position: relative;
}



.team-builder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-lighter);
}



.team-builder-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}



.team-builder-counter {
  font-size: 10px;
  font-weight: 600;
  color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}



.team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  position: relative;
  transition: min-height 0.4s var(--ease);
}



/* ----------------- Default (Edit View): 3カラムグリッド ----------------- */
.team-members.formation-default {
  flex-wrap: wrap;
  gap: 10px;
}


.team-members.formation-default .team-member-card,
.team-members.formation-default .team-member-add {
  width: calc(33.333% - 7px);
}



/* ----------------- Formation: Step ----------------- */
.team-members.formation-step {
  flex-wrap: nowrap;
  overflow-x: auto;
  align-items: stretch;
  gap: 8px;
  padding: 6px 0 6px;
}


.team-members.formation-step .team-member-card,
.team-members.formation-step .team-member-add {
  width: 80px;
  flex-shrink: 0;
}


.team-members.formation-step .step-arrow {
  position: relative;
  width: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clanexe-purple);
}


.team-members.formation-step .step-arrow svg {
  width: 14px;
  height: 14px;
}



/* ----------------- Formation: Pyramid ----------------- */
.team-members.formation-pyramid {
  flex-direction: column;
  align-items: center;
  gap: 0;
  position: relative;
}


.team-members.formation-pyramid .pyramid-leader {
  display: flex;
  justify-content: center;
  width: 100%;
  position: relative;
  z-index: 2;
}


.team-members.formation-pyramid .pyramid-leader .team-member-card {
  width: 90px;
}


/* リーダーと下段の間を繋ぐ SVG */
.team-members.formation-pyramid .pyramid-connector-wrap {
  width: 100%;
  height: 28px;
  pointer-events: none;
  display: block;
  position: relative;
}


.team-members.formation-pyramid .pyramid-connector-wrap svg {
  display: block;
}


.team-members.formation-pyramid .pyramid-followers {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  position: relative;
  z-index: 2;
  padding: 6px 0 4px;
}


.team-members.formation-pyramid .pyramid-followers .team-member-card,
.team-members.formation-pyramid .pyramid-followers .team-member-add {
  width: 70px;
  flex-shrink: 0;
}



/* ----------------- Formation: Round Robin ----------------- */
.team-members.formation-roundrobin {
  display: block;
  position: relative;
  height: 320px;
  margin-bottom: 12px;
}


.team-members.formation-roundrobin .team-member-card,
.team-members.formation-roundrobin .team-member-add {
  position: absolute;
  width: 78px;
  min-height: 0;
  margin: 0;
}


.team-members.formation-roundrobin .rr-circle-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}



/* ----------------- Formation: Debate ----------------- */
.team-members.formation-debate {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}


.team-members.formation-debate .debate-team {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.team-members.formation-debate .debate-team .team-member-card,
.team-members.formation-debate .debate-team .team-member-add {
  width: 100%;
}


.team-members.formation-debate .debate-vs {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--clanexe-purple);
  letter-spacing: 0.05em;
  padding: 0 4px;
  align-self: center;
}


.team-members.formation-debate .debate-vs-line {
  width: 1px;
  height: 24px;
  background: var(--clanexe-purple);
  opacity: 0.3;
}



/* ================================
   Formation Switcher (Dropdown)
   ================================ */
.team-formations {
  margin-bottom: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-lighter);
}



.team-formation-switcher {
  position: relative;
  margin-bottom: 12px;
}



/* Trigger button (default state) */
.team-formation-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  font-family: inherit;
}



.team-formation-trigger:hover {
  border-color: var(--clanexe-purple);
  color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg-light);
}



.team-formation-trigger.is-active {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  color: var(--clanexe-purple);
  font-weight: 600;
}



.team-formation-trigger-label {
  flex: 1;
}



.team-formation-trigger-caret {
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}



.team-formation-trigger.is-active .team-formation-trigger-caret {
  transform: rotate(180deg);
}



/* Exit button (shown only in formation view) */
.team-formation-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.18s var(--ease);
  font-family: inherit;
  margin-left: 8px;
}



.team-formation-exit:hover {
  border-color: #E74C3C;
  color: #E74C3C;
  background: rgba(231, 76, 60, 0.05);
}



.team-formation-exit[hidden] {
  display: none;
}



/* Dropdown menu */
.team-formation-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(91, 87, 178, 0.10),
    0 16px 40px rgba(91, 87, 178, 0.18);
  padding: 8px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.96);
  transform-origin: top left;
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s var(--ease);
  pointer-events: none;
}



.team-formation-menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}



.team-formation-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  text-align: left;
  font-family: inherit;
  width: 100%;
}



.team-formation-menu-item:hover {
  background: var(--clanexe-purple-bg-light);
  border-color: var(--clanexe-purple);
}



.team-formation-menu-item.is-current {
  background: var(--clanexe-purple-bg);
  border-color: var(--clanexe-purple);
}



.team-formation-menu-item > svg {
  color: var(--clanexe-purple);
  flex-shrink: 0;
}



.team-formation-menu-text {
  flex: 1;
  min-width: 0;
}



.team-formation-menu-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}



.team-formation-menu-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.4;
}



/* Description box (shown only when formation is active) */
.team-formation-description {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 10px 12px;
  background: var(--clanexe-purple-bg-light);
  border-radius: 8px;
  transition: opacity 0.2s var(--ease);
}



.team-formation-description[hidden] {
  display: none;
}



.team-formation-description.changing {
  opacity: 0.3;
}

@media (max-width: 599px){

  .team-formation-trigger {
    font-size: 11px;
    padding: 7px 10px;
  }

  .team-formation-exit {
    font-size: 11px;
    padding: 7px 10px;
  }

  .team-formation-menu {
    min-width: calc(100vw - 60px);
    max-width: calc(100vw - 60px);
  }
}



.team-member-card {
  position: relative;
  width: calc(33.333% - 7px);
  background: #fff;
  border: 1.5px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 10px 12px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  text-align: center;
  animation: memberFadeIn 0.3s var(--ease);
}



.team-member-card:hover {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(91, 87, 178, 0.10);
}



.team-member-card.is-active {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  box-shadow: 0 0 0 3px rgba(91, 87, 178, 0.12);
}



@keyframes memberFadeIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



.team-member-icon {
  width: 36px;
  height: 36px;
  margin: 0 auto 8px;
  border-radius: 50%;
  background: rgba(120, 114, 201, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clanexe-purple);
}



.team-member-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 3px;
  line-height: 1.3;
}



.team-member-role {
  font-size: 9px;
  color: var(--text-tertiary);
  line-height: 1.3;
}



/* ----------------- Compact Mode (Formation views) ----------------- */
/* default以外のフォーメーションビューでは、カードをコンパクトに（説明非表示・小さくする） */
.team-members:not(.formation-default) .team-member-card {
  padding: 10px 8px 9px;
}


.team-members:not(.formation-default) .team-member-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 5px;
}


.team-members:not(.formation-default) .team-member-icon svg {
  width: 16px;
  height: 16px;
}


.team-members:not(.formation-default) .team-member-name {
  font-size: 10px;
  margin-bottom: 0;
}


.team-members:not(.formation-default) .team-member-role {
  display: none;
}


.team-members:not(.formation-default) .team-member-add {
  padding: 10px 8px;
  min-height: 0;
}


.team-members:not(.formation-default) .team-member-add-icon {
  width: 18px;
  height: 18px;
  margin-bottom: 4px;
}


.team-members:not(.formation-default) .team-member-add-label {
  font-size: 9px;
}



/* Remove button */
.team-member-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--border-light);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.15s var(--ease);
  font-family: inherit;
  padding: 0;
  z-index: 2;
}



.team-member-card:hover .team-member-remove {
  opacity: 1;
}



.team-member-remove:hover {
  background: #E74C3C;
  border-color: #E74C3C;
  color: #fff;
  transform: scale(1.15);
}



/* Add button */
.team-member-add {
  width: calc(33.333% - 7px);
  background: transparent;
  border: 1.5px dashed var(--border-light);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  font-family: inherit;
  min-height: 100px;
}



.team-member-add:hover {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg-light);
  color: var(--clanexe-purple);
  transform: translateY(-2px);
}



.team-member-add.is-active {
  border-color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  color: var(--clanexe-purple);
}



.team-member-add-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}



.team-member-add-label {
  font-size: 10px;
  font-weight: 500;
}



.team-builder-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 8px;
  letter-spacing: 0.02em;
}



/* Team Popover */
.team-popover {
  position: absolute;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow:
    0 4px 12px rgba(91, 87, 178, 0.10),
    0 16px 40px rgba(91, 87, 178, 0.18);
  padding: 14px;
  min-width: 240px;
  max-width: 320px;
  max-height: 360px;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.96);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s var(--ease);
  pointer-events: none;
}



.team-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}



.team-popover-header {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-lighter);
}



.team-popover-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}



.team-popover-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
}



.team-popover-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s var(--ease);
  text-align: left;
  font-family: inherit;
  width: 100%;
}



.team-popover-option:hover {
  background: var(--clanexe-purple-bg-light);
  border-color: var(--clanexe-purple);
}



.team-popover-option.is-current {
  background: var(--clanexe-purple-bg);
  border-color: var(--clanexe-purple);
}



.team-popover-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(120, 114, 201, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clanexe-purple);
  flex-shrink: 0;
  overflow: hidden;
}

.team-popover-option-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}



.team-popover-option-text {
  flex: 1;
  min-width: 0;
}



.team-popover-option-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
}



.team-popover-option-role {
  font-size: 10px;
  color: var(--text-tertiary);
}



.team-popover-option-current {
  font-size: 9px;
  font-weight: 600;
  color: var(--clanexe-purple);
  background: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--clanexe-purple);
}



.team-popover-option-inuse {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--bg-gray);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}



/* 差し替えモード: 「使用中」は薄めだが選択可能（スワップ） */
.team-popover-option.is-in-use:not(.is-disabled) {
  opacity: 0.7;
}



.team-popover-option.is-in-use:not(.is-disabled):hover {
  opacity: 1;
}



/* 追加モード: 「使用中」は無効化 */
.team-popover-option.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}



.team-popover-option.is-disabled:hover {
  background: #fff;
  border-color: transparent;
}

@media (max-width: 599px){

  .team-builder {
    padding: 18px 16px 16px;
  }

  .team-member-card,
  .team-member-add {
    width: calc(50% - 5px);
  }

  .team-popover {
    min-width: 200px;
    max-width: calc(100vw - 60px);
  }
}



/* ================================
   Session Chat Animation (Feature 03)
   ================================ */
.session-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 2px solid var(--clanexe-purple);
  border-radius: 16px;
  padding: 0;
  box-shadow: 0 8px 24px rgba(91, 87, 178, 0.10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}



.session-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-lighter);
  background: linear-gradient(135deg, #FAFAFE 0%, #F4F3FB 100%);
}



.session-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}



.session-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
  flex-shrink: 0;
  animation: sessionPulse 2s var(--ease) infinite;
}



.session-card.is-finished .session-status-dot {
  background: var(--clanexe-purple);
  box-shadow: 0 0 0 3px rgba(91, 87, 178, 0.2);
  animation: none;
}



@keyframes sessionPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  46.81% { opacity: 0.6; transform: scale(1.2); }
}



.session-task {
  min-width: 0;
}



.session-task-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--clanexe-purple);
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}



.session-task-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.session-replay {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s var(--ease);
  font-family: inherit;
  flex-shrink: 0;
  animation: sessionFadeIn 0.4s var(--ease);
}



.session-replay:hover {
  border-color: var(--clanexe-purple);
  color: var(--clanexe-purple);
}



.session-replay[hidden] {
  display: none;
}



/* Session Input Form (initial state) */
.session-input {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  max-height: 340px;
  justify-content: center;
}



.session-input[hidden] {
  display: none;
}



.session-input-hint {
  font-size: 11px;
  color: #888;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}



.session-input-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  background: #fff;
  border: 1.5px solid #E5E5EE;
  border-radius: 12px;
  padding: 10px 10px 10px 14px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 2px 8px rgba(91, 87, 178, 0.04);
}



.session-input-row:focus-within {
  border-color: #5B57B2;
  box-shadow: 0 4px 16px rgba(91, 87, 178, 0.12);
}



.session-input-textarea {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  background: transparent;
  padding: 4px 0;
  min-height: 48px;
  max-height: 80px;
}



.session-input-textarea::placeholder {
  color: #BBB;
}



.session-input-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #5B57B2;
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.15s var(--ease), box-shadow 0.2s var(--ease);
  align-self: flex-end;
  position: relative;
}



.session-input-send:hover {
  background: #4A4798;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 87, 178, 0.3);
}



.session-input-send:active,
.session-input-send.is-pressed {
  background: #3F3D85;
  transform: translateY(1px);
  box-shadow: 0 0 0 4px rgba(91, 87, 178, 0.15);
}



.session-input-send svg {
  width: 16px;
  height: 16px;
}



/* Auto-trigger countdown ring (subtle visual cue) */
.session-input-send::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 12px;
  border: 2px solid #5B57B2;
  opacity: 0;
  transform: scale(0.95);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}



.session-input-send.is-pulsing::before {
  opacity: 0.5;
  animation: sessionSendPulse 1.2s ease-in-out infinite;
}



@keyframes sessionSendPulse {
  0%, 100% { transform: scale(0.95); opacity: 0.5; }
  46.81% { transform: scale(1.08); opacity: 0; }
}



/* Chat stream */
.session-chat {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 280px;
  max-height: 340px;
  overflow-y: auto;
  scroll-behavior: smooth;
}



.session-chat[hidden] {
  display: none;
}



.session-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: sessionMsgIn 0.4s var(--ease);
}



@keyframes sessionMsgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.session-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(120, 114, 201, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clanexe-purple);
  flex-shrink: 0;
  margin-top: 2px;
}



.session-msg-avatar svg {
  width: 14px;
  height: 14px;
}



.session-msg-body {
  flex: 1;
  min-width: 0;
}



.session-msg-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--clanexe-purple);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}



.session-msg-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.6;
  background: var(--bg-gray);
  padding: 8px 12px;
  border-radius: 4px 12px 12px 12px;
}



/* User message variant (avatar on right, purple background) */
.session-msg.is-user {
  flex-direction: row;
  justify-content: flex-end;
}



.session-msg.is-user .session-msg-body {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: calc(100% - 36px);
  order: 1;
}



.session-msg.is-user .session-msg-avatar {
  order: 2;
  background: var(--clanexe-purple);
  color: #fff;
}



.session-msg.is-user .session-msg-name {
  color: var(--clanexe-purple);
}



.session-msg.is-user .session-msg-text {
  background: var(--clanexe-purple);
  color: #fff;
  border-radius: 12px 4px 12px 12px;
}



/* Working indicator */
.session-msg-working {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
  margin-bottom: 4px;
}



.session-msg-working-dots {
  display: inline-flex;
  gap: 2px;
}



.session-msg-working-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clanexe-purple);
  animation: sessionDotPulse 1.4s ease-in-out infinite;
}



.session-msg-working-dots span:nth-child(2) {
  animation-delay: 0.2s;
}



.session-msg-working-dots span:nth-child(3) {
  animation-delay: 0.4s;
}



@keyframes sessionDotPulse {
  0%, 60%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  28.09% {
    opacity: 1;
    transform: scale(1);
  }
}



/* Mini artifact card (中間成果物) */
.session-msg-artifact {
  margin-top: 6px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--clanexe-purple);
  border-radius: 8px;
  animation: sessionArtifactIn 0.5s var(--ease);
}



@keyframes sessionArtifactIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}



.session-msg-artifact-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--clanexe-purple);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}



.session-msg-artifact-label svg {
  width: 11px;
  height: 11px;
}



.session-msg-artifact-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0;
  margin: 0;
}



.session-msg-artifact-list li {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  gap: 6px;
}



.session-msg-artifact-list li .rank {
  font-weight: 700;
  color: var(--clanexe-purple);
  flex-shrink: 0;
  min-width: 28px;
}



.session-msg-artifact-list li .pct {
  font-weight: 700;
  color: var(--clanexe-purple);
  margin-left: auto;
  flex-shrink: 0;
}



/* Session Report (final) */
.session-report {
  margin: 0 18px 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #5B57B2 0%, #7872C9 100%);
  border-radius: 12px;
  color: #fff;
  animation: sessionReportIn 0.6s var(--ease);
  box-shadow: 0 6px 16px rgba(91, 87, 178, 0.25);
}



@keyframes sessionReportIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}



.session-report[hidden] {
  display: none;
}



.session-report-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}



.session-report-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}



.session-report-text {
  flex: 1;
  min-width: 0;
}



.session-report-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 2px;
}



.session-report-meta {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.75);
}



.session-report-sections {
  display: flex;
  flex-direction: column;
  gap: 6px;
}



.session-report-section {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.95);
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  border-left: 2px solid rgba(255, 255, 255, 0.5);
}



@keyframes sessionFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 599px){

  .session-card {
    max-width: 100%;
  }

  .session-header {
    padding: 12px 14px;
  }

  .session-task-title {
    font-size: 11px;
  }

  .session-chat {
    padding: 12px 14px;
    min-height: 240px;
    max-height: 300px;
  }

  .session-msg-text {
    font-size: 10px;
  }

  .session-report {
    margin: 0 14px 14px;
    padding: 12px 14px;
  }
}



/* ================================
   AI Panel Animation (Feature 04)
   ================================ */
.panel-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border: 2px solid var(--clanexe-purple);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(91, 87, 178, 0.10);
  overflow: hidden;
  position: relative;
  min-height: 480px;
}



.panel-replay {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  animation: panelReplayIn 0.4s var(--ease);
  transition: all 0.15s var(--ease);
  box-shadow: 0 2px 8px rgba(91, 87, 178, 0.08);
}



.panel-replay:hover {
  border-color: var(--clanexe-purple);
  color: var(--clanexe-purple);
}



.panel-replay[hidden] {
  display: none;
}



@keyframes panelReplayIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}



.panel-phase {
  padding: 18px 18px 16px;
  animation: panelPhaseIn 0.4s var(--ease);
}



.panel-phase[hidden] {
  display: none;
}



/* Phase 3でリプレイボタン表示中は下部余白を確保（ボタンとコンテンツが重ならないよう） */
.panel-card.is-replay-visible .panel-phase-result {
  padding-bottom: 44px;
}



@keyframes panelPhaseIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.panel-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}



/* ----------- Phase 1: Selection ----------- */
.panel-selected-card {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: var(--clanexe-purple-bg-light);
  border: 2px solid var(--clanexe-purple);
  border-radius: 10px;
  margin-bottom: 14px;
  position: relative;
  animation: panelSelectedHighlight 1.4s var(--ease) 0.2s both;
}



@keyframes panelSelectedHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(91, 87, 178, 0.4);
  }
  46.81% {
    box-shadow: 0 0 0 6px rgba(91, 87, 178, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(91, 87, 178, 0);
  }
}



.panel-selected-icon {
  width: 36px;
  height: 36px;
  background: rgba(120, 114, 201, 0.18);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clanexe-purple);
  flex-shrink: 0;
}



.panel-selected-body {
  flex: 1;
  min-width: 0;
}



.panel-selected-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}



.panel-selected-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: 8px;
}



.panel-selected-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 10px;
}



.panel-selected-tag {
  display: inline-block;
  padding: 2px 8px;
  background: #fff;
  color: var(--text-secondary);
  border-radius: 4px;
  font-size: 9px;
  font-weight: 500;
  border: 1px solid var(--border-light);
}



.panel-selected-stats {
  display: flex;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(91, 87, 178, 0.15);
}



.panel-selected-stats > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}



.panel-stat-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--clanexe-purple);
  line-height: 1.2;
}



.panel-stat-lbl {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-top: 1px;
}



.panel-question {
  padding: 10px 12px;
  background: var(--bg-gray);
  border-radius: 8px;
  margin-bottom: 14px;
}



.panel-question-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--clanexe-purple);
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}



.panel-question-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.6;
}



.panel-execute-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--clanexe-purple);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  position: relative;
  transition: all 0.2s var(--ease);
}



.panel-execute-btn:hover {
  background: var(--clanexe-purple-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 87, 178, 0.3);
}



.panel-execute-btn.is-pressed {
  background: var(--clanexe-purple-dark);
  transform: scale(0.97);
}



/* Pulse ring for auto-trigger countdown */
.panel-execute-btn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 10px;
  border: 2px solid var(--clanexe-purple);
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}



.panel-execute-btn.is-pulsing::before {
  opacity: 0.5;
  animation: panelExecutePulse 1.2s ease-in-out infinite;
}



@keyframes panelExecutePulse {
  0%, 100% { transform: scale(0.96); opacity: 0.5; }
  46.81% { transform: scale(1.05); opacity: 0; }
}



/* ----------- Phase 2: Running ----------- */
.panel-running-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}



.panel-running-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}



.panel-running-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(91, 87, 178, 0.25);
  border-top-color: var(--clanexe-purple);
  border-radius: 50%;
  animation: panelSpin 0.8s linear infinite;
}



@keyframes panelSpin {
  to { transform: rotate(360deg); }
}



.panel-running-counter {
  font-size: 11px;
  font-weight: 700;
  color: var(--clanexe-purple);
  background: var(--clanexe-purple-bg);
  padding: 3px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}



.panel-running-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-gray);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}



.panel-running-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--clanexe-purple), var(--clanexe-purple-light));
  transition: width 0.3s var(--ease);
}



.panel-running-bubbles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 280px;
  max-height: 340px;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}



.panel-bubble {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg-gray);
  border-radius: 6px;
  font-size: 10px;
  color: var(--text-secondary);
  animation: panelBubbleIn 0.35s var(--ease);
  flex-shrink: 0;
}



@keyframes panelBubbleIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.panel-bubble-meta {
  font-weight: 600;
  color: var(--clanexe-purple);
  flex-shrink: 0;
  min-width: 70px;
}



.panel-bubble-text {
  color: var(--text-primary);
}



/* ----------- Phase 3: Result ----------- */
.panel-result-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-gray);
  border-radius: 999px;
  margin-bottom: 14px;
}



.panel-result-tab {
  flex: 1;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s var(--ease);
  font-family: inherit;
}



/* During auto-playback, tabs are not clickable */
.panel-result-tabs.is-locked .panel-result-tab {
  cursor: default;
  pointer-events: none;
}



.panel-result-tab:hover {
  color: var(--clanexe-purple);
}



.panel-result-tab.is-active {
  background: var(--clanexe-purple);
  color: #fff;
  font-weight: 600;
}



.panel-result-pane {
  display: none;
  animation: panelPaneIn 0.4s var(--ease);
}



.panel-result-pane.is-active {
  display: block;
}



@keyframes panelPaneIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.panel-result-eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.1em;
  margin-bottom: 6px;
}



.panel-result-n {
  background: #fff;
  color: var(--clanexe-purple);
  border: 1px solid var(--clanexe-purple);
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 9px;
  letter-spacing: 0.02em;
}



.panel-result-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
  line-height: 1.4;
}



.panel-result-desc {
  font-size: 10px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-bottom: 14px;
}



/* Bars */
.panel-bars {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}



.panel-bars li {
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 10px;
}



.panel-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
}



.panel-bar-track {
  height: 8px;
  background: var(--bg-gray);
  border-radius: 999px;
  overflow: hidden;
}



.panel-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--clanexe-purple);
  border-radius: 999px;
  transition: width 1s var(--ease);
}



.panel-bar-pct {
  font-size: 10px;
  font-weight: 700;
  color: var(--clanexe-purple);
  text-align: right;
  font-variant-numeric: tabular-nums;
}



/* Scatter */
.panel-scatter {
  position: relative;
  width: 100%;
  height: 180px;
  background: var(--bg-gray);
  border-radius: 8px;
  margin-bottom: 10px;
}



.panel-scatter-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: panelDotIn 0.4s var(--ease) forwards;
}



@keyframes panelDotIn {
  to { opacity: 0.85; }
}



.panel-cluster-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 10px;
  color: var(--text-secondary);
}



.panel-cluster-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}



.panel-cluster-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}



/* Insight */
.panel-insight-box {
  padding: 10px 12px;
  background: var(--clanexe-purple-bg-light);
  border-radius: 8px;
  margin-bottom: 8px;
}



.panel-insight-box-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--clanexe-purple);
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}



.panel-insight-box-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.7;
}



.panel-insight-quote {
  margin-top: 8px;
  padding: 10px 12px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}



.panel-insight-quote-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}



.panel-insight-quote-text {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.6;
}



/* 「次に確かめたいこと」テキスト */
.panel-insight-next-text {
  font-size: 11px;
  color: var(--text-primary);
  line-height: 1.7;
}

@media (max-width: 599px){

  .panel-card {
    max-width: 100%;
    min-height: 440px;
  }

  .panel-phase {
    padding: 14px;
  }

  .panel-bars li {
    grid-template-columns: 56px 1fr 28px;
  }
}



@keyframes marketDetailIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}



@keyframes marketToastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@media (max-width: 899px){

  .features {
    padding: var(--section-py-tb) 0;
  }

  .feature-card {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .feature-card:nth-child(even) {
    direction: ltr;
  }

  /* モバイルではScroll Lock演出をOFFにし、通常の縦並びに戻す */
  .feature-sticky-wrapper {
    min-height: auto;
    display: block;
    margin-bottom: 64px;
  }

  .feature-sticky-wrapper:last-child {
    margin-bottom: 0;
  }

  .feature-sticky-wrapper > .feature-card {
    position: static;
    height: auto;
    top: auto;
    width: 100%;
  }

  .feature-sticky-wrapper--header > .section-header {
    position: static;
    height: auto;
    top: auto;
    display: block;
    margin-bottom: 48px;
  }
}

@media (max-width: 599px){

  .features {
    padding: var(--section-py-mb) 0;
  }

  .section-header {
    margin-bottom: 48px;
  }

  .feature-list {
    gap: 0;
  }

  .feature-sticky-wrapper {
    margin-bottom: 48px;
  }
}



/* ================================
   Scroll Animation
   ================================ */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}



.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}



@keyframes successFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* v6.1 AIメンバーアバター適用（見た目差し替えのみ） */
.actor-icon img,.char-avatar img,.team-member-icon img,.session-msg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}