/* 始め方・準備 — 記事詳細ページ */

const ARTICLE_META = {
  "tanigen-mimankabu": {
    title: "100円から始める単元未満株完全ガイド | 主要6社徹底比較【2026年6月】 | 株次郎",
    description: "100円から始められる単元未満株。SBI証券・楽天証券・SMBC日興証券など主要6社のサービスを徹底比較。メリット・デメリット、株主優待の扱い、選び方まで初心者にもわかりやすく解説します。",
  },
};

const SITE_DEFAULT_TITLE = "株次郎 — 投資学習プラットフォーム";

/* ── 会話バブル ─────────────────────────── */
function KabuBubble({ text }) {
  return (
    <div style={{ display:"flex", alignItems:"flex-start", gap:10, margin:"14px 0" }}>
      <div style={{
        width:44, height:44, borderRadius:"50%", flexShrink:0, marginTop:2,
        backgroundImage:'url("assets/kabujiro_mainicon.jpg")',
        backgroundSize:"cover", backgroundPosition:"center",
        border:"2px solid var(--gold-400)",
        backgroundColor:"var(--navy-100)",
      }} />
      <div style={{
        background:"var(--navy-50)", border:"1.5px solid var(--navy-100)",
        borderRadius:"4px 14px 14px 14px", padding:"10px 14px",
        fontSize:14, lineHeight:1.7, color:"var(--ink-900)", flex:1,
        minWidth:0, wordBreak:"break-word", overflowWrap:"break-word",
      }}>
        <span style={{ fontWeight:700, color:"var(--navy-800)", fontSize:12 }}>株次郎</span>
        <br />{text}
      </div>
    </div>
  );
}

function StudentBubble({ text }) {
  return (
    <div style={{ display:"flex", alignItems:"flex-start", flexDirection:"row-reverse", gap:10, margin:"14px 0" }}>
      <div style={{
        width:44, height:44, borderRadius:"50%", flexShrink:0, marginTop:2,
        backgroundImage:'url("assets/student_aicon.jpg")',
        backgroundSize:"cover", backgroundPosition:"center",
        border:"2px solid var(--green-400)",
        backgroundColor:"var(--green-100)",
      }} />
      <div style={{
        background:"var(--gold-100)", border:"1.5px solid var(--gold-400)",
        borderRadius:"14px 4px 14px 14px", padding:"10px 14px",
        fontSize:14, lineHeight:1.7, color:"var(--ink-900)", flex:1,
        minWidth:0, wordBreak:"break-word", overflowWrap:"break-word",
      }}>
        <span style={{ fontWeight:700, color:"var(--gold-600)", fontSize:12 }}>生徒</span>
        <br />{text}
      </div>
    </div>
  );
}

/* ── セクション見出し ────────────────────── */
function SectionTitle({ num, children }) {
  return (
    <h2 style={{
      fontSize:18, fontWeight:900, color:"var(--navy-900)",
      borderLeft:"4px solid var(--navy-800)", paddingLeft:12,
      margin:"40px 0 16px",
    }}>
      <span style={{ fontSize:12, color:"var(--navy-600)", display:"block", marginBottom:2 }}>Section {num}</span>
      {children}
    </h2>
  );
}

/* ── ポイントボックス ─────────────────────── */
function InfoBox({ color, children }) {
  const colors = {
    blue:   { bg:"var(--navy-50)",   border:"var(--navy-100)", title:"var(--navy-800)" },
    gold:   { bg:"var(--gold-100)",  border:"var(--gold-400)", title:"var(--gold-600)" },
    green:  { bg:"var(--green-100)", border:"#6EE7B7",         title:"var(--green-600)" },
    red:    { bg:"#FEF2F2",          border:"#FECACA",         title:"#DC2626" },
  };
  const c = colors[color] || colors.blue;
  return (
    <div style={{
      background:c.bg, border:`1.5px solid ${c.border}`,
      borderRadius:var_radius_md, padding:"16px 18px", margin:"12px 0",
      fontSize:14, lineHeight:1.75, color:"var(--ink-900)",
    }}>
      {children}
    </div>
  );
}
const var_radius_md = "14px";

