*
* 2027 農家・直売所サバイバル LP：操作用JavaScript
*
* 対応HTML：sanchoku_lp_classic_editor_body.html
* 設置場所：子テーマ、またはコード挿入プラグインのフッター領域
* このファイルは外部ライブラリを使用しません。
*/
(function () {
‘use strict’;

function initializeSanchokuLp() {
var root = document.getElementById(‘sanchoku-lp’);
if (!root || root.dataset.sanchokuInitialized === ‘true’) {
return;
}
root.dataset.sanchokuInitialized = ‘true’;

var formatter = new Intl.NumberFormat(‘ja-JP’);

function getElement(id) {
return root.querySelector(‘#’ + id);
}

function setText(id, value) {
var element = getElement(id);
if (element) {
element.textContent = value;
}
}

function readNumber(element, fallback) {
if (!element) {
return fallback;
}
var value = Number.parseFloat(element.value);
return Number.isFinite(value) ? value : fallback;
}

function formatAmount(value) {
return formatter.format(Math.round(value));
}

function formatPercent(value) {
return value.toFixed(1) + ‘%’;
}

/* 生存目標シミュレーター */
var targetAmountInput = getElement(‘sanchoku-target-amount’);
var gpRateInput = getElement(‘sanchoku-gp-rate-input’);
var gpRateSlider = getElement(‘sanchoku-gp-rate-slider’);
var baseSalesInput = getElement(‘sanchoku-base-sales-input’);

function calculateSales() {
var targetAmount = Math.max(0, readNumber(targetAmountInput, 0));
var gpRatePercent = Math.min(99, Math.max(1, readNumber(gpRateInput, 80)));
var baseSales = Math.max(1, readNumber(baseSalesInput, 1));
var taxRate = 0.01;
var gpRate = gpRatePercent / 100;
var denominator = gpRate + taxRate;
var requiredSales = denominator > 0 ? targetAmount / denominator : 0;
var increasePercent = ((requiredSales / baseSales) – 1) * 100;

if (gpRateSlider) {
gpRateSlider.value = String(gpRatePercent);
}

setText(‘sanchoku-required-sales’, formatAmount(requiredSales));
setText(‘sanchoku-display-base-sales’, formatAmount(baseSales));
setText(‘sanchoku-increase-percent’, formatPercent(increasePercent));
setText(‘sanchoku-calc-target’, formatAmount(targetAmount));
setText(‘sanchoku-calc-gp’, gpRate.toFixed(2));
}

if (targetAmountInput) {
targetAmountInput.addEventListener(‘input’, calculateSales);
}
if (gpRateInput) {
gpRateInput.addEventListener(‘input’, calculateSales);
}
if (baseSalesInput) {
baseSalesInput.addEventListener(‘input’, calculateSales);
}
if (gpRateSlider) {
gpRateSlider.addEventListener(‘input’, function () {
if (gpRateInput) {
gpRateInput.value = gpRateSlider.value;
}
calculateSales();
});
}
calculateSales();

/* 「三重苦」タブ */
var sufferings = {
‘1’: {
title: ‘第一の苦：構造的な手取り減少’,
text: ‘農家が野菜を出荷して受け取る代金に含まれる消費税が8%から1%へ。これまで「クッション」として経営を支えていた預かり消費税分がほぼ消滅し、ダイレクトに農家の手取りが減少します。’
},
‘2’: {
title: ‘第二の苦：経費負担の高止まり’,
text: ‘肥料、農薬、燃料、包装資材。農作物を「作る」ために必要なコストの消費税は10%のまま据え置きです。10%で支払い、1%で預かる。この極端な逆ざや構造が利益を圧縮します。’
},
‘3’: {
title: ‘第三の苦：価格転嫁の困難性’,
text: ‘消費者の節約志向が強い中、減税分をそのまま値上げに転嫁するのは至難の業です。競合する他店との価格競争もあり、自助努力だけで損失を埋め合わせるには限界があります。’
}
};

var sufferingButtons = root.querySelectorAll(‘[data-suffering-id]’);
var sufferingDetail = getElement(‘sanchoku-suffering-detail’);

function activateSuffering(id) {
var item = sufferings[id];
if (!item) {
return;
}

setText(‘sanchoku-detail-title’, item.title);
setText(‘sanchoku-detail-text’, item.text);

sufferingButtons.forEach(function (button) {
var isActive = button.dataset.sufferingId === id;
button.classList.toggle(‘is-active’, isActive);
button.setAttribute(‘aria-selected’, String(isActive));
if (isActive && sufferingDetail) {
sufferingDetail.setAttribute(‘aria-labelledby’, button.id);
}
});
}

sufferingButtons.forEach(function (button) {
button.addEventListener(‘click’, function () {
activateSuffering(button.dataset.sufferingId);
});
});

/* 「経営改善」タブ */
var strategies = {
fee: {
title: ‘直売所の販売手数料体系の見直し’,
desc: ‘生産者の手取りを守るため、店舗側の運営努力とセットで手数料体系を柔軟に検討。共倒れを防ぐための「パートナーシップ」を再構築する必要があります。’,
tips: [
‘出荷頻度や品質に応じた段階的手数料の導入’,
‘資材の共同購入によるコストダウンの店舗支援’,
‘委託販売から一部買取への移行シミュレーション’
],
icon: ‘1’
},
value: {
title: ‘高付加価値商品のブランディング’,
desc: ‘「安さ」ではなく「価値」で選ばれる商品づくり。特定の栽培方法や物語性を付与し、価格競争から脱却することで利益率を確保します。’,
tips: [
‘生産者の顔が見えるストーリーの徹底した掲示’,
‘希少品種や地域伝統野菜のブランド化’,
‘有機・特別栽培など認証による差別化’
],
icon: ‘2’
},
process: {
title: ‘加工品比率の向上’,
desc: ‘生鮮品は1%ですが、一部の加工品は付加価値を高めることで収益源となります。また、加工によって保存性を高め、販売機会を最大化します。’,
tips: [
‘店舗内加工によるB級品のアップサイクル’,
‘自社ブランドジャムや乾燥野菜の開発’,
‘ギフト需要を狙った詰め合わせセット’
],
icon: ‘3’
},
loss: {
title: ‘廃棄ロスの削減’,
desc: ‘捨てていたものが利益に変わります。需要予測の精度向上や、売れ残りを出さない仕組みづくりにより、手元に残る粗利を最大化します。’,
tips: [
‘AIやデータを用いた出荷量の最適化指導’,
‘閉店前タイムセールやサブスクリプションの導入’,
‘堆肥化など、廃棄コストを抑える循環の構築’
],
icon: ‘4’
},
sales: {
title: ‘売れる売場づくりによる販売量増’,
desc: ‘客単価と販売数量を増やすことで、1単位あたりの利益減少を「数」でカバーします。ワクワクする売場は消費者の購買意欲を刺激します。’,
tips: [
‘レシピ提案とセットにしたクロスMDの実施’,
‘五感を刺激する試食・実演販売の強化’,
‘QRコードを用いた生産現場の動画公開’
],
icon: ‘5’
}
};

var strategyButtons = root.querySelectorAll(‘[data-strategy-key]’);
var strategyPanel = getElement(‘sanchoku-strategy-panel’);
var strategyTips = getElement(‘sanchoku-strategy-tips’);

function activateStrategy(key) {
var strategy = strategies[key];
if (!strategy) {
return;
}

setText(‘sanchoku-strategy-icon’, strategy.icon);
setText(‘sanchoku-strategy-title-text’, strategy.title);
setText(‘sanchoku-strategy-desc’, strategy.desc);

if (strategyTips) {
strategyTips.replaceChildren();
strategy.tips.forEach(function (tip) {
var item = document.createElement(‘li’);
item.textContent = tip;
strategyTips.appendChild(item);
});
}

strategyButtons.forEach(function (button) {
var isActive = button.dataset.strategyKey === key;
button.classList.toggle(‘is-active’, isActive);
button.setAttribute(‘aria-selected’, String(isActive));
if (isActive && strategyPanel) {
strategyPanel.setAttribute(‘aria-labelledby’, button.id);
}
});
}

strategyButtons.forEach(function (button) {
button.addEventListener(‘click’, function () {
activateStrategy(button.dataset.strategyKey);
});
});

/* 税率比較グラフ：Canvas APIで描画（外部ライブラリ不要） */
var taxChartCanvas = getElement(‘sanchoku-tax-chart’);

function drawTaxChart() {
if (!taxChartCanvas || !taxChartCanvas.getContext) {
return;
}

var canvasParent = taxChartCanvas.parentElement;
var cssWidth = Math.max(300, Math.round((canvasParent && canvasParent.clientWidth) || taxChartCanvas.clientWidth || 650));
var cssHeight = 350;
var pixelRatio = Math.min(window.devicePixelRatio || 1, 2);
var context = taxChartCanvas.getContext(‘2d’);

taxChartCanvas.width = cssWidth * pixelRatio;
taxChartCanvas.height = cssHeight * pixelRatio;
taxChartCanvas.style.width = cssWidth + ‘px’;
taxChartCanvas.style.maxWidth = ‘100%’;
taxChartCanvas.style.height = cssHeight + ‘px’;
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);

var colors = {
background: ‘#ffffff’,
text: ‘#333333’,
muted: ‘#64748b’,
grid: ‘#e2e8f0’,
expense: ‘#94a3b8’,
sales: ‘#ea580c’
};
var margin = { top: 58, right: 26, bottom: 74, left: 48 };
var plotWidth = cssWidth – margin.left – margin.right;
var plotHeight = cssHeight – margin.top – margin.bottom;
var maxValue = 12;
var groups = [
{ label: ‘従来（8%時代）’, expense: 10, sales: 8 },
{ label: ‘2027年以降（1%時代）’, expense: 10, sales: 1 }
];

context.clearRect(0, 0, cssWidth, cssHeight);
context.fillStyle = colors.background;
context.fillRect(0, 0, cssWidth, cssHeight);
context.textBaseline = ‘middle’;

context.fillStyle = colors.text;
context.font = ‘bold 16px sans-serif’;
context.textAlign = ‘center’;
context.fillText(‘消費税の「逆ざや」構造比較（%）’, cssWidth / 2, 22);

context.font = ’12px sans-serif’;
context.textAlign = ‘right’;
for (var value = 0; value <= maxValue; value += 2) { var y = margin.top + plotHeight - (value / maxValue) * plotHeight; context.strokeStyle = colors.grid; context.lineWidth = 1; context.beginPath(); context.moveTo(margin.left, y); context.lineTo(cssWidth - margin.right, y); context.stroke(); context.fillStyle = colors.muted; context.fillText(String(value), margin.left - 8, y); } context.strokeStyle = colors.muted; context.beginPath(); context.moveTo(margin.left, margin.top); context.lineTo(margin.left, margin.top + plotHeight); context.lineTo(cssWidth - margin.right, margin.top + plotHeight); context.stroke(); var groupWidth = plotWidth / groups.length; var barWidth = Math.min(52, groupWidth * 0.28); groups.forEach(function (group, index) { var centerX = margin.left + groupWidth * index + groupWidth / 2; var expenseHeight = (group.expense / maxValue) * plotHeight; var salesHeight = (group.sales / maxValue) * plotHeight; var expenseX = centerX - barWidth - 5; var salesX = centerX + 5; context.fillStyle = colors.expense; context.fillRect(expenseX, margin.top + plotHeight - expenseHeight, barWidth, expenseHeight); context.fillStyle = colors.sales; context.fillRect(salesX, margin.top + plotHeight - salesHeight, barWidth, salesHeight); context.fillStyle = colors.text; context.textAlign = 'center'; context.font = 'bold 12px sans-serif'; context.fillText(group.expense + '%', expenseX + barWidth / 2, margin.top + plotHeight - expenseHeight - 10); context.fillText(group.sales + '%', salesX + barWidth / 2, margin.top + plotHeight - salesHeight - 10); context.font = '12px sans-serif'; context.fillText(group.label, centerX, margin.top + plotHeight + 24); }); var legendY = cssHeight - 22; context.font = '12px sans-serif'; context.textAlign = 'left'; context.fillStyle = colors.expense; context.fillRect(Math.max(20, cssWidth / 2 - 170), legendY - 5, 12, 12); context.fillStyle = colors.text; context.fillText('支払う消費税（経費：10%固定）', Math.max(20, cssWidth / 2 - 152), legendY + 1); context.fillStyle = colors.sales; context.fillRect(Math.min(cssWidth - 130, cssWidth / 2 + 90), legendY - 5, 12, 12); context.fillStyle = colors.text; context.fillText('預かる消費税（売上）', Math.min(cssWidth - 112, cssWidth / 2 + 108), legendY + 1); } if (taxChartCanvas) { drawTaxChart(); var chartResizeTimer; window.addEventListener('resize', function () { window.clearTimeout(chartResizeTimer); chartResizeTimer = window.setTimeout(drawTaxChart, 150); }); } } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', initializeSanchokuLp, { once: true }); } else { initializeSanchokuLp(); } }());