// 全ページ共通のパーツ（ヘッダー・モバイルメニュー・CTA・フッター）
// 各テンプレートで、ページ固有の components-*.jsx より先に読み込む
const { useState, useEffect, useRef, useMemo, useCallback } = React;

const NAV_LINKS = [
  { label: "プロジェクトについて", href: "/#about" },
  { label: "ストーリー", href: "/#stories" },
  { label: "ショートムービー", href: "/#movie" },
  { label: "イベント", href: "/#event" },
  { label: "よくある質問", href: "/#faq" },
];

const CTA_LEFT_PERSON_IMGS = [
  "/wp-content/themes/original/assets/cta-left-person-227-725.svg", "/wp-content/themes/original/assets/cta-left-person-227-726.svg", "/wp-content/themes/original/assets/cta-left-person-227-727.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-728.svg", "/wp-content/themes/original/assets/cta-left-person-227-729.svg", "/wp-content/themes/original/assets/cta-left-person-227-730.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-731.svg", "/wp-content/themes/original/assets/cta-left-person-227-732.svg", "/wp-content/themes/original/assets/cta-left-person-227-733.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-734.svg", "/wp-content/themes/original/assets/cta-left-person-227-736.svg", "/wp-content/themes/original/assets/cta-left-person-227-738.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-742-mask.svg", "/wp-content/themes/original/assets/cta-left-person-227-742.svg", "/wp-content/themes/original/assets/cta-left-person-227-745.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-746.svg", "/wp-content/themes/original/assets/cta-left-person-227-747.svg", "/wp-content/themes/original/assets/cta-left-person-227-748.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-749.svg", "/wp-content/themes/original/assets/cta-left-person-227-750.svg", "/wp-content/themes/original/assets/cta-left-person-227-753.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-754.svg", "/wp-content/themes/original/assets/cta-left-person-227-755.svg", "/wp-content/themes/original/assets/cta-left-person-227-756.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-757.svg", "/wp-content/themes/original/assets/cta-left-person-227-758.svg", "/wp-content/themes/original/assets/cta-left-person-227-759.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-760.svg", "/wp-content/themes/original/assets/cta-left-person-227-761.svg", "/wp-content/themes/original/assets/cta-left-person-227-762.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-763.svg", "/wp-content/themes/original/assets/cta-left-person-227-764.svg", "/wp-content/themes/original/assets/cta-left-person-227-765.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-769.svg", "/wp-content/themes/original/assets/cta-left-person-227-770.svg", "/wp-content/themes/original/assets/cta-left-person-227-771.svg",
  "/wp-content/themes/original/assets/cta-left-person-227-772.svg", "/wp-content/themes/original/assets/cta-left-person-227-773.svg", "/wp-content/themes/original/assets/cta-left-person-227-774.svg",
];

const CTA_RIGHT_PERSON_IMGS = [
  "/wp-content/themes/original/assets/cta-right-person-227-777.svg", "/wp-content/themes/original/assets/cta-right-person-227-778.svg", "/wp-content/themes/original/assets/cta-right-person-227-779.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-780.svg", "/wp-content/themes/original/assets/cta-right-person-227-781.svg", "/wp-content/themes/original/assets/cta-right-person-227-782.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-784.svg", "/wp-content/themes/original/assets/cta-right-person-227-786.svg", "/wp-content/themes/original/assets/cta-right-person-227-790-mask.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-790.svg", "/wp-content/themes/original/assets/cta-right-person-227-793.svg", "/wp-content/themes/original/assets/cta-right-person-227-794.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-795.svg", "/wp-content/themes/original/assets/cta-right-person-227-796.svg", "/wp-content/themes/original/assets/cta-right-person-227-797.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-798.svg", "/wp-content/themes/original/assets/cta-right-person-227-801.svg", "/wp-content/themes/original/assets/cta-right-person-227-802.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-803.svg", "/wp-content/themes/original/assets/cta-right-person-227-804.svg", "/wp-content/themes/original/assets/cta-right-person-227-805.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-806.svg", "/wp-content/themes/original/assets/cta-right-person-227-807.svg", "/wp-content/themes/original/assets/cta-right-person-227-808.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-809.svg", "/wp-content/themes/original/assets/cta-right-person-227-810.svg", "/wp-content/themes/original/assets/cta-right-person-227-811.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-812.svg", "/wp-content/themes/original/assets/cta-right-person-227-813.svg", "/wp-content/themes/original/assets/cta-right-person-227-817.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-818.svg", "/wp-content/themes/original/assets/cta-right-person-227-819.svg", "/wp-content/themes/original/assets/cta-right-person-227-820.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-821.svg", "/wp-content/themes/original/assets/cta-right-person-227-822.svg", "/wp-content/themes/original/assets/cta-right-person-227-823.svg",
  "/wp-content/themes/original/assets/cta-right-person-227-824.svg", "/wp-content/themes/original/assets/cta-right-person-227-825.svg",
];

