<!-- モード切り替えボタン -->
<div class="mb-8 text-center">
<div class="inline-flex rounded-lg border-2 border-teal-500 overflow-hidden">
<button id="mode-easy" class="px-8 py-3 font-bold transition-colors bg-teal-500 text-white w-40">
やさしく
</button>
<button id="mode-detail" class="px-8 py-3 font-bold transition-colors bg-white text-teal-500 w-40">
しっかり
</button>
</div>
</div>
<!-- 導入文 -->
<div class="mb-12">
<p class="text-lg leading-relaxed content-easy" style="color: #444444;">
みんなが安心して、楽しくみられるようにするためのルールだよ！
</p>
<p class="text-lg leading-relaxed content-detail hidden" style="color: #444444;">
参加者の皆さまが安心して展示を楽しんでいただけるよう、展示に関するガイドラインを定めています。<br>
以下のルールをお読みいただき、ご理解とご協力をお願いいたします。
</p>
</div>
<!-- やってはいけないこと -->
<div class="mb-12">
<h3 class="text-2xl font-bold mb-6 content-easy" style="color: #221C35;">やってはいけないこと</h3>
<h3 class="text-2xl font-bold mb-6 content-detail hidden" style="color: #221C35;">展示における禁止事項</h3>
<div class="space-y-8">
<!-- 著作権 -->
<div>
<h4 class="font-bold text-xl mb-3 content-easy" style="color: #221C35;">だれかの作品を 勝手に使わない（著作権）</h4>
<h4 class="font-bold text-xl mb-3 content-detail hidden" style="color: #221C35;">著作権の侵害</h4>
<ul class="space-y-2 text-base pl-5 content-easy" style="color: #444444; list-style-type: disc;">
<li>アニメ・マンガ・ゲームの絵・音・音楽を許可なしで使わない</li>
<li>ネットの写真・イラスト・プログラムをそのまま使わない</li>
<li>自分で作ったもの・「使って良いよ」と書いてある素材はOK!</li>
</ul>
<ul class="space-y-2 text-base pl-5 content-detail hidden" style="color: #444444; list-style-type: disc;">
<li>第三者が著作権を有するキャラクター、画像、音楽、映像等を無断で使用しないでください</li>
<li>インターネット上の素材についても、利用規約を確認し、適切な権利処理を行ってください</li>
<li>自作の素材、またはクリエイティブ・コモンズ等のライセンスで利用が許可されている素材の使用を推奨します</li>
</ul>
</div>
<!-- 暴力表現 -->
<div>
<h4 class="font-bold text-xl mb-3 content-easy" style="color: #221C35;">人を傷つける・怖がらせることはしない</h4>
<h4 class="font-bold text-xl mb-3 content-detail hidden" style="color: #221C35;">暴力的・攻撃的な表現</h4>
<ul class="space-y-2 text-base pl-5 content-easy" style="color: #444444; list-style-type: disc;">
<li>なぐる、ころす、いじめるなどの表現をしない</li>
<li>いやな言葉で人をばかにしない</li>
</ul>
<ul class="space-y-2 text-base pl-5 content-detail hidden" style="color: #444444; list-style-type: disc;">
<li>暴力、殺傷、いじめ等の過度に攻撃的な表現は避けてください</li>
<li>他者を侮辱、中傷する言葉や表現を使用しないでください</li>
</ul>
</div>
<!-- プライバシー -->
<div>
<h4 class="font-bold text-xl mb-3 content-easy" style="color: #221C35;">名前や住所を出さない（プライバシー）</h4>
<h4 class="font-bold text-xl mb-3 content-detail hidden" style="color: #221C35;">個人情報の保護</h4>
<ul class="space-y-2 text-base pl-5 content-easy" style="color: #444444; list-style-type: disc;">
<li>学校名、住所、電話番号は書かない</li>
<li>ニックネームなどはOK!</li>
</ul>
<ul class="space-y-2 text-base pl-5 content-detail hidden" style="color: #444444; list-style-type: disc;">
<li>本名、学校名、住所、電話番号等の個人を特定できる情報を表示しないでください</li>
<li>ニックネームやハンドルネーム等の使用は問題ありません</li>
</ul>
</div>
<!-- 差別 -->
<div>
<h4 class="font-bold text-xl mb-3 content-easy" style="color: #221C35;">誰かをきらったり、なかまはずれにしない</h4>
<h4 class="font-bold text-xl mb-3 content-detail hidden" style="color: #221C35;">差別的表現の禁止</h4>
<ul class="space-y-2 text-base pl-5 content-easy" style="color: #444444; list-style-type: disc;">
<li>国や人との違いをばかにしない</li>
<li>「〇〇はだめ！」と決めつけない</li>
</ul>
<ul class="space-y-2 text-base pl-5 content-detail hidden" style="color: #444444; list-style-type: disc;">
<li>人種、国籍、性別、年齢、障害の有無等による差別的な表現を行わないでください</li>
<li>特定の属性を持つ人々を排除したり、否定したりする表現を避けてください</li>
</ul>
</div>
<!-- 危険行為 -->
<div>
<h4 class="font-bold text-xl mb-3 content-easy" style="color: #221C35;">あぶないことを、すすめない</h4>
<h4 class="font-bold text-xl mb-3 content-detail hidden" style="color: #221C35;">危険行為の助長</h4>
<ul class="space-y-2 text-base pl-5 content-easy" style="color: #444444; list-style-type: disc;">
<li>マネするとケガしそうなことは、そのまま出さない</li>
<li>ひつようなら「大人といっしょにね」と書こう</li>
</ul>
<ul class="space-y-2 text-base pl-5 content-detail hidden" style="color: #444444; list-style-type: disc;">
<li>模倣により怪我や事故につながる可能性のある危険な行為を推奨する内容は避けてください</li>
<li>やむを得ず危険性のある内容を含む場合は、必ず注意喚起を行ってください</li>
</ul>
</div>
</div>
</div>
<!-- だいじな合言葉 -->
<div class="mb-12 bg-yellow-50 border-l-4 border-yellow-500 p-6">
<h3 class="text-2xl font-bold mb-3 content-easy" style="color: #221C35;">だいじな合言葉</h3>
<h3 class="text-2xl font-bold mb-3 content-detail hidden" style="color: #221C35;">展示の基本理念</h3>
<p class="text-lg leading-relaxed content-easy" style="color: #444444;">
「これを見た人は、安心して、笑顔になれるかな？」
</p>
<p class="text-lg leading-relaxed content-detail hidden" style="color: #444444;">
「この展示を見た人が、安心して、笑顔になれるか」を常に意識してください。<br>
すべての参加者が楽しめる、包括的で安全な展示環境を作ることが大切です。
</p>
</div>
<!-- 保護者・メンターの方へ -->
<div class="mt-12 border-t pt-8">
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">保護者・メンターの方へ</h4>
<ul class="space-y-2 text-base pl-5 content-easy" style="color: #444444; list-style-type: disc;">
<li>本ページは、著作権・個人情報・公序良俗に配慮したこども向け展示ガイドです。</li>
<li>法的助言ではなく、一般的な情報として提供しています。</li>
<li>子どもたちと一緒に読み合わせをお願いします。</li>
</ul>
<ul class="space-y-2 text-base pl-5 content-detail hidden" style="color: #444444; list-style-type: disc;">
<li>本ガイドラインは、著作権、個人情報保護、公序良俗に配慮した一般的な展示基準を示したものです。</li>
<li>法的助言を目的としたものではなく、あくまで参考情報としてご利用ください。</li>
<li>展示前に、お子様と一緒に内容を確認し、理解を深めていただくことを推奨します。</li>
<li>判断に迷う場合は、事前に運営までお問い合わせください。</li>
</ul>
</div>
<!-- モード切り替えスクリプト -->
<script>
const modeEasyBtn = document.getElementById('mode-easy');
const modeDetailBtn = document.getElementById('mode-detail');
const easyContents = document.querySelectorAll('.content-easy');
const detailContents = document.querySelectorAll('.content-detail');
function switchToEasy() {
// ボタンのスタイル切り替え
modeEasyBtn.classList.add('bg-teal-500', 'text-white');
modeEasyBtn.classList.remove('bg-white', 'text-teal-500');
modeDetailBtn.classList.add('bg-white', 'text-teal-500');
modeDetailBtn.classList.remove('bg-teal-500', 'text-white');
// コンテンツの表示切り替え
easyContents.forEach(el => el.classList.remove('hidden'));
detailContents.forEach(el => el.classList.add('hidden'));
}
function switchToDetail() {
// ボタンのスタイル切り替え
modeDetailBtn.classList.add('bg-teal-500', 'text-white');
modeDetailBtn.classList.remove('bg-white', 'text-teal-500');
modeEasyBtn.classList.add('bg-white', 'text-teal-500');
modeEasyBtn.classList.remove('bg-teal-500', 'text-white');
// コンテンツの表示切り替え
detailContents.forEach(el => el.classList.remove('hidden'));
easyContents.forEach(el => el.classList.add('hidden'));
}
modeEasyBtn.addEventListener('click', switchToEasy);
modeDetailBtn.addEventListener('click', switchToDetail);
</script>
</div>