/*
 * start-guide.css
 * AI観測ラボ — AI対策スタートガイド（ロードマップ）
 * diagnosis-guide.css と同一フォント・変数体系
 */

/* ============================================================
   CSS Variables（diagnosis-guide.css と共通）
   ============================================================ */
:root {
    --obs-blue:      #6B8FBF;
    --obs-gold:      #B8954A;
    --obs-ink:       #1a1f2e;
    --obs-ink-soft:  #5a6072;
    --obs-bg:        #F4F6FB;
    --obs-bg2:       #edf0f7;
    --obs-border:    rgba(107, 143, 191, 0.18);
    --obs-border-md: rgba(107, 143, 191, 0.3);
    --font-mono:     'Courier New', 'Lucida Console', monospace;
    --font-sans:     -apple-system, 'Helvetica Neue', 'Yu Gothic', sans-serif;
}

/* ============================================================
   GeneratePress レイアウト上書き
   ============================================================ */
body.page-template-template-start-guide-php .entry-content,
body.page-template-template-start-guide-php .inside-article {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
body.page-template-template-start-guide-php #secondary,
body.page-template-template-start-guide-php .sidebar,
body.page-template-template-start-guide-php .widget-area {
    display: none !important;
}
body.page-template-template-start-guide-php {
    background: var(--obs-bg) !important;
}

/* ============================================================
   Base
   ============================================================ */
.sg-wrap {
    background: var(--obs-bg);
    color: var(--obs-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.sg-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 80px 24px;
    box-sizing: border-box;
}

.sg-section-lead {
    font-size: 1rem;
    line-height: 1.9;
    color: var(--obs-ink-soft);
    text-align: center;
    margin: 0 auto 48px;
    max-width: 640px;
}

/* ---- Section head（diagnosis-guide.css と共通） ---- */
.obs-section-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 40px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--obs-border);
}
.obs-section-en {
    font-family: var(--font-mono);
    font-size: .75rem;
    letter-spacing: .12em;
    color: var(--obs-blue);
    text-transform: uppercase;
}
.obs-section-ja {
    font-size: .95rem;
    font-weight: 600;
    color: var(--obs-ink);
}
.obs-section-log {
    font-family: var(--font-mono);
    font-size: .65rem;
    color: var(--obs-ink-soft);
    opacity: .6;
    margin-left: auto;
    letter-spacing: .08em;
}

/* ---- Shared buttons ---- */
.obs-btn-primary {
    display: inline-block;
    padding: 13px 28px;
    background: var(--obs-blue);
    color: #fff;
    font-family: var(--font-sans);
    font-size: .9rem;
    font-weight: 600;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s, transform .15s;
}
.obs-btn-primary:hover { background: #5a7dae; transform: translateY(-1px); color: #fff; }

.obs-btn-ghost {
    display: inline-block;
    padding: 13px 28px;
    border: 1.5px solid var(--obs-blue);
    color: var(--obs-blue);
    font-family: var(--font-sans);
    font-size: .9rem;
    border-radius: 6px;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.obs-btn-ghost:hover { background: var(--obs-blue); color: #fff; }

/* ============================================================
   HERO
   ============================================================ */
.sg-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--obs-bg);
    padding: 80px 24px 60px;
    box-sizing: border-box;
}

.sg-hero-starmap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.sg-hero-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.sg-hero-orb-1 {
    width: 480px; height: 480px;
    top: -140px; right: -80px;
    background: radial-gradient(circle, rgba(107,143,191,.08) 0%, transparent 70%);
}
.sg-hero-orb-2 {
    width: 300px; height: 300px;
    bottom: -80px; left: -60px;
    background: radial-gradient(circle, rgba(184,149,74,.06) 0%, transparent 70%);
}

.sg-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.sg-hero-eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    color: var(--obs-blue);
    text-transform: uppercase;
    margin-bottom: 18px;
    opacity: .8;
}

.sg-hero-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--obs-ink);
    margin: 0 0 20px;
}
.sg-hero-title em {
    font-style: normal;
    color: var(--obs-blue);
}

.sg-hero-desc {
    font-size: 1rem;
    line-height: 1.85;
    color: var(--obs-ink-soft);
    margin: 0 0 32px;
}

.sg-hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.sg-hero-scope {
    display: none;
}

/* star pulse animations */
@keyframes sgPulse {
    0%,100% { r: 4; opacity: .7; }
    50%      { r: 6; opacity: .3; }
}
@keyframes sgPulse2 {
    0%,100% { r: 3.5; opacity: .6; }
    50%      { r: 5.5; opacity: .25; }
}
.obs-star-pulse  { animation: sgPulse  3s ease-in-out infinite; }
.obs-star-pulse2 { animation: sgPulse2 4.5s ease-in-out infinite; }


