/*
Theme Name: Cocoon Child
Template: cocoon-master
Version: 1.1.3
*/

/************************************
** サイト共通スタイル（モバイル優先ベース）
************************************/

/* 1. デザイン変数の定義 */
:root {
  --gap: 16px; /* 共通の余白 */
  --color-primary: #0073aa; /* メインカラー */
  --color-primary-dark: #005a8c;
  --color-accent: #cce7ff;
  --text: #333; /* 標準テキスト色 */
  --muted: #666; /* 控えめなテキスト色 */
  --radius: 8px; /* 角丸のサイズ */
  --tap-min: 44px; /* タップ領域の最小サイズ (アクセシビリティ) */
}

/* 2. 基本的なリセット（HTML構造改善用） */
.top-page .spotlight-cards,
.profile-link-list {
  list-style: none; /* リストの点（・）を削除 */
  margin: 0;
  padding: 0;
}

/* 3. 基本的なリンクの色 */
a {
  color: var(--color-primary);
  transition: color 0.2s ease;
}
a:hover {
  color: var(--color-primary-dark);
}

/* 4. トップページカスタムセクションのCSS */
/* === .top-page スコープ（トップ専用） === */

/* 4-1. 注目のツール・ガイド（Spotlight Section） */
.top-page .spotlight-section {
  padding: var(--gap) 12px;
  max-width: 1100px;
  margin: 0 auto var(--gap);
}
.top-page .spotlight-cards {
  display: flex;
  gap: var(--gap);
  flex-wrap: wrap;
  align-items: stretch;
}
.top-page .spot-card {
  flex: 1 1 300px;
  background: var(--card-bg, #ffffff);
  border-radius: var(--radius);
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.top-page .spot-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}
.top-page .spot-cta {
  background: var(--color-primary, #0073aa);
  color: #fff;
  padding: 12px 12px;
  border-radius: 6px;
  font-weight: 700;
  margin-top: 10px;
  min-height: var(--tap-min);
}


/* 4-2. カテゴリ誘導セクション */
.category-section {
  padding: 2em 1em;
  text-align: center;
}
.category-button-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 16px);
  justify-content: center;
  margin: 1.5em auto;
  max-width: 800px;
}
.dp-category-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min, 44px);
  padding: .8em 1.5em;
  border-radius: var(--radius, 8px);
  text-decoration: none;
  font-weight: 700;
  background: var(--color-accent, #f0f8ff);
  color: var(--color-primary-dark, #005a8c);
  transition: background-color .2s;
}
.dp-category-btn:hover {
  background-color: var(--color-accent, #cce7ff);
}


/* 4-3. プロフィールセクション */
.profile-section {
  padding: 2em 1em;
  text-align: center;
}
.profile-table {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 1.5em auto;
  max-width: 600px;
}
.profile-table img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
}
.profile-link-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}
.profile-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min, 44px);
  padding: .6em 1em;
  border-radius: 4px;
  text-decoration: none;
  background-color: var(--color-primary, #0073aa);
  color: #fff;
  font-weight: 600;
  transition: opacity .2s;
}
.profile-btn:hover {
  opacity: 0.9;
}


/* 4-4. 新着＆人気記事セクションのスタイル */
.article-section {
  padding: 2em 1em;
  margin-bottom: var(--gap);
}
.article-section .section-title {
  font-size: 1.5rem;
  padding-bottom: 0.5em;
  border-bottom: 2px solid var(--color-primary, #0073aa);
  margin-bottom: 1em;
}

/* --- レガシーな2カラムCSSをタブのクラス名で代用する --- */

/* モバイルのデフォルト（1カラム）設定 */
.mobile-only-tab {
  display: block; /* 縦積み */
}
.mobile-only-tab .tab-content {
  display: block; /* 常に表示 */
  margin-bottom: var(--gap); /* リスト間に余白 */
}


/* 5. メディアクエリ（レスポンシブ調整） */

/* モバイルでの調整 (768px以下) */
@media (max-width: 768px) {
  
  /* Spotlight Cards, Category Buttons, Profile Section のモバイル調整はそのまま維持 */
  .top-page .spotlight-cards { flex-direction: column; }
  .top-page .spot-card, .top-page .spot-cta { width: 100%; display: block; text-align: center; }
  .category-button-list { flex-direction: column; align-items: stretch; }
  .dp-category-btn { width: 100%; padding: 1em; }
  .profile-table { flex-direction: column; gap: 10px; }
  .profile-link-list { flex-direction: column; align-items: center; }
  .profile-link-list li { width: 80%; }
  .profile-btn { width: 100%; }

  /* 新着記事セクションを確実に1カラムに（デフォルトは1カラムだが念のため） */
  .article-section .mobile-only-tab {
    display: block; /* 縦積み */
  }
  .article-section .mobile-only-tab .tab-content {
    display: block; /* 記事リストは表示 */
    flex: none;
    width: 100%;
    margin-bottom: var(--gap);
  }
}

/* --------------------------------- */
/* デスクトップ調整 (769px以上)       */
/* --------------------------------- */
@media screen and (min-width: 769px) {
  .home .entry-content h2 {
    font-size: 1.8rem;
  }
  
  /* ***** 【PC 2カラム設定】 ***** */
  /* 新着・人気記事リストの親要素をFlexboxにする */
  .article-section .tab-content-wrap {
    display: flex; /* Flexboxを有効にする */
    gap: var(--gap, 16px); /* 左右のリスト間に余白を作る */
    max-width: 1200px; 
    margin: 0 auto;
  }
  
  /* 左右のリスト（tab-content）を均等幅にする */
  .article-section .tab-content {
    flex: 1 1 50%; /* 均等な幅を確保 */