/*
 * style-seo.css
 * キャリアサポート合同会社 社宅規定コンサルティングサイト
 * SEO・パフォーマンス・アクセシビリティ補完スタイルシート
 *
 * 目的:
 *   - Core Web Vitals（CLS・LCP・FID）の改善
 *   - モバイルフレンドリー強化（タップターゲット最適化）
 *   - アクセシビリティ向上（フォーカスリング・スキップナビ）
 *   - 画像のアスペクト比固定によるレイアウトシフト防止
 */

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

/* ============================================================
   2. フォーカスリング（キーボード操作・アクセシビリティ）
   ============================================================ */
:focus-visible {
  outline: 3px solid #c9a84c;
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   3. 画像のCLS（累積レイアウトシフト）対策
   ============================================================ */

/* プロフィール写真のアスペクト比固定 */
.profile-photo-wrap {
  position: relative;
  width: 280px;
  max-width: 100%;
  flex-shrink: 0;
}
.profile-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 280 / 373;
  object-fit: cover;
  border-radius: 8px;
}

/* 全img要素のデフォルトCLS対策 */
img {
  max-width: 100%;
  height: auto;
}
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* ============================================================
   4. モバイルフレンドリー強化
   ============================================================ */

/* タップターゲット最小サイズ確保（推奨: 44×44px） */
@media (max-width: 768px) {
  a,
  button,
  input[type="submit"],
  input[type="button"],
  .btn-primary,
  .btn-secondary,
  .hamburger {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ナビゲーションリンクのタップ領域拡大 */
  .site-nav a {
    padding: 12px 16px;
    display: block;
  }

  /* フォーム要素のフォントサイズ（iOS自動ズーム防止） */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select {
    font-size: 16px !important;
  }

  /* プロフィール写真のモバイル対応 */
  .profile-photo-wrap {
    width: 200px;
    margin: 0 auto;
  }

  /* テーブルのモバイル対応 */
  .profile-table {
    width: 100%;
    font-size: 0.875rem;
  }
  .profile-table th,
  .profile-table td {
    padding: 8px 10px;
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .profile-table th {
    background: #f5f5f5;
    font-weight: 700;
    border-bottom: none;
  }

  /* 料金テーブルのモバイル対応 */
  .price-table {
    font-size: 0.85rem;
  }
  .price-table th,
  .price-table td {
    padding: 8px 6px;
  }
}

/* ============================================================
   5. パフォーマンス最適化
   ============================================================ */

/* フォント読み込み中のレイアウトシフト防止 */
html {
  font-display: swap;
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   6. パンくずリスト（Breadcrumb）スタイル補完
   ============================================================ */
.breadcrumb {
  font-size: 0.8125rem;
  color: #666;
  padding: 8px 0;
  margin-bottom: 8px;
}
.breadcrumb ol,
.breadcrumb ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 4px;
}
.breadcrumb li + li::before {
  content: "›";
  color: #999;
  font-size: 0.875rem;
}
.breadcrumb a {
  color: #1a3a5c;
  text-decoration: none;
}
.breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb [aria-current="page"] {
  color: #666;
}

/* ============================================================
   7. CTAセクション強化（コンバージョン率向上）
   ============================================================ */
.cta-section .btn-primary {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-section .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.cta-section .btn-primary:active {
  transform: translateY(0);
}

/* ============================================================
   8. 印刷スタイル（SEO・アクセシビリティ）
   ============================================================ */
@media print {
  .site-header,
  .hamburger,
  .cta-section,
  .site-footer nav {
    display: none;
  }
  body {
    font-size: 12pt;
    color: #000;
  }
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
}