/* =========================
   Top: layout safety fixes
   - 右側の余白（横スクロール）防止
   - section 幅・余白の統一
   - “お役立ち情報” と重なる問題を根本対策
========================= */

/* はみ出し対策の基本（最小限） */
html, body {
  max-width: 100%;
  overflow-x: hidden; /* clip より互換性が高いので一旦こちらで統一 */
}

/* box-sizing を統一して padding で横幅が増える事故を防ぐ */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 追加したセクション群の “横幅ルール” を揃える（top-cta は削除済み想定） */
.top-seo-intro,
.top-problems,
.top-solutions,
.top-guides,
.top-trust {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 20px;
}

/* 見出し・本文の読みやすさ（テイスト崩さない範囲） */
.top-seo-intro h2,
.top-problems h2,
.top-solutions h2,
.top-guides h2,
.top-trust h2 {
  margin: 0 0 18px;
  line-height: 1.35;
  font-size: 2rem;
}

.top-seo-intro p,
.top-problems p,
.top-solutions p,
.top-guides p,
.top-trust p {
  margin: 0 0 14px;
  line-height: 1.9;
}

/* 画像や長い要素で横にはみ出す事故を防ぐ */
.top-seo-intro img,
.top-problems img,
.top-solutions img,
.top-guides img,
.top-trust img {
  max-width: 100%;
  height: auto;
}



/* =========================
   Top Problems：アイコン付き課題リスト
   - 実務向け・落ち着いたトーン
========================= */

.top-problems ul{
  list-style: none;          /* デフォルトの黒丸を消す */
  padding: 0;
  margin: 28px 0 24px;
}

/* 各課題アイテム */
.top-problems li{
  position: relative;
  padding: 14px 16px 14px 48px; /* 左にアイコン分の余白 */
  margin-bottom: 14px;

  background: rgba(0,0,0,.03);  
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;

  line-height: 1.7;
}

/* 左側のアイコン（CSSのみ） */
.top-problems li::before{
  content: "!";
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);

  width: 22px;
  height: 22px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 700;

  color: #fff;
  background: #d97706; /* 落ち着いた警告色（オレンジ系） */
}

/* 文章が長くても潰れない */
.top-problems li{
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* スマホ調整 */
@media (max-width: 768px){
  .top-problems li{
    padding: 12px 14px 12px 44px;
  }

  .top-problems li::before{
    left: 14px;
  }
}


/* =========================
   Top Solution：左アイキャッチ＋右テキスト
   - 実務向け・落ち着いたLPトーン
========================= */

.top-solution{
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 64px;
}

/* 左：画像 */
.top-solution__media{
  flex: 0 0 380px;           /* 画像の基準幅 */
}
.top-solutions .top-solution {
  margin-top: 18px;
  padding: 18px 18px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
}
.top-solution__media img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
}

/* 右：テキスト */
.top-solution__body{
  flex: 1;
}

/* 見出しとリードの間を少し詰める */
.top-solution h3{
  margin: 0 0 6px;
}

.top-solution__lead{
  margin: 0 0 12px;
  font-weight: 600;
}

/* =========================
   Top Solution CTA Button
   - 実務向け / 落ち着いた強調
========================= */

.top-solution__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 14px;
  padding: 10px 18px;

  font-size: 14px;
  font-weight: 600;
  text-decoration: none;

  color: #1f2937; 
  background: #fff;

  border: 1px solid rgba(0,0,0,.15);
  border-radius: 999px;

  transition: 
    background .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}

/* 右向き矢印（CSSだけ） */
.top-solution__link::after{
  content: "→";
  font-size: 13px;
  transition: transform .2s ease;
}

/* hover */
.top-solution__link:hover{
  background: rgba(0,0,0,.04);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  transform: translateY(-1px);
}

.top-solution__link:hover::after{
  transform: translateX(3px);
}

/* focus（アクセシビリティ） */
.top-solution__link:focus-visible{
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* スマホ */
@media (max-width: 768px){
  .top-solution__link{
    padding: 12px 20px;
  }
}


/* =========================
   スマホ：縦積み
========================= */
@media (max-width: 768px){
  .top-solution{
    flex-direction: column;
  }

  .top-solution__media{
    flex: none;
    width: 100%;
  }
}


/* =========================
   FIX: top-trust が “お役立ち情報” と重なる件（ここが本丸）
   - 親の高さ潰れ / float巻き込み / transform浮き を吸収
========================= */

/* セクション自身を「必ず高さを持つブロック」にする（float/absoluteの副作用を受けにくい） */
.top-trust {
  display: flow-root;   /* clearfix より綺麗に “高さ潰れ” を止める */
  clear: both;          /* float 巻き込み対策 */
  position: relative;   /* z-index を効かせる土台 */
  z-index: 0;           /* 余計な重なりを作らない */
  margin-bottom: 56px;  /* 次セクションが負のmargin等でも被りにくくする “逃げ” */
}

/* 万一、テーマ側で top-trust 内に transform/position が入っても崩れにくくする */
.top-trust * {
  max-width: 100%;
}

/* SPは余白を少し詰める（元のテイスト維持） */
@media (max-width: 768px){
  .top-seo-intro,
  .top-problems,
  .top-solutions,
  .top-guides,
  .top-trust {
    padding: 42px 16px;
  }
}

/* =========================
   Top Guides UI
   - 実務解説のカード化
   - 押しやすいリンク導線
========================= */

.top-guides{
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 56px 20px;
}

.top-guides h2{
  margin: 0 0 14px;
  line-height: 1.35;
}

.top-guides p{
  margin: 0 0 18px;
  line-height: 1.9;
  opacity: .92;
}

/* リストをカード一覧に */
.top-guides ul{
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 1件ずつカード */
.top-guides li{
  margin: 0;
}

/* リンクを“カードボタン”化 */
.top-guides li a{
  display: block;
  height: 100%;

  padding: 16px 16px 16px 16px;
  border-radius: 14px;

  text-decoration: none;
  color: inherit;

  border: 1px solid rgba(0,0,0,.10);
  background: #fff;

  transition:
    box-shadow .2s ease,
    transform .2s ease,
    border-color .2s ease;
}

/* タイトルの見た目 */
.top-guides li a{
  line-height: 1.6;
  font-weight: 600;
}

/* 右上に “→” を出して導線を明確化 */
.top-guides li a::after{
  content: "→";
  display: inline-block;
  margin-left: 8px;
  font-size: 14px;
  opacity: .7;
  transition: transform .2s ease, opacity .2s ease;
}

/* hover */
.top-guides li a:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.top-guides li a:hover::after{
  transform: translateX(4px);
  opacity: 1;
}

/* focus（キーボード操作対応） */
.top-guides li a:focus-visible{
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* SPは縦積み */
@media (max-width: 768px){
  .top-guides{
    padding: 42px 16px;
  }

  .top-guides ul{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .top-guides li a{
    padding: 16px 14px;
  }
}