h1 {
  display: none;
}

/* PCだけセンター表示 */
@media (min-width: 769px){
  .pc-center-only{
    display: flex;
    justify-content: center;
  }
}

.hero-dashboard-image{
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  position: relative;
  top: -300px;
  margin-bottom: -250px!important;
  animation: heroFloatIn 900ms ease-out both, heroFloatLoop 4.5s ease-in-out 900ms infinite;
  will-change: transform, opacity;
}

/* スマホだけ */
@media (max-width: 768px){
  .hero-dashboard-image{
    top: -400px;
  }
}

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

@keyframes heroFloatLoop{
  0%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
  100%{ transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .hero-dashboard-image{ animation: none; }
}

#it-network-bg{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.site, .l-main, #page, #content{
  position: relative;
  z-index: 1;
}

/* ここが重要：前面の背景がベタ塗りなら透過させないと見えません */
.site, #page, .l-main, #content{
  background: transparent !important;
}

/* ヒーロー内の基準位置を作る */
#header_slider .item.image_item{
  position: relative;
}

/* タイプライター要素（ヒーロー内固定） */
#header_slider .caption{
  position: relative;
}

#header_slider .caption .ai-hero-type{
  position: absolute;
  top: -70px;               /* 「ファーストビューの画面少し上」ならマイナス */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

/* PC */
#header_slider .caption .ai-hero-type .ai-fixed,
#header_slider .caption .ai-hero-type .ai-dyn{
  font-weight: 800;
  font-size: 58px;
  letter-spacing: 0.04em;
  color: #222;
}

/* スマホ */
@media (max-width: 768px){
  #header_slider .caption .ai-hero-type{
    top: -52px;
  }
  #header_slider .caption .ai-hero-type .ai-fixed,
  #header_slider .caption .ai-hero-type .ai-dyn{
    font-size: 32px;
  }
}

/* カーソル */
#header_slider .caption .ai-hero-type .ai-dyn::after{
  content: "";
  display: inline-block;
  width: 0.08em;
  height: 0.9em;
  margin-left: 0.12em;
  background: rgba(80,80,80,0.7);
  transform: translateY(0.1em);
  animation: aiCaretBlink 1s steps(1,end) infinite;
}

@keyframes aiCaretBlink{
  0%,49%{ opacity: 1; }
  50%,100%{ opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #header_slider .caption .ai-hero-type .ai-dyn::after{
    animation: none;
    opacity: 1;
  }
}

/* 2カラムの外枠 */
.ab-feature-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}

.ab-feature-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 56px;
  align-items: start;
}

/* 左カラム */
.ab-feature-left .ab-badge{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 999px;
  background: #2f66ff;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

.ab-feature-left h2{
  font-size: 56px;
  line-height: 1.05;
  margin: 0 0 18px;
  color: #111;
}

.ab-feature-left p{
  font-size: 18px;
  line-height: 1.9;
  margin: 0;
  color: #444;
}

/* 右カラムの項目（アイコン＋文） */
.ab-feature-list{
  display: grid;
  gap: 26px;
}

.ab-feature-item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  align-items: start;
}

.ab-feature-item h3{
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.35;
  color: #111;
}