// 左側イラスト（スマートフォンを持つ人物）: Figma生成コードの絶対位置(inset[%])構造をそのまま保持
function LeftPersonIllust({ imgs, className, maskPosition = "-11.293px -18.159px", maskSize = "32.651px 33.124px" }) {
  const [
    i01, i02, i03, i04, i05, i06, i07, i08, i09, i10,
    i2, i3, i4mask, i5, i6, i7, i8, i9, i11,
    i12, i13, i14, i15, i16, i17, i18, i19, i20,
    i21, i22, i23, i24, i25, i26, i27, i28, i29, i30, i31,
  ] = imgs;
  return (
    <div className={className} data-name="イラスト｜左・スマートフォンを持つ人物">
      <div className="absolute inset-[86.34%_23.81%_3.14%_66.06%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i01} /></div>
      <div className="absolute inset-[92.26%_16.27%_0_63.55%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i02} /></div>
      <div className="absolute inset-[50.64%_68.41%_40.51%_15.64%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i03} /></div>
      <div className="absolute inset-[46.7%_74.73%_40.96%_8.39%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i04} /></div>
      <div className="absolute inset-[7.99%_5.88%_75.67%_70.33%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i05} /></div>
      <div className="absolute inset-[24.09%_58.53%_68.15%_11.17%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i06} /></div>
      <div className="absolute inset-[35.03%_18.17%_26.51%_49.35%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i07} /></div>
      <div className="absolute inset-[56.35%_16.42%_5.41%_58.51%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i08} /></div>
      <div className="absolute inset-[35.16%_39.23%_28.98%_37.79%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i09} /></div>
      <div className="absolute inset-[16.15%_23.62%_71.97%_60.21%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i10} /></div>
      <div className="absolute contents inset-[6.9%_39.07%_77.63%_44.77%]">
        <div className="absolute inset-[13.02%_40.74%_77.63%_48.96%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i2} /></div>
        <div className="absolute inset-[7.95%_39.07%_82.5%_47.16%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i3} /></div>
        <div className="absolute inset-[13.19%_37.68%_83.02%_51.92%] mask-alpha mask-intersect mask-no-clip mask-no-repeat" style={{ maskImage: `url("${i4mask}")`, maskPosition, maskSize }}>
          <img alt="" className="absolute block inset-0 max-w-none size-full" src={i5} />
        </div>
        <div className="absolute inset-[12.35%_40.52%_86.55%_57.91%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i6} /></div>
        <div className="absolute inset-[12.87%_44.53%_86.02%_53.85%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i7} /></div>
        <div className="absolute inset-[17.29%_42.93%_82.59%_54.06%]">
          <div className="absolute inset-[-243.28%_-14.3%_-243.23%_-14.3%]"><img alt="" className="block max-w-none size-full" src={i8} /></div>
        </div>
        <div className="absolute inset-[7.77%_45.87%_84.4%_46.03%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i9} /></div>
        <div className="absolute inset-[6.9%_43.55%_82.47%_44.77%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i11} /></div>
      </div>
      <div className="absolute inset-[13.17%_48.01%_83.66%_48.06%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i12} /></div>
      <div className="absolute inset-[7.06%_39.6%_88.2%_53.61%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i13} /></div>
      <div className="absolute inset-[9.73%_47.53%_87.64%_50.99%]">
        <div className="absolute inset-[-10.95%_-28.56%]"><img alt="" className="block max-w-none size-full" src={i14} /></div>
      </div>
      <div className="absolute inset-[9.37%_49.41%_89.13%_49.84%]">
        <div className="absolute inset-[-19.2%_-56.11%]"><img alt="" className="block max-w-none size-full" src={i15} /></div>
      </div>
      <div className="absolute inset-[8.17%_41.73%_88.79%_55.02%]">
        <div className="absolute inset-[-3.98%_-5.47%_-3.98%_-5.45%]"><img alt="" className="block max-w-none size-full" src={i16} /></div>
      </div>
      <div className="absolute inset-[7.95%_44.37%_88.37%_54.18%]">
        <div className="absolute inset-[-3.29%_-12.15%_-3.29%_-12.16%]"><img alt="" className="block max-w-none size-full" src={i17} /></div>
      </div>
      <div className="absolute inset-[3.87%_51.67%_89.56%_38.73%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i18} /></div>
      <div className="absolute inset-[18.89%_34.47%_77.46%_44.74%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i19} /></div>
      <div className="absolute inset-[19.19%_28.48%_57.37%_38.5%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i20} /></div>
      <div className="absolute inset-[21.19%_48.33%_66.33%_31.59%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i21} /></div>
      <div className="absolute inset-[49.36%_46.04%_28.92%_17.17%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i22} /></div>
      <div className="absolute inset-[48.01%_37.62%_40.06%_60.91%]">
        <div className="absolute inset-[-2.6%_-30.89%]"><img alt="" className="block max-w-none size-full" src={i23} /></div>
      </div>
      <div className="absolute inset-[4.06%_9.41%_90.88%_87.77%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i24} /></div>
      <div className="absolute inset-[0_1.21%_87.65%_88.87%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i25} /></div>
      <div className="absolute inset-[5.25%_-0.01%_89.76%_97.71%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i26} /></div>
      <div className="absolute inset-[6.59%_0.64%_93.16%_98.8%]">
        <div className="absolute inset-[-72.33%_-47.23%]"><img alt="" className="block max-w-none size-full" src={i27} /></div>
      </div>
      <div className="absolute inset-[8.2%_0.86%_91.55%_98.58%]">
        <div className="absolute inset-[-72.33%_-47.23%]"><img alt="" className="block max-w-none size-full" src={i28} /></div>
      </div>
      <div className="absolute inset-[27.58%_37.74%_66.97%_52.7%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i29} /></div>
      <div className="absolute inset-[55.07%_62.02%_39.79%_36.79%]">
        <div className="absolute inset-[-6.02%_-37.92%]"><img alt="" className="block max-w-none size-full" src={i30} /></div>
      </div>
      <div className="absolute inset-[25.6%_85.9%_66.77%_0]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i31} /></div>
    </div>
  );
}

