/* ============================================================
   UP to Cloud ×AI 版 追加スタイル（style-ai.css）
   既存 style.css を土台に、AI関連の要素だけを追加定義。
   配色変数（--navy / --blue / --orange 等）は style.css の :root を流用。
   ============================================================ */

/* ---------- ヘッダー：AIヘルプ ナビ ---------- */
.nav-ai{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--orange) !important;
  font-weight:700;
}
.nav-ai:hover{ color:var(--orange-dark) !important; text-decoration:none; }
.nav-new{
  font-size:10px;
  font-weight:900;
  letter-spacing:.06em;
  color:#fff;
  background:var(--orange);
  border-radius:999px;
  padding:1px 7px;
  line-height:1.5;
}

/* ---------- ヒーロー：旧製品からの乗り換え補足 ---------- */
.hero-extra{
  margin:10px 0 0;
  padding-left:16px;
  position:relative;
  font-size:13.5px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:600px;
}
.hero-extra::before{
  content:"";
  position:absolute;
  left:0; top:.6em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--blue);
}
.hero-extra .hl-prod{ color:var(--navy); font-weight:700; }

/* ---------- ヒーロー：AI告知バー ---------- */
.hero-ai-announce{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid #f3d3b6;
  border-left:4px solid var(--orange);
  border-radius:10px;
  padding:9px 14px;
  margin:2px 0 14px;
  box-shadow:var(--shadow-sm);
  max-width:100%;
}
.ai-announce-text{ font-size:14px; color:var(--navy); line-height:1.5; }
.ai-announce-text strong{ color:var(--orange-dark); }
.ai-announce-sub{ color:var(--ink-soft); }
.ai-announce-sub strong{ color:var(--blue); }

