/* ============================================================
   主要機能アニメCSS (TOPの s05v3-slide / f01-f04 を流用)
   下層 features.html で各機能ブロックのビジュアルとして使用。
   標準は「1枚だけactive・sticky」だが features.html では各動画を
   個別枠で常時表示するため、下部で override 追加 (.fp-anim スコープ)。
============================================================ */

/* ===== 05 v3 — ストーリー型機能 ===== */
.s05v3 { background: var(--bg-base); padding: var(--sp-10) 0; }
.s05v3-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-10);
  align-items: start;
}
.s05v3-list {
  display: flex;
  flex-direction: column;
}
.s05v3-item {
  padding: var(--sp-5) 0;
  position: relative;
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity .45s ease;
}
.s05v3-item:not(.active) { opacity: 0.32; }
.s05v3-item:last-child { margin-bottom: 14vh; }
.s05v3-item-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin-bottom: 6px;
}
.s05v3-item-num {
  font-family: "Inter", sans-serif;
  font-size: 38px;
  font-weight: 900;
  color: var(--text-muted);
  letter-spacing: -0.03em;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.s05v3-item.active .s05v3-item-num {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.s05v3-item-title {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.5;
  letter-spacing: -0.01em;
}
.s05v3-item-desc {
  margin-left: 64px;
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.85;
  margin-top: 6px;
}
.s05v3-item.active::before {
  content: "";
  position: absolute;
  left: -16px; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 32px;
  background: var(--brand-gradient);
  border-radius: 2px;
}

/* 右側固定ビジュアル（Notion風編集ページ感） */
.s05v3-vis {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
}
.s05v3-vis-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--border-light);
}
.s05v3-vis-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}
.s05v3-vis-title {
  font-size: var(--fs-md);
  font-weight: 800;
  color: var(--text-primary);
}
.s05v3-vis-sub {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.s05v3-platforms {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.s05v3-platform {
  padding: 12px 6px;
  background: #FAFBFD;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.s05v3-platform.ai {
  background: linear-gradient(135deg, rgba(107,79,187,0.10), rgba(76,95,227,0.10));
  border-color: rgba(107, 79, 187, 0.30);
  color: var(--brand-purple);
}
.s05v3-platform.more {
  background: var(--brand-gradient);
  color: #fff;
  border-color: transparent;
}

.s05v3-data-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--sp-5);
}
.s05v3-data-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #FAFBFD;
  border: 1px solid var(--border-light);
  border-radius: var(--r-sm);
  font-size: 12px;
}
.s05v3-data-row .map-pin {
  width: 24px; height: 24px;
  font-size: 10px;
}
.s05v3-data-name { font-weight: 800; color: var(--text-primary); flex: 1; }
.s05v3-data-meta { font-size: 10px; color: var(--text-muted); }

/* 右: スクロール連動の固定ビジュアル（画像クロスフェード） */
.s05v3-visual {
  position: sticky;
  top: 100px;
  align-self: start;
  height: 70vh;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-light);
  background: #fff;
}
.s05v3-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.s05v3-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
.s05v3-slide.active {
  opacity: 1;
  pointer-events: auto;
}
.s05v3-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== 05 主要機能01: 媒体一元管理（静的＋軽い登場アニメ） ===== */
.f01-frame {
  position: absolute;
  inset: 0;
  background: #fff;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: center;
  padding: 24px 22px;
  gap: 8px;
  overflow: hidden;
}
.f01-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
}
.f01-hub-ring {
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 1.5px solid rgba(124,58,237,0.22);
  background: radial-gradient(circle at center, rgba(124,58,237,0.10) 0%, rgba(124,58,237,0) 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-shadow: 0 12px 36px rgba(124,58,237,0.08);
}
.f01-hub-ring img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.f01-hub-caption {
  font-size: 10px;
  color: #7C7C86;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-align: center;
}
.f01-hub-caption b {
  display: block;
  font-size: 13px;
  font-weight: 900;
  color: #1f1f23;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.f01-link {
  position: relative;
  display: none;
}
.f01-cloud {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 360px;
  margin: 0 auto;
}
.f01-cloud::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(76,95,227,0.05) 0%, rgba(124,58,237,0.03) 60%, rgba(124,58,237,0) 100%);
  z-index: 0;
}
.f01-cloud .logo {
  position: absolute;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  z-index: 1;
  overflow: hidden;
}
.f01-cloud .logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
/* 17ロゴを2つの同心円に配置: 内側6個(半径22%) + 外側11個(半径42%・32.7度ずつ)
   top/left は親.f01-cloud基準の%、translate(-50%,-50%)で要素中心を合わせる */
