<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>恋愛ミニゲーム | 純喫茶吾妻</title>
	<atom:link href="https://azumasweets.com/category/itiran/renai/feed/" rel="self" type="application/rss+xml" />
	<link>https://azumasweets.com</link>
	<description>YouTube『吾妻のアニメ』の作者のブログです。</description>
	<lastBuildDate>Thu, 11 Jun 2026 11:01:01 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.4</generator>

<image>
	<url>https://azumasweets.com/wp-content/uploads/2022/06/cropped-IMG_9642-32x32.png</url>
	<title>恋愛ミニゲーム | 純喫茶吾妻</title>
	<link>https://azumasweets.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>恋愛選択ミニゲーム◆浮所龍❷</title>
		<link>https://azumasweets.com/tatsurukouhai/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Thu, 11 Jun 2026 11:00:40 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[浮所龍]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=9805</guid>

					<description><![CDATA[浮所龍との今作の関係 後輩 親密度 ★☆☆☆☆☆☆☆☆☆ 好感度 ★★★★★★★★★☆ 今回のお話しでの浮所龍の親密度・好感度はここからスタート 学校にて メッセージシステム スタート 名前を変更 [訪問者] これで全員 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table aligncenter is-style-regular"><table class="has-ex-a-background-color has-background"><tbody><tr><td class="has-text-align-center" data-align="center">浮所龍との今作の関係</td><td class="has-text-align-center" data-align="center">後輩</td></tr><tr><td class="has-text-align-center" data-align="center">親密度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★</span></span>☆☆☆☆☆☆☆☆☆</td></tr><tr><td class="has-text-align-center" data-align="center">好感度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★★★★</span></span>☆</td></tr></tbody></table><figcaption class="wp-element-caption">今回のお話しでの浮所龍の親密度・好感度はここからスタート</figcaption></figure>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>



<li><span class="fz-12px">「〇〇＋先輩」呼びになります</span></li>
</ul>



<h4 class="wp-block-heading has-text-align-center">学校にて</h4>



<title>メッセージシステム</title>
    <link rel="stylesheet" href="styles.css">



<!-- 名前入力 -->
<div class="name-input">
    <input type="text" id="username" placeholder="あなたの名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="新しい名前を入力してください">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス -->
<div class="message-box" style="display:none;">



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               これで全員分のスポドリの準備オッケー
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あと２分で部活終了か〜〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ピッピー（ホイッスルの音）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              終了！みんなお疲れ様〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
           お疲れ様です！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                <span class="username">[訪問者]</span>先輩。このあと、お時間よろしいですか…？

                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               （なんだろ？）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              いいよ！着替えたらでいい？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->もちろんです！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


30分後



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              お待たせ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>





 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              いえいえ。こちらこそありがとうございます
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               どうしたの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
        今度、梅雨祭りがあるじゃないですか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            あの祭り、私と一緒に行きませんか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            え！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6956.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            <span class="username">[訪問者]</span>先輩と行きたいんです
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>





<!-- スクリプト -->
<script>
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');

    // 保存された名前がある場合
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none';
        messageBox.style.display = 'block';
        nameChangeBox.style.display = 'block';
    }

    // スタート
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username);
            nameInputBox.style.display = 'none';
            messageBox.style.display = 'block';
            nameChangeBox.style.display = 'block';
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername);
        } else {
            alert('新しい名前を入力してください');
        }
    });
</script>


</div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">浮所龍になんて言葉を返す？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/ukitatsu1/">「いいね！行こうか！」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/ukitatsu02/">「実は、アロハ先輩と約束してて…」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/ukitatsu033/">「私なんかと…？？」</a></div>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛選択ミニゲーム◆咲間薫❶</title>
		<link>https://azumasweets.com/renaikaoruone/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Fri, 01 May 2026 10:44:19 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[咲間薫]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=9696</guid>

					<description><![CDATA[咲間薫との今作の関係 クラスメイト 親密度 ★★☆☆☆☆☆☆☆☆ 好感度 ★★★☆☆☆☆☆☆☆ 今回のお話しでの咲間薫の親密度・好感度はここからスタート 学校にて メッセージシステム スタート 名前を変更 [訪問者] ( [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table aligncenter is-style-regular"><table class="has-ex-a-background-color has-background"><tbody><tr><td class="has-text-align-center" data-align="center">咲間薫との今作の関係</td><td class="has-text-align-center" data-align="center">クラスメイト</td></tr><tr><td class="has-text-align-center" data-align="center">親密度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★</span></span>☆☆☆☆☆☆☆☆</td></tr><tr><td class="has-text-align-center" data-align="center">好感度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★</span></span>☆☆☆☆☆☆☆</td></tr></tbody></table><figcaption class="wp-element-caption">今回のお話しでの咲間薫の親密度・好感度はここからスタート</figcaption></figure>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>
</ul>



<h4 class="wp-block-heading has-text-align-center">学校にて</h4>



<!DOCTYPE html>
<html lang="ja">
<head>
    
    
    <title>メッセージシステム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力 -->
<div class="name-input">
    <input type="text" id="username" placeholder="あなたの名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="新しい名前を入力してください">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス -->
<div class="message-box" style="display:none;">


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               (今日から夏服だ~！)
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
     おっ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              <span class="username">[訪問者]</span>、おはよー
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             おはよう！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             今日から夏服だね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                だな
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                今日頭髪点検あるらしーよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              え！そうなの！？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
  <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               俺らの担当韮瀬先生だって
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
          まじで！？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
           韮瀬先生超〜厳しいよなー
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
         なんか緊張してきたかも
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
          <span class="username">[訪問者]</span>なら大丈夫だろ笑
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
         てか、俺の夏服どう？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2026/04/IMG_6951.png"
alt=“薫のアイコン" class="icon">
            <span class="sender-name">咲間薫</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
        似合ってる？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- スクリプト -->
<script>
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');

    // 保存された名前がある場合
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none';
        messageBox.style.display = 'block';
        nameChangeBox.style.display = 'block';
    }

    // スタート
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username);
            nameInputBox.style.display = 'none';
            messageBox.style.display = 'block';
            nameChangeBox.style.display = 'block';
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername);
        } else {
            alert('新しい名前を入力してください');
        }
    });