/* ============================================================
   PREMISE
   ============================================================ */
.sg-premise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.sg-premise-card {
    background: #fff;
    border: 1px solid var(--obs-border);
    border-radius: 10px;
    padding: 32px 28px;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .45s ease, transform .45s ease;
}
.sg-premise-card.is-visible { opacity: 1; transform: translateY(0); }

.sg-premise-icon {
    font-size: 2rem;
    margin-bottom: 16px;
}

.sg-premise-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--obs-ink);
    margin: 0 0 12px;
}

.sg-premise-desc {
    font-size: .92rem;
    line-height: 1.85;
    color: var(--obs-ink-soft);
    margin: 0;
}
.sg-premise-desc strong { color: var(--obs-ink); }


/* ============================================================
   ROADMAP
   ============================================================ */
.sg-roadmap { background: transparent; }

.sg-roadmap-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sg-step {
    display: flex;
    gap: 0;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}
.sg-step.is-visible { opacity: 1; transform: translateY(0); }

/* 左カラム：ステップ番号＋縦ライン */
.sg-step-aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    flex-shrink: 0;
}

.sg-step-num {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--obs-blue);
    background: #fff;
    border: 1.5px solid var(--obs-border-md);
    border-radius: 6px;
    padding: 8px 10px;
    text-align: center;
    line-height: 1.4;
    white-space: nowrap;
}

.sg-step-line {
    width: 1px;
    flex: 1;
    min-height: 40px;
    background: var(--obs-border-md);
    margin-top: 8px;
    margin-bottom: 0;
}
.sg-step-line--none { background: transparent; }

/* 右カラム：本文 */
.sg-step-body {
    flex: 1;
    background: #fff;
    border: 1px solid var(--obs-border);
    border-radius: 10px;
    padding: 28px 28px 28px 28px;
    margin-left: 20px;
    margin-bottom: 24px;
}
.sg-step--last .sg-step-body { margin-bottom: 0; }

.sg-step-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.sg-step-diff {
    font-family: var(--font-mono);
    font-size: .65rem;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: .06em;
}
.sg-diff--easy { background: rgba(107,143,191,.12); color: var(--obs-blue); }
.sg-diff--mid  { background: rgba(184,149,74,.12);  color: var(--obs-gold); }
.sg-diff--hard { background: rgba(90,96,114,.1);    color: var(--obs-ink-soft); }

.sg-step-time,
.sg-step-effect {
    font-family: var(--font-mono);
    font-size: .68rem;
    color: var(--obs-ink-soft);
    letter-spacing: .04em;
}

.sg-step-title {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--obs-ink);
    margin: 0 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}
.sg-step-icon { font-size: 1.3rem; flex-shrink: 0; }

.sg-step-desc {
    font-size: .92rem;
    line-height: 1.9;
    color: var(--obs-ink-soft);
    margin: 0 0 18px;
}

.sg-step-check {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 20px;
    padding: 16px 18px;
    background: var(--obs-bg);
    border-radius: 6px;
    border-left: 3px solid var(--obs-border-md);
}
.sg-check-item {
    font-size: .85rem;
    color: var(--obs-ink-soft);
    font-family: var(--font-mono);
    letter-spacing: .02em;
}

.sg-step-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.sg-step-link {
    font-size: .875rem;
    font-weight: 600;
    color: var(--obs-blue);
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid var(--obs-border-md);
    border-radius: 5px;
    transition: background .2s, color .2s;
}
.sg-step-link:hover { background: var(--obs-blue); color: #fff; border-color: var(--obs-blue); }
.sg-step-link--sub {
    color: var(--obs-ink-soft);
    border-color: var(--obs-border);
}
.sg-step-link--sub:hover { background: var(--obs-ink-soft); color: #fff; border-color: var(--obs-ink-soft); }


/* ============================================================
   LEVEL CHECK
   ============================================================ */
.sg-levelcheck { background: var(--obs-bg); }

.sg-checklist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 760px;
    margin: 0 auto 36px;
}

.sg-check-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--obs-border);
    border-radius: 8px;
    padding: 16px 20px;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease, border-color .2s, box-shadow .2s;
}
.sg-check-row.is-visible { opacity: 1; transform: translateY(0); }
.sg-check-row:hover { border-color: var(--obs-border-md); box-shadow: 0 2px 10px rgba(107,143,191,.1); }

