@charset "utf-8";

/* お役立ちガイドページ共通スタイル（3Dセキュアガイド・フィッシング詐欺ガイド等） */
    /* ─── 目次 ─── */
    .guide-toc {
      background: #fff;
      border: 1px solid #d8eef7;
      border-radius: 10px;
      padding: 22px 26px;
      margin-bottom: 48px;
    }
    .guide-toc-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #2995c6;
      letter-spacing: .06em;
      margin-bottom: 12px;
    }
    .guide-toc ol {
      list-style: none;
      counter-reset: toc;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px 24px;
    }
    .guide-toc li {
      counter-increment: toc;
      font-size: 1.4rem;
    }
    .guide-toc li a {
      color: #333;
      display: flex;
      gap: 8px;
    }
    .guide-toc li a::before {
      content: counter(toc);
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #EAF5FA;
      color: #2995c6;
      font-weight: 700;
      font-size: 1.1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .guide-toc li a:hover { color: #2995c6; }

    /* ─── チェックリスト ─── */
    .guide-checklist {
      display: grid;
      gap: 14px;
      margin-top: 20px;
    }
    .guide-check-item {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      background: #fff;
      border-radius: 10px;
      padding: 20px 22px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .guide-check-mark {
      flex-shrink: 0;
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: #EAF5FA;
      border: 2px solid #2995c6;
      color: #2995c6;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      font-weight: 700;
    }
    .guide-check-body h3 {
      font-size: 1.65rem;
      color: #1a698d;
      margin-bottom: 6px;
    }
    .guide-check-body p {
      font-size: 1.45rem;
      line-height: 1.8;
      color: #444;
    }

    /* ─── カード会社リンク ─── */
    .guide-card-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
      margin-top: 20px;
    }
    .guide-card-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: #fff;
      border: 1px solid #d8eef7;
      border-radius: 10px;
      padding: 16px 20px;
      font-size: 1.5rem;
      font-weight: 700;
      color: #1a698d;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
      transition: box-shadow ease .2s;
    }
    .guide-card-link:hover {
      box-shadow: 0 6px 16px rgba(0,0,0,0.1);
      color: #1a698d;
    }
    .guide-card-link span.arrow {
      flex-shrink: 0;
      color: #2995c6;
      font-weight: 700;
    }
    .guide-card-note {
      margin-top: 16px;
      font-size: 1.35rem;
      color: #777;
      line-height: 1.8;
    }

    /* ─── 対処ステップ ─── */
    .guide-steps {
      display: grid;
      gap: 16px;
      margin-top: 20px;
      counter-reset: gstep;
    }
    .guide-step {
      display: flex;
      gap: 20px;
      align-items: flex-start;
      background: #fff;
      border-radius: 10px;
      padding: 22px 24px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    }
    .guide-step-num {
      counter-increment: gstep;
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, #2995c6, #1a698d);
      color: #fff;
      font-size: 1.6rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .guide-step-num::before { content: counter(gstep); }
    .guide-step-body h3 {
      font-size: 1.65rem;
      color: #1a698d;
      margin-bottom: 6px;
    }
    .guide-step-body p {
      font-size: 1.45rem;
      line-height: 1.8;
      color: #444;
    }

    /* ─── 参考リンク ─── */
    .guide-ref-list {
      list-style: none;
      display: grid;
      gap: 10px;
      margin-top: 16px;
    }
    .guide-ref-list a {
      display: block;
      background: #fff;
      border: 1px solid #d8eef7;
      border-radius: 8px;
      padding: 14px 18px;
      font-size: 1.4rem;
      color: #2995c6;
    }
    .guide-ref-list a:hover { text-decoration: underline; }
    .guide-ref-note {
      font-size: 1.25rem;
      color: #999;
      margin-top: 10px;
    }

    @media (max-width: 768px) {
      .guide-toc ol { grid-template-columns: 1fr; }
      .guide-card-grid { grid-template-columns: 1fr; }
      .guide-step { padding: 18px; gap: 14px; }
    }