</script>

</body>
</html>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">咲間薫になんて言葉を返す？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/kaoruoneone/">「うん」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/kaoru2/">「かっこいい」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/kaorusan/">「いい感じじゃん」</a></div>
</div>
</div>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛選択ミニゲーム◆湊要人❶</title>
		<link>https://azumasweets.com/kanameonerenai/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Mon, 30 Mar 2026 10:40:59 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[湊要人]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=9554</guid>

					<description><![CDATA[湊要人との今作の関係 クラスメイト 親密度 ★★★★★★☆☆☆☆ 好感度 ★★★★★★★☆☆☆ 今回のお話しでの湊要人の親密度・好感度はここからスタート 街中にて メッセージシステム スタート 名前を変更 [訪問者] ご [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table aligncenter is-style-regular"><table class="has-ex-a-background-color has-background"><tbody><tr><td class="has-text-align-center" data-align="center">湊要人との今作の関係</td><td class="has-text-align-center" data-align="center">クラスメイト</td></tr><tr><td class="has-text-align-center" data-align="center">親密度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★</span></span>☆☆☆☆</td></tr><tr><td class="has-text-align-center" data-align="center">好感度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★★</span></span>☆☆☆</td></tr></tbody></table><figcaption class="wp-element-caption">今回のお話しでの湊要人の親密度・好感度はここからスタート</figcaption></figure>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>
</ul>



<h4 class="wp-block-heading has-text-align-center">街中にて</h4>



<!DOCTYPE html>
<html lang="ja">
<head>
    
    
    <title>メッセージシステム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力 -->
<div class="name-input">
    <input type="text" id="username" placeholder="あなたの名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="新しい名前を入力してください">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス -->
<div class="message-box" style="display:none;">


  <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ごめん！待たせた？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2805.png" alt=“要人のアイコン" class="icon">
            <span class="sender-name">湊要人</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               いえいえ。俺もさっき着いたところですよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2805.png" alt=“要人のアイコン" class="icon">
            <span class="sender-name">湊要人</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            今日はお誘いいただきありがとうございます
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              いやいや！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               こちらこそつきあってくれてありがとう
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              スイーツ食べ放題の優待券が今日までだったから助かったよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2805.png" alt=“要人のアイコン" class="icon">
            <span class="sender-name">湊要人</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              じゃあ早速いきましょうか
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>

 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               （でも、好きな人の前でバカみたいに食べたくない…）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>

 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               （ちょっと恥ずかしいな…）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>






<!-- スクリプト -->
<script>
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');

    // 保存された名前がある場合
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none';
        messageBox.style.display = 'block';
        nameChangeBox.style.display = 'block';
    }

    // スタート
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username);
            nameInputBox.style.display = 'none';
            messageBox.style.display = 'block';
            nameChangeBox.style.display = 'block';
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername);
        } else {
            alert('新しい名前を入力してください');
        }
    });
</script>

</body>
</html>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">スイーツ食べ放題のお店にきた！「あんまり食べてないね…」と要人に言われたら…なんて返す？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/kaname1/">「もう結構お腹いっぱいなんだよね…」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/kaname2/">「え、そうかな……？」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/kaname3/">「まだまだこっからだよ」</a></div>
</div>
</div>