.sg-checkbox {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--obs-blue);
    cursor: pointer;
}

.sg-check-label {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--obs-ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sg-check-step {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--obs-blue);
}

/* チェック済みスタイル */
.sg-check-row:has(.sg-checkbox:checked) {
    background: rgba(107,143,191,.05);
    border-color: var(--obs-blue);
}
.sg-check-row:has(.sg-checkbox:checked) .sg-check-label {
    color: var(--obs-ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--obs-border-md);
}

/* 結果表示 */
.sg-check-result {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--obs-border);
    border-radius: 8px;
    padding: 24px 28px;
    text-align: center;
    transition: border-color .3s;
}
.sg-check-result[data-count="5"] { border-color: var(--obs-blue); }

.sg-check-result-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.sg-check-result-num {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--obs-blue);
    letter-spacing: .05em;
}

.sg-check-result-msg {
    font-size: .92rem;
    color: var(--obs-ink-soft);
    line-height: 1.6;
}


/* ============================================================
   ARTICLES
   ============================================================ */
.sg-articles-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sg-article-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #fff;
    border: 1px solid var(--obs-border);
    border-radius: 8px;
    padding: 18px 22px;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s, box-shadow .2s, transform .2s;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .4s ease, transform .4s ease, border-color .2s, box-shadow .2s;
}
.sg-article-card.is-visible { opacity: 1; transform: translateY(0); }
.sg-article-card:hover {
    border-color: var(--obs-blue);
    box-shadow: 0 3px 14px rgba(107,143,191,.12);
    transform: translateY(-1px);
}

.sg-article-step {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    color: var(--obs-blue);
    background: rgba(107,143,191,.1);
    border-radius: 4px;
    padding: 4px 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sg-article-body { flex: 1; }

.sg-article-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--obs-ink);
    margin-bottom: 4px;
    line-height: 1.5;
}

.sg-article-desc {
    font-size: .82rem;
    color: var(--obs-ink-soft);
}

.sg-article-arrow {
    font-family: var(--font-mono);
    font-size: 1rem;
    color: var(--obs-blue);
    opacity: .6;
    transition: opacity .2s, transform .2s;
    flex-shrink: 0;
}
.sg-article-card:hover .sg-article-arrow { opacity: 1; transform: translateX(3px); }


/* ============================================================
   CTA
   ============================================================ */
.sg-cta {
    background: var(--obs-blue);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

.obs-cta-bg-scope {
    position: absolute;
    right: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: clamp(180px, 22vw, 280px);
    opacity: .12;
    pointer-events: none;
}

.sg-cta-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.sg-cta-text { flex: 1; min-width: 280px; }

.sg-cta-eyebrow {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    color: rgba(255,255,255,.6);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sg-cta-title {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    margin: 0 0 16px;
}
.sg-cta-title em { font-style: normal; opacity: .85; }

.sg-cta-desc {
    font-size: .92rem;
    line-height: 1.85;
    color: rgba(255,255,255,.75);
    margin: 0;
}

.sg-cta-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.obs-btn-cta {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 32px;
    background: #fff;
    color: var(--obs-blue);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
}
.obs-btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.15); color: var(--obs-blue); }

.obs-btn-cta-sub {
    font-size: .72rem;
    font-family: var(--font-mono);
    opacity: .6;
    margin-top: 3px;
    letter-spacing: .06em;
}

.sg-cta-sub-link {
    font-size: .85rem;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    font-family: var(--font-mono);
    letter-spacing: .04em;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    transition: color .2s;
}
.sg-cta-sub-link:hover { color: #fff; }


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
    .sg-hero { min-height: auto; padding: 60px 20px 48px; }
    .sg-hero-scope { display: none; }
    .sg-hero-cta { flex-direction: column; }

    .sg-section { padding: 60px 20px; }

    .sg-step { flex-direction: column; gap: 12px; }
    .sg-step-aside { flex-direction: row; width: 100%; align-items: center; gap: 12px; }
    .sg-step-line { width: auto; flex: 1; height: 1px; min-height: auto; margin: 0; }
    .sg-step-body { margin-left: 0; }

    .sg-cta-inner { flex-direction: column; gap: 32px; }
    .obs-cta-bg-scope { display: none; }

    .sg-check-result-inner { flex-direction: column; gap: 10px; }
}

@media (max-width: 480px) {
    .sg-hero-title { font-size: 1.8rem; }
    .sg-step-title { font-size: .98rem; }
    .sg-step-actions { flex-direction: column; }
}