.ab-feature-item p{
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

/* スマホは縦並び */
@media (max-width: 768px){
  .ab-feature-section{ padding: 10px 18px; }
  .ab-feature-grid{ grid-template-columns: 1fr; gap: 28px; }
  .ab-feature-left h2{ font-size: 34px; }
}

/* 左メイン文章の「1文字アニメ」 */
.ab-reveal-text{
  --ab-gray: #b8b8b8;
  --ab-black: #111;
}

.ab-reveal-text .ab-ch{
  color: var(--ab-gray);
  transition: color 180ms linear;
  will-change: color;
}

.ab-reveal-text .ab-ch.is-on{
  color: var(--ab-black);
}

@media (prefers-reduced-motion: reduce){
  .ab-reveal-text .ab-ch{
    transition: none;
  }
}

/* スペーサー */
.pc-only-spacer{
  display: none;
  height: 80px;
}

@media (min-width: 769px){
  .pc-only-spacer{
    display: block;
  }
}

.ab-ai-icons{
  position: relative;
  padding: 0px 16px;
  overflow: hidden;
}

.ab-ai-icons-inner{
  max-width: 1200px;
  margin: 0 auto;
}

.ab-ai-icons-row{
  position: relative;
  height: 120px;
}

.ab-ai-icon{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 76px;
  height: 76px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  will-change: transform;
}

/* 画面幅で自動調整 */
@media (max-width: 768px){
  .ab-ai-icons{ padding: 64px 12px; }
  .ab-ai-icons-row{ height: 96px; }
  .ab-ai-icon{
    width: 54px;
    height: 54px;
    border-radius: 14px;
  }
}
.ab-ai-icons-row{ position: relative; }
.ab-ai-icon{ position: absolute; top: 50%; left: 50%; }

.ab-proof{
  position: relative;
  padding: 32px 18px;
}

.ab-proof-head{
  text-align: center;
  margin-bottom: 28px;
}

.ab-proof-date{
  margin: 0;
  font-size: 14px;
  color: #666;
  letter-spacing: 0.02em;
}

.ab-proof-grid{
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.ab-proof-card{
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
  padding: 28px 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.ab-proof-icon{
  width: 92px;
  height: 92px;
  margin: 0 auto 14px;
  border-radius: 22px;
  background: rgba(47,102,255,0.10);
  display: grid;
  place-items: center;
}

.ab-proof-img{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.ab-proof-stars{
  font-size: 22px;
  line-height: 1;
  margin: 0 0 14px;
  color: #f5b400;
  letter-spacing: 0.08em;
}

.ab-proof-text p{
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: #111;
  font-weight: 800;
}

@media (max-width: 900px){
  .ab-proof-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .ab-proof-card{
    padding: 26px 16px;
  }
  .ab-proof-text p{
    font-size: 17px;
  }
}

.ab-features{
  background: #fff;
}

.ab-features-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 84px 18px;
}

.ab-features-head{
  text-align: center;
  margin-bottom: 48px;
}

.ab-features-title{
  margin: 0 0 16px;
  font-size: 52px;
  line-height: 1.1;
  color: #111;
  letter-spacing: 0.01em;
}

.ab-features-lead{
  margin: 0 auto!important;
  max-width: 860px;
  font-size: 18px;
  line-height: 1.9;
  color: #666;
}

.ab-features-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 38px 46px;
}

.ab-feature-card{
  text-align: center;
}

/* 初期状態（小さく透明） */
#ab-features .ab-feature-card .ab-feature-icon{
  transform: scale(0);
  opacity: 0;
  transform-origin: center;
  will-change: transform, opacity;
  transition:
    transform 600ms cubic-bezier(.2,.8,.2,1),
    opacity 400ms ease;

  width: 86px;
  height: 86px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: #2f66ff;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 16px 38px rgba(47,102,255,0.25);
}

/* 表示状態（通常サイズ） */
#ab-features .ab-feature-card .ab-feature-icon.ab-in{
  transform: scale(1);
  opacity: 1;
}

.ab-feature-icon{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #2f66ff;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  user-select: none;
}

.ab-feature-title{
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.35;
  color: #111;
  font-weight: 800;
}

.ab-feature-text{
  margin: 0 auto;
  max-width: 340px;
  font-size: 16px;
  line-height: 1.9;
  color: #666;
}

@media (max-width: 980px){
  .ab-features-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ab-features-title{
    font-size: 36px;
  }
  .ab-features-lead{
    font-size: 16px;
  }
  .ab-feature-text{
    max-width: 520px;
  }
}

/* === カード全体セクション === */
/* ==============================
   セクション全体
============================== */
#ab-cards3{
  background: #ffffff;
  width: 100%;
  display: block;
}

#ab-cards3 .ab-cards3-inner{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 84px 18px;
  box-sizing: border-box;
}

/* ==============================
   見出し
============================== */
#ab-cards3 .ab-cards3-head{
  text-align: center;
  margin-bottom: 44px;
}

#ab-cards3 .ab-cards3-title{
  margin: 0 0 14px;
  font-size: 52px;
  line-height: 1.1;
  color: #111111;
}

#ab-cards3 .ab-cards3-lead{
  margin: 0 auto;
  max-width: 820px;
  font-size: 18px;
  line-height: 1.9;
  color: #666666;
}

/* ==============================
   ★ 段組み・テーマ干渉を完全無効化
============================== */
#ab-cards3 .ab-cards3-grid{
  column-count: initial !important;
  column-gap: initial !important;
  columns: initial !important;
  float: none !important;
}

/* ==============================
   ★ PC横3枚レイアウト（最重要）
============================== */
#ab-cards3 .ab-cards3-grid{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==============================
   カード本体