<p class="wp-block-paragraph"></p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛選択ミニゲーム◆八雲遊馬❶</title>
		<link>https://azumasweets.com/miniyakumomo/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Mon, 16 Feb 2026 10:49:57 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[八雲遊馬]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=9431</guid>

					<description><![CDATA[八雲遊馬との今作の関係 クラスメイト 親密度 ★★★★★★☆☆☆☆ 好感度 ★★★★★★★★★★ 今回のお話しでの八雲遊馬の親密度・好感度はここからスタート 学校にて（掃除の時間） メッセージシステム スタート 名前を変 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table aligncenter is-style-regular"><table class="has-ex-a-background-color has-background"><tbody><tr><td class="has-text-align-center" data-align="center">八雲遊馬との今作の関係</td><td class="has-text-align-center" data-align="center">クラスメイト</td></tr><tr><td class="has-text-align-center" data-align="center">親密度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★</span></span>☆☆☆☆</td></tr><tr><td class="has-text-align-center" data-align="center">好感度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★★★★★</span></span></td></tr></tbody></table><figcaption class="wp-element-caption">今回のお話しでの八雲遊馬の親密度・好感度はここからスタート</figcaption></figure>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>
</ul>



<h4 class="wp-block-heading has-text-align-center">学校にて（掃除の時間）</h4>



<!DOCTYPE html>
<html lang="ja">
<head>
    
    
    <title>メッセージシステム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力 -->
<div class="name-input">
    <input type="text" id="username" placeholder="あなたの名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="新しい名前を入力してください">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス -->
<div class="message-box" style="display:none;">



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              （チョコどうしようかな……）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>

 
 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            （バレンタインは土曜日で、もう二日も経ったのに渡すのは変かな……）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            （でも、このタイミングを逃したら……！）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2800.png" alt=“遊馬のアイコン" class="icon">
            <span class="sender-name">八雲遊馬</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              あれ？どうしたの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ！！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2800.png" alt=“遊馬のアイコン" class="icon">
            <span class="sender-name">八雲遊馬</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              そこ、女の子だとちょっと高いよね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2800.png" alt=“遊馬のアイコン" class="icon">
            <span class="sender-name">八雲遊馬</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                棚の上の拭き掃除は俺がやるよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              でも、
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2800.png" alt=“遊馬のアイコン" class="icon">
            <span class="sender-name">八雲遊馬</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                気にしないで
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              あ、ありがとう
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               （どうしよう。言うなら今しかない……でも…）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>

</div>

<!-- スクリプト -->
<script>
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');

    // 保存された名前がある場合
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none';
        messageBox.style.display = 'block';
        nameChangeBox.style.display = 'block';
    }

    // スタート
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username);
            nameInputBox.style.display = 'none';
            messageBox.style.display = 'block';
            nameChangeBox.style.display = 'block';
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername);
        } else {
            alert('新しい名前を入力してください');
        }
    });
</script>

</body>
</html>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">遊馬になにを言う？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/9436-2/">「誰かにバレンタインチョコもらった？」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/9443-2/">「遊馬って掃除上手だね」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/9442-2/">「放課後、ちょっといいかな…」</a></div>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛選択ミニゲーム◆浮所龍❶</title>
		<link>https://azumasweets.com/renaigemetatsuru/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Wed, 10 Dec 2025 09:19:27 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=9186</guid>

					<description><![CDATA[浮所龍との今作の関係 クラスメイト 親密度 ★★★★★★☆☆☆☆ 好感度 ★★★★★★★★☆☆ 今回のお話しでの浮所龍親密度・好感度はここからスタート ◇ 学校にて＿ メッセージシステム スタート 名前を変更 [訪問者] [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table aligncenter is-style-regular"><table class="has-ex-a-background-color has-background"><tbody><tr><td class="has-text-align-center" data-align="center">浮所龍との今作の関係</td><td class="has-text-align-center" data-align="center">クラスメイト</td></tr><tr><td class="has-text-align-center" data-align="center">親密度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★</span></span>☆☆☆☆</td></tr><tr><td class="has-text-align-center" data-align="center">好感度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★★★</span></span>☆☆</td></tr></tbody></table><figcaption class="wp-element-caption">今回のお話しでの浮所龍親密度・好感度はここからスタート</figcaption></figure>



<p class="has-text-align-center wp-block-paragraph">◇</p>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>
</ul>



<h4 class="wp-block-heading has-text-align-center">学校にて＿</h4>



<!DOCTYPE html>
<html lang="ja">
<head>
    
    
    <title>メッセージシステム</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力 -->
<div class="name-input">
    <input type="text" id="username" placeholder="あなたの名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="新しい名前を入力してください">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス -->
<div class="message-box" style="display:none;">





 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              やばーーい！どうしよう！！！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               終わったーー！！！！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             どうしたの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             古典の教科書を忘れてきちゃった…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              あの先生、忘れ物に厳しいよね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              そうなんだよね。この前も、教科書を忘れた人をみんなの前で説教していたし…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               そういや、4組も今日古典があるみたいだよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              借りちゃえば万事解決！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               それが、4組は体育の授業だから、教室に居なくて…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                それは大変！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              じゃあ、私の教科書貸してあげるよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              え！いいよ！！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2787.png" alt=“龍のアイコン" class="icon">
            <span class="sender-name">浮所龍</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                いいからいいから！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



</div>

<!-- スクリプト -->
<script>
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');

    // 保存された名前がある場合
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none';
        messageBox.style.display = 'block';
        nameChangeBox.style.display = 'block';
    }

    // スタート
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username);
            nameInputBox.style.display = 'none';
            messageBox.style.display = 'block';
            nameChangeBox.style.display = 'block';
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername);
        } else {
            alert('新しい名前を入力してください');
        }
    });
</script>

