/* =========================================
   style-seo.css
   キャリアサポート合同会社 SEO追加スタイル
   - CLS（累積レイアウトシフト）対策
   - モバイルフレンドリー強化
   - アクセシビリティ改善
   - Core Web Vitals 最適化
========================================= */

/* ─────────────────────────────────────────
   1. 画像・メディアのCLS対策
   （width/height属性がない場合のフォールバック）
───────────────────────────────────────── */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* プロフィール画像の固定サイズ（CLS防止） */
.profile-section img,
img[alt*="代表"] {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
}

/* ─────────────────────────────────────────
   2. フォント読み込みによるCLS対策
   （font-display: swap は @font-face で設定が望ましいが
     Google Fonts の場合は &display=swap パラメータで対応済み）
───────────────────────────────────────── */
body {
  font-display: swap;
}

/* ─────────────────────────────────────────
   3. モバイルフレンドリー強化
───────────────────────────────────────── */

/* タップターゲットの最小サイズ確保（44px × 44px） */
a,
button,
input[type="submit"],
input[type="button"],
.btn {
  min-height: 44px;
  min-width: 44px;
}

/* ナビゲーションのモバイル対応 */
@media (max-width: 768px) {
  .site-nav {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .site-nav a {
    font-size: 0.85rem;
    padding: 0.4rem 0.6rem;
  }

  /* ヒーローセクションのフォントサイズ調整 */
  .hero h1 {
    font-size: clamp(1.4rem, 5vw, 2.5rem);
    line-height: 1.4;
  }

  /* セクションタイトルの調整 */
  .section-title {
    font-size: clamp(1.2rem, 4vw, 2rem);
  }

  /* テーブルのスクロール対応 */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 料金カードの縦積み */
  .pricing-grid,
  .service-grid,
  .features-grid {
    grid-template-columns: 1fr !important;
  }

  /* コンタクトフォームの幅調整 */
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  /* 超小型デバイス向け */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero {
    padding: 3rem 1rem;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}

/* ─────────────────────────────────────────
   4. パンくずリスト（Breadcrumb）のスタイル強化
───────────────────────────────────────── */
.breadcrumb {
  background: #f8f8f6;
  border-bottom: 1px solid #e8e8e4;
  padding: 0.6rem 0;
  font-size: 0.85rem;
}

.breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  color: #666660;
}

.breadcrumb li + li::before {
  content: "›";
  margin-right: 0.25rem;
  color: #9e9e96;
}

.breadcrumb li a {
  color: #b8952a;
  text-decoration: none;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

/* ─────────────────────────────────────────
   5. スキップナビゲーション（アクセシビリティ）
───────────────────────────────────────── */
.skip-nav {
  position: absolute;
  top: -40px;
  left: 0;
  background: #0b1f3a;
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 9999;
  text-decoration: none;
  font-size: 0.9rem;
  transition: top 0.2s;
}

.skip-nav:focus {
  top: 0;
}

/* ─────────────────────────────────────────
   6. フォーカスリング（アクセシビリティ）
───────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #b8952a;
  outline-offset: 2px;
}

/* ─────────────────────────────────────────
   7. 印刷スタイル
───────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .breadcrumb,
  .cta-section,
  .contact-section {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
  }

  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}

/* ─────────────────────────────────────────
   8. LCP（最大コンテンツ描画）改善
   ヒーロー画像・ファーストビューの優先読み込み
───────────────────────────────────────── */
.hero,
.page-header {
  contain: layout style;
}

/* ─────────────────────────────────────────
   9. INP（インタラクションへの応答）改善
───────────────────────────────────────── */
button,
.btn,
a {
  -webkit-tap-highlight-color: rgba(184, 149, 42, 0.2);
  touch-action: manipulation;
}

/* ─────────────────────────────────────────
   10. FAQ アコーディオン（SEO強化・UX改善）
───────────────────────────────────────── */
.faq-item {
  border: 1px solid #e8e8e4;
  border-radius: 8px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: box-shadow 0.2s;
}

.faq-item:hover {
  box-shadow: 0 4px 16px rgba(11, 31, 58, 0.08);
}

.faq-question {
  cursor: pointer;
  user-select: none;
}

/* ─────────────────────────────────────────
   11. 構造化データ対応（非表示コンテンツ防止）
   JSON-LDで参照するコンテンツは必ず表示状態に
───────────────────────────────────────── */
[itemscope],
[itemprop] {
  display: revert;
}