繧｢繧､繝励Ξ・・| AI縺梧怙驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯茨ｼ√ｂ縺・√・繝ｬ繧ｼ繝ｳ繝医↓霑ｷ繧上↑縺・・/title> <meta name="description" content="繧｢繧､繝励Ξ・√・縲、I縺後≠縺ｪ縺溘・螟ｧ蛻・↑莠ｺ縺ｸ縺ｮ譛驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯医☆繧玖ｨｺ譁ｭ繧ｵ繝ｼ繝薙せ縺ｧ縺吶りｪ慕函譌･繝ｻ險伜ｿｵ譌･繝ｻ邨仙ｩ夂･昴＞縺ｪ縺ｩ縲√≠繧峨ｆ繧九す繝ｼ繝ｳ縺ｫ蟇ｾ蠢懊・> <meta name="keywords" content="繧｢繧､繝励Ξ・・繝励Ξ繧ｼ繝ｳ繝磯∈縺ｳ,繧ｮ繝輔ヨ險ｺ譁ｭ,AI,雍医ｊ迚ｩ,隱慕函譌･,險伜ｿｵ譌･,繝励Ξ繧ｼ繝ｳ繝域署譯・> <link rel="canonical" href="https://goldenkani.onrender.com/PresentAI/">  <meta property="og:title" content="繧｢繧､繝励Ξ・・| AI縺梧怙驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯茨ｼ・> <meta property="og:description" content="AI縺後≠縺ｪ縺溘・螟ｧ蛻・↑莠ｺ縺ｸ縺ｮ譛驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯医りｪ慕函譌･繝ｻ險伜ｿｵ譌･縺ｪ縺ｩ縲√≠繧峨ｆ繧九す繝ｼ繝ｳ縺ｫ蟇ｾ蠢懊＠縺溽┌譁吶・繝励Ξ繧ｼ繝ｳ繝郁ｨｺ譁ｭ繧ｵ繝ｼ繝薙せ縲・> <meta property="og:url" content="https://goldenkani.onrender.com/PresentAI/"> <meta property="og:type" content="website"> <meta property="og:locale" content="ja_JP"> <meta property="og:site_name" content="繧｢繧､繝励Ξ・・>  <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="繧｢繧､繝励Ξ・・| AI縺梧怙驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯茨ｼ・> <meta name="twitter:description" content="AI縺後≠縺ｪ縺溘・螟ｧ蛻・↑莠ｺ縺ｸ縺ｮ譛驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯医りｪ慕函譌･繝ｻ險伜ｿｵ譌･縺ｪ縺ｩ縲√≠繧峨ｆ繧九す繝ｼ繝ｳ縺ｫ蟇ｾ蠢懊＠縺溽┌譁吶・繝励Ξ繧ｼ繝ｳ繝郁ｨｺ譁ｭ繧ｵ繝ｼ繝薙せ縲・> <link rel="stylesheet" href="/PresentAI/static/css/style.css"> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Outfit:wght@600&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> <link rel="stylesheet" href="/static/common.css">  <script src="https://cdn.tailwindcss.com"></script>  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6006972056194113" crossorigin="anonymous"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-9XCSLX64Q5"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-9XCSLX64Q5'); </script>  <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "WebApplication", "name": "繧｢繧､繝励Ξ・・, "url": "https://goldenkani.onrender.com/PresentAI/", "description": "繧｢繧､繝励Ξ・√・縲、I縺後≠縺ｪ縺溘・螟ｧ蛻・↑莠ｺ縺ｸ縺ｮ譛驕ｩ縺ｪ繧ｮ繝輔ヨ繧呈署譯医☆繧玖ｨｺ譁ｭ繧ｵ繝ｼ繝薙せ縺ｧ縺吶りｪ慕函譌･繝ｻ險伜ｿｵ譌･繝ｻ邨仙ｩ夂･昴＞縺ｪ縺ｩ縲√≠繧峨ｆ繧九す繝ｼ繝ｳ縺ｫ蟇ｾ蠢懊・, "applicationCategory": "LifestyleApplication", "operatingSystem": "All", "inLanguage": "ja", "offers": { "@type": "Offer", "price": "0", "priceCurrency": "JPY" }, "author": { "@type": "Organization", "name": "驥代・繧ｫ繝・, "url": "https://goldenkani.onrender.com/" } } </script> </head> <body>  <button id="menu-btn" class="fixed top-6 right-6 z-[50] p-2 bg-white border border-gray-200 rounded-xl shadow-sm hover:bg-gray-50 active:scale-95 transition-all"> <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> </button> <div id="side-menu" class="fixed inset-y-0 right-0 w-64 bg-white shadow-2xl z-[110] transform translate-x-full transition-transform duration-300 ease-in-out"> <div class="p-8 flex flex-col h-full"> <button id="close-menu" class="self-end p-2 text-gray-400">笨・髢峨§繧・/button> <nav class="mt-12 space-y-6"> <a href="/PresentAI/" class="block text-lg font-medium text-gray-800 border-b pb-2">氏繧｢繧､繝励Ξ・・-繝励Ξ繧ｼ繝ｳ繝磯∈縺ｳAI</a> <a href="/PresentAI/premium" class="block text-lg font-medium text-amber-600 border-b pb-2 font-bold">笨ｨ繧｢繧､繝励Ξ・・-繝上う繧ｰ繝ｬ繝ｼ繝鰻er</a> <a href="/HanaSelect/" class="block text-lg font-medium text-gray-800 border-b pb-2">減 Hana Select</a> <a href="/how-to-use-as-app" class="block text-lg font-medium text-gray-800 border-b pb-2">導繧ｹ繝槭・繧｢繝励Μ縺ｮ繧医≧縺ｫ菴ｿ縺・/a> <a href="/" class="block text-lg font-medium text-gray-800 border-b pb-2">繝｡繧､繝ｳ繝壹・繧ｸ縺ｸ謌ｻ繧・/a> </nav> <div class="mt-auto text-[10px] text-gray-400"> © 2026 繧｢繧､繝励Ξ・・ </div> </div> </div>  <div class="glass-bg"></div> <section class="hero"> <div class="hero-content"> <h2 class="text-1xl md:text-4xl font-bold mb-6">繧ゅ≧縲√・繝ｬ繧ｼ繝ｳ繝医↓霑ｷ繧上↑縺・・/h2> <p class="text-lg md:text-xl opacity-90">繧｢繧､繝励Ξ・√′縲∝､ｧ蛻・↑莠ｺ縺ｮ隨鷹｡斐ｒ縺､縺上ｋ縲梧怙鬮倥・雍医ｊ迚ｩ縲阪ｒ謠先｡医＠縺ｾ縺吶・/p> <div class="flex flex-col items-center gap-6 mt-8"> <a href="#form-area" class="btn-hero" id="start-btn">險ｺ譁ｭ繧偵せ繧ｿ繝ｼ繝医☆繧・/a> <a href="/PresentAI/premium" class="inline-flex items-center gap-3 px-6 py-3 bg-black/90 border border-amber-500/50 rounded-full text-amber-400 hover:bg-black hover:border-amber-400 transition-all duration-300 shadow-xl group"> <span class="font-bold text-sm md:text-base">笨ｨ鬮倡ｴ壹・繝ｬ繧ｼ繝ｳ繝医ｒ讀懆ｨ惹ｸｭ縺ｮ譁ｹ縺ｯ縺薙■繧・/span> <i class="fas fa-chevron-right text-xs group-hover:translate-x-1 transition-transform"></i> </a> </div> </div> </section> <header> <div class="container relative"> <h1 class="text-3xl font-bold">氏繧｢繧､繝励Ξ・・/h1> <a href="/PresentAI/premium" class="absolute right-0 bottom-0 text-[10px] md:text-xs text-amber-600 hover:text-amber-700 font-bold underline flex items-center"> 虫繝励Ξ繝溘い繝險ｺ譁ｭ縺ｯ縺薙■繧・ </a> </div> </header> <main class="container" id="form-area"> <div class="progress-bar"> <div class="progress-fill" id="progressFill"></div> </div> <form id="presentForm">  <div class="card step-card active" id="step1"> <div class="step-header"> <i class="fas fa-gift text-pink-500"></i> <span class="step-title">STEP 1: 繧ｷ繝√Η繧ｨ繝ｼ繧ｷ繝ｧ繝ｳ</span> </div> <p class="step-desc">縺ｾ縺壹・縲√←繧薙↑蝣ｴ髱｢縺ｧ縺ｮ繝励Ξ繧ｼ繝ｳ繝医°謨吶∴縺ｦ縺上□縺輔＞縲・/p> <div class="form-section"> <label>肢繧ｷ繝√Η繧ｨ繝ｼ繧ｷ繝ｧ繝ｳ繧帝∈謚・/label> <div class="personality-grid" id="situationPresets"> <div class="personality-card" data-value="隱慕函譌･"> <span class="icon">獅</span> <span class="label">隱慕函譌･</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="邨仙ｩ夂･昴＞"> <span class="icon">注</span> <span class="label">邨仙ｩ夂･昴＞</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="蜃ｺ逕｣逾昴＞"> <span class="icon">存</span> <span class="label">蜃ｺ逕｣逾昴＞</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="譏・ｲ繝ｻ騾閨ｷ"> <span class="icon">直</span> <span class="label">譏・ｲ繝ｻ騾閨ｷ</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="險伜ｿｵ譌･"> <span class="icon">猪</span> <span class="label">險伜ｿｵ譌･</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="縺願ｿ斐＠・亥・逾昴＞・・> <span class="icon">氏</span> <span class="label">縺願ｿ斐＠</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="譌･蟶ｸ縺ｮ繝励Ξ繧ｼ繝ｳ繝・> <span class="icon">笘・/span> <span class="label">譌･蟶ｸ縺ｮ繧ｮ繝輔ヨ</span> <div class="check"><i class="fas fa-check"></i></div> </div> </div> <input type="hidden" id="occasion" name="occasion" value="繝励Ξ繧ｼ繝ｳ繝・> </div> <div class="nav-buttons"> <div></div> <button type="button" class="btn-next" onclick="nextStep(2)">谺｡縺ｸ騾ｲ繧 <i class="fas fa-arrow-right ml-2"></i></button> </div> </div>  <div class="card step-card" id="step2"> <div class="step-header"> <i class="fas fa-user-friends text-orange-500"></i> <span class="step-title">STEP 2: 縺ゅ↑縺溘→逶ｸ謇九・縺薙→</span> </div> <p class="step-desc">縺贋ｺ御ｺｺ縺ｮ繝励Ο繝輔ぅ繝ｼ繝ｫ繧呈蕗縺医※縺上□縺輔＞縲・/p> <div class="form-row"> <div class="form-group"> <label>側縺ゅ↑縺溘・蟷ｴ鮨｢</label> <input type="number" id="myAge" name="myAge" placeholder="萓・ 30" min="0" max="120"> </div> <div class="form-group"> <label>諤ｧ蛻･</label> <select id="myGender" name="myGender"> <option value="逕ｷ諤ｧ">逕ｷ諤ｧ</option> <option value="螂ｳ諤ｧ">螂ｳ諤ｧ</option> <option value="縺昴・莉・>謖・ｮ壹＠縺ｪ縺・/option> </select> </div> </div> <div class="form-row"> <div class="form-group"> <label>識逶ｸ謇九・蟷ｴ鮨｢</label> <input type="number" id="targetAge" name="targetAge" placeholder="萓・ 25" min="0" max="120"> </div> <div class="form-group"> <label>諤ｧ蛻･</label> <select id="targetGender" name="targetGender"> <option value="逕ｷ諤ｧ">逕ｷ諤ｧ</option> <option value="螂ｳ諤ｧ">螂ｳ諤ｧ</option> <option value="縺昴・莉・>謖・ｮ壹＠縺ｪ縺・/option> </select> </div> </div> <div class="form-group"> <label>､・逶ｸ謇九→縺ｮ髢捺氛</label> <select id="relationship" name="relationship"> <option value="螳ｶ譌・>螳ｶ譌・/option> <option value="諱倶ｺｺ">諱倶ｺｺ</option> <option value="蜿矩＃">蜿矩＃</option> <option value="蜈郁ｼｩ">蜈郁ｼｩ</option> <option value="蠕瑚ｼｩ">蠕瑚ｼｩ</option> <option value="荳雁昇">荳雁昇</option> <option value="縺昴・莉・>縺昴・莉・/option> </select> </div> <div class="nav-buttons"> <button type="button" class="btn-back" onclick="prevStep(1)"><i class="fas fa-arrow-left mr-2"></i> 謌ｻ繧・/button> <button type="button" class="btn-next" onclick="nextStep(3)">谺｡縺ｸ騾ｲ繧 <i class="fas fa-arrow-right ml-2"></i></button> </div> </div>  <div class="card step-card" id="step3"> <div class="step-header"> <i class="fas fa-magic text-amber-500"></i> <span class="step-title">STEP 3: 逶ｸ謇九・螂ｽ縺ｿ縺ｨ譚｡莉ｶ</span> </div> <p class="step-desc">譛蠕後↓縲√ｈ繧雁・菴鍋噪縺ｪ螂ｽ縺ｿ繧呈蕗縺医※縺上□縺輔＞縲・/p> <div class="form-section"> <label>笨ｨ逶ｸ謇九・繧ｿ繧､繝暦ｼ郁､・焚驕ｸ謚槫庄・・/label> <div class="personality-grid" id="personalityTags"> <div class="personality-card" data-value="繝溘ル繝槭Μ繧ｹ繝・> <span class="icon">諺</span> <span class="label">繧ｷ繝ｳ繝励Ν豢ｾ</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="繧ｬ繧ｸ繧ｧ繝・ヨ螂ｽ縺・> <span class="icon">捗</span> <span class="label">繧ｬ繧ｸ繧ｧ繝・ヨ螂ｽ縺・/span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="繧､繝ｳ繝峨い豢ｾ"> <span class="icon">匠</span> <span class="label">縺翫≧縺｡譎る俣驥崎ｦ・/span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="繧｢繧ｦ繝医ラ繧｢繝ｻ譌・･ｽ縺・> <span class="icon">諸・・/span> <span class="label">繧｢繧ｯ繝・ぅ繝匁ｴｾ</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="繧ｰ繝ｫ繝｡繝ｻ縺企・螂ｽ縺・> <span class="icon">差</span> <span class="label">繧ｰ繝ｫ繝｡繝ｻ縺企・</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="鄒主ｮｹ繝ｻ蛛･蠎ｷ諢剰ｭ倬ｫ倥＞"> <span class="icon">嫡</span> <span class="label">鄒主ｮｹ繝ｻ蛛･蠎ｷ</span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="螳溽畑諤ｧ驥崎ｦ・> <span class="icon">肌</span> <span class="label">螳溽畑逧・/span> <div class="check"><i class="fas fa-check"></i></div> </div> <div class="personality-card" data-value="繧ｻ繝ｳ繧ｹ繝ｻ迚ｹ蛻･諢・> <span class="icon">笨ｨ</span> <span class="label">迚ｹ蛻･諢・/span> <div class="check"><i class="fas fa-check"></i></div> </div> </div> </div> <div class="form-group mt-6"> <label>腸莠育ｮ礼岼螳・/label> <select id="budget" name="budget"> <option value="縲・,000蜀・>縲・,000蜀・ｼ医・繝√ぐ繝輔ヨ・・/option> <option value="3,000蜀・・,000蜀・>3,000蜀・・,000蜀・/option> <option value="5,000蜀・・0,000蜀・>5,000蜀・・0,000蜀・/option> <option value="10,000蜀・・0,000蜀・>10,000蜀・・0,000蜀・/option> <option value="30,000蜀・・0,000蜀・>30,000蜀・・0,000蜀・/option> <option value="50,000蜀・ｻ･荳・>50,000蜀・ｻ･荳・/option> </select> </div> <div class="form-group mt-6"> <label><i class="fas fa-heart text-pink-400 mr-2"></i> 逶ｸ謇九・雜｣蜻ｳ繝ｻ螂ｽ縺阪↑縺薙→・井ｻｻ諢擾ｼ・/label> <textarea id="hobbies" name="hobbies" placeholder="萓・繧ｳ繝ｼ繝偵・縺悟･ｽ縺阪∵怙霑題ｦｳ闡画､咲黄縺ｫ繝上・縺｣縺ｦ縺・ｋ縲∫賢繧帝｣ｼ縺｣縺ｦ縺・ｋ" rows="2" maxlength="100"></textarea> <div class="char-counter"><span id="hobbiesCount">0</span>/100</div> </div> <div class="form-group mt-4"> <label><i class="fas fa-ban text-gray-400 mr-2"></i> NG縺ｪ繧ゅ・繝ｻ驕ｿ縺代◆縺・ｂ縺ｮ・井ｻｻ諢擾ｼ・/label> <textarea id="ngItems" name="ngItems" placeholder="萓・逕倥＞繧ゅ・縺ｯ闍ｦ謇九・ｦ吶ｊ縺悟ｼｷ縺・ｂ縺ｮ縺ｯNG" rows="2" maxlength="100"></textarea> <div class="char-counter"><span id="ngItemsCount">0</span>/100</div> </div> <div class="form-group mt-4"> <label><i class="fas fa-comment-dots text-blue-400 mr-2"></i> 縺昴・莉門ｙ閠・ｼ井ｻｻ諢擾ｼ・/label> <textarea id="remarks" name="remarks" placeholder="萓・逋偵ｄ縺輔ｌ繧九ｂ縺ｮ縺瑚憶縺・√し繝励Λ繧､繧ｺ縺ｧ貂｡縺励◆縺・ rows="2" maxlength="200"></textarea> <div class="char-counter"><span id="remarksCount">0</span>/200</div> </div> <div class="nav-buttons"> <button type="button" class="btn-back" onclick="prevStep(2)"><i class="fas fa-arrow-left mr-2"></i> 謌ｻ繧・/button> <button type="submit" id="submitBtn" class="btn-submit">AI縺ｫ謠先｡医＠縺ｦ繧ゅｉ縺・<i class="fas fa-paper-plane ml-2"></i></button> </div> </div> </form>  <section id="loadingSection" class="card loading-card hidden"> <div class="loader-container"> <div class="loader"></div> <p>逶ｸ謇九ｒ諤昴＞豬ｮ縺九∋縺ｦ縺・∪縺・..</p> <div class="typing-text">AI繧ｳ繝ｳ繧ｷ繧ｧ繝ｫ繧ｸ繝･縺檎ｴ謨ｵ縺ｪ繧ｮ繝輔ヨ繧帝∈螳壻ｸｭ...</div> </div> </section>  <section id="resultSection" class="card result-card hidden"> <div id="resultContent" class="result-content"></div> <hr class="divider">  <div id="rakutenItemsSection" class="rakuten-items-section hidden"> <h3>寫・・讌ｽ螟ｩ縺ｧ隕九▽縺九▲縺溘♀縺吶☆繧√・蝠・刀</h3> <div id="rakutenItemsGrid" class="rakuten-grid">  </div> </div> <div class="result-actions flex flex-col gap-4"> <button id="retrySameBtn" class="btn-submit w-full">売蜷後§譚｡莉ｶ縺ｧ繧ゅ≧荳蠎ｦ謠先｡医＠縺ｦ繧ゅｉ縺・/button> <button onclick="resetForm()" class="btn-reset">笨ｨ蛻･縺ｮ譚｡莉ｶ縺ｧ險ｺ譁ｭ縺励↑縺翫☆</button> </div> </section> </main> <footer class="mt-16 pb-12 text-center text-[10px] text-gray-400"> <div class="flex justify-center space-x-4 mb-2"> <a href="/PresentAI/policy" class="hover:underline">繝励Λ繧､繝舌す繝ｼ繝昴Μ繧ｷ繝ｼ</a> <a href="/legal" class="hover:underline">迚ｹ螳壼膚蜿門ｼ墓ｳ輔↓蝓ｺ縺･縺剰｡ｨ險・/a> <a href="/" class="hover:underline">繝｡繧､繝ｳ繝壹・繧ｸ縺ｸ謌ｻ繧・/a> </div> © 2026 繧｢繧､繝励Ξ・・ </footer>  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> <script src="/static/common.js"></script> <script src="/PresentAI/static/js/script.js"></script> </body> </html>