/* Azure VM 設計の基本 - customer ready, page scoped (azvm-) */
.azvm-page {
    --azvm-blue: #2563eb;
    --azvm-blue-2: #0ea5e9;
    --azvm-blue-3: #1d4ed8;
    --azvm-navy: #1e3a8a;
    --azvm-green: #10b981;
    --azvm-amber: #f59e0b;
    --azvm-ink: #0f172a;
    --azvm-text: #334155;
    --azvm-muted: #64748b;
    --azvm-line: rgba(148, 163, 184, 0.38);
    --azvm-card: rgba(255, 255, 255, 0.97);
    --azvm-radius: 26px;
    --azvm-radius-sm: 18px;
    --azvm-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
    --azvm-shadow-soft: 0 14px 34px rgba(15, 23, 42, 0.08);
    color: var(--azvm-text);
    background:
        radial-gradient(900px 520px at 8% 2%, rgba(14, 165, 233, 0.16), transparent 70%),
        radial-gradient(740px 520px at 92% 0%, rgba(37, 99, 235, 0.13), transparent 68%),
        linear-gradient(180deg, #f8fbff 0%, #f8fafc 46%, #eef6ff 100%);
    padding-bottom: 46px;
}

.azvm-page, .azvm-page * { box-sizing: border-box; }
.azvm-page a { color: var(--azvm-blue-3); }
.azvm-page img { max-width: 100%; height: auto; display: block; }
.azvm-page figure { margin: 0; }

.azvm-shell { width: min(1160px, calc(100% - 40px)); margin: 0 auto; }

/* Breadcrumb */
.azvm-breadcrumb { width: min(1160px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 0; }
.azvm-breadcrumb ol { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; list-style: none; margin: 0; padding: 0; font-size: .85rem; color: var(--azvm-muted); }
.azvm-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
.azvm-breadcrumb li + li::before { content: "›"; color: var(--azvm-muted); }
.azvm-breadcrumb a { color: var(--azvm-blue-3); text-decoration: none; font-weight: 700; }
.azvm-breadcrumb a:hover { text-decoration: underline; }
.azvm-breadcrumb [aria-current="page"] { color: var(--azvm-ink); font-weight: 800; }

/* Shared cards */
.azvm-hero-card, .azvm-panel, .azvm-card, .azvm-toc, .azvm-final-card, .azvm-note-card, .azvm-figure-card {
    background: var(--azvm-card);
    border: 1px solid rgba(255, 255, 255, 0.86);
    box-shadow: var(--azvm-shadow);
    border-radius: var(--azvm-radius);
}

.azvm-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: var(--azvm-blue-3); font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.azvm-eyebrow::before { content: ""; width: 10px; height: 10px; border-radius: 999px; background: linear-gradient(135deg, var(--azvm-blue), var(--azvm-blue-2)); box-shadow: 0 0 0 6px rgba(37, 99, 235, .12); }

/* Hero */
.azvm-hero { position: relative; padding: 46px 0 12px; scroll-margin-top: 120px; }
.azvm-hero-card { padding: clamp(30px, 5vw, 58px); box-shadow: var(--azvm-shadow); }
.azvm-hero-title { margin: 0 0 18px; color: var(--azvm-ink); font-size: clamp(2.05rem, 4.6vw, 3.5rem); line-height: 1.14; letter-spacing: -.04em; }
.azvm-gradient-text { background: linear-gradient(135deg, var(--azvm-blue) 0%, var(--azvm-blue-3) 55%, var(--azvm-blue-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.azvm-hero-lead { margin: 0; color: var(--azvm-text); font-size: 1.06rem; line-height: 1.95; max-width: 940px; }
.azvm-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }

.azvm-btn, .azvm-btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 22px; border-radius: 999px; font-size: .96rem; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.azvm-btn { color: #fff !important; background: linear-gradient(135deg, var(--azvm-blue), var(--azvm-blue-3)); box-shadow: 0 18px 36px rgba(37, 99, 235, .26); }
.azvm-btn-secondary { color: var(--azvm-ink) !important; background: #fff; border: 1px solid var(--azvm-line); box-shadow: var(--azvm-shadow-soft); }
.azvm-btn:hover, .azvm-btn-secondary:hover { transform: translateY(-2px); }

.azvm-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 30px; }
.azvm-hero-stat { padding: 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(239, 246, 255, .95), rgba(255, 255, 255, .96)); border: 1px solid rgba(147, 197, 253, .36); }
.azvm-hero-stat strong { display: block; color: var(--azvm-ink); margin-bottom: 4px; font-weight: 900; }
.azvm-hero-stat span { display: block; color: var(--azvm-muted); font-size: .9rem; line-height: 1.65; }

/* Sections */
.azvm-section { padding: 42px 0; scroll-margin-top: 110px; }
.azvm-section-heading { max-width: 880px; margin-bottom: 26px; }
.azvm-section-heading h2 { margin: 0 0 10px; color: var(--azvm-ink); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.2; letter-spacing: -.035em; }
.azvm-section-heading p { margin: 0; color: var(--azvm-text); font-size: 1rem; line-height: 1.9; }

/* Table of contents */
.azvm-toc { padding: 30px; box-shadow: var(--azvm-shadow-soft); }
.azvm-toc h2 { margin: 0 0 6px; color: var(--azvm-ink); font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.03em; }
.azvm-toc-note { margin: 0 0 18px; color: var(--azvm-muted); font-size: .94rem; line-height: 1.7; }
.azvm-toc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.azvm-toc-list a { display: flex; gap: 12px; align-items: center; padding: 13px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(239, 246, 255, .82)); border: 1px solid rgba(147, 197, 253, .34); color: var(--azvm-ink); text-decoration: none; font-weight: 700; font-size: .93rem; line-height: 1.4; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.azvm-toc-list a:hover { transform: translateY(-2px); box-shadow: var(--azvm-shadow-soft); border-color: var(--azvm-blue-2); }
.azvm-toc-no { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--azvm-blue), var(--azvm-blue-3)); font-weight: 900; font-size: .86rem; }

/* Figure section (12 blocks, alternating)
   grid-template-areas でレイアウトを制御する。
   - PC: 画像とテキストを左右2カラム（is-flip で左右反転）
   - スマホ: head(説明) → media(画像) → extra(ポイント/注意点) の1カラム */
.azvm-figure-card { padding: clamp(20px, 3vw, 34px); box-shadow: var(--azvm-shadow-soft); margin-bottom: 26px; scroll-margin-top: 110px; }
.azvm-figure-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
        "media head"
        "media extra";
    grid-template-rows: auto 1fr;
    gap: clamp(14px, 2vw, 26px) clamp(20px, 3vw, 40px);
    align-items: start;
}
.azvm-figure-card.is-flip .azvm-figure-grid {
    grid-template-areas:
        "head  media"
        "extra media";
}

.azvm-figure-media { grid-area: media; align-self: center; margin: 0; position: relative; cursor: zoom-in; border-radius: var(--azvm-radius-sm); overflow: hidden; }
.azvm-figure-media img { width: 100%; height: auto; border-radius: var(--azvm-radius-sm); border: 1px solid var(--azvm-line); box-shadow: 0 10px 26px rgba(15, 23, 42, .12); background: #fff; transition: transform .3s ease; }
.azvm-figure-media:hover img { transform: scale(1.015); }
.azvm-figure-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; font-size: .78rem; font-weight: 800; backdrop-filter: blur(4px); }

.azvm-figure-head { grid-area: head; display: flex; flex-direction: column; gap: 14px; }
.azvm-figure-extra { grid-area: extra; display: flex; flex-direction: column; gap: 14px; }
.azvm-figure-kicker { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(37, 99, 235, .09); color: var(--azvm-blue-3); font-size: .8rem; font-weight: 900; letter-spacing: .05em; }
.azvm-figure-kicker .azvm-figure-no { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; color: #fff; background: linear-gradient(135deg, var(--azvm-blue), var(--azvm-blue-3)); font-size: .82rem; }
.azvm-figure-head h3 { margin: 0; color: var(--azvm-ink); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.35; letter-spacing: -.02em; }
.azvm-figure-desc { margin: 0; color: var(--azvm-text); line-height: 1.9; font-size: .98rem; }

.azvm-points { list-style: none; margin: 2px 0 0; padding: 16px 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(248, 250, 252, .98), rgba(239, 246, 255, .82)); border: 1px solid rgba(147, 197, 253, .34); display: grid; gap: 8px; }
.azvm-points-label { font-size: .78rem; font-weight: 900; color: var(--azvm-blue-3); letter-spacing: .04em; }
.azvm-points li { display: flex; gap: 8px; align-items: flex-start; color: var(--azvm-muted); line-height: 1.65; font-size: .93rem; }
.azvm-points li.azvm-points-label { display: block; color: var(--azvm-blue-3); }
.azvm-points li:not(.azvm-points-label)::before { content: "✓"; flex: 0 0 auto; color: var(--azvm-green); font-weight: 900; }

.azvm-caution { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(255, 251, 235, .98), rgba(254, 243, 199, .55)); border: 1px solid rgba(245, 158, 11, .38); color: #7c4a03; line-height: 1.7; font-size: .92rem; }
.azvm-caution::before { content: "⚠"; flex: 0 0 auto; color: var(--azvm-amber); font-weight: 900; font-size: 1rem; }
.azvm-caution strong { color: #7c2d12; }

/* VM series quick-reference table */
.azvm-series { padding: clamp(20px, 3vw, 32px); margin: 6px 0 26px; border-radius: var(--azvm-radius); background: var(--azvm-card); border: 1px solid rgba(255, 255, 255, 0.86); box-shadow: var(--azvm-shadow-soft); scroll-margin-top: 110px; }
.azvm-series-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.azvm-series-head h3 { margin: 0; color: var(--azvm-ink); font-size: clamp(1.25rem, 2vw, 1.55rem); line-height: 1.35; letter-spacing: -.02em; }
.azvm-series-scroll { width: 100%; overflow-x: auto; border-radius: var(--azvm-radius-sm); border: 1px solid var(--azvm-line); }
.azvm-series-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: .94rem; background: #fff; }
.azvm-series-table thead th { position: sticky; top: 0; text-align: left; padding: 13px 16px; background: linear-gradient(135deg, var(--azvm-navy), var(--azvm-blue-3)); color: #fff; font-weight: 800; font-size: .86rem; letter-spacing: .02em; white-space: nowrap; }
.azvm-series-table tbody td { padding: 14px 16px; border-top: 1px solid var(--azvm-line); color: var(--azvm-text); line-height: 1.75; vertical-align: top; }
.azvm-series-table tbody tr:nth-child(even) { background: rgba(239, 246, 255, .5); }
.azvm-series-table tbody tr:hover { background: rgba(219, 234, 254, .55); }
.azvm-series-code { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--azvm-blue), var(--azvm-blue-3)); font-weight: 900; font-size: 1.02rem; }
.azvm-series-cat { font-weight: 800; color: var(--azvm-ink); white-space: nowrap; }
.azvm-series-ratio { white-space: nowrap; color: var(--azvm-muted); font-weight: 700; }
.azvm-series-usage { min-width: 320px; }
.azvm-series-ex { white-space: nowrap; color: var(--azvm-muted); font-family: "Consolas", "SFMono-Regular", "Menlo", monospace; font-size: .88rem; }
.azvm-series code { padding: 1px 6px; border-radius: 6px; background: rgba(37, 99, 235, .1); color: var(--azvm-blue-3); font-family: "Consolas", "SFMono-Regular", "Menlo", monospace; font-size: .9em; }
.azvm-series .azvm-caution { margin-top: 16px; }

/* Final CTA */
.azvm-final-card { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 36px; background: radial-gradient(400px 230px at 18% 18%, rgba(14, 165, 233, .22), transparent 70%), linear-gradient(135deg, #0f172a, #1e3a8a 54%, #1d4ed8 100%); color: #e0f2fe; border-color: rgba(255, 255, 255, .18); }
.azvm-final-card h2 { margin: 0 0 10px; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.25; letter-spacing: -.03em; }
.azvm-final-card p { margin: 0; color: #fff; opacity: .92; line-height: 1.9; }
.azvm-final-actions { display: flex; flex-direction: column; gap: 12px; }
.azvm-final-card .azvm-btn-secondary { background: rgba(255, 255, 255, .12); color: #fff !important; border-color: rgba(255, 255, 255, .28); }
.azvm-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.azvm-tag-row span { display: inline-flex; padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .13); color: #e0f2fe; border: 1px solid rgba(255, 255, 255, .2); font-size: .82rem; font-weight: 800; }

/* Lightbox modal */
.azvm-modal { position: fixed; inset: 0; z-index: 1200; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(15, 23, 42, .82); backdrop-filter: blur(6px); }
.azvm-modal.is-open { display: flex; }
.azvm-modal-dialog { position: relative; max-width: min(1180px, 96vw); max-height: 92vh; display: flex; flex-direction: column; gap: 12px; }
.azvm-modal-img { max-width: 100%; max-height: 82vh; width: auto; height: auto; margin: 0 auto; border-radius: 16px; box-shadow: 0 30px 70px rgba(0, 0, 0, .5); background: #fff; }
.azvm-modal-caption { color: #e0f2fe; text-align: center; font-size: .96rem; font-weight: 700; line-height: 1.6; }
.azvm-modal-close { position: absolute; top: -14px; right: -14px; width: 44px; height: 44px; border-radius: 999px; border: none; background: #fff; color: var(--azvm-ink); font-size: 1.4rem; font-weight: 900; cursor: pointer; box-shadow: 0 10px 24px rgba(0, 0, 0, .35); display: inline-flex; align-items: center; justify-content: center; }
.azvm-modal-close:hover { transform: scale(1.05); }

/* Responsive */
@media (max-width: 1100px) {
    .azvm-final-card { grid-template-columns: 1fr; }
    .azvm-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .azvm-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .azvm-final-actions { flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 860px) {
    /* スマホ: 1カラム。説明(head) → 画像(media) → ポイント(extra)の順で読ませる。
       is-flip でも順序を固定する。 */
    .azvm-figure-grid,
    .azvm-figure-card.is-flip .azvm-figure-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "head"
            "media"
            "extra";
        gap: 18px;
    }
    .azvm-figure-head, .azvm-figure-extra { gap: 12px; }
}

@media (max-width: 720px) {
    .azvm-shell, .azvm-breadcrumb { width: min(94%, 1160px); }
    .azvm-hero { padding-top: 30px; }
    .azvm-hero-card, .azvm-panel, .azvm-final-card, .azvm-toc { padding: 22px; }
    .azvm-toc-list, .azvm-hero-stats { grid-template-columns: 1fr; }
    .azvm-hero-actions, .azvm-final-actions { flex-direction: column; }
    .azvm-btn, .azvm-btn-secondary { width: 100%; }
    .azvm-modal-close { top: 6px; right: 6px; }
    .azvm-series { padding: 18px; }
    .azvm-series-scroll::after { content: "← 横にスクロールできます →"; display: block; padding: 8px; text-align: center; color: var(--azvm-muted); font-size: .78rem; background: rgba(239, 246, 255, .8); }
}