/* メニューが隠れないように余白を確保 */
body {
  font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  background-color: #e0f7fa;
  margin: 0;
  padding: 50px 0 120px 0; /* 上と下に十分な余白を追加 */
  display: block; /* flex を解除してスクロール可能に */
  justify-content: unset; /* flex の影響をなくす */
  align-items: unset; /* flex の影響をなくす */
  min-height: auto; /* 画面より大きくなったらスクロールできるようにする */
  height: auto; /* height を 100vh から auto に変更し、スクロール可能にする */
  overflow-y: auto; /* 縦スクロールを許可 */
}

/* メニュー */
ul {
  width: 100%;
  max-width: 100vw; /* 横幅を画面幅内に制限 */

  text-align: center;
  color: #fff;
  box-shadow: none;
  margin: 0;
  padding: 10px 0;
  position: fixed;
  bottom: 0;
  left: 0; /* 左端にしっかり固定 */
  z-index: 1000; /* メニューが他の要素より上に表示されるように */
  display: flex;
  justify-content: center; /* 中央配置 */
}
.sticky ul{
  background-color: #16afba;
}
.category ul{
  background-color: transparent;
}


/* メニュー内の項目 */
li {
  display: inline-block;
  list-style: none;
  margin: 0 3vmin;
  font-size: 3.5vmin;
}

/* メニューのリンク */
li a {
  color: #fff;
  text-decoration: none;
}

li a:hover {
  color: #ff9100;
}

@media (min-width: 768px) {
  .sticky li{
    font-size: 15px;
  }
}








.slider {
  width: 100%;
  max-width: 400px; /* スマホ基準 */
  margin-bottom: 100px; /* メニューとの間隔を確保 */
  margin-top: 0; /* 上部の見切れ対策 */
}

.slider img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}
@media (min-width: 768px) {
  .slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* スライドを上部に配置 */
    position: relative; /* スライドインジケーターの基準を統一 */
  }
  /* スライドインジケーターの位置を固定 */
  .category .slick-dots {
    position: relative;
    bottom: 10px; /* インジケーターの位置を調整 */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }

  .container {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1000px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .category-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* 各カテゴリーの高さを揃える */
    width: 100%;
  }

  .category {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 32%; /* 3列表示の場合 */
    min-height: 600px; /* 最小の高さを統一 */
    margin-bottom: 5px;
    padding-bottom: 40px;
    background-color: white; /* もし背景色があるなら指定 */
    box-sizing: border-box;
  }
  .text-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 上寄せで揃える */
    align-items: center;
    text-align: center;
    min-height: 180px; /* 必要に応じて適宜調整 */
}

}


