<?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>ミニツール &#8211; 服部倶楽部</title>
	<atom:link href="https://ten.osbowner.com/category/test/%e3%83%9f%e3%83%8b%e3%83%84%e3%83%bc%e3%83%ab/feed" rel="self" type="application/rss+xml" />
	<link>https://ten.osbowner.com</link>
	<description></description>
	<lastBuildDate>Wed, 17 Jun 2026 05:01:29 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=7.1.4</generator>
	<item>
		<title>miniツール-動物</title>
		<link>https://ten.osbowner.com/mini-mbti</link>
		
		<dc:creator><![CDATA[cooltak]]></dc:creator>
		<pubDate>Wed, 17 Jun 2026 05:00:12 +0000</pubDate>
				<category><![CDATA[テスト用]]></category>
		<category><![CDATA[ミニツール]]></category>
		<guid isPermaLink="false">https://ten.osbowner.com/?p=2283</guid>

					<description><![CDATA[動物キャラMBTI診断 性格タイプ診断 どうぶつMBTI診断 8つの質問でわかる、あなたの動物タイプ 🦉🐈🦁🦊🐺 診断をはじめる 質問 1 / 8 ← 戻る YOUR TYPE 𝕏 で結果をシェアする もう一度診断する]]></description>
										<content:encoded><![CDATA[
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>動物キャラMBTI診断</title>
  <style>
    /* 他のスタイルとの干渉を防ぐための専用スコープ */
    .mbti-tool-wrap {
      width: 100%;
      max-width: 480px;
      margin: 20px auto;
      padding: 0 12px;
      box-sizing: border-box;
      font-family: 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
      color: #4E453E;
      line-height: 1.6;
    }

    .mbti-tool-wrap *, .mbti-tool-wrap *:before, .mbti-tool-wrap *:after {
      box-sizing: border-box;
    }

    /* メインカード */
    .mbti-card-container {
      background: #FFFDF9;
      border: 2px solid #F5EFEB;
      border-radius: 24px;
      box-shadow: 0 12px 28px rgba(140, 130, 122, 0.08);
      padding: 32px 24px;
      text-align: center;
      overflow: hidden;
      position: relative;
    }

    /* フェードインアニメーション */
    @keyframes mbtiFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .mbti-fade-in {
      animation: mbtiFadeIn 0.4s ease forwards;
    }

    /* スタート画面 */
    .mbti-start-badge {
      display: inline-block;
      background: #F1F6F0;
      color: #7EA172;
      font-size: 13px;
      font-weight: bold;
      padding: 6px 16px;
      border-radius: 30px;
      margin-bottom: 16px;
    }

    .mbti-start-title {
      font-size: 26px;
      font-weight: 800;
      color: #4E453E;
      margin: 0 0 8px 0;
      line-height: 1.3;
    }

    .mbti-start-subtitle {
      font-size: 14px;
      color: #8C827A;
      margin: 0 0 28px 0;
    }

    .mbti-start-emoji-grid {
      font-size: 42px;
      margin: 24px 0;
      letter-spacing: 6px;
      animation: mbtiFloat 3s ease-in-out infinite alternate;
    }

    @keyframes mbtiFloat {
      0% { transform: translateY(0); }
      100% { transform: translateY(-8px); }
    }

    /* 共通ボタン */
    .mbti-btn-primary {
      display: inline-block;
      background: #7EA172;
      color: #FFFFFF;
      font-size: 16px;
      font-weight: bold;
      padding: 16px 40px;
      border-radius: 30px;
      border: none;
      cursor: pointer;
      transition: all 0.2s ease;
      box-shadow: 0 6px 20px rgba(126, 161, 114, 0.25);
      width: 100%;
      max-width: 280px;
      text-decoration: none;
    }

    .mbti-btn-primary:hover {
      background: #6C8E61;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(126, 161, 114, 0.35);
    }

    .mbti-btn-primary:active {
      transform: translateY(1px);
    }

    /* 質問画面 */
    .mbti-progress-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }

    .mbti-progress-title {
      font-size: 13px;
      font-weight: bold;
      color: #8C827A;
    }

    .mbti-progress-text {
      font-size: 14px;
      font-weight: bold;
      color: #7EA172;
    }

    .mbti-progress-bar-bg {
      width: 100%;
      height: 8px;
      background: #EFECE6;
      border-radius: 4px;
      margin-bottom: 32px;
      overflow: hidden;
    }

    .mbti-progress-bar-fill {
      height: 100%;
      background: #7EA172;
      border-radius: 4px;
      width: 0%;
      transition: width 0.3s ease;
    }

    .mbti-q-text-wrap {
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 32px;
    }

    .mbti-q-text {
      font-size: 18px;
      font-weight: bold;
      line-height: 1.5;
      color: #4E453E;
      margin: 0;
    }

    .mbti-options-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-bottom: 32px;
    }

    .mbti-option-btn {
      background: #FFFFFF;
      border: 2px solid #EFECE6;
      border-radius: 16px;
      padding: 18px 20px;
      font-size: 15px;
      font-weight: bold;
      color: #4E453E;
      cursor: pointer;
      transition: all 0.2s ease;
      text-align: left;
      line-height: 1.4;
      box-shadow: 0 4px 6px rgba(140, 130, 122, 0.02);
    }

    .mbti-option-btn:hover {
      border-color: #7EA172;
      background: #F1F6F0;
    }

    .mbti-option-btn.active {
      border-color: #7EA172;
      background: #7EA172;
      color: #FFFFFF;
      box-shadow: 0 4px 12px rgba(126, 161, 114, 0.25);
    }

    .mbti-option-btn:active {
      transform: scale(0.98);
    }

    .mbti-prev-btn {
      background: none;
      border: none;
      color: #8C827A;
      font-size: 13px;
      font-weight: bold;
      cursor: pointer;
      transition: color 0.2s ease;
      padding: 8px 16px;
    }

    .mbti-prev-btn:hover {
      color: #4E453E;
    }

    /* 結果画面 */
    .mbti-res-label {
      font-size: 13px;
      font-weight: bold;
      color: #8C827A;
      letter-spacing: 1px;
      margin-bottom: 4px;
    }

    .mbti-res-emoji-box {
      font-size: 84px;
      margin: 12px 0;
      line-height: 1;
      animation: mbtiBounce 1.2s infinite alternate ease-in-out;
    }

    @keyframes mbtiBounce {
      0% { transform: translateY(0) scale(1); }
      100% { transform: translateY(-12px) scale(1.04); }
    }

    .mbti-res-animal {
      font-size: 28px;
      font-weight: 800;
      color: #4E453E;
      margin: 0 0 4px 0;
    }

    .mbti-res-title-mbti {
      font-size: 16px;
      font-weight: bold;
      color: #7EA172;
      background: #F1F6F0;
      display: inline-block;
      padding: 6px 18px;
      border-radius: 20px;
      margin-bottom: 24px;
    }

    .mbti-res-desc-box {
      background: #FDFBF7;
      border: 1px solid #EFECE6;
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 28px;
      text-align: left;
    }

    .mbti-res-desc {
      font-size: 14.5px;
      line-height: 1.6;
      color: #5E5349;
      margin: 0;
    }

    .mbti-res-chars {
      display: flex;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 32px;
    }

    .mbti-char-box {
      flex: 1;
      background: #FFFFFF;
      border: 1px solid #EFECE6;
      border-radius: 12px;
      padding: 12px 4px;
      box-shadow: 0 4px 10px rgba(140, 130, 122, 0.03);
    }

    .mbti-char-letter {
      font-size: 20px;
      font-weight: 800;
      color: #7EA172;
      line-height: 1.2;
    }

    .mbti-char-label {
      font-size: 11px;
      font-weight: bold;
      color: #4E453E;
      margin: 4px 0 2px 0;
    }

    .mbti-char-sub {
      font-size: 9px;
      color: #8C827A;
      display: inline-block;
      transform: scale(0.9);
      white-space: nowrap;
    }

    .mbti-action-group {
      display: flex;
      flex-direction: column;
      gap: 12px;
      align-items: center;
    }

    .mbti-btn-share {
      background: #4FA0E0;
      color: #FFFFFF;
      font-size: 15px;
      font-weight: bold;
      padding: 14px 24px;
      border-radius: 30px;
      border: none;
      cursor: pointer;
      width: 100%;
      max-width: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-decoration: none;
      box-shadow: 0 4px 12px rgba(79, 160, 224, 0.25);
      transition: all 0.2s ease;
    }

    .mbti-btn-share:hover {
      background: #3B8ECF;
      transform: translateY(-2px);
    }

    .mbti-btn-restart {
      background: none;
      border: 2px solid #EFECE6;
      color: #8C827A;
      font-size: 14px;
      font-weight: bold;
      padding: 12px 24px;
      border-radius: 30px;
      cursor: pointer;
      width: 100%;
      max-width: 280px;
      transition: all 0.2s ease;
    }

    .mbti-btn-restart:hover {
      background: #EFECE6;
      color: #4E453E;
    }

    /* エラー表示エリア */
    .mbti-error-msg {
      background: #FFF2F2;
      border: 1px solid #FBD5D5;
      color: #DE350B;
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 20px;
      font-size: 13.5px;
      font-weight: bold;
    }
  </style>