// 右側イラスト（ジャンプする人物）: Figma生成コードの絶対位置(inset[%])構造をそのまま保持
function RightPersonIllust({ imgs, className, maskPosition = "2.729px -22.218px", maskSize = "30.822px 35.016px" }) {
  const [
    i32, i33, i34, i35, i36, i37, i38, i39, i40mask, i41,
    i42, i43, i44, i45, i46, i47, i48, i49, i50, i51,
    i52, i53, i54, i55, i56, i57, i58, i59, i60, i61,
    i62, i63, i64, i65, i66, i67, i68, i69,
  ] = imgs;
  return (
    <div className={className} data-name="イラスト｜右・ジャンプする人物">
      <div className="absolute contents inset-[0.25%_0_0_0.29%]">
        <div className="absolute inset-[86.87%_0_0_80.4%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i32} /></div>
        <div className="absolute inset-[73.74%_48.65%_13.13%_31.76%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i33} /></div>
        <div className="absolute inset-[0.25%_38.77%_94.61%_53.12%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i34} /></div>
        <div className="absolute inset-[31%_86.21%_64.42%_10.63%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i35} /></div>
        <div className="absolute inset-[51.26%_2.97%_7.55%_52.96%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i36} /></div>
        <div className="absolute inset-[45.26%_24.66%_34.77%_15.08%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i37} /></div>
        <div className="absolute contents inset-[15.2%_49.03%_71.09%_34.39%]">
          <div className="absolute inset-[21.33%_51.45%_71.09%_37.2%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i38} /></div>
          <div className="absolute inset-[16.28%_52.5%_74.9%_34.39%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i39} /></div>
          <div className="absolute inset-[21.88%_55.55%_75.6%_33.23%] mask-alpha mask-intersect mask-no-clip mask-no-repeat" style={{ maskImage: `url("${i40mask}")`, maskPosition, maskSize }}>
            <img alt="" className="absolute block inset-0 max-w-none size-full" src={i41} />
          </div>
          <div className="absolute inset-[20.9%_62.65%_78.09%_35.71%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i42} /></div>
          <div className="absolute inset-[20.85%_58.31%_78.15%_39.97%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i43} /></div>
          <div className="absolute inset-[24.75%_57.3%_74.89%_39.6%]">
            <div className="absolute inset-[-71.79%_-13.98%_-71.77%_-13.98%]"><img alt="" className="block max-w-none size-full" src={i44} /></div>
          </div>
          <div className="absolute inset-[15.58%_49.99%_77.63%_40.06%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i45} /></div>
          <div className="absolute inset-[15.2%_49.03%_75.53%_37.05%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i46} /></div>
        </div>
        <div className="absolute inset-[20.44%_52.04%_76.58%_44.06%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i47} /></div>
        <div className="absolute inset-[15.67%_59.97%_79.37%_34.03%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i48} /></div>
        <div className="absolute inset-[16.2%_57.68%_79.24%_35.7%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i49} /></div>
        <div className="absolute inset-[17.36%_57.29%_80.49%_40.35%]">
          <div className="absolute inset-[-11.73%_-18.04%]"><img alt="" className="block max-w-none size-full" src={i50} /></div>
        </div>
        <div className="absolute inset-[17.19%_55.32%_81.57%_43.44%]">
          <div className="absolute inset-[-20.38%_-34.4%]"><img alt="" className="block max-w-none size-full" src={i51} /></div>
        </div>
        <div className="absolute inset-[24.11%_24.24%_50.14%_30.61%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i52} /></div>
        <div className="absolute inset-[15.36%_30.3%_65.15%_46.05%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i53} /></div>
        <div className="absolute inset-[2.83%_30.32%_76.76%_52.32%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i54} /></div>
        <div className="absolute inset-[28.98%_59.07%_52.57%_21.43%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i55} /></div>
        <div className="absolute inset-[32.97%_67.35%_52.7%_7.26%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i56} /></div>
        <div className="absolute inset-[55.66%_49.32%_20.73%_15.09%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i57} /></div>
        <div className="absolute inset-[55.24%_29.73%_39.95%_57.26%]">
          <div className="absolute inset-[-5.24%_-3.27%]"><img alt="" className="block max-w-none size-full" src={i58} /></div>
        </div>
        <div className="absolute inset-[36.72%_60.75%_58.89%_36.53%]">
          <div className="absolute inset-[-5.86%_-15.96%]"><img alt="" className="block max-w-none size-full" src={i59} /></div>
        </div>
        <div className="absolute inset-[27.47%_85.76%_60.32%_0.29%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i60} /></div>
        <div className="absolute inset-[33.35%_95.6%_62.22%_1.25%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i61} /></div>
        <div className="absolute inset-[34.55%_97.71%_65.15%_1.8%]">
          <div className="absolute inset-[-53.66%_-53.64%]"><img alt="" className="block max-w-none size-full" src={i62} /></div>
        </div>
        <div className="absolute inset-[35.84%_96.97%_63.87%_2.53%]">
          <div className="absolute inset-[-54.55%_-53.64%]"><img alt="" className="block max-w-none size-full" src={i63} /></div>
        </div>
        <div className="absolute inset-[2.28%_42.12%_96.95%_55.08%]">
          <div className="absolute inset-[-33.49%_-15.49%_-33.48%_-15.49%]"><img alt="" className="block max-w-none size-full" src={i64} /></div>
        </div>
        <div className="absolute inset-[78.59%_64.26%_20.06%_31.7%]">
          <div className="absolute inset-[-15.7%_-15.48%_-15.7%_-8.84%]"><img alt="" className="block max-w-none size-full" src={i65} /></div>
        </div>
        <div className="absolute inset-[76.88%_62.64%_20.72%_35.08%]">
          <div className="absolute inset-[-8.8%_-15.65%_-15.99%_-15.66%]"><img alt="" className="block max-w-none size-full" src={i66} /></div>
        </div>
        <div className="absolute inset-[91.72%_15.62%_6.93%_80.34%]">
          <div className="absolute inset-[-15.7%_-15.48%_-15.7%_-8.84%]"><img alt="" className="block max-w-none size-full" src={i67} /></div>
        </div>
        <div className="absolute inset-[90%_14%_7.59%_83.72%]">
          <div className="absolute inset-[-8.78%_-15.65%_-15.98%_-15.66%]"><img alt="" className="block max-w-none size-full" src={i68} /></div>
        </div>
        <div className="absolute inset-[31.76%_50.22%_66.03%_42.55%]"><img alt="" className="absolute block inset-0 max-w-none size-full" src={i69} /></div>
      </div>
    </div>
  );
}

