/* 固定背景エリア */
.header-banner {
    background-image: url('../images/flow2.png'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff; /* テキストカラー */
    text-align: center;
    padding: 100px 20px; /* 上下の余白を調整 */
  }

  /* 固定背景内のテキスト */
  .header-banner .kuge-content h1 {
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .header-banner .kuge-content p {
    font-size: 1.2rem;
    line-height: 1.6;
  }

  /* 緊急時専用のセクションヘッダー（中央寄せ） */
  .kuge-header-center {
    width: 100%;
    max-width: 1000px;
    text-align: center; /* 中央寄せ */
    margin: 0 auto;
    box-sizing: border-box;
  }

/* 見出し */
.kuge-title-center {
  font-size: var(--fs__5l);
    font-weight: bold;
    color: #333;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    padding-bottom: 5px; /* 下線との間隔 */
    display: inline-block; /* 文字幅に合わせる */
  }


/* セクション全体 */
#flowers, #makurahana {
    padding: 40px 20px;
    margin: 20px auto;
    max-width: 100%; /* セクション最大幅 */
  }


.flower-list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.flower-item {
    background: white;
    padding: 15px;
    border-radius: 8px;
    max-width: 330px;
    text-align: center;
}

.flower-item img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 10px;
}

.price {
    font-size: 16px;
    font-weight: bold;
    color: #d32f2f;
    margin-top: 5px;
}

.makurahana-list {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.makurahana-list .flower-item {
    flex: 1;
    max-width: 50%;
    text-align: center;
}
.flower-item h3 {
  font-size: var(--fs__2l); /* フォントサイズを大きく */
    font-weight: bold; /* ボールド */
    margin-bottom: 10px; /* 下の要素との間隔を調整 */
}

.flower-item p {
  font-size: var(--fs__l); /* フォントサイズを大きく */
    font-weight: bold; /* ボールド */
    margin: 8px 0; /* 上下の余白を適切に設定 */
    text-align: left;
}

.plan-list-price {
  text-align: center; /* 🔸中央揃え */
  font-size: var(--fs__5l); /* スマホ向けに調整済みであればそのまま */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap; /* 折り返しを許可 */
  gap: 8px; /* アイテム同士の余白 */
}

.plan-list-price span {
  display: inline-block; /* 中央揃え時の安定化 */
}

.price-list-small {
  font-size: var(--fs__s); /* 🔽 より小さいフォントサイズに */
  color: #fff;
  background-color: #8C0085;
  display: inline-block;
  line-height: 1.1;
  text-align: center;
  padding: 4px 8px; /* 🔽 内側の余白も縮小 */
  border-radius: 3px;
  margin-right: 4px;
  white-space: nowrap;
}


/* 金額部分 */
.flower-amount {
  font-size: var(--fs__4l); /* メインの金額サイズ */
  margin-right: 4px;
}

/* 円など小さめの文字 */
.price-unit-small {
  font-size: var(--fs__1l);
  color: #333;
}

/* 1本などの数量表示 */
.flower-qty {
  font-size: var(--fs__3l);
  color: #333;
  margin: 0 15px;
}
@media screen and (max-width: 768px) {
  /* 背景バナー内のテキストサイズを縮小 */
  .header-banner {
    padding: 60px 16px;
    background-position: center;
  }

  .header-banner .kuge-content h1 {
    font-size: 1.8rem;
  }

  .header-banner .kuge-content p {
    font-size: 1rem;
  }

  .kuge-title-center {
    font-size: var(--fs__2l);
  }

  #flowers, #makurahana {
    padding: 30px 16px;
  }

  .flower-list,
  .makurahana-list {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }

  .flower-item,
  .makurahana-list .flower-item {
    max-width: 100%;
    width: 100%;
  }

  .flower-item h3 {
    font-size: var(--fs__2l);
    text-align: center;
  }

  .flower-item p {
    font-size: var(--fs__m);
    text-align: left;
  }

  .plan-list-price {
    text-align: center; /* 🔸中央揃え */
    font-size: var(--fs__3l); /* スマホ向けに調整済みであればそのまま */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* 折り返しを許可 */
    gap: 8px; /* アイテム同士の余白 */
  }

  .plan-list-price span {
    display: inline-block; /* 中央揃え時の安定化 */
  }

  .flower-amount {
    font-size: var(--fs__2l);
  }

  .flower-qty {
    font-size: var(--fs__2l);
    margin: 0 10px;
  }

  .price-unit-small {
    font-size: var(--fs__m);
  }

  .price-list-small {
    font-size: var(--fs__s);
    padding: 3px 6px;
  }
}