.yg{--ac:#00489d;--ac2:#0b6fc4;--bd:#e3ebf2;--bd2:#c9dcec;--hr:#eef3f8;--tx:#1b2733;--tx2:#4a5c6e;--tx3:#7f96ae;--bg:#f4f8fb;font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;color:var(--tx);line-height:1.6}
.yg *{box-sizing:border-box}
.yg a{color:inherit;text-decoration:none}
.yg-wrap{max-width:1120px;margin:0 auto}
.yg-sec{padding:88px 24px}
.yg-sec--bg{background:var(--bg)}
.yg-eyebrow{font-size:12px;letter-spacing:.18em;color:var(--tx3);font-weight:700;margin-bottom:10px}
.yg-h2{margin:0 0 12px;font-size:30px;font-weight:900}
.yg-sub{margin:0 0 36px;font-size:14px;line-height:1.9;color:var(--tx2)}
.yg-spark{width:14px;height:14px;flex:none}
.yg-arrow{flex:none;width:15px;height:15px;border-radius:999px;background:#f0f6fc;color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700}
.yg-center{display:flex;justify-content:center}
.yg-cta{background:var(--ac);color:#fff;font-weight:900;font-size:15px;border-radius:999px;padding:18px 40px;min-height:56px;display:inline-flex;align-items:center;gap:8px}
.yg-cta:hover{background:var(--ac2);color:#fff}
.yg-btno{background:#fff;border:1px solid var(--ac);color:var(--ac);font-weight:900;font-size:14px;border-radius:999px;padding:17px 34px;min-height:54px;display:inline-flex;align-items:center;gap:8px}
.yg-btno:hover{background:#f0f6fc}
.yg-panel{max-height:0;overflow:hidden;transition:max-height .22s ease}
.yg-rule{height:1px;background:var(--hr);margin:14px 0 12px}
@media(max-width:768px){.yg-h2{font-size:23px}.yg-sec{padding:56px 20px}}
@media(prefers-reduced-motion:reduce){.yg *{transition:none!important}}
.yg-hero{background:transparent;padding:64px 24px 56px}
.yg-h1{margin:0 0 20px;font-size:40px;line-height:1.4;font-weight:900}
.yg-lead{margin:0 auto 40px;font-size:16px;line-height:2;color:var(--tx2);max-width:820px}
.yg-lead p{margin:0 0 8px}
.yg-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.yg-card{border:1px solid var(--bd);border-radius:14px;padding:16px;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.yg-card:hover,.yg-card.is-open{border-color:var(--bd2);box-shadow:0 10px 28px rgba(27,39,51,.12)}
.yg-card:focus-visible,.yg-aicard:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.yg-card__hd{display:flex;align-items:center;gap:10px;min-height:44px}
.yg-ico{width:34px;height:34px;flex:none;object-fit:contain}
.yg-ico--none{border-radius:8px;border:1px dashed var(--bd2);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:9px;color:#93a7ba}
.yg-card__nm{font-size:13px;font-weight:700;line-height:1.4}
.yg-desc{margin:0;font-size:12px;line-height:1.85;color:var(--tx2)}
.yg-ai{margin-top:12px;background:var(--bg);border-radius:10px;padding:10px 12px}
.yg-ai__hd{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.yg-ai__lb{font-size:11px;font-weight:700;color:var(--ac)}
.yg-ai__tx{margin:0;font-size:11.5px;line-height:1.8;color:var(--tx2)}
.yg-pill{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:12px;font-weight:700;color:var(--ac);border:1px solid var(--bd2);border-radius:999px;padding:9px 14px;min-height:38px}
.yg-pill:hover{background:var(--bg)}
.yg-aibox{margin-top:32px;border:1px solid var(--bd2);border-radius:18px;background:#fbfdff;padding:26px 24px}
.yg-aibox__hd{display:flex;align-items:center;gap:8px;margin-bottom:6px;min-height:44px;flex-wrap:wrap}
.yg-aibox__lb{font-size:12px;letter-spacing:.14em;color:var(--ac);font-weight:700}
.yg-aibox__tx{font-size:12.5px;font-weight:700;color:var(--ac)}
.yg-aibox__ds{margin:0 0 20px;font-size:12.5px;line-height:1.9;color:var(--tx2)}
.yg-badge{font-size:10.5px;font-weight:700;color:var(--ac);background:#eaf2fb;border:1px solid #d7e6f4;border-radius:999px;padding:3px 9px}
.yg-aigrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.yg-aicard{border:1px solid var(--bd2);border-radius:14px;padding:18px;background:#fff;cursor:pointer;transition:box-shadow .18s}
.yg-aicard:hover{box-shadow:0 10px 28px rgba(0,72,157,.12)}
.yg-aicard__ic{width:34px;height:34px;border-radius:9px;background:#f0f6fc;flex:none;display:flex;align-items:center;justify-content:center}
.yg-aicard__ic--img{background:transparent;border-radius:0}
.yg-aicon{width:34px;height:34px;object-fit:contain;display:block}
.yg-aicard__nm{font-size:14px;font-weight:900;line-height:1.4}
@media(max-width:768px){.yg-h1{font-size:28px}.yg-hero{padding:40px 20px}.yg-pgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
.yg .yg-hero{background:none;background-color:transparent}
.yg .yg-aicard__ic,
.yg .yg-aicard__ic--img{background:none;background-color:transparent;border-radius:0}
/* モバイルレスポンシブの調整 */
@media (max-width: 768px) {
  .yg-h2 { font-size: 23px; }
  .yg-sec { padding: 56px 20px; }

  /* ヒーロー全体の左右パディングを 0 にする */
  .yg-hero {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 内側のラップ要素に余白がついている場合の解除 */
  .yg-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* AI枠内の左右パディングも詰める場合（必要に応じて） */
  .yg-aibox {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* スマホ用改行を有効化 */
  .sp-only {
    display: block;
  }
}

  /* スマホのみ改行を有効にするクラス */
  .sp-only {
    display: block;
  }
}

/* PC（769px以上）では改行タグを非表示にする */
@media (min-width: 769px) {
  .sp-only {
    display: none;
  }
}
/* ボタンを中央に配置するラッパー */
.yg-aibox__ft {
  display: flex;
  justify-content: center;
  margin-top: 32px; /* 画像の通り、カード群とボタンの間にしっかり余白を取る */
}

/* 画像イメージに合わせた丸角ボタン */
.yg-aibtn {
  position: relative; /* ★この1行を必ず追加してください */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1a73e8; /* 画像に近い鮮やかなブルー */
  color: #ffffff !important;
  font-weight: 600;
  font-size: 12px;
  padding: 14px 48px; /* 横幅を少し広めに取って目立たせる */
  border-radius: 50px; /* 完全な丸角 */
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
  box-shadow: 0 2px 6px rgba(26, 115, 232, 0.3); /* ボタンと同系色の淡い影で立体感を出す */
}

.yg-aibtn:hover {
  background-color: #1557b0;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* ★「›」を右に寄せるための新規追加クラス */
.yg-aibtn .yg-arrow {
  position: absolute;
  right: 24px; /* 右端からの距離 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; /* ★白丸の横幅（小さく調整） */
  height: 20px; /* ★白丸の高さ（幅と同じ値にして正円を保つ） */
  background-color: #ffffff; /* 白丸の背景色 */
  color: #1a73e8 !important; /* 矢印自体の色（ボタンの背景色に合わせる） */
  border-radius: 50%; /* 完全な丸にするための設定 */
  font-size: 14px; /* 矢印(›)の大きさ */
  line-height: 1;
}

/* モバイル表示での調整 */
@media (max-width: 768px) {
  .yg-aibtn {
    width: 100%; /* スマホでは押しやすいように幅100%にする */
    max-width: 320px;
    padding: 14px 24px;
    font-size: 12px;
  }
  .yg-aibtn .yg-arrow {
    display: none;
  ]
}
/* =========================================
   「関連記事を読む」ボタンの配置と、枠線食われ防止
========================================= */

/* パネル全体を縦のFlexboxにし、高さ計算の狂い（マージン相殺）を完全に防ぐ */
.yg .yg-panel {
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 8px !important; /* 下線が確実に描画されるための安全な余白 */
}

/* PC用：確実に右揃えにする */
.yg .yg-pill {
  display: inline-flex !important;
  align-self: flex-end !important; /* 親がFlexなのでこれで絶対に右へ寄ります */
  margin-top: 16px !important;
  margin-bottom: 8px !important;
}

@media (max-width: 768px) {
  .yg .yg-pill {
    /* モバイル用：確実に中央揃えにする */
    align-self: center !important;
  }
}

/* --- 上下余白・区切り線・プロダクト名の改行を調整（2026-10） --- */
.yg .yg-panel { padding-bottom: 0 !important; }
.yg .yg-panel > :last-child { margin-bottom: 2px; }
.yg-card, .yg-aicard { padding: 16px; }
.yg-card__hd { min-height: 44px; }
.yg .yg-rule { flex: none; height: 0; background: none; border-top: 1px solid var(--bd); margin: 14px 0 12px; }
.yg-card__nm, .yg-aicard__nm { word-break: keep-all; overflow-wrap: normal; line-break: strict; }