{"id":89,"date":"2022-12-22T19:16:35","date_gmt":"2022-12-22T10:16:35","guid":{"rendered":"https:\/\/phantom-cgray03.xyz\/?p=89"},"modified":"2023-01-27T21:01:42","modified_gmt":"2023-01-27T12:01:42","slug":"89","status":"publish","type":"post","link":"https:\/\/phantom-cgray03.xyz\/?p=89","title":{"rendered":"\u30a2\u30f3\u30b1\u30fc\u30c8\uff08\u8907\u6570\u9078\u629e\u30fb\u5358\u4e00\u9078\u629e\u30fbyes\/no\u30fb\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u4e0b\u90e8\u8868\u793a\uff09\u203b\u8981javascript(\u30a2\u30f3\u30b1\u30fc\u30c8)"},"content":{"rendered":"<p>  <!-- \n      HTML\u3053\u3053\u304b\u3089\n    \u30fb\u30bf\u30b0\u306e\u300cid\u300d\u306f\u3072\u3068\u3064\u306eversion\u5185\u3067\u540c\u3058\u540d\u524d\u3092\u3072\u3068\u3064\u3060\u3051\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306ewidget\u3092\u8907\u6570\u4f7f\u7528\u3059\u308b\u5834\u5408\u3084\u300cid\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u5225\u306ewidget\u3092\u4f75\u7528\u3059\u308b\u969b\u306f\u300cid\u300d\u306e\u540d\u524d\u304c\u91cd\u8907\u3057\u306a\u3044\u3088\u3046\u8a2d\u5b9a\u304c\u5fc5\u8981\u3067\u3059\u3002\n    \u30fb\u5bfe\u5fdc\u3059\u308binput\u30bf\u30b0\u306e\u300cid\u300d\u3068label\u30bf\u30b0\u306e\u300cfor\u300d\u306f\u540c\u3058\u540d\u524d\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002\n    \u30fb\u540c\u3058\u30b0\u30eb\u30fc\u30d7\u306einput\u30bf\u30b0\u306b\u306f\u540c\u3058\u540d\u524d\u306e\u300cname\u300d\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u306ewidget\u3092\u8907\u6570\u4f7f\u7528\u3059\u308b\u5834\u5408\u3084\u300cname\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u5225\u306ewidget\u3092\u4f75\u7528\u3059\u308b\u969b\u306f\u30b0\u30eb\u30fc\u30d7\u3054\u3068\u306b\u300cname\u300d\u306e\u540d\u524d\u304c\u91cd\u8907\u3057\u306a\u3044\u3088\u3046\u8a2d\u5b9a\u304c\u5fc5\u8981\u3067\u3059\u3002\n    --><\/p>\n<div class=\"question-reveal-multi js-questionRevealMulti\">\n        <!-- \u9805\u76ee\u3092\u5897\u6e1b\u3059\u308b\u5834\u5408\u306f\u3001\u3053\u3053\u304b\u3089\u300c\u2605\u3053\u3053\u307e\u3067\u2605\u300d\u90e8\u5206\u3092\u30b3\u30d4\u30da\u3001\u3082\u3057\u304f\u306f\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044 --><\/p>\n<div class=\"questionArea\">\n<h2 class=\"title\"><span class=\"title_num\">Q1<\/span>\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/h2>\n<div class=\"linkbox\">\n                <input id=\"q1-1\" type=\"checkbox\" name=\"q1\"><label for=\"q1-1\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q1-2\" type=\"checkbox\" name=\"q1\"><label for=\"q1-2\"><\/p>\n<div class=\"btn _lineTwo\">\u8907\u6570\u9078\u629e\u53ef\u80fd<br \/>\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q1-3\" type=\"checkbox\" name=\"q1\"><label for=\"q1-3\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q1-4\" type=\"checkbox\" name=\"q1\"><label for=\"q1-4\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label>\n            <\/div>\n<\/p><\/div>\n<p>        <!-- \u2605\u3053\u3053\u307e\u3067\u2605 --><\/p>\n<div class=\"questionArea\">\n<h2 class=\"title\"><span class=\"title_num\">Q2<\/span>\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/h2>\n<div class=\"linkbox\">\n                <input id=\"q2-1\" type=\"radio\" name=\"q2\"><label for=\"q2-1\"><\/p>\n<div class=\"btn\">\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q2-2\" type=\"radio\" name=\"q2\"><label for=\"q2-2\"><\/p>\n<div class=\"btn\">\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q2-3\" type=\"radio\" name=\"q2\"><label for=\"q2-3\"><\/p>\n<div class=\"btn\">\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q2-4\" type=\"radio\" name=\"q2\"><label for=\"q2-4\"><\/p>\n<div class=\"btn\">\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label>\n            <\/div>\n<\/p><\/div>\n<div class=\"questionArea\">\n<h2 class=\"title\"><span class=\"title_num\">Q3<\/span>\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/h2>\n<div class=\"linkbox yes-no\">\n                <input id=\"q3-1\" type=\"radio\" name=\"q3\"><label for=\"q3-1\"><\/p>\n<div class=\"btn\">\u306f\u3044<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q3-2\" type=\"radio\" name=\"q3\"><label for=\"q3-2\"><\/p>\n<div class=\"btn\">\u3044\u3044\u3048<\/div>\n<p>                <\/label>\n            <\/div>\n<\/p><\/div>\n<div class=\"questionArea\">\n<h2 class=\"title\"><span class=\"title_num\">Q4<\/span>\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/h2>\n<div class=\"linkbox\">\n                <input id=\"q4-1\" type=\"checkbox\" name=\"q4\"><label for=\"q4-1\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q4-2\" type=\"checkbox\" name=\"q4\"><label for=\"q4-2\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q4-3\" type=\"checkbox\" name=\"q4\"><label for=\"q4-3\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q4-4\" type=\"checkbox\" name=\"q4\"><label for=\"q4-4\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label>\n            <\/div>\n<\/p><\/div>\n<div class=\"questionArea\">\n<h2 class=\"title\"><span class=\"title_num\">Q5<\/span>\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/h2>\n<div class=\"linkbox\">\n                <input id=\"q5-1\" type=\"checkbox\" name=\"q5\"><label for=\"q5-1\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q5-2\" type=\"checkbox\" name=\"q5\"><label for=\"q5-2\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q5-3\" type=\"checkbox\" name=\"q5\"><label for=\"q5-3\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label><br \/>\n                <input id=\"q5-4\" type=\"checkbox\" name=\"q5\"><label for=\"q5-4\"><\/p>\n<div class=\"btn\">\u8907\u6570\u9078\u629e\u53ef\u80fd<\/div>\n<p>                <\/label>\n            <\/div>\n<\/p><\/div>\n<div class=\"send-btn\">\n            <button class=\"js-send\" type=\"button\">\u56de\u7b54\u3092\u5b8c\u4e86\u3059\u308b<\/button>\n        <\/div>\n<div class=\"revealarea js-reveal is-hidden\">\n            \u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\n        <\/div>\n<\/p><\/div>\n<p>\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n<p>JS head<\/p>\n<pre><code>    &lt;!-- \u30bf\u30b0\u8a2d\u5b9a\u306eJavaScript head\u306b\u4ee5\u4e0b\u3092\u30ab\u30c3\u30c8\u3057\u3066\u8cbc\u308a\u4ed8\u3051\u3066\u304f\u3060\u3055\u3044\u3002\r\n      \u540c\u4e00widget\u3092\u8907\u6570\u8ffd\u52a0\u3059\u308b\u5834\u5408\u3001\u8907\u6570\u56de\u8cbc\u4ed8\u3051\u306f\u4e0d\u8981\u3067\u3059\u3002 --&gt;\r\n    &lt;script&gt;\r\n        var revealBtnFncMulti = revealBtnFncMulti || {};\r\n        (function(_) {\r\n            _.init = function() {\r\n                var questionBox = Array.from(document.querySelectorAll(&#039;.js-questionRevealMulti&#039;));\r\n                var hiddenClass = &#039;is-hidden&#039;;\r\n\r\n                questionBox.forEach(function(qb) {\r\n                    var completeBtn = qb.querySelector(&#039;.js-send&#039;);\r\n                    var revealArea = qb.querySelector(&#039;.js-reveal&#039;);\r\n\r\n                    completeBtn.addEventListener(&#039;click&#039;, function() {\r\n                        revealArea.classList.toggle(hiddenClass);\r\n                        var targetOffsetTop = window.pageYOffset + revealArea.getBoundingClientRect().height;\r\n                        window.scrollTo({\r\n                            top: targetOffsetTop,\r\n                            behavior: &#039;smooth&#039;,\r\n                        });\r\n                    });\r\n                });\r\n            };\r\n        })(revealBtnFncMulti);\r\n    &lt;\/script&gt;\r\n    &lt;!-- JavaScript head\u3053\u3053\u307e\u3067 --&gt;\r\n\r\n<\/code><\/pre>\n<p>HTML<\/p>\n<pre><code>  &lt;!-- \r\n      HTML\u3053\u3053\u304b\u3089\r\n    \u30fb\u30bf\u30b0\u306e\u300cid\u300d\u306f\u3072\u3068\u3064\u306eversion\u5185\u3067\u540c\u3058\u540d\u524d\u3092\u3072\u3068\u3064\u3060\u3051\u4f7f\u3046\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002\u3053\u306ewidget\u3092\u8907\u6570\u4f7f\u7528\u3059\u308b\u5834\u5408\u3084\u300cid\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u5225\u306ewidget\u3092\u4f75\u7528\u3059\u308b\u969b\u306f\u300cid\u300d\u306e\u540d\u524d\u304c\u91cd\u8907\u3057\u306a\u3044\u3088\u3046\u8a2d\u5b9a\u304c\u5fc5\u8981\u3067\u3059\u3002\r\n    \u30fb\u5bfe\u5fdc\u3059\u308binput\u30bf\u30b0\u306e\u300cid\u300d\u3068label\u30bf\u30b0\u306e\u300cfor\u300d\u306f\u540c\u3058\u540d\u524d\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002\r\n    \u30fb\u540c\u3058\u30b0\u30eb\u30fc\u30d7\u306einput\u30bf\u30b0\u306b\u306f\u540c\u3058\u540d\u524d\u306e\u300cname\u300d\u3092\u8a2d\u5b9a\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u3053\u306ewidget\u3092\u8907\u6570\u4f7f\u7528\u3059\u308b\u5834\u5408\u3084\u300cname\u300d\u3092\u8a2d\u5b9a\u3059\u308b\u5225\u306ewidget\u3092\u4f75\u7528\u3059\u308b\u969b\u306f\u30b0\u30eb\u30fc\u30d7\u3054\u3068\u306b\u300cname\u300d\u306e\u540d\u524d\u304c\u91cd\u8907\u3057\u306a\u3044\u3088\u3046\u8a2d\u5b9a\u304c\u5fc5\u8981\u3067\u3059\u3002\r\n    --&gt;\r\n    &lt;div class=&quot;question-reveal-multi js-questionRevealMulti&quot;&gt;\r\n        &lt;!-- \u9805\u76ee\u3092\u5897\u6e1b\u3059\u308b\u5834\u5408\u306f\u3001\u3053\u3053\u304b\u3089\u300c\u2605\u3053\u3053\u307e\u3067\u2605\u300d\u90e8\u5206\u3092\u30b3\u30d4\u30da\u3001\u3082\u3057\u304f\u306f\u524a\u9664\u3057\u3066\u304f\u3060\u3055\u3044 --&gt;\r\n        &lt;div class=&quot;questionArea&quot;&gt;\r\n            &lt;h2 class=&quot;title&quot;&gt;&lt;span class=&quot;title_num&quot;&gt;Q1&lt;\/span&gt;\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059&lt;\/h2&gt;\r\n            &lt;div class=&quot;linkbox&quot;&gt;\r\n                &lt;input id=&quot;q1-1&quot; type=&quot;checkbox&quot; name=&quot;q1&quot;&gt;&lt;label for=&quot;q1-1&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q1-2&quot; type=&quot;checkbox&quot; name=&quot;q1&quot;&gt;&lt;label for=&quot;q1-2&quot;&gt;\r\n                    &lt;div class=&quot;btn _lineTwo&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;br&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q1-3&quot; type=&quot;checkbox&quot; name=&quot;q1&quot;&gt;&lt;label for=&quot;q1-3&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q1-4&quot; type=&quot;checkbox&quot; name=&quot;q1&quot;&gt;&lt;label for=&quot;q1-4&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n        &lt;!-- \u2605\u3053\u3053\u307e\u3067\u2605 --&gt;\r\n\r\n        &lt;div class=&quot;questionArea&quot;&gt;\r\n            &lt;h2 class=&quot;title&quot;&gt;&lt;span class=&quot;title_num&quot;&gt;Q2&lt;\/span&gt;\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059&lt;\/h2&gt;\r\n            &lt;div class=&quot;linkbox&quot;&gt;\r\n                &lt;input id=&quot;q2-1&quot; type=&quot;radio&quot; name=&quot;q2&quot;&gt;&lt;label for=&quot;q2-1&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q2-2&quot; type=&quot;radio&quot; name=&quot;q2&quot;&gt;&lt;label for=&quot;q2-2&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q2-3&quot; type=&quot;radio&quot; name=&quot;q2&quot;&gt;&lt;label for=&quot;q2-3&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q2-4&quot; type=&quot;radio&quot; name=&quot;q2&quot;&gt;&lt;label for=&quot;q2-4&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=&quot;questionArea&quot;&gt;\r\n            &lt;h2 class=&quot;title&quot;&gt;&lt;span class=&quot;title_num&quot;&gt;Q3&lt;\/span&gt;\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059&lt;\/h2&gt;\r\n            &lt;div class=&quot;linkbox yes-no&quot;&gt;\r\n                &lt;input id=&quot;q3-1&quot; type=&quot;radio&quot; name=&quot;q3&quot;&gt;&lt;label for=&quot;q3-1&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u306f\u3044&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q3-2&quot; type=&quot;radio&quot; name=&quot;q3&quot;&gt;&lt;label for=&quot;q3-2&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u3044\u3044\u3048&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=&quot;questionArea&quot;&gt;\r\n            &lt;h2 class=&quot;title&quot;&gt;&lt;span class=&quot;title_num&quot;&gt;Q4&lt;\/span&gt;\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059&lt;\/h2&gt;\r\n            &lt;div class=&quot;linkbox&quot;&gt;\r\n                &lt;input id=&quot;q4-1&quot; type=&quot;checkbox&quot; name=&quot;q4&quot;&gt;&lt;label for=&quot;q4-1&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q4-2&quot; type=&quot;checkbox&quot; name=&quot;q4&quot;&gt;&lt;label for=&quot;q4-2&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q4-3&quot; type=&quot;checkbox&quot; name=&quot;q4&quot;&gt;&lt;label for=&quot;q4-3&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q4-4&quot; type=&quot;checkbox&quot; name=&quot;q4&quot;&gt;&lt;label for=&quot;q4-4&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=&quot;questionArea&quot;&gt;\r\n            &lt;h2 class=&quot;title&quot;&gt;&lt;span class=&quot;title_num&quot;&gt;Q5&lt;\/span&gt;\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059&lt;\/h2&gt;\r\n            &lt;div class=&quot;linkbox&quot;&gt;\r\n                &lt;input id=&quot;q5-1&quot; type=&quot;checkbox&quot; name=&quot;q5&quot;&gt;&lt;label for=&quot;q5-1&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q5-2&quot; type=&quot;checkbox&quot; name=&quot;q5&quot;&gt;&lt;label for=&quot;q5-2&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q5-3&quot; type=&quot;checkbox&quot; name=&quot;q5&quot;&gt;&lt;label for=&quot;q5-3&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n                &lt;input id=&quot;q5-4&quot; type=&quot;checkbox&quot; name=&quot;q5&quot;&gt;&lt;label for=&quot;q5-4&quot;&gt;\r\n                    &lt;div class=&quot;btn&quot;&gt;\u8907\u6570\u9078\u629e\u53ef\u80fd&lt;\/div&gt;\r\n                &lt;\/label&gt;\r\n            &lt;\/div&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=&quot;send-btn&quot;&gt;\r\n            &lt;button class=&quot;js-send&quot; type=&quot;button&quot;&gt;\u56de\u7b54\u3092\u5b8c\u4e86\u3059\u308b&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n\r\n        &lt;div class=&quot;revealarea js-reveal is-hidden&quot;&gt;\r\n            \u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206\u3002\r\n        &lt;\/div&gt;\r\n    &lt;\/div&gt;<\/code><\/pre>\n<p>CSS<\/p>\n<pre><code>\/*\u5168\u4f53\u306e\u8a2d\u5b9a*\/\r\n.question-reveal-multi {\r\n  width: 750px;\r\n  max-width: 100%;\r\n  font-size: 16px;\r\n  background-color: #fff;\r\n  margin: 0 auto 1rem;\r\n  padding: 1rem;\r\n  line-height: 1.5;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\r\n\/*\u8a2d\u554f\u3054\u3068\u306e\u30d6\u30ed\u30c3\u30af*\/\r\n.question-reveal-multi .questionArea {\r\n  margin-bottom: 96px;\r\n}\r\n\r\n\r\n\r\n\/* \u30bf\u30a4\u30c8\u30eb *\/\r\n.question-reveal-multi .title {\r\n  font-size: 2rem;\r\n  text-align: left;\r\n  background: #ddd;\r\n  margin: 0 auto;\r\n  padding: 10px;\r\n}\r\n\r\n\r\n\r\n\/* \u30bf\u30a4\u30c8\u30eb\u6570\u5b57 *\/\r\n.question-reveal-multi .title_num {\r\n  font-size: 2.5rem;\r\n  margin-right: 5px;\r\n  color: #ccc;\r\n}\r\n\r\n\r\n\r\n\/*\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u8a2d\u5b9a*\/\r\n.question-reveal-multi .linkbox {\r\n  width: 90%;\r\n  text-align: left;\r\n  margin: 48px auto 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n .question-reveal-multi input {\r\n  display: none;\r\n}\r\n\r\n\r\n\r\n\/* \u9078\u629e\u80a2\u306e\u8a2d\u5b9a *\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input+label {\r\n  background: #eee;\r\n  border: 1px solid #ccc;\r\n  padding: 10px;\r\n  margin-bottom: 10px;\r\n  border-radius: 10px;\r\n  cursor: pointer;\r\n  box-sizing: border-box;\r\n  transition: all 0.7s;\r\n  display: block;\r\n}\r\n\r\n\r\n\r\n\/* \u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u6642\u306e\u9078\u629e\u9805\u76ee\u8a2d\u5b9a *\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;radio&#039;]:checked+label,\r\n .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]:checked+label {\r\n  background: #2467bf;\r\n}\r\n\r\n\r\n\r\n\/*\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9*\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input+label .btn {\r\n  padding: 0.7rem 0.5rem 0.7rem 3.5rem;\r\n  font-weight: normal;\r\n  text-align: left;\r\n  font-size: 1.5rem;\r\n  position: relative;\r\n  display: inline-block;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n}\r\n\r\n\r\n\r\n\/* \u30c1\u30a7\u30c3\u30af\u3055\u308c\u305f\u6642\u306e\u9078\u629e\u80a2\u6587\u5b57\u30b9\u30bf\u30a4\u30eb *\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input:checked+label .btn {\r\n  color: #fff;\r\n}\r\n\r\n\r\n\r\n\/*\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u88c5\u98fe\u8a2d\u5b9a  - \u5358\u4e00\u9078\u629e*\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;radio&#039;]+label .btn::before {\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  left: 0.5rem;\r\n  width: 2rem;\r\n  height: 2rem;\r\n  border: solid 2px #888888;\r\n  background: #ffffff;\r\n  border-radius: 50%;\r\n  content: &#039;&#039;;\r\n  display: block;\r\n  position: absolute;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\r\n\r\n\/*\u30c1\u30a7\u30c3\u30af\u30dc\u30c3\u30af\u30b9\u306e\u88c5\u98fe\u8a2d\u5b9a  - \u8907\u6570\u9078\u629e*\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]+label .btn::before {\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  left: 0.5rem;\r\n  width: 2rem;\r\n  height: 2rem;\r\n  border: solid 2px #888888;\r\n  background: #ffffff;\r\n  border-radius: 5px;\r\n  content: &#039;&#039;;\r\n  display: block;\r\n  position: absolute;\r\n  box-sizing: border-box;\r\n}\r\n\r\n .question-reveal-multi .linkbox:not(.yes-no) input+label .btn:focus {\r\n  outline: none !important;\r\n}\r\n\r\n .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;radio&#039;]:checked+label .btn::before,\r\n .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]+label .btn::before {\r\n  border: none;\r\n}\r\n\r\n\r\n\r\n\/*\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306e\u8a2d\u5b9a - \u5358\u4e00\u9078\u629e *\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;radio&#039;]:checked+label .btn::after {\r\n  top: 16px;\r\n  left: 13px;\r\n  width: 22px;\r\n  height: 22px;\r\n  background: #2467bf;\r\n  border-radius: 50%;\r\n  content: &#039;&#039;;\r\n  display: block;\r\n  position: absolute;\r\n  animation: checkZoom 0.3s forwards;\r\n}\r\n\r\n\r\n\r\n\/*\u30c1\u30a7\u30c3\u30af\u30de\u30fc\u30af\u306e\u8a2d\u5b9a - \u8907\u6570\u9078\u629e *\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]:checked+label .btn::after {\r\n  top: 30%;\r\n  left: 1.1rem;\r\n  width: 0.5rem;\r\n  height: 1.2rem;\r\n  border-right: 4px solid #2467bf;\r\n  border-bottom: 4px solid #2467bf;\r\n  transform: rotate(45deg) translateY(-30%);\r\n  content: &#039;&#039;;\r\n  display: block;\r\n  position: absolute;\r\n  animation: checkZoom 0.3s forwards;\r\n}\r\n\r\n@keyframes checkZoom {\r\n  0% {\r\n    transform: scale(0.7) rotate(45deg);\r\n  }\r\n\r\n  100% {\r\n    transform: scale(1) rotate(45deg);\r\n  }\r\n}\r\n\r\n .question-reveal-multi ::-moz-focus-inner {\r\n  border-color: transparent;\r\n}\r\n\r\n\r\n\r\n\/* yes\/no\u5f62\u5f0f\u306e\u30dc\u30bf\u30f3\u8a2d\u5b9a *\/\r\n.question-reveal-multi .linkbox.yes-no {\r\n  display: flex;\r\n  width: 80%;\r\n}\r\n\r\n\r\n\r\n\/* yes\/no\u5f62\u5f0f\u306e\u30dc\u30bf\u30f3\u9078\u629e\u80a2 *\/\r\n.question-reveal-multi .linkbox.yes-no input+label {\r\n  margin: 0 10px;\r\n  padding: 10px;\r\n  text-align: center;\r\n  background-color: #333;\r\n  box-shadow: 0px 5px 0 #000;\r\n  border-radius: 10px;\r\n  flex: 1;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n}\r\n\r\n\r\n\r\n\/* yes\/no\u5f62\u5f0f\u306e\u30dc\u30bf\u30f3\u9078\u629e\u80a2 - \u9078\u629e\u6642 *\/\r\n.question-reveal-multi .linkbox.yes-no input:checked+label {\r\n  background-color: #d30c0c;\r\n  box-shadow: 0px 5px 0 #830606;\r\n}\r\n\r\n\r\n\r\n\/* yes\/no\u5f62\u5f0f\u306e\u30dc\u30bf\u30f3\u6587\u5b57 *\/\r\n.question-reveal-multi .linkbox.yes-no input+label .btn {\r\n  font-size: 3rem;\r\n  color: #fff;\r\n  font-weight: bold;\r\n}\r\n\r\n\r\n\r\n\/*\u5b8c\u4e86\u30dc\u30bf\u30f3\u306e\u8a2d\u5b9a*\/\r\n.question-reveal-multi .send-btn {\r\n  \/*\u5916\u5074\u306e\u4f59\u767d|\u4e0a\u4e0b|\u5de6\u53f3auto=\u81ea\u52d5|*\/\r\n  margin: 1rem auto;\r\n}\r\n\r\n\r\n\r\n\/*\u5b8c\u4e86\u30dc\u30bf\u30f3\u306e\u8a2d\u5b9a*\/\r\n.question-reveal-multi .send-btn button {\r\n  width: 80%;\r\n  text-align: center;\r\n  border: none;\r\n  font-size: 3rem;\r\n  font-weight: bold;\r\n  color: #fff;\r\n  margin: 0 auto;\r\n  padding: 20px 10px;\r\n  background-color: #333;\r\n  border-radius: 10px;\r\n  box-shadow: 0 5px 0 #000;\r\n  position: relative;\r\n  pointer-events: auto;\r\n  box-sizing: border-box;\r\n  cursor: pointer;\r\n  display: block;\r\n}\r\n\r\n\r\n\r\n\/* \u5b8c\u4e86\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u8868\u793a\u3055\u308c\u308b\u90e8\u5206 *\/\r\n.revealarea {\r\n  \/*\u6587\u5b57\u306e\u5927\u304d\u3055*\/\r\n  font-size: 1.2rem;\r\n  \/*\u6587\u5b57\u4f4d\u7f6e*\/\r\n  text-align: left;\r\n  \/*\u5916\u5074\u306e\u4f59\u767d|\u4e0a|\u5de6\u53f3auto=\u81ea\u52d5|\u4e0b|*\/\r\n  margin: 3rem auto 0;\r\n  \/*\u5185\u5074\u306e\u4f59\u767d*\/\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n .is-hidden {\r\n  display: none;\r\n}\r\n\r\n\/* \u30b9\u30de\u30db(\u753b\u9762\u5e45768px\u4ee5\u4e0b)\u306e\u5834\u5408\u306e\u8a2d\u5b9a\u3000 *\/\r\n@media screen and (max-width: 768px) {\r\n   .question-reveal-multi .questionArea {\r\n    margin-bottom: 48px;\r\n  }\r\n\r\n   .question-reveal-multi .title {\r\n    font-size: 1.5rem;\r\n  }\r\n\r\n   .question-reveal-multi .title_num {\r\n    font-size: 2rem;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox {\r\n    width: 100%;\r\n    margin: 24px auto 0;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox:not(.yes-no) input+label .btn {\r\n    font-size: 1.2rem;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]+label .btn::before {\r\n    width: 1.8rem;\r\n    height: 1.8rem;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]:checked+label .btn::after {\r\n    top: 0.7rem;\r\n    left: 1rem;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;radio&#039;]+label .btn::before {\r\n    width: 28px;\r\n    height: 28px;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;radio&#039;]:checked+label .btn::after {\r\n    top: 14px;\r\n    left: 12px;\r\n    width: 20px;\r\n    height: 20px;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox.yes-no {\r\n    width: 100%;\r\n  }\r\n\r\n   .question-reveal-multi .linkbox.yes-no input+label .btn {\r\n    font-size: 2rem;\r\n  }\r\n\r\n  \r\n\r\n  \/*\u5b8c\u4e86\u30dc\u30bf\u30f3\u306e\u8a2d\u5b9a*\/\r\n  .question-reveal-multi .send-btn button {\r\n    \/* \u6a2a\u5e45 *\/\r\n    width: 100%;\r\n    \/*\u6587\u5b57\u306e\u5927\u304d\u3055*\/\r\n    font-size: 2rem;\r\n  }\r\n\r\n}\r\n\r\n .question-reveal-multi .linkbox:not(.yes-no) input[type=&#039;checkbox&#039;]:checked+label .btn._lineTwo::after {\r\n  top: 35%;\r\n  transform: rotate(45deg) translateY(-35%);\r\n}\r\n\r\n\r\n\r\n\/* yes\/no\u5f62\u5f0f\u306e\u30dc\u30bf\u30f3\u9078\u629e\u80a2 *\/\r\n.question-reveal-multi .questionArea .linkbox:not(.yes-no) input+label {\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n .question-reveal-multi .questionArea:nth-child(1) .linkbox:not(.yes-no) input+label {\r\n  height: 115px;\r\n}\r\n\r\n\r\n\r\n\/* \u9078\u629e\u80a2\u3092\u30db\u30d0\u30fc\u3057\u305f\u3068\u304d\u306e\u8a2d\u5b9a *\/\r\n.question-reveal-multi .linkbox:not(.yes-no) input+label:hover {\r\n  background: #000;\r\n  color: #fff;\r\n}\r\n\r\n\/* \u30b9\u30de\u30db(\u753b\u9762\u5e45768px\u4ee5\u4e0b)\u306e\u5834\u5408\u306e\u8a2d\u5b9a\u3000 *\/\r\n@media screen and (max-width: 768px) {\r\n   .question-reveal-multi .questionArea:nth-child(1) .linkbox:not(.yes-no) input+label {\r\n    height: 90px;\r\n  }\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Q1\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059 \u8907\u6570\u9078\u629e\u53ef\u80fd \u8907\u6570\u9078\u629e\u53ef\u80fd\u8907\u6570\u9078\u629e\u53ef\u80fd \u8907\u6570\u9078\u629e\u53ef\u80fd \u8907\u6570\u9078\u629e\u53ef\u80fd Q2\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059 \u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd \u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd \u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd \u4e00\u3064\u306e\u307f\u9078\u629e\u53ef\u80fd Q3\u3053\u3053\u306b\u30c6\u30ad\u30b9\u30c8\u304c<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[4,3],"class_list":["post-89","post","type-post","status-publish","format-standard","hentry","category-6","tag-simplicity02","tag-3"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/89","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=89"}],"version-history":[{"count":15,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions"}],"predecessor-version":[{"id":164,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/89\/revisions\/164"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=89"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=89"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}