</head>
<body>

<div class="mbti-tool-wrap">
  <div class="mbti-card-container">

    <!-- エラーメッセージ -->
    <div id="mbti-error-msg" class="mbti-error-msg" style="display: none;"></div>

    <!-- スタート画面 -->
    <div id="mbti-start-view" class="mbti-fade-in">
      <div class="mbti-start-hero">
        <span class="mbti-start-badge">性格タイプ診断</span>
        <h1 class="mbti-start-title">どうぶつMBTI診断</h1>
        <p class="mbti-start-subtitle">8つの質問でわかる、あなたの動物タイプ</p>
        <div class="mbti-start-emoji-grid"><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f989.png" alt="🦉" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f408.png" alt="🐈" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f981.png" alt="🦁" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f98a.png" alt="🦊" class="wp-smiley" style="height: 1em; max-height: 1em;" /><img src="https://s.w.org/images/core/emoji/17.0.2/72x72/1f43a.png" alt="🐺" class="wp-smiley" style="height: 1em; max-height: 1em;" /></div>
      </div>
      <button class="mbti-btn-primary" onclick="showStep(1)">診断をはじめる</button>
    </div>

    <!-- 質問画面 -->
    <div id="mbti-question-view" style="display: none;">
      <div class="mbti-progress-header">
        <span class="mbti-progress-title">質問</span>
        <span id="mbti-progress-text" class="mbti-progress-text">1 / 8</span>
      </div>
      <div class="mbti-progress-bar-bg">
        <div id="mbti-progress-fill" class="mbti-progress-bar-fill"></div>
      </div>

      <div class="mbti-q-text-wrap">
        <p id="mbti-q-text" class="mbti-q-text"></p>
      </div>

      <div id="mbti-options-container" class="mbti-options-list">
        <!-- JSでボタンを動的追加 -->
      </div>

      <button id="mbti-prev-btn" class="mbti-prev-btn" onclick="prevQuestion()">← 戻る</button>
    </div>

    <!-- 結果画面 -->
    <div id="mbti-result-view" style="display: none;" class="mbti-fade-in">
      <div class="mbti-res-label">YOUR TYPE</div>
      <div id="mbti-res-emoji" class="mbti-res-emoji-box"></div>
      <h2 id="mbti-res-animal" class="mbti-res-animal"></h2>
      <div id="mbti-res-title-mbti" class="mbti-res-title-mbti"></div>

      <div class="mbti-res-desc-box">
        <p id="mbti-res-desc" class="mbti-res-desc"></p>
      </div>

      <!-- 4文字のブロック表示 -->
      <div id="mbti-res-chars-container" class="mbti-res-chars">
        <!-- JSで4ブロックを追加 -->
      </div>

      <div class="mbti-action-group">
        <!-- X(Twitter)共有用リンク -->
        <a id="mbti-share-btn" class="mbti-btn-share" href="#" target="_blank" rel="noopener noreferrer">
          <span>𝕏 で結果をシェアする</span>
        </a>
        <button class="mbti-btn-restart" onclick="restartApp()">もう一度診断する</button>
      </div>
    </div>

  </div>
