![\"\"](\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\")
<\/div>\n<\/div>\n
\u4e0b\u8a18Beyond\u30b3\u30fc\u30c9<\/p>\n
JS head<\/p>\n
<!-- \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 -->\r\n<script>\r\n var questionJumpCont = questionJumpCont || {};\r\n (function(_) {\r\n const target = '.js-questionJump';\r\n\r\n _.questionCheck = function(el) {\r\n let questions = el.querySelectorAll('.js-questions');\r\n let posTop = el.getBoundingClientRect().top + window.pageYOffset;\r\n\r\n questions.forEach(function(question) {\r\n let checkes = question.querySelectorAll('.js-item');\r\n let nextBtn = question.querySelector('.js-btn');\r\n\r\n checkes.forEach(function(check, num) {\r\n check.addEventListener('change', function() {\r\n if (check.type === 'radio') {\r\n checkes.forEach(function(check1) {\r\n check1.parentNode.classList.remove('checked');\r\n })\r\n check.parentNode.classList.add('checked');\r\n } else if (check.type === 'checkbox') {\r\n check.parentNode.classList.toggle('checked');\r\n }\r\n let parent = check.closest('.answer__items');\r\n let visibleItem = parent.nextElementSibling.children;\r\n\r\n if (check.checked && parent.nextElementSibling.classList.contains('js-selectItems')) {\r\n Array.from(visibleItem, function(select) {\r\n select.classList.remove('is-active');\r\n })\r\n parent.nextElementSibling.children[num].classList.add('is-active');\r\n }\r\n\r\n if (check.checked && parent.nextElementSibling.getElementsByClassName('js-btn')) {\r\n nextBtn.disabled = false;\r\n } else {\r\n nextBtn.disabled = true;\r\n }\r\n })\r\n })\r\n\r\n nextBtn.addEventListener('click', function() {\r\n question.classList.add('is-hidden');\r\n question.nextElementSibling.classList.remove('is-hidden');\r\n window.scroll({\r\n top: posTop,\r\n behavior: 'smooth'\r\n });\r\n })\r\n })\r\n };\r\n\r\n _.init = function() {\r\n Array.from(document.querySelectorAll(target), el => {\r\n _.questionCheck(el);\r\n })\r\n };\r\n\r\n })(questionJumpCont);\r\n<\/script>\r\n<!-- JavaScript head\u3053\u3053\u307e\u3067 --><\/code><\/pre>\nHTML<\/p>\n
\r\n<!-- HTML\u3053\u3053\u304b\u3089 -->\r\n<div class=\"questionJump__area js-questionJump\">\r\n <div class=\"questionJump__box js-questions\">\r\n <div class=\"head__box\">\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" height=\"380\" width=\"570\" draggable=\"false\">\r\n <\/div>\r\n <div class=\"questionJump__item\">\r\n <div class=\"num__box\">\r\n <p class=\"questionHead\">Question<\/p>\r\n <ul class=\"items\">\r\n <li class=\"item is-active\">1<\/li>\r\n <li class=\"item\">2<\/li>\r\n <li class=\"item\">3<\/li>\r\n <li class=\"item\">4<\/li>\r\n <li class=\"item\">5<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"question__text\">\r\n <p class=\"text\">\u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059<br>\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"answer__items\">\r\n <input type=\"radio\" class=\"js-item\" name=\"q1\" id=\"q1-1\">\r\n <label for=\"q1-1\">\u9078\u629e\u80a21-1<\/label>\r\n <input type=\"radio\" class=\"js-item\" name=\"q1\" id=\"q1-2\">\r\n <label for=\"q1-2\">\u9078\u629e\u80a21-2<\/label>\r\n <\/div>\r\n <button class=\"nextBtn js-btn\" disabled=\"\">\u6b21\u3078<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"questionJump__box js-questions is-hidden\">\r\n <div class=\"head__box textHead\">\r\n <p class=\"questionNum\">\u6b8b\u308a4\u554f\u3067\u3059<\/p>\r\n <\/div>\r\n <div class=\"questionJump__item\">\r\n <div class=\"num__box\">\r\n <p class=\"questionHead\">Question<\/p>\r\n <ul class=\"items\">\r\n <li class=\"item\">1<\/li>\r\n <li class=\"item is-active\">2<\/li>\r\n <li class=\"item\">3<\/li>\r\n <li class=\"item\">4<\/li>\r\n <li class=\"item\">5<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"question__text\">\r\n <p class=\"text\">\u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059<br>\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <\/div>\r\n\r\n <div class=\"answer__items\">\r\n <input type=\"radio\" class=\"js-item\" name=\"q2\" id=\"q2-1\">\r\n <label for=\"q2-1\">\u9078\u629e\u80a22-1<\/label>\r\n <input type=\"radio\" class=\"js-item\" name=\"q2\" id=\"q2-2\">\r\n <label for=\"q2-2\">\u9078\u629e\u80a22-2<\/label>\r\n <\/div>\r\n <button class=\"nextBtn js-btn\" disabled=\"\">\u6b21\u3078<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"questionJump__box js-questions is-hidden\">\r\n <div class=\"head__box textHead\">\r\n <p class=\"questionNum\">\u6b8b\u308a3\u554f\u3067\u3059<\/p>\r\n <\/div>\r\n <div class=\"questionJump__item\">\r\n <div class=\"num__box\">\r\n <p class=\"questionHead\">Question<\/p>\r\n <ul class=\"items\">\r\n <li class=\"item\">1<\/li>\r\n <li class=\"item\">2<\/li>\r\n <li class=\"item is-active\">3<\/li>\r\n <li class=\"item\">4<\/li>\r\n <li class=\"item\">5<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"question__text\">\r\n <p class=\"text\">\u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059<br>\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"answer__items _flexRow\">\r\n <div class=\"img__item\">\r\n <input type=\"radio\" class=\"js-item\" name=\"q3\" id=\"q3-1\">\r\n <label for=\"q3-1\" class=\"checkItem\">\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"checkText\">\u9078\u629e\u80a23-1<\/p>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"img__item\">\r\n <input type=\"radio\" class=\"js-item\" name=\"q3\" id=\"q3-2\">\r\n <label for=\"q3-2\" class=\"checkItem\">\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"checkText\">\u9078\u629e\u80a23-2<\/p>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"img__item\">\r\n <input type=\"radio\" class=\"js-item\" name=\"q3\" id=\"q3-3\">\r\n <label for=\"q3-3\" class=\"checkItem\">\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"checkText\">\u9078\u629e\u80a23-3<\/p>\r\n <\/label>\r\n <\/div>\r\n\r\n <div class=\"img__item\">\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <input type=\"radio\" class=\"js-item\" name=\"q3\" id=\"q3-4\">\r\n <label for=\"q3-4\" class=\"checkItem\">\r\n <p class=\"checkText\">\u9078\u629e\u80a23-4<\/p>\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <div class=\"select__items js-selectItems\">\r\n <div class=\"select__item\">\r\n <p class=\"head\">\u2460<span class=\"_big\">\u30c6\u30ad\u30b9\u30c8<\/span>\u304c<br>\u5165\u308a\u307e\u3059<\/p>\r\n <p class=\"subtext\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"text\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"select__item\">\r\n <p class=\"head\">\u2461<span class=\"_big\">\u30c6\u30ad\u30b9\u30c8<\/span>\u304c<br>\u5165\u308a\u307e\u3059<\/p>\r\n <p class=\"subtext\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"text\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"select__item\">\r\n <p class=\"head\">\u2462<span class=\"_big\">\u30c6\u30ad\u30b9\u30c8<\/span>\u304c<br>\u5165\u308a\u307e\u3059<\/p>\r\n <p class=\"subtext\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"text\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"select__item\">\r\n <p class=\"head\">\u2463<span class=\"_big\">\u30c6\u30ad\u30b9\u30c8<\/span>\u304c<br>\u5165\u308a\u307e\u3059<\/p>\r\n <p class=\"subtext\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <p class=\"text\">\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u30c6\u30ad\u30b9\u30c8\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <button class=\"nextBtn js-btn\" disabled=\"\">\u6b21\u3078<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"questionJump__box js-questions is-hidden\">\r\n <div class=\"head__box textHead\">\r\n <p class=\"questionNum\">\u6b8b\u308a2\u554f\u3067\u3059<\/p>\r\n <\/div>\r\n <div class=\"questionJump__item\">\r\n <div class=\"num__box\">\r\n <p class=\"questionHead\">Question<\/p>\r\n <ul class=\"items\">\r\n <li class=\"item\">1<\/li>\r\n <li class=\"item\">2<\/li>\r\n <li class=\"item\">3<\/li>\r\n <li class=\"item is-active\">4<\/li>\r\n <li class=\"item\">5<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"question__text\">\r\n <p class=\"text\">\u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059<br>\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <\/div>\r\n\r\n <div class=\"answer__items\">\r\n <div class=\"img__item100\">\r\n <input type=\"checkbox\" class=\"js-item\" name=\"q4\" id=\"q4-1\">\r\n <label for=\"q4-1\" class=\"checkItem\">\r\n <p class=\"checkText\">\u9078\u629e\u80a24-1<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <\/label>\r\n <\/div>\r\n <div class=\"img__item100\">\r\n <input type=\"checkbox\" class=\"js-item\" name=\"q4\" id=\"q4-2\">\r\n <label for=\"q4-2\" class=\"checkItem\">\r\n <p class=\"checkText\">\u9078\u629e\u80a24-2<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <\/label>\r\n <\/div>\r\n <div class=\"img__item100\">\r\n <input type=\"checkbox\" class=\"js-item\" name=\"q4\" id=\"q4-3\">\r\n <label for=\"q4-3\" class=\"checkItem\">\r\n <p class=\"checkText\">\u9078\u629e\u80a24-3<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <\/label>\r\n <\/div>\r\n <\/div>\r\n <button class=\"nextBtn js-btn\" disabled=\"\">\u6b21\u3078<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"questionJump__box js-questions is-hidden\">\r\n <div class=\"head__box textHead\">\r\n <p class=\"questionNum\">\u6b8b\u308a1\u554f\u3067\u3059<\/p>\r\n <\/div>\r\n <div class=\"questionJump__item\">\r\n <div class=\"num__box\">\r\n <p class=\"questionHead\">Question<\/p>\r\n <ul class=\"items\">\r\n <li class=\"item\">1<\/li>\r\n <li class=\"item\">2<\/li>\r\n <li class=\"item\">3<\/li>\r\n <li class=\"item\">4<\/li>\r\n <li class=\"item is-active\">5<\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"question__text\">\r\n <p class=\"text\">\u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059<br>\u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002<\/p>\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <\/div>\r\n\r\n <div class=\"answer__items\">\r\n <input type=\"checkbox\" class=\"js-item\" name=\"q5\" id=\"q5-1\">\r\n <label for=\"q5-1\">\u9078\u629e\u80a25-1<\/label>\r\n <input type=\"checkbox\" class=\"js-item\" name=\"q5\" id=\"q5-2\">\r\n <label for=\"q5-2\">\u9078\u629e\u80a25-2<\/label>\r\n <input type=\"checkbox\" class=\"js-item\" name=\"q5\" id=\"q5-3\">\r\n <label for=\"q5-3\">\u9078\u629e\u80a25-3<\/label>\r\n <\/div>\r\n <button class=\"nextBtn js-btn\" disabled=\"\">\u56de\u7b54\u3092\u5b8c\u4e86\u3059\u308b<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"result__box is-hidden\">\r\n <img src=\"https:\/\/production.static.squadbeyond.com\/uploads\/article_photo\/photo\/711633\/2856f88e-0076-4f7a-9dd6-c1e5117bb18b.png\" alt=\"\" draggable=\"false\">\r\n <\/div>\r\n<\/div><\/code><\/pre>\nCSS<\/p>\n
.questionJump__area {\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n .questionJump__box {\r\n background: #eee;\r\n width: 100%;\r\n height: auto;\r\n padding-bottom: 10px;\r\n}\r\n\r\n .head__box img {\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n .head__box.textHead {\r\n width: 100%;\r\n height: auto;\r\n padding: 20px 0 10px;\r\n background: #E7A5C9;\r\n position: relative;\r\n}\r\n\r\n .head__box.textHead:after {\r\n content: '';\r\n position: absolute;\r\n bottom: -20px;\r\n left: 0;\r\n width: 100%;\r\n height: 20px;\r\n background: linear-gradient(to top right, transparent 50%, #E7A5C9 50%) no-repeat top left \/ 50% 100%,\r\n linear-gradient(to top left, transparent 50%, #E7A5C9 50%) no-repeat bottom right\/50% 100%;\r\n display: block;\r\n}\r\n\r\n .head__box.textHead .questionNum {\r\n text-align: center;\r\n color: #fff;\r\n font-size: 30px;\r\n font-family: serif;\r\n}\r\n\r\n .questionJump__item {\r\n background: #fff;\r\n margin: 0 10px;\r\n padding: 40px 10px;\r\n}\r\n\r\n .num__box .questionHead {\r\n font-size: 20px;\r\n text-align: center;\r\n font-family: serif;\r\n color: #666;\r\n}\r\n\r\n .num__box .items {\r\n width: 50%;\r\n height: auto;\r\n margin: 10px auto 0;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n .num__box .items {\r\n width: 80%;\r\n }\r\n}\r\n\r\n .num__box .items:after {\r\n content: '';\r\n width: 100%;\r\n height: 1px;\r\n border-top: 1px dotted #E7A5C9;\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n transform: translateY(-50%);\r\n z-index: -1;\r\n}\r\n\r\n .num__box .items .item {\r\n width: 40px;\r\n height: 40px;\r\n border-radius: 25px;\r\n background: #ccc;\r\n color: #fff;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-size: 18px;\r\n font-family: serif;\r\n}\r\n\r\n .num__box .items .item.is-active {\r\n background: #E7A5C9;\r\n}\r\n\r\n .question__text {\r\n margin-top: 30px;\r\n}\r\n\r\n .question__text .text {\r\n font-size: 30px;\r\n text-align: center;\r\n color: #333;\r\n font-family: serif;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n .question__text .text {\r\n font-size: 24px;\r\n }\r\n}\r\n\r\n .question__text img {\r\n width: 90%;\r\n height: auto;\r\n margin: 20px auto 0;\r\n display: block;\r\n}\r\n\r\n .answer__items {\r\n margin-top: 30px;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n .answer__items input {\r\n display: none;\r\n}\r\n\r\n .answer__items label {\r\n width: calc(90% - 70px);\r\n height: auto;\r\n font-size: 24px;\r\n color: #993711;\r\n background: #eee;\r\n border-radius: 5px;\r\n padding: 15px 10px 15px 60px;\r\n margin: 10px auto 0;\r\n position: relative;\r\n transition: background 0.2s, color 0.2s;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n .answer__items label {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n .answer__items label:before {\r\n content: '';\r\n width: 20px;\r\n height: 10px;\r\n border-bottom: 2px solid #993711;\r\n border-left: 2px solid #993711;\r\n position: absolute;\r\n left: 15px;\r\n top: 45%;\r\n transform: translateY(-45%) rotate(-45deg);\r\n transform-origin: center;\r\n transition: border-color 0.2s;\r\n}\r\n\r\n .answer__items input[type=\"radio\"]:checked+label,\r\n .answer__items input[type=\"checkbox\"]:checked+label {\r\n background: #E7A5C9;\r\n color: #fff;\r\n}\r\n\r\n .answer__items input[type=\"radio\"]:checked+label:before,\r\n .answer__items input[type=\"checkbox\"]:checked+label:before {\r\n border-color: #fff;\r\n}\r\n\r\n .answer__items .img__item {\r\n width: calc(48% - 4px);\r\n height: auto;\r\n margin: 1%;\r\n border: 2px solid #ccc;\r\n border-radius: 5px;\r\n}\r\n\r\n .answer__items .img__item.checked {\r\n border-color: #D45D87;\r\n background: #E7A5C9;\r\n}\r\n\r\n .answer__items .img__item img {\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n .answer__items .img__item label.checkItem {\r\n margin: 0;\r\n padding: 0;\r\n background: none;\r\n width: 100%;\r\n height: auto;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n}\r\n\r\n .answer__items .img__item label.checkItem .checkText {\r\n width: 100%;\r\n height: auto;\r\n font-size: 24px;\r\n color: #993711;\r\n text-align: center;\r\n background: none;\r\n border-radius: 0;\r\n padding: 50px 0 10px;\r\n margin: 0;\r\n display: inline-block;\r\n position: relative;\r\n transition: none;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n .answer__items .img__item label.checkItem .checkText {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n .answer__items .img__item.checked label.checkItem .checkText {\r\n color: #fff;\r\n background: none;\r\n}\r\n\r\n .answer__items .img__item label.checkItem:before {\r\n content: none;\r\n}\r\n\r\n .answer__items .img__item label.checkItem .checkText:before {\r\n content: '';\r\n width: 0;\r\n height: 0;\r\n border: none;\r\n}\r\n\r\n .answer__items .img__item.checked label.checkItem .checkText:before {\r\n content: '';\r\n position: absolute;\r\n width: 20px;\r\n height: 10px;\r\n border-bottom: 2px solid #fff;\r\n border-left: 2px solid #fff;\r\n z-index: 1;\r\n top: 12px;\r\n left: 50%;\r\n transform: translateY(0) translateX(-50%) rotate(-45deg);\r\n}\r\n\r\n .answer__items .img__item label.checkItem .checkText:after {\r\n content: '';\r\n width: 30px;\r\n height: 30px;\r\n border: 2px solid #ccc;\r\n position: absolute;\r\n top: 5px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n .answer__items .img__item.checked label.checkItem .checkText:after {\r\n border-color: #fff;\r\n}\r\n\r\n .answer__items .img__item100 {\r\n width: calc(100% - 20px);\r\n height: auto;\r\n margin-top: 1%;\r\n border: 2px solid #ccc;\r\n border-radius: 5px;\r\n padding: 10px;\r\n}\r\n\r\n .answer__items .img__item100.checked {\r\n border-color: #D45D87;\r\n background: #E7A5C9;\r\n}\r\n\r\n .answer__items .img__item100 label.checkItem {\r\n width: 100%;\r\n height: auto;\r\n font-size: 24px;\r\n color: #993711;\r\n text-align: center;\r\n background: none;\r\n border-radius: 0;\r\n padding: 0;\r\n margin: 0;\r\n display: inline-block;\r\n position: relative;\r\n transition: none;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n .answer__items .img__item100 label.checkItem {\r\n font-size: 16px;\r\n }\r\n}\r\n\r\n .answer__items .img__item100 label.checkItem .checkText {\r\n padding: 0 0 0 60px;\r\n width: auto;\r\n display: inline-block;\r\n position: relative;\r\n}\r\n\r\n .answer__items .img__item100.checked label.checkItem .checkText {\r\n color: #fff;\r\n}\r\n\r\n .answer__items .img__item100 label.checkItem:before {\r\n display: none;\r\n}\r\n\r\n .answer__items .img__item100 label.checkItem .checkText:before {\r\n width: 0;\r\n height: 0;\r\n border: none;\r\n}\r\n\r\n .answer__items .img__item100.checked label.checkItem .checkText:before {\r\n content: '';\r\n width: 20px;\r\n height: 10px;\r\n border-bottom: 2px solid #fff;\r\n border-left: 2px solid #fff;\r\n z-index: 1;\r\n top: 45%;\r\n left: 6px;\r\n transform: translateY(-45%) rotate(-45deg);\r\n position: absolute;\r\n transform-origin: center;\r\n transition: border-color 0.2s;\r\n}\r\n\r\n .answer__items .img__item100 label.checkItem .checkText:after {\r\n content: '';\r\n width: 30px;\r\n height: 30px;\r\n border: 2px solid #ccc;\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n transform: translateY(-50%);\r\n}\r\n\r\n .answer__items .img__item100.checked label.checkItem .checkText:after {\r\n border-color: #fff;\r\n}\r\n\r\n .answer__items .img__item100 img {\r\n width: 100%;\r\n height: auto;\r\n margin-top: 10px;\r\n}\r\n\r\n .nextBtn {\r\n width: 90%;\r\n height: auto;\r\n margin: 30px auto 0;\r\n padding: 15px 0;\r\n display: block;\r\n border-radius: 15px;\r\n font-size: 28px;\r\n color: #fff;\r\n box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);\r\n border: 2px solid #aaa;\r\n border-color: #11b382;\r\n background: linear-gradient(0deg, rgba(85, 217, 177, 1) 0%, rgba(17, 179, 130, 1) 20%, rgba(17, 179, 130, 1) 80%, rgba(85, 217, 177, 1) 100%);\r\n cursor: pointer;\r\n}\r\n\r\n@media screen and (max-width: 600px) {\r\n .nextBtn {\r\n font-size: 20px;\r\n }\r\n}\r\n\r\n .nextBtn:disabled {\r\n border-color: #ccc;\r\n background: linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(221, 221, 221, 1) 15%, rgba(221, 221, 221, 1) 85%, rgba(238, 238, 238, 1) 100%);\r\n cursor: auto;\r\n}\r\n\r\n .result__box,\r\n .result__box img {\r\n width: 100%;\r\n height: auto;\r\n}\r\n\r\n .select__items {\r\n margin-top: 20px;\r\n}\r\n\r\n .select__items .select__item {\r\n width: calc(100% - 44px);\r\n height: auto;\r\n border: 2px solid #D45D87;\r\n background: #F4D2DE;\r\n border-radius: 3px;\r\n padding: 20px;\r\n display: none;\r\n}\r\n\r\n .select__items .select__item.is-active {\r\n display: block;\r\n}\r\n\r\n .select__items .select__item .head {\r\n text-align: center;\r\n font-size: 20px;\r\n font-family: serif;\r\n}\r\n\r\n .select__items .select__item .subtext {\r\n font-size: 12px;\r\n margin-top: 10px;\r\n text-align: center;\r\n}\r\n\r\n .select__items .select__item img {\r\n width: calc(100% - 6px);\r\n height: auto;\r\n margin-top: 20px;\r\n border: 2px solid #D45D87;\r\n border-radius: 3px;\r\n}\r\n\r\n .select__items .select__item .text {\r\n font-size: 16px;\r\n margin-top: 20px;\r\n text-align: left;\r\n}\r\n\r\n .is-hidden {\r\n display: none;\r\n}\r\n\r\n ._flexRow {\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n align-items: inherit;\r\n}\r\n\r\n ._big {\r\n font-size: 2rem;\r\n}\r\n\r\n p {\r\n margin: 0;\r\n}\r\n\r\n ul {\r\n list-style: none;\r\n padding-left: 0;\r\n}\r\n\r\n img {\r\n vertical-align: middle;\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"Question 1 2 3 4 5 \u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059 \u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002 \u9078\u629e\u80a21-1 \u9078\u629e\u80a21-2 \u6b21\u3078 \u6b8b\u308a4\u554f\u3067\u3059 Question 1 2 3 4 5 \u3053\u3053\u306b\u306f\u8cea\u554f\u304c\u5165\u308a\u307e\u3059 \u8cea\u554f\u304c\u5165\u308a\u307e\u3059\u3002 \u9078\u629e\u80a22-1<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,1],"tags":[4,3,5],"class_list":["post-41","post","type-post","status-publish","format-standard","hentry","category-6","category-uncategorized","tag-simplicity02","tag-3","tag-5"],"_links":{"self":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/41","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=41"}],"version-history":[{"count":6,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions"}],"predecessor-version":[{"id":47,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=\/wp\/v2\/posts\/41\/revisions\/47"}],"wp:attachment":[{"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=41"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=41"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phantom-cgray03.xyz\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=41"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}