:root {
     --accent: #005eb8;
     /* コーポレート系ブルー */
     --accent-2: #0b8bd9;
     --bg: #f7f9fc;
     --text: #1b1f23;
     --muted: #5a6268;
     --ok: #0b8b3e;
     --warn: #b85e00;
     --danger: #b8003a;
 }

 * {
     box-sizing: border-box
 }

 html,
 body {
     margin: 0;
     padding: 0;
     background: var(--bg);
     color: var(--text);
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "YuGothic", "Meiryo", sans-serif;
     line-height: 1.7
 }

 a {
     color: var(--accent)
 }

 header {
     background: linear-gradient(135deg, var(--accent), var(--accent-2));
     color: #fff;
     padding: 48px 16px;
     text-align: center
 }

 a {
     color: red;
     font-weight: bold;
 }

 header h1 {
     margin: 0;
     font-size: clamp(1.4rem, 2.5vw, 2rem)
 }

 header p {
     margin: .5rem 0 0;
     color: #e7f3ff
 }

 main {
     max-width: 980px;
     margin: 24px auto;
     padding: 0 16px
 }

 .card {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
     padding: 20px;
     margin: 16px 0;
     border: 1px solid #e7ecf3
 }

 .badge {
     display: inline-block;
     padding: .2rem .55rem;
     border-radius: 999px;
     font-size: .8rem;
     background: #eef6ff;
     color: #034a8c;
     margin-right: .4rem
 }

 h2 {
     font-size: 1.3rem;
     margin: 0 0 .25rem
 }

 h3 {
     font-size: 1.1rem;
     margin: 1rem 0 .25rem
 }

 ol,
 ul {
     padding-left: 1.1rem
 }

 .grid {
     display: grid;
     gap: 16px
 }

 @media(min-width:720px) {
     .grid.cols-2 {
         grid-template-columns: 1fr 1fr
     }
 }

 .callout {
     border-left: 6px solid var(--warn);
     background: #fff8ed;
     padding: 12px 14px;
     border-radius: 8px;
     margin: .75rem 0
 }

 .ok {
     border-left-color: var(--ok);
     background: #f1fff6
 }

 .danger {
     border-left-color: var(--danger);
     background: #fff2f7
 }

 .contact {
     display: flex;
     flex-wrap: wrap;
     gap: 12px
 }

 .contact div {
     background: #f6f9ff;
     border: 1px solid #e2ecfb;
     border-radius: 8px;
     padding: 10px 12px;
     min-width: 240px
 }

 footer {
     font-size: .85rem;
     color: var(--muted);
     text-align: center;
     padding: 24px
 }

 code.kbd {
     background: #eef1f6;
     border: 1px solid #d9dee6;
     border-bottom-width: 2px;
     border-radius: 6px;
     padding: .05rem .35rem;
     font-family: ui-monospace, Menlo, Consolas, monospace
 }