@charset "UTF-8";
/* ========= Flower theme (green) ========= */
body.page-flower{
  --sys-link:    #2f7a44;  /* ボタン/下線/リンク */
  --sys-accent1: #2f7a44;  /* 見出し */
  --sys-ink:     #1f2b22;

  --panel-bd:    #d8e9dc;
  --panel-shadow:0 10px 26px rgba(48,100,60,.10);
}

/* CTA 背景の“にじみ”色（背面レイヤ） */
body.page-flower .footer-cta{
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(159,206,170,.22), rgba(159,206,170,0) 60%),
    #f4f9f5;
}
body.page-flower .footer-cta::before{
  background: radial-gradient(600px 160px at 50% 50%,
              rgba(94,162,108,.12), rgba(94,162,108,0) 70%);
}
/* === Flower 個別：ローカルナビのボタン揃え === */
.page-flower .local-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.page-flower .btn,
.page-flower .btn-shop,
.page-flower .btn-ig {
  display: inline-flex;          /* ← 中央揃えの土台 */
  align-items: center;           /* ← 垂直中央 */
  justify-content: center;
  gap: 8px;                      /* アイコン-文字間 */
  line-height: 1;                /* ← 上寄り防止の決め手 */
  padding: 10px 14px;
  border: 1px solid var(--panel-bd, #d8e9dc);
  border-radius: 999px;
  font-weight: 600;
  height: auto;
  vertical-align: middle;
}

.page-flower .btn-ig {
  background: #fff;
  color: var(--sys-link, #2f7a44);
}

/* SVGのベースラインずれ対策（微調整） */
.page-flower .btn-ig .ig-icon,
.page-flower .btn-ig svg {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  position: relative;
  top: -0.02em; /* 要らなければ削除可 */
}
/* タイプライタのカーソル（点滅中） */
.lede.typer {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: .08em solid currentColor; /* 疑似カーソル */
  animation: caretBlink 1s steps(1) infinite;
}

/* 完了したら business.js が付ける .is-complete でカーソル停止＆非表示 */
.lede.typer.is-complete {
  border-right-color: transparent;
  animation: none;
}
/* ===== [SAFE PATCH v1 - 2025-10-24] Flower page only ===== */
/* 目的:
   1) Instagramボタンの上下中央揃え
   2) タイプライタ完了後の点滅カーソルを消す
   ※ 既存CSS/JSは変更・削除しません。 .page-flower にのみ作用します。 */

/* 1) ローカルナビのボタン：中央揃え＆高さブレ防止 */
.page-flower .local-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.page-flower .btn,
.page-flower .btn-shop,
.page-flower .btn-ig {
  display: inline-flex;        /* ← 垂直中央揃えの土台 */
  align-items: center;         /* ← 垂直中央 */
  justify-content: center;
  gap: 8px;                    /* アイコン-文字間 */
  line-height: 1;              /* ← 上寄り防止の決め手 */
  padding: 10px 14px;
  border: 1px solid var(--panel-bd, #d8e9dc);
  border-radius: 999px;
  font-weight: 600;
  height: auto;
  vertical-align: middle;
}

.page-flower .btn-ig {
  background: #fff;
  color: var(--sys-link, #2f7a44);
}

/* SVGのベースライン微調整（不要なら削除可） */
.page-flower .btn-ig .ig-icon,
.page-flower .btn-ig svg {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.1em;
  height: 1.1em;
  position: relative;
  top: -0.02em;
}

/* 2) タイプライタ完了後にカーソル非表示
   business.js が完了時に .is-complete を付与する仕様を利用します */
.page-flower .lede.typer {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  border-right: .08em solid currentColor;   /* 疑似カーソル */
  animation: caretBlink 1s steps(1) infinite;
}

.page-flower .lede.typer.is-complete {
  border-right-color: transparent;          /* カーソル非表示 */
  animation: none;                           /* 点滅停止 */
}

/* 既に styles.css にあるはずですが、なければ最後に有効化してください */
@keyframes caretBlink { 50% { border-right-color: transparent } }
/* ===== [/SAFE PATCH v1] ===== */
/* === IGアイコンが消える対策（Flower限定）=== */
/* 1) SVGは常に「文字色 = currentColor」で塗る */
.page-flower .btn .btn__icon,
.page-flower .btn .btn__icon * {
  fill: currentColor !important;
  stroke: none !important;
}

/* 2) サイズ/並びの保険（縮んだり潰れたりするのを防ぐ） */
.page-flower .btn .btn__icon {
  display: inline-block;
  width: 1.1em; height: 1.1em;
  min-width: 1.1em; min-height: 1.1em;
  position: relative; top: -0.02em; /* 微調整。不要なら0でもOK */
}

/* 3) もしホバーで背景が緑になるルールがどこかにある場合、反転表示で常に見えるようにする */
.page-flower .btn.btn--soft:hover {
  background: #fff;              /* ← 背景を白のままにしておく（見失わない安全策） */
}

/* もし「ホバー時に緑背景にしたい」なら、上の1個を消して、下の反転スタイルを使ってください */
.page-flower .btn.btn--soft.hover-green:hover {
  background: var(--sys-link, #2f7a44);
  color: #fff;                   /* ← テキスト＆SVGが白に反転（見える） */
}
/* --- IGアイコンが見えない対策（Flower限定） --- */
/* ボタンの配色（緑ベタ＋白文字）を明示 */
.page-flower .btn.btn--primary,
.page-flower .local-nav .btn.btn--primary {
  background: var(--sys-link, #2f7a44);
  color: #fff;
  border-color: var(--sys-link, #2f7a44);
}

/* SVG を必ず「文字色で塗る」＆隠れないサイズにする */
.page-flower .btn .btn__icon,
.page-flower .btn .ig-icon {              /* ig-icon でも拾う */
  display: inline-block;
  width: 1.1em; height: 1.1em;
  min-width: 1.1em; min-height: 1.1em;
  color: currentColor;                    /* ← currentColor を明示 */
  position: relative; top: -0.02em;       /* 微調整（不要なら0） */
}

/* path/g 要素が fill:none で上書きされていても強制で塗る */
.page-flower .btn .btn__icon *,
.page-flower .btn .ig-icon * {
  fill: currentColor !important;
  stroke: none !important;
}