@media (max-width: 768px) { /* スマホ用 */
  /* 2つ目の .category のみに背景色を適用 */
  .category:nth-child(2) {
    background-color: #16afba; /* 背景色（お好みの色に変更可能） */
    padding: 20px; /* 余白を追加して見た目を整える */
    width: 100vw; /* 画面幅いっぱいに広げる */
    margin-left: -10vw; /* 左に広げる */
    margin-right: -10vw; /* 右に広げる */
    padding-left: 10vw; /* 内側に余白を確保 */
    padding-right: 10vw; /* 内側に余白を確保 */
  }
  .category {
    margin-bottom: 0; /* 各セクションの間隔を広げる */
    padding-bottom: 10px;
    position: relative; /* セパレーターの配置を正しくするため */
    padding-top: 50px; /* 上の余白を確保 */
  }
  /* セパレーターを .category の上に配置 */
  .category:nth-child(3)::after {
    content: "";
    position: absolute;
    top: -5px; /* 位置を微調整 */
    left: -15%; /* 左右にさらに広げる */
    width: 130%; /* 波線をさらに拡張 */
    height: 60px; /* 波線の高さを少し増やす */
    background: url('data:image/svg+xml;charset=UTF-8,<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%2316AFBA"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }
  /* 2つ目の .category の上に波線を逆向きで配置 */
  .category:nth-child(2)::before {
    content: "";
    position: absolute;
    top: -30px; /* 上に配置 */
    left: 0;
    width: 100%;
    height: 30px;
    transform: rotate(180deg); /* 逆さまにする */
    background: url('data:image/svg+xml;charset=UTF-8,<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none"><path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" fill="%2316AFBA"/></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
  }
  .content {
    align-items: center;
  }
}
@media (max-width: 768px) { /* スマホ用 */
  .slider {
    margin-top: 0;  /* 上の余白を増やす */
    margin-bottom: 100px; /* 下の余白を増やす */
  }
}
@media (max-width: 768px) { /* スマホ用 */
  .text-content {
    padding-bottom: 30px; /* 文章の下のスペースを確保 */
  }
}
@media (max-width: 768px) { /* スマホ用 */
  .slick-dots {
    margin-bottom: 50px; /* メニューとの間隔を確保 */
  }
}





.container {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 1000px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.content {
  display: flex;
  flex-direction: column;

  text-align: center;
}


.category {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 5px; /* もっと間隔を広く取る */
  padding-bottom: 40px;
}



.slider {
  width: 100%;
  max-width: 400px;
  margin-bottom: 20px;
}

.slider img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* スライダーのナビゲーションがメニューに重ならないようにする */
.slick-dots {
  position: relative; /* 位置を固定せず、通常のレイアウトで配置 */
  z-index: 900; /* メニューより低い値にする */
  margin-bottom: 50px; /* メニューとの距離を確保 */
}

.text-content {
  width: 100%;
  max-width: 400px;
}

.text-content h2 {
  font-size: 24px;
  color: #2e7d32;
  margin-bottom: 10px;
}



.text-content p {
  font-size: 16px;
  color: #555;
}

@media (min-width: 768px) {
  .content {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
  }
  .category {
    width: 32%;
    margin-bottom: 60px;
    padding-bottom: 20px;
}


  .slider {
      margin-bottom: 0;
  }
}

.text-content p {
  text-align: left; /* p だけ左揃えに */
}


.genie {
  max-width: 600px;
  margin: auto;
  background: white;
  padding: 20px;
  text-align: center;
  font-size: 12px; /* 基準サイズ */
  line-height: 1.5;
}

.genie h1 {
  color: #0077cc;
  font-size: 16px; /* h1は14px基準で大きめ */
}

.genie h2 {
  color: #f39c12;
  font-size: 14px; /* h2は少し大きめ */
  padding: 0;
}

.genie p {
  font-size: 14px; /* 全体の基準サイズ */
  text-align: left;
  margin-left: 10px; /* 左に少し余白を作る */
  line-height: 1.5; /* 読みやすさを向上 */
}

.genie .highlight {
  color: #e74c3c;
  font-weight: bold;
}

.genie .emoji {
  font-size: 14px; /* 絵文字付きテキストは少し大きめ */
  margin: 5px 0 10px;
  text-align: center;
}

.genie .info-block {
  background-color: rgb(247 254 255); /* 柔らかい白の背景 */
  padding: 15px;
  margin: 10px 0;
  border-radius: 10px; /* 角を丸く */
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* ほんのり影をつけて立体感 */
}

.genie .info-block h2 {
  margin-top: 0;
  font-size: 16px; /* 少し小さめ */
  color: #333; /* 見やすいダークグレー */
}

.genie .info-block p {
  text-align: left;
  margin: 5px 0 0 10px; /* h2との間隔を少し開ける */
  line-height: 1.5;
  font-size: 14px;
}

.block1 {
  padding: 0 0 15px;
  margin-left: 0;
}
.block2 {
  padding: 0 0 15px;
}

/* スマホ表示 (768px未満) → block2を表示, block1を非表示 */
@media (max-width: 767px) {
  .block1 {
    display: none;
  }
  .block2 {
    display: block;
  }
}

/* PC表示 (768px以上) → block1を表示, block2を非表示 */
@media (min-width: 768px) {
  .block1 {
    display: block;
  }
  .block2 {
    display: none;
  }
}


/* デフォルト（PC用） */
.responsive-text p {
  color: #555;
}

/* モバイル用 */
@media (max-width: 768px) {
  .responsive-text p {
      color: #ffffff;
  }
}