/* ---------- 共通：AIピル（バッジ） ---------- */
.ai-pill{
  display:inline-flex;
  align-items:center;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  border-radius:999px;
  padding:4px 11px;
  line-height:1.4;
}
.ai-pill-new{ background:var(--orange); color:#fff; }
.ai-pill-now{ background:rgba(46,125,178,.18); color:#bfe0f5; border:1px solid rgba(46,125,178,.5); }
.ai-pill-coming{ background:transparent; color:var(--orange); border:1px solid var(--orange); }
.ai-pill-date{ background:rgba(255,255,255,.1); color:#d7e2ec; border:1px solid rgba(255,255,255,.28); }

/* ============================================================
   AIセクション（紺の発光バンド）
============================================================ */
.ai{
  position:relative;
  background:
    radial-gradient(900px 500px at 18% 0%, rgba(46,125,178,.28), transparent 60%),
    radial-gradient(700px 500px at 92% 30%, rgba(232,118,44,.20), transparent 55%),
    linear-gradient(160deg, #14324E 0%, #0b1c2c 100%);
  color:#eaf2f8;
  overflow:hidden;
}
.ai-eyebrow{ color:#7fc0e8; text-align:center; }
.ai-title{
  font-size:clamp(24px,3.8vw,38px);
  line-height:1.4;
  font-weight:900;
  color:#fff;
  margin:0 0 10px;
  text-align:center;
}
.ai-sub{ color:#c6d6e3; font-size:16px; margin:0 0 22px; text-align:center; }

/* AIヘルプ キービジュアル（横長ポスター） */
.ai-keyvisual{
  margin:8px auto 4px;
  max-width:1040px;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(127,192,232,.35);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.ai-keyvisual img{ width:100%; display:block; }

/* 3つのポイント */
.ai-points{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:24px 0 4px;
}
.ai-point{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(127,192,232,.25);
  border-radius:var(--radius-sm);
  padding:18px;
  text-align:center;
}
.ai-point h4{ margin:0 0 4px; font-size:16px; color:#fff; }
.ai-point p{ margin:0; font-size:14px; color:#c6d6e3; }

/* バッジは中央寄せ（キービジュアルの上） */
.ai .ai-badges{ justify-content:center; }

/* AIヘルプ：主役ブロック（2カラム） */
.ai-feature{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(24px,4vw,48px);
  align-items:center;
}
.ai-feature-media{ min-width:0; }

/* 動画プレースホルダ（16:9） */
.ai-video-ph{
  position:relative;
  aspect-ratio:16/9;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(127,192,232,.4);
  box-shadow:0 20px 50px rgba(0,0,0,.4);
  background:#0a1622;
}
.ai-video-poster{
  width:100%; height:100%;
  object-fit:cover;
  opacity:.8;
}
.ai-video-ph .video-play{ opacity:.55; }
.ai-video-badge{
  position:absolute;
  top:12px; left:12px;
  z-index:2;
  font-size:12px;
  font-weight:700;
  color:#fff;
  background:rgba(11,28,44,.8);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:5px 12px;
  backdrop-filter:blur(4px);
}

.ai-feature-body{ min-width:0; }
.ai-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.ai-feature-title{
  font-size:clamp(22px,3vw,30px);
  font-weight:900;
  color:#fff;
  margin:0 0 6px;
}
.ai-feature-lead{
  font-size:17px;
  font-weight:700;
  color:#ffd9bd;
  margin:0 0 14px;
}
.ai-list{ list-style:none; margin:0; padding:0; }
.ai-list li{
  position:relative;
  padding-left:30px;
  margin:11px 0;
  font-size:15px;
  color:#e4eef6;
  line-height:1.7;
}
.ai-list li strong{ color:#fff; }
.ai-list li::before{
  content:"";
  position:absolute;
  left:0; top:.35em;
  width:20px; height:20px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 12px rgba(232,118,44,.6);
}
.ai-list li::after{
  content:"";
  position:absolute;
  left:6px; top:.72em;
  width:7px; height:4px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* AI-OCR：次期機能（期待の目玉・オレンジ強調） */
.ai-ocr{
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:clamp(20px,3.5vw,44px);
  align-items:center;
  margin-top:42px;
  padding:clamp(20px,3vw,34px);
  background:
    radial-gradient(600px 320px at 18% 15%, rgba(232,118,44,.18), transparent 60%),
    rgba(255,255,255,.05);
  border:1px solid rgba(232,118,44,.55);
  border-radius:var(--radius);
  box-shadow:0 0 0 1px rgba(232,118,44,.12), 0 22px 55px rgba(0,0,0,.4);
}
.ai-ocr-media{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(127,192,232,.3);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.ai-ocr-media img{ width:100%; display:block; }
.ai-ocr-ribbon{
  position:absolute;
  top:14px; left:14px;
  background:var(--orange);
  color:#fff;
  font-size:13px; font-weight:900; letter-spacing:.04em;
  padding:6px 14px;
  border-radius:999px;
  box-shadow:0 6px 16px rgba(232,118,44,.5);
}
.ai-ocr-body{ min-width:0; }
.ai-ocr-title{
  font-size:clamp(22px,3vw,30px);
  font-weight:900;
  color:#fff;
  margin:8px 0 10px;
  line-height:1.42;
}
.ai-ocr-title .hl{ color:var(--orange); }
.ai-ocr-lead{ font-size:16px; color:#eaf2f8; margin:0 0 14px; line-height:1.85; }
.ai-ocr-lead strong{ color:#ffd9bd; }
.ai-ocr-cta-note{
  margin:14px 0 0;
  font-size:14px;
  font-weight:700;
  color:#ffd9bd;
}
.ai-note{
  display:block;
  margin-top:8px;
  font-size:12px;
  color:#93a9bb;
}
/* バッジ追加種別 */
.ai-pill-next{ background:var(--orange); color:#fff; }
.ai-pill-paid{ background:rgba(255,255,255,.08); color:#e4eef6; border:1px solid rgba(255,255,255,.45); }

/* 料金セクションの補足（AI-OCRは有料） */
.price-sub-note{ font-size:13px; color:var(--ink-soft); }

/* AIロードマップ */
.ai-roadmap{
  display:flex;
  align-items:stretch;
  gap:12px;
  margin-top:32px;
}
.ai-road-step{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:16px 12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(127,192,232,.25);
  border-radius:var(--radius-sm);
  text-align:center;
}
.ai-road-step.is-now{
  background:rgba(232,118,44,.16);
  border-color:var(--orange);
}
.ai-road-step.is-next{
  position:relative;
  border-color:var(--orange);
  border-style:dashed;
  background:rgba(232,118,44,.08);
}
.ai-road-tag{
  position:absolute;
  top:-11px; left:50%; transform:translateX(-50%);
  background:var(--orange); color:#fff;
  font-size:10px; font-weight:900; letter-spacing:.06em;
  padding:2px 10px; border-radius:999px;
  white-space:nowrap;
}
.ai-road-when{ font-size:12px; font-weight:900; letter-spacing:.08em; color:#7fc0e8; }
.ai-road-step.is-now .ai-road-when,
.ai-road-step.is-next .ai-road-when{ color:var(--orange); }
.ai-road-what{ font-size:17px; font-weight:900; color:#fff; }
.ai-road-arrow{
  display:flex; align-items:center;
  color:#5f86a0; font-size:20px; font-weight:900;
}
.ai-foot{
  margin:22px 0 0;
  font-size:14px;
  color:#c6d6e3;
  text-align:center;
}
.ai-foot strong{ color:#fff; }

/* 理由③内のインラインリンク */
.inline-link{ font-weight:700; color:var(--blue); }

/* ============================================================
   セクション背景の色リズム調整（AI版）
   AIセクション（紺）の直後に、同じ紺の「つかみ」が来て色がかぶるため、
   つかみを明色に変更して、紺→白の切り替わりを作る。
   ※ 既存 index.html には影響しません（このファイルはAI版のみ読み込み）
   全体の並び：ヒーロー(淡青)→AI(紺)→つかみ(白)→動画(灰)→3つの理由(白)
   →お引っ越し(灰)→料金(白)→資料DL(灰)→FAQ(白)→クロージング(紺)→フッター(紺)
============================================================ */
.hook{ background:#fff; color:var(--ink); }
.hook-title{ color:var(--navy); }
.hook-lead{ color:var(--ink); }
.hook-lead strong{ color:var(--navy); }

/* ============================================================
   レスポンシブ
============================================================ */
@media (max-width:900px){
  .ai-feature{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .nav-ai .nav-new{ display:none; }
  .ai-points{ grid-template-columns:1fr; }
  .ai-ocr{ grid-template-columns:1fr; }
  .ai-badges{ justify-content:center; }
  .ai-roadmap{ flex-direction:column; }
  .ai-road-arrow{ justify-content:center; transform:rotate(90deg); }
}