<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>くちばしリスめっせんじゃー</title>
	<link rel="stylesheet" href="css/kuchibashi.css">
	<link href="https://fonts.googleapis.com/css2?family=Darumadrop One:wght@300;400;500&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Hachi Maru Pop:wght@300;400;500&display=swap" rel="stylesheet">
</head>
<body>
	<a href="index.html" style="font-size: 0.8rem; color: #555;">アリクイ身長差メーカーへ戻る</a><br>
	<h2>くちばしリスめっせんじゃー</h2>

	<div class="container">
		<div class="chat-container" id="chatContainer">
			<img src="image/りす2.png" alt="くちばしりす">
		</div>

	</div>
	<div class="input-container">
		<input type="text" id="userInput" placeholder="メッセージを入力...">
		<button onclick="sendMessage()">送信</button>
	</div>
	<div class="choices" id="choicesContainer">
		<!-- 選択肢 -->
	</div>
	<button id="shuffleButton" onclick="shuffleChoices()">選択肢をシャッフル</button>

	<script src="js/kuchibashi.js"></script>
		<div class="howto">
			<p>・くちばしリスと楽しくお話ができるよ。<br>・くちばしリスは言葉がじょうずではないので、単語に反応して返事をするよ。<br>・くちばしリスは漢字が苦手！なるべくひらがなでお話してあげよう。</p>
		</div>
	<h2>くちばしリスとは</h2>

			<img src="image/りす.jpg" alt="くちばしりす">
</body>
</html>
