go("home")} style={{
cursor: mobileOpen ? "default" : "pointer",
opacity: mobileOpen ? 0 : 1,
pointerEvents: mobileOpen ? "none" : "auto",
transition: "opacity 0.35s ease",
}}>
setMobileOpen(false)}
style={{
position: "fixed", top: 0, left: 0, bottom: 0,
width: "20%", zIndex: 98,
background: "rgba(0,0,0,0.4)",
backdropFilter: "blur(2px)",
WebkitBackdropFilter: "blur(2px)",
opacity: mobileOpen ? 1 : 0,
pointerEvents: mobileOpen ? "auto" : "none",
transition: "opacity 0.35s ease",
}}
/>
{/* 右80% : メニュー本体 (フェードイン) */}
{/* ヘッダー (ロゴ + 閉じるボタン) - mobile-navと一体でスライド */}
go("home")} style={{ cursor: "pointer" }}>
{/* 共通購入バナー (画像差し替え方式) */}
{/* Nav items - フォント圧縮で全項目見える */}
{NAV_ITEMS.map(item => {
const isContact = item.page === "contact";
if (isContact) {
return (
);
}
return (
{/* テキストエリア:
- accordionOnly=true → タップでアコーディオン開閉のみ (例: 上の山放牧場について)
- sub あり & accordionOnly なし → テキストタップで親ページに遷移 (例: 育てる牛の特徴)
- sub なし → タップで遷移
*/}
{
if (item.accordionOnly) {
setMobileExpanded(mobileExpanded === item.en ? null : item.en);
} else {
go(item.page);
}
}}
style={{ flex: 1, cursor: "pointer", paddingRight: 8 }}>
{item.ja}
{item.en}
{/* +/− 表示 (アコーディオン開閉専用ボタン) */}
{item.sub && (
setMobileExpanded(mobileExpanded === item.en ? null : item.en)}
style={{
width: 44, height: 44,
display: "flex", alignItems: "center", justifyContent: "center",
color: C.darkGreen, fontSize: 24, fontWeight: 300,
lineHeight: 1,
flexShrink: 0,
cursor: "pointer",
transition: "transform 0.3s",
}}>
{mobileExpanded === item.en ? "−" : "+"}
)}
{item.sub && mobileExpanded === item.en && (
{item.sub.map(s => (
go(s.page)}
style={{
padding: "12px 0",
fontFamily: "'Shippori Mincho', serif",
fontSize: 14, color: C.cream, cursor: "pointer",
display: "flex", gap: 10,
}}>
-
{s.ja}
))}
)}
);
})}
{/* SNS Links bottom */}
);
}
// ============ FOOTER ============
function Footer({ navigate }) {
const isMobile = useIsMobile();
const go = (p) => {
if (p === "home#news") {
navigate("home");
setTimeout(() => {
const el = document.getElementById("news");
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}, 100);
} else { navigate(p); }
};
return (
);
}
// ============ BUY BANNER (画像差し替え前提 / クライアント作成画像をここに) ============
function BuyBanner({ compact = false }) {
const isMobile = useIsMobile();
return (
);
}
// ============ UNIFIED CTA BUTTON (サイト全体で統一) ============
// 通常: 緑文字 + 緑ボーダー(.cta-dark)、ホバー: 緑背景 + cream文字に反転
// light: 暗背景の上で使う場合、cream文字 + cream半透明ボーダー、ホバー: cream背景 + 緑文字
function CTAButton({ children, onClick, light = false, center = false, arrow = true, fullWidth = false }) {
const isMobile = useIsMobile();
const shouldCenter = isMobile || center || fullWidth;
return (
);
}
// ============ CTA SECTION (共通CTAセクション: darkGreen背景, label+heading+body+button) ============
// この土地の環境ページの「Experience誘導」と同じデザイン。
// 「CTAセクション」として全ページで統一して使う。
function CTASection({ label, heading, body, buttonText, onClick }) {
const isMobile = useIsMobile();
return (
{label && (
{label}
)}
{heading}
{body}
{buttonText}
);
}
// ============ FOUNDER MESSAGE BLOCK (代表メッセージ統一コンポーネント) ============
function FounderMessageBlock({ children, dark = false }) {
const isMobile = useIsMobile();
return (
Message from Founder
{children}
代表 ・ 渡邊 強
);
}
// ============ INNER PAGE HERO ============
function InnerPageHero({ title, titleJa, subtitle, img }) {
const isMobile = useIsMobile();
// titleが空 → 日本語タイトルだけ大きく表示 (記事ページ等)
const titleOnlyJa = !title;
return (
{!titleOnlyJa && (
{title}
)}
{titleJa}
{subtitle && (
{subtitle}
)}
);
}
// ============ HOME PAGE ============
// ============ X (Twitter) 公式埋め込みウィジェット ============
// Twitter の widgets.js を読み込んでタイムラインを表示。
// SPA のページ遷移後にも再レンダリングされるよう twttr.widgets.load() を呼ぶ。
function XEmbedTimeline() {
useEffect(() => {
const SCRIPT_ID = "twitter-wjs";
// 初回のみ widgets.js を に挿入
if (!document.getElementById(SCRIPT_ID)) {
const s = document.createElement("script");
s.id = SCRIPT_ID;
s.async = true;
s.charset = "utf-8";
s.src = "https://platform.twitter.com/widgets.js";
document.body.appendChild(s);
} else if (window.twttr && window.twttr.widgets) {
// 既にロード済みなら再レンダリング
window.twttr.widgets.load();
}
}, []);
return (
);
}
// ============ HOMEPAGE ============
function HomePage({ navigate }) {
const isMobile = useIsMobile();
// ヒーロー 1-2秒切替 (MTG: ショート動画1-2秒で切替)
const heroImages = [imgs.hero1, imgs.hero2, imgs.hero3, imgs.hero4];
const [heroIdx, setHeroIdx] = useState(0);
const [videoReady, setVideoReady] = useState(false);
useEffect(() => {
const id = setInterval(() => setHeroIdx(i => (i + 1) % heroImages.length), 1800);
return () => clearInterval(id);
}, []);
// Our Story カード (A案: 3横並び+1横長下の雑誌風)
const pillars = [
{ num: "01", en: "ENVIRONMENT", ja: "環境", sub: "土地の環境", desc: "日本百名山・鳥海山の麓、標高500m。天然フィルターで研ぎ澄まされた水、満天の星空、多種多様な牧草を育む国定公園内の秘境。", page: "about-env", img: imgs.pillarEnv },
{ num: "02", en: "GRAZING WAGYU", ja: "食", sub: "放牧から生まれる牛肉", desc: "7〜10年という時間を放牧で育てた黒毛和牛「放牧経産牛」。噛むほどに凝縮された旨みと、牧草由来の甘い脂が特徴です。", page: "about-food", img: imgs.pillarFood },
{ num: "03", en: "EXPERIENCE", ja: "体験", sub: "体験する", desc: "牛がホスト、人はゲスト。牛たちの生活にそっとお邪魔するように、この秘境的な自然と向き合う時間を過ごしていただけます。", page: "events", img: imgs.pillarExp },
{ num: "04", en: "SOCIAL", ja: "地域課題", sub: "失われつつある草地と生態系", desc: "畜産農家の減少により、かつて共同で放牧されていた草地が荒廃。放牧を続けることが、地域の生態系を守ることに直結しています。", page: "about-social", img: imgs.pillarSocial },
];
// ニュース: note RSS から fetch (Cloudflare Pages Functions /api/news 経由)
// 失敗時はフォールバックとしてハードコードを表示
const NEWS_FALLBACK = [
{ date: "2026.04.20", title: "春の牧草が芽吹き始めました — 放牧開始の様子", url: "https://note.com/uenoyama_ranch/n/xxxxx1" },
{ date: "2026.03.15", title: "2026年度の体験 & イベントプログラムを公開しました", url: "https://note.com/uenoyama_ranch/n/xxxxx2" },
{ date: "2026.02.28", title: "秋田県内のレストランへ卸販売を開始しました", url: "https://note.com/uenoyama_ranch/n/xxxxx3" },
];
const [news, setNews] = useState(NEWS_FALLBACK);
useEffect(() => {
fetch("/api/news")
.then(r => r.ok ? r.json() : Promise.reject(new Error("status " + r.status)))
.then(data => {
if (Array.isArray(data) && data.length > 0) {
setNews(data.slice(0, 5).map(n => ({
date: formatNewsDate(n.date),
title: n.title,
url: n.url,
})));
}
})
.catch(err => console.warn("news API失敗、フォールバック使用:", err.message));
}, []);
return (
{/* === HERO: 動画 (/hero.mp4) → 失敗時はクロスフェード画像にフォールバック === */}
{/* 背景: クロスフェード画像 (動画が読み込まれていない間表示される) */}
{heroImages.map((src, i) => (
))}
{/* 前景: 動画 (再生可能になったらフェードイン) */}
{/* === 購入バナー (常時表示、ファーストビュー直下) === */}
{/* === ABOUT US (intro) === */}
{isMobile ? (
/* === モバイル: 見出し → 画像 → 本文 === */
{/* 見出し */}
About Us
100年先も続く畜産を
上の山放牧場で
{/* 画像 */}
{/* 本文 + CTA */}
秋田県にかほ市、鳥海山の麓にある「上の山放牧場」。この雄大な自然の中、黒毛和牛の繁殖業から牛肉の生産・販売、放牧場の体験会を行っています。
放牧という方法で、人と牛、そして自然が、それぞれの役割の中で共に生きるかたちを実践し、地域資源を活用した100年先も続く畜産・上の山放牧場を目指します。
navigate("about")}>
上の山放牧場について
About Us
100年先も続く畜産を
上の山放牧場で
秋田県にかほ市、鳥海山の麓にある「上の山放牧場」。この雄大な自然の中、黒毛和牛の繁殖業から牛肉の生産・販売、放牧場の体験会を行っています。
放牧という方法で、人と牛、そして自然が、それぞれの役割の中で共に生きるかたちを実践し、地域資源を活用した100年先も続く畜産・上の山放牧場を目指します。
navigate("about")}>
上の山放牧場について
)}
{/* === OUR STORY: 4分割雑誌風レイアウト (A案: 3横+1横長) === */}
Our Story
この土地での取り組み
食も、観光も、環境も、課題も
すべては同じ土地の上でつながっています
{/* Magazine grid (PC: 雑誌風 / Mobile: 縦積み) */}
{/* 1番 (左カラム上段, tall) */}
{/* 2番 (左カラム下段, tall) */}
{/* 3番 (右カラム縦長, portrait) */}
{/* 4番 (下段フルブリード, wide) */}
{/* === PHILOSOPHY BANNER === */}
Philosophy
牛を育て、草地を維持し、この土地をつないでいく。
365日24時間、大自然の中、
牛とその命に向き合い続けています。
navigate("cattle-philosophy")}>
生産への想い
{/* === NEWS (Note連携) + 公式SNS === */}
{/* News */}
{news.map((n, i) => (
))}
{/* 公式SNS */}
{/* X (Twitter) 公式埋め込みウィジェット - widgets.jsで自動レンダリング */}
);
}
// === Pillar card subcomponent === (雑誌風A案)
function PillarCard({ p, navigate, variant }) {
const isMobile = useIsMobile();
// variant: "tall" (左の上下それぞれ), "portrait" (右の縦長), "wide" (下の横長), モバイルはすべて "wide"
const v = isMobile ? "wide" : variant;
// アスペクト比 (PCのみ)
const aspect = isMobile
? "16/9"
: v === "tall" ? "16/9" // 上段の左 (上下に並ぶ2つ)
: v === "portrait" ? "4/5" // 上段の右 (縦長)
: "32/9"; // 下段 (横長フルブリード)
return (
navigate(p.page)}
style={{
cursor: "pointer",
position: "relative",
overflow: "hidden",
height: isMobile ? "auto" : "100%",
aspectRatio: isMobile ? aspect : "auto",
}}>
{/* 背景画像 */}
{/* 黒オーバーレイ (常時。ホバーで濃く) */}
{/* テキスト (左下配置) */}
{/* 番号 → 英語 (全variant共通サイズで統一) */}
{p.num}
{p.en}
{p.sub}
);
}
// ============ ABOUT PAGE (上の山放牧場について) ============
function AboutPage({ navigate }) {
const isMobile = useIsMobile();
const otherSections = [
{
num: "01", en: "ENVIRONMENT", ja: "土地の環境",
img: imgs.envMain,
body: "日本百名山・日本百景に選ばれた鳥海山の麓、標高500mに位置する約40ha（東京ドーム9個分）の放牧場。山頂から海まで直線距離わずか16km。日本の地質百選にも選ばれた多様な生態系を持つ、国定公園内の秘境です。",
link: "about-env", linkLabel: "環境について詳しく →",
},
{
num: "02", en: "GRAZING WAGYU", ja: "放牧から生まれる牛肉",
img: imgs.foodMain,
body: "放牧場の牧草（グラスフェッド）で10年以上育てた黒毛和牛の母牛「放牧経産牛」。噛むほどに肉汁があふれ、濃い赤身の味が特徴。県内外の飲食店からも「美味しい」と好評の独自ブランドです。",
link: "about-food", linkLabel: "牛肉について詳しく →",
},
{
num: "03", en: "EXPERIENCE", ja: "体験する",
img: imgs.eventsMain,
body: "普段は人の出入りがほとんどない秘境の放牧場に、体験会としてお招きしています。牛のいる生活に入り、放牧場の自然を感じたり、星空の下、焚火を囲みながら放牧経産牛を味わったり。特別な体験をお届けしています。",
link: "events", linkLabel: "体験 & イベント →",
},
{
num: "04", en: "SOCIAL", ja: "失われつつある草地と生態系",
img: imgs.socialMain,
body: "かつて地域の牛が共同で放牧されていたこの場所も、農家の減少とともに上の山放牧場が最後の1軒に。放牧地は年々荒廃し、絶滅危惧種イヌワシの生息環境も脅かされています。放牧を続けることが、地域の生態系と未来をつなぐことに直結しています。",
link: "about-social", linkLabel: "地域課題について詳しく →",
},
];
return (
{/* === 01 上の山放牧場について === */}
{isMobile ? (
/* === モバイル: 見出し → 画像 → 本文 === */
{/* 見出し */}
{/* 画像 (2枚縦並び) */}
{/* 本文 */}
農家の3代目である代表・渡邊強が、放牧場の美しい景色や、そこで力強く生きる牛に魅せられ、家業である和牛繁殖業を継ぎ、2023年に畜産部門を法人化。
「100年先も続く畜産・上の山放牧場」を目指し、ブランド牛になり得る子牛の生産と、10年以上放牧で育てた黒毛和牛を独自ブランド「放牧経産牛」として牛肉の販売、そして放牧場の自然や牛を感じられる体験会を行っております。
春は牛舎から6キロ離れた放牧場に牛を連れていき、秋まで過ごし、冬は牛舎に戻して大切に飼う。時には分娩に立会い、時には自分達で手がけた牛肉を届け、365日24時間、大自然の中で牛とその命に向き合い続けています。
牛が土を育て、土が草を育て、草が牛を育てる。そこに人が手を添えるように、地域資源を最大限活用した持続可能な畜産に取り組んでいます。
) : (
/* === PC: テキスト左 + 画像右 (フルブリード) === */
農家の3代目である代表・渡邊強が、放牧場の美しい景色や、そこで力強く生きる牛に魅せられ、家業である和牛繁殖業を継ぎ、2023年に畜産部門を法人化。
「100年先も続く畜産・上の山放牧場」を目指し、ブランド牛になり得る子牛の生産と、10年以上放牧で育てた黒毛和牛を独自ブランド「放牧経産牛」として牛肉の販売、そして放牧場の自然や牛を感じられる体験会を行っております。
春は牛舎から6キロ離れた放牧場に牛を連れていき、秋まで過ごし、冬は牛舎に戻して大切に飼う。時には分娩に立会い、時には自分達で手がけた牛肉を届け、365日24時間、大自然の中で牛とその命に向き合い続けています。
牛が土を育て、土が草を育て、草が牛を育てる。そこに人が手を添えるように、地域資源を最大限活用した持続可能な畜産に取り組んでいます。
)}
{/* === 代表挨拶セクション === */}
Message from Founder
代表挨拶
牛が可愛かった事、そして、雄大な自然が広がる放牧場のこの美しい風景に魅了された事。
それがこの場所で牛を飼いたいと思ったきっかけです。
この土地は僕にとってかけがえのない場所ですが、その風景は今失われつつあります。
これまで祖父や父、地域の先人が積み上げ、守ってきたこの地を、今度は自分たちが次の世代へ託していく。
それが自分たちの役割だと思っています。
この土地が生み出す恵みを、日本中、世界中の方に感じてもらえたら嬉しいです。
代表 ・ 渡邊 強
{/* === 山小屋セクション (左:昼/夜画像縦並び + 右:テキスト) === */}
{isMobile ? (
/* === タブレット以下: 見出し → 画像 → 本文 === */
{/* 見出し */}
{/* 画像 (昼/夜縦並び 同じ高さ, ラベル付き) */}
昼
夜
{/* 本文 */}
アルプスで見るような風情あるこの山小屋は、作業小屋として使われてきました。現在はMakuakeのクラウドファンディングプロジェクトで修繕を実施。「牛と放牧場を身近に」をテーマに、株式会社Q0のアーキテクトが内装デザインを監修しました。
小屋の中央には放牧場の道とつながっているような通路が通り、風が入り込み放牧場との一体感を感じられる設計。小屋の先には、夕日が沈む日本海、幻想的な森に囲まれた湖、鳥海山の伏流水が流れる川が続きます。
山小屋の中から牛が草を食べる様子を間近に観察できたり、焚火を囲みながら放牧経産牛を味わったり。この場所が、放牧場と皆さんをつなぐ拠点になります。
) : (
/* === PC: 左に画像縦並び / 右にテキスト === */
{/* 左: 昼/夜画像縦並び (同じ高さに統一, ラベル付き) */}
昼
夜
{/* 右: テキスト */}
Mountain Hut
放牧場の山小屋
アルプスで見るような風情あるこの山小屋は、作業小屋として使われてきました。現在はMakuakeのクラウドファンディングプロジェクトで修繕を実施。「牛と放牧場を身近に」をテーマに、株式会社Q0のアーキテクトが内装デザインを監修しました。
小屋の中央には放牧場の道とつながっているような通路が通り、風が入り込み放牧場との一体感を感じられる設計。小屋の先には、夕日が沈む日本海、幻想的な森に囲まれた湖、鳥海山の伏流水が流れる川が続きます。
山小屋の中から牛が草を食べる様子を間近に観察できたり、焚火を囲みながら放牧経産牛を味わったり。この場所が、放牧場と皆さんをつなぐ拠点になります。
)}
{/* データ4ブロック削除 (No.21) */}
{/* PC: 画像左の場合 */}
{!imageRight && (
)}
{/* テキスト */}
{sec.num} — {sec.en}
{sec.ja}
{sec.body}
navigate(sec.link)}
className="ix-link"
style={{
fontFamily: "'Noto Serif JP', serif", fontSize: 14,
letterSpacing: "0.18em", color: C.midGreen, cursor: "pointer",
borderBottom: `1px solid ${C.midGreen}`, paddingBottom: 2,
}}>
{sec.linkLabel}
{/* PC: 画像右の場合 (モバイル時は画像が上に来る) */}
{imageRight && (
)}
);
}
// ============ ENVIRONMENT PAGE ============
function AboutEnvPage({ navigate }) {
const isMobile = useIsMobile();
const seasons = [
{ season: "春", en: "Spring", img: imgs.spring,
desc: "新緑が芽吹き、山桜が咲き誇る。冬を越えた牛たちが、ホトトギスの鳴き声が響き渡る放牧場へ戻ってくる季節。目の前にはまだ雪化粧された鳥海山が見れる。牧草地に広がる淡い緑と、牛舎から6キロの道を迷わず、勢いよく駆け上がる牛たちの姿が春の訪れを告げます。"
},
{ season: "夏", en: "Summer", img: imgs.summer,
desc: "青々とした草木に囲まれ、いよいよ牛たちが広大な牧草地で力強く生きる季節。鳥海山から流れる雪解けの冷たい沢水と、豊富な牧草が牛たちを育みます。夏でも夜は涼しく、満天の星空と焚火の夜も格別です。"
},
{ season: "秋", en: "Autumn", img: imgs.autumn,
desc: "一面が紅葉に染まる絶景。鳥海山を背景に広がるオレンジと赤の世界。厳しい暑さを乗り越え、この時期は牛にとって過ごしやすく、多種多様な草を求め、放牧場の奥深くまで足を運びます。牛たちも栄養豊富な牧草を存分に食べ、冬に備えて栄養を蓄える時期です。"
},
{ season: "冬", en: "Winter", img: imgs.winter,
desc: "牛たちは牛舎に戻り、来たる春に備えます。雪に覆われた放牧場は、音一つ聞こえない白銀の世界。緑に囲まれた放牧場とはまた別の表情を見せてくれます。"
},
];
return (
{/* === 鳥海山の麓、国定公園の秘境 (左テキスト + 右画像フルブリード) === */}
{isMobile ? (
/* === モバイル: 見出し → 画像 → 本文 === */
{/* 見出し */}
Chokai Mountain
鳥海山の麓、国定公園の秘境
{/* 画像 */}
{/* 本文 */}
放牧場には鳥海山の土壌にある幾つもの天然フィルターで研ぎ澄まされた水が流れ、夜は満天の星空が眺められるほど空気が澄んでいます。
また、山頂から海まで直線距離わずか16キロという、日本でも珍しい地形が特徴的で、放牧場には海からのミネラルが届き、多種多様な牧草や木の葉を食べて育ちます。これらの環境が牛の健康、そして牛肉の美味しさにつながっています。
Chokai Mountain
鳥海山の麓、国定公園の秘境
放牧場には鳥海山の土壌にある幾つもの天然フィルターで研ぎ澄まされた水が流れ、夜は満天の星空が眺められるほど空気が澄んでいます。
また、山頂から海まで直線距離わずか16キロという、日本でも珍しい地形が特徴的で、放牧場には海からのミネラルが届き、多種多様な牧草や木の葉を食べて育ちます。これらの環境が牛の健康、そして牛肉の美味しさにつながっています。
)}
{/* === Facts (上の山放牧場についてページの4ボックスと同デザイン・同内容) === */}
{[
{ num: "40", unit: "ha", label: "放牧地面積", sub: "東京ドーム約9個分" },
{ num: "500", unit: "m", label: "標高", sub: "鳥海山の麓" },
{ num: "16", unit: "km", label: "山頂〜海岸", sub: "直線距離" },
{ num: "10+", unit: "年", label: "放牧の歴史", sub: "代表・渡邊強の実績" },
].map(d => (
{d.label}
{d.num}{d.unit}
{d.sub}
))}
{seasons.map((s, i) => (
{i % 2 !== 0 && (
)}
{s.season}
{s.en}
{s.desc}
{i % 2 === 0 && (
)}
))}
{/* Experience 誘導 */}
Experience
「牛がホスト、人はゲスト」
牛たちの生活にそっとお邪魔をするように、豊かで美しい時間が流れるこの秘境的な自然をぜひ体験しにきてください。（現在は、少人数の方に限ってご案内しています）
navigate("events")}>
体験会を見る
);
}
// ============ FOOD PAGE (食) ============
function AboutFoodPage({ navigate }) {
const isMobile = useIsMobile();
const isTabletOrBelow = useIsTabletOrBelow();
// 部位データ (MTG決定: バラを除く3部位 ロース/モモ/ウデ)
const parts = [
{ ja: "ロース", en: "Loin", img: imgs.meatLoin,
desc: "柔らかくバランスの良いサシを同時に味わえる高級部位。ステーキやすき焼きにぴったり。" },
{ ja: "モモ", en: "Round", img: imgs.meatMomo,
desc: "凝縮された旨味をもつこの部位は、焼肉やローストビーフで味わってほしい、最もオススメな部位です。" },
{ ja: "ウデ", en: "Shoulder Clod", img: imgs.meatUde,
desc: "放牧場を駆け回りよく動かした筋肉の香ばしさを感じられる部位。赤身中心から、サシがバランスよく入った部位まで多種多様で、焼肉からステーキまで楽しめます。" },
];
return (
{/* Taste Profile */}
{isTabletOrBelow ? (
/* === タブレット以下: 見出し → 画像 → 本文 === */
Taste Profile
噛むほどに肉汁が広がる、
凝縮された旨み
上の山放牧場の牛は、7〜10年という時間を「放牧」で育ち、牛肉になります。一般的な牛は2〜3年で出荷される中、長い時間をかけて育つことで、噛めば噛むほど肉の奥から凝縮された旨味が溢れる、赤身の濃い味わいになるのが大きな特徴です。
もう一つの特徴は、飼料です。一般的な牛が穀物飼料を中心に育つのに対し、放牧経産牛は野山を駆け回り、多種多様な牧草を食べて育ちます。その影響で、自然の草に含まれる栄養素が脂に溶け込み、黄色く、ミルキーな甘みを持つ脂に。
また、黒毛和牛としての遺伝子の力により、放牧であっても、ロースには細かく優しいサシが入り、胃もたれしない美味しさです。県内外の飲食店でも扱っていただき、「美味しい」という声をいただいてきました。
) : (
/* === PC: 画像左 + テキスト右 (フルブリード) === */
Taste Profile
噛むほどに肉汁が広がる、
凝縮された旨み
上の山放牧場の牛は、7〜10年という時間を「放牧」で育ち、牛肉になります。一般的な牛は2〜3年で出荷される中、長い時間をかけて育つことで、噛めば噛むほど肉の奥から凝縮された旨味が溢れる、赤身の濃い味わいになるのが大きな特徴です。
もう一つの特徴は、飼料です。一般的な牛が穀物飼料を中心に育つのに対し、放牧経産牛は野山を駆け回り、多種多様な牧草を食べて育ちます。その影響で、自然の草に含まれる栄養素が脂に溶け込み、黄色く、ミルキーな甘みを持つ脂に。
また、黒毛和牛としての遺伝子の力により、放牧であっても、ロースには細かく優しいサシが入り、胃もたれしない美味しさです。県内外の飲食店でも扱っていただき、「美味しい」という声をいただいてきました。
)}
{/* 肉質の特徴 (3→2カード: 赤身/脂) */}
{[
{ title: "赤身の旨み", en: "Red Meat", img: imgs.meatRed,
desc: "長い放牧生活で鍛えられた筋肉が育む、引き締まった赤身。噛むほどに、肉の奥から凝縮された肉汁があふれます。" },
{ title: "グラスフェッドの脂", en: "Grass-fed Fat", img: imgs.meatFat,
desc: "牧草由来のオメガ3脂肪酸が豊富な黄色みがかった脂。ミルキーな甘さと、自然な香りが特徴です。" },
].map(c => (
{c.en}
{c.title}
{c.desc}
))}
{/* 部位セクション (MTG決定: 新規追加、図に色塗り+常時説明表示) */}
Parts
特徴が色濃く現れる
放牧経産牛の部位
同じ牛でも、部位によって味も硬さも脂の質も全て違い、それぞれにあった調理の方法があります。
ここでは味わいという点で大きく３つに分けてご紹介します。
{/* 部位図 (クライアント作成画像差し替え方式 - imgs.partsDiagramを差し替え) */}
{/* 部位カード: 雑誌風グリッド (左:1番縦長/画像60%テキスト40%, 右上下:2番3番 横並び画像+テキスト50/50) */}
{/* 左カラム: ロース (画像上60% + テキスト下40%) */}
{parts[0].en}
{parts[0].ja}
{parts[0].desc}
{/* 右上: モモ (左画像50% + 右テキスト50%) */}
{parts[1].en}
{parts[1].ja}
{parts[1].desc}
{/* 右下: ウデ (左画像50% + 右テキスト50%) */}
{parts[2].en}
{parts[2].ja}
{parts[2].desc}
{/* 購入バナー + 卸販売CTA (中央揃えに統一) */}
For Business
卸販売のご相談
飲食店様への卸販売のご相談を承っております。
お気軽にお問い合わせください。
navigate("contact")}>
お問い合わせ
);
}
// ============ EVENTS PAGE (体験 & イベント) ============
function EventsPage({ navigate, eventsData }) {
const isMobile = useIsMobile();
const events = eventsData || EVENTS_DATA;
return (
{/* 牛がホストで人はゲスト */}
{isMobile ? (
/* === モバイル: 見出し → 画像 → 本文 === */
{/* 見出し */}
Our Philosophy
「牛がホスト、人はゲスト」
{/* 画像 */}
{/* 本文 */}
ここは観光地ではなく、放牧場です。牛が静かに生きる秘境の自然へ、人が一時的におじゃまする体験です。
この土地の風や草、自然を五感で感じていただきながら、牛のいる風景を見たり、同じ大地で育った牛肉を堪能したり。時には、放牧場の開拓をしたり。そんな時間を過ごしていただける、いくつかの「関わり」を用意しています。
この体験は、失われつつある放牧場を知る入口でもあります。牛と人が共に力を合わせ、この風景を100年先も残る場所にしていきます。
Our Philosophy
「牛がホスト、人はゲスト」
ここは観光地ではなく、放牧場です。牛が静かに生きる秘境の自然へ、人が一時的におじゃまする体験です。
この土地の風や草、自然を五感で感じていただきながら、牛のいる風景を見たり、同じ大地で育った牛肉を堪能したり。時には、放牧場の開拓をしたり。そんな時間を過ごしていただける、いくつかの「関わり」を用意しています。
この体験は、失われつつある放牧場を知る入口でもあります。牛と人が共に力を合わせ、この風景を100年先も残る場所にしていきます。
)}
{/* ツアー一覧 (microCMS連携予定、現状ダミー) */}
{events.map((e, i) => (
navigate("event-article", e)}
style={{
display: "grid", gridTemplateColumns: "280px 1fr auto",
background: C.warmGray,
cursor: "pointer", overflow: "hidden",
}}>
{e.spots}
{e.status === "受付中" ? "詳細・申込 →" : e.status}
))}
);
}
// ============ EVENT ARTICLE PAGE (体験&イベント詳細 / microCMS連携前提) ============
function EventArticlePage({ event, navigate }) {
const isMobile = useIsMobile();
if (!event) {
return (
イベント情報が見つかりません。
navigate("events")}>
一覧へ戻る
);
}
return (
{/* Meta情報 */}
開催日
{event.date}
申し込み期間
{event.applyPeriod}
カテゴリ
{event.category}
定員
{event.spots}
ステータス
{event.status}
{/* 本文 (microCMSから取得予定のプレースホルダ) */}
プログラム概要
鳥海山麓の上の山放牧場で開催する特別なプログラム。静かな山の空気と、牛たちの生活の気配を身近に感じながら、この土地ならではの時間を過ごしていただきます。
「牛がホスト、人はゲスト」。私たちはこの土地の案内人として、皆様を放牧場の奥深くへとお連れします。
※ このページはPhase 1のプレースホルダです。本番公開時はmicroCMSで管理されたイベント詳細本文 / 集合場所 / 持ち物 / 料金などが表示されます。
{/* 申込CTA - リンクはCMSのapplyUrlフィールドで記事ごと設定 (Googleフォーム想定、未設定時は空白) */}
{event.status === "受付中" ? (
Apply
この体験会に参加する
{
if (event.applyUrl) {
window.open(event.applyUrl, "_blank", "noopener,noreferrer");
}
}}>
お申し込みはこちら
) : (
このプログラムは現在 {event.status} です
)}
{/* 一覧へ戻る */}
navigate("events")} className="ix-link"
style={{
cursor: "pointer", fontFamily: "'Noto Serif JP', serif",
fontSize: 14, letterSpacing: "0.2em", color: C.midGreen,
borderBottom: `1px solid ${C.midGreen}`, paddingBottom: 2,
}}>
← 体験 & イベント一覧へ
);
}
// ============ SOCIAL PAGE (地域課題) ============
function AboutSocialPage({ navigate }) {
const isMobile = useIsMobile();
return (
{/* === 年々失われていく、放牧場と生態系 (左テキスト + 右画像フルブリード) === */}
{isMobile ? (
/* === モバイル: 見出し → 画像 → 本文 === */
{/* 見出し */}
The Problem
年々失われていく、放牧場と生態系
{/* 画像 */}
{/* 本文 */}
かつて、この場所は草原が広がる見晴らしの良い場所で、地域の農家が共同で牛を放牧し、美しい景観が保たれていました。しかし人口減少と農家の高齢化により放牧頭数が激減。現在は、私たちが最後の1軒となりました。
管理が行き届かなくなり、放牧場全体が灌木やノイバラなどに侵食され、今も放牧面積が減少。その結果、景観の喪失に加え、生態系にも影響を与えています。
また、鳥海山近辺には絶滅危惧種の「イヌワシ」が4羽生息しており、草原である放牧場を狩場にしていたと言われています。しかし、草原が失われ、藪になった事で、ウサギやヘビなどの獲物を見つけることができず、2羽が姿を消しました。
この美しい放牧場と生態系、そして先人たちが築き上げた歴史や文化を100年先の未来につなぐ事。それが、上の山放牧場という場所で放牧に取り組む大きな理由です。
The Problem
年々失われていく、放牧場と生態系
かつて、この場所は草原が広がる見晴らしの良い場所で、地域の農家が共同で牛を放牧し、美しい景観が保たれていました。しかし人口減少と農家の高齢化により放牧頭数が激減。現在は、私たちが最後の1軒となりました。
管理が行き届かなくなり、放牧場全体が灌木やノイバラなどに侵食され、今も放牧面積が減少。その結果、景観の喪失に加え、生態系にも影響を与えています。
また、鳥海山近辺には絶滅危惧種の「イヌワシ」が4羽生息しており、草原である放牧場を狩場にしていたと言われています。しかし、草原が失われ、藪になった事で、ウサギやヘビなどの獲物を見つけることができず、2羽が姿を消しました。
この美しい放牧場と生態系、そして先人たちが築き上げた歴史や文化を100年先の未来につなぐ事。それが、上の山放牧場という場所で放牧に取り組む大きな理由です。
)}
{/* 上空比較 1970年代 vs 2020年代 (MTG決定: 国土地理院出典明記) */}
Aerial Comparison
放牧場の今と昔
上空から見た放牧場の変化。農家の減少とともに、かつて見晴らしのよい草原が広がっていた場所が、灌木やノイバラに侵食されていった様子が一目でわかります。
{/* 1970年代 */}
草原が広がる見晴らしの良い放牧場。地域の農家が共同で多くの牛を放牧し、イヌワシが自由に狩りをする豊かな生態系が保たれていた。
{/* 2020年代 */}
2020年代
一見緑が増えたように感じるが、実態は牛も入れない荒地が拡大
一見緑が増えたように感じるが、実態は人も牛も入れない荒地が拡大し、草原の面積が年々縮小。放牧農家は現在1軒のみとなり、イヌワシも4羽から2羽へと減少した。
出典：国土地理院ウェブサイト
{/* 循環図 + 解説3カード */}
Our Solution
放牧が生態系と地域をつなぐ
{/* クライアント作成の循環図画像 (imgs.cycleDiagramを差し替え) */}
{/* 3カード: 循環型農業 / 生態系の保護 / 関係人口の創出 */}
{[
{
title: "循環型農業",
body: "牛が草を食み、糞をし、その糞が土に還り、また草が育つ。この土地では、そうした循環が起きています。冬の間に牛舎で出た糞尿も堆肥として水田や草地に戻し、再び牛の飼料として育てていく事で、持続可能な農業モデルに挑戦しています。",
},
{
title: "生態系の保護",
body: "このまま、放牧をやめると草地はやがて失われます。牛が草を食べ、人が手を入れることで、はじめてこの風景は保たれています。それは結果として景観だけでなく、多くの生きものが暮らす環境を支えています。",
},
{
title: "関係人口の創出",
body: "この場所は、人が関わることで維持されています。放牧場や山小屋での時間を通して、この土地を知り、関わる人を増やしていく。単なる体験ではなく、100年先にもこの風景を残すための、仲間づくりでもあります。",
},
].map((c, i) => (
))}
{/* CTAセクション (darkGreen背景) */}
この土地を知り、関わる人を増やすことが、
100年先へつなぐ力になると考えています。
今、この"瞬間"にも放牧場では静かで美しい時間が流れています
ー 渡邊 強(代表)
navigate("events")}>
体験 & イベントに参加する
);
}
// ============ CATTLE OVERVIEW PAGE (育てる牛の特徴) ============
function CattlePage({ navigate }) {
const features = [
{ num: "01", en: "Grazing Wagyu", ja: "放牧経産牛とは?",
desc: "経産牛とは子牛を産み育てる母牛の事。そんな経産牛を上の山放牧場で長期にわたり育て、独自ブランド「放牧経産牛」として、牛肉を販売しています。",
img: imgs.cattleWhatCard, page: "cattle-what" },
{ num: "02", en: "Our Philosophy", ja: "生産への想い",
desc: "牛の誕生から牛肉の出荷。その命と向き合い、牛の基となる牧草の生産まで、手がける思いをお伝えします",
img: imgs.cattlePhiloCard, page: "cattle-philosophy" },
];
return (
{features.map(f => (
navigate(f.page)}
style={{ background: C.warmGray, cursor: "pointer", overflow: "hidden", height: "100%", display: "flex", flexDirection: "column" }}>
{f.num} — {f.en}
{f.ja}
{f.desc}
READ MORE →
))}
);
}
// ============ CATTLE: WHAT (放牧経産牛とは?) ============
function CattleWhatPage({ navigate }) {
const isMobile = useIsMobile();
return (
{/* === DEFINITION (左テキスト + 右画像) === No.67 */}
{/* PC: 左にHOUBOKU+見出し+本文、右に写真。 モバイル: 見出し→写真→本文の順 */}
{isMobile ? (
{/* 1. 見出し */}
HOUBOKU KEISANGYU
経産牛とは、
子牛を産んだ母牛
{/* 2. 写真 */}
{/* 3. 本文 */}
経産牛とは子牛を産む母牛の事。だいたい7〜10年以上生きる牛です。この経産牛を、上の山放牧場で長期間放牧し、育てたのが「放牧経産牛」。※「放牧経産牛」は上の山放牧場の独自ブランドです。
一般的に牛は年数を重ねるほど、肉としての評価が下がるとされています。しかし経産牛は肉の味が濃くて「美味しい」というのが業界では知られている事。
鳥海山の大自然の中で草を食み、季節を越え、時間を重ね、力強く生き抜いた放牧経産牛はまさに野生。そして、ただの家畜ではなく、この土地の一部であり、守る存在でもあります。
最初に放牧経産牛を食べた時の感動は今でも忘れません。噛めば噛むほどガツンと肉汁がでてくる。脂もあっさりし、煮込んでも肉の形が崩れず味はそのまま残る。
市場評価とは別の軸でたしかな"美味しさ"があり、価値がある。そういう思いでこれまで販売をしてきました。
{/* 左: DEFINITION (テキスト) */}
HOUBOKU KEISANGYU
経産牛とは、
子牛を産んだ母牛
経産牛とは子牛を産む母牛の事。だいたい7〜10年以上生きる牛です。この経産牛を、上の山放牧場で長期間放牧し、育てたのが「放牧経産牛」。※「放牧経産牛」は上の山放牧場の独自ブランドです。
一般的に牛は年数を重ねるほど、肉としての評価が下がるとされています。しかし経産牛は肉の味が濃くて「美味しい」というのが業界では知られている事。
鳥海山の大自然の中で草を食み、季節を越え、時間を重ね、力強く生き抜いた放牧経産牛はまさに野生。そして、ただの家畜ではなく、この土地の一部であり、守る存在でもあります。
最初に放牧経産牛を食べた時の感動は今でも忘れません。噛めば噛むほどガツンと肉汁がでてくる。脂もあっさりし、煮込んでも肉の形が崩れず味はそのまま残る。
市場評価とは別の軸でたしかな"美味しさ"があり、価値がある。そういう思いでこれまで販売をしてきました。
{/* 右: 写真 */}
{[
{
title: "①7~10年以上放牧で育つ",
desc: "長い年月、放牧場で育つ事で牛肉に旨味が凝縮されます。"
},
{
title: "②牧草中心(グラスフェッド)",
desc: "飼料の9割以上を放牧場の多種多様な草木と自家産の牧草飼料で育つ事で、一般的な牛肉と全く違う味わいになります。"
},
{
title: "③黒毛和牛の母牛",
desc: "ブランド牛の基となる子牛を生産する一方で、放牧場を守っていくパートナーでもあります。"
},
].map((f, i) => (
))}
Why Grass-fed
なぜ、牧草飼育なのか?
現在、牛の飼料である穀物はほとんどを輸入に依存しており、世界情勢に左右されやすい構造があります。穀物飼料での飼育には多くのメリットがある一方、輸入に頼らない牛肉生産も大切。
幼い頃からそうした課題を目の当たりにしてきた代表の渡邊の思いから、放牧を活用し地域資源を最大限活用した牛肉生産として「放牧経産牛」が誕生しました。
牧草中心で育てた牛肉は「グラスフェッドビーフ」と呼ばれます。
{/* CTAセクション (食ページへの導線) */}
navigate("about-food")}
/>
);
}
// ============ CATTLE: PHILOSOPHY (生産への想い) ============
function CattlePhilosophyPage({ navigate }) {
const isMobile = useIsMobile();
const isNarrow = useIsNarrow();
// 4テーマカード (画像下にテキストエリア配置)
const themes = [
{ num: "01", en: "ENVIRONMENT", ja: "土地の環境",
desc: "鳥海山麓の水・草・土が、牛と肉を育む。",
page: "about-env", img: imgs.pillarEnv },
{ num: "02", en: "GRAZING WAGYU", ja: "放牧から生まれる牛肉",
desc: "7〜10年と多種の牧草が生む味わい。",
page: "about-food", img: imgs.pillarFood },
{ num: "03", en: "EXPERIENCE", ja: "体験する",
desc: "牛がホスト、人はゲスト。生産を間近に。",
page: "events", img: imgs.pillarExp },
{ num: "04", en: "SOCIAL", ja: "草地と生態系",
desc: "放牧が、地域の草地と生態系を守る。",
page: "about-social", img: imgs.pillarSocial },
];
return (
{/* メッセージ: 見出し → 画像 → 本文 */}
命と向き合い、
責任をもって最後まで届ける
私たちは、出産に立ち合い、毎日顔を合わせ、牛肉になるまで携わります。牛には一頭一頭名前があり、それぞれ性格も違います。臆病な牛もいれば、喧嘩っ早い牛、人懐っこい牛もいます。
その牛がどんな肉になり、誰に食べてもらい、どんな感想をいただいたか。誕生から向き合ってきた命だからこそ、その背景も届け、最後の「おいしい」の一言まで責任をもつ。それが私たちの思いです。
「牧草」にも強いこだわりがあります。土の栄養素から分析し、天候を見ながら収穫時期を見極め、定期的な栄養分析をすることで、牛にとって最適な牧草生産に努めています。
{/* No.72 牧草の写真 (philoBeefと同サイズ・中央配置) */}
{/* 4テーマカード (画像 + 下にテキストエリア) */}
{themes.map(t => (
navigate(t.page)}
style={{ cursor: "pointer", display: "flex", flexDirection: "column", overflow: "hidden" }}>
{/* 画像 */}
{/* テキストエリア (画像の下) */}
{t.num} · {t.en}
{t.ja}
READ MORE →
))}
{/* CTAセクション (darkGreen背景、地域課題と同じスタイル) */}
Learn More
上の山放牧場とは
放牧場の環境・食・地域課題への取り組みを、さらに詳しくご紹介しています。
navigate("about")}>
上の山放牧場とは
);
}
// ============ COMPANY PAGE (会社概要) ============
function CompanyPage() {
return (
Corporate Profile
会社概要
秋田県にかほ市、鳥海山の麓、「上の山放牧場」で黒毛和牛の育成と牛肉の販売、放牧場の体験会を運営しています。100年先も続く畜産・上の山放牧場をミッションに地域資源を最大限活用した、持続可能な畜産を様々な方向から探り、人と牛、自然が共に生きる未来を目指します。卸販売のご相談も承っています。
{[
{ label: "会社名", val: "株式会社上の山放牧場" },
{ label: "英語表記", val: "Uenoyama Ranch, Inc." },
{ label: "設立", val: "2023年" },
{ label: "代表取締役", val: "渡邊 強" },
{ label: "所在地", val: "〒018-0151 秋田県にかほ市象潟町横岡字目貫谷地1-10" },
{ label: "事業内容", val: "黒毛和牛の繁殖業 / 放牧経産牛の生産・販売 / 放牧場の体験会運営" },
{ label: "放牧地面積", val: "約40ha（東京ドーム約9個分）" },
].map(r => (
))}
{/* SNS (YouTube削除 MTG決定: Instagram/X/noteのみ) */}
公式SNS
{[
{ name: "Instagram", handle: "@_tuyoponusi_", url: SOCIAL.instagram, icon: SVG_INSTAGRAM(28) },
{ name: "X", handle: "@tuyosiusi", url: SOCIAL.x, icon: SVG_X(24) },
{ name: "note", handle: "@tuyosiusi", url: SOCIAL.note, icon: SVG_NOTE(26) },
].map(s => (
))}
{/* アクセスセクションは削除 (MTG決定) */}
);
}
// ============ CONTACT PAGE (お問い合わせ) ============
// ============ PRIVACY POLICY PAGE (プライバシーポリシー) ============
function PrivacyPage({ navigate }) {
return (
株式会社上の山放牧場(以下、「当社」)は、当社が運営するウェブサイト(以下、「本サイト」)におけるユーザーの個人情報の取り扱いについて、以下のとおりプライバシーポリシー(以下、「本ポリシー」)を定めます。
{[
{
title: "1. 個人情報の定義",
body: "本ポリシーにおける「個人情報」とは、個人情報保護法に定める個人情報を指し、生存する個人に関する情報であって、当該情報に含まれる氏名、生年月日、住所、電話番号、連絡先その他の記述等により特定の個人を識別できるものをいいます。",
},
{
title: "2. 個人情報の取得",
body: "当社は、本サイトのお問い合わせフォーム等を通じて、お名前、会社名、電話番号、メールアドレス、お問い合わせ内容など、サービス提供に必要な範囲で個人情報を取得します。",
},
{
title: "3. 個人情報の利用目的",
body: "当社は、取得した個人情報を以下の目的で利用します。\n・お問い合わせへのご返信・対応のため\n・卸販売、ツアー・イベント、メディア取材等のご相談にお応えするため\n・当社からのお知らせ、関連情報のご提供のため\n・本サイトおよびサービスの改善・新規開発のため\n・上記利用目的に付随する目的のため",
},
{
title: "4. 個人情報の第三者提供",
body: "当社は、法令に基づく場合およびご本人の同意がある場合を除き、取得した個人情報を第三者に提供しません。ただし、業務委託先に対し、利用目的の達成に必要な範囲内で個人情報を提供する場合があります。この場合、当社は委託先における個人情報の適切な取り扱いについて監督します。",
},
{
title: "5. 個人情報の管理",
body: "当社は、個人情報の正確性および安全性確保のために、適切なセキュリティ対策を実施し、個人情報への不正アクセス、紛失、破壊、改ざんおよび漏えい等を防止するために必要かつ適切な措置を講じます。",
},
{
title: "6. 個人情報の開示・訂正・利用停止",
body: "ご本人から個人情報の開示、訂正、削除、利用停止のご要望があった場合は、ご本人であることを確認の上、合理的な範囲で速やかに対応いたします。お問い合わせは本サイトのお問い合わせフォームよりご連絡ください。",
},
{
title: "7. Cookie等の利用",
body: "本サイトでは、より良いサービスの提供のためにCookie等の技術を利用する場合があります。Cookieにより取得する情報には個人を特定する情報は含まれません。ブラウザの設定によりCookieの受け取りを拒否することも可能です。",
},
{
title: "8. プライバシーポリシーの変更",
body: "当社は、必要に応じて本ポリシーを変更することがあります。変更後のプライバシーポリシーは、本サイトに掲載した時点から効力を生じるものとします。",
},
{
title: "9. お問い合わせ窓口",
body: (
<>
本ポリシーに関するお問い合わせは、本サイトの { e.preventDefault(); navigate("contact"); }} style={{ color: C.midGreen, textDecoration: "underline", cursor: "pointer" }}>お問い合わせフォームよりご連絡ください。
株式会社上の山放牧場
〒018-0151 秋田県にかほ市象潟町横岡字目貫谷地1-10
),
},
].map((s, i) => (
))}
制定日: 2026年5月6日
);
}
// ============ CONTACT PAGE (お問い合わせ) ============
function ContactPage({ navigate }) {
const [form, setForm] = useState({
name: "", company: "", phone: "", email: "", category: "", message: "",
privacy: false,
});
const [sent, setSent] = useState(false);
return (