</div>

<script>
  // 質問データ（8問）
  const questions = [
    {
      id: 1,
      text: "みんなでワイワイ集まった帰り道は？",
      options: [
        { text: "楽しかった！二次会も行きたい", type: "E" },
        { text: "楽しかったけど早く帰って一人になりたい", type: "I" }
      ]
    },
    {
      id: 2,
      text: "休日に急に「今から遊ばない？」と誘われたら？",
      options: [
        { text: "いいね、すぐ行く！", type: "E" },
        { text: "今日は家でゆっくりしたい", type: "I" }
      ]
    },
    {
      id: 3,
      text: "友達と話していて盛り上がるのは？",
      options: [
        { text: "実際にあった出来事や体験談", type: "S" },
        { text: "「もし〜だったら」という空想やアイデア", type: "N" }
      ]
    },
    {
      id: 4,
      text: "旅行の準備は？",
      options: [
        { text: "名所やお店を具体的に調べる", type: "S" },
        { text: "現地での新しい出会いを想像してワクワクする", type: "N" }
      ]
    },
    {
      id: 5,
      text: "友達に「仕事辞めたい」と相談されたら？",
      options: [
        { text: "どうするのがいいか解決策を一緒に考える", type: "T" },
        { text: "まず辛い気持ちに共感する", type: "F" }
      ]
    },
    {
      id: 6,
      text: "買い物でモノを選ぶとき？",
      options: [
        { text: "スペックや値段で一番お得なものを選ぶ", type: "T" },
        { text: "「これ好き！」という直感やトキメキで選ぶ", type: "F" }
      ]
    },
    {
      id: 7,
      text: "旅行当日のスケジュールは？",
      options: [
        { text: "きっちり決めて計画通りに動きたい", type: "J" },
        { text: "その時の気分で自由に動きたい", type: "P" }
      ]
    },
    {
      id: 8,
      text: "子どもの頃、夏休みの宿題は？",
      options: [
        { text: "計画を立てて早めにコツコツ終わらせた", type: "J" },
        { text: "最終日あたりに焦って一気に片付けた", type: "P" }
      ]
    }
  ];

  // 16タイプの詳細データ
  const typeDetails = {
    INTJ: { name: "フクロウ", title: "建築家", emoji: "&#x1f989;", desc: "独自の視点と強い意志を持ち、物事を深く分析して戦略的に進める知的な戦略家タイプです。" },
    INTP: { name: "ネコ", title: "論理学者", emoji: "&#x1f408;", desc: "好奇心旺盛で極めてマイペース。独創的な発想と、ロジカルに筋道を通して考えるのが得意なアイデアマンです。" },
    ENTJ: { name: "ライオン", title: "指揮官", emoji: "&#x1f981;", desc: "高い目標に向かって周囲を導く頼れるリーダー。困難を恐れず、効率よく計画をやり遂げるカリスマ性を持ちます。" },
    ENTP: { name: "キツネ", title: "討論者", emoji: "&#x1f98a;", desc: "頭の回転が速くユーモア抜群。新しい可能性を見つけるのが得意で、スリリングな挑戦にワクワクする開拓者です。" },
    INFJ: { name: "オオカミ", title: "提唱者", emoji: "&#x1f43a;", desc: "静かで控えめですが、心には熱い理想を秘めています。人の心の本質を見抜き、優しく寄り添う温かい心の持ち主です。" },
    INFP: { name: "シカ", title: "仲介者", emoji: "&#x1f98c;", desc: "感受性が豊かで、自分の価値観をとても大切にします。思いやり深く、独自の世界観を愛するロマンチストです。" },
    ENFJ: { name: "イルカ", title: "主人公", emoji: "&#x1f42c;", desc: "周囲を明るく元気にする天性の魅力があります。共感力が高く、チーム全体の幸せのために親身にサポートできます。" },
    ENFP: { name: "ラッコ", title: "運動家", emoji: "&#x1f9a6;", desc: "自由奔放でエネルギー満点！人懐っこくて愛嬌があり、周りの人たちを巻き込んで笑顔を届ける人気者です。" },
    ISTJ: { name: "ビーバー", title: "管理者", emoji: "&#x1f9ab;", desc: "責任感が極めて強く、約束事や秩序をきっちり守ります。何事も正確に、誠実かつコツコツこなす信頼の厚い人です。" },
    ISFJ: { name: "イヌ", title: "擁護者", emoji: "&#x1f436;", desc: "誰に対しても親切で誠実。周囲の小さな変化によく気づき、縁の下の力持ちとしてそっと大切な人を支えるのが得意です。" },
    ESTJ: { name: "ゾウ", title: "幹部", emoji: "&#x1f418;", desc: "常識やルールを重んじるしっかり者。現実的で行動力があり、物事を効率よく計画的に整理・管理する安定感があります。" },
    ESFJ: { name: "ミツバチ", title: "領事官", emoji: "&#x1f41d;", desc: "社交的でホスピタリティ精神にあふれるお世話係。集まりの調和を何よりも大切にし、みんなを喜ばせるのが大好きです。" },
    ISTP: { name: "ヒョウ", title: "巨匠", emoji: "&#x1f406;", desc: "常にクールで落ち着きがあります。状況を静かに観察し、いざとなれば臨機応変に課題を解決する実戦肌のアスリートです。" },
    ISFP: { name: "パンダ", title: "冒険家", emoji: "&#x1f43c;", desc: "優しく平和主義で、今この瞬間を心地よく生きることを好みます。独自の美的センスやこだわりを持つ芸術家肌です。" },
    ESTP: { name: "トラ", title: "起業家", emoji: "&#x1f42f;", desc: "行動力バツグンで、何事もダイレクトに体感したいタイプ。目の前のチャンスを瞬時に掴み取る、エネルギーにあふれた人です。" },
    ESFP: { name: "サル", title: "エンターテイナー", emoji: "&#x1f435;", desc: "毎日を全力で楽しむお祭り人間！場を明るく盛り上げるのが得意で、周囲に常に楽しい刺激を与えるムードメーカーです。" }
  };

  // 4文字ごとのラベル定義（スマホサイズに配慮して極めて簡潔に）
  const dimensionLabels = {
    E: { label: "外向", desc: "社交的" },
    I: { label: "内向", desc: "自分時間" },
    S: { label: "感覚", desc: "現実重視" },
    N: { label: "直観", desc: "未来創造" },
    T: { label: "思考", desc: "客観判断" },
    F: { label: "感情", desc: "共感重視" },
    J: { label: "計画", desc: "計画的" },
    P: { label: "柔軟", desc: "臨機応変" }
  };

  // アプリケーションの状態
  let currentStep = 0; // 0:スタート, 1~8:質問, 9:結果
  const answers = { 1: null, 2: null, 3: null, 4: null, 5: null, 6: null, 7: null, 8: null };

  // ステップ（画面）表示制御
  function showStep(step) {
    currentStep = step;
    
    // エラーメッセージの初期化
    hideError();

    // 全てのビューを隠す
    document.getElementById('mbti-start-view').style.display = 'none';
    document.getElementById('mbti-question-view').style.display = 'none';
    document.getElementById('mbti-result-view').style.display = 'none';

    if (step === 0) {
      document.getElementById('mbti-start-view').style.display = 'block';
    } else if (step >= 1 && step <= 8) {
      document.getElementById('mbti-question-view').style.display = 'block';
      renderQuestion(step);
    } else if (step === 9) {
      document.getElementById('mbti-result-view').style.display = 'block';
    }
  }

  // 質問のレンダリング
  function renderQuestion(step) {
    const q = questions[step - 1];

    // 質問文と進捗の更新
    document.getElementById('mbti-q-text').innerText = q.text;
    document.getElementById('mbti-progress-text').innerText = `${step} / 8`;
    document.getElementById('mbti-progress-fill').style.width = `${(step / 8) * 100}%`;

    // 選択肢のクリア＆追加
    const optionsContainer = document.getElementById('mbti-options-container');
    optionsContainer.innerHTML = '';

    q.options.forEach(opt => {
      const btn = document.createElement('button');
      btn.className = 'mbti-option-btn';
      btn.innerText = opt.text;

      // すでに回答済みならアクティブ状態をキープ
      if (answers[step] === opt.type) {
        btn.classList.add('active');
      }

      btn.onclick = () => {
        // 解答を記録
        answers[step] = opt.type;

        // 見た目のアクティブ切替
        const allButtons = optionsContainer.querySelectorAll('.mbti-option-btn');
        allButtons.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');

        // 少しだけ余韻を持たせて次の質問に自動スライド
        setTimeout(() => {
          if (step < 8) {
            showStep(step + 1);
          } else {
            calculateResult();
          }
        }, 350);
      };

      optionsContainer.appendChild(btn);
    });

    // 戻るボタンのラベル変更
    const prevBtn = document.getElementById('mbti-prev-btn');
    if (step === 1) {
      prevBtn.innerText = "← 最初に戻る";
    } else {
      prevBtn.innerText = "← 前の質問に戻る";
    }
  }

  // 「戻る」ボタンのアクション
  function prevQuestion() {
    if (currentStep > 1) {
      showStep(currentStep - 1);
    } else if (currentStep === 1) {
      showStep(0);
    }
  }

  // 結果の判定ロジック
  function calculateResult() {
    // 全問回答チェック
    const unanswered = [];
    for (let i = 1; i <= 8; i++) {
      if (!answers[i]) {
        unanswered.push(i);
      }
    }

    if (unanswered.length > 0) {
      showError("すべての質問に答えてください。");
      showStep(unanswered[0]); // 未回答の最初の質問へ戻す
      return;
    }

    // 各タイプ値の計算
    const score = { E: 0, I: 0, S: 0, N: 0, T: 0, F: 0, J: 0, P: 0 };
    for (let i = 1; i <= 8; i++) {
      score[answers[i]]++;
    }

    // 各指標で点数の多い方を採用（同点の場合は I, N, F, P を優先とし日本人に馴染みやすい傾向にします）
    const EI = score['E'] > score['I'] ? 'E' : 'I';
    const SN = score['S'] > score['N'] ? 'S' : 'N';
    const TF = score['T'] > score['F'] ? 'T' : 'F';
    const JP = score['J'] > score['P'] ? 'J' : 'P';

    const mbtiResult = EI + SN + TF + JP;
    displayResult(mbtiResult);
  }

  // 結果表示の描画
  function displayResult(type) {
    const data = typeDetails[type];
    if (!data) return;

    // 結果ビューに切り替え
    showStep(9);

    // テキスト反映
    document.getElementById('mbti-res-emoji').innerText = data.emoji;
    document.getElementById('mbti-res-animal').innerText = `${data.name}タイプ`;
    document.getElementById('mbti-res-title-mbti').innerText = `${data.title} (${type})`;
    document.getElementById('mbti-res-desc').innerText = data.desc;

    // 4ブロックのラベル生成
    const charsContainer = document.getElementById('mbti-res-chars-container');
    charsContainer.innerHTML = '';

    const letters = type.split('');
    letters.forEach(letter => {
      const info = dimensionLabels[letter];
      const box = document.createElement('div');
      box.className = 'mbti-char-box';
      box.innerHTML = `
        <div class="mbti-char-letter">${letter}</div>
        <div class="mbti-char-label">${info.label}</div>
        <div class="mbti-char-sub">${info.desc}</div>
      `;
      charsContainer.appendChild(box);
    });

    // 共有リンクのセットアップ（𝕏/Twitter対応）
    const shareText = `私の動物MBTI診断結果は【${data.emoji}${data.name}タイプ（${data.title} ${type}）】でした！\n\n${data.desc}\n#動物MBTI診断 #MBTI診断`;
    const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(window.location.href)}`;
    document.getElementById('mbti-share-btn').setAttribute('href', shareUrl);
  }

  // アプリケーションのリセット
  function restartApp() {
    for (let i = 1; i <= 8; i++) {
      answers[i] = null;
    }
    showStep(0);
  }

  // エラー処理
  function showError(msg) {
    const errorBox = document.getElementById('mbti-error-msg');
    errorBox.innerText = msg;
    errorBox.style.display = 'block';
  }

  function hideError() {
    const errorBox = document.getElementById('mbti-error-msg');
    errorBox.innerText = '';
    errorBox.style.display = 'none';
  }

  // 初期起動
  restartApp();
</script>

</body>
</html>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>miniツールテスト</title>
		<link>https://ten.osbowner.com/mini-invest</link>
		
		<dc:creator><![CDATA[cooltak]]></dc:creator>
		<pubDate>Wed, 17 Jun 2026 04:32:31 +0000</pubDate>
				<category><![CDATA[ミニツール]]></category>
		<guid isPermaLink="false">https://ten.osbowner.com/?p=2281</guid>

					<description><![CDATA[積立シミュレーション 毎月の積立額 円 正しい金額を入力してください 想定年利 ％ 0〜100%の間で入力してください 積立期間 年 正しい年数を入力してください 20年後の合計額 &#8212; 円 積み立てた元本 &#038; [&#8230;]]]></description>
										<content:encoded><![CDATA[
<div class="sc-calc-wrapper">
  <style>
    /* ブログの既存スタイルに干渉しないよう専用のクラス名で定義 */
    .sc-calc-wrapper {
      max-width: 480px;
      margin: 20px auto;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      color: #333333;
      box-sizing: border-box;
    }
    .sc-calc-wrapper * {
      box-sizing: border-box;
    }
    .sc-calc-card {
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05), 0 2px 6px rgba(0, 0, 0, 0.03);
      padding: 24px;
      border: 1px solid #f0f0f0;
    }
    .sc-calc-title {
      font-size: 1.25rem;
      font-weight: bold;
      text-align: center;
      margin-top: 0;
      margin-bottom: 20px;
      color: #1e293b;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .sc-calc-title::before {
      content: "&#x1f4c8;";
    }
    .sc-calc-form-group {
      margin-bottom: 16px;
    }
    .sc-calc-label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      margin-bottom: 6px;
      color: #475569;
    }
    .sc-calc-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .sc-calc-input {
      width: 100%;
      padding: 12px 40px 12px 14px;
      font-size: 1rem;
      border: 1px solid #cbd5e1;
      border-radius: 8px;
      background-color: #f8fafc;
      transition: all 0.2s ease;
      color: #1e293b;
      font-weight: bold;
    }
    .sc-calc-input:focus {
      outline: none;
      border-color: #10b981;
      background-color: #ffffff;
      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }
    .sc-calc-unit {
      position: absolute;
      right: 14px;
      font-size: 0.875rem;
      color: #64748b;
      font-weight: bold;
      pointer-events: none;
    }
    
    /* エラー表示 */
    .sc-calc-error {
      color: #ef4444;
      font-size: 0.8rem;
      margin-top: 4px;
      display: none;
    }

    /* 結果表示エリア */
    .sc-calc-result-box {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 2px dashed #e2e8f0;
    }
    .sc-calc-result-title {
      font-size: 0.9rem;
      text-align: center;
      color: #64748b;
      margin-bottom: 4px;
    }
    .sc-calc-total-amount {
      font-size: 2rem;
      font-weight: 800;
      text-align: center;
      color: #10b981;
      margin-bottom: 16px;
      word-break: break-all;
    }
    .sc-calc-breakdown {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }
    .sc-calc-breakdown-item {
      background: #f8fafc;
      padding: 12px;
      border-radius: 8px;
      text-align: center;
    }
    .sc-calc-breakdown-label {
      font-size: 0.75rem;
      color: #64748b;
      margin-bottom: 2px;
    }
    .sc-calc-breakdown-value {
      font-size: 1rem;
      font-weight: bold;
      color: #334155;
    }
    .sc-calc-breakdown-value.principal {
      color: #475569;
    }
    .sc-calc-breakdown-value.interest {
      color: #3b82f6;
    }

    /* 視覚用割合バー */
    .sc-calc-progress-container {
      margin-top: 15px;
    }
    .sc-calc-progress-labels {
      display: flex;
      justify-content: space-between;
      font-size: 0.75rem;
      color: #64748b;
      margin-bottom: 4px;
    }
    .sc-calc-progress-bar {
      height: 12px;
      width: 100%;
      background-color: #e2e8f0;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
    }
    .sc-calc-progress-principal {
      height: 100%;
      background-color: #94a3b8;
      transition: width 0.3s ease;
      width: 50%;
    }
    .sc-calc-progress-interest {
      height: 100%;
      background-image: linear-gradient(90deg, #3b82f6, #10b981);
      transition: width 0.3s ease;
      width: 50%;
    }

    /* コメント・注意書き */
    .sc-calc-footer {
      font-size: 0.7rem;
      color: #94a3b8;
      text-align: center;
      margin-top: 16px;
      line-height: 1.4;
    }
  </style>

  <div class="sc-calc-card">
    <div class="sc-calc-title">積立シミュレーション</div>
    
    <!-- 毎月の積立額 -->
    <div class="sc-calc-form-group">
      <label class="sc-calc-label" for="sc-input-amount">毎月の積立額</label>
      <div class="sc-calc-input-wrap">
        <input class="sc-calc-input" id="sc-input-amount" type="number" min="1" max="99999999" placeholder="例: 30000" value="30000">
        <span class="sc-calc-unit">円</span>
      </div>
      <div class="sc-calc-error" id="sc-error-amount">正しい金額を入力してください</div>
    </div>

    <!-- 想定年利 -->
    <div class="sc-calc-form-group">
      <label class="sc-calc-label" for="sc-input-rate">想定年利</label>
      <div class="sc-calc-input-wrap">
        <input class="sc-calc-input" id="sc-input-rate" type="number" min="0" max="100" step="0.1" placeholder="例: 5" value="5">
        <span class="sc-calc-unit">％</span>
      </div>
      <div class="sc-calc-error" id="sc-error-rate">0〜100%の間で入力してください</div>
    </div>

    <!-- 積立期間 -->
    <div class="sc-calc-form-group">
      <label class="sc-calc-label" for="sc-input-years">積立期間</label>
      <div class="sc-calc-input-wrap">
        <input class="sc-calc-input" id="sc-input-years" type="number" min="1" max="100" placeholder="例: 20" value="20">
        <span class="sc-calc-unit">年</span>
      </div>
      <div class="sc-calc-error" id="sc-error-years">正しい年数を入力してください</div>
    </div>

    <!-- 結果表示 -->
    <div class="sc-calc-result-box" id="sc-result-area">
      <div class="sc-calc-result-title"><span id="sc-text-years">20</span>年後の合計額</div>
      <div class="sc-calc-total-amount" id="sc-total-val">&#8212; 円</div>
      
      <div class="sc-calc-breakdown">
        <div class="sc-calc-breakdown-item">
          <div class="sc-calc-breakdown-label">積み立てた元本</div>
          <div class="sc-calc-breakdown-value principal" id="sc-principal-val">&#8212; 円</div>
        </div>
        <div class="sc-calc-breakdown-item">
          <div class="sc-calc-breakdown-label">増えた運用益</div>
          <div class="sc-calc-breakdown-value interest" id="sc-interest-val">&#8212; 円</div>
        </div>
      </div>

      <!-- 割合グラフ -->
      <div class="sc-calc-progress-container">
        <div class="sc-calc-progress-labels">
          <span>元本 (<span id="sc-pct-principal">&#8212;</span>%)</span>
          <span>運用益 (<span id="sc-pct-interest">&#8212;</span>%)</span>
        </div>
        <div class="sc-calc-progress-bar">
          <div class="sc-calc-progress-principal" id="sc-bar-principal"></div>
          <div class="sc-calc-progress-interest" id="sc-bar-interest"></div>
        </div>
      </div>
    </div>

    <div class="sc-calc-footer">
      ※手数料、税金等は考慮しておりません。月複利（毎月末積立）にて計算。<br>
      ※実際の運用成果を保証するものではありません。
    </div>
  </div>

  <script>
    (function() {
      // 要素の取得
      const amountInput = document.getElementById('sc-input-amount');
      const rateInput = document.getElementById('sc-input-rate');
      const yearsInput = document.getElementById('sc-input-years');

      const errorAmount = document.getElementById('sc-error-amount');
      const errorRate = document.getElementById('sc-error-rate');
      const errorYears = document.getElementById('sc-error-years');

      const resultArea = document.getElementById('sc-result-area');
      const textYears = document.getElementById('sc-text-years');
      const totalVal = document.getElementById('sc-total-val');
      const principalVal = document.getElementById('sc-principal-val');
      const interestVal = document.getElementById('sc-interest-val');

      const pctPrincipal = document.getElementById('sc-pct-principal');
      const pctInterest = document.getElementById('sc-pct-interest');
      const barPrincipal = document.getElementById('sc-bar-principal');
      const barInterest = document.getElementById('sc-bar-interest');

      // 3桁区切りのフォーマット関数
      function formatCurrency(num) {
        return new Intl.NumberFormat('ja-JP').format(Math.round(num)) + ' 円';
      }

      // シミュレーション計算
      function calculate() {
        let hasError = false;

        // 入力値の取得と数値化
        const amountStr = amountInput.value.trim();
        const rateStr = rateInput.value.trim();
        const yearsStr = yearsInput.value.trim();

        // 1. 各項目が空、または無効なデータの場合のバリデーション
        if (amountStr === "" || isNaN(amountStr) || parseFloat(amountStr) <= 0) {
          errorAmount.style.display = 'block';
          errorAmount.textContent = amountStr === "" ? "入力してください" : "1以上の数値を入力してください";
          hasError = true;
        } else {
          errorAmount.style.display = 'none';
        }

        if (rateStr === "" || isNaN(rateStr) || parseFloat(rateStr) < 0 || parseFloat(rateStr) > 100) {
          errorRate.style.display = 'block';
          errorRate.textContent = rateStr === "" ? "入力してください" : "0〜100の間で入力してください";
          hasError = true;
        } else {
          errorRate.style.display = 'none';
        }

        if (yearsStr === "" || isNaN(yearsStr) || parseFloat(yearsStr) <= 0 || parseFloat(yearsStr) > 100) {
          errorYears.style.display = 'block';
          errorYears.textContent = yearsStr === "" ? "入力してください" : "1〜100の間で入力してください";
          hasError = true;
        } else {
          errorYears.style.display = 'none';
        }

        // エラーがある場合は表示をプレースホルダー化して終了
        if (hasError) {
          totalVal.textContent = '-- 円';
          principalVal.textContent = '-- 円';
          interestVal.textContent = '-- 円';
          pctPrincipal.textContent = '--';
          pctInterest.textContent = '--';
          barPrincipal.style.width = '50%';
          barInterest.style.width = '50%';
          return;
        }

        // 数値の確定
        const P = parseFloat(amountStr);      // 毎月の積立額 (円)
        const r = parseFloat(rateStr) / 100;  // 年利 (小数)
        const Y = parseInt(yearsStr, 10);     // 積立期間 (年)

        const N = Y * 12;                     // 総積立月数
        const i = r / 12;                     // 月利 (小数)

        let total = 0;
        let principal = P * N;                // 元本合計

        // 計算式の適用 (月利 0% の場合を考慮)
        if (i === 0) {
          total = principal;
        } else {
          // 月末積立の月複利終価計算
          // S = P * (((1 + i)^N - 1) / i)
          total = P * ((Math.pow(1 + i, N) - 1) / i);
        }

        const interest = total - principal;   // 運用益

        // 割合の計算
        const principalPct = total > 0 ? Math.round((principal / total) * 100) : 0;
        const interestPct = total > 0 ? (100 - principalPct) : 0; // 足して100%にする

        // 結果の描画
        textYears.textContent = Y;
        totalVal.textContent = formatCurrency(total);
        principalVal.textContent = formatCurrency(principal);
        interestVal.textContent = formatCurrency(interest);

        // グラフとパーセントの描画
        pctPrincipal.textContent = principalPct;
        pctInterest.textContent = interestPct;
        barPrincipal.style.width = principalPct + '%';
        barInterest.style.width = interestPct + '%';
      }

      // イベントリスナーの登録（リアルタイムに計算）
      amountInput.addEventListener('input', calculate);
      rateInput.addEventListener('input', calculate);
      yearsInput.addEventListener('input', calculate);

      // 初回実行
      calculate();
    })();
  </script>
</div>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
