/* =========================================================
   fanfare — パティスリーLP
   ※ レイアウト・配色・タイポ・余白は Claude Design 版を「正」として踏襲。
     このCSSは (1)アニメ用キーフレーム (2)実写真の組込み (3)安全対策(reduced-motion/モバイル)
     のみを担当し、骨格は変更しない。
   ハウスカラー(#0E5E43/#15805C/#E9F5ED/#F6F4EC/#17241F)は不使用。
   ========================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #FCF4E8;
  color: #3A2A22;
  font-family: 'Noto Sans JP', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: #E14B5A; color: #fff; }

/* ---------- keyframes ---------- */
@keyframes ff-marqueeL { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes ff-marqueeR { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
@keyframes ff-bob { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-16px) rotate(var(--r,0deg)); } }

/* ---------- 実写真の組込み（PARADE 商品カード） ----------
   元デザインのCSS図形イラストを、実写真へ置換。300px角丸コンテナは踏襲。 */
.ff-prod-media {
  position: relative;
  height: 300px;
  border-radius: 32px;
  overflow: hidden;
  background: #FCF4E8;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,0.4);
}
.ff-pimg {
  position: absolute;
  left: 0; top: -15%;
  width: 100%; height: 130%;      /* パララックスでズレても余白が出ないよう天地に余白 */
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* 商品カードのホバー：持ち上がり＋わずかな傾き（デスクトップのみ） */
.ff-prod { transition: transform 0.45s cubic-bezier(.2,.8,.2,1); will-change: transform; }
@media (hover: hover) {
  .ff-prod:hover { transform: translateY(-12px) rotate(-1.2deg); }
  .ff-prod:hover .ff-pimg { transform: scale(1.06); transition: transform 0.6s ease; }
}

/* ---------- 商品カートボタン（価格の横） ----------
   ※ デモ用ボタン。実際のカート/EC機能は未接続。実案件時に差し替え。 */
.ff-cart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  background: #FCF4E8;
  color: #E14B5A;
  border-radius: 999px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 18px -10px rgba(0,0,0,0.5);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ff-cart::before { content: "＋"; font-weight: 700; }
@media (hover: hover) {
  .ff-cart:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 12px 22px -10px rgba(0,0,0,0.55); }
}

/* ---------- MATERIALS 素材写真 ---------- */
.ff-mat-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  margin-bottom: 16px;
}

/* ---------- SHOP 店舗内装写真 ---------- */
.ff-shop-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

/* ---------- 見出しの和文改行制御（スマホで単語途中折返しを防ぐ） ---------- */
.ff-hl { display: inline-block; white-space: nowrap; }

/* ---------- レスポンシブ：スマホ ---------- */
@media (max-width: 768px) {
  /* ヒーロー見出しは2行（「今日に、」/「ファンファーレを。」）で確実に折る。
     長い方の行「ファンファーレを。」が画面幅に収まるサイズに抑える（nowrapではみ出さない） */
  #ff-hero-title { font-size: clamp(30px, 8.8vw, 56px) !important; line-height: 1.14; }
  .ff-hl { display: block; }
  #ff-hero-sub { font-size: 15px; }

  /* ヘッダー：狭幅ではテキストリンクを畳み、ロゴ＋オンラインボタンのみ表示
     （主要導線は画面下の固定バーが担う）。骨格は維持しつつ折返し崩れを防ぐ。 */
  #ff-header nav a:not(:last-child) { display: none; }

  /* ヒーロー：上の余白を詰め、下のマーキー帯が1画面目に入るように高さを内容に合わせる */
  #ff-hero { min-height: auto !important; padding: 84px 0 30px !important; }
  /* SCROLL文字と縦棒は削除（スマホのみ） */
  #ff-scrollcue { display: none !important; }
}

/* ---------- prefers-reduced-motion について ----------
   ★ このLPは「動きが主役」。Windowsの「アニメーションを表示」OFF 等で
     prefers-reduced-motion:reduce になっても、演出（オープニング/ヒーロー/パレード/
     マーキー/SVG描画/カーテン/canvas）は止めない。JS側でパーティクルを少し減らすのみ。
     ※ canvas を display:none にしたり .ff-mq の animation を切ると“ゼロ動作”になるため、ここでは何もしない。 */