// 案A：縦スクロール一枚絵型
// ふきだしを大きく使い、上から下へストーリーテリング。
// 「保護者と話している感じ」を縦の流れで作る。

const FlyerA = () => {
  const frameRef = React.useRef(null);

  // スクロール連動の reveal — design-canvas の transform 内でも動くよう
  // getBoundingClientRect ベースで判定。frame の表示領域に入ったら .in を付ける。
  React.useEffect(() => {
    const root = frameRef.current;
    if (!root) return;
    const els = Array.from(root.querySelectorAll('[data-reveal], [data-reveal-scale]'));
    const check = () => {
      const rb = root.getBoundingClientRect();
      els.forEach((el) => {
        if (el.classList.contains('in')) return;
        const eb = el.getBoundingClientRect();
        // 要素の上端が frame の下端より上、かつ下端が frame の上端より下
        if (eb.top < rb.bottom - 20 && eb.bottom > rb.top) {
          el.classList.add('in');
        }
      });
    };
    check();
    root.addEventListener('scroll', check, { passive: true });
    const ro = new ResizeObserver(check);
    ro.observe(root);
    return () => {
      root.removeEventListener('scroll', check);
      ro.disconnect();
    };
  }, []);

  return (
    <div ref={frameRef} className="flyer-frame craft-bg" style={fa.frame}>
      {/* ─────── HEADER ─────── */}
      <header style={fa.header}>
        <div style={fa.eyebrow}>
          <span style={fa.eyebrowDot}>●</span>
          <span>共同購入のご案内 ／ 保護者様限定</span>
        </div>
        <div style={fa.brandRow}>
          <img src="images/step-logo.jpg" alt="NPO法人ステップ" style={fa.logoImg} />
          <div style={fa.brandText}>
            <div style={fa.brandJp}>NPO法人 ステップ</div>
            <div style={fa.brandEn}>STEP — for parents & students</div>
          </div>
        </div>
      </header>

      {/* ─────── HERO ─────── */}
      <section style={fa.hero}>
        <div style={fa.heroChar} data-reveal>
          <img src="images/super-rice.jpg" alt="スーパーのお米売り場" style={fa.heroCharImg} />
        </div>

        <div className="bubble" style={fa.bubbleHero} data-reveal data-reveal-delay="1">
          <div style={fa.bubbleHeroSmall}>ねえ、最近さ……</div>
          <div style={fa.bubbleHeroBig}>
            お米、<br />
            <span style={fa.heroAccent}>高すぎる。</span>
          </div>
        </div>

        <div style={fa.heroAnswer} data-reveal data-reveal-delay="3">
          <div style={fa.heroAnswerLine}>—— だから、</div>
          <div style={fa.heroAnswerHead}>
            農家さんから<br />直接、<br />
            <span style={fa.markerInk}>ステップで共同購入</span><br />
            はじめます。
          </div>
        </div>

        <div style={fa.scrollHint} data-reveal data-reveal-delay="4">
          <div style={fa.scrollHintLine} />
          <div style={fa.scrollHintText}>SCROLL</div>
        </div>
      </section>

      {/* ─────── 稲穂イメージ（フルブリード） ─────── */}
      <section style={fa.skyImage}>
        <img src="images/rice-field-sky.jpg" alt="稲穂と青空" style={fa.skyImageImg} data-reveal-scale />
        <div style={fa.skyImageCap} data-reveal data-reveal-delay="1">
          <span style={fa.skyImageCapKi}>—— 妹尾（せのお）の田んぼで、</span><br />
          <span style={fa.skyImageCapBig}>朝日米は実っています。</span>
        </div>
      </section>

      {/* ─────── LEAD ─────── */}
      <section style={fa.lead}>
        <div style={fa.leadInner} data-reveal>
          <div style={fa.leadTag}>企画趣旨</div>
          <p style={fa.leadBody}>
            このところのお米の値上がり、本当に困りますよね。<br />
            そこでステップが、知り合いの米農家さんから大量に仕入れて、保護者の皆さまへお届けする<span className="marker">「共同購入」</span>をはじめます。<br />
            訪問支援のときに、スタッフが一緒に配達します。
          </p>
        </div>

        <div style={fa.leadHero} data-reveal data-reveal-delay="1">
          <img src="images/hara-rice-big.jpg" alt="お米をお届けします" style={fa.leadHeroImg} />
          <div style={fa.leadHeroCap}>
            <span style={fa.leadHeroCapKi}>—— このお米を、</span><br />
            <span style={fa.leadHeroCapBig}>ご家庭までお届けします。</span>
          </div>
        </div>

        <div style={fa.voiceCard} data-reveal data-reveal-delay="2">
          <div style={fa.voiceQuoteMark}>“</div>
          <p style={fa.voiceText}>
            令和7年度は、スタッフと共同購入したのですが、めっちゃ美味しかったので、<span className="marker">子どもがうれしそうで、幸せでした。</span>
          </p>
          <div style={fa.voiceBy}>—— ステップ原</div>
        </div>
      </section>

      {/* ─────── 商品 ─────── */}
      <section style={fa.product}>
        <div style={fa.sectionHead} data-reveal>
          <span style={fa.sectionNum}>01</span>
          <span style={fa.sectionTitle}>お届けするお米</span>
        </div>

        <div style={fa.productCard} data-reveal data-reveal-delay="1">
          <div style={fa.productImgWrap}>
            <img src="images/farmer-field.png" alt="原崎さんと田んぼ" style={fa.productImgInner} />
            <div style={fa.productImgCap}>原崎さん、妹尾の田んぼにて。</div>
          </div>

          <div style={fa.productMeta}>
            <Row label="産地" value="岡山県・妹尾（せのお）" />
            <Row label="品種" value={<>朝日米 <span style={{ fontSize: 10, color: 'var(--ink-mute)', fontWeight: 400 }}>※天候により別品種に変更の可能性あり</span></>} />
            <Row label="生産者" value="原崎奨太さん・原崎農産3代目" />
            <Row label="単位" value="30kg ／ 袋" last />
          </div>

          <div style={fa.farmerQuote}>
            <div style={fa.farmerQuoteMark}>“</div>
            <div style={fa.farmerQuoteText}>
              日本一おいしい米を目指す、<br />
              妹尾の米農家3代目。
            </div>
            <div className="stamp" style={fa.stampOverride}>原崎<br />農産</div>
          </div>

          <div style={fa.farmerWork}>
            <img src="images/farmer-work.png" alt="作業中の原崎さん" style={fa.farmerWorkImg} />
            <div style={fa.farmerWorkCap}>苗仕込みの作業。丁寧に、手をかけて。</div>
          </div>

          <div style={fa.team} data-reveal data-reveal-delay="2">
            <img src="images/hara-team.jpg" alt="原崎農産のみなさん" style={fa.teamImg} />
            <div style={fa.teamCapBox}>
              <div style={fa.teamCapLabel}>—— 原崎農産のみなさん。</div>
              <div style={fa.teamCapText}>
                家族と仲間で、丁寧に。<br />
                <span style={fa.teamCapMute}>3代目を中心に、季節のお米づくりを守っています。</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ─────── サンプル購入 ─────── */}
      <section style={fa.sample}>
        <div style={fa.sampleCard} data-reveal>
          <div style={fa.sampleTag}>まずは試してみたい方へ</div>
          <div style={fa.sampleHead}>
            お米のおいしさを<br />
            <span style={fa.sampleAccent}>味見して検討</span>できます。
          </div>
          <div style={fa.sampleBody}>
            令和7年度産のお米を、サンプルとしてご購入いただけます。
          </div>
          <div style={fa.samplePriceRow}>
            <div style={fa.samplePriceL}>
              <div style={fa.samplePriceLabel}>サンプル ／ 1kg</div>
              <div style={fa.samplePriceNum}>
                <span style={fa.samplePriceYen}>¥</span>
                <span className="num" style={fa.samplePriceBig}>600</span>
              </div>
            </div>
            <div style={fa.samplePriceR}>
              ご検討を助ける<br />
              少量パッケージ
            </div>
          </div>
          <div style={fa.sampleFoot}>
            ※ サンプルも原のLINEまでお申しつけください。
          </div>
        </div>
      </section>

      {/* ─────── 価格比較 ─────── */}
      <section style={fa.price}>
        <div style={fa.sectionHead} data-reveal>
          <span style={fa.sectionNum}>02</span>
          <span style={fa.sectionTitle}>お得なお値段</span>
        </div>

        <div className="bubble" style={fa.priceBubble} data-reveal data-reveal-delay="1">
          <div style={fa.priceMainLabel}>30kg あたり</div>
          <div style={fa.priceMainNum}>
            <span style={fa.priceYen}>¥</span>
            <span className="num" style={fa.priceBig}>18,000</span>
            <span style={fa.priceTax}>（税別）</span>
          </div>
          <div style={fa.priceSub}>
            5kg 換算で <span className="num" style={fa.priceSubNum}>¥3,000</span>
          </div>
        </div>

        <div style={fa.compareWrap} data-reveal data-reveal-delay="2">
          <div style={fa.compareTitle}>スーパーで買うと…？</div>
          <table style={fa.compareTable}>
            <tbody>
              <tr style={fa.compareRowSuper}>
                <td style={fa.compareCellLabel}>スーパー</td>
                <td style={fa.compareCellSuper}>
                  <span className="num">¥3,680</span>
                  <span style={{ ...fa.struck, backgroundColor: "rgba(200, 65, 42, 0.28)" }} />
                </td>
              </tr>
              <tr style={fa.compareRowStep}>
                <td style={{ ...fa.compareCellLabel, color: 'var(--paper-light)' }}>ステップ</td>
                <td style={fa.compareCellStep}>
                  <span className="num" style={{ fontSize: 26 }}>¥3,000</span>
                </td>
              </tr>
            </tbody>
          </table>

          <div style={fa.savingsBox} data-reveal-scale>
            <div style={fa.savingsLabel}>1袋（30kg）あたり</div>
            <div style={fa.savingsBig}>
              約 <span className="num" style={{ fontSize: 44, color: 'var(--vermilion)' }}>¥4,080</span> お得
            </div>
            <div style={fa.savingsSub}>
              4人家族の年間目安（90kg／3袋）なら<br />
              約 <span className="num" style={{ color: 'var(--vermilion)', fontSize: 22 }}>¥12,240</span> お得
            </div>
            <div style={fa.savingsNote}>
              ※ お米の価格が大幅に変動した場合、それに合わせてほぼ卸値でご案内し直します。最終的な金額は<strong>10月頃</strong>に決まります。
            </div>
          </div>
        </div>
      </section>

      {/* ─────── お届けの仕組み ─────── */}
      <section style={fa.flow}>
        <div style={fa.sectionHead} data-reveal>
          <span style={fa.sectionNum}>03</span>
          <span style={fa.sectionTitle}>お届けの仕組み</span>
        </div>

        {[
        { n: 1, t: 'まとめてお申込み（5月）', d: '年間分（4人家族なら3袋／90kgが目安）を、5月中にまとめてお申込みいただきます。\n（価格の最終確定は10月頃です）' },
        { n: 2, t: '一括仕入れ・事務所で保管', d: '農家さんから一括で仕入れて、ステップ事務所で保管します。\n11月中旬〜12月上旬収穫予定です。' },
        { n: 3, t: '訪問支援のときに配達', d: 'スタッフが訪問支援のときに、順次、ご自宅まで配達します。事務所でお渡しもできます。' },
        { n: 4, t: '30kg単位でご請求', d: '30kg単位で、配達した月に、その都度支援費用と合算してご請求いたします。' }].
        map((s, i) =>
        <div key={s.n} style={fa.flowStep} data-reveal data-reveal-delay={i + 1}>
            <div style={fa.flowNum}>
              <span style={fa.flowNumLabel}>STEP</span>
              <span className="num" style={fa.flowNumBig}>0{s.n}</span>
            </div>
            <div style={fa.flowBody}>
              <div style={fa.flowTitle}>{s.t}</div>
              <div style={fa.flowDesc}>{s.d.split('\n').map((line, i, arr) =>
              <React.Fragment key={i}>{line}{i < arr.length - 1 && <br />}</React.Fragment>
              )}</div>
            </div>
          </div>
        )}
      </section>

      {/* ─────── 注意事項 ─────── */}
      <section style={fa.notice}>
        <div style={fa.noticeBox} data-reveal>
          <div style={fa.noticeHead}>
            <span style={fa.noticeIcon}>!</span>
            <span>お申込み前に、必ずご確認ください</span>
          </div>
          <ul style={fa.noticeList}>
            <li style={fa.noticeItem}>本企画は <strong>NPO法人ステップの保護者・関係者</strong> 限定です。</li>
            <li style={fa.noticeItem}><strong>先着順</strong> です。取扱量は <strong>年間30袋（=900kg）まで</strong>。</li>
            <li style={fa.noticeItem}>共同購入のため、<strong>年間注文分のキャンセルはできません</strong>。</li>
            <li style={fa.noticeItem}>年間分をまとめて発注しますので、慎重にご検討のうえお申込みください。</li>
            <li style={fa.noticeItem}>配達は訪問支援の日に合わせます（個別の配達日指定はできません）。</li>
            <li style={fa.noticeItem}><strong>精米済みがご希望の場合</strong>は、精米してお届けします。<span style={{ color: 'var(--vermilion-deep)' }}>手数料が少しだけかかります。</span></li>
          </ul>
        </div>
      </section>

      {/* ─────── CTA ─────── */}
      <section style={{ ...fa.cta, color: "rgb(134, 97, 97)", backgroundColor: "rgb(255, 255, 255)" }}>
        <div style={fa.deadline} data-reveal>
          <div style={{ ...fa.deadlineLabel, color: "rgb(43, 31, 20)" }}>申込締切</div>
          <div style={fa.deadlineDate}>
            <span className="num" style={{ fontSize: 56, color: "rgb(43, 31, 20)" }}>5</span>
            <span style={{ ...fa.deadlineUnit, color: "rgb(43, 31, 20)" }}>月</span>
            <span className="num" style={{ fontSize: 56, color: "rgb(43, 31, 20)" }}>30</span>
            <span style={{ ...fa.deadlineUnit, color: "rgb(43, 31, 20)" }}>日まで</span>
          </div>
          <div style={{ ...fa.deadlineYear, color: "rgb(43, 31, 20)" }}>2026年・先着順</div>
        </div>

        <div style={fa.ctaBox} data-reveal data-reveal-delay="1">
          <div style={fa.ctaLead}>
            <img src="images/hara.png" alt="代表理事 原" style={fa.haraImg} />
            <div style={fa.ctaLeadText}>
              お申込みは、<br />
              代表理事 <strong>原（はら）</strong> の<br />
              LINEまで。
            </div>
          </div>
          <div style={fa.qrRow}>
            <div style={fa.lineNote}>
              <div style={fa.lineNoteLabel}>LINE</div>
              <div style={fa.lineNoteText}>
                すでにご登録の<br />
                <strong>原のLINE</strong>へ<br />
                ご連絡ください。
              </div>
            </div>
          </div>
        </div>

        <div style={{ ...fa.footerNote, color: "rgb(43, 31, 20)" }} data-reveal data-reveal-delay="2">
          年間注文・キャンセル不可にご同意のうえ、<br />お申込みください。
        </div>
      </section>

      <footer style={fa.footer}>
        <div style={fa.footerBrand}>NPO法人ステップ</div>
        <div style={fa.footerSmall}>米共同購入企画 ／ 2026年度</div>
      </footer>
    </div>);

};

