繧ｹ繝槭・繧｢繝励Μ縺ｨ縺励※菴ｿ縺・婿豕・- 驥代・繧ｫ繝・/title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com"></script> <style> body { font-family: 'Zen Maru Gothic', sans-serif; background-color: #f7fafc; } </style> </head> <body class="bg-gray-50 flex flex-col min-h-screen relative">  <button id="menu-btn" type="button" aria-label="メニューを開く" aria-controls="side-menu" aria-expanded="false" class="fixed top-6 right-6 z-[120] 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" aria-hidden="true" class="fixed inset-y-0 right-0 w-64 bg-white shadow-2xl z-[130] transform translate-x-full transition-transform duration-300 ease-in-out overflow-y-auto"> <div class="p-8 flex flex-col h-full"> <button id="close-menu" type="button" class="self-end p-2 text-gray-400">✕ 閉じる</button> <nav class="mt-12 space-y-6"> <a href="/" class="block text-lg font-medium text-gray-800 border-b pb-2">🏠 メインページ</a> <a href="/MistSeal/" class="block text-lg font-medium text-gray-800 border-b pb-2">🛡️ MistSeal</a> <a href="/DetoxTimer/" class="block text-lg font-medium text-gray-800 border-b pb-2">⏰ デトックスタイマー</a> <a href="/HanaSelect/" class="block text-lg font-medium text-gray-800 border-b pb-2">🌸 Hana Select</a> <a href="/easy-furusato/" class="block text-lg font-medium text-gray-800 border-b pb-2">🍣 ふるさと納税ラク選び</a> <a href="/KikonChecker/" class="block text-lg font-medium text-gray-800 border-b pb-2">🕵️‍♂️ この人既婚？！不倫？！チェッカー</a> <a href="/PresentAI/" class="block text-lg font-medium text-gray-800 border-b pb-2">🎁 アイプレ！</a> <a href="/kanitotalk/" class="block text-lg font-medium text-gray-800 border-b pb-2">🦀 かにのお悩み相談箱</a> <a href="/JapaneseOmikuji/" class="block text-lg font-medium text-gray-800 border-b pb-2">⛩️ Japanese Omikuji!</a> <a href="/ExcelMacroMaker/" class="block text-lg font-medium text-gray-800 border-b pb-2">📗 エクセルマクロ簡単君</a> <a href="/TrAIvel/" class="block text-lg font-medium text-gray-800 border-b pb-2">✈️ TrAIvel</a> </nav> <div class="mt-auto text-[10px] text-gray-400"> © 2026 金のカニ </div> </div> </div>  <header class="bg-teal-600 text-white p-4 shadow-md sticky top-0 z-[100]"> <div class="container mx-auto max-w-4xl flex justify-start items-center"> <button onclick="history.back()" class="flex items-center text-sm font-bold bg-white/10 hover:bg-white/20 px-3 py-1.5 rounded-lg transition"> <span class="mr-1">竊・/span> 謌ｻ繧・ </button> <h1 class="text-lg font-bold ml-4">繧ｹ繝槭・繧｢繝励Μ縺ｮ繧医≧縺ｫ菴ｿ縺・/h1> </div> </header> <main class="flex-grow container mx-auto px-4 py-8 max-w-4xl"> <div class="bg-white rounded-3xl shadow-xl overflow-hidden border border-teal-100"> <div class="p-6 md:p-10 space-y-8"> <section> <p class="text-gray-600 leading-relaxed mb-6"> 縺薙ｌ繧峨・繧｢繝励Μ縺ｯWeb繧｢繝励Μ縺ｧ縺吶′縲√せ繝槭・縺ｮ縲後・繝ｼ繝逕ｻ髱｢縺ｫ霑ｽ蜉縲肴ｩ溯・繧剃ｽｿ縺・％縺ｨ縺ｧ縲∝ｰら畑繧｢繝励Μ縺ｮ繧医≧縺ｪ諢溯ｦ壹〒縺・▽縺ｧ繧ゅ☆縺舌↓蜻ｼ縺ｳ蜃ｺ縺帙ｋ繧医≧縺ｫ縺ｪ繧翫∪縺吶・ </p> <div class="grid sm:grid-cols-2 gap-6">  <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100"> <h4 class="font-bold text-gray-800 mb-4 flex items-center"> <span class="bg-white p-2 rounded-lg mr-2 shadow-sm">克</span> iPhone (Safari) </h4> <ol class="text-sm text-gray-600 list-decimal list-inside space-y-3"> <li>逕ｻ髱｢荳九・蜈ｱ譛峨・繧ｿ繝ｳ・・svg class="w-4 h-4 inline mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8m-4-6l-4-4m0 0L8 8m4-4v13"></path> </svg>・峨ｒ繧ｿ繝・・<br><span class="text-xs text-gray-400 ml-5">・医↑縺代ｌ縺ｰ縲娯ｦ縲阪ｒ繧ｿ繝・・縺吶ｋ縺ｨ陦ｨ遉ｺ縺輔ｌ縺ｾ縺呻ｼ・/span></li> <li>縲後・繝ｼ繝逕ｻ髱｢縺ｫ霑ｽ蜉縲阪ｒ驕ｸ謚・/li> <li>蜿ｳ荳翫・縲瑚ｿｽ蜉縲阪ｒ繧ｿ繝・・</li> </ol> </div>  <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100"> <h4 class="font-bold text-gray-800 mb-4 flex items-center"> <span class="bg-white p-2 rounded-lg mr-2 shadow-sm">､・/span> Android (Chrome) </h4> <ol class="text-sm text-gray-600 list-decimal list-inside space-y-3"> <li>蜿ｳ荳翫・繝｡繝九Η繝ｼ繝懊ち繝ｳ・遺彊・峨ｒ繧ｿ繝・・</li> <li>縲後い繝励Μ繧偵う繝ｳ繧ｹ繝医・繝ｫ縲阪∪縺溘・縲後・繝ｼ繝逕ｻ髱｢縺ｫ霑ｽ蜉縲阪ｒ驕ｸ謚・/li> <li>縲瑚ｿｽ蜉縲阪ｒ繧ｿ繝・・</li> </ol> </div> </div> </section> <div class="bg-teal-50 rounded-2xl p-6 border border-teal-100 mb-8"> <h5 class="font-bold text-teal-800 mb-2 flex items-center"> 庁 Tip </h5> <p class="text-sm text-teal-700"> 繝帙・繝逕ｻ髱｢縺ｫ霑ｽ蜉縺吶ｋ縺ｨ縲√ヶ繝ｩ繧ｦ繧ｶ縺ｮ繝・・繝ｫ繝舌・縺瑚｡ｨ遉ｺ縺輔ｌ縺ｪ縺上↑繧翫√ｈ繧雁ｺ・＞逕ｻ髱｢縺ｧ繧｢繝励Μ繧偵♀讌ｽ縺励∩縺・◆縺縺代∪縺吶・ </p> </div> <hr class="border-gray-200 my-10"> <section> <h2 class="text-xl font-bold text-gray-800 mb-4">How to Use as an App</h2> <p class="text-gray-600 leading-relaxed mb-6"> Although these are web apps, you can use them just like dedicated mobile apps by using the "Add to Home Screen" feature on your smartphone. </p> <div class="grid sm:grid-cols-2 gap-6">  <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100"> <h4 class="font-bold text-gray-800 mb-4 flex items-center"> <span class="bg-white p-2 rounded-lg mr-2 shadow-sm">克</span> iPhone (Safari) </h4> <ol class="text-sm text-gray-600 list-decimal list-inside space-y-3"> <li>Tap the Share button (<svg class="w-4 h-4 inline mb-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8m-4-6l-4-4m0 0L8 8m4-4v13"></path> </svg>) at the bottom<br><span class="text-xs text-gray-400 ml-5">(If hidden, tap "..." to show)</span></li> <li>Select "Add to Home Screen"</li> <li>Tap "Add" in the top right</li> </ol> </div>  <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100"> <h4 class="font-bold text-gray-800 mb-4 flex items-center"> <span class="bg-white p-2 rounded-lg mr-2 shadow-sm">､・/span> Android (Chrome) </h4> <ol class="text-sm text-gray-600 list-decimal list-inside space-y-3"> <li>Tap the menu button (站ｮ) in the top right</li> <li>Select "Install app" or "Add to Home screen"</li> <li>Tap "Add"</li> </ol> </div> </div> </section> <div class="bg-teal-50 rounded-2xl p-6 border border-teal-100"> <h5 class="font-bold text-teal-800 mb-2 flex items-center"> 庁 Tip </h5> <p class="text-sm text-teal-700"> Adding the app to your home screen removes the browser toolbar, giving you more screen space to enjoy. </p> </div> </div> </div> </main> <footer class="p-8 text-center text-gray-400 text-xs text-center"> © 2026 驥代・繧ｫ繝・ </footer> <script src="/static/common.js"></script> </body> </html>