function Header({ onMenu }) {
  return (
    <header className="bg-white content-stretch flex items-center justify-between left-0 px-[20px] py-[20px] lg:px-[32px] lg:py-[24px] right-0 top-0 w-full z-50 lg:sticky lg:in-[.admin-bar]:top-[32px]">
      <a href="/" className="h-[48px] w-[118px] lg:h-[60px] lg:w-[147px] overflow-clip relative shrink-0 block" data-name="ロゴ｜長崎チャレパス・横組み">
        <div className="absolute inset-[-0.01%_5.32%_41.08%_0]">
          <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-header-155-209.svg" />
        </div>
        <div className="absolute inset-[68.24%_20.53%_-0.01%_20.59%]">
          <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-header-155-227.svg" />
        </div>
        <div className="absolute inset-[34.9%_0_25.1%_1.03%]">
          <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-header-155-235.svg" />
        </div>
      </a>
      <div className="content-stretch hidden lg:flex gap-[40px] items-center relative shrink-0">
        <nav className="content-stretch flex font-['Zen_Kaku_Gothic_New'] font-bold gap-[32px] items-center text-[#322e2e] text-[14px]">
          {NAV_LINKS.map((link) => (
            <a key={link.label} href={link.href} className="block shrink-0 leading-[1.55]">
              {link.label}
            </a>
          ))}
        </nav>
        <a
          href="/#event"
          className="bg-[#ff8c3a] border-3 border-[#322e2e] border-solid content-stretch flex flex-col items-center overflow-clip p-[16px] rounded-[10px] shrink-0 w-[268px]"
        >
          <p className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.55] text-[16px] text-center text-white whitespace-nowrap">
            イベントを見る
          </p>
        </a>
      </div>
      <button
        type="button"
        onClick={onMenu}
        className="lg:hidden fixed top-[20px] right-[20px] z-50 bg-white flex items-center justify-center border-2 border-[#322e2e] border-solid rounded-[8px] size-[48px] text-[#322e2e] text-[20px] shrink-0"
        aria-label="メニューを開く"
      >
        <i className="fa-solid fa-bars" />
      </button>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  if (!open) return null;
  return (
    <div className="fixed inset-0 z-[100] lg:hidden bg-[#f8f4eb] overflow-y-auto">
      <div className="bg-white flex items-center justify-between p-[20px]">
        <div className="h-[48px] w-[118px] overflow-clip relative shrink-0" data-name="ロゴ｜長崎チャレパス・横組み">
          <div className="absolute inset-[-0.01%_5.32%_41.08%_0]">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-header-155-209.svg" />
          </div>
          <div className="absolute inset-[68.24%_20.53%_-0.01%_20.59%]">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-header-155-227.svg" />
          </div>
          <div className="absolute inset-[34.9%_0_25.1%_1.03%]">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-header-155-235.svg" />
          </div>
        </div>
        <button
          type="button"
          onClick={onClose}
          className="flex items-center justify-center border-2 border-[#322e2e] border-solid rounded-[8px] size-[48px] text-[#322e2e] text-[20px] shrink-0"
          aria-label="メニューを閉じる"
        >
          <i className="fa-solid fa-xmark" />
        </button>
      </div>
      <nav className="flex flex-col gap-[12px] items-start p-[24px]">
        {NAV_LINKS.map((link) => (
          <a
            key={link.label}
            href={link.href}
            onClick={onClose}
            className="bg-white border-2 border-[#322e2e] border-solid flex flex-col items-center justify-center p-[14px] rounded-[6px] shrink-0 w-full"
          >
            <span className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.7] text-[#322e2e] text-[15px] text-center">
              {link.label}
            </span>
          </a>
        ))}
        <a
          href="/#event"
          onClick={onClose}
          className="bg-[#ff8c3a] border-2 border-[#322e2e] border-solid flex flex-col items-center justify-center p-[14px] rounded-[6px] shrink-0 w-full"
        >
          <span className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.7] text-white text-[15px] text-center">
            イベントを見る
          </span>
        </a>
        <div className="flex items-center justify-center pt-[16px] w-full">
          <p className="font-['Zen_Kaku_Gothic_New'] font-normal leading-[2] text-[#322e2e] text-[14px] text-center">
            <a href="https://forms.gle/xn3eLMFurY2NBs6Y6" target="_blank" rel="noreferrer" className="underline">お問い合わせ</a>
            <span>{" ｜ "}</span>
            <a href="/privacy-policy/" className="underline">プライバシーポリシー</a>
          </p>
        </div>
      </nav>
    </div>
  );
}