</body>
</html>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">龍になんて言葉を返す？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/9189-2/">「絶対に借りない！」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/9195-2/">「ダメだよ……」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/9201-2/">「え！？いいの！？！」</a></div>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛選択ミニゲーム◆御子柴アロハ❶</title>
		<link>https://azumasweets.com/renaialo/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Mon, 24 Nov 2025 10:43:33 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[御子柴アロハ]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=8972</guid>

					<description><![CDATA[御子柴アロハとの今作の関係 小学校からの幼馴染 親密度 ★★★★★★★★☆☆ 好感度 ★★★★★★★☆☆☆ 今回のお話しでの椿流星親密度・好感度はここからスタート ◇ 学校にて＿ メッセージシステム スタート 名前を変更]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table aligncenter is-style-regular"><table class="has-ex-a-background-color has-background"><tbody><tr><td class="has-text-align-center" data-align="center">御子柴アロハとの今作の関係</td><td class="has-text-align-center" data-align="center">小学校からの幼馴染</td></tr><tr><td class="has-text-align-center" data-align="center">親密度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★★★</span></span>☆☆</td></tr><tr><td class="has-text-align-center" data-align="center">好感度</td><td class="has-text-align-center" data-align="center"><span class="bold-red"><span class="bold-green">★★★★★★★</span></span>☆☆☆</td></tr></tbody></table><figcaption class="wp-element-caption">今回のお話しでの椿流星親密度・好感度はここからスタート</figcaption></figure>



<p class="has-text-align-center wp-block-paragraph">◇</p>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>
</ul>



<h4 class="wp-block-heading has-text-align-center">学校にて＿</h4>



<!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="styles.css">
</head>
<body>

<!-- 名前入力 -->
<div class="name-input">
    <input type="text" id="username" placeholder="あなたの名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="新しい名前を入力してください">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス -->
<div class="message-box" style="display:none;">



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/2182e37bff52ae17b853077a8e3d608a.png" alt=“アロハのアイコン" class="icon">
            <span class="sender-name">御子柴アロハ</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
           なあ！<span class="username">[訪問者]</span>！お願いがあんだけど！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




   <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               どうしたの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/2182e37bff52ae17b853077a8e3d608a.png" alt=“アロハのアイコン" class="icon">
            <span class="sender-name">御子柴アロハ</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              俺、ダンス部じゃん？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               うん
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/2182e37bff52ae17b853077a8e3d608a.png" alt=“アロハのアイコン" class="icon">
            <span class="sender-name">御子柴アロハ</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               でさー、文化祭でダンス踊ることになってんだけど、男全員でスカート履いて踊ることになってさー

                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               へーー！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              えっ。まさか……
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/2182e37bff52ae17b853077a8e3d608a.png" alt=“アロハのアイコン" class="icon">
            <span class="sender-name">御子柴アロハ</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               お願い！スカート貸して！

  <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/2182e37bff52ae17b853077a8e3d608a.png" alt=“アロハのアイコン" class="icon">
            <span class="sender-name">御子柴アロハ</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              マジ、文化祭当日だけでいいから！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              え〜〜〜…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>









</div>

<!-- スクリプト -->
<script>
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');

    // 保存された名前がある場合
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none';
        messageBox.style.display = 'block';
        nameChangeBox.style.display = 'block';
    }

    // スタート
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username);
            nameInputBox.style.display = 'none';
            messageBox.style.display = 'block';
            nameChangeBox.style.display = 'block';
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername);
        } else {
            alert('新しい名前を入力してください');
        }
    });
</script>

