@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
img {
  width: 100%;
  vertical-align: bottom;
}
.btn-01,
.btn-02 {
  width: 40px;
}
/* グラデーションケイのboxsp用 */
.rainbow-box {
  position: relative;
  margin: 0 auto;
  color: #fff;
  /* --- 共通のデフォルト値 --- */
  --border-size: 8px;
  --bg-color: #333;
  --grad-angle: to left;
  --grad-colors:
    #089708, #ffff00, #ff7f00, #e40b70, #9c3ae3, #4b0082, #1a9fd8; /* 少し鮮やかな虹色 */

  /* 基本のスタイル */
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  padding: 15px; /* ボックス内部の余白 */
  box-sizing: border-box;

  /* 枠線と角丸の設定 */
  border: var(--border-size) solid transparent;
  border-radius: 20px;

  /* 枠線と背景の重なり設定（背景を切り抜いて枠線を表現） */
  background:
    linear-gradient(var(--bg-color), var(--bg-color)) padding-box,
    linear-gradient(var(--grad-angle), var(--grad-colors)) border-box;

  /* 角丸の歪みを補正する重要な記述 */
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;

  margin-bottom: 30px;
}

/* PC用グラデーションケイ */
.pc-rainbow-box {
  /* 枠の太さを指定 */

  border: 16px solid transparent;

  /* レインボー画像の読み込み */
  border-image-source: url("../img/rainbow@2x.png");

  /* 画像の端を枠として保持する（画像サイズに合わせて調整） */
  border-image-slice: 25;
  border-image-repeat: stretch;
}
/* /////////////////////////////// */

/* パーツサイズ */
.hoshi {
  width: 80px;
}
.ichigo,
.folk {
  width: 60px;
}

.gourmet-photo {
  width: 260px;
  border-radius: 5px;
  display: block;
  margin: 0 auto;
  margin-bottom: 15px;
}
.pict-box {
  width: 300px;
  height: 80px;
  margin: 0 auto 20px;
  border-radius: 5px;
  /* background-color: #fff; */
  padding-bottom: 20px;
}
.map-pict {
  width: 78px;
}
.kuma-pict {
  width: 180px;
  display: block;
  margin: 0 0 0 auto;
}
.kuma-pict02,
.kuma-pict03,
.kuma-pict04 {
  width: 150px;
  margin-bottom: 29px;
}

.kuma-pict04 {
  margin: 0 auto 0 0;
  margin-bottom: 50px;
}

/* 1. 親要素を Flexbox にする */
.flex-container {
  display: flex;
  align-items: start; /* 縦方向の中央揃え（上揃えなら start に） */
  gap: 16px; /* 波線とコンテンツの間の隙間を調整 */
}

/* 2. 縦の波線 */
/* コンポーネントCSS */
.vertical-wave {
  width: 12px;
  height: 200px; /* 必要に応じて 100% などに */

  /* 色の部分を var(--wave-color, デフォルト色) に変更 */
  background-image:
    linear-gradient(
      135deg,
      transparent 50%,
      var(--wave-color, #333) 50%,
      var(--wave-color, #333) 65%,
      transparent 65%
    ),
    linear-gradient(
      225deg,
      transparent 50%,
      var(--wave-color, #333) 50%,
      var(--wave-color, #333) 65%,
      transparent 65%
    );

  background-size: 12px 16px;
  background-repeat: repeat-y;
  background-position:
    0 0,
    0 8px;
  margin-top: 8px;
}
/* スタイルCSS（個別ページや親側の設定） */

.wave-red {
  --wave-color: #e00798; /* 赤 */
}

.wave-blue {
  --wave-color: #0acfe9; /* 青 */
}

.wave-yellow {
  --wave-color: #daec30; /* 緑 */
}

.wave-green {
  --wave-color: #0ae90a; /* オレンジ */
}

.wave-purple {
  --wave-color: #a55eea; /* 紫 */
}