function Cta() {
  return (
    <section
      className="bg-[#ff8c3a] flex flex-col gap-[24px] md:gap-[32px] items-center px-[24px] py-[56px] md:p-[120px] relative overflow-hidden"
      data-node-id="227:676"
      data-name="07｜CTA・イベント参加"
    >
      <div className="absolute bottom-[-130px] left-[-7.01%] w-[113.99%] rotate-[4.62deg]">
        <img alt="" className="block max-w-none w-full h-auto" src="/wp-content/themes/original/assets/cta-wave-bg.svg" />
      </div>

      <p className="capitalize font-['Outfit'] font-medium leading-[1.55] text-[16px] text-center text-white tracking-[1.28px]">
        YOUR NEXT STEP
      </p>
      <p className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.55] text-[26px] md:text-[38px] text-center text-white">
        長崎で、「やってみたい」をはじめよう。
      </p>
      <div className="font-['Zen_Kaku_Gothic_New'] font-medium leading-[0] text-[16px] text-center text-white tracking-[1.28px]">
        <p className="leading-[1.8] mb-0">話を聞く。誰かに会う。気になることを試してみる。</p>
        <p className="leading-[1.8]">まずは、今のあなたにできそうな一歩から。</p>
      </div>
      <a
        href="/#event"
        className="bg-[#322e2e] flex flex-col items-center overflow-clip p-[14px] md:p-[16px] relative rounded-[6px] md:rounded-[10px] shrink-0 w-full max-w-[440px]"
      >
        <p className="font-['Zen_Kaku_Gothic_New'] font-bold leading-[1.55] text-[16px] text-center text-white">
          参加できるイベントを見る
        </p>
      </a>

      <LeftPersonIllust
        imgs={CTA_LEFT_PERSON_IMGS}
        className="hidden lg:block -translate-y-1/2 absolute h-[347px] left-[88px] overflow-hidden top-1/2 w-[237px]"
      />
      <RightPersonIllust
        imgs={CTA_RIGHT_PERSON_IMGS}
        className="hidden lg:block -translate-y-1/2 absolute h-[397px] right-[88px] overflow-hidden top-1/2 w-[235px]"
      />
    </section>
  );
}

