/* ==================================
   フォント読み込み
================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;600&display=swap");

/* ==================================
   全体の初期スタイル
================================== */
body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* ==================================
   中央寄せ用クラス（画像・カテゴリ）
================================== */
.center-content {
  text-align: center;
}

/* ==================================
   リンクスタイル（画像リンク用）
================================== */
.image-link {
  text-decoration: none; /* 下線なし */
  color: inherit; /* 親要素の色を継承 */
}

/* ==================================
   トップページ用画像ボックス
================================== */
.image-container {
  display: inline-block;
  text-align: center;
  margin: 20px 2% 0;
  width: 45%;
  vertical-align: top;
}

/* 画像のスタイル */
.image-container img {
  width: 100%;
  border: none;
}

/* スライダー画像などの共通横幅指定用 */
.full-width {
  width: 100%;
}

/* 画像下のテキスト */
.image-container span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

/* ホバー時の文字色変更 */
.image-container:hover span {
  color: #5aabc2;
}

/* ==================================
   カテゴリ一覧のスタイル
================================== */
.category-container {
  text-align: center;
}

/* カテゴリ個別ボックス */
.category-item {
  display: inline-block;
  text-align: center;
  width: 30%;
  margin: 0 1%;
}

/* カテゴリリンク（下線なし） */
.category-item a {
  text-decoration: none;
}

/* カテゴリ画像 */
.category-item img {
  width: 100%;
  margin-top: 20px;
  border: none;
}

/* カテゴリテキスト */
.category-item span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}

/* ホバー時に文字色を変更 */
.category-item:hover span {
  color: #5aabc2;
}

/* ==================================
   固定背景セクション（ハチミツ背景）
================================== */
.fixed-bg-section {
  min-height: 50vh;
  height: 100%;
  background-image: url("https://www.kodawari-tomo.com/img/tophoneybackground.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: "Noto Serif JP", serif;
  margin-top: 20px;
}

/* iOSなどの一部ブラウザで背景固定が効かないための対処 */
@supports (-webkit-touch-callout: none) {
  .fixed-bg-section {
    background-attachment: scroll !important;
  }
}

/* フォント継承の強制 */
.fixed-bg-section * {
  font-family: inherit;
}

/* ==================================
   固定背景内のテキストボックス
================================== */
.content-box {
  padding: 20px;
}

/* キャッチコピーなどのテキストスタイル */
.content-box p {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0;
  line-height: 2;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* テキスト行間・間隔 */
.content-box p span {
  display: block;
  margin: 10px 0;
}

/* ==================================
   レスポンシブ対応
================================== */

/* 画面幅1024px以下 */
@media screen and (max-width: 1024px) {
  .fixed-bg-section {
    min-height: 60vh;
    height: auto;
  }
}

/* スマホなど768px以下 */
@media screen and (max-width: 768px) {
  .fixed-bg-section {
    min-height: 60vh;
    height: auto;
  }

  .content-box p {
    font-size: 1.2rem;
    line-height: 1.8;
  }
}

.fixed-bg-section {
  position: relative;
  z-index: 1; /* スライダーより上に表示させる */
  /* その他はそのままでOK */
}