============================== */
#ab-cards3 .ab-cards3-card{
  flex: 0 0 calc((100% - 52px) / 3) !important;
  width: calc((100% - 52px) / 3) !important;
  max-width: calc((100% - 52px) / 3) !important;
  min-width: 0 !important;

  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  padding: 20px 15px;

  box-sizing: border-box !important;
  margin: 0 !important;
  float: none !important;
}

/* ==============================
   上部（アイコン＋テキスト）
============================== */
#ab-cards3 .ab-cards3-top{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 18px;
  align-items: flex-start;
}

/* アイコン */
#ab-cards3 .ab-cards3-icon{
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: rgba(47,102,255,0.1);
  color: #2f66ff;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(47,102,255,0.12);
}

/* タイトル */
#ab-cards3 .ab-cards3-card-title{
  margin: 2px 0 10px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  color: #111111;
}

/* 説明文 */
#ab-cards3 .ab-cards3-card-text{
  margin: 0;
  font-size: 15.5px;
  line-height: 1.9;
  color: #666666;
  word-break: keep-all;
  line-break: strict;
}

/* ==============================
   ボタン
============================== */
#ab-cards3 .ab-cards3-actions{
  margin-top: 18px;
  display: flex;
  justify-content: flex-start;
}

#ab-cards3 .ab-cards3-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: #2f66ff;
  color: #ffffff;
  text-decoration: none;
  font-weight: 800;
  font-size: 14px;
  width: 100%;
  box-shadow: 0 16px 34px rgba(47,102,255,0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#ab-cards3 .ab-cards3-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(47,102,255,0.32);
}

/* ==============================
   スマホ：縦並び
============================== */
@media (max-width: 980px){

  #ab-cards3 .ab-cards3-title{
    font-size: 36px;
  }

  #ab-cards3 .ab-cards3-lead{
    font-size: 16px;
  }

  #ab-cards3 .ab-cards3-grid{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
  }

  #ab-cards3 .ab-cards3-card{
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #ab-cards3 .ab-cards3-top{
    grid-template-columns: 78px 1fr;
  }

  #ab-cards3 .ab-cards3-icon{
    width: 78px;
    height: 78px;
    border-radius: 16px;
  }
}

/* ==============================
   文字はみ出し対策（カード内タイポグラフィ調整）
   そのまま追記でOK
============================== */

/* gridの列幅計算を安定させる */
#ab-cards3 .ab-cards3-top{
  grid-template-columns: 72px minmax(0, 1fr) !important;
}

/* テキストが横に広がってはみ出すのを防ぐ */
#ab-cards3 .ab-cards3-copy{
  min-width: 0 !important;
}

/* 見出し：長い場合は折り返し、1語が長くても崩れない */
#ab-cards3 .ab-cards3-card-title{
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

/* 説明文：折り返し優先 + はみ出し防止 */
#ab-cards3 .ab-cards3-card-text{
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
  line-height: 1.85 !important;
}

/* 全角の読みやすさを崩さず、禁則を保ちつつ折り返す */
#ab-cards3 .ab-cards3-card-text,
#ab-cards3 .ab-cards3-card-title{
  line-break: strict;
}

/* ボタンが文字量で伸びても崩れない */
#ab-cards3 .ab-cards3-actions{
  flex-wrap: wrap;
}

/* もしpやh3にテーマ側の固定幅やdisplayが当たっている場合の保険 */
#ab-cards3 .ab-cards3-copy h3,
#ab-cards3 .ab-cards3-copy p{
  max-width: 100% !important;
}

@media (min-width: 981px){
  #ab-cards3 .ab-cards3-card-text{
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* 浮遊ロゴを最前面に固定 */
#ab-floating-logos{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  pointer-events: none !important;
  z-index: -1 !important;
  overflow: visible !important;
  background: transparent !important;
}

#ab-floating-logos .ab-float-logo{
  position: absolute !important;
  width: 56px !important;
  height: 56px !important;
  opacity: 0.28 !important; /* まず見える強さにして確認。後で下げてOK */
  border-radius: 14px !important;
  object-fit: contain !important;
  display: block !important;
  will-change: transform !important;
}

@media (max-width: 768px){
  #ab-floating-logos .ab-float-logo{
    width: 40px !important;
    height: 40px !important;
    opacity: 0.22 !important;
    border-radius: 12px !important;
  }
}

/* Hybrid CTA */
.ab-hybrid-cta{
  width: 100%;
  display: block;
  border-radius: 26px;
  background: linear-gradient(135deg, rgba(47,102,255,0.10), rgba(17,17,17,0.02));
}

