/* 登録の種別選択（/Register）。2026-08 追加。
   刷新後のトップ・各LPと同じトーン（角丸13px・薄い罫・オレンジのアクセント）に合わせる。
   site-shell.css の変数が読めない画面でも崩れないよう、色はここで既定値つきで解決する。 */

.rs-wrap {
    max-width: 880px;
    margin: 0 auto;
    padding: 48px 20px 72px;
}

.rs-head {
    margin-bottom: 28px;
}

    .rs-head h1 {
        font-size: clamp(22px, 3.2vw, 30px);
        font-weight: 800;
        color: var(--rv-ink, #1f2328);
        margin: 0 0 10px;
        line-height: 1.4;
    }

    .rs-head p {
        font-size: 14.5px;
        line-height: 1.75;
        color: var(--rv-muted, #5b636d);
        margin: 0;
    }

/* 親が Bootstrap の .container（540/720/960/1140px）なので、実際に使える幅は
   ビューポート幅ではなくコンテナ幅で決まる。固定の2カラム＋メディアクエリだと
   540px コンテナのときにカードが 230px まで潰れて文字が折り返した（検証環境で実測）。
   入る幅に応じて自動で1列／2列を切り替える。 */
.rs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
}

.rs-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px 20px;
    border: 1px solid var(--rv-line, #e6e8eb);
    border-radius: 13px;
    background: var(--rv-card, #fff);
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

    .rs-card:hover,
    .rs-card:focus-visible {
        border-color: #f16101;
        box-shadow: 0 6px 18px rgba(0,0,0,.06);
        transform: translateY(-2px);
        text-decoration: none;
        color: inherit;
    }

.rs-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(241, 97, 1, .08);
}

    .rs-ic svg {
        fill: none;
        stroke: #f16101;
        stroke-width: 1.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

.rs-body {
    flex: 1 1 auto;
    min-width: 0;
}

.rs-k {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--rv-ink, #1f2328);
    margin-bottom: 6px;
    line-height: 1.45;
}

.rs-d {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: var(--rv-muted, #5b636d);
}

.rs-arrow {
    flex: 0 0 auto;
    align-self: center;
    font-size: 17px;
    color: #f16101;
}

@media (max-width: 640px) {
    .rs-wrap {
        padding: 32px 16px 56px;
    }

    /* 狭い端末では最小幅を下げて、横スクロールを出さない */
    .rs-grid {
        grid-template-columns: 1fr;
    }
}