/* ===============================
   全体の基本設定
================================== */
body {
  background: linear-gradient(to bottom, #f9f7f6, #c49f95); /* 上から下へグラデーション背景 */
  font-family: 'Zen Kaku Gothic New', sans-serif;          /* 読みやすくて優しい印象のフォント */
  color: #333;                                              /* テキストの基本色（濃グレー） */
  margin: 0;
  padding: 0;
}

/* ===============================
   ヘッダー（ロゴ部分）
================================== */
.site-header .logo {
  max-width: 100%;         /* 親要素を超えないように最大幅を制限（responsive） */
  height: auto;            /* 縦横比は自動 */
  width: auto;             /* 固定値を外して画像本来のサイズを使えるように */
  display: block;
  margin: 0 auto;
}

.logo {
  width: 320px;               /* ロゴの最大サイズ */
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===============================
   カテゴリーボタン全体を縦並び中央揃えに
================================== */
.button-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                /* ボタン同士の間隔 */
  margin: 40px auto;
}

/* ===============================
   カテゴリーボタン（見た目＆サイズ統一バージョン）
   - 幅を90%にして、画面サイズに応じて自動調整
   - 最大幅は320pxに制限して統一感UP
   - テキストは中央寄せ、左右paddingは無しで揃える
================================== */
.category-button {
  display: block;
  width: 90%;                     /* スマホでもPCでも90%幅で可変 */
  max-width: 320px;               /* 幅が広がりすぎないように最大幅を固定 */
  background-color: #c49f95;      /* クレイピンクでn‍icoの世界観を反映 */
  color: #fff;                    /* 白文字で視認性◎ */
  font-weight: bold;              /* 読みやすく、ボタンらしく強調 */
  text-align: center;             /* テキストを中央揃え */
  text-decoration: none;          /* 下線を消す（ボタン化） */
  padding: 14px 0;                /* 上下にゆったり、左右は無し＝文字幅で揃う */
  margin: 10px auto;              /* 上下の間隔・中央配置 */
  border-radius: 12px;            /* やさしい印象の角丸 */
  transition: background-color 0.3s ease;  /* ホバー時ふんわり色変化 */
}

.category-button:hover {
  background-color: #9e8372;      /* ダスティココア：ホバー時に落ち着いた色に */
}

/* ===============================
   SNSアイコン画像のスタイル
   - 横並びで中央揃え、80pxでちょうどいい存在感に
   - ホバー時に少し拡大して目を引く
================================== */
.sns-icon {
  width: 80px;                    /* 以前の120pxより落ち着いたサイズ感に */
  height: auto;                   /* 縦横比を自動でキープ */
  transition: all 0.3s ease;      /* なめらかなアニメーション */
}

/* ホバー効果で存在感アップ（軽く拡大＋透過） */
.sns-icon:hover {
  opacity: 0.7;                   /* 透明度70%でちょっと浮かせる感じに */
  transform: scale(1.05);         /* 5%拡大 */
}
/* ===============================
   インデックスページ用SNSアイコンエリア
================================== */
.index-sns-icons {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 40px;
  margin-bottom: 30px;
}

/* すでに定義済の sns-icon クラスをそのまま使える */

/* ===============================
   ページタイトル（h1）
================================== */
.page-title {
  color: #8a6751;             /* ココアブラウン：高級感と親しみを両立 */
  text-align: center;
  font-size: 1.8rem;
  margin: 40px 0 8px;
}

/* ===============================
   案内文（h1の下に入れる説明）
================================== */
.intro-note {
  text-align: center;
  font-size: 0.95rem;
  color: #9e8372;             /* ダスティココア：優しく落ち着いた印象 */
  margin-bottom: 32px;
}

/* ===============================
   商品カードブロック（全体）
================================== */
.item-block {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05); /* ほんのり影で浮かせる */
  padding: 24px;
  margin: 32px auto;
  max-width: 520px;           /* 最大幅を固定して中央に */
}

/* ===============================
   商品タイトル（h2など）
================================== */
.item-title {
  background-color: #f0e8e4;  /* やさしいグレーベージュで背景感 */
  color: #8a6751;
  font-weight: bold;
  font-size: 1rem;
  padding: 10px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  text-align: center;
}

/* ===============================
   商品画像の見た目
================================== */
.item-image {
  width: 100%;
  max-width: 300px;
  height: auto;
  display: block;
  margin: 0 auto 16px;
  border-radius: 12px;        /* 角丸で柔らかい印象に */
}

/* ===============================
   商品レビュー風コメント
================================== */
.item-review {
  background-color: #f9f7f6;  /* スモークホワイト */
  border-left: 4px solid #c49f95; /* クレイピンクで強調 */
  padding: 16px;
  color: #555;
  font-size: 0.95rem;
  margin-bottom: 20px;
  border-radius: 8px;
  line-height: 1.6;
}

/* ===============================
   楽天などへのリンクボタン
================================== */
.item-button {
  display: block;             /* ブロック化して中央寄せできるように */
  margin: 0 auto;
  max-width: fit-content;     /* ボタンの幅は内容に合わせる */
  background-color: #d7a9a3;  /* ローズベージュ：nicoのアクセント */
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.item-button:hover {
  background-color: #9e8372;  /* ホバー時にダスティココアで変化 */
}


/* ===============================
   トップページに戻るボタン
   - お迎えグッズページなどにだけ配置して使える
================================== */
.back-to-index {
  text-align: center;
  margin-top: 40px;
}

.back-button {
  display: inline-block;
  background-color: #ebe4de;      /* ピンクベージュ系でやさしく */
  color: #333;                    /* 本文と統一された文字色 */
  font-weight: bold;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #dcd6d0;      /* ミスティグレーで少し変化 */
}
/* ===============================
   フッター
================================== */
.site-footer {
  text-align: center;
  padding: 24px 0;
  font-size: 0.85rem;
  color: #ffffff;
}

/* ===============================
   スマホ対応（480px以下の調整）
================================== */
@media (max-width: 480px) {
	
  .site-header .logo {
    max-width: 90%;
  }
	
}  .page-title {
    font-size: 1.5rem;
  }

  .item-title {
    font-size: 0.95rem;
  }

  .item-review {
    font-size: 0.9rem;
  }
}