</body>
</html>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">アロハになんて言葉を返す？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/alooneone/">「いいよ！！」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/alohasan/">「え〜〜どうしようかな〜〜」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/arohani/">「ごめん。他の人に借りて」</a></div>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛ミニストーリー◆大園晴秀❶</title>
		<link>https://azumasweets.com/haruhiderenai/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Fri, 27 Jun 2025 10:31:48 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[大園晴秀]]></category>
		<category><![CDATA[椿流星]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=8502</guid>

					<description><![CDATA[今作の大園晴秀との関係性／設定 付き合っている。社会人。 恋愛ミニストーリーは、タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。 ◇ 友達の流星とサシ飲み中…]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><strong><span class="fz-12px">今作の大園晴秀との関係性／設定</span></strong></td></tr><tr><td class="has-text-align-center" data-align="center"><span class="fz-12px">付き合っている。</span><span class="fz-12px">社会人。</span></td></tr></tbody></table><figcaption class="wp-element-caption">恋愛ミニストーリーは、<br>タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。</figcaption></figure>



<p class="has-text-align-center wp-block-paragraph">◇</p>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>



<li><span class="fz-12px">HTMLとCSSで名前変換とタップ展開をいつも作っているのですが、どこかで打ちミスをしている為、正常に作動しませんでした。反省。急遽、旧verでお送りしています。</span></li>
</ul>



<p class="has-text-align-center is-style-border-thin-and-thick has-border wp-block-paragraph">友達の流星とサシ飲み中…</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">待ってー！それめっちゃありえなくない！？</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-r sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9-150x150.png" alt="アンタ" class="speech-icon-image"/></figure><div class="speech-name">アンタ</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">だよね！？意味わかんないよね！？</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">そういう理不尽な店長がいると、ほんとにテンション下がるよね〜…</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">僕なら耐えらんないよ〜…</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-r sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9-150x150.png" alt="アンタ" class="speech-icon-image"/></figure><div class="speech-name">アンタ</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">いやいや、流星のトーク力があればなんとかなるよ</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">てか、あれ？</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">そういえば、そろそろ晴秀が迎えにきてくれ時間じゃない？</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-r sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9-150x150.png" alt="アンタ" class="speech-icon-image"/></figure><div class="speech-name">アンタ</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">たしかに！もうそろそろかも！</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">男友達とサシ飲みする時は、いつも迎えに来てくれて、ちゃんと家まで送ってくれるんでしょ？</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">愛されてんねー♪</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-r sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9-150x150.png" alt="アンタ" class="speech-icon-image"/></figure><div class="speech-name">アンタ</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">マジ感謝っすわ</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2794-150x150.png" alt="晴秀" class="speech-icon-image"/></figure><div class="speech-name">晴秀</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">ここにいたのか</p>
</div></div>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://azumasweets.com/wp-content/uploads/2025/04/IMG_2798-150x150.png" alt="流星" class="speech-icon-image"/></figure><div class="speech-name">流星</div></div><div class="speech-balloon">
<p class="wp-block-paragraph">さっすが晴秀！噂をしたら来た！！</p>
</div></div>



<div class="wp-block-cocoon-blocks-blank-box-1 blank-box block-box">
<p class="has-text-align-center is-style-question-box has-box-style wp-block-paragraph">続けてなんて言う？</p>



<p class="has-text-align-center wp-block-paragraph"><span class="fz-12px">下の３択の中から1つ選んで</span><span class="fz-12px"><strong><span class="bold-red">タップ</span></strong></span><span class="fz-12px">してください</span></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-3e41869c wp-block-buttons-is-layout-flex">
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/8505-2/">「お疲れ様！晴秀もついでに飲んでいく？」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" href="https://azumasweets.com/8508-2/">「せっかくだし久々に３人で飲もうよ〜」</a></div>



<div class="wp-block-button"><a class="wp-block-button__link has-text-align-center wp-element-button" href="https://azumasweets.com/8511-2/">「晴秀ー！迎えに来てくれてありがとー！」</a></div>
</div>
</div>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛ミニストーリー◆小泉黎❶</title>
		<link>https://azumasweets.com/reirenai/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Thu, 26 Dec 2024 11:32:33 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[小泉黎]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=7608</guid>

					<description><![CDATA[今作の小泉黎との関係性／設定 付き合っている。社内恋愛をしている。黎が先輩。 恋愛ミニストーリーは、タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。 ◇ メッセージシステム スタート 名前を変更 [ [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><strong><span class="fz-12px">今作の小泉黎との関係性／設定</span></strong></td></tr><tr><td class="has-text-align-center" data-align="center"><span class="fz-12px">付き合っている。社内恋愛をしている。</span><span class="fz-12px">黎が先輩。</span></td></tr></tbody></table><figcaption class="wp-element-caption">恋愛ミニストーリーは、<br>タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。</figcaption></figure>



<p class="has-text-align-center wp-block-paragraph">◇</p>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>



<li><span class="fz-12px">画面をタップすると続きが読めます</span></li>



<li><span class="fz-12px"><span class="marker-under-red">ちゃん／さん付で呼ばれたい方は、<span class="red">例）××ちゃん</span>など敬称込みで入力してください↓</span></span></li>
</ul>



<!DOCTYPE html>
<html lang="ja">
<head>
    
    
    <title>メッセージシステム</title>
    <!-- 外部CSSファイルのリンク -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力部分 -->
<div class="name-input">
    <input type="text" id="username" placeholder="名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更部分 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="名前を変更したい方はもう一度入力可能">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス部分 -->
<div class="message-box" style="display:none;">



  <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               （やばい。仕事が終わらない…）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              （今日は一日遅れのクリスマスパーティーをしないといけないのに…！）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               コレ貰っていきますね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/12/d558ccfeb342496f72a66961ec289a6b.png" alt="中央に表示される画像" class="center-image">
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             あっ！大丈夫です！一人で頑張って終わらせます！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                一人でですか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             はい。こうなったのも仕事を断れなかった自分のせいですから
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                なら尚更ですね。半分もらって行きます
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             本当にすみません。今日、クリスマスパーティーを二人でするって分かってたのに、仕事を引き受けてしまって…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                別に謝らなくていいですよ。もう仕方のないことですし、手分けして作業を進めましょうか
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/12/9177aa8acf5dfab639f36379eefdbdf0.png">
    </div>



   <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
    なんとか仕事が終わって帰宅
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              わー！チキン美味しそう…！！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               チキンのあとにはケーキもありますよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               いや〜…本当に、仕事も手伝ってもらって、ご飯も全部用意してもらってありがとうございます
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                いえいえ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                じゃあ早速食べましょうか
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               はい！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


   <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
   〜メシ〜
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              なんか最近って、浮気系の番組が多いですよね〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                そうですね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            うーん。黎さんはどこからが浮気だと思いますか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               さあ。急に言われても具体的には…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              例えば、私が異性と肩組んでたらどう思いますか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                ちょっとどういう状況か分かりませんね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              そうですか…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              へ〜〜。最近は女の人の方が浮気するらしいですよ。ドラマの影響とかですかね？最近そういうドラマ多いですし
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               どうですかね。ドラマ関係なく、する人はするし、しない人はしないと思いますけど
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             あ！じゃあ、もし、私が浮気したらどう思いますか？この番組のカップルと同じような感じで！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               おや。残業にチキンの予約ときて、その次は浮気ですか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              いや、話の流れでもしも話をしただけですよ…！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              知ってますよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              <span class="username">[訪問者]</span>は、そんな悪いこと出来ませんからね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/12/340028b2f26f82e61f9f88bcfd3274fe.png" alt="中央に表示される画像" class="center-image">
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               もちろんです！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              それに、こんなに出来る彼氏がいたら目移りしないですよね。本当に神様仏様黎様です。仕事のフォローから何から何までいつもありがとうございます…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               全部気にしなくていいですよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                それより、そろそろケーキを食べましょうか
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ですね！何等分にしますか？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/dd9261692c307f759ea04baca11c16d1.png" alt=“黎のアイコン" class="icon">
            <span class="sender-name">小泉黎</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               お好きなだけどうぞ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              やったー！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
       FIN
    </div>

    <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
    ※ヘアアレンジは和久と流星に協力していただきました。
    </div>

</div>

<!-- スクリプト部分 -->
<script>
    const messages = document.querySelectorAll('.message-left, .message-right, .image-container, .center-box');
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');
    let currentMessage = 0;

    // 保存された名前がある場合はそれを使用する
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none'; // 名前入力ボックスを隠す
        messageBox.style.display = 'block'; // メッセージボックスを表示
        nameChangeBox.style.display = 'block'; // 名前変更ボックスを表示
        showNextMessage();
    }

    // スタートボタンが押されたときの処理
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username); // 名前を保存
            nameInputBox.style.display = 'none'; // 名前入力ボックスを隠す
            messageBox.style.display = 'block'; // メッセージボックスを表示
            nameChangeBox.style.display = 'block'; // 名前変更ボックスを表示
            showNextMessage();
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更機能
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername); // 名前を上書き保存
        } else {
            alert('新しい名前を入力してください');
        }
    });

    // メッセージを1つずつ表示
    function showNextMessage() {
        if (currentMessage < messages.length) {
            messages[currentMessage].style.display = 'flex';
            currentMessage++;
        }
    }

    // クリックすると次のメッセージや画像、ボックスが表示される
    document.addEventListener('click', () => {
        showNextMessage();
    });