.ab-hybrid-cta-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 40px;
  box-sizing: border-box;
  border-radius: 26px;
  background: #000000;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
  backdrop-filter: blur(6px);
}

/* 既存の .ab-hybrid-cta-inner を上書きしない追加CSS */
.ab-hybrid-cta > .ab-hybrid-cta-inner{
  position: relative;
  overflow: hidden;
}

.ab-hybrid-cta > .ab-hybrid-cta-inner::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;

  width: 280px;
  height: 280px;

  background-image: url("https://ai-bloga.com/wp-content/uploads/2026/01/hybrid_sign.webp");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: contain;

  opacity: 0.9;
  pointer-events: none;
}

@media (max-width: 980px){
  .ab-hybrid-cta > .ab-hybrid-cta-inner::after{
    width: 200px;
    height: 200px;
    opacity: 0.85;
  }
}

@media (max-width: 600px){
  .ab-hybrid-cta > .ab-hybrid-cta-inner::after{
    width: 140px;
    height: 140px;
    opacity: 0.75;
  }
}

.ab-hybrid-cta-badge{
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(
    135deg,
    #ff8a3d 0%,
    #ff5fa2 45%,
    #8b5cf6 100%
  );
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.06em;
}

.ab-hybrid-cta-title{
  margin: 0 0 14px;
  font-size: 44px;
  line-height: 1.12;
  color: #fff;
  font-weight: 900;
}

.ab-hybrid-cta-lead{
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.85;
  color: #fff;
}

.ab-hybrid-cta-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ab-hybrid-cta-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  font-size: 14px;
  box-sizing: border-box;
  user-select: none;
  white-space: nowrap;
}

.ab-hybrid-cta-btn-primary{
  background: linear-gradient(
    135deg,
    #ff8a3d 0%,
    #ff5fa2 45%,
    #8b5cf6 100%
  );
  color: #fff!important;
  box-shadow: 0 5px 10px rgb(255 255 255 / 26%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.ab-hybrid-cta-btn-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(47,102,255,0.34);
}

.ab-hybrid-cta-btn-ghost{
  background: transparent;
  color: #fff!important;
  border: 2px solid #fff;
  transition: transform 160ms ease, border-color 160ms ease;
}

.ab-hybrid-cta-btn-ghost:hover{
  transform: translateY(-2px);
  border-color: rgba(47,102,255,0.55);
}

.ab-hybrid-cta-points{
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.ab-hybrid-cta-points li{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.7;
  color: #fff;
}

.ab-hybrid-cta-points li::before{
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: #2f66ff;
  font-weight: 900;
  flex: 0 0 22px;
  margin-top: 1px;
}

/* スクロール出現アニメ（初期状態） */
.js-ab-hybrid-cta{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 650ms ease, transform 650ms ease;
  will-change: opacity, transform;
}

/* 表示状態 */
.js-ab-hybrid-cta.is-on{
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 980px){
  .ab-hybrid-cta-inner{ padding: 46px 16px; border-radius: 22px; }
  .ab-hybrid-cta-title{ font-size: 30px; }
  .ab-hybrid-cta-lead{ font-size: 15.5px; }
  .ab-hybrid-cta-btn{ width: 100%; }
}

@media (prefers-reduced-motion: reduce){
  .js-ab-hybrid-cta{
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ab-hybrid-cta-btn-primary,
  .ab-hybrid-cta-btn-ghost{
    transition: none;
  }
}

.ab-hybrid-cta-points{
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
  position: relative;
}

@media (max-width: 980px){
  .ab-hybrid-cta-points{
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

@media (min-width: 981px){
  .ab-hybrid-cta-points.is-staging li{
    position: absolute;
    left: var(--ab-start-x, 50%);
    top: var(--ab-start-y, 85%);
    transform: translate(-50%, -50%) translateX(-18px) translateY(18px);
    opacity: 0;
    width: var(--ab-item-w, 0px);
    transition:
      transform 720ms cubic-bezier(.2,.8,.2,1),
      opacity 520ms ease,
      left 720ms cubic-bezier(.2,.8,.2,1),
      top 720ms cubic-bezier(.2,.8,.2,1);
    will-change: transform, opacity, left, top;
  }

  .ab-hybrid-cta-points.is-on li{
    left: var(--ab-target-x, 0px);
    top: var(--ab-target-y, 0px);
    transform: translateX(0) translateY(0);
    opacity: 1;
  }

  .ab-hybrid-cta-points.is-settled li{
    position: static;
    width: auto;
    transform: none;
    opacity: 1;
    transition: none;
  }
}