.f01-cloud .logo { transform: translate(-50%, -50%); }
.f01-cloud .logo.r1 { width: 44px; height: 44px; padding: 7px; }
/* 内側リング(半径22%) - 6個 */
.f01-cloud .logo:nth-child(1)  { top: 28%; left: 50%; }
.f01-cloud .logo:nth-child(2)  { top: 39%; left: 69%; }
.f01-cloud .logo:nth-child(3)  { top: 61%; left: 69%; }
.f01-cloud .logo:nth-child(4)  { top: 72%; left: 50%; }
.f01-cloud .logo:nth-child(5)  { top: 61%; left: 31%; }
.f01-cloud .logo:nth-child(6)  { top: 39%; left: 31%; }
/* 外側リング(半径42%) - 11個 */
.f01-cloud .logo:nth-child(7)  { top:  8%; left: 50%; }
.f01-cloud .logo:nth-child(8)  { top: 15%; left: 73%; }
.f01-cloud .logo:nth-child(9)  { top: 33%; left: 88%; }
.f01-cloud .logo:nth-child(10) { top: 56%; left: 92%; }
.f01-cloud .logo:nth-child(11) { top: 78%; left: 82%; }
.f01-cloud .logo:nth-child(12) { top: 90%; left: 62%; }
.f01-cloud .logo:nth-child(13) { top: 90%; left: 38%; }
.f01-cloud .logo:nth-child(14) { top: 78%; left: 18%; }
.f01-cloud .logo:nth-child(15) { top: 56%; left:  8%; }
.f01-cloud .logo:nth-child(16) { top: 33%; left: 12%; }
.f01-cloud .logo:nth-child(17) { top: 15%; left: 27%; }
/* 接続線: Uberall→集合の中心へ */
.f01-frame::before {
  content: "";
  position: absolute;
  left: 38%;
  top: 50%;
  width: 6%;
  height: 1.5px;
  background: linear-gradient(90deg, rgba(124,58,237,0.45), rgba(124,58,237,0.15));
  transform: translateY(-50%);
  z-index: 0;
}
.f01-frame::after {
  content: "";
  position: absolute;
  left: 37.5%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #7C3AED;
  transform: translateY(-50%);
  z-index: 0;
}
.f01-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(76,95,227,0.10));
  color: #7C3AED;
  font-size: 9px;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 99px;
  letter-spacing: 0.04em;
  z-index: 2;
}