</script>

</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛ミニストーリー◆萩颯❶</title>
		<link>https://azumasweets.com/renaihayate/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Wed, 27 Nov 2024 11:23:43 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[萩颯]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=7375</guid>

					<description><![CDATA[今作の萩颯との関係性／設定 近所の幼馴染。最近はあまり話せてない。 恋愛ミニストーリーは、タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。 ◇ メッセージシステム スタート 名前を変更 [訪問者]  [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><strong><span class="fz-12px">今作の萩颯との関係性／設定</span></strong></td></tr><tr><td class="has-text-align-center" data-align="center"><span class="fz-12px">近所の幼馴染。最近はあまり話せてない。</span></td></tr></tbody></table><figcaption class="wp-element-caption">恋愛ミニストーリーは、<br>タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。</figcaption></figure>



<p class="has-text-align-center wp-block-paragraph">◇</p>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>



<li><span class="fz-12px">画面をタップすると続きが読めます</span></li>



<li><span class="fz-12px"><span class="marker-under-red">ちゃん／さん付で呼ばれたい方は、<span class="red">例）××ちゃん</span>など敬称込みで入力してください↓</span></span></li>
</ul>



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メッセージシステム</title>
    <!-- 外部CSSファイルのリンク -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力部分 -->
<div class="name-input">
    <input type="text" id="username" placeholder="名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更部分 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="名前を変更したい方はもう一度入力可能">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス部分 -->
<div class="message-box" style="display:none;">


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              えっぐ！寒すぎ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              チクショ〜〜バイト休みて〜〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あれ？<span class="username">[訪問者]</span>？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/11/7d904792d594dfe2682be0126d603536.png" alt="中央に表示される画像" class="center-image">
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              え！！颯！？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               久しぶり！今帰り？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                そうだよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                <span class="username">[訪問者]</span>は？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              今からバイト！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               そっか。大変だね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                ……
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               せっかくだし、駅まで一緒に行こうかな
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            え？いいの！？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               うん
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             やった！ラッキー！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



    <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
     駅到着
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              （結局、自分ばっか喋ってたなー）
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               じゃあ、バイト頑張ってね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               うん！ありがと！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ……
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               寒いから、颯も風邪ひかないように気をつけてね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              うん
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あ。そうだ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                カイロいる？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
いいの！？                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                うん。ずっと寒そうにしてたから
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               はい。貼るタイプしか持ってないけど…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/11/5af28e9cd2e54fc180ba963b481d1f2c.png" alt="中央に表示される画像" class="center-image">
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               嬉しいよ！助かる！ありがとう！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               じゃあ、そろそろ行っくね！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                うん
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                ……
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                ねえ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ん？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                また……こうやって話せるかな？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              うん！また話そ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               そうだ！じゃあ、今日バイト終わったら電話してもいい？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               さっきみたいに自分の話をずっと聞かせる感じになるかもだけど…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                いいよ。<span class="username">[訪問者]</span>の話を聞くのすごく好きだから。電話してくれると嬉しいな
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               じゃあ、また電話するね！ばいばい！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/4da70697b797d0d125eaabe36887ed90.png" alt=“颯のアイコン" class="icon">
            <span class="sender-name">萩颯</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               うん。バイト頑張ってね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/11/39c36db0cc1696f8c2ca8580aff3c92d.png" alt="中央に表示される画像" class="center-image">
    </div>







 <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
       FIN
    </div>

    <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
    ※ヘアアレンジは和久と流星に協力していただきました。
    </div>

</div>

<!-- スクリプト部分 -->
<script>
    const messages = document.querySelectorAll('.message-left, .message-right, .image-container, .center-box');
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');
    let currentMessage = 0;

    // 保存された名前がある場合はそれを使用する
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none'; // 名前入力ボックスを隠す
        messageBox.style.display = 'block'; // メッセージボックスを表示
        nameChangeBox.style.display = 'block'; // 名前変更ボックスを表示
        showNextMessage();
    }

    // スタートボタンが押されたときの処理
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username); // 名前を保存
            nameInputBox.style.display = 'none'; // 名前入力ボックスを隠す
            messageBox.style.display = 'block'; // メッセージボックスを表示
            nameChangeBox.style.display = 'block'; // 名前変更ボックスを表示
            showNextMessage();
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更機能
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername); // 名前を上書き保存
        } else {
            alert('新しい名前を入力してください');
        }
    });

    // メッセージを1つずつ表示
    function showNextMessage() {
        if (currentMessage < messages.length) {
            messages[currentMessage].style.display = 'flex';
            currentMessage++;
        }
    }

    // クリックすると次のメッセージや画像、ボックスが表示される
    document.addEventListener('click', () => {
        showNextMessage();
    });