/* ── 比較表 ──────────────────────────────── */
function CompTable() {
  const rows = [
    { company:"SBI証券",               service:"S株",       fee:"売買無料",              realtime:"不可（1日3回）",  brands:"約4,000銘柄以上" },
    { company:"楽天証券",              service:"かぶミニ®", fee:"売却0.22%スプレッド",   realtime:"可",             brands:"主要銘柄" },
    { company:"マネックス証券",         service:"ワン株",    fee:"買付無料/売却0.55%",    realtime:"不可（寄付のみ）", brands:"約3,500銘柄" },
    { company:"三菱UFJ eスマート証券", service:"プチ株®",   fee:"売買無料",              realtime:"不可",           brands:"主要銘柄" },
    { company:"SMBC日興証券",          service:"キンカブ",  fee:"買付無料/売却0.5%",     realtime:"不可",           brands:"1,000銘柄以上" },
    { company:"松井証券",              service:"単元未満株", fee:"取引手数料あり",         realtime:"不可（寄付のみ）", brands:"主要銘柄" },
  ];
  return (
    <div style={{ overflowX:"auto", margin:"16px 0" }}>
      <table style={{
        width:"100%", minWidth:560, borderCollapse:"collapse",
        fontSize:13, background:"var(--white)",
        borderRadius:var_radius_md, overflow:"hidden",
        boxShadow:"var(--shadow-sm)",
      }}>
        <thead>
          <tr style={{ background:"var(--navy-800)", color:"#fff" }}>
            {["証券会社","サービス名","手数料","リアルタイム","取扱銘柄"].map(h => (
              <th key={h} style={{ padding:"10px 12px", textAlign:"left", fontWeight:700, fontSize:12, whiteSpace:"nowrap" }}>{h}</th>
            ))}
          </tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={r.company} style={{ background: i % 2 === 0 ? "var(--white)" : "var(--ink-50)" }}>
              <td style={{ padding:"10px 12px", fontWeight:700, color:"var(--navy-900)", whiteSpace:"nowrap" }}>{r.company}</td>
              <td style={{ padding:"10px 12px", color:"var(--navy-700)", fontWeight:600 }}>{r.service}</td>
              <td style={{ padding:"10px 12px", color:"var(--ink-700)" }}>{r.fee}</td>
              <td style={{ padding:"10px 12px", color: r.realtime === "可" ? "var(--green-600)" : "var(--ink-500)", fontWeight: r.realtime === "可" ? 700 : 400 }}>{r.realtime}</td>
              <td style={{ padding:"10px 12px", color:"var(--ink-700)" }}>{r.brands}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <p style={{ fontSize:11, color:"var(--ink-300)", margin:"6px 0 0", textAlign:"right" }}>※ 2026年6月時点の情報。最新情報は各社公式サイトでご確認ください。</p>
    </div>
  );
}

/* ── 証券会社カード ───────────────────────── */
function BrokerCard({ name, service, merits, demerits, comment }) {
  return (
    <div style={{
      background:"var(--white)", border:"1.5px solid var(--ink-200)",
      borderRadius:var_radius_md, padding:"20px", margin:"16px 0",
      boxShadow:"var(--shadow-sm)",
    }}>
      <div style={{ marginBottom:12 }}>
        <span style={{ fontWeight:900, fontSize:15, color:"var(--navy-900)" }}>{name}</span>
        <span style={{
          marginLeft:8, background:"var(--navy-100)", color:"var(--navy-800)",
          fontSize:11, fontWeight:700, padding:"2px 10px", borderRadius:99,
        }}>{service}</span>
      </div>
      <div style={{ marginBottom:10 }}>
        <div style={{ fontSize:12, fontWeight:700, color:"var(--green-600)", marginBottom:4 }}>✅ メリット</div>
        <ul style={{ margin:0, paddingLeft:18, fontSize:13, color:"var(--ink-700)", lineHeight:1.8 }}>
          {merits.map((m, i) => <li key={i}>{m}</li>)}
        </ul>
      </div>
      <div style={{ marginBottom:12 }}>
        <div style={{ fontSize:12, fontWeight:700, color:"#DC2626", marginBottom:4 }}>❌ デメリット</div>
        <ul style={{ margin:0, paddingLeft:18, fontSize:13, color:"var(--ink-700)", lineHeight:1.8 }}>
          {demerits.map((d, i) => <li key={i}>{d}</li>)}
        </ul>
      </div>
      <KabuBubble text={comment} />
    </div>
  );
}

