/* ==========================================================================
   pages/flower.css — /local/flower/ 専用CSS
   --------------------------------------------------------------------------
   ページ内アンカーボタン（.p-flowerAnchor）。本文冒頭に置き、「ジャカランダ開花情報」
   「桜開花情報」の各見出し（#jacaranda / #sakura）へ飛ぶ。テキスト＋右に丸囲みの
   下向き矢印（Font Awesome Free 6 solid の circle-chevron-down、\f13a）。
   枠線・背景は持たず、文字色・矢印色とも var(--color-main) に統一。

   命名・構造：nav > ul > li > a という入れ子は既存の .p-breadcrumb（nav.css）に
   倣った（p-接頭辞のページ専用コンポーネント・BEM）。.c-linkWrap + .btn の暫定実装
   から本パーツへ差し替え。core（common.css・components.css）は変更しない。

   ホバー挙動：アイコンが右へ4px移動する演出は .btn:hover::after（components.css）の
   慣習を踏襲。

   ブレークポイントは新サイトの規約（min-width:769px / max-width:768px）。

   見た目調整：
   - リストマーカー・UA既定paddingを解除（list-style:none / margin:0 / padding:0）
   - 文字サイズは無指定（body継承の var(--fs-base)=16px）から一段階上の
     var(--fs-md)=18px へ（フォントサイズのスケールは common.css 側で管理、px直書きなし）
   - 上下余白は margin-top:var(--spacing-lg) / 本文との間は
     margin-bottom:var(--spacing-2xl) と下側を広めに確保
     （h1直後は近接させ、本文セクションへの導入部として下側の区切りを明確にするため）
   - 区切り線（border-bottom）は指示により削除（2026-09-03）
   ========================================================================== */

.p-flowerAnchor {
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-2xl);
  padding-bottom: var(--spacing-lg);
}
.p-flowerAnchor__list {
  display: flex;
  flex-direction: column;
  gap: 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}
.p-flowerAnchor__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-main);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
}
.p-flowerAnchor__link i {
  color: var(--color-main);
  transition: transform var(--transition-fast);
}
.p-flowerAnchor__link:hover i {
  transform: translateX(4px);
}

@media (min-width: 769px) {
  .p-flowerAnchor__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3em;
  }
}