{"id":984,"date":"2026-06-13T12:37:11","date_gmt":"2026-06-13T03:37:11","guid":{"rendered":"https:\/\/noseflute.club\/?page_id=984"},"modified":"2026-06-16T14:58:11","modified_gmt":"2026-06-16T05:58:11","slug":"%e3%83%81%e3%83%a3%e3%83%83%e3%83%94%e3%83%bc%e5%8d%a0%e3%81%84%e3%82%ab%e3%83%bc%e3%83%89%e6%8a%bd%e9%81%b8","status":"publish","type":"page","link":"https:\/\/noseflute.club\/?page_id=984","title":{"rendered":"\u30bf\u30ed\u30c3\u30c8\u30ab\u30fc\u30c9\u62bd\u9078\u30da\u30fc\u30b8"},"content":{"rendered":"\n\n\n\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\">\n<meta name=\"theme-color\" content=\"#fff7d6\">\n<title>\u30c1\u30e3\u30c3\u30d4\u30fc\u5360\u3044\u2122\ufe0f \u30ab\u30fc\u30c9\u62bd\u9078<\/title>\n<style>\n  :root{\n    --bg1:#fffdf4;\n    --bg2:#fff2bf;\n    --panel:#ffffffee;\n    --ink:#3d3550;\n    --sub:#71677f;\n    --gold:#d69b1f;\n    --line:#eadfb8;\n    --shadow:0 8px 22px rgba(93,72,34,.14);\n    --card-w:clamp(58px,17vw,66px);\n    --card-h:clamp(90px,25vw,98px);\n  }\n  *{\n    box-sizing:border-box;\n  }\n  html,\n  body{\n    margin:0;\n    min-height:100%;\n    font-family:\n      -apple-system,\n      BlinkMacSystemFont,\n      \"Hiragino Sans\",\n      \"Yu Gothic UI\",\n      \"Yu Gothic\",\n      Meiryo,\n      sans-serif;\n    color:var(--ink);\n  }\n  body{\n    background:\n      radial-gradient(\n        circle at 12% 8%,\n        rgba(255,255,255,.95) 0 7%,\n        transparent 24%\n      ),\n      radial-gradient(\n        circle at 88% 5%,\n        rgba(255,238,173,.75) 0 9%,\n        transparent 27%\n      ),\n      linear-gradient(\n        180deg,\n        var(--bg1),\n        var(--bg2)\n      );\n    padding:\n      calc(10px + env(safe-area-inset-top))\n      10px\n      calc(12px + env(safe-area-inset-bottom));\n  }\n  .app{\n    width:min(430px,100%);\n    margin:0 auto;\n  }\n  header{\n    text-align:center;\n    padding:4px 4px 7px;\n  }\n  h1{\n    margin:0;\n    font-size:clamp(21px,6vw,27px);\n    line-height:1.15;\n    letter-spacing:.02em;\n  }\n  .subtitle{\n    margin:4px 0 0;\n    font-size:12px;\n    color:var(--sub);\n  }\n  .control-panel{\n    background:var(--panel);\n    border:1px solid rgba(214,155,31,.25);\n    border-radius:18px;\n    padding:10px;\n    box-shadow:var(--shadow);\n  }\n  .select-title{\n    margin:0 0 7px;\n    font-size:13px;\n    font-weight:700;\n    text-align:center;\n  }\n  .segmented{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    gap:7px;\n  }\n  .segmented input{\n    position:absolute;\n    opacity:0;\n    pointer-events:none;\n  }\n  .segmented label{\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    min-height:42px;\n    border-radius:13px;\n    border:2px solid var(--line);\n    background:#fff;\n    font-weight:800;\n    cursor:pointer;\n    transition:.18s ease;\n  }\n  .segmented input:checked + label{\n    background:#fff1b9;\n    border-color:var(--gold);\n    color:#6b4a00;\n    box-shadow:\n      inset 0 0 0 2px rgba(255,255,255,.75);\n  }\n  #drawBtn{\n    width:100%;\n    margin-top:8px;\n    border:0;\n    border-radius:14px;\n    min-height:48px;\n    font-size:17px;\n    font-weight:900;\n    color:#fff;\n    background:\n      linear-gradient(\n        180deg,\n        #ae83dc,\n        #8061b2\n      );\n    box-shadow:\n      0 5px 0 #62478e,\n      0 9px 16px rgba(91,65,132,.22);\n    cursor:pointer;\n    letter-spacing:.03em;\n  }\n  #drawBtn:active{\n    transform:translateY(3px);\n    box-shadow:0 2px 0 #62478e;\n  }\n  #drawBtn:disabled{\n    opacity:.55;\n    cursor:not-allowed;\n    transform:none;\n  }\n  .status{\n    min-height:22px;\n    margin:7px 2px 0;\n    text-align:center;\n    font-size:12px;\n    color:var(--sub);\n    line-height:1.35;\n  }\n  .spread-panel{\n    position:relative;\n    margin-top:9px;\n    background:rgba(255,255,255,.72);\n    border:1px solid rgba(214,155,31,.22);\n    border-radius:18px;\n    min-height:210px;\n    padding:9px 7px 8px;\n    box-shadow:var(--shadow);\n    overflow:hidden;\n  }\n  .sparkle{\n    position:absolute;\n    color:#d8ad38;\n    opacity:.22;\n    pointer-events:none;\n    user-select:none;\n  }\n  .s1{\n    top:8px;\n    left:12px;\n    font-size:18px;\n  }\n  .s2{\n    top:18px;\n    right:14px;\n    font-size:13px;\n  }\n  .s3{\n    bottom:8px;\n    right:20px;\n    font-size:17px;\n  }\n  .spread{\n    position:relative;\n    width:100%;\n    margin:0 auto;\n  }\n  .spread.three{\n    display:grid;\n    grid-template-columns:repeat(3,var(--card-w));\n    justify-content:center;\n    gap:clamp(5px,2vw,9px);\n    align-items:start;\n    padding:4px 0 2px;\n  }\n  .spread.five{\n    height:\n      calc(\n        var(--card-h) +\n        var(--card-h) +\n        var(--card-h) +\n        84px\n      );\n    max-height:380px;\n    min-height:350px;\n  }\n  .slot{\n    width:var(--card-w);\n    text-align:center;\n  }\n  .spread.five .slot{\n    position:absolute;\n  }\n  .spread.five .slot.top{\n    left:50%;\n    top:0;\n    transform:translateX(-50%);\n  }\n  .spread.five .slot.left{\n    left:\n      calc(\n        50% -\n        var(--card-w) -\n        clamp(14px,5vw,22px)\n      );\n    top:calc(var(--card-h) + 28px);\n  }\n  .spread.five .slot.center{\n    left:50%;\n    top:calc(var(--card-h) + 28px);\n    transform:translateX(-50%);\n  }\n  .spread.five .slot.right{\n    right:\n      calc(\n        50% -\n        var(--card-w) -\n        clamp(14px,5vw,22px)\n      );\n    top:calc(var(--card-h) + 28px);\n  }\n  .spread.five .slot.bottom{\n    left:50%;\n    top:\n      calc(\n        var(--card-h) +\n        var(--card-h) +\n        56px\n      );\n    transform:translateX(-50%);\n  }\n  .pos-label{\n    height:24px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    font-size:8.5px;\n    font-weight:800;\n    line-height:1.12;\n    color:#675b72;\n    padding:0 1px;\n    overflow-wrap:anywhere;\n    word-break:normal;\n  }\n  .card{\n    position:relative;\n    width:var(--card-w);\n    height:var(--card-h);\n    perspective:900px;\n  }\n  .card-inner{\n    position:absolute;\n    inset:0;\n    transform-style:preserve-3d;\n    transition:\n      transform\n      .58s\n      cubic-bezier(.2,.74,.22,1);\n  }\n  .card.open .card-inner{\n    transform:rotateY(180deg);\n  }\n  .card-face{\n    position:absolute;\n    inset:0;\n    border-radius:10px;\n    backface-visibility:hidden;\n    overflow:hidden;\n    border:2px solid #cda341;\n    box-shadow:\n      0 4px 10px rgba(75,55,20,.18);\n  }\n  .card-back{\n    display:grid;\n    place-items:center;\n    background:\n      radial-gradient(\n        circle,\n        #fff7cc 0 5%,\n        transparent 6%\n      ),\n      radial-gradient(\n        circle at 20% 25%,\n        #fff7cc 0 2.5%,\n        transparent 3.5%\n      ),\n      radial-gradient(\n        circle at 80% 70%,\n        #fff7cc 0 2.5%,\n        transparent 3.5%\n      ),\n      linear-gradient(\n        145deg,\n        #a987d1,\n        #7959ae\n      );\n    border-color:#f1ce70;\n    color:#fff8d6;\n  }\n  .back-mark{\n    width:68%;\n    aspect-ratio:1;\n    display:grid;\n    place-items:center;\n    border:1.5px solid rgba(255,255,255,.75);\n    border-radius:50%;\n    font-size:clamp(22px,7vw,31px);\n    box-shadow:\n      0 0 0 5px rgba(255,255,255,.10);\n  }\n  .card-front{\n    transform:rotateY(180deg);\n    display:flex;\n    flex-direction:column;\n    align-items:center;\n    justify-content:space-between;\n    padding:5px 4px 6px;\n    background:\n      radial-gradient(\n        circle at 50% 34%,\n        rgba(255,255,255,.98),\n        rgba(255,250,226,.9) 55%,\n        rgba(255,238,175,.95)\n      );\n  }\n  .arcana{\n    font-size:7px;\n    font-weight:800;\n    color:#92711a;\n    letter-spacing:.05em;\n  }\n  .symbol{\n    font-size:clamp(21px,6vw,27px);\n    line-height:1;\n    margin-top:1px;\n  }\n  .card-name{\n    min-height:25px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    font-size:clamp(7.6px,2.05vw,9px);\n    font-weight:900;\n    line-height:1.12;\n    text-align:center;\n    word-break:break-all;\n    overflow-wrap:anywhere;\n  }\n  .orientation{\n    width:100%;\n    border-radius:8px;\n    padding:2px 1px;\n    font-size:8px;\n    font-weight:900;\n    color:#fff;\n    background:#7e67ad;\n  }\n  .orientation.reversed{\n    background:#bf6e77;\n  }\n  .actions{\n    display:none;\n    grid-template-columns:1fr 1fr;\n    gap:7px;\n    margin-top:8px;\n  }\n  .actions.show{\n    display:grid;\n  }\n  .secondary{\n    min-height:40px;\n    border-radius:12px;\n    border:1.5px solid #dcc985;\n    background:#fffdf4;\n    color:#584d62;\n    font-weight:800;\n    cursor:pointer;\n  }\n  .note{\n    margin:8px 4px 0;\n    font-size:11px;\n    color:#6e6576;\n    text-align:center;\n    line-height:1.45;\n  }\n  .shooting .select-title,\n  .shooting .segmented,\n  .shooting #drawBtn,\n  .shooting .status,\n  .shooting .note{\n    display:none;\n  }\n  .shooting .control-panel{\n    box-shadow:none;\n    background:transparent;\n    border:0;\n    padding:0;\n  }\n  .shooting .spread-panel{\n    margin-top:2px;\n  }\n  .shooting header{\n    padding-bottom:3px;\n  }\n  .shooting .subtitle{\n    display:none;\n  }\n  @media (max-height:690px){\n    :root{\n      --card-w:58px;\n      --card-h:88px;\n    }\n    body{\n      padding-top:6px;\n    }\n    header{\n      padding-bottom:4px;\n    }\n    .control-panel{\n      padding:8px;\n    }\n    .spread-panel{\n      margin-top:6px;\n      padding-top:5px;\n    }\n    .spread.five{\n      min-height:330px;\n      height:330px;\n    }\n  }\n  @media (prefers-reduced-motion:reduce){\n    .card-inner{\n      transition:none;\n    }\n  }\n<\/style>\n\n\n<main class=\"app\" id=\"app\">\n  <header>\n    <h1>\u30c1\u30e3\u30c3\u30d4\u30fc\u5360\u3044\u2122\ufe0f<\/h1>\n    <p class=\"subtitle\">\u30ab\u30fc\u30c9\u62bd\u9078\u30da\u30fc\u30b8<\/p>\n  <\/header>\n  <section class=\"control-panel\" aria-label=\"\u30ab\u30fc\u30c9\u679a\u6570\u3068\u62bd\u9078\">\n    <p class=\"select-title\">\n      \u30ab\u30fc\u30c9\u306e\u679a\u6570\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044\n    <\/p>\n    <div class=\"segmented\">\n      <input type=\"radio\" id=\"count3\" name=\"count\" value=\"3\">\n      <label for=\"count3\">\n        3\u679a\u30fb\u4f53\u9a13\u7248\n      <\/label>\n      <input type=\"radio\" id=\"count5\" name=\"count\" value=\"5\" checked=\"\">\n      <label for=\"count5\">\n        5\u679a\u30fb\u901a\u5e38\uff0f\u30c6\u30fc\u30de\n      <\/label>\n    <\/div>\n    <button id=\"drawBtn\" type=\"button\">\n      \u30ab\u30fc\u30c9\u3092\u5f15\u304f\n    <\/button>\n    <div class=\"status\" id=\"status\">\n      \u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30ab\u30fc\u30c9\u304c1\u679a\u305a\u3064\u81ea\u52d5\u3067\u958b\u304d\u307e\u3059\u3002\n    <\/div>\n  <\/section>\n  <section class=\"spread-panel\" aria-live=\"polite\">\n    <span class=\"sparkle s1\">\u2726<\/span>\n    <span class=\"sparkle s2\">\u2727<\/span>\n    <span class=\"sparkle s3\">\u2726<\/span>\n    <div class=\"spread five\" id=\"spread\"><\/div>\n  <\/section>\n  <div class=\"actions\" id=\"actions\">\n    <button class=\"secondary\" id=\"shootBtn\" type=\"button\">\n      \u64ae\u5f71\u30e2\u30fc\u30c9\n    <\/button>\n    <button class=\"secondary\" id=\"resetBtn\" type=\"button\">\n      \u5f15\u304d\u76f4\u3059\n    <\/button>\n  <\/div>\n  <p class=\"note\">\n    \u7d50\u679c\u304c\u3059\u3079\u3066\u8868\u793a\u3055\u308c\u305f\u3089\u3001\u914d\u7f6e\u30fb\u30ab\u30fc\u30c9\u540d\u30fb\u6b63\u4f4d\u7f6e\uff0f\u9006\u4f4d\u7f6e\u304c\n    \u898b\u3048\u308b\u72b6\u614b\u3067\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u3066\u9001\u3063\u3066\u304f\u3060\u3055\u3044\u3002\n  <\/p>\n<\/main>\n<script>\nconst major = [\n  [\"0 \u611a\u8005\",\"THE FOOL\",\"\u2606\"],\n  [\"I \u9b54\u8853\u5e2b\",\"THE MAGICIAN\",\"\u221e\"],\n  [\"II \u5973\u6559\u7687\",\"THE HIGH PRIESTESS\",\"\u263e\"],\n  [\"III \u5973\u5e1d\",\"THE EMPRESS\",\"\u265b\"],\n  [\"IV \u7687\u5e1d\",\"THE EMPEROR\",\"\u265c\"],\n  [\"V \u6559\u7687\",\"THE HIEROPHANT\",\"\u271a\"],\n  [\"VI \u604b\u4eba\",\"THE LOVERS\",\"\u2661\"],\n  [\"VII \u6226\u8eca\",\"THE CHARIOT\",\"\u265e\"],\n  [\"VIII \u529b\",\"STRENGTH\",\"\u264c\"],\n  [\"IX \u96a0\u8005\",\"THE HERMIT\",\"\u263c\"],\n  [\"X \u904b\u547d\u306e\u8f2a\",\"WHEEL OF FORTUNE\",\"\u25c9\"],\n  [\"XI \u6b63\u7fa9\",\"JUSTICE\",\"\u2696\"],\n  [\"XII \u540a\u308b\u3055\u308c\u305f\u7537\",\"THE HANGED MAN\",\"\u25bd\"],\n  [\"XIII \u6b7b\u795e\",\"DEATH\",\"\u273f\"],\n  [\"XIV \u7bc0\u5236\",\"TEMPERANCE\",\"\u2697\"],\n  [\"XV \u60aa\u9b54\",\"THE DEVIL\",\"\u2651\"],\n  [\"XVI \u5854\",\"THE TOWER\",\"\u26a1\"],\n  [\"XVII \u661f\",\"THE STAR\",\"\u2605\"],\n  [\"XVIII \u6708\",\"THE MOON\",\"\u263d\"],\n  [\"XIX \u592a\u967d\",\"THE SUN\",\"\u2600\"],\n  [\"XX \u5be9\u5224\",\"JUDGEMENT\",\"\u266c\"],\n  [\"XXI \u4e16\u754c\",\"THE WORLD\",\"\u25ce\"]\n].map(\n  ([name,en,symbol]) => ({\n    name,\n    en,\n    symbol,\n    type:\"\u5927\u30a2\u30eb\u30ab\u30ca\"\n  })\n);\nconst suits = [\n  {\n    jp:\"\u30ef\u30f3\u30c9\",\n    en:\"WANDS\",\n    symbol:\"\u2663\"\n  },\n  {\n    jp:\"\u30ab\u30c3\u30d7\",\n    en:\"CUPS\",\n    symbol:\"\u2665\"\n  },\n  {\n    jp:\"\u30bd\u30fc\u30c9\",\n    en:\"SWORDS\",\n    symbol:\"\u2660\"\n  },\n  {\n    jp:\"\u30da\u30f3\u30bf\u30af\u30eb\",\n    en:\"PENTACLES\",\n    symbol:\"\u25c6\"\n  }\n];\nconst ranks = [\n  [\"\u30a8\u30fc\u30b9\",\"ACE\"],\n  [\"2\",\"TWO\"],\n  [\"3\",\"THREE\"],\n  [\"4\",\"FOUR\"],\n  [\"5\",\"FIVE\"],\n  [\"6\",\"SIX\"],\n  [\"7\",\"SEVEN\"],\n  [\"8\",\"EIGHT\"],\n  [\"9\",\"NINE\"],\n  [\"10\",\"TEN\"],\n  [\"\u30da\u30a4\u30b8\",\"PAGE\"],\n  [\"\u30ca\u30a4\u30c8\",\"KNIGHT\"],\n  [\"\u30af\u30a4\u30fc\u30f3\",\"QUEEN\"],\n  [\"\u30ad\u30f3\u30b0\",\"KING\"]\n];\nconst minor = suits.flatMap(\n  suit =>\n    ranks.map(\n      ([jp,en]) => ({\n        name:`${suit.jp}\u306e${jp}`,\n        en:`${en} OF ${suit.en}`,\n        symbol:suit.symbol,\n        type:\"\u5c0f\u30a2\u30eb\u30ab\u30ca\"\n      })\n    )\n);\nconst deck = [\n  ...major,\n  ...minor\n];\nconst spread =\n  document.getElementById(\"spread\");\nconst drawBtn =\n  document.getElementById(\"drawBtn\");\nconst statusEl =\n  document.getElementById(\"status\");\nconst actions =\n  document.getElementById(\"actions\");\nconst resetBtn =\n  document.getElementById(\"resetBtn\");\nconst shootBtn =\n  document.getElementById(\"shootBtn\");\nconst app =\n  document.getElementById(\"app\");\nconst configs = {\n  3:[\n    {\n      cls:\"\",\n      label:\"\u4eca\u306e\u6c17\u6301\u3061\"\n    },\n    {\n      cls:\"\",\n      label:\"\u6ce8\u610f\u70b9\"\n    },\n    {\n      cls:\"\",\n      label:\"\u5c0f\u3055\u306a\u4e00\u6b69\"\n    }\n  ],\n  5:[\n    {\n      cls:\"top\",\n      label:\"\u8868\u306e\u8ab2\u984c\"\n    },\n    {\n      cls:\"left\",\n      label:\"\u3053\u308c\u307e\u3067\"\n    },\n    {\n      cls:\"center\",\n      label:\"\u4e2d\u5fc3\u30c6\u30fc\u30de\"\n    },\n    {\n      cls:\"bottom\",\n      label:\"\u5fc3\u306e\u5965\"\n    },\n    {\n      cls:\"right\",\n      label:\"\u3053\u308c\u304b\u3089\"\n    }\n  ]\n};\nlet currentCount = 5;\nlet drawn = [];\nlet opening = false;\nfunction selectedCount(){\n  return Number(\n    document.querySelector(\n      'input[name=\"count\"]:checked'\n    ).value\n  );\n}\nfunction createEmptySpread(count){\n  currentCount = count;\n  spread.className =\n    `spread ${count === 3 ? \"three\" : \"five\"}`;\n  spread.innerHTML = \"\";\n  configs[count].forEach(\n    (position,index) => {\n      const slot =\n        document.createElement(\"div\");\n      slot.className =\n        `slot ${position.cls}`;\n      slot.dataset.index = index;\n      slot.innerHTML = `\n        <div class=\"pos-label\">\n          ${position.label}\n        <\/div>\n        <div\n          class=\"card\"\n          aria-label=\"${position.label}\uff1a\u672a\u62bd\u9078\"\n        >\n          <div class=\"card-inner\">\n            <div class=\"card-face card-back\">\n              <div class=\"back-mark\">\n                \u263e\n              <\/div>\n            <\/div>\n            <div class=\"card-face card-front\">\n              <div class=\"arcana\">\n                CHAPPY TAROT\n              <\/div>\n              <div class=\"symbol\">\n                \u2726\n              <\/div>\n              <div class=\"card-name\">\n                \u30ab\u30fc\u30c9\n              <\/div>\n              <div class=\"orientation\">\n                \u672a\u62bd\u9078\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      `;\n      spread.appendChild(slot);\n    }\n  );\n}\nfunction sampleDeck(count){\n  const pool =\n    deck.map(\n      (card,index) => ({\n        ...card,\n        index\n      })\n    );\n  for(\n    let i = pool.length - 1;\n    i > 0;\n    i--\n  ){\n    const j =\n      Math.floor(\n        Math.random() * (i + 1)\n      );\n    [\n      pool[i],\n      pool[j]\n    ] = [\n      pool[j],\n      pool[i]\n    ];\n  }\n  return pool\n    .slice(0,count)\n    .map(\n      card => ({\n        ...card,\n        reversed:\n          Math.random() < 0.5\n      })\n    );\n}\nfunction fillCard(slot,card){\n  const front =\n    slot.querySelector(\".card-front\");\n  front\n    .querySelector(\".arcana\")\n    .textContent = card.type;\n  front\n    .querySelector(\".symbol\")\n    .textContent = card.symbol;\n  front\n    .querySelector(\".card-name\")\n    .textContent = card.name;\n  const orientation =\n    front.querySelector(\".orientation\");\n  orientation.textContent =\n    card.reversed\n      ? \"\u9006\u4f4d\u7f6e\"\n      : \"\u6b63\u4f4d\u7f6e\";\n  orientation.className =\n    `orientation ${\n      card.reversed\n        ? \"reversed\"\n        : \"\"\n    }`;\n  const label =\n    slot\n      .querySelector(\".pos-label\")\n      .textContent;\n  slot\n    .querySelector(\".card\")\n    .setAttribute(\n      \"aria-label\",\n      `${label}\uff1a${card.name}\u30fb${\n        card.reversed\n          ? \"\u9006\u4f4d\u7f6e\"\n          : \"\u6b63\u4f4d\u7f6e\"\n      }`\n    );\n}\nfunction orderFor(count){\n  \/*\n  5\u679a\u306e\u5834\u5408\u306f\u3001\n  \u4e2d\u5fc3\u30c6\u30fc\u30de\n  \u2192\u3053\u308c\u307e\u3067\n  \u2192\u8868\u306e\u8ab2\u984c\n  \u2192\u5fc3\u306e\u5965\n  \u2192\u3053\u308c\u304b\u3089\n  \u306e\u9806\u756a\u306b\u958b\u304d\u307e\u3059\u3002\n  *\/\n  return count === 5\n    ? [2,1,0,3,4]\n    : [0,1,2];\n}\nasync function drawCards(){\n  if(opening){\n    return;\n  }\n  opening = true;\n  app.classList.remove(\"shooting\");\n  currentCount =\n    selectedCount();\n  createEmptySpread(\n    currentCount\n  );\n  drawn =\n    sampleDeck(\n      currentCount\n    );\n  document\n    .querySelectorAll(\n      'input[name=\"count\"]'\n    )\n    .forEach(\n      element =>\n        element.disabled = true\n    );\n  drawBtn.disabled = true;\n  actions.classList.remove(\"show\");\n  statusEl.textContent =\n    \"\u30ab\u30fc\u30c9\u3092\u9078\u3093\u3067\u3044\u307e\u3059\u2026\";\n  const slots = [\n    ...spread.querySelectorAll(\".slot\")\n  ];\n  drawn.forEach(\n    (card,index) =>\n      fillCard(\n        slots[index],\n        card\n      )\n  );\n  await wait(350);\n  const order =\n    orderFor(currentCount);\n  for(\n    let number = 0;\n    number < order.length;\n    number++\n  ){\n    const index =\n      order[number];\n    statusEl.textContent =\n      `${number + 1}\u679a\u76ee\u3092\u958b\u3044\u3066\u3044\u307e\u3059\u2026`;\n    slots[index]\n      .querySelector(\".card\")\n      .classList.add(\"open\");\n    await wait(470);\n  }\n  statusEl.textContent =\n    \"\u3059\u3079\u3066\u958b\u304d\u307e\u3057\u305f\u3002\u30b9\u30af\u30ea\u30fc\u30f3\u30b7\u30e7\u30c3\u30c8\u3092\u64ae\u3063\u3066\u9001\u3063\u3066\u304f\u3060\u3055\u3044\u3002\";\n  actions.classList.add(\"show\");\n  drawBtn.disabled = false;\n  drawBtn.textContent =\n    \"\u3082\u3046\u4e00\u5ea6\u30ab\u30fc\u30c9\u3092\u5f15\u304f\";\n  document\n    .querySelectorAll(\n      'input[name=\"count\"]'\n    )\n    .forEach(\n      element =>\n        element.disabled = false\n    );\n  opening = false;\n}\nfunction wait(milliseconds){\n  return new Promise(\n    resolve =>\n      setTimeout(\n        resolve,\n        milliseconds\n      )\n  );\n}\nfunction resetAll(){\n  if(opening){\n    return;\n  }\n  app.classList.remove(\"shooting\");\n  currentCount =\n    selectedCount();\n  drawn = [];\n  createEmptySpread(\n    currentCount\n  );\n  actions.classList.remove(\"show\");\n  drawBtn.textContent =\n    \"\u30ab\u30fc\u30c9\u3092\u5f15\u304f\";\n  statusEl.textContent =\n    \"\u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30ab\u30fc\u30c9\u304c1\u679a\u305a\u3064\u81ea\u52d5\u3067\u958b\u304d\u307e\u3059\u3002\";\n  window.scrollTo({\n    top:0,\n    behavior:\"smooth\"\n  });\n}\nfunction toggleShooting(){\n  app.classList.toggle(\n    \"shooting\"\n  );\n  shootBtn.textContent =\n    app.classList.contains(\"shooting\")\n      ? \"\u901a\u5e38\u8868\u793a\u3078\u623b\u3059\"\n      : \"\u64ae\u5f71\u30e2\u30fc\u30c9\";\n  setTimeout(\n    () =>\n      spread.scrollIntoView({\n        behavior:\"smooth\",\n        block:\"start\"\n      }),\n    50\n  );\n}\ndocument\n  .querySelectorAll(\n    'input[name=\"count\"]'\n  )\n  .forEach(\n    element => {\n      element.addEventListener(\n        \"change\",\n        () => {\n          if(!opening){\n            resetAll();\n          }\n        }\n      );\n    }\n  );\ndrawBtn.addEventListener(\n  \"click\",\n  drawCards\n);\nresetBtn.addEventListener(\n  \"click\",\n  resetAll\n);\nshootBtn.addEventListener(\n  \"click\",\n  toggleShooting\n);\ncreateEmptySpread(5);\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u30c1\u30e3\u30c3\u30d4\u30fc\u5360\u3044\u2122\ufe0f \u30ab\u30fc\u30c9\u62bd\u9078 \u30c1\u30e3\u30c3\u30d4\u30fc\u5360\u3044\u2122\ufe0f \u30ab\u30fc\u30c9\u62bd\u9078\u30da\u30fc\u30b8 \u30ab\u30fc\u30c9\u306e\u679a\u6570\u3092\u9078\u3093\u3067\u304f\u3060\u3055\u3044 3\u679a\u30fb\u4f53\u9a13\u7248 5\u679a\u30fb\u901a\u5e38\uff0f\u30c6\u30fc\u30de \u30ab\u30fc\u30c9\u3092\u5f15\u304f \u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068\u3001\u30ab\u30fc\u30c9\u304c1\u679a\u305a\u3064\u81ea\u52d5\u3067\u958b\u304d\u307e\u3059\u3002 \u2726 \u2727 \u2726 \u64ae\u5f71\u30e2\u30fc\u30c9 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-984","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/noseflute.club\/index.php?rest_route=\/wp\/v2\/pages\/984","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/noseflute.club\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/noseflute.club\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/noseflute.club\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/noseflute.club\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=984"}],"version-history":[{"count":5,"href":"https:\/\/noseflute.club\/index.php?rest_route=\/wp\/v2\/pages\/984\/revisions"}],"predecessor-version":[{"id":998,"href":"https:\/\/noseflute.club\/index.php?rest_route=\/wp\/v2\/pages\/984\/revisions\/998"}],"wp:attachment":[{"href":"https:\/\/noseflute.club\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=984"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}