html,body{margin:0;background:#fff}

.hroF{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  display:grid;grid-template-columns:1fr 1fr;min-height:clamp(480px,58vw,640px);
}
.hroF__left{background:#fff;display:grid;align-content:center;padding:clamp(48px,6vw,88px) clamp(24px,5vw,72px)}
.hroF__right{
  background:linear-gradient(160deg,#eef0ff,#e6f4ff);display:grid;place-items:center;
  padding:clamp(40px,5vw,72px) clamp(24px,4vw,56px);
}
.hroF__eyebrow{margin:0 0 18px;font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--acc)}
.hroF__title{margin:0;font-size:clamp(28px,4.2vw,46px);line-height:1.32;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.hroF__lead{margin:22px 0 0;font-size:14.5px;line-height:2;color:var(--body);max-width:400px}
.hroF__btn{
  margin-top:32px;justify-self:start;display:inline-flex;align-items:center;height:52px;padding:0 28px;border-radius:8px;
  background:var(--acc);color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;
  box-shadow:0 4px 14px -4px rgba(99,91,255,.5);
}
.hroF__panel{
  background:#fff;border-radius:14px;padding:clamp(26px,3vw,36px);width:100%;max-width:360px;
  box-shadow:0 1px 2px rgba(10,37,64,.06),0 16px 40px -18px rgba(10,37,64,.4);
}
.hroF__panelTitle{margin:0;font-size:19px;font-weight:800;line-height:1.6;color:var(--ink)}
.hroF__checks{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.hroF__checks li{position:relative;padding-left:26px;font-size:13.5px;color:var(--body)}
.hroF__checks li::before{
  content:"";position:absolute;left:0;top:.15em;width:17px;height:17px;border-radius:50%;
  background:rgba(99,91,255,.12);
}
.hroF__checks li::after{
  content:"";position:absolute;left:5px;top:.5em;width:7px;height:4px;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg);
}
.hroF__note{margin:22px 0 0;font-size:11.5px;color:var(--sub)}
@media (max-width:800px){ .hroF{grid-template-columns:1fr} }

/* スマホで横にはみ出していた（幅100%＋内側の余白）。中の要素を枠の内側で測る（2026-10-05 パーツギャラリーに出すときに直した） */
.hroF, .hroF *, .hroF *::before, .hroF *::after{box-sizing:border-box}