const Row = ({ label, value, last }) =>
<div style={{
  display: 'flex',
  padding: '10px 0',
  borderBottom: last ? 'none' : '1px dashed rgba(80,50,20,0.25)',
  alignItems: 'baseline'
}}>
    <div style={{
    width: 60,
    fontSize: 11,
    color: 'var(--ink-mute)',
    fontFamily: 'var(--font-mono)',
    letterSpacing: '0.08em'
  }}>{label}</div>
    <div style={{ flex: 1, fontSize: 15, fontWeight: 500, fontFamily: 'var(--font-mincho)' }}>
      {value}
    </div>
  </div>;


const fa = {
  frame: { padding: 0 },
  header: {
    padding: '20px 24px 16px',
    borderBottom: '1px solid rgba(80,50,20,0.18)',
    display: 'flex',
    flexDirection: 'column',
    gap: 14
  },
  eyebrow: {
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.15em',
    color: 'var(--ink-mute)',
    textTransform: 'uppercase'
  },
  eyebrowDot: { color: 'var(--vermilion)', fontSize: 8 },
  brandRow: { display: 'flex', alignItems: 'center', gap: 12 },
  logoImg: {
    width: 64,
    height: 'auto',
    objectFit: 'contain',
    mixBlendMode: 'multiply'
  },
  logoPh: {
    width: 40, height: 40,
    border: '1.5px dashed rgba(80,50,20,0.4)',
    borderRadius: 6,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-mute)',
    background: 'var(--paper-light)'
  },
  brandText: {},
  brandJp: { fontFamily: 'var(--font-mincho)', fontSize: 16, fontWeight: 700, color: 'var(--ink)' },
  brandEn: { fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--ink-mute)', letterSpacing: '0.05em' },

  hero: {
    padding: '36px 24px 30px',
    position: 'relative',
    minHeight: 540
  },
  heroChar: {
    position: 'absolute',
    top: 36, right: 24,
    width: 130, height: 170
  },
  heroCharImg: {
    width: '100%', height: '100%',
    objectFit: 'cover',
    objectPosition: 'center top',
    borderRadius: 6,
    border: '1.5px solid rgba(80,50,20,0.2)',
    display: 'block'
  },
  heroCharCap: {
    position: 'absolute',
    bottom: -22, right: 0,
    fontFamily: 'var(--font-mincho)',
    fontSize: 10,
    color: 'var(--ink-soft)',
    background: 'var(--paper-light)',
    padding: '3px 8px',
    borderRadius: 3,
    whiteSpace: 'nowrap'
  },
  bubbleHero: {
    marginTop: 32,
    marginRight: 80,
    background: 'var(--paper-light)',
    fontFamily: 'var(--font-mincho)'
  },
  bubbleHeroSmall: {
    fontSize: 14, color: 'var(--ink-soft)',
    marginBottom: 10
  },
  bubbleHeroBig: {
    fontSize: 50,
    fontWeight: 900,
    lineHeight: 1.05,
    letterSpacing: '-0.02em',
    color: 'var(--ink)'
  },
  heroAccent: {
    color: 'var(--vermilion)',
    fontSize: 64,
    display: 'inline-block',
    transform: 'rotate(-2deg) translateY(2px)'
  },
  heroAnswer: {
    marginTop: 56,
    paddingLeft: 12,
    borderLeft: '3px solid var(--vermilion)'
  },
  heroAnswerLine: {
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    color: 'var(--vermilion)',
    letterSpacing: '0.1em',
    marginBottom: 8
  },
  heroAnswerHead: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 26,
    fontWeight: 700,
    lineHeight: 1.4,
    color: 'var(--ink)'
  },
  markerInk: {
    background: 'linear-gradient(transparent 60%, rgba(200,65,42,0.3) 60%)',
    paddingRight: 4
  },
  scrollHint: {
    marginTop: 40,
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    color: 'var(--ink-mute)'
  },
  scrollHintLine: {
    width: 30, height: 1, background: 'var(--ink-mute)'
  },
  scrollHintText: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.3em'
  },

  skyImage: {
    position: 'relative',
    margin: 0,
    background: 'var(--ink)',
    overflow: 'hidden'
  },
  skyImageImg: {
    display: 'block',
    width: '100%',
    height: 280,
    objectFit: 'cover',
    objectPosition: 'center 60%'
  },
  skyImageCap: {
    position: 'absolute',
    left: 24, bottom: 20,
    fontFamily: 'var(--font-mincho)',
    color: 'var(--paper-light)',
    textShadow: '0 2px 8px rgba(0,0,0,0.5)'
  },
  skyImageCapKi: {
    fontSize: 13,
    letterSpacing: '0.05em',
    opacity: 0.9
  },
  skyImageCapBig: {
    fontSize: 24,
    fontWeight: 700,
    letterSpacing: '0.02em'
  },

  lead: {
    padding: '32px 24px',
    background: 'var(--paper-deep)',
    borderTop: '1px solid rgba(80,50,20,0.18)',
    borderBottom: '1px solid rgba(80,50,20,0.18)'
  },
  leadInner: {},
  leadTag: {
    display: 'inline-block',
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.15em',
    color: 'var(--paper-light)',
    background: 'var(--ink)',
    padding: '4px 10px',
    marginBottom: 14
  },
  leadBody: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 15,
    lineHeight: 1.9,
    color: 'var(--ink)',
    margin: 0,
    textWrap: 'pretty'
  },

  leadHero: {
    marginTop: 24,
    marginLeft: -24,
    marginRight: -24,
    position: 'relative',
    background: 'var(--ink)'
  },
  leadHeroImg: {
    display: 'block',
    width: '100%',
    height: 360,
    objectFit: 'cover',
    objectPosition: 'center 25%'
  },
  leadHeroCap: {
    position: 'absolute',
    left: 24, bottom: 18,
    color: 'var(--paper-light)',
    fontFamily: 'var(--font-mincho)',
    textShadow: '0 1px 6px rgba(0,0,0,0.6)'
  },
  leadHeroCapKi: {
    fontSize: 12,
    color: 'var(--vermilion-pale)',
    letterSpacing: '0.05em'
  },
  leadHeroCapBig: {
    fontSize: 22,
    fontWeight: 700,
    lineHeight: 1.4,
    letterSpacing: '0.02em'
  },

  voiceCard: {
    marginTop: 20,
    background: 'var(--paper-light)',
    border: '1px solid rgba(80,50,20,0.2)',
    borderLeft: '3px solid var(--vermilion)',
    borderRadius: 6,
    padding: '16px 18px 14px',
    position: 'relative'
  },
  voiceTag: {
    display: 'inline-block',
    fontFamily: 'var(--font-mono)',
    fontSize: 9,
    letterSpacing: '0.18em',
    color: 'var(--vermilion-deep)',
    marginBottom: 8
  },
  voiceQuoteMark: {
    position: 'absolute',
    top: 4, right: 14,
    fontFamily: 'Georgia, serif',
    fontSize: 56,
    lineHeight: 1,
    color: 'rgba(200,65,42,0.18)'
  },
  voiceText: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 14,
    fontWeight: 500,
    lineHeight: 1.85,
    color: 'var(--ink)',
    margin: 0,
    textWrap: 'pretty'
  },
  voiceBy: {
    marginTop: 10,
    fontFamily: 'var(--font-mincho)',
    fontSize: 11,
    color: 'var(--ink-mute)',
    textAlign: 'right'
  },

  product: { padding: '40px 24px 36px' },
  sectionHead: {
    display: 'flex',
    alignItems: 'baseline',
    gap: 12,
    marginBottom: 20,
    paddingBottom: 10,
    borderBottom: '2px solid var(--ink)'
  },
  sectionNum: {
    fontFamily: 'var(--font-mono)',
    fontSize: 14,
    fontWeight: 700,
    color: 'var(--vermilion)',
    letterSpacing: '0.05em'
  },
  sectionTitle: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 22,
    fontWeight: 700,
    color: 'var(--ink)'
  },
  productCard: {
    background: 'var(--paper-light)',
    border: '1.5px solid rgba(80,50,20,0.2)',
    borderRadius: 8,
    overflow: 'hidden'
  },
  productImgWrap: {
    position: 'relative',
    width: '100%',
    borderBottom: '1.5px solid rgba(80,50,20,0.2)',
    background: 'var(--ink)'
  },
  productImgInner: {
    display: 'block',
    width: '100%',
    height: 200,
    objectFit: 'cover'
  },
  productImgCap: {
    position: 'absolute',
    bottom: 8, left: 10,
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.05em',
    color: 'var(--paper-light)',
    background: 'rgba(43,31,20,0.7)',
    padding: '3px 8px',
    borderRadius: 3
  },
  farmerWork: {
    position: 'relative',
    margin: '0 14px 14px',
    borderRadius: 6,
    overflow: 'hidden',
    border: '1px solid rgba(80,50,20,0.2)'
  },
  farmerWorkImg: {
    display: 'block',
    width: '100%',
    height: 160,
    objectFit: 'cover'
  },
  farmerWorkCap: {
    position: 'absolute',
    bottom: 8, left: 10,
    fontFamily: 'var(--font-mono)',
    fontSize: 9,
    letterSpacing: '0.05em',
    color: 'var(--paper-light)',
    background: 'rgba(43,31,20,0.7)',
    padding: '3px 8px',
    borderRadius: 3
  },
  team: {
    margin: '4px 14px 14px',
    borderRadius: 6,
    overflow: 'hidden',
    border: '1px solid rgba(80,50,20,0.2)',
    background: 'var(--paper-light)'
  },
  teamImg: {
    display: 'block',
    width: '100%',
    height: 200,
    objectFit: 'cover',
    objectPosition: 'center 35%'
  },
  teamCapBox: {
    padding: '12px 14px 14px',
    background: 'var(--paper-light)'
  },
  teamCapLabel: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 12,
    color: 'var(--vermilion-deep)',
    marginBottom: 4,
    letterSpacing: '0.04em'
  },
  teamCapText: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 14,
    fontWeight: 700,
    lineHeight: 1.6,
    color: 'var(--ink)'
  },
  teamCapMute: {
    fontSize: 11,
    fontWeight: 400,
    color: 'var(--ink-soft)'
  },
  productMeta: { padding: '14px 18px 6px' },
  farmerQuote: {
    position: 'relative',
    padding: '18px 18px 20px',
    margin: '0 14px 14px',
    background: 'var(--paper-deep)',
    borderRadius: 6
  },
  farmerQuoteMark: {
    position: 'absolute',
    top: -8, left: 14,
    fontFamily: 'Georgia, serif',
    fontSize: 48,
    color: 'var(--vermilion)',
    lineHeight: 1
  },
  farmerQuoteText: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 14,
    fontStyle: 'italic',
    color: 'var(--ink-soft)',
    lineHeight: 1.6,
    paddingLeft: 24,
    paddingRight: 70
  },
  stampOverride: {
    position: 'absolute',
    right: 14, top: '50%',
    transform: 'translateY(-50%) rotate(-6deg)'
  },

  price: { padding: '30px 24px 36px', background: 'var(--paper-deep)' },
  priceBubble: {
    textAlign: 'center',
    padding: '24px 22px 20px'
  },
  priceMainLabel: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.2em',
    color: 'var(--ink-mute)',
    marginBottom: 6
  },
  priceMainNum: {
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'center',
    gap: 4,
    color: 'var(--ink)'
  },
  priceYen: { fontSize: 24, fontFamily: 'var(--font-mincho)', fontWeight: 700 },
  priceBig: { fontSize: 64, lineHeight: 1, letterSpacing: '-0.03em' },
  priceTax: { fontSize: 11, color: 'var(--ink-mute)', marginLeft: 4, fontFamily: 'var(--font-mono)' },
  priceSub: {
    marginTop: 8,
    fontFamily: 'var(--font-mincho)',
    fontSize: 13,
    color: 'var(--ink-soft)'
  },
  priceSubNum: { fontSize: 18, color: 'var(--ink)' },

  compareWrap: { marginTop: 28 },
  compareTitle: {
    textAlign: 'center',
    fontFamily: 'var(--font-mincho)',
    fontSize: 16,
    color: 'var(--ink)',
    marginBottom: 14
  },
  compareTable: {
    width: '100%',
    borderCollapse: 'separate',
    borderSpacing: '0 6px'
  },
  compareRowSuper: { background: 'var(--paper-light)' },
  compareRowStep: { background: 'var(--ink-warm)' },
  compareCellLabel: {
    padding: '14px 16px',
    fontFamily: 'var(--font-mincho)',
    fontWeight: 700,
    fontSize: 14,
    width: 100
  },
  compareCellSuper: {
    padding: '14px 16px',
    textAlign: 'right',
    position: 'relative',
    fontSize: 22,
    color: 'var(--ink-mute)'
  },
  struck: {
    position: 'absolute',
    left: 14, right: 14,
    top: '50%',
    height: 2,
    background: 'var(--vermilion)',
    transform: 'rotate(-3deg)'
  },
  compareCellStep: {
    padding: '14px 16px',
    textAlign: 'right',
    color: 'var(--paper-light)'
  },

  savingsBox: {
    marginTop: 22,
    padding: '20px 18px',
    background: 'var(--paper-light)',
    border: '2.5px solid var(--ink)',
    borderRadius: 6,
    textAlign: 'center',
    position: 'relative'
  },
  savingsLabel: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.18em',
    color: 'var(--ink-mute)',
    marginBottom: 6
  },
  savingsBig: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 18,
    color: 'var(--ink)',
    lineHeight: 1.1
  },
  savingsSub: {
    marginTop: 12,
    paddingTop: 12,
    borderTop: '1px dashed rgba(80,50,20,0.3)',
    fontFamily: 'var(--font-mincho)',
    fontSize: 12,
    color: 'var(--ink-soft)',
    lineHeight: 1.7
  },
  savingsNote: {
    marginTop: 14,
    paddingTop: 12,
    borderTop: '1px dashed rgba(80,50,20,0.3)',
    fontFamily: 'var(--font-mincho)',
    fontSize: 11,
    color: 'var(--ink-soft)',
    lineHeight: 1.65,
    textAlign: 'left',
    textWrap: 'pretty'
  },

  // サンプル購入セクション
  sample: { padding: '0 24px 36px', background: 'var(--paper-deep)' },
  sampleCard: {
    background: 'var(--paper-light)',
    border: '2.5px dashed var(--vermilion)',
    borderRadius: 8,
    padding: '20px 20px 18px',
    position: 'relative'
  },
  sampleTag: {
    display: 'inline-block',
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.15em',
    color: 'var(--paper-light)',
    background: 'var(--vermilion)',
    padding: '4px 10px',
    marginBottom: 12
  },
  sampleHead: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 22,
    fontWeight: 700,
    lineHeight: 1.5,
    color: 'var(--ink)',
    marginBottom: 10
  },
  sampleAccent: {
    background: 'linear-gradient(transparent 60%, rgba(200,65,42,0.3) 60%)',
    paddingRight: 4
  },
  sampleBody: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 13.5,
    lineHeight: 1.8,
    color: 'var(--ink-soft)',
    marginBottom: 14
  },
  samplePriceRow: {
    display: 'flex',
    alignItems: 'center',
    gap: 14,
    padding: '14px 16px',
    background: 'var(--paper-deep)',
    borderRadius: 6
  },
  samplePriceL: {
    flex: '0 0 auto',
    paddingRight: 14,
    borderRight: '1px dashed rgba(80,50,20,0.4)'
  },
  samplePriceLabel: {
    fontFamily: 'var(--font-mono)',
    fontSize: 9,
    letterSpacing: '0.15em',
    color: 'var(--ink-mute)',
    marginBottom: 2
  },
  samplePriceNum: {
    display: 'flex',
    alignItems: 'baseline',
    color: 'var(--ink)'
  },
  samplePriceYen: {
    fontFamily: 'var(--font-mincho)',
    fontWeight: 700,
    fontSize: 18,
    marginRight: 2
  },
  samplePriceBig: {
    fontSize: 38,
    lineHeight: 1,
    letterSpacing: '-0.02em'
  },
  samplePriceR: {
    flex: 1,
    fontFamily: 'var(--font-mincho)',
    fontSize: 12,
    lineHeight: 1.6,
    color: 'var(--ink-soft)'
  },
  sampleFoot: {
    marginTop: 10,
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    color: 'var(--ink-mute)',
    letterSpacing: '0.05em'
  },

  flow: { padding: '40px 24px 36px' },
  flowStep: {
    display: 'flex',
    gap: 16,
    padding: '16px 0',
    borderBottom: '1px dashed rgba(80,50,20,0.25)',
    alignItems: 'flex-start'
  },
  flowNum: {
    flexShrink: 0,
    width: 56,
    textAlign: 'center'
  },
  flowNumLabel: {
    display: 'block',
    fontFamily: 'var(--font-mono)',
    fontSize: 9,
    letterSpacing: '0.15em',
    color: 'var(--vermilion)'
  },
  flowNumBig: {
    fontSize: 36,
    color: 'var(--ink)',
    lineHeight: 1
  },
  flowBody: { flex: 1, paddingTop: 4 },
  flowTitle: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 16,
    fontWeight: 700,
    color: 'var(--ink)',
    marginBottom: 4
  },
  flowDesc: {
    fontSize: 13,
    lineHeight: 1.7,
    color: 'var(--ink-soft)'
  },

  notice: { padding: '12px 24px 24px' },
  noticeBox: {
    background: 'var(--vermilion-pale)',
    border: '2px solid var(--vermilion)',
    borderRadius: 6,
    padding: '18px 18px 16px'
  },
  noticeHead: {
    display: 'flex',
    alignItems: 'center',
    gap: 10,
    fontFamily: 'var(--font-mincho)',
    fontWeight: 700,
    fontSize: 14,
    color: 'var(--vermilion-deep)',
    marginBottom: 12
  },
  noticeIcon: {
    width: 22, height: 22,
    background: 'var(--vermilion)',
    color: 'var(--paper-light)',
    borderRadius: '50%',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontFamily: 'var(--font-mincho)',
    fontWeight: 900,
    fontSize: 14,
    flexShrink: 0
  },
  noticeList: {
    margin: 0,
    paddingLeft: 0,
    listStyle: 'none'
  },
  noticeItem: {
    paddingLeft: 18,
    position: 'relative',
    fontSize: 12.5,
    lineHeight: 1.8,
    color: 'var(--ink)',
    marginBottom: 6
  },

  cta: { padding: '36px 24px 30px', background: 'var(--ink-warm)', color: 'var(--paper-light)' },
  deadline: { textAlign: 'center', marginBottom: 24 },
  deadlineLabel: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.2em',
    color: 'var(--vermilion-pale)',
    marginBottom: 8
  },
  deadlineDate: {
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'center',
    gap: 4,
    color: 'var(--paper-light)',
    fontFamily: 'var(--font-mincho)',
    lineHeight: 1
  },
  deadlineUnit: { fontSize: 24, marginRight: 8, marginLeft: -2 },
  deadlineYear: {
    marginTop: 10,
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.15em',
    color: 'rgba(243,236,217,0.95)'
  },

  ctaBox: {
    background: 'var(--paper-light)',
    color: 'var(--ink)',
    borderRadius: 8,
    padding: 18
  },
  ctaLead: {
    display: 'flex',
    alignItems: 'center',
    gap: 14,
    marginBottom: 14
  },
  ctaLeadText: {
    flex: 1,
    fontFamily: 'var(--font-mincho)',
    fontSize: 14,
    lineHeight: 1.7,
    color: 'var(--ink)',
    fontWeight: 500
  },
  haraImg: {
    width: 76, height: 76,
    borderRadius: '50%',
    objectFit: 'cover',
    border: '2px solid var(--paper-deep)',
    flexShrink: 0
  },
  qrRow: {
    display: 'flex',
    gap: 14,
    alignItems: 'center',
    background: 'var(--paper-deep)',
    padding: 14,
    borderRadius: 6
  },
  lineNote: {
    flex: 1,
    display: 'flex',
    alignItems: 'center',
    gap: 14
  },
  lineNoteLabel: {
    width: 56, height: 56,
    background: '#06c755',
    color: 'white',
    borderRadius: 12,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontFamily: 'var(--font-mono)',
    fontSize: 13,
    fontWeight: 900,
    letterSpacing: '0.05em',
    flexShrink: 0
  },
  lineNoteText: {
    flex: 1,
    fontFamily: 'var(--font-mincho)',
    fontSize: 14,
    lineHeight: 1.7,
    color: 'var(--ink)',
    fontWeight: 500
  },
  qrPh: {
    width: 90, height: 90,
    flexShrink: 0,
    background: 'white'
  },
  qrInfo: { flex: 1 },
  qrLabel: {
    fontFamily: 'var(--font-mono)',
    fontSize: 10,
    letterSpacing: '0.12em',
    color: 'var(--ink-mute)'
  },
  qrId: {
    fontFamily: 'var(--font-mono)',
    fontSize: 18,
    fontWeight: 700,
    color: 'var(--ink)',
    marginTop: 4
  },
  qrSmall: {
    fontFamily: 'var(--font-mono)',
    fontSize: 9,
    color: 'var(--ink-mute)',
    marginTop: 4
  },
  footerNote: {
    marginTop: 16,
    textAlign: 'center',
    fontSize: 11,
    color: 'rgba(243,236,217,0.7)',
    lineHeight: 1.7
  },

  footer: {
    padding: '18px 24px',
    background: '#1a1108',
    color: 'rgba(243,236,217,0.7)',
    textAlign: 'center'
  },
  footerBrand: {
    fontFamily: 'var(--font-mincho)',
    fontSize: 13,
    fontWeight: 700,
    color: 'var(--paper-light)'
  },
  footerSmall: {
    marginTop: 4,
    fontFamily: 'var(--font-mono)',
    fontSize: 9,
    letterSpacing: '0.1em'
  }
};

window.FlyerA = FlyerA;