/* ========== BASE RESET ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #eadcd2;  /* 背景色 */
  color: #4b403b;             /* 文字色 */
  font-family: 'Noto Sans JP', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;  /* フォント */
  line-height: 1.75;          /* 行間 */
  font-size: 16px;            /* フォントサイズ */
  padding: 0 16px;            /* ページの左右余白 */
}

/* ========== HEADER ========== */
.site-header {
  background-color: #f8f6f4;  /* ヘッダーの背景色 */
  padding: 16px 32px;          /* ヘッダーの上下左右の余白 */
  border-bottom: 1px solid #e0d5ce;  /* ヘッダーの下部に線 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);  /* ヘッダーの影 */
  position: sticky;            /* ヘッダーをスクロールに追従 */
  top: 0;
  z-index: 1000;               /* ヘッダーが他のコンテンツの上に来るように */
}

.header-container {
  display: flex;
  justify-content: space-between;  /* 左右の要素を両端に配置 */
  align-items: center;             /* 垂直方向に中央揃え */
  max-width: 1200px;               /* 最大幅 */
  margin: 0 auto;                  /* 中央寄せ */
}

.site-title a {
  font-size: 1.8rem;              /* サイトタイトルのフォントサイズ */
  font-weight: 700;                /* 太字 */
  color: #4b3f38;                  /* タイトルの色 */
  text-decoration: none;           /* 下線なし */
  font-family: 'Noto Sans JP', sans-serif;  /* フォント */
}

.site-navigation {
  display: flex;
  align-items: center;             /* ナビゲーション内アイテムを垂直中央に */
  gap: 20px;                       /* アイテム間の間隔 */
  flex-wrap: wrap;                 /* 画面幅に応じて折り返し */
}

.site-navigation a {
  font-size: 1rem;                 /* ナビゲーションリンクのフォントサイズ */
  font-weight: 500;                /* 標準の太さ */
  text-decoration: none;           /* 下線なし */
  color: #5e4a45;                  /* リンクの色 */
  transition: color 0.2s ease;     /* 色変更のアニメーション */
}

.site-navigation a:hover {
  color: #9d6c67;                  /* ホバー時のリンク色 */
}

/* SNS アイコンのスタイル */
.sns-icon img {
  width: 24px;        /* アイコンのサイズ */
  height: 24px;
  object-fit: cover;  /* 画像の切り抜き */
  margin: 0 6px;      /* アイコン間の間隔 */
  vertical-align: middle; /* アイコンを中央に揃える */
  transition: opacity 0.3s ease; /* ホバー時の透明度変化 */
}

.sns-icon img:hover {
  opacity: 0.7;  /* ホバー時に少し透明に */
}

/* ========== FOOTER ========== */
.site-footer {
  background: #eadcd2;         /* フッターの背景色 */
  padding: 20px 0;              /* フッターの上下の余白 */
  text-align: center;           /* テキスト中央寄せ */
  color: #7d514d;               /* フッターの文字色 */
  font-size: 0.95rem;           /* フッターのフォントサイズ */
  border-top: 1px solid #d4c2bb; /* フッター上部の線 */
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.04); /* フッターの影 */
}

.site-footer p {
  margin: 0;
  letter-spacing: 0.5px;  /* 文字間隔 */
}

/* ========== ヒーローセクション ========== */
.hero-section {
  text-align: center;              /* セクション内のテキスト中央寄せ */
  padding: 60px 20px 40px;         /* セクションの上下左右余白 */
}

.hero-section h1 {
  font-size: 2rem;                 /* 見出し1のフォントサイズ */
  margin-bottom: 20px;             /* 見出し下の余白 */
  font-weight: 600;                /* 太字 */
  color: #5a3e36;                  /* 見出しの色 */
}

.hero-section img {
  width: 100%;                     /* 画像の幅を100% */
  max-width: 800px;                /* 最大幅 */
  height: auto;                    /* 高さは自動調整 */
  border-radius: 20px;             /* 角を丸める */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 画像の影 */
}

/* ========== 通常のカードセクション ========== */
.card-section {
  display: flex;
  justify-content: center;        /* カードを中央に配置 */
  gap: 30px;                      /* カード間の間隔 */
  padding: 40px 20px;             /* セクションの余白 */
  background-color: #f3e8e2;      /* セクション背景色 */
  flex-wrap: wrap;                /* 画面幅に応じてカードが折り返し */
}

.card {
  display: block;
  text-decoration: none;           /* テキストリンクに下線なし */
  background: #fdf9f7;             /* カードの背景色 */
  border: 1px solid #e2d4cc;      /* カードの境界線 */
  padding: 20px;                   /* カードの内側余白 */
  width: 260px;                    /* カードの幅 */
  border-radius: 20px;             /* 角を丸める */
  text-align: center;              /* テキストを中央揃え */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05); /* カードの影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション */
  color: inherit;
}

.card:hover {
  transform: translateY(-5px);   /* ホバー時にカードを浮き上がらせる */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);  /* 影を強調 */
  background-color: #f7efeb;      /* 背景色の変更 */
}

.card img {
  width: 80px;                    /* 画像の幅 */
  height: 80px;                   /* 画像の高さ */
  margin-bottom: 15px;             /* 画像とテキストの間の余白 */
}

.card h3 {
  font-size: 1.2rem;               /* 見出しのフォントサイズ */
  margin: 10px 0;                  /* 見出しの上下余白 */
  color: #a0726a;                  /* 見出しの色 */
}

.card p {
  font-size: 0.95rem;              /* 説明文のフォントサイズ */
  color: #5e5048;                  /* 説明文の色 */
}