<!– メインビジュアル –>
<section class=”py-12 md:py-20 bg-white”>
<div class=”container mx-auto px-4 md:px-6″>
<div class=”flex flex-col md:flex-row items-center”>
<div class=”md:w-1/2 mb-8 md:mb-0″>
<h1 class=”text-3xl md:text-4xl font-bold text-gray-800 mb-4″>あなたの未来を<br>一緒に描きましょう</h1>
<p class=”text-lg text-gray-600 mb-6″>
将来のお金の不安、解消しませんか？<br>
カジュアルに相談できるFP浮城のライフプランシミュレーションで<br>
あなたの理想の未来への第一歩を踏み出しましょう。
</p>
<button id=”start-simulation” class=”bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-6 rounded-lg transition shadow-lg hover:shadow-xl transform hover:-translate-y-1″>
シミュレーションを始める
</button>
</div>
<div class=”md:w-1/2 flex justify-center”>
<svg class=”w-full max-w-md” viewBox=”0 0 500 400″ xmlns=”http://www.w3.org/2000/svg”>
<rect x=”50″ y=”50″ width=”400″ height=”300″ rx=”20″ fill=”#e6efff” />
<path d=”M100,250 Q150,150 200,200 T300,150 T400,250″ stroke=”#4f46e5″ stroke-width=”5″ fill=”none” />
<path d=”M100,280 Q150,220 200,250 T300,200 T400,280″ stroke=”#60a5fa” stroke-width=”5″ fill=”none” />
<circle cx=”150″ cy=”180″ r=”15″ fill=”#4f46e5″ />
<circle cx=”250″ cy=”220″ r=”15″ fill=”#60a5fa” />
<circle cx=”350″ cy=”170″ r=”15″ fill=”#4f46e5″ />
<text x=”250″ y=”100″ text-anchor=”middle” font-size=”18″ fill=”#333″>ライフプランシミュレーション</text>
<text x=”150″ y=”160″ text-anchor=”middle” font-size=”12″ fill=”#fff”>結婚</text>
<text x=”250″ y=”200″ text-anchor=”middle” font-size=”12″ fill=”#fff”>マイホーム</text>
<text x=”350″ y=”150″ text-anchor=”middle” font-size=”12″ fill=”#fff”>老後</text>
</svg>
</div>
</div>
</div>
</section>
<!– シミュレーションセクション –>
<section id=”simulation-section” class=”py-12 bg-gray-50 hidden”>
<div class=”container mx-auto px-4 md:px-6″>
<h2 class=”text-2xl md:text-3xl font-bold text-center text-gray-800 mb-10″>あなたのライフプランをシミュレーション</h2>
<div class=”max-w-4xl mx-auto”>
<!– 基本情報入力 –>
<div id=”basic-info” class=”bg-white rounded-xl p-6 card-shadow mb-8″>
<h3 class=”text-xl font-semibold text-gray-800 mb-4″>基本情報</h3>
<div class=”grid grid-cols-1 md:grid-cols-2 gap-6″>
<div>
<label class=”block text-gray-700 mb-2″>年齢</label>
<input type=”number” id=”age” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ placeholder=”例: 30″ min=”18″ max=”80″>
</div>
<div>
<label class=”block text-gray-700 mb-2″>年収（万円）</label>
<input type=”number” id=”income” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ placeholder=”例: 400″ min=”0″>
</div>
<div>
<label class=”block text-gray-700 mb-2″>現在の貯蓄（万円）</label>
<input type=”number” id=”savings” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ placeholder=”例: 500″ min=”0″>
</div>
<div>
<label class=”block text-gray-700 mb-2″>毎月の貯蓄額（万円）</label>
<input type=”number” id=”monthly-savings” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ placeholder=”例: 10″ min=”0″>
</div>
</div>
</div>
<!– ライフイベント選択 –>
<div id=”life-events” class=”bg-white rounded-xl p-6 card-shadow mb-8″>
<h3 class=”text-xl font-semibold text-gray-800 mb-4″>ライフイベントを選択</h3>
<p class=”text-gray-600 mb-6″>あなたの将来に起こりうるイベントを選んでください</p>
<div class=”grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4″>
<div class=”life-event-card bg-blue-50 border border-blue-100 rounded-lg p-4 cursor-pointer” data-event=”marriage”>
<div class=”flex items-center mb-2″>
<span class=”text-2xl mr-2″>💍</span>
<h4 class=”font-medium”>結婚</h4>
</div>
<div class=”flex items-center justify-between”>
<span class=”text-sm text-gray-600″>予定年齢</span>
<input type=”number” class=”w-16 px-2 py-1 border rounded text-center” placeholder=”歳” min=”18″ max=”80″>
</div>
</div>
<div class=”life-event-card bg-pink-50 border border-pink-100 rounded-lg p-4 cursor-pointer” data-event=”child”>
<div class=”flex items-center mb-2″>
<span class=”text-2xl mr-2″>👶</span>
<h4 class=”font-medium”>出産・子育て</h4>
</div>
<div class=”flex items-center justify-between”>
<span class=”text-sm text-gray-600″>予定年齢</span>
<input type=”number” class=”w-16 px-2 py-1 border rounded text-center” placeholder=”歳” min=”18″ max=”50″>
</div>
</div>
<div class=”life-event-card bg-green-50 border border-green-100 rounded-lg p-4 cursor-pointer” data-event=”house”>
<div class=”flex items-center mb-2″>
<span class=”text-2xl mr-2″>🏠</span>
<h4 class=”font-medium”>マイホーム購入</h4>
</div>
<div class=”flex items-center justify-between”>
<span class=”text-sm text-gray-600″>予定年齢</span>
<input type=”number” class=”w-16 px-2 py-1 border rounded text-center” placeholder=”歳” min=”20″ max=”70″>
</div>
</div>
<div class=”life-event-card bg-yellow-50 border border-yellow-100 rounded-lg p-4 cursor-pointer” data-event=”car”>
<div class=”flex items-center mb-2″>
<span class=”text-2xl mr-2″>🚗</span>
<h4 class=”font-medium”>車の購入</h4>
</div>
<div class=”flex items-center justify-between”>
<span class=”text-sm text-gray-600″>予定年齢</span>
<input type=”number” class=”w-16 px-2 py-1 border rounded text-center” placeholder=”歳” min=”18″ max=”80″>
</div>
</div>
<div class=”life-event-card bg-purple-50 border border-purple-100 rounded-lg p-4 cursor-pointer” data-event=”education”>
<div class=”flex items-center mb-2″>
<span class=”text-2xl mr-2″>🎓</span>
<h4 class=”font-medium”>教育資金</h4>
</div>
<div class=”flex items-center justify-between”>
<span class=”text-sm text-gray-600″>予定年齢</span>
<input type=”number” class=”w-16 px-2 py-1 border rounded text-center” placeholder=”歳” min=”30″ max=”60″>
</div>
</div>
<div class=”life-event-card bg-orange-50 border border-orange-100 rounded-lg p-4 cursor-pointer” data-event=”retirement”>
<div class=”flex items-center mb-2″>
<span class=”text-2xl mr-2″>🌴</span>
<h4 class=”font-medium”>退職・老後</h4>
</div>
<div class=”flex items-center justify-between”>
<span class=”text-sm text-gray-600″>予定年齢</span>
<input type=”number” class=”w-16 px-2 py-1 border rounded text-center” placeholder=”歳” min=”50″ max=”80″>
</div>
</div>
</div>
</div>
<!– シミュレーション実行ボタン –>
<div class=”text-center”>
<button id=”run-simulation” class=”bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition shadow-lg hover:shadow-xl transform hover:-translate-y-1″>
シミュレーション実行
</button>
</div>
</div>
</div>
</section>
<!– 結果表示セクション –>
<section id=”result-section” class=”py-12 bg-white hidden”>
<div class=”container mx-auto px-4 md:px-6″>
<h2 class=”text-2xl md:text-3xl font-bold text-center text-gray-800 mb-10″>あなたのライフプランシミュレーション結果</h2>
<div class=”max-w-4xl mx-auto”>
<!– グラフ表示エリア –>
<div class=”bg-white rounded-xl p-6 card-shadow mb-8″>
<h3 class=”text-xl font-semibold text-gray-800 mb-4″>資産推移シミュレーション</h3>
<div class=”bg-gray-50 p-4 rounded-lg h-64 flex items-center justify-center” id=”chart-container”>
<canvas id=”simulation-chart” width=”100%” height=”100%”></canvas>
</div>
</div>
<!– ライフイベントタイムライン –>
<div class=”bg-white rounded-xl p-6 card-shadow mb-8″>
<h3 class=”text-xl font-semibold text-gray-800 mb-4″>ライフイベントタイムライン</h3>
<div class=”relative”>
<div class=”absolute left-1/2 transform -translate-x-1/2 h-full w-1 bg-blue-200″></div>
<div id=”timeline-events” class=”relative space-y-8 py-4″>
<!– タイムラインイベントはJSで動的に生成 –>
</div>
</div>
</div>
<!– アドバイスセクション –>
<div class=”bg-white rounded-xl p-6 card-shadow mb-8″>
<h3 class=”text-xl font-semibold text-gray-800 mb-4″>FP浮城からのアドバイス</h3>
<div id=”advice-content” class=”prose max-w-none”>
<p class=”text-gray-700″>シミュレーション結果に基づいたアドバイスがここに表示されます。</p>
</div>
</div>
<!– 相談ボタン –>
<div class=”text-center”>
<p class=”text-gray-600 mb-4″>より詳しいライフプランについて相談してみませんか？</p>
<button id=”contact-button” class=”bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-medium py-3 px-8 rounded-lg transition shadow-lg hover:shadow-xl”>
無料相談を予約する
</button>
</div>
</div>
</div>
</section>
<!– お問い合わせモーダル –>
<div id=”contact-modal” class=”fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden”>
<div class=”bg-white rounded-xl p-6 max-w-md w-full mx-4″>
<div class=”flex justify-between items-center mb-4″>
<h3 class=”text-xl font-semibold text-gray-800″>無料相談のご予約</h3>
<button id=”close-modal” class=”text-gray-400 hover:text-gray-600″>
<svg class=”w-6 h-6″ fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M6 18L18 6M6 6l12 12″></path>
</svg>
</button>
</div>
<div class=”mb-4″>
<label class=”block text-gray-700 mb-2″>お名前</label>
<input type=”text” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ placeholder=”例: 山田 太郎”>
</div>
<div class=”mb-4″>
<label class=”block text-gray-700 mb-2″>メールアドレス</label>
<input type=”email” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ placeholder=”例: yamada@example.com”>
</div>
<div class=”mb-4″>
<label class=”block text-gray-700 mb-2″>ご希望の日時</label>
<input type=”date” class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-2″>
<select class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″>
<option value=””>時間帯を選択</option>
<option value=”10:00″>10:00〜</option>
<option value=”11:00″>11:00〜</option>
<option value=”13:00″>13:00〜</option>
<option value=”14:00″>14:00〜</option>
<option value=”15:00″>15:00〜</option>
<option value=”16:00″>16:00〜</option>
</select>
</div>
<div class=”mb-6″>
<label class=”block text-gray-700 mb-2″>ご相談内容</label>
<textarea class=”w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500″ rows=”3″ placeholder=”ご相談内容を簡単にお書きください”></textarea>
</div>
<div class=”text-center”>
<button id=”submit-contact” class=”bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition”>
予約を確定する
</button>
</div>
</div>
</div>
<!– 予約完了モーダル –>
<div id=”success-modal” class=”fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden”>
<div class=”bg-white rounded-xl p-6 max-w-md w-full mx-4 text-center”>
<div class=”text-green-500 mb-4″>
<svg class=”w-16 h-16 mx-auto” fill=”none” stroke=”currentColor” viewBox=”0 0 24 24″ xmlns=”http://www.w3.org/2000/svg”>
<path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z”></path>
</svg>
</div>
<h3 class=”text-xl font-semibold text-gray-800 mb-2″>予約を受け付けました</h3>
<p class=”text-gray-600 mb-6″>ご入力いただいたメールアドレスに確認メールをお送りしました。</p>
<button id=”close-success” class=”bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-lg transition”>
閉じる
</button>
</div>
</div>
<!– フッター –>
<footer class=”bg-gray-800 text-white py-8″>
<div class=”container mx-auto px-4 md:px-6″>
<div class=”flex flex-col md:flex-row justify-between”>
<div class=”mb-6 md:mb-0″>
<div class=”text-2xl font-bold mb-2″>FP浮城</div>
<p class=”text-gray-400″>あなたの未来を一緒に描く<br>ファイナンシャルプランナー</p>
</div>
<div class=”grid grid-cols-2 md:grid-cols-3 gap-8″>
<div>
<h4 class=”text-lg font-semibold mb-3″>サービス</h4>
<ul class=”space-y-2″>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>ライフプラン相談</a></li>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>資産運用相談</a></li>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>保険見直し</a></li>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>住宅ローン相談</a></li>
</ul>
</div>
<div>
<h4 class=”text-lg font-semibold mb-3″>会社情報</h4>
<ul class=”space-y-2″>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>会社概要</a></li>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>スタッフ紹介</a></li>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>アクセス</a></li>
</ul>
</div>
<div>
<h4 class=”text-lg font-semibold mb-3″>お問い合わせ</h4>
<ul class=”space-y-2″>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>お問い合わせフォーム</a></li>
<li><a href=”#” class=”text-gray-400 hover:text-white transition”>よくある質問</a></li>
</ul>
</div>
</div>
</div>
<div class=”border-t border-gray-700 mt-8 pt-6 text-center text-gray-400″>
<p>© 2023 FP浮城 All Rights Reserved.</p>
</div>
</div>
</footer>
<script src=”https://cdn.jsdelivr.net/npm/chart.js”></script>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
// シミュレーション開始ボタン
document.getElementById(‘start-simulation’).addEventListener(‘click’, function() {
document.getElementById(‘simulation-section’).classList.remove(‘hidden’);
window.scrollTo({
top: document.getElementById(‘simulation-section’).offsetTop – 50,
behavior: ‘smooth’
});
});
// ライフイベントカードの選択状態の切り替え
const lifeEventCards = document.querySelectorAll(‘.life-event-card’);
lifeEventCards.forEach(card => {
card.addEventListener(‘click’, function() {
this.classList.toggle(‘ring-2’);
this.classList.toggle(‘ring-blue-500’);
});
});
// シミュレーション実行ボタン
document.getElementById(‘run-simulation’).addEventListener(‘click’, function() {
// 入力値の取得
const age = parseInt(document.getElementById(‘age’).value) || 30;
const income = parseInt(document.getElementById(‘income’).value) || 400;
const savings = parseInt(document.getElementById(‘savings’).value) || 500;
const monthlySavings = parseInt(document.getElementById(‘monthly-savings’).value) || 10;
// 選択されたライフイベントの取得
const selectedEvents = [];
document.querySelectorAll(‘.life-event-card.ring-2’).forEach(card => {
const eventType = card.getAttribute(‘data-event’);
const eventAge = parseInt(card.querySelector(‘input’).value) || age + 5;
selectedEvents.push({ type: eventType, age: eventAge });
});
// シミュレーション結果の生成
generateSimulationResults(age, income, savings, monthlySavings, selectedEvents);
// 結果セクションの表示
document.getElementById(‘result-section’).classList.remove(‘hidden’);
window.scrollTo({
top: document.getElementById(‘result-section’).offsetTop – 50,
behavior: ‘smooth’
});
});
// 相談ボタン
document.getElementById(‘contact-button’).addEventListener(‘click’, function() {
document.getElementById(‘contact-modal’).classList.remove(‘hidden’);
});
// モーダルを閉じるボタン
document.getElementById(‘close-modal’).addEventListener(‘click’, function() {
document.getElementById(‘contact-modal’).classList.add(‘hidden’);
});
// 予約確定ボタン
document.getElementById(‘submit-contact’).addEventListener(‘click’, function() {
document.getElementById(‘contact-modal’).classList.add(‘hidden’);
document.getElementById(‘success-modal’).classList.remove(‘hidden’);
});
// 予約完了モーダルを閉じるボタン
document.getElementById(‘close-success’).addEventListener(‘click’, function() {
document.getElementById(‘success-modal’).classList.add(‘hidden’);
});
// シミュレーション結果の生成関数
function generateSimulationResults(age, income, savings, monthlySavings, events) {
// 年齢ごとの資産額をシミュレーション
const retirementAge = 65;
const simulationYears = 80 – age;
const labels = Array.from({length: simulationYears + 1}, (_, i) => age + i);
const data = [savings];
// イベントごとの支出額（単位：万円）
const eventCosts = {
‘marriage’: 300,
‘child’: 1500,
‘house’: 3000,
‘car’: 300,
‘education’: 1000,
‘retirement’: 0
};
// タイムラインイベントの生成
const timelineContainer = document.getElementById(‘timeline-events’);
timelineContainer.innerHTML = ”;
// イベントを年齢順にソート
events.sort((a, b) => a.age – b.age);
// 年齢ごとのイベントマップを作成
const eventsByAge = {};
events.forEach(event => {
if (!eventsByAge[event.age]) {
eventsByAge[event.age] = [];
}
eventsByAge[event.age].push(event);
});
// 年ごとの資産シミュレーション
for (let i = 1; i <= simulationYears; i++) {
const currentAge = age + i;
let yearSavings = data[i-1];
// 年収からの貯蓄
if (currentAge < retirementAge) {
yearSavings += monthlySavings * 12;
} else {
// 退職後は年金を想定（年収の60%）
yearSavings -= income * 0.4; // 収入減少分を引く
}
// イベントによる支出
if (eventsByAge[currentAge]) {
eventsByAge[currentAge].forEach(event => {
yearSavings -= eventCosts[event.type];
// タイムラインにイベントを追加
const eventElement = document.createElement(‘div’);
eventElement.className = ‘flex items-center’;
// 左右交互に配置
const isEven = Object.keys(eventsByAge).indexOf(currentAge.toString()) % 2 === 0;
if (isEven) {
eventElement.classList.add(‘justify-end’);
eventElement.innerHTML = `
<div class=”w-5/12 text-right pr-8″>
<h4 class=”font-medium”>${getEventName(event.type)}</h4>
<p class=”text-sm text-gray-600″>${currentAge}歳</p>
<p class=”text-sm text-red-600″>-${eventCosts[event.type]}万円</p>
</div>
<div class=”z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white”>
${getEventEmoji(event.type)}
</div>
`;
} else {
eventElement.innerHTML = `
<div class=”z-10 flex items-center justify-center w-8 h-8 rounded-full bg-blue-500 text-white”>
${getEventEmoji(event.type)}
</div>
<div class=”w-5/12 pl-8″>
<h4 class=”font-medium”>${getEventName(event.type)}</h4>
<p class=”text-sm text-gray-600″>${currentAge}歳</p>
<p class=”text-sm text-red-600″>-${eventCosts[event.type]}万円</p>
</div>
`;
}
timelineContainer.appendChild(eventElement);
});
}
// 資産運用による増加（年利2%と仮定）
yearSavings *= 1.02;
data.push(Math.max(0, Math.round(yearSavings)));
}
// グラフの描画
const ctx = document.getElementById(‘simulation-chart’).getContext(‘2d’);
if (window.simulationChart) {
window.simulationChart.destroy();
}
window.simulationChart = new Chart(ctx, {
type: ‘line’,
data: {
labels: labels,
datasets: [{
label: ‘資産残高（万円）’,
data: data,
backgroundColor: ‘rgba(59, 130, 246, 0.2)’,
borderColor: ‘rgba(59, 130, 246, 1)’,
borderWidth: 2,
pointRadius: 3,
pointBackgroundColor: ‘rgba(59, 130, 246, 1)’,
fill: true,
tension: 0.4
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: ‘資産残高（万円）’
}
},
x: {
title: {
display: true,
text: ‘年齢’
}
}
}
}
});
// アドバイスの生成
generateAdvice(data, events, age);
}
// イベント名の取得
function getEventName(eventType) {
const eventNames = {
‘marriage’: ‘結婚’,
‘child’: ‘出産・子育て’,
‘house’: ‘マイホーム購入’,
‘car’: ‘車の購入’,
‘education’: ‘教育資金’,
‘retirement’: ‘退職・老後’
};
return eventNames[eventType] || eventType;
}
// イベント絵文字の取得
function getEventEmoji(eventType) {
const eventEmojis = {
‘marriage’: ‘💍’,
‘child’: ‘👶’,
‘house’: ‘🏠’,
‘car’: ‘🚗’,
‘education’: ‘🎓’,
‘retirement’: ‘🌴’
};
return eventEmojis[eventType] || ‘📅’;
}
// アドバイスの生成
function generateAdvice(data, events, age) {
const adviceContent = document.getElementById(‘advice-content’);
let advice = ”;
// 資産の最低値をチェック
const minAsset = Math.min(…data);
if (minAsset <= 0) {
advice += `<p class=”text-red-600 font-medium”>シミュレーションの結果、資産がマイナスになる時期があります。ライフプランの見直しが必要です。</p>`;
}
// 老後資金のチェック
const retirementIndex = 65 – age;
if (retirementIndex < data.length) {
const retirementAsset = data[retirementIndex];
if (retirementAsset < 2000) {
advice += `<p>退職時（65歳）の資産は約${retirementAsset}万円と予測されます。老後の生活に必要とされる資金は一般的に2,000万円以上と言われていますので、より多くの資産形成が望ましいでしょう。</p>`;
} else {
advice += `<p>退職時（65歳）の資産は約${retirementAsset}万円と予測されます。老後の生活に必要な資金は確保できる見込みです。</p>`;
}
}
// イベントごとのアドバイス
const hasHouse = events.some(e => e.type === ‘house’);
const hasChild = events.some(e => e.type === ‘child’);
if (hasHouse) {
advice += `<p>マイホーム購入を計画されていますね。住宅ローンの金利タイプ（固定・変動）や返済期間によって、総支払額が大きく変わります。ご相談いただければ、最適なプランをご提案いたします。</p>`;
}
if (hasChild) {
advice += `<p>お子様の教育資金は早めの準備が重要です。教育資金の積立や学資保険、NISA（少額投資非課税制度）などを活用した資産形成をご検討ください。</p>`;
}
// 資産運用のアドバイス
advice += `<p>毎月の貯蓄に加えて、資産運用を検討されることをおすすめします。長期的な視点での分散投資により、インフレに負けない資産形成が可能になります。</p>`;
// まとめ
advice += `<p class=”mt-4 font-medium”>このシミュレーションはあくまで簡易的なものです。より詳細なライフプランニングについては、ぜひFP浮城にご相談ください。お客様の状況に合わせた最適なプランをご提案いたします。</p>`;
adviceContent.innerHTML = advice;
}
});
</script>[/html]
運用ナビ
