/* ============================================================
   SEO最適化追加スタイル — Professionals Web
   style.css に追記するか、<link rel="stylesheet" href="style-seo.css"> で読み込んでください
   ============================================================ */

/* --- パンくずリスト（Breadcrumb） --- */
.breadcrumb-nav {
    background: #f7f5f0;
    border-bottom: 1px solid #e8e4dc;
    padding: 10px 0;
    font-size: 13px;
    color: #888;
}
.breadcrumb-nav .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}
.breadcrumb-nav a {
    color: #8b6914;
    text-decoration: none;
}
.breadcrumb-nav a:hover {
    text-decoration: underline;
}
.breadcrumb-nav span.sep {
    color: #bbb;
    margin: 0 2px;
}
.breadcrumb-nav span[aria-current="page"] {
    color: #555;
}

/* --- スキップナビゲーション（アクセシビリティ・SEO） --- */
.skip-nav {
    position: absolute;
    top: -100%;
    left: 0;
    background: #8b6914;
    color: #fff;
    padding: 8px 16px;
    z-index: 9999;
    font-size: 14px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-nav:focus {
    top: 0;
}

/* --- Core Web Vitals：CLS対策（画像サイズ予約） --- */
.img-aspect-16-9 {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
}
.img-aspect-4-3 {
    aspect-ratio: 4 / 3;
    width: 100%;
    object-fit: cover;
}
.img-aspect-1-1 {
    aspect-ratio: 1 / 1;
    width: 100%;
    object-fit: cover;
}

/* --- フォーカス可視化（アクセシビリティ・SEO） --- */
a:focus-visible,
button:focus-visible {
    outline: 3px solid #8b6914;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- 追加モバイル対応（480px以下） --- */
@media (max-width: 480px) {
    .breadcrumb-nav {
        font-size: 11px;
    }
    .breadcrumb-nav .container {
        padding: 0 12px;
    }
    .hero h1 {
        font-size: 1.4rem;
        line-height: 1.4;
    }
    .hero p {
        font-size: 13px;
    }
    .section-title {
        font-size: 1.2rem;
    }
    .container {
        padding: 0 16px;
    }
    .plan-cards {
        grid-template-columns: 1fr;
    }
    .plan-card {
        padding: 24px 16px;
    }
    .works-grid {
        grid-template-columns: 1fr;
    }
    .footer-nav {
        flex-wrap: wrap;
        gap: 8px;
        font-size: 12px;
    }
    .feature-grid {
        grid-template-columns: 1fr;
    }
}

/* --- プリント用スタイル（SEO補助） --- */
@media print {
    header,
    footer,
    .hero-buttons,
    .cta-section,
    .contact-section {
        display: none;
    }
    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }
    .breadcrumb-nav {
        display: block;
        background: none;
        border: none;
        padding: 0;
        margin-bottom: 8pt;
    }
}