/* 軽い登場アニメ: active時にロゴが少しずつ順次fade-in。位置transformは固定なのでopacityのみ */
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo {
  animation: f01-fade .35s backwards;
}
@keyframes f01-fade {
  from { opacity: 0; }
}
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(1)  { animation-delay: .15s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(2)  { animation-delay: .20s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(3)  { animation-delay: .25s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(4)  { animation-delay: .30s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(5)  { animation-delay: .35s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(6)  { animation-delay: .40s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(7)  { animation-delay: .50s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(8)  { animation-delay: .55s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(9)  { animation-delay: .60s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(10) { animation-delay: .65s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(11) { animation-delay: .70s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(12) { animation-delay: .75s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(13) { animation-delay: .80s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(14) { animation-delay: .85s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(15) { animation-delay: .90s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(16) { animation-delay: .95s; }
.s05v3-slide.active[data-feature-anim="f01"] .f01-cloud .logo:nth-child(17) { animation-delay: 1.00s; }

/* ===== 05 主要機能02: UB-Iチャット指示アニメーション ===== */
.f02-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #F5F6FA;
  color: #1f1f23;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 11px;
  overflow: hidden;
}
.f02-chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #EAECF1;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.f02-chrome .dot { width: 8px; height: 8px; border-radius: 50%; }
.f02-chrome .dot:nth-child(1) { background: #FF6058; }
.f02-chrome .dot:nth-child(2) { background: #FFBD2E; }
.f02-chrome .dot:nth-child(3) { background: #28C840; }
.f02-url {
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #6b6b75;
  letter-spacing: 0.02em;
}
.f02-body {
  flex: 1;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 200px;
  min-height: 0;
}
.f02-side {
  background: #FFFFFF;
  border-right: 1px solid rgba(0,0,0,0.06);
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.f02-side i {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: block;
  position: relative;
}
.f02-side i::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 3px;
  background: #C4C6D0;
}
.f02-side i.on { background: rgba(124,58,237,0.10); }
.f02-side i.on::before { background: #7C3AED; }
.f02-main { position: relative; overflow: hidden; background: #F5F6FA; }
.f02-screen {
  position: absolute;
  inset: 0;
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none;
}
.f02-screen.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.f02-screen .crumb {
  font-size: 9px;
  color: #7C7C86;
  letter-spacing: 0.02em;
}
.f02-screen .crumb b { color: #7C3AED; font-weight: 700; }
.f02-screen h4 {
  font-size: 14px;
  font-weight: 800;
  color: #111;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.f02-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 8px;
  padding: 9px 11px;
}
.f02-card .ttl { font-weight: 800; font-size: 11px; color: #111; }
.f02-card .sub { font-size: 9px; color: #7C7C86; margin-top: 2px; }
.f02-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.f02-pill { font-size: 9px; padding: 2px 7px; border-radius: 99px; background: rgba(124,58,237,0.08); color: #7C3AED; font-weight: 700; }
.f02-score-row { display: flex; gap: 10px; align-items: center; }
.f02-score-big { font-size: 26px; font-weight: 900; color: #111; line-height: 1; font-family: "Inter", sans-serif; }
.f02-bar { height: 5px; background: rgba(0,0,0,0.06); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.f02-bar i { display: block; height: 100%; background: #7C3AED; border-radius: 99px; }
.f02-metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.f02-metric { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 7px; padding: 7px 9px; }
.f02-metric .l { font-size: 9px; color: #7C7C86; font-weight: 700; }
.f02-metric b { font-size: 13px; font-weight: 900; color: #111; display: block; margin-top: 2px; font-family: "Inter", sans-serif; }
.f02-days {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.f02-days li {
  display: grid;
  grid-template-columns: 46px 22px 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  font-size: 10px;
}
.f02-days .day { font-weight: 700; color: #111; }
.f02-days .toggle {
  width: 20px; height: 11px;
  border-radius: 99px;
  background: #28C840;
  position: relative;
}
.f02-days .toggle::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #fff;
  top: 2px; left: 11px;
}
.f02-days li.off .toggle { background: #E0473F; }
.f02-days li.off .toggle::after { left: 2px; }
.f02-days .time {
  justify-self: end;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #111;
  font-weight: 700;
  opacity: 0;
  transition: opacity .35s;
}
.f02-days li.filled .time { opacity: 1; }
.f02-days li.off .time { color: #E0473F; }
.f02-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(124,58,237,0.10);
  color: #7C3AED;
  font-size: 8px;
  padding: 2px 6px;
  border-radius: 99px;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .35s, transform .35s;
}
.f02-mark.on { opacity: 1; transform: none; }
.f02-publish {
  margin-top: 4px;
  align-self: flex-start;
  padding: 7px 16px;
  border-radius: 99px;
  background: #7C3AED;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  border: 0;
  cursor: default;
  box-shadow: 0 6px 18px rgba(124,58,237,0.36);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s, transform .35s;
}
.f02-publish.on { opacity: 1; transform: none; }
.f02-chat {
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.f02-chat-head {
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 11px;
  font-weight: 800;
  color: #7C3AED;
}
.f02-chat-head .avatar {
  background: linear-gradient(135deg, #7C3AED, #4C5FE3);
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
}
.f02-chat-head .badge {
  font-size: 8px;
  background: #34D399;
  color: #fff;
  padding: 1px 5px;
  border-radius: 99px;
  font-weight: 800;
  margin-left: auto;
}
.f02-chat-body {
  flex: 1;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.f02-msg {
  font-size: 10px;
  line-height: 1.55;
  border-radius: 10px;
  max-width: 90%;
  opacity: 0;
  max-height: 0;
  padding: 0 10px;
  overflow: hidden;
  transform: translateY(4px);
  transition: opacity .3s ease, transform .3s ease, max-height .3s ease, padding .3s ease;
}
.f02-msg.on {
  opacity: 1;
  transform: none;
  max-height: 220px;
  padding: 7px 10px;
}
.f02-msg.user {
  align-self: flex-end;
  background: #7C3AED;
  color: #fff;
  border-bottom-right-radius: 3px;
}
.f02-msg.loading {
  align-self: flex-start;
  background: #F0EBFF;
  display: inline-flex;
  gap: 3px;
  padding: 8px 10px;
}
.f02-msg.loading span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #7C3AED;
  animation: f02-blink 1.2s infinite;
  opacity: 0.3;
}
.f02-msg.loading span:nth-child(2) { animation-delay: .15s; }
.f02-msg.loading span:nth-child(3) { animation-delay: .3s; }
@keyframes f02-blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}
.f02-msg.ai {
  align-self: flex-start;
  background: #F0EBFF;
  color: #2A1E47;
  border-bottom-left-radius: 3px;
}
.f02-chat-input {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 7px 10px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.f02-chat-input .field {
  flex: 1;
  background: #F5F6FA;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 10px;
  color: #1f1f23;
  font-family: inherit;
  min-height: 22px;
  display: flex;
  align-items: center;
}
.f02-chat-input .field.empty { color: #b3b3bd; }
.f02-chat-input .send {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #C4C6D0;
  border: 0;
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}
.f02-chat-input.is-on .send { background: #7C3AED; }
.f02-typed { color: inherit; }
.f02-typed.is-typing::after {
  content: "▍";
  font-weight: 100;
  opacity: 0.6;
  animation: f02-cursor 1s infinite;
  margin-left: 1px;
}
@keyframes f02-cursor {
  0%, 50% { opacity: 0.6; }
  51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .f02-screen, .f02-msg, .f02-mark, .f02-publish, .f02-days .time {
    transition: none;
  }
  .f02-msg.loading span { animation: none; opacity: 0.8; }
  .f02-typed.is-typing::after { animation: none; opacity: 0.6; }
}

/* ===== 05 主要機能04: 自社サイト一括同期アニメーション ===== */
.f04-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #F5F6FA;
  font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
}
.f04-chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #EAECF1;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.f04-chrome .dot { width: 8px; height: 8px; border-radius: 50%; }
.f04-chrome .dot:nth-child(1) { background: #FF6058; }
.f04-chrome .dot:nth-child(2) { background: #FFBD2E; }
.f04-chrome .dot:nth-child(3) { background: #28C840; }
.f04-url {
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #6b6b75;
}
.f04-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 22px 18px;
  gap: 16px;
  align-items: stretch;
}
.f04-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.f04-person {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  opacity: 0;
  transform: translateX(-10px);
}
.f04-person-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED 0%, #4C5FE3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.f04-person-icon svg { width: 22px; height: 22px; fill: #fff; }
.f04-person-label {
  font-size: 10px;
  font-weight: 800;
  color: #1f1f23;
}
.f04-arrow-h {
  position: relative;
  width: 60px; height: 18px;
  flex-shrink: 0;
}
.f04-arrow-h::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: calc(100% - 8px); height: 2px;
  background: #7C3AED;
  margin-top: -1px;
  transform: scaleX(0);
  transform-origin: left;
}
.f04-arrow-h::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #7C3AED;
  transform: translateY(-50%);
  opacity: 0;
}
.f04-arrow-h .label {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 800;
  color: #7C3AED;
  white-space: nowrap;
  margin-bottom: 4px;
  opacity: 0;
  letter-spacing: 0.02em;
}
.f04-uberall {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 12px 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  min-width: 224px;
  max-width: 240px;
  opacity: 0;
  transform: translateY(8px);
}
.f04-uberall-head {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 7px;
}
.f04-uberall-mark {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C5FE3);
}
.f04-uberall-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, #6B4FBB, #4C5FE3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f04-uberall-sub {
  font-size: 9px;
  color: #7C7C86;
  font-weight: 700;
  margin-bottom: 7px;
}
.f04-uberall-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 9px;
}
.f04-uberall-row {
  font-size: 9px;
  background: #F5F6FA;
  border-radius: 4px;
  padding: 4px 7px;
  display: flex;
  justify-content: space-between;
  color: #1f1f23;
}
.f04-uberall-row b { color: #7C3AED; font-weight: 800; }
.f04-uberall-btn {
  width: 100%;
  background: #7C3AED;
  color: #fff;
  border: 0;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 10px;
  font-weight: 800;
  cursor: default;
  position: relative;
}
.f04-uberall-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 9px;
  border: 2px solid #7C3AED;
  opacity: 0;
}
.f04-arrow-v {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f04-arrow-v::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 100%;
  background: linear-gradient(180deg, transparent 0%, #C4B5FD 12%, #C4B5FD 88%, transparent 100%);
  margin-left: -1px;
  transform: scaleY(0);
  transform-origin: top;
}
.f04-arrow-v-pill {
  position: relative;
  z-index: 2;
  background: #F5F6FA;
  color: #7C3AED;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 99px;
  border: 1px solid #C4B5FD;
  opacity: 0;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.f04-sites {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.f04-site {
  position: relative;
  background: #fff;
  border-radius: 7px;
  border: 1px solid rgba(0,0,0,0.06);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  opacity: 0;
  transform: translateY(10px);
}
.f04-site-bar {
  display: flex; gap: 3px;
  padding: 5px 7px;
  background: #EAECF1;
}
.f04-site-bar i { width: 4px; height: 4px; border-radius: 50%; background: #C4C6D0; }
.f04-site-body { padding: 8px 9px 10px; }
.f04-site-brand {
  font-size: 8px;
  color: #7C7C86;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.f04-site-name {
  font-size: 11px;
  font-weight: 800;
  color: #1f1f23;
  margin-top: 1px;
  line-height: 1.3;
}
.f04-site-info {
  font-size: 9px;
  color: #555;
  margin-top: 5px;
  line-height: 1.55;
}
.f04-site-info b { color: #1f1f23; font-weight: 800; }
.f04-site-badge {
  position: absolute;
  top: 6px; right: 6px;
  background: #34D399;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  opacity: 0;
  transform: scale(0.6);
  letter-spacing: 0.02em;
}
.f04-caption {
  text-align: center;
  font-size: 11px;
  color: #555;
  font-weight: 700;
  opacity: 0;
  margin-top: 2px;
}
.f04-caption b { color: #7C3AED; font-weight: 800; }

/* 下段: AI検索エンジン引用ブロック */
.f04-ai-block {
  margin-top: 4px;
  padding: 12px 14px;
  background: rgba(124,58,237,0.05);
  border: 1px dashed rgba(124,58,237,0.22);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  opacity: 0;
  transform: translateY(8px);
}
.f04-ai-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #1f1f23;
  line-height: 1.5;
}
.f04-ai-head .spark {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C5FE3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  flex-shrink: 0;
}
.f04-ai-head b {
  font-weight: 800;
  background: linear-gradient(135deg, #7C3AED, #4C5FE3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.f04-ai-engines {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.f04-ai-engine {
  height: 24px;
  padding: 0 9px;
  border-radius: 99px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.10);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  color: #1f1f23;
  opacity: 0;
  transform: scale(0.85);
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.f04-ai-engine img {
  height: 12px;
  width: auto;
  display: block;
}
.f04-ai-engine .pcx {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #20B8CD;
  display: inline-block;
}
.f04-ai-engine .ggle {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);
  display: inline-block;
  position: relative;
}
.f04-ai-engine .ggle::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}

/* play state: triggers all animations */
.f04-frame.f04-play .f04-person { animation: f04-in-left .4s .2s forwards; }
.f04-frame.f04-play .f04-arrow-h::before { animation: f04-grow-x .35s .6s forwards; }
.f04-frame.f04-play .f04-arrow-h::after { animation: f04-fade-in .2s .95s forwards; }
.f04-frame.f04-play .f04-arrow-h .label { animation: f04-fade-in .25s .75s forwards; }
.f04-frame.f04-play .f04-uberall { animation: f04-up .4s .5s forwards; }
.f04-frame.f04-play .f04-uberall-btn::before { animation: f04-pulse-ring 1.2s 1.1s 1; }
.f04-frame.f04-play .f04-arrow-v::before { animation: f04-grow-y .35s 1.6s forwards; }
.f04-frame.f04-play .f04-arrow-v-pill { animation: f04-fade-in .25s 1.85s forwards; }
.f04-frame.f04-play .f04-site { animation: f04-up .4s forwards; }
.f04-frame.f04-play .f04-site:nth-child(1) { animation-delay: 2.05s; }
.f04-frame.f04-play .f04-site:nth-child(2) { animation-delay: 2.20s; }
.f04-frame.f04-play .f04-site:nth-child(3) { animation-delay: 2.35s; }
.f04-frame.f04-play .f04-site:nth-child(1) .f04-site-badge { animation: f04-badge .35s 2.55s forwards; }
.f04-frame.f04-play .f04-site:nth-child(2) .f04-site-badge { animation: f04-badge .35s 2.75s forwards; }
.f04-frame.f04-play .f04-site:nth-child(3) .f04-site-badge { animation: f04-badge .35s 2.95s forwards; }
.f04-frame.f04-play .f04-caption { animation: f04-fade-in .4s 3.15s forwards; }
.f04-frame.f04-play .f04-ai-block { animation: f04-up .45s 3.6s forwards; }
.f04-frame.f04-play .f04-ai-engine { animation: f04-pop .35s forwards; }
.f04-frame.f04-play .f04-ai-engine:nth-child(1) { animation-delay: 4.0s; }
.f04-frame.f04-play .f04-ai-engine:nth-child(2) { animation-delay: 4.10s; }
.f04-frame.f04-play .f04-ai-engine:nth-child(3) { animation-delay: 4.20s; }
.f04-frame.f04-play .f04-ai-engine:nth-child(4) { animation-delay: 4.30s; }
.f04-frame.f04-play .f04-ai-engine:nth-child(5) { animation-delay: 4.40s; }
@keyframes f04-pop {
  to { opacity: 1; transform: scale(1); }
}

@keyframes f04-in-left {
  to { opacity: 1; transform: none; }
}
@keyframes f04-up {
  to { opacity: 1; transform: none; }
}
@keyframes f04-fade-in {
  to { opacity: 1; }
}
@keyframes f04-grow-x {
  to { transform: scaleX(1); }
}
@keyframes f04-grow-y {
  to { transform: scaleY(1); }
}
@keyframes f04-pulse-ring {
  0% { opacity: 0; transform: scale(0.92); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); }
}
@keyframes f04-badge {
  0% { opacity: 0; transform: scale(0.55); }
  60% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .f04-frame .f04-person,
  .f04-frame .f04-uberall,
  .f04-frame .f04-site,
  .f04-frame .f04-site-badge,
  .f04-frame .f04-caption,
  .f04-frame .f04-arrow-v-pill,
  .f04-frame .f04-ai-block,
  .f04-frame .f04-ai-engine {
    opacity: 1; transform: none;
  }
  .f04-frame .f04-arrow-h::before { transform: scaleX(1); }
  .f04-frame .f04-arrow-h::after { opacity: 1; }
  .f04-frame .f04-arrow-h .label { opacity: 1; }
  .f04-frame .f04-arrow-v::before { transform: scaleY(1); }
}

/* ===== 05 主要機能03: クチコミAI返信アニメーション ===== */
.f03-frame {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #F5F6FA;
  font-family: "Noto Sans JP", sans-serif;
  overflow: hidden;
}
.f03-chrome {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: #EAECF1;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.f03-chrome .dot { width: 8px; height: 8px; border-radius: 50%; }
.f03-chrome .dot:nth-child(1) { background: #FF6058; }
.f03-chrome .dot:nth-child(2) { background: #FFBD2E; }
.f03-chrome .dot:nth-child(3) { background: #28C840; }
.f03-url {
  margin-left: 8px;
  font-family: "Inter", sans-serif;
  font-size: 10px;
  color: #6b6b75;
}
.f03-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  gap: 14px;
  overflow: hidden;
}
.f03-review {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  flex-shrink: 0;
}
.f03-review-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #1f1f23;
  font-weight: 700;
}
.f03-review-head .glogo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.f03-review-head .gicon {
  width: 13px; height: 13px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);
  display: inline-block;
  position: relative;
}
.f03-review-head .gicon::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}
.f03-review-head .stars {
  color: #F2A93B;
  font-size: 12px;
  letter-spacing: 1px;
}
.f03-review-head .meta {
  margin-left: auto;
  font-size: 9px;
  color: #7C7C86;
  font-weight: 600;
  text-align: right;
  line-height: 1.4;
}
.f03-review-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
}
.f03-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E64C4C, #C73838);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.f03-review-author .name {
  font-size: 11px;
  font-weight: 800;
  color: #1f1f23;
}
.f03-review-author .gicon {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);
  display: inline-block;
  margin-left: 4px;
  position: relative;
}
.f03-review-author .gicon::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: #fff;
}
.f03-review-author .stars-small {
  color: #F2A93B;
  font-size: 10px;
  letter-spacing: 1px;
  margin-left: 4px;
}
.f03-review-date {
  font-size: 9px;
  color: #7C7C86;
  margin-top: 4px;
  font-weight: 600;
}
.f03-review-text {
  font-size: 11px;
  color: #1f1f23;
  line-height: 1.7;
  margin-top: 9px;
}
.f03-reply {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}
.f03-reply-input {
  flex: 0 0 auto;
  padding: 14px 60px 14px 14px;
  font-size: 11px;
  color: #1f1f23;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  min-height: 110px;
  max-height: 200px;
  overflow: hidden;
}
.f03-reply-input.empty::before {
  content: "返信を入力…";
  color: #b3b3bd;
  font-size: 11px;
}
.f03-reply-input.typing::after {
  content: "▍";
  font-weight: 100;
  opacity: 0.6;
  margin-left: 1px;
  color: #7C3AED;
  animation: f03-cursor 1s infinite;
}
@keyframes f03-cursor {
  0%, 50% { opacity: 0.6; }
  51%, 100% { opacity: 0; }
}
.f03-reply-counter {
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 9px;
  color: #b3b3bd;
  font-family: "Inter", sans-serif;
  font-weight: 700;
}
.f03-reply-toolbar {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.f03-toolbar-ico {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: transparent;
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.f03-ai-btn {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #7C3AED, #4C5FE3);
  color: #fff;
  font-weight: 900;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  position: relative;
  cursor: default;
  flex-shrink: 0;
}
.f03-ai-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #7C3AED;
  opacity: 0;
}
.f03-ai-label {
  font-size: 9px;
  color: #7C7C86;
  font-weight: 700;
  opacity: 0;
  transition: opacity .3s;
}
.f03-ai-label.on { opacity: 1; }
.f03-toolbar-spacer { flex: 1; }
.f03-send {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #C4C6D0;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  flex-shrink: 0;
  cursor: default;
  transition: background .25s;
}
.f03-send.on { background: #7C3AED; }

/* 承認フロー（フェーズ2） */
.f03-flow {
  flex: 0 0 auto;
  background: linear-gradient(135deg, rgba(124,58,237,0.06), rgba(76,95,227,0.04));
  border: 1px solid rgba(124,58,237,0.16);
  border-radius: 10px;
  padding: 14px 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  position: relative;
}
.f03-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  position: relative;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .35s, transform .35s;
}
.f03-flow-step.on { opacity: 1; transform: none; }
.f03-flow-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7C3AED, #4C5FE3);
  color: #fff;
}
.f03-flow-avatar svg { width: 16px; height: 16px; fill: #fff; }
.f03-flow-avatar.gbp {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
}
.f03-flow-avatar.gbp::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%);
}
.f03-flow-avatar.gbp::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: #fff;
}
.f03-flow-label {
  font-size: 9px;
  font-weight: 800;
  color: #1f1f23;
  letter-spacing: 0.02em;
}
.f03-flow-btn {
  font-size: 9px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  background: #C4C6D0;
  color: #fff;
  border: 0;
  position: relative;
  cursor: default;
  transition: background .25s;
  letter-spacing: 0.04em;
}
.f03-flow-btn.lit { background: #7C3AED; }
.f03-flow-status {
  font-size: 8px;
  font-weight: 800;
  color: #b3b3bd;
  letter-spacing: 0.04em;
  transition: color .25s;
  white-space: nowrap;
}
.f03-flow-status.doing { color: #7C3AED; }
.f03-flow-status.done { color: #34D399; }
.f03-flow-mail-label {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: #7C3AED;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity .3s;
}
.f03-flow-mail-label.on { opacity: 1; }
.f03-flow-btn.lit::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 99px;
  border: 2px solid #7C3AED;
  opacity: 0;
  animation: f03-pulse 1s 1;
}
.f03-flow-arrow {
  position: relative;
  width: 56px; height: 14px;
}
.f03-flow-arrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: calc(100% - 7px); height: 1.5px;
  background: #C4B5FD;
  margin-top: -0.75px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s ease-out;
}
.f03-flow-arrow::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #C4B5FD;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity .2s;
}
.f03-flow-arrow.on::before { transform: scaleX(1); }
.f03-flow-arrow.on::after { opacity: 1; }
.f03-flow-mail {
  position: absolute;
  left: 0; top: 50%;
  margin-top: -7px;
  width: 18px; height: 14px;
  opacity: 0;
}
.f03-flow-mail svg { width: 100%; height: 100%; }
.f03-flow-mail.fly { animation: f03-mail-fly 1s ease-out 1 forwards; }
@keyframes f03-mail-fly {
  0%   { opacity: 0; transform: translateX(0) scale(0.7); }
  15%  { opacity: 1; transform: translateX(8%) scale(1); }
  85%  { opacity: 1; transform: translateX(80%) scale(1); }
  100% { opacity: 0; transform: translateX(95%) scale(0.85); }
}
.f03-flow-badge {
  position: absolute;
  top: -8px; right: -6px;
  background: #34D399;
  color: #fff;
  font-size: 8px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 99px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity .3s, transform .3s;
}
.f03-flow-badge.on { opacity: 1; transform: scale(1); }

/* play state animations: ズーム→pulse→クリック の順でAIボタンに視線を集める */
.f03-frame.f03-play .f03-ai-btn { animation: f03-ai-zoom 1.4s .35s 1 cubic-bezier(.4,0,.2,1); }
.f03-frame.f03-play .f03-ai-btn::before { animation: f03-pulse 1s 1.85s 1; }
@keyframes f03-ai-zoom {
  0%   { transform: scale(1); }
  18%  { transform: scale(1.42); }
  36%  { transform: scale(1); }
  54%  { transform: scale(1.42); }
  72%  { transform: scale(1); }
  100% { transform: scale(1); }
}
@keyframes f03-pulse {
  0% { opacity: 0; transform: scale(0.92); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}
/* クリック瞬間の凹みエフェクト */
.f03-frame.f03-play .f03-ai-btn { transform-origin: center; }
.f03-frame.f03-play .f03-ai-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  opacity: 0;
  animation: f03-click 0.3s 2.6s 1;
  pointer-events: none;
}
@keyframes f03-click {
  0% { opacity: 0.6; transform: scale(0.85); }
  100% { opacity: 0; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .f03-reply-input.typing::after { animation: none; opacity: 0.6; }
  .f03-frame.f03-play .f03-ai-btn::before { animation: none; opacity: 0; }
}

@media (max-width: 980px) {
  /* SP時: sticky scroll切替をOFFにして各slideをtext直下にinline配置 */
  .s05v3-grid { display: block; grid-template-columns: 1fr; }
  .s05v3-item { min-height: auto; display: block; padding: 0; margin: 0; }
  .s05v3-item:not(.active) { opacity: 1; }
  .s05v3-item::before { display: none; }
  /* visual/inner を通常block化してsticky解除 */
  .s05v3-visual {
    display: block !important;
    position: static !important;
    height: auto !important;
    max-width: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
  }
  .s05v3-visual-inner {
    display: block;
    position: static;
    height: auto;
    width: 100%;
  }
  /* slideを縦積みで常時表示・縦長frame化 */
  .s05v3-slide {
    position: relative;
    inset: auto;
    opacity: 1 !important;
    pointer-events: auto;
    aspect-ratio: 3 / 4;
    height: auto;
    width: 100%;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-light);
    background: #fff;
    margin-top: var(--sp-4);
    margin-bottom: var(--sp-6);
  }
  .s05v3-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
  /* PC同レイアウトを維持しつつ縮小表示 */
  .s05v3-slide .f01-frame,
  .s05v3-slide .f02-frame,
  .s05v3-slide .f03-frame,
  .s05v3-slide .f04-frame { zoom: 0.7; }
  /* 機能01のみ: SP時にhub(上)+cloud(下)を縦並びに */
  .s05v3-slide .f01-frame { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 48px 16px 24px; gap: 20px; }
  .s05v3-slide .f01-hub { padding-bottom: 4px; }
  .s05v3-slide .f01-hub-ring { width: 110px; height: 110px; padding: 30px; }
  .s05v3-slide .f01-hub-ring img { max-height: 40px; object-fit: contain; }
  .s05v3-slide .f01-cloud { max-width: 320px; }
  /* 接続線を縦向きに: hub下→cloud上まで届く長さで */
  .s05v3-slide .f01-frame::before {
    left: 50%;
    top: 170px;
    width: 1.5px;
    height: 110px;
    background: linear-gradient(180deg, rgba(124,58,237,0.55) 0%, rgba(124,58,237,0.15) 100%);
    transform: translateX(-50%);
  }
  .s05v3-slide .f01-frame::after {
    left: 50%;
    top: 274px;
    width: 6px;
    height: 6px;
    transform: translateX(-50%);
  }
}

/* ============================================================
   features.html 用オーバーライド
   .fp-anim = 各機能詳細ブロックの右カラム内で1枚slide独立表示
============================================================ */
.fp-anim {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 380px;
  max-height: 580px;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-md);
}
.fp-anim .s05v3-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.fp-anim .s05v3-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: auto;
}
/* IntersectionObserver で .active を付与された時のみ可視化 */
.fp-anim .s05v3-slide.active {
  opacity: 1;
}

/* f01 の縦アスペクト調整（元は縦長）: 正方形枠に収める */
.fp-anim .f01-frame { padding: var(--sp-4); }

/* f02/f03/f04 のブラウザ枠は元々アスペクト持ちだが、正方形枠にfitさせる */
.fp-anim .f02-frame,
.fp-anim .f03-frame,
.fp-anim .f04-frame {
  position: absolute;
  inset: 0;
}

@media (max-width: 900px) {
  .fp-anim {
    aspect-ratio: 3 / 4;
    min-height: 420px;
    max-height: 640px;
  }
}