function Footer() {
  return (
    <footer
      className="flex flex-col gap-[24px] md:gap-[57px] items-start px-[24px] md:px-[100px] py-[56px] md:py-[120px]"
      data-node-id="227:929"
      data-name="08｜Footer・フッター"
    >
      <div className="flex flex-col md:flex-row items-start md:items-start justify-between w-full gap-[32px]">
        <div className="h-[77.622px] w-[190px] md:h-[134px] md:w-[328px] overflow-hidden relative shrink-0" data-name="ロゴ｜長崎チャレパス・横組み">
          <div className="absolute inset-[0%_5.32%_41.07%_0]">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-footer-227-888.svg" />
          </div>
          <div className="absolute inset-[68.24%_20.53%_-0.01%_20.59%]">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-footer-227-906.svg" />
          </div>
          <div className="absolute inset-[34.9%_0_25.1%_1.03%]">
            <img alt="" className="absolute block inset-0 max-w-none size-full" src="/wp-content/themes/original/assets/logo-footer-227-914.svg" />
          </div>
        </div>
        <div className="flex gap-[20px] md:gap-[80px] items-start font-['Zen_Kaku_Gothic_New'] font-medium leading-[0] text-[#322e2e] text-[14px] md:text-[18px] whitespace-nowrap">
          <div className="flex flex-col">
            <a href="/#stories" className="leading-[2] mb-0">ストーリー</a>
            <a href="/#movie" className="leading-[2] mb-0">動画</a>
            <a href="/#event" className="leading-[2] mb-0">イベント</a>
            <a href="/#faq" className="leading-[2]">FAQ</a>
          </div>
          <div>
            <p className="leading-[2] mb-0"><a href="https://forms.gle/xn3eLMFurY2NBs6Y6" target="_blank" rel="noreferrer">お問い合わせ</a></p>
            <p className="leading-[2] mb-0"><a href="/privacy-policy/">プライバシーポリシー</a></p>
            <p className="leading-[2] mb-0" aria-hidden="true">&nbsp;</p>
            <div className="flex items-center gap-[12px]">
              <a
                href="https://www.instagram.com/nagasaki_challepass"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="Instagram"
              >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <rect x="3" y="3" width="18" height="18" rx="5" stroke="#322e2e" strokeWidth="1.8" />
                  <circle cx="12" cy="12" r="4.2" stroke="#322e2e" strokeWidth="1.8" />
                  <circle cx="17.2" cy="6.8" r="1.1" fill="#322e2e" />
                </svg>
              </a>
              <a
                href="https://www.tiktok.com/@nagasaki_challepass"
                target="_blank"
                rel="noopener noreferrer"
                aria-label="TikTok"
              >
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path
                    d="M16.5 3c.4 2.2 1.8 3.7 4 3.9v2.8c-1.4.1-2.7-.3-4-1.1v5.6c0 3.1-2.5 5.3-5.3 5.3-2.9 0-5.3-2.4-5.3-5.3 0-2.9 2.4-5.3 5.3-5.3.3 0 .6 0 .9.1v2.9c-.3-.1-.6-.2-.9-.2-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5c1.4 0 2.6-1.1 2.6-2.5V3h2.7z"
                    fill="#322e2e"
                  />
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col md:flex-row items-start md:items-start justify-between leading-[1.55] w-full gap-[16px]">
        <p className="font-['Zen_Kaku_Gothic_New'] font-normal text-[#322e2e] text-[12px] md:text-[14px]">
          主催｜長崎市　　長崎市 チャレンジ機運醸成事業
        </p>
        <p className="font-['Outfit'] font-medium text-[#666] text-[12px] whitespace-nowrap">
          © Nagasaki Challepass
        </p>
      </div>
    </footer>
  );
}