</script>

</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>恋愛ミニストーリー◆右京和久❶</title>
		<link>https://azumasweets.com/renaiwaku1/</link>
		
		<dc:creator><![CDATA[purin]]></dc:creator>
		<pubDate>Sun, 13 Oct 2024 11:10:34 +0000</pubDate>
				<category><![CDATA[恋愛ミニゲーム]]></category>
		<category><![CDATA[右京和久]]></category>
		<guid isPermaLink="false">https://azumasweets.com/?p=7018</guid>

					<description><![CDATA[今作の右京和久との関係性／設定 恋人。ハロウィン遊園地編。 恋愛ミニストーリーは、タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。 ◇ メッセージシステム スタート 名前を変更 [訪問者] ねー。今 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<figure class="wp-block-table"><table class="has-fixed-layout"><tbody><tr><td class="has-text-align-center" data-align="center"><strong><span class="fz-12px">今作の右京和久との関係性／設定</span></strong></td></tr><tr><td class="has-text-align-center" data-align="center"><span class="fz-12px">恋人。ハロウィン遊園地編</span><span class="fz-12px">。</span></td></tr></tbody></table><figcaption class="wp-element-caption">恋愛ミニストーリーは、<br>タレント本人に答えてもらった恋愛アンケートを元に誇張して作っています。</figcaption></figure>



<p class="has-text-align-center wp-block-paragraph">◇</p>



<ul class="wp-block-list">
<li><span class="fz-12px">スクショ転載NG（全SNS）</span></li>



<li><span class="fz-12px">画面をタップすると続きが読めます</span></li>



<li><span class="fz-12px"><span class="marker-under-red">ちゃん／さん付で呼ばれたい方は、<span class="red">例）××ちゃん</span>など敬称込みで入力してください↓</span></span></li>
</ul>



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メッセージシステム</title>
    <!-- 外部CSSファイルのリンク -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- 名前入力部分 -->
<div class="name-input">
    <input type="text" id="username" placeholder="名前を入力してください">
    <button id="start">スタート</button>
</div>

<!-- 名前変更部分 -->
<div class="name-change" style="display:none;">
    <input type="text" id="new-username" placeholder="名前を変更したい方はもう一度入力可能">
    <button id="change-name">名前を変更</button>
</div>

<!-- メッセージボックス部分 -->
<div class="message-box" style="display:none;">



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
       ねー。今度の日曜日空いてる？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
           うん。どこか行きたいの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              遊園地に行かない？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            今、ハロウィンじゃん？だから、仮装して行きたいなーって
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               いいね！お互い仮装していこうよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/10/7a366d383bc3066afd90ba9fbf2b1caa.png" alt="中央に表示される画像" class="center-image">
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                やりたい仮装とかってもう決まってるの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             うん！このキョンシーの仮装とかいいかなーって
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                えっ！キョンシー…？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              そう！柄が可愛いんだよねー
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ちょっと写真見せてよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              いいよ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>

<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             これ！どう？可愛くない？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ダメダメ！こんなに短いスカートダメだよ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               なんでー！？みんなこんな感じだよ？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                だーめ！絶対ダメ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              こんな短いスカート履いたら、遊園地いる男全員が<span class="username">[訪問者]</span>
のことチラチラ見るじゃん
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              へえ。ミニスカの女の子がいたらチラチラ見るんだ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                僕は見ないよ！？<span class="username">[訪問者]</span>がいるからね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                うーん……
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             でも、やっぱり危ないよ
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



<!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             え〜〜もうダルい〜〜全然危なくないよ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                そうだ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                そんなに着たいなら、家で着ればいいんじゃない？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/10/e5c028ff24ecaebdccaf7a65f5c7c5bd.png" alt="中央に表示される画像" class="center-image">
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                家の中だった、<span class="username">[訪問者]</span>の気が済むまで存分に着てもらったらいいし！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              それじゃ意味ない！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ほら！このロングスカートのとかどう？可愛いよ？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             いや、絶対にこっちのを着て行く！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あ！この仮装とか似合うんじゃない？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あ〜〜。まあ…それなら可愛いかも…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              うん！絶対に似合うよ！絶対可愛い！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>

 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               じゃあ、これで決まり♪
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




  <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
      遊園地当日
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               やっぱり何度見ても可愛いね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              ありがとー
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あ！見て！写真スポットあるよ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あの写真スポット、<span class="username">[訪問者]</span>の仮装といい感じに合いそうじゃない？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               あー。たしかに
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
            誰もいないし、せっかくだから撮っちゃう？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               いや、いいよー。なんか恥ずかしいし
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                まあまあ、そう言わずに
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>




  <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
      写真スポット
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                いや〜〜〜可愛いな〜〜〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               右から撮っても左から撮っても可愛い〜〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                <span class="username">[訪問者]</span>、こっち見てニコって笑ってみて！                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ねえ、まだ？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                いやー、誰もいなし、<span class="username">[訪問者]</span>が可愛いからついつい…
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                それにしても可愛いな〜〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                そうだ！これロック画面にしてもいい？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
              別にいいけど、恥ずかしくないの？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>






 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
             バカップルみたいで馬鹿にされない？
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               僕は気にしないよ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ロック画面見て癒されるし
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ……
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               照れた顔も可愛いね
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
                せっかくだし、照れた顔も写真撮っておこっと
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


  <!-- 中央の画像を追加 -->
    <div class="message-center image-container" style="display: none;">
        <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/10/1c5983ae93a822b95e52f5565526a2fb.png" alt="中央に表示される画像" class="center-image">
    </div>



 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               ちょっと！今の絶対半目でしょ！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>



 <!-- 吹き出し本文より上（左用） -->
    <div class="message-left">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2023/07/cc9a665eb2358cb6dddefe29b4d59471.png" alt=“和久のアイコン" class="icon">
            <span class="sender-name">右京和久</span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               うわ〜〜どの写真をロック画面にしようか迷うな〜
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>


 <!-- 吹き出し本文より上（右用） -->
    <div class="message-right">
        <!-- アイコンと名前を設定 -->
        <div class="icon-container">
            <img decoding="async" src="https://azumasweets.com/wp-content/uploads/2024/03/bb97f95f2e70568f552c755130bd7ee9.png" alt="訪問者のアイコン" class="icon">
            <span class="sender-name"><span class="username">[訪問者]</span></span> <!-- アイコンの下に名前 -->
        </div>
        <div class="message-content">
            <div class="message">
                <!-- ここから本文が始まります -->
               コラ！人の話聞け！
                <!-- ここまで本文が続きます -->
            </div>
        </div>
    </div>






 <!-- 中央のボックス -->
    <div class="center-box" style="display: none;">
       FIN
    </div>


</div>

<!-- スクリプト部分 -->
<script>
    const messages = document.querySelectorAll('.message-left, .message-right, .image-container, .center-box');
    const startButton = document.querySelector('#start');
    const changeNameButton = document.querySelector('#change-name');
    const messageBox = document.querySelector('.message-box');
    const nameInputBox = document.querySelector('.name-input');
    const nameChangeBox = document.querySelector('.name-change');
    let currentMessage = 0;

    // 保存された名前がある場合はそれを使用する
    const storedName = localStorage.getItem('username');
    if (storedName) {
        document.querySelectorAll('.username').forEach(el => {
            el.textContent = storedName;
        });
        nameInputBox.style.display = 'none'; // 名前入力ボックスを隠す
        messageBox.style.display = 'block'; // メッセージボックスを表示
        nameChangeBox.style.display = 'block'; // 名前変更ボックスを表示
        showNextMessage();
    }

    // スタートボタンが押されたときの処理
    startButton.addEventListener('click', () => {
        const username = document.getElementById('username').value;
        if (username) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = username;
            });
            localStorage.setItem('username', username); // 名前を保存
            nameInputBox.style.display = 'none'; // 名前入力ボックスを隠す
            messageBox.style.display = 'block'; // メッセージボックスを表示
            nameChangeBox.style.display = 'block'; // 名前変更ボックスを表示
            showNextMessage();
        } else {
            alert('名前を入力してください');
        }
    });

    // 名前変更機能
    changeNameButton.addEventListener('click', () => {
        const newUsername = document.getElementById('new-username').value;
        if (newUsername) {
            document.querySelectorAll('.username').forEach(el => {
                el.textContent = newUsername;
            });
            localStorage.setItem('username', newUsername); // 名前を上書き保存
        } else {
            alert('新しい名前を入力してください');
        }
    });

    // メッセージを1つずつ表示
    function showNextMessage() {
        if (currentMessage < messages.length) {
            messages[currentMessage].style.display = 'flex';
            currentMessage++;
        }
    }

    // クリックすると次のメッセージや画像、ボックスが表示される
    document.addEventListener('click', () => {
        showNextMessage();
    });
</script>

</body>
</html>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
