@charset "UTF-8";
/* ==========================================================================
   トップページ「特長」最上段：AIエージェントのイメージ
   設置先 : wp-content/themes/ubunbase/assets/css/top-ai.css
   読込元 : front-page.php（style.css より後に読み込む）
   方針   : ブロックの体裁（.flx-Boxx2 ／ .box-Title ／ h4 ／ p）は他の特長と共通で、
            style.css をそのまま使う。ここは画像の代わりに置く擬似UIのスタイルだけ。
            すべて .aitop- 接頭辞にスコープし、既存ページへ影響を与えない。
   配色   : インク #0F1E33 ／ 本文 #56657A ／ 罫線 #E6EBF2 ／ 面 #F5F7FA
            アクセント #1967D2 ／ 淡色 #E8F1FD
   ========================================================================== */

/* --- CTA（AIエージェントの特長にだけ置く） ------------------------------- */
/* .link-Lbtn は中央寄せなので、本文と頭を揃えるため左寄せに戻す */
.aitop-Link {
  justify-content: flex-start;
  margin-top: 28px;
}
.aitop-Link a { font-size: 1.125rem; }
@media screen and (max-width: 767px) {
  .aitop-Link { justify-content: center; margin-top: 20px; }
  .aitop-Link a { font-size: 1rem; }
}

/* --- 画像枠に収まるサイズ感（img-top01〜04 と同じ見え方に合わせる） -------- */
.aitop-Visual {
  max-width: 460px;
  margin: 0 auto;
}
.aitop-Window {
  background: #ffffff;
  border: 1px solid #E6EBF2;
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15, 30, 51, 0.1);
  overflow: hidden;
}

/* --- ウィンドウ上部のバー ------------------------------------------------ */
.aitop-Bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #F5F7FA;
  border-bottom: 1px solid #E6EBF2;
  padding: 10px 16px;
  font-size: 0.75rem;
  color: #56657A;
}
.aitop-Dots { display: flex; gap: 5px; }
.aitop-Dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D6DEE9;
}
.aitop-Crumb { font-weight: bold; color: #0F1E33; }
.aitop-Conn { margin-left: auto; color: #1967D2; font-weight: bold; }

/* --- 中身：質問 → 実行したツール → 回答 --------------------------------- */
.aitop-Body { padding: 20px 20px 18px; }
/* 人の発言なので、チャットUIの慣習どおり右に寄せる */
.aitop-Q {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 90%;
  margin: 0 0 14px auto;
  background: #E8F1FD;
  color: #0F1E33;
  font-size: 0.9375rem;
  font-weight: bold;
  line-height: 1.6;
  border-radius: 12px;
  padding: 10px 16px;
}
/* 実行したツール。等幅で「機械が動いた」ことを示す */
.aitop-Tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.aitop-Tools li {
  font-family: "SFMono-Regular", Consolas, "Roboto Mono", monospace;
  font-size: 0.6875rem;
  color: #56657A;
  background: #F5F7FA;
  border: 1px solid #E6EBF2;
  border-radius: 6px;
  padding: 4px 8px;
}
.aitop-A {
  border-left: 3px solid #1967D2;
  padding-left: 14px;
}
.aitop-Alead {
  font-size: 0.9375rem;
  font-weight: bold;
  line-height: 1.7;
  color: #0F1E33;
  margin-bottom: 6px;
}
.aitop-Alead b { color: #1967D2; }
.aitop-Atext {
  font-size: 0.8125rem;
  line-height: 1.8;
  color: #56657A;
}
.aitop-Time {
  font-size: 0.75rem;
  color: #8A97A8;
  text-align: right;
  margin-top: 12px;
}

/* --- 既存ブロックの左右交互レイアウトを維持する -------------------------- */
/* style.css は .flx-Boxx2:nth-child(even) で画像の左右を入れ替えている。
   AIブロックを1つ挿入すると偶奇がずれて既存4ブロックの左右が反転するため、
   AIブロックより後ろのブロックだけ明示的に元の並びへ戻す。 */
@media print, screen and (min-width: 768px) {
  /* AIブロックはテキストが左、イメージが右。以降は「レポート＝テキスト右」から
     元の互い違いが続く */
  .flx-Boxx2.aitop-Feature { flex-direction: row; }
  .aitop-Feature ~ .flx-Boxx2:nth-child(even) { flex-direction: row; }
  .aitop-Feature ~ .flx-Boxx2:nth-child(odd) { flex-direction: row-reverse; }
}

/* --- SP ------------------------------------------------------------------ */
@media screen and (max-width: 767px) {
  .aitop-Visual { max-width: none; }
  .aitop-Body { padding: 16px 14px 14px; }
  .aitop-Q { font-size: 0.875rem; }
}