{"id":8936,"date":"2026-02-13T10:58:34","date_gmt":"2026-02-13T01:58:34","guid":{"rendered":"https:\/\/howroad.co.jp\/column\/?page_id=8936"},"modified":"2026-02-26T14:59:52","modified_gmt":"2026-02-26T05:59:52","slug":"%e8%a8%ba%e6%96%adfoam%e3%83%86%e3%82%b9%e3%83%88-3","status":"publish","type":"page","link":"https:\/\/howroad.co.jp\/column\/?page_id=8936","title":{"rendered":"\u8a3a\u65ad\u30d5\u30a9\u30fc\u30e0-\u793e\u9577"},"content":{"rendered":"\n<div class=\"line-wrap\">\n  <div class=\"line-chat\" id=\"chat\">\n\n    <!-- Q1 -->\n    <div class=\"bubble left\">\n      Q1. \u3069\u308c\u304c\u3001\u3042\u306a\u305f\u306e\u5f37\u307f\u306b\u4e00\u756a\u8fd1\u3044\u3067\u3059\u304b\uff1f\n    <\/div>\n\n    <div class=\"answers\">\n      <div class=\"bubble right answer\" onclick=\"next(2,'A',this)\">\n        \u7121\u7406\u3092\u305b\u305a\u3001\u5b89\u5b9a\u3092\u512a\u5148\u3059\u308b\u7d4c\u55b6\u3092\u3057\u3066\u3044\u308b\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'B',this)\">\n        \u554f\u984c\u304c\u5927\u304d\u304f\u306a\u308b\u524d\u306b\u624b\u3092\u6253\u3064\u30bf\u30a4\u30d7\u3060\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'C',this)\">\n        \u8ffd\u3044\u8fbc\u307e\u308c\u308b\u3068\u672c\u6c17\u304c\u51fa\u308b\n      <\/div>\n      <div class=\"bubble right answer\" onclick=\"next(2,'D',this)\">\n        \u6c7a\u3081\u305f\u3089\u52d5\u304d\u306f\u65e9\u3044\u307b\u3046\u3060\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/div>\n\n<script>\nlet scores = {A:0, B:0, C:0, D:0};\n\nfunction next(questionNumber,type,el){\n\n  \/\/ \u30b9\u30b3\u30a2\u52a0\u7b97\n  scores[type]++;\n\n  \/\/ \u62bc\u3057\u305f\u30b0\u30eb\u30fc\u30d7\u3092\u30ed\u30c3\u30af\n  let parent = el.parentElement;\n  let buttons = parent.querySelectorAll('.answer');\n  buttons.forEach(btn=>{\n    btn.style.pointerEvents = \"none\";\n    btn.style.opacity = 0.4;\n  });\n  el.style.opacity = 1;\n\n  let chat = document.getElementById(\"chat\");\n\n  \/\/ Q2\n  if(questionNumber===2){\n    setTimeout(()=>{\n      let q2 = `\n        <div class=\"bubble left fadeIn\">\n          Q2. \u554f\u984c\u304c\u8d77\u304d\u305f\u3068\u304d\u3001\u3042\u306a\u305f\u306e\u52d5\u304d\u306b\u4e00\u756a\u8fd1\u3044\u306e\u306f\uff1f\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(3,'A',this)\">\u4f55\u304c\u539f\u56e0\u304b\u3092\u69cb\u9020\u7684\u306b\u6574\u7406\u3059\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'B',this)\">\u5b8c\u74a7\u3067\u306a\u304f\u3066\u3082\u3001\u307e\u305a\u4e00\u624b\u6253\u3064<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'C',this)\">\u4fe1\u983c\u3067\u304d\u308b\u4eba\u306e\u610f\u898b\u3092\u3059\u3050\u805e\u304f<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(3,'D',this)\">\u518d\u767a\u9632\u6b62\u3092\u6700\u512a\u5148\u306b\u3059\u308b<\/div>\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', q2);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n\n  \/\/ Q3\n  if(questionNumber===3){\n    setTimeout(()=>{\n      let q3 = `\n        <div class=\"bubble left fadeIn\">\n          Q3. \u696d\u52d9\u52b9\u7387\u5316\u306b\u3064\u3044\u3066\u3001\u4eca\u3069\u3046\u8003\u3048\u3066\u3044\u307e\u3059\u304b\uff1f\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(4,'A',this)\">\u3044\u307e\u306f\u5927\u304d\u306a\u554f\u984c\u306f\u306a\u3044\u304c\u3001\u5148\u3092\u898b\u636e\u3048\u3066\u6574\u3048\u3066\u304a\u304d\u305f\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'B',this)\">\u3053\u306e\u307e\u307e\u3060\u3068\u3069\u3053\u304b\u3067\u8a70\u307e\u308b\u6c17\u304c\u3057\u3066\u3044\u308b<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'C',this)\">\u6b63\u76f4\u3001\u3082\u3046\u9650\u754c\u306b\u8fd1\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(4,'D',this)\">\u5bfe\u7b56\u306f\u30de\u30b9\u30c8\u3002\u65e9\u304f\u52d5\u304d\u305f\u3044<\/div>\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', q3);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n\n  \/\/ Q4\n  if(questionNumber===4){\n    setTimeout(()=>{\n      let q4 = `\n        <div class=\"bubble left fadeIn\">\n          Q4. 3\u5e74\u5f8c\u3001\u3042\u306a\u305f\u306e\u4f1a\u793e\u306f\u3069\u3046\u306a\u3063\u3066\u3044\u305f\u3044\u3067\u3059\u304b\uff1f\n        <\/div>\n        <div class=\"answers\">\n          <div class=\"bubble right answer\" onclick=\"next(5,'A',this)\">\u5927\u304d\u304f\u306f\u3057\u306a\u304f\u3066\u3082\u3001\u5805\u5b9f\u306b\u5229\u76ca\u3092\u51fa\u3057\u7d9a\u3051\u305f\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'B',this)\">\u4ed5\u7d44\u307f\u304c\u6574\u3044\u3001\u81ea\u5206\u304c\u3044\u306a\u304f\u3066\u3082\u56de\u308b\u4f1a\u793e\u306b\u3057\u305f\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'C',this)\">\u307e\u305a\u306f\u4eca\u306e\u4e0d\u5b89\u3092\u306a\u304f\u3057\u3001\u82e6\u3057\u3055\u3092\u629c\u3051\u51fa\u3057\u305f\u3044<\/div>\n          <div class=\"bubble right answer\" onclick=\"next(5,'D',this)\">\u58f2\u4e0a2\u500d\u3001\u4eca\u3088\u308a\u6b21\u306e\u30b9\u30c6\u30fc\u30b8\u306b\u9032\u3093\u3067\u3044\u305f\u3044<\/div>\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', q4);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n\n  \/\/ \u7d50\u679c\u30dc\u30bf\u30f3\n  if(questionNumber===5){\n    setTimeout(()=>{\n      let resultBtn = `\n        <div class=\"bubble right result-btn fadeIn\" onclick=\"showResult()\">\n          &#x1f50d; \u8a3a\u65ad\u7d50\u679c\u3092\u898b\u308b\n        <\/div>\n      `;\n      chat.insertAdjacentHTML('beforeend', resultBtn);\n      chat.scrollTop = chat.scrollHeight;\n    },400);\n  }\n}\n\nfunction showResult(){\n  let maxType = Object.keys(scores)\n    .reduce((a,b)=>scores[a]>scores[b]?a:b);\n\n  if(maxType===\"A\"){ window.location.href=\"\/column\/?page_id=8995\"; }\n  if(maxType===\"B\"){ window.location.href=\"\/column\/?page_id=8997\"; }\n  if(maxType===\"C\"){ window.location.href=\"\/column\/?page_id=8999\"; }\n  if(maxType===\"D\"){ window.location.href=\"\/column\/?page_id=9001\"; }\n}\n<\/script>\n\n<style>\n.line-wrap{\n  width:100%;\n  max-width:100%;\n  margin:0 auto;\n  background: linear-gradient(#a9d0f5, #d4ecff);\n  padding:15px;\n  border-radius:12px;\n}\n\n.line-chat{\n  display:flex;\n  flex-direction:column;\n  gap:12px;\n  max-height:600px;\n  overflow-y:auto;\n}\n\n.bubble{\n  padding:10px 14px;\n  border-radius:18px;\n  font-size:14px;\n  max-width:85%;\n  line-height:1.5;\n  text-align:left;\n}\n\n.left{\n  background:white;\n  align-self:flex-start;\n}\n\n.answer{\n  background:#06c755;\n  color:white;\n}\n\n.answer:hover{\n  transform:scale(1.03);\n}\n\n.right{\n  color:white;\n  align-self:flex-end;\n  cursor:pointer;\n  margin-top:7px;\n  transition:0.2s;\n}\n\n.right:hover{\n  transform:scale(1.03);\n}\n\n.result-btn{\n  background:#ff9800 !important;\n  font-weight:bold;\n}\n\n.fadeIn{\n  animation:fadeUp 0.4s ease forwards;\n}\n\n@keyframes fadeUp{\n  from{\n    opacity:0;\n    transform:translateY(10px);\n  }\n  to{\n    opacity:1;\n    transform:translateY(0);\n  }\n}\n<\/style>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Q1. \u3069\u308c\u304c\u3001\u3042\u306a\u305f\u306e\u5f37\u307f\u306b\u4e00\u756a\u8fd1\u3044\u3067\u3059\u304b\uff1f \u7121\u7406\u3092\u305b\u305a\u3001\u5b89\u5b9a\u3092\u512a\u5148\u3059\u308b\u7d4c\u55b6\u3092\u3057\u3066\u3044\u308b \u554f\u984c\u304c\u5927\u304d\u304f\u306a\u308b\u524d\u306b\u624b\u3092\u6253\u3064\u30bf\u30a4\u30d7\u3060 \u8ffd\u3044\u8fbc\u307e\u308c\u308b\u3068\u672c\u6c17\u304c\u51fa\u308b \u6c7a\u3081\u305f\u3089\u52d5\u304d\u306f\u65e9\u3044\u307b\u3046\u3060<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-1column.php","meta":{"footnotes":""},"class_list":["post-8936","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/8936","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8936"}],"version-history":[{"count":29,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/8936\/revisions"}],"predecessor-version":[{"id":9161,"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=\/wp\/v2\/pages\/8936\/revisions\/9161"}],"wp:attachment":[{"href":"https:\/\/howroad.co.jp\/column\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8936"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}