/*
 Theme Name:   NIGECOM Child
 Theme URI:    https://nigecom.jp
 Description:  防災メディア「ニゲコム」カスタムテーマ（Astra子テーマ）
 Author:       NIGECOM
 Template:     astra
 Version:      1.0.0
 Text Domain:  nigecom-child
*/

/* === カラー変数（Studioサイトから継承） === */
:root {
  --nigecom-yellow: #f2e02e;
  --nigecom-red: #ed1c24;
  --nigecom-blue: #0087cc;
  --nigecom-dark: #222222;
  --nigecom-white: #ffffff;
  --nigecom-gray: #f5f5f5;
}

/* === フォント設定（Studioサイト準拠） === */
body {
  font-family: 'Noto Sans JP', 'Zen Kaku Gothic New', 'Inter', sans-serif;
  color: var(--nigecom-dark);
  line-height: 1.8;
}

/* === 記事本文のスタイル（CLAUDE.mdルール準拠） === */
.entry-content p {
  font-size: 0.95rem;
  margin-bottom: 1.5em;
}

.entry-content small,
.entry-content .note {
  font-size: 0.75rem;
}

/* === アフィリエイトボタン（3色） === */
.affiliate-btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s;
}

.affiliate-btn:hover {
  opacity: 0.85;
}

.affiliate-btn--amazon {
  background-color: #f59e0b;
  color: #fff;
}

.affiliate-btn--rakuten {
  background-color: #ef4444;
  color: #fff;
}

.affiliate-btn--yahoo {
  background-color: #3b82f6;
  color: #fff;
}

/* === ヘッダー === */
.site-header {
  background-color: var(--nigecom-dark);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.site-header .site-title a {
  color: var(--nigecom-white);
  font-size: 1.4rem;
  font-weight: 700;
}

.main-navigation a {
  color: var(--nigecom-white);
  font-size: 0.9rem;
}

/* === フッター === */
.site-footer {
  background-color: var(--nigecom-dark);
  color: var(--nigecom-white);
  padding: 40px 0;
}

/* === トップページ === */
.hero {
  background: linear-gradient(135deg, var(--nigecom-dark), var(--nigecom-blue));
  color: var(--nigecom-white);
  text-align: center;
  padding: 80px 20px;
}

.hero__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.hero__subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.section__title {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin: 40px 0 24px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 0 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.card {
  background: var(--nigecom-white);
  border-radius: 12px;
  padding: 24px;
  text-decoration: none;
  color: var(--nigecom-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s;
}

.card:hover {
  transform: translateY(-2px);
}

.cta-button {
  display: inline-block;
  background: var(--nigecom-red);
  color: var(--nigecom-white);
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
}

/* === 共通コンテナ === */
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* === パンくず === */
.breadcrumb {
  font-size: 0.75rem;
  color: #888;
  margin: 16px 0;
}

.breadcrumb a {
  color: var(--nigecom-blue);
  text-decoration: none;
}

/* === 投稿メタ === */
.post-meta {
  font-size: 0.8rem;
  color: #888;
  margin-bottom: 24px;
}

/* === 更新チェック項目 === */
.update-check {
  background: var(--nigecom-gray);
  border-left: 4px solid var(--nigecom-yellow);
  padding: 16px;
  margin-top: 40px;
  font-size: 0.85rem;
}

/* === 関連記事 === */
.related-posts,
.related-shelter {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

/* === レスポンシブ === */
@media (max-width: 540px) {
  .hero__title {
    font-size: 1.5rem;
  }
  .entry-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 840px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}