/* 読み上げテスト案内ページ（スマホファースト） */
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Hiragino Sans", sans-serif;
       background: #f4f6f9; color: #223; line-height: 1.7; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }
[hidden] { display: none; }

.wrap { max-width: 640px; margin: 0 auto; padding: 16px; }

.hero { background: #223a5e; color: #fff; border-radius: 14px; padding: 22px 18px; margin-bottom: 16px; }
.hero h1 { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; }
.hero p { margin: 0; font-size: 0.95rem; }

.card { background: #fff; border-radius: 14px; padding: 18px 16px; margin-bottom: 16px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.card_title h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px;
                 border-left: 5px solid #223a5e; padding-left: 10px; }

.step { display: flex; gap: 12px; margin-bottom: 16px; }
.step_no { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
           background: #223a5e; color: #fff; font-weight: 700;
           display: flex; align-items: center; justify-content: center; }
.step_body { flex: 1 1 auto; font-size: 0.95rem; }

.note { background: #fff7e0; border-radius: 8px; padding: 8px 10px; margin-top: 8px;
        font-size: 0.88rem; }

.ans { background: #eef3fa; border-radius: 8px; padding: 10px 12px; margin-bottom: 8px;
       font-size: 0.95rem; }
.soft { color: #667; font-size: 0.88rem; margin: 8px 0 0; }

.go { text-align: center; padding: 8px 0 32px; }
.go_btn { display: inline-block; background: #c0392b; color: #fff; text-decoration: none;
          font-weight: 700; font-size: 1.1rem; padding: 16px 32px; border-radius: 999px;
          box-shadow: 0 2px 6px rgba(0,0,0,0.25); }