/* ── ステップカード ───────────────────────── */
function StepCard({ num, title, children }) {
  return (
    <div style={{
      display:"flex", gap:14, margin:"14px 0",
      background:"var(--white)", borderRadius:var_radius_md,
      border:"1.5px solid var(--ink-200)", padding:"16px",
      boxShadow:"var(--shadow-sm)",
    }}>
      <div style={{
        width:36, height:36, borderRadius:"50%", background:"var(--navy-800)",
        color:"#fff", fontWeight:900, fontSize:15, display:"flex",
        alignItems:"center", justifyContent:"center", flexShrink:0,
      }}>{num}</div>
      <div style={{ flex:1 }}>
        <div style={{ fontWeight:700, fontSize:15, color:"var(--navy-900)", marginBottom:6 }}>{title}</div>
        <div style={{ fontSize:13, color:"var(--ink-700)", lineHeight:1.75 }}>{children}</div>
      </div>
    </div>
  );
}

/* ── メイン記事コンポーネント ──────────────── */
function GuideArticle({ nav, articleId }) {
  React.useEffect(() => {
    const meta = ARTICLE_META[articleId];
    if (!meta) return;
    document.title = meta.title;
    let descEl = document.querySelector('meta[name="description"]');
    if (!descEl) {
      descEl = document.createElement("meta");
      descEl.setAttribute("name", "description");
      document.head.appendChild(descEl);
    }
    descEl.setAttribute("content", meta.description);
    return () => {
      document.title = SITE_DEFAULT_TITLE;
      if (descEl) descEl.setAttribute("content", "");
    };
  }, [articleId]);

  return (
    <>
      <style>{`
        .ga-wrap {
          padding: 0 0 80px;
          max-width: 800px;
          width: 100%;
          box-sizing: border-box;
          overflow-x: hidden;
        }
        .ga-hero {
          background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
          padding: 32px 28px 28px;
          color: #fff;
        }
        .ga-hero-cat {
          display: inline-block;
          background: rgba(255,255,255,0.18);
          color: #fff;
          font-size: 11px;
          font-weight: 700;
          padding: 3px 12px;
          border-radius: 99px;
          margin-bottom: 12px;
        }
        .ga-hero h1 {
          font-size: 22px;
          font-weight: 900;
          margin: 0 0 8px;
          line-height: 1.4;
        }
        .ga-hero-sub {
          font-size: 13px;
          color: rgba(255,255,255,0.7);
          margin: 0 0 16px;
        }
        .ga-hero-meta {
          display: flex;
          gap: 16px;
          font-size: 12px;
          color: rgba(255,255,255,0.6);
        }
        .ga-back-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255,255,255,0.15);
          color: #fff;
          border: 1.5px solid rgba(255,255,255,0.3);
          border-radius: 99px;
          padding: 6px 16px;
          font-size: 13px;
          font-weight: 600;
          cursor: pointer;
          margin-bottom: 20px;
          transition: background 0.15s;
        }
        .ga-back-btn:hover { background: rgba(255,255,255,0.25); }
        .ga-body {
          padding: 8px 28px 0;
        }
        .ga-notice {
          background: var(--orange-100);
          border: 1.5px solid #FED7AA;
          border-radius: var(--radius-sm);
          padding: 12px 16px;
          font-size: 12px;
          color: #92400E;
          line-height: 1.6;
          margin: 20px 0 0;
          word-break: break-word;
          overflow-wrap: break-word;
        }
        .ga-merit-item {
          background: var(--green-100);
          border: 1.5px solid #6EE7B7;
          border-radius: var(--radius-sm);
          padding: 14px 16px;
          margin: 10px 0;
          font-size: 13px;
          line-height: 1.7;
          word-break: break-word;
          overflow-wrap: break-word;
        }
        .ga-demerit-item {
          background: #FEF2F2;
          border: 1.5px solid #FECACA;
          border-radius: var(--radius-sm);
          padding: 14px 16px;
          margin: 10px 0;
          font-size: 13px;
          line-height: 1.7;
          word-break: break-word;
          overflow-wrap: break-word;
        }
        /* 2列→1列レスポンシブグリッド */
        .ga-compare-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 12px;
          margin: 16px 0;
        }
        .ga-merit-label {
          font-weight: 700;
          color: var(--green-600);
          font-size: 13px;
          margin-bottom: 4px;
        }
        .ga-demerit-label {
          font-weight: 700;
          color: #DC2626;
          font-size: 13px;
          margin-bottom: 4px;
        }
        .ga-step-up {
          display: flex;
          flex-direction: column;
          gap: 12px;
          margin: 16px 0;
        }
        .ga-step-up-card {
          display: flex;
          align-items: flex-start;
          gap: 14px;
          background: var(--white);
          border: 1.5px solid var(--ink-200);
          border-radius: var(--radius-md);
          padding: 16px;
        }
        .ga-step-icon {
          font-size: 28px;
          flex-shrink: 0;
        }
        .ga-cta {
          background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%);
          border-radius: var(--radius-md);
          padding: 24px;
          margin: 40px 0 0;
          text-align: center;
          color: #fff;
        }
        .ga-cta h3 { margin: 0 0 8px; font-size: 17px; }
        .ga-cta p  { margin: 0 0 16px; font-size: 13px; color: rgba(255,255,255,0.8); }
        .ga-cta-btn {
          display: inline-block;
          background: var(--gold-400);
          color: var(--navy-900);
          font-weight: 900;
          font-size: 14px;
          padding: 12px 28px;
          border-radius: 99px;
          border: none;
          cursor: pointer;
          transition: background 0.15s;
        }
        .ga-cta-btn:hover { background: var(--gold-500); }
        .ga-divider {
          border: none;
          border-top: 1.5px solid var(--ink-100);
          margin: 32px 0 0;
        }
        .ga-youji {
          background: var(--ink-50);
          border-radius: var(--radius-sm);
          padding: 14px 16px;
          font-size: 13px;
          color: var(--ink-500);
          margin: 20px 0;
          line-height: 1.6;
          word-break: break-word;
          overflow-wrap: break-word;
        }
        @media (max-width: 600px) {
          .ga-hero    { padding: 24px 16px 20px; }
          .ga-hero h1 { font-size: 18px; word-break: break-word; }
          .ga-body    { padding: 8px 16px 0; }
          /* 2列→1列に切り替え（比較カード） */
          .ga-compare-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <main className="main ga-wrap">

        {/* ─── ヒーロー ─── */}
        <div className="ga-hero">
          <button className="ga-back-btn" onClick={() => nav.goBack()}>← 一覧に戻る</button>
          <span className="ga-hero-cat">始め方・証券口座</span>
          <h1>少額から始める投資<br />〜単元未満株完全ガイド〜</h1>
          <p className="ga-hero-sub">100円から始められる単元未満株。主要6社を徹底比較</p>
          <div className="ga-hero-meta">
            <span>📅 2026年6月</span>
            <span>📖 約10分で読める</span>
          </div>
        </div>

        <div className="ga-body">

          {/* 注意書き */}
          <div className="ga-notice">
            ⚠️ 本記事の情報は2026年6月時点のものです。手数料・サービス内容は変更になる場合があります。最新情報は各証券会社の公式サイトでご確認ください。
          </div>

          {/* ─── セクション1: 導入 ─── */}
          <SectionTitle num={1}>少額から投資を始めたい人へ</SectionTitle>

          <KabuBubble text="『投資を始めたい！でも数十万円もない…』そう思って諦めていませんか？実は今、100円から株式投資が始められる時代なんだよ。" />
          <StudentBubble text="100円から！？それなら今すぐ始められそう！" />
          <KabuBubble text="その秘密が『単元未満株』というサービスだよ。今日はこの単元未満株について、メリット・デメリット・主要6社の比較まで、徹底解説していくね。" />

          {/* ─── セクション2: 単元未満株とは ─── */}
          <SectionTitle num={2}>単元未満株とは何か？</SectionTitle>

          <p style={{ fontSize:14, lineHeight:1.8, color:"var(--ink-700)", margin:"0 0 16px" }}>
            日本株は通常「100株単位（＝1単元）」で取引するルールになっています。単元未満株とは、この1単元に満たない株数（1株以上100株未満）で取引できるサービスです。
          </p>

          <div className="ga-compare-grid">
            <div style={{ background:"#FEF2F2", border:"1.5px solid #FECACA", borderRadius:var_radius_md, padding:"14px 16px" }}>
              <div style={{ fontWeight:700, fontSize:12, color:"#DC2626", marginBottom:8 }}>通常の株式取引</div>
              <div style={{ fontSize:13, lineHeight:1.8, color:"var(--ink-700)" }}>
                最低購入単位：<strong>100株</strong><br />
                株価1,000円 →<br />
                　<strong>100株 × 1,000円 = 10万円</strong><br />
                株価5万円（値がさ株）→<br />
                　<strong>100株 × 5万円 = 500万円！</strong>
              </div>
            </div>
            <div style={{ background:"var(--green-100)", border:"1.5px solid #6EE7B7", borderRadius:var_radius_md, padding:"14px 16px" }}>
              <div style={{ fontWeight:700, fontSize:12, color:"var(--green-600)", marginBottom:8 }}>単元未満株なら</div>
              <div style={{ fontSize:13, lineHeight:1.8, color:"var(--ink-700)" }}>
                最低購入単位：<strong>1株〜</strong><br />
                株価1,000円 →<br />
                　<strong>1株 × 1,000円 = 1,000円</strong><br />
                株価5万円（値がさ株）→<br />
                　<strong>1株 × 5万円 = 5万円</strong>
              </div>
            </div>
          </div>

          <p style={{ fontSize:13, color:"var(--ink-500)", lineHeight:1.7, margin:"12px 0 0" }}>
            主なサービス：SBI証券「S株」/ 楽天証券「かぶミニ®」/ マネックス証券「ワン株」/ 三菱UFJ eスマート証券「プチ株®」/ SMBC日興証券「キンカブ」/ 松井証券「単元未満株取引」
          </p>

          {/* ─── セクション3: メリット ─── */}
          <SectionTitle num={3}>単元未満株のメリット4つ</SectionTitle>

          <div className="ga-merit-item">
            <div className="ga-merit-label">【メリット①】少額から投資できる</div>
            数百円〜数千円で有名企業の株主になれます。まとまった資金がなくてもお小遣いの範囲で投資体験を積むことができます。
          </div>

          <div className="ga-merit-item">
            <div className="ga-merit-label">【メリット②】分散投資がしやすい</div>
            同じ予算で複数の銘柄に少額ずつ分散できます。「10万円あれば10社に1万円ずつ」など、リスク分散の基本が実践できます。
          </div>

          <div className="ga-merit-item">
            <div className="ga-merit-label">【メリット③】高額な株（値がさ株）にも投資可能</div>
            ファーストリテイリング（ユニクロ）・任天堂・ソニー・キーエンスなど、通常は数十万円かかる銘柄も1株単位で購入できます。
          </div>

          <div className="ga-merit-item">
            <div className="ga-merit-label">【メリット④】配当金は1株でも受け取れる</div>
            株主として登録されるので、保有株数に応じた配当金を受け取れます。少額でも「実際にお金が振り込まれる」体験ができます。
          </div>

          {/* ─── セクション4: デメリット ─── */}
          <SectionTitle num={4}>単元未満株のデメリット4つ</SectionTitle>

          <div className="ga-demerit-item">
            <div className="ga-demerit-label">【デメリット①】株主優待を受けられない（原則）</div>
            株主優待の多くは「100株以上保有」が条件です。単元未満株（1株〜99株）では優待を受け取れないケースがほとんどです。<br />
            <span style={{ fontSize:12, color:"var(--ink-500)" }}>※ 一部例外企業あり（セクション5で解説）</span>
          </div>

          <div className="ga-demerit-item">
            <div className="ga-demerit-label">【デメリット②】リアルタイム取引できない場合が多い</div>
            多くの証券会社は1日1〜3回の約定タイミングのみ。急騰・急落時にすぐ売買できません。<br />
            <span style={{ fontSize:12, color:"var(--green-600)" }}>例外：楽天証券の「かぶミニ®」はリアルタイム取引可</span>
          </div>

          <div className="ga-demerit-item">
            <div className="ga-demerit-label">【デメリット③】手数料が割高になる場合がある</div>
            証券会社・サービスによって手数料体系が異なります。少額取引だと手数料負けする可能性もあるため、手数料無料の証券会社を選ぶことが重要です。
          </div>

          <div className="ga-demerit-item">
            <div className="ga-demerit-label">【デメリット④】取扱銘柄が限定される</div>
            全銘柄が対象とは限りません。投資したい銘柄が対象外の可能性もあります。事前に各社の取扱銘柄を確認しましょう。
          </div>

          <KabuBubble text="特に株主優待目的で買うなら、100株保有が原則だよ。単元未満株はあくまで「投資体験」と「小額分散」が主な目的だね。" />

          {/* ─── セクション5: 優待の例外 ─── */}
          <SectionTitle num={5}>例外！1株以上でも優待がもらえる企業</SectionTitle>

          <StudentBubble text="優待がないのは残念ですね…" />
          <KabuBubble text="実は、最近は単元未満株でも優待をくれる企業が増えてきているんだ。「1株優待」と呼ばれているよ。" />

          <div style={{ background:"var(--navy-50)", border:"1.5px solid var(--navy-100)", borderRadius:var_radius_md, padding:"16px 18px", margin:"12px 0" }}>
            <div style={{ fontWeight:700, fontSize:13, color:"var(--navy-800)", marginBottom:10 }}>📋 1株から優待がもらえる企業の例</div>
            <ul style={{ margin:0, paddingLeft:18, fontSize:13, lineHeight:1.9, color:"var(--ink-700)" }}>
              <li>日本管財 — 1株以上でカタログギフト</li>
              <li>ビジョナリーホールディングス — 1株以上でメガネ割引券</li>
              <li>オリックス — 株主カード（保有株数に応じたサービス）</li>
              <li>その他、SBIグループ企業など</li>
            </ul>
            <p style={{ fontSize:12, color:"var(--ink-300)", margin:"10px 0 0" }}>※ 優待内容・条件は変更になる場合があります。最新情報は各社IRページでご確認ください。</p>
          </div>

          <KabuBubble text="ただしこれらは少数派。優待目的で投資するなら、最終的に100株を目指すのが基本だよ。単元未満株はその「通過点」として活用しよう。" />

          {/* ─── セクション6: 6社比較表 ─── */}
          <SectionTitle num={6}>主要6社徹底比較</SectionTitle>

          <StudentBubble text="いろんな証券会社があるんですね。どう選べばいいんですか？" />
          <KabuBubble text="まずは全体を比較して全体像を掴もう。各社の特徴をまとめたよ。" />

          <CompTable />

          {/* ─── セクション7: 各社詳細 ─── */}
          <SectionTitle num={7}>各証券会社の詳細解説</SectionTitle>

          <BrokerCard
            name="SBI証券"
            service="S株"
            merits={[
              "売買手数料が完全無料",
              "取扱銘柄数が業界最多レベル（約4,000銘柄以上）",
              "NISA口座でも利用可能",
              "配当金・株主優待も自分名義で受け取れる",
            ]}
            demerits={[
              "リアルタイム取引不可（1日3回：前場始値・後場始値・後場終値）",
              "米国株の単元未満株は別サービス（SBI証券の「米株スポット」）",
            ]}
            comment="迷ったらSBI証券。手数料無料・銘柄数最多で初心者の王道だよ。"
          />

          <BrokerCard
            name="楽天証券"
            service="かぶミニ®"
            merits={[
              "業界唯一のリアルタイム取引が可能（チャートを見ながら売買できる）",
              "売却時のスプレッド0.22%は主要各社の中でも低水準",
              "楽天ポイントでの投資も可能",
              "NISA口座対応",
            ]}
            demerits={[
              "リアルタイム取引は売却時に0.22%のスプレッドがかかる",
              "取扱銘柄は主要銘柄のみ（他社より少なめ）",
            ]}
            comment="チャートを見ながら売買タイミングを自分で決めたい人にはかぶミニ®。リアルタイム取引は楽天証券だけの強みだよ。"
          />

          <BrokerCard
            name="マネックス証券"
            service="ワン株"
            merits={[
              "買付手数料が無料",
              "取扱銘柄数が約3,500銘柄と豊富",
              "NISA口座対応",
              "マネックスポイントが貯まる",
            ]}
            demerits={[
              "売却時に手数料がかかる（約0.55%、最低52円）",
              "リアルタイム取引不可（寄付のみ）",
            ]}
            comment="買うだけならコスト無料。売るときだけ手数料がかかる仕組みだよ。長期保有向きだね。"
          />

          <BrokerCard
            name="三菱UFJ eスマート証券"
            service="プチ株®"
            merits={[
              "売買手数料が無料",
              "三菱UFJグループの安心感・ブランド力",
              "NISA口座対応",
              "シンプルで使いやすいアプリ",
            ]}
            demerits={[
              "リアルタイム取引不可",
              "取扱銘柄は主要銘柄のみ",
            ]}
            comment="手数料無料かつ三菱UFJグループで安心感を求める人向けだよ。"
          />

          <BrokerCard
            name="SMBC日興証券"
            service="キンカブ"
            merits={[
              "100円から投資可能（業界最小単位）",
              "株数指定だけでなく金額指定もできる",
              "「トヨタ株を毎月100円積立」のような使い方が可能",
              "買付時の手数料は無料",
            ]}
            demerits={[
              "売却時に0.5%のスプレッドがかかる",
              "リアルタイム取引不可",
              "取扱銘柄は1,000銘柄以上だが他社より少なめ",
            ]}
            comment="とにかく少額から始めたい人にはキンカブ。100円から株が買えるのは魅力だよ。積立感覚で使えるね。"
          />

          <BrokerCard
            name="松井証券"
            service="単元未満株取引"
            merits={[
              "創業100年超の老舗ネット証券で安心感がある",
              "電話サポートが充実（初心者も安心）",
              "松井証券ポイントが貯まる",
            ]}
            demerits={[
              "単元未満株の取引手数料はやや高め",
              "リアルタイム取引不可（寄付のみ）",
            ]}
            comment="操作に不安があって、電話で人に聞きながら進めたい初心者には松井証券もアリだよ。"
          />

          {/* ─── セクション8: 選び方 ─── */}
          <SectionTitle num={8}>自分に合った証券会社の選び方</SectionTitle>

          <KabuBubble text="どこを選べばいいか迷ったら、この4パターンで考えてみてね。" />

          <div style={{ display:"flex", flexDirection:"column", gap:10, margin:"12px 0" }}>
            {[
              { label:"🏆 迷ったらこれ！",             tag:"初心者全般",       text:"SBI証券（S株）— 手数料無料・銘柄最多・実績No.1" },
              { label:"📈 チャートで売買したい",          tag:"積極的に売買したい", text:"楽天証券（かぶミニ®）— リアルタイム取引可" },
              { label:"💰 100円から積立てたい",          tag:"超少額スタート",     text:"SMBC日興証券（キンカブ）— 100円から金額指定OK" },
              { label:"📞 不安だから電話で相談したい",   tag:"手厚いサポート重視",  text:"松井証券 — サポートセンターあり" },
            ].map((item, i) => (
              <div key={i} style={{
                background:"var(--white)", border:"1.5px solid var(--ink-200)",
                borderRadius:var_radius_md, padding:"14px 16px",
                display:"flex", alignItems:"flex-start", gap:12,
              }}>
                <div style={{ flexShrink:0 }}>
                  <div style={{ fontWeight:700, fontSize:13, color:"var(--navy-900)" }}>{item.label}</div>
                  <div style={{
                    display:"inline-block", background:"var(--navy-100)", color:"var(--navy-700)",
                    fontSize:10, fontWeight:700, padding:"2px 8px", borderRadius:99, marginTop:2,
                  }}>{item.tag}</div>
                </div>
                <div style={{ fontSize:13, color:"var(--ink-700)", lineHeight:1.6, paddingTop:2 }}>{item.text}</div>
              </div>
            ))}
          </div>

          {/* ─── セクション9: 5ステップ ─── */}
          <SectionTitle num={9}>単元未満株の始め方 5ステップ</SectionTitle>

          <KabuBubble text="具体的な始め方は5ステップだよ。" />

          <StepCard num={1} title="証券会社を選ぶ">
            セクション8の「選び方の指針」を参考に自分に合った証券会社を決めよう。迷ったらSBI証券が安心。複数口座を開設して使い分けるのもアリだよ。
          </StepCard>

          <StepCard num={2} title="証券口座を開設する">
            ネット申し込みなら最短即日〜数日で開設できます。<strong>マイナンバーカード</strong>と本人確認書類を用意しておこう。NISA口座も同時に申し込むのがおすすめ。
          </StepCard>

          <StepCard num={3} title="口座に入金する">
            銀行振込・即時入金（ネットバンク）などの方法があります。最初は少額（1万円〜）でOK。入金後は翌営業日から取引可能なことが多いよ。
          </StepCard>

          <StepCard num={4} title="銘柄を選んで注文する">
            株数または金額を指定して注文します。<strong>注文タイミングに注意</strong>（多くの証券会社はリアルタイム不可・1日1〜3回の約定）。好きな会社・使っているサービスの株から始めるのがおすすめ。
          </StepCard>

          <StepCard num={5} title="保有中の管理">
            配当金の受け取り（年1〜2回）、必要に応じた買い増しや売却を行います。焦らず長期目線で保有するのが基本スタイル。株価の動きに慣れることが最初の目標。
          </StepCard>

          {/* ─── セクション10: ステップアップ ─── */}
          <SectionTitle num={10}>単元未満株から本格投資へのステップアップ</SectionTitle>

          <KabuBubble text="単元未満株はあくまで『投資の入り口』。本格的に勝負していくなら、最終的には100株単位の単元株取引にステップアップしていこう。" />

          <div className="ga-step-up">
            <div className="ga-step-up-card">
              <span className="ga-step-icon">🌱</span>
              <div>
                <div style={{ fontWeight:700, fontSize:14, color:"var(--navy-900)", marginBottom:4 }}>第1段階：単元未満株（1株〜数株）</div>
                <ul style={{ margin:0, paddingLeft:18, fontSize:13, color:"var(--ink-700)", lineHeight:1.8 }}>
                  <li>少額で投資の感覚を掴む</li>
                  <li>値動きに慣れる・配当金を体験する</li>
                </ul>
              </div>
            </div>
            <div className="ga-step-up-card">
              <span className="ga-step-icon">🌿</span>
              <div>
                <div style={{ fontWeight:700, fontSize:14, color:"var(--navy-900)", marginBottom:4 }}>第2段階：単元未満株を買い増し（数十株）</div>
                <ul style={{ margin:0, paddingLeft:18, fontSize:13, color:"var(--ink-700)", lineHeight:1.8 }}>
                  <li>同じ銘柄を少しずつ買い増す</li>
                  <li>100株に向けてコツコツ積み上げる</li>
                </ul>
              </div>
            </div>
            <div className="ga-step-up-card">
              <span className="ga-step-icon">🌳</span>
              <div>
                <div style={{ fontWeight:700, fontSize:14, color:"var(--navy-900)", marginBottom:4 }}>第3段階：単元株（100株以上）</div>
                <ul style={{ margin:0, paddingLeft:18, fontSize:13, color:"var(--ink-700)", lineHeight:1.8 }}>
                  <li>株主優待も含めて本格運用</li>
                  <li>ポジションサイズ計算で資金管理を徹底</li>
                </ul>
              </div>
            </div>
          </div>

          <KabuBubble text="単元未満株でまずは『投資体験』を積んで、チャートの読み方・銘柄の選び方を学んだら、本格的な単元株取引に挑戦してみよう。そのための学習プラットフォームも用意してあるよ！" />

          <hr className="ga-divider" />

          {/* ─── CTA ─── */}
          <div className="ga-cta">
            <h3>📚 投資の知識をもっと深めよう</h3>
            <p>単元未満株で投資に慣れたら、チャート分析・銘柄選定・リスク管理など本格的なスキルを磨こう。株次郎の学習コースで学べます。</p>
            <button className="ga-cta-btn" onClick={() => { nav.goHome(); }}>
              学習プラットフォームを見る →
            </button>
          </div>

          <div className="ga-youji" style={{ marginTop:24 }}>
            本記事は投資の勧誘を目的とするものではありません。投資に関する最終判断はご自身の責任で行ってください。株式投資にはリスクが伴い、元本割れの可能性があります。
          </div>

        </div>{/* /.ga-body */}
      </main>
    </>
  );
}

window.GuideArticle = GuideArticle;