{"id":797,"date":"2026-08-17T14:50:45","date_gmt":"2026-08-17T05:50:45","guid":{"rendered":"https:\/\/cleanpartners.online\/?page_id=797"},"modified":"2026-09-07T23:04:37","modified_gmt":"2026-09-07T14:04:37","slug":"%e3%82%ab%e3%83%ac%e3%83%b3%e3%83%80%e3%83%bc%e6%96%b0","status":"publish","type":"page","link":"https:\/\/cleanpartners.online\/?page_id=797","title":{"rendered":"\u4e88\u7d04\u72b6\u6cc1\u306e\u78ba\u8a8d"},"content":{"rendered":"\n<div id=\"cp-availability-root\"><\/div>\n<style>\n  #cp-availability-root {\n    font-family: \"Zen Maru Gothic\",\"Hiragino Maru Gothic ProN\",\"Noto Sans JP\",sans-serif;\n    background: #EAF5FB;\n    padding: 24px 16px;\n    border-radius: 16px;\n    max-width: 420px;\n    margin: 0 auto;\n    box-sizing: border-box;\n  }\n  #cp-availability-root * { box-sizing: border-box; }\n  .cp-header { text-align: center; margin-bottom: 20px; }\n  .cp-brand { font-size: 11px; letter-spacing: 0.15em; color: #6FA5C6; margin: 0 0 4px; }\n  .cp-title { font-size: 20px; font-weight: 700; color: #2C5F7C; margin: 0 0 6px; }\n  .cp-sub { font-size: 12px; color: #5B87A0; line-height: 1.6; margin: 0; }\n  .cp-card { background: #fff; border-radius: 24px; box-shadow: 0 1px 4px rgba(44,95,124,0.08); padding: 16px; margin-bottom: 16px; }\n  .cp-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n  .cp-nav-btn { width: 32px; height: 32px; border-radius: 999px; border: none; background: transparent; color: #4A90C2; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }\n  .cp-nav-btn:hover { background: #EAF5FB; }\n  .cp-nav-btn:disabled { opacity: 0.3; cursor: default; }\n  .cp-month-label { font-weight: 700; color: #2C5F7C; font-size: 14px; }\n  .cp-week-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }\n  .cp-week-label { text-align: center; font-size: 10px; font-weight: 700; color: #9CB8C9; padding: 4px 0; }\n  .cp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }\n  .cp-day-cell { aspect-ratio: 1; border-radius: 12px; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; background: none; padding: 0; }\n  .cp-day-cell:disabled { opacity: 0.3; cursor: default; }\n  .cp-day-num { font-size: 11px; font-weight: 700; color: #2C5F7C; }\n  .cp-day-mark { font-size: 13px; font-weight: 700; line-height: 1; }\n  .cp-legend { display: flex; justify-content: center; gap: 16px; margin-bottom: 20px; }\n  .cp-legend-item { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #5B87A0; }\n  .cp-legend-mark { font-weight: 700; font-size: 13px; }\n  .cp-detail-title { font-weight: 700; color: #2C5F7C; margin: 0 0 12px; font-size: 14px; }\n  .cp-period-row { display: flex; align-items: center; justify-content: space-between; border-radius: 16px; padding: 12px 16px; margin-bottom: 8px; border: 1px solid; }\n  .cp-period-label { font-size: 14px; font-weight: 500; color: #2C5F7C; }\n  .cp-period-status { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; }\n  .cp-note { font-size: 10px; color: #9CB8C9; line-height: 1.6; margin: 12px 0 0; }\n  .cp-empty { text-align: center; font-size: 12px; color: #9CB8C9; padding: 8px 0; }\n<\/style>\n<script>\n  var CP_SCRIPT_URL = \"https:\/\/script.google.com\/macros\/s\/AKfycbzcmEkH_-IulyMef6Ywvqd4w37kHj77-_-n46ksvFPtJ62gh3HJVy7Hl2sf6wOKLV-1\/exec\";\n  var CP_DATA = {}; \/\/ \u30da\u30fc\u30b8\u8aad\u307f\u8fbc\u307f\u6642\u306b\u30b9\u30d7\u30ec\u30c3\u30c9\u30b7\u30fc\u30c8\u304b\u3089\u81ea\u52d5\u53d6\u5f97\u3057\u307e\u3059\n\n(function () {\n  var PERIODS = [{ id: \"am\", label: \"\u5348\u524d\" }, { id: \"noon\", label: \"\u663c\" }, { id: \"pm\", label: \"\u5348\u5f8c\" }];\n  var STATUS = {\n    available: { mark: \"\u25cb\", label: \"\u7a7a\u304d\u3042\u308a\", color: \"#4E9A6C\", bg: \"#E4F6EC\", ring: \"#BFE7D1\" },\n    few:       { mark: \"\u25b3\", label: \"\u6b8b\u308a\u308f\u305a\u304b\", color: \"#B4780C\", bg: \"#FCEEDA\", ring: \"#F3D9AC\" },\n    full:      { mark: \"\u2715\", label: \"\u6e80\u67a0\", color: \"#C24949\", bg: \"#FBE8E8\", ring: \"#F1C4C4\" }\n  };\n  var WEEK_LABELS = [\"\u65e5\",\"\u6708\",\"\u706b\",\"\u6c34\",\"\u6728\",\"\u91d1\",\"\u571f\"];\n\n  function pad2(n) { return (n < 10 ? \"0\" : \"\") + n; }\n  function dateKey(y, m, d) { return y + \"-\" + pad2(m + 1) + \"-\" + pad2(d); }\n\n  function daySummary(statuses) {\n    if (statuses.every(function (s) { return s === \"available\"; })) return \"available\";\n    if (statuses.every(function (s) { return s === \"full\"; })) return \"full\";\n    return \"few\";\n  }\n  function buildMonthCells(year, month) {\n    var first = new Date(year, month, 1);\n    var startDow = first.getDay();\n    var daysInMonth = new Date(year, month + 1, 0).getDate();\n    var cells = [];\n    for (var i = 0; i < startDow; i++) cells.push(null);\n    for (var d = 1; d <= daysInMonth; d++) cells.push(d);\n    return cells;\n  }\n\n  var today = new Date();\n  var state = {\n    viewYear: today.getFullYear(),\n    viewMonth: today.getMonth(),\n    selectedDay: today.getDate()\n  };\n  var maxSelectable = new Date(today);\n  maxSelectable.setDate(maxSelectable.getDate() + 31);\n\n  function isPast(y, m, d) {\n    var cellDate = new Date(y, m, d);\n    var cmp = new Date(today.getFullYear(), today.getMonth(), today.getDate());\n    return cellDate < cmp;\n  }\n  function isBeyondRange(y, m, d) {\n    return new Date(y, m, d) > maxSelectable;\n  }\n\n  function getDayStatuses(y, m, d) {\n    var entry = CP_DATA[dateKey(y, m, d)];\n    if (!entry) return [\"available\", \"available\", \"available\"];\n    return [entry.am || \"available\", entry.noon || \"available\", entry.pm || \"available\"];\n  }\n\n  function render() {\n    var root = document.getElementById(\"cp-availability-root\");\n    var cells = buildMonthCells(state.viewYear, state.viewMonth);\n\n    var html = '';\n    html += '<div class=\"cp-header\">';\n    html += '<p class=\"cp-brand\">CLEAN PARTNERS<\/p>';\n    html += '<h2 class=\"cp-title\">\u3054\u4e88\u7d04\u72b6\u6cc1\u306e\u76ee\u5b89<\/h2>';\n    html += '<p class=\"cp-sub\">\u5348\u524d\u30fb\u5348\u5f8c\u3054\u3068\u306e\u7a7a\u304d\u5177\u5408\u3092\u3054\u6848\u5185\u3057\u3066\u3044\u307e\u3059\u3002<br>\u6b63\u5f0f\u306a\u3054\u4e88\u7d04\u306f\u516c\u5f0fLINE\u307e\u305f\u306f\u30d5\u30a9\u30fc\u30e0\u304b\u3089\u304a\u9858\u3044\u3044\u305f\u3057\u307e\u3059\u3002<\/p>';\n    html += '<\/div>';\n\n    html += '<div class=\"cp-card\">';\n    html += '<div class=\"cp-cal-nav\">';\n    html += '<button class=\"cp-nav-btn\" id=\"cp-prev-month\" aria-label=\"\u524d\u306e\u6708\">&#8592;<\/button>';\n    html += '<span class=\"cp-month-label\">' + state.viewYear + '\u5e74 ' + (state.viewMonth + 1) + '\u6708<\/span>';\n    html += '<button class=\"cp-nav-btn\" id=\"cp-next-month\" aria-label=\"\u6b21\u306e\u6708\">&#8594;<\/button>';\n    html += '<\/div>';\n\n    html += '<div class=\"cp-week-row\">';\n    WEEK_LABELS.forEach(function (w) { html += '<div class=\"cp-week-label\">' + w + '<\/div>'; });\n    html += '<\/div>';\n\n    html += '<div class=\"cp-grid\">';\n    cells.forEach(function (d) {\n      if (!d) { html += '<div><\/div>'; return; }\n      var past = isPast(state.viewYear, state.viewMonth, d);\n      var beyond = isBeyondRange(state.viewYear, state.viewMonth, d);\n      var disabled = past || beyond;\n      var statuses = getDayStatuses(state.viewYear, state.viewMonth, d);\n      var summary = daySummary(statuses);\n      var s = STATUS[summary];\n      var isSelected = state.selectedDay === d;\n      var bg = disabled ? 'transparent' : (isSelected ? '#DCEEF9' : s.bg);\n      var border = isSelected ? '2px solid #4A90C2' : '2px solid transparent';\n      var opacity = disabled ? '0.3' : '1';\n      html += '<button class=\"cp-day-cell\" data-day=\"' + d + '\" ' + (disabled ? 'disabled' : '') +\n        ' style=\"background:' + bg + ';border:' + border + ';opacity:' + opacity + ';\">';\n      html += '<span class=\"cp-day-num\" style=\"color:' + (disabled ? '#9CB8C9' : '#2C5F7C') + ';\">' + d + '<\/span>';\n      if (!disabled) html += '<span class=\"cp-day-mark\" style=\"color:' + s.color + ';\">' + s.mark + '<\/span>';\n      html += '<\/button>';\n    });\n    html += '<\/div>'; \/\/ grid\n    html += '<\/div>'; \/\/ card\n\n    html += '<div class=\"cp-legend\">';\n    Object.keys(STATUS).forEach(function (key) {\n      var s = STATUS[key];\n      html += '<div class=\"cp-legend-item\"><span class=\"cp-legend-mark\" style=\"color:' + s.color + ';\">' + s.mark + '<\/span>' + s.label + '<\/div>';\n    });\n    html += '<\/div>';\n\n    if (state.selectedDay && !isPast(state.viewYear, state.viewMonth, state.selectedDay) && !isBeyondRange(state.viewYear, state.viewMonth, state.selectedDay)) {\n      var selStatuses = getDayStatuses(state.viewYear, state.viewMonth, state.selectedDay);\n      html += '<div class=\"cp-card\">';\n      html += '<p class=\"cp-detail-title\">' + (state.viewMonth + 1) + '\u6708' + state.selectedDay + '\u65e5\u306e\u7a7a\u304d\u72b6\u6cc1<\/p>';\n      PERIODS.forEach(function (period, i) {\n        var s = STATUS[selStatuses[i]];\n        html += '<div class=\"cp-period-row\" style=\"background:' + s.bg + ';border-color:' + s.ring + ';\">';\n        html += '<span class=\"cp-period-label\">' + period.label + '<\/span>';\n        html += '<span class=\"cp-period-status\" style=\"color:' + s.color + ';\"><span>' + s.mark + '<\/span>' + s.label + '<\/span>';\n        html += '<\/div>';\n      });\n      html += '<p class=\"cp-note\">\u203b\u8868\u793a\u306f\u76ee\u5b89\u3067\u3059\u3002\u5b9f\u969b\u306e\u3054\u4e88\u7d04\u53ef\u5426\u306f\u3001\u516c\u5f0fLINE\u307e\u305f\u306f\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u5f8c\u306b\u3042\u3089\u305f\u3081\u3066\u3054\u9023\u7d61\u3044\u305f\u3057\u307e\u3059\u3002<\/p>';\n      html += '<\/div>';\n    }\n\n    root.innerHTML = html;\n\n    document.getElementById('cp-prev-month').addEventListener('click', function () {\n      state.viewMonth -= 1;\n      if (state.viewMonth < 0) { state.viewMonth = 11; state.viewYear -= 1; }\n      state.selectedDay = null;\n      render();\n    });\n    document.getElementById('cp-next-month').addEventListener('click', function () {\n      state.viewMonth += 1;\n      if (state.viewMonth > 11) { state.viewMonth = 0; state.viewYear += 1; }\n      state.selectedDay = null;\n      render();\n    });\n    var dayCells = root.querySelectorAll('.cp-day-cell:not([disabled])');\n    dayCells.forEach(function (btn) {\n      btn.addEventListener('click', function () {\n        state.selectedDay = parseInt(btn.getAttribute('data-day'), 10);\n        render();\n      });\n    });\n  }\n\n  var root0 = document.getElementById(\"cp-availability-root\");\n  if (root0) root0.innerHTML = '<div class=\"cp-card\"><p class=\"cp-note\" style=\"text-align:center;\">\u8aad\u307f\u8fbc\u307f\u4e2d...<\/p><\/div>';\n\n  fetch(CP_SCRIPT_URL)\n    .then(function (res) { return res.json(); })\n    .then(function (data) {\n      CP_DATA = data || {};\n      render();\n    })\n    .catch(function () {\n      if (root0) root0.innerHTML = '<div class=\"cp-card\"><p class=\"cp-note\" style=\"text-align:center;\">\u7a7a\u304d\u72b6\u6cc1\u306e\u8aad\u307f\u8fbc\u307f\u306b\u5931\u6557\u3057\u307e\u3057\u305f\u3002\u6642\u9593\u3092\u304a\u3044\u3066\u518d\u5ea6\u304a\u8a66\u3057\u304f\u3060\u3055\u3044\u3002<\/p><\/div>';\n    });\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_sitemap":"","_veu_custom_css":"","veu_display_promotion_alert":"","_exclude_from_list_pages":"","vkexunit_cta_each_option":"","vkExUnit_childPageIndex":"","vkExUnit_pageList_ancestor":"","vkExUnit_contact_enable":"","footnotes":""},"class_list":["post-797","page","type-page","status-publish","hentry"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/cleanpartners.online\/index.php?rest_route=\/wp\/v2\/pages\/797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cleanpartners.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cleanpartners.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cleanpartners.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cleanpartners.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=797"}],"version-history":[{"count":7,"href":"https:\/\/cleanpartners.online\/index.php?rest_route=\/wp\/v2\/pages\/797\/revisions"}],"predecessor-version":[{"id":855,"href":"https:\/\/cleanpartners.online\/index.php?rest_route=\/wp\/v2\/pages\/797\/revisions\/855"}],"wp:attachment":[{"href":"https:\/\/cleanpartners.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}