{"id":4509,"date":"2026-09-12T16:24:59","date_gmt":"2026-09-12T07:24:59","guid":{"rendered":"https:\/\/nansiki.net\/2018\/?page_id=4509"},"modified":"2026-09-14T07:06:58","modified_gmt":"2026-09-13T22:06:58","slug":"nescom%e4%b8%ad%e9%87%8e%e6%95%99%e5%ae%a4%e6%95%99%e5%ae%a4%e9%95%b7%e5%8e%b3%e9%81%b8%ef%bd%9e%e3%82%b9%e3%83%88%e3%83%bc%e3%83%aa%e3%83%bc%e3%81%9a%ef%bd%9e","status":"publish","type":"page","link":"https:\/\/nansiki.net\/2018\/nescom%e4%b8%ad%e9%87%8e%e6%95%99%e5%ae%a4%e6%95%99%e5%ae%a4%e9%95%b7%e5%8e%b3%e9%81%b8%ef%bd%9e%e3%82%b9%e3%83%88%e3%83%bc%e3%83%aa%e3%83%bc%e3%81%9a%ef%bd%9e","title":{"rendered":"NESCOM\u4e2d\u91ce\u6559\u5ba4\u6559\u5ba4\u9577\u53b3\u9078\uff5e\u30b9\u30c8\u30fc\u30ea\u30fc\u305a\uff5e"},"content":{"rendered":"\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"819\" height=\"1024\" src=\"https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/04-2026-819x1024.png\" alt=\"\" class=\"wp-image-4510\" srcset=\"https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/04-2026-819x1024.png 819w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/04-2026-240x300.png 240w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/04-2026-767x959.png 767w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/04-2026.png 1122w\" sizes=\"auto, (max-width: 819px) 100vw, 819px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cHero\n   \u203b Stories\u30da\u30fc\u30b8\u5c02\u7528\n========================================================= *\/\n\n.nescom-stories-hero {\n  width: 100%;\n  margin: 0;\n  padding: 90px 24px 80px;\n  background:\n    linear-gradient(\n      180deg,\n      #f5f9fd 0%,\n      #ffffff 100%\n    );\n  box-sizing: border-box;\n}\n\n.nescom-stories-hero-inner {\n  width: min(100%, 980px);\n  margin: 0 auto;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.nescom-stories-eyebrow {\n  margin: 0 0 18px;\n  color: #1e5aa8;\n  font-size: 0.82rem;\n  font-weight: 700;\n  letter-spacing: 0.18em;\n  line-height: 1.5;\n}\n\n.nescom-stories-title {\n  margin: 0;\n  color: #16457f;\n  font-size: clamp(3.2rem, 8vw, 6rem);\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  line-height: 1;\n}\n\n.nescom-stories-lead {\n  margin: 30px 0 0;\n  color: #16457f;\n  font-size: clamp(1.45rem, 3vw, 2.2rem);\n  font-weight: 700;\n  line-height: 1.6;\n  letter-spacing: 0.08em;\n}\n\n.nescom-stories-intro {\n  width: min(100%, 700px);\n  margin: 42px auto 0;\n  color: #3d4b5a;\n  font-size: 1rem;\n  line-height: 2;\n  letter-spacing: 0.04em;\n}\n\n.nescom-stories-intro p {\n  margin: 0;\n}\n\n.nescom-stories-intro p + p {\n  margin-top: 20px;\n}\n\n\n\/* =========================================================\n   Tablet\n========================================================= *\/\n\n@media (max-width: 768px) {\n\n  .nescom-stories-hero {\n    padding: 70px 20px 65px;\n  }\n\n  .nescom-stories-eyebrow {\n    font-size: 0.75rem;\n  }\n\n  .nescom-stories-lead {\n    margin-top: 24px;\n    font-size: 1.4rem;\n  }\n\n  .nescom-stories-intro {\n    margin-top: 34px;\n    font-size: 0.95rem;\n    line-height: 1.9;\n  }\n\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 480px) {\n\n  .nescom-stories-hero {\n    padding: 58px 18px 55px;\n  }\n\n  .nescom-stories-title {\n    font-size: 3.2rem;\n  }\n\n  .nescom-stories-lead {\n    font-size: 1.25rem;\n    letter-spacing: 0.06em;\n  }\n\n  .nescom-stories-intro {\n    font-size: 0.9rem;\n    line-height: 1.85;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cHero\n========================================================= -->\n\n<section class=\"nescom-stories-hero\">\n\n  <div class=\"nescom-stories-hero-inner\">\n\n    <p class=\"nescom-stories-eyebrow\">\n      NESCOM NAKANO STORIES\n    <\/p>\n\n    <h1 class=\"nescom-stories-title\">\n      STORIES\n    <\/h1>\n\n    <p class=\"nescom-stories-lead\">\n      \u4eba\u751f\u306e\u4e2d\u306b\u3042\u308b\u3001<br>\n      \u300c\u5b66\u3073\u300d\u306e\u7269\u8a9e\u3002\n    <\/p>\n\n    <div class=\"nescom-stories-intro\">\n\n      <p>\n        \u30cd\u30b9\u30b3\u30e0\u4e2d\u91ce\u6559\u5ba4\u304c\u9078\u3093\u3060\u3001<br>\n        14\u4eba\u306e\u5049\u4eba\u3068\u3001\u3072\u3068\u3064\u306e\u7269\u8a9e\u3002\n      <\/p>\n\n      <p>\n        \u52c7\u6c17\u3084\u611f\u52d5\u3060\u3051\u3067\u306f\u306a\u304f\u3001<br>\n        \u8003\u3048\u308b\u3053\u3068\u3001\u884c\u52d5\u3059\u308b\u3053\u3068\u3001\u6e96\u5099\u3059\u308b\u3053\u3068\u3002<br>\n        \u305d\u308c\u305e\u308c\u306e\u7269\u8a9e\u306b\u3042\u308b\u300c\u5b66\u3073\u306e\u30d2\u30f3\u30c8\u300d\u3092\u7d39\u4ecb\u3057\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cArchive Intro\n   \u203b Stories\u30da\u30fc\u30b8\u5c02\u7528\n========================================================= *\/\n\n.nescom-stories-archive-intro {\n  width: 100%;\n  margin: 0;\n  padding: 75px 24px 45px;\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.nescom-stories-archive-intro-inner {\n  width: min(100%, 900px);\n  margin: 0 auto;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.nescom-stories-section-label {\n  margin: 0 0 18px;\n  color: #1e5aa8;\n  font-size: 0.78rem;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n  line-height: 1.5;\n}\n\n.nescom-stories-section-title {\n  margin: 0;\n  color: #16457f;\n  font-size: clamp(1.7rem, 3.5vw, 2.4rem);\n  font-weight: 700;\n  line-height: 1.65;\n  letter-spacing: 0.06em;\n}\n\n.nescom-stories-section-text {\n  width: min(100%, 680px);\n  margin: 28px auto 0;\n  color: #4b5968;\n  font-size: 0.98rem;\n  line-height: 2;\n  letter-spacing: 0.04em;\n}\n\n\n\/* =========================================================\n   Tablet\n========================================================= *\/\n\n@media (max-width: 768px) {\n\n  .nescom-stories-archive-intro {\n    padding: 60px 20px 35px;\n  }\n\n  .nescom-stories-section-text {\n    font-size: 0.94rem;\n    line-height: 1.9;\n  }\n\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 480px) {\n\n  .nescom-stories-archive-intro {\n    padding: 50px 18px 30px;\n  }\n\n  .nescom-stories-section-label {\n    margin-bottom: 14px;\n    font-size: 0.72rem;\n  }\n\n  .nescom-stories-section-title {\n    font-size: 1.45rem;\n    line-height: 1.7;\n  }\n\n  .nescom-stories-section-text {\n    margin-top: 22px;\n    font-size: 0.88rem;\n    line-height: 1.9;\n  }\n\n  .nescom-stories-pc-break {\n    display: none;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cArchive Intro\n========================================================= -->\n\n<section class=\"nescom-stories-archive-intro\">\n\n  <div class=\"nescom-stories-archive-intro-inner\">\n\n    <p class=\"nescom-stories-section-label\">\n      STORIES\n    <\/p>\n\n    <h2 class=\"nescom-stories-section-title\">\n      \u305d\u308c\u305e\u308c\u306e\u4eba\u751f\u306b\u3001<br>\n      \u5b66\u3073\u306e\u30d2\u30f3\u30c8\u304c\u3042\u308b\u3002\n    <\/h2>\n\n    <p class=\"nescom-stories-section-text\">\n      \u5049\u4eba\u305f\u3061\u304c\u4f55\u3092\u8003\u3048\u3001\u3069\u3046\u884c\u52d5\u3057\u3001<br class=\"nescom-stories-pc-break\">\n      \u3069\u3093\u306a\u6e96\u5099\u3092\u3057\u3066\u672a\u6765\u3092\u5207\u308a\u62d3\u3044\u305f\u306e\u304b\u3002<br>\n      \u3072\u3068\u3064\u3072\u3068\u3064\u306e\u7269\u8a9e\u304b\u3089\u3001<br class=\"nescom-stories-pc-break\">\n      \u300c\u5b66\u3076\u300d\u3068\u3044\u3046\u3053\u3068\u3092\u8003\u3048\u3066\u307f\u307e\u305b\u3093\u304b\u3002\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cStories List\n   \u203b Stories\u30da\u30fc\u30b8\u5c02\u7528\n========================================================= *\/\n\n.nescom-stories-list {\n  width: 100%;\n  margin: 0;\n  padding: 30px 24px 100px;\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.nescom-stories-list-inner {\n  width: min(100%, 1180px);\n  margin: 0 auto;\n  box-sizing: border-box;\n}\n\n.nescom-stories-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 32px;\n  width: 100%;\n}\n\n\n\/* =========================================================\n   Tablet\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .nescom-stories-list {\n    padding: 25px 20px 80px;\n  }\n\n  .nescom-stories-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 26px;\n  }\n\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-list {\n    padding: 20px 16px 65px;\n  }\n\n  .nescom-stories-grid {\n    grid-template-columns: 1fr;\n    gap: 22px;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cStories List\n========================================================= -->\n\n<section class=\"nescom-stories-list\" id=\"stories-list\">\n\n  <div class=\"nescom-stories-list-inner\">\n\n    <!-- WordPress\u5074\u3067\u516c\u958b\u6e08\u307fStories\u3092\u81ea\u52d5\u8868\u793a -->\n\n    <div class=\"nescom-stories-grid\">\n\n      <!-- \u81ea\u52d5\u53d6\u5f97\u30a8\u30ea\u30a2 -->\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cDynamic Stories Cards\n   \u203b Stories\u30da\u30fc\u30b8\u5c02\u7528\n========================================================= *\/\n\n.nescom-stories-list {\n  width: 100%;\n  margin: 0;\n  padding: 30px 24px 100px;\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.nescom-stories-list-inner {\n  width: min(100%, 1180px);\n  margin: 0 auto;\n  box-sizing: border-box;\n}\n\n.nescom-stories-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 34px;\n  width: 100%;\n}\n\n\n\/* =========================================================\n   Card\n========================================================= *\/\n\n.stories-card {\n  min-width: 0;\n  margin: 0;\n}\n\n.stories-card-link {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  color: inherit;\n  text-decoration: none;\n  background: #ffffff;\n  border: 1px solid #e2eaf2;\n  border-radius: 14px;\n  box-shadow: 0 8px 24px rgba(22, 69, 127, 0.07);\n  transition:\n    transform 0.25s ease,\n    box-shadow 0.25s ease;\n}\n\n.stories-card-link:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 14px 32px rgba(22, 69, 127, 0.13);\n}\n\n.stories-card-image {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  overflow: hidden;\n  background: #f1f5f9;\n}\n\n.stories-card-image img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  transition: transform 0.35s ease;\n}\n\n.stories-card-link:hover .stories-card-image img {\n  transform: scale(1.03);\n}\n\n.stories-card-body {\n  padding: 24px 24px 25px;\n}\n\n.stories-card-title {\n  margin: 0;\n  color: #16457f;\n  font-size: 1.18rem;\n  font-weight: 700;\n  line-height: 1.65;\n  letter-spacing: 0.04em;\n}\n\n.stories-card-excerpt {\n  margin-top: 14px;\n  color: #596776;\n  font-size: 0.9rem;\n  line-height: 1.8;\n}\n\n.stories-card-excerpt p {\n  margin: 0;\n}\n\n.stories-card-more {\n  display: inline-block;\n  margin-top: 20px;\n  color: #1e5aa8;\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n  line-height: 1.5;\n}\n\n\n\/* =========================================================\n   Tablet\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .nescom-stories-list {\n    padding: 25px 20px 80px;\n  }\n\n  .nescom-stories-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n    gap: 26px;\n  }\n\n  .stories-card-body {\n    padding: 21px 20px 22px;\n  }\n\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-list {\n    padding: 20px 16px 65px;\n  }\n\n  .nescom-stories-grid {\n    grid-template-columns: 1fr;\n    gap: 22px;\n  }\n\n  .stories-card-body {\n    padding: 20px 18px 21px;\n  }\n\n  .stories-card-title {\n    font-size: 1.08rem;\n  }\n\n  .stories-card-excerpt {\n    font-size: 0.86rem;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cDynamic Stories Cards\n========================================================= -->\n\n<section class=\"nescom-stories-list\" id=\"stories-list\">\n\n  <div class=\"nescom-stories-list-inner\">\n\n    <div\n      class=\"nescom-stories-grid\"\n      id=\"nescom-stories-grid\"\n      data-category=\"stories\"\n    ><\/div>\n\n  <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const grid = document.getElementById(\"nescom-stories-grid\");\n\n  if (!grid) return;\n\n  const categorySlug = grid.dataset.category || \"stories\";\n\n  fetch(\n    \"\/wp-json\/wp\/v2\/categories?slug=\" +\n    encodeURIComponent(categorySlug)\n  )\n    .then(response => response.json())\n    .then(categories => {\n\n      if (!categories.length) {\n        grid.innerHTML = \"\";\n        return;\n      }\n\n      const categoryId = categories[0].id;\n\n      return fetch(\n        \"\/wp-json\/wp\/v2\/posts?categories=\" +\n        categoryId +\n        \"&per_page=100&_embed\"\n      );\n\n    })\n    .then(response => {\n\n      if (!response) return null;\n\n      return response.json();\n\n    })\n    .then(posts => {\n\n      if (!posts || !posts.length) {\n        grid.innerHTML = \"\";\n        return;\n      }\n\n      grid.innerHTML = posts.map(post => {\n\n        const title =\n          post.title &&\n          post.title.rendered\n            ? post.title.rendered\n            : \"\";\n\n        const link = post.link || \"#\";\n\n        const image =\n          post._embedded &&\n          post._embedded[\"wp:featuredmedia\"] &&\n          post._embedded[\"wp:featuredmedia\"][0]\n            ? post._embedded[\"wp:featuredmedia\"][0].source_url\n            : \"\";\n\n        const excerpt =\n          post.excerpt &&\n          post.excerpt.rendered\n            ? post.excerpt.rendered\n            : \"\";\n\n        return `\n          <article class=\"stories-card\">\n\n            <a\n              class=\"stories-card-link\"\n              href=\"${link}\"\n            >\n\n              ${\n                image\n                  ? `\n                    <div class=\"stories-card-image\">\n                      <img decoding=\"async\"\n                        src=\"${image}\"\n                        alt=\"${title}\"\n                        loading=\"lazy\"\n                      >\n                    <\/div>\n                  `\n                  : \"\"\n              }\n\n              <div class=\"stories-card-body\">\n\n                <h3 class=\"stories-card-title\">\n                  ${title}\n                <\/h3>\n\n                ${\n                  excerpt\n                    ? `\n                      <div class=\"stories-card-excerpt\">\n                        ${excerpt}\n                      <\/div>\n                    `\n                    : \"\"\n                }\n\n                <span class=\"stories-card-more\">\n                  READ STORY\n                <\/span>\n\n              <\/div>\n\n            <\/a>\n\n          <\/article>\n        `;\n\n      }).join(\"\");\n\n    })\n    .catch(() => {\n\n      grid.innerHTML = \"\";\n\n    });\n\n});\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cDynamic Stories Cards\uff5cFINAL\n   \u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u5c02\u7528\n========================================================= *\/\n\n\n\/*\n * =========================================================\n * Stories\u8868\u793a\u30a8\u30ea\u30a2\n * =========================================================\n *\/\n\n.nescom-stories-list-final {\n  width: 100%;\n  margin: 0;\n  padding: 30px 24px 100px;\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.nescom-stories-list-final\n.nescom-stories-list-inner {\n  width: min(100%, 1180px);\n  margin: 0 auto;\n  box-sizing: border-box;\n}\n\n.nescom-stories-list-final\n.nescom-stories-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 34px;\n  width: 100%;\n}\n\n\n\/*\n * =========================================================\n * Loading \/ Empty\n * =========================================================\n *\/\n\n.nescom-stories-list-final\n.nescom-stories-loading,\n\n.nescom-stories-list-final\n.nescom-stories-empty {\n  grid-column: 1 \/ -1;\n  margin: 0;\n  padding: 40px 20px;\n  text-align: center;\n  color: #596776;\n  font-size: 0.9rem;\n  line-height: 1.8;\n}\n\n\n\/*\n * =========================================================\n * Card\n * =========================================================\n *\/\n\n.nescom-stories-list-final\n.stories-card {\n  min-width: 0;\n}\n\n.nescom-stories-list-final\n.stories-card-link {\n  display: block;\n  height: 100%;\n  overflow: hidden;\n  color: inherit;\n  text-decoration: none;\n  background: #ffffff;\n  border: 1px solid #e2eaf2;\n  border-radius: 14px;\n  box-shadow:\n    0 8px 24px rgba(22, 69, 127, 0.07);\n\n  transition:\n    transform 0.25s ease,\n    box-shadow 0.25s ease;\n}\n\n.nescom-stories-list-final\n.stories-card-link:hover {\n  transform: translateY(-5px);\n\n  box-shadow:\n    0 14px 32px rgba(22, 69, 127, 0.13);\n}\n\n\n\/*\n * =========================================================\n * Image\n * =========================================================\n *\/\n\n.nescom-stories-list-final\n.stories-card-image {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  overflow: hidden;\n  background: #f1f5f9;\n}\n\n.nescom-stories-list-final\n.stories-card-image img {\n  display: block;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n\n  transition:\n    transform 0.35s ease;\n}\n\n.nescom-stories-list-final\n.stories-card-link:hover\n.stories-card-image img {\n  transform: scale(1.03);\n}\n\n\n\/*\n * =========================================================\n * Card Body\n * =========================================================\n *\/\n\n.nescom-stories-list-final\n.stories-card-body {\n  padding: 24px;\n}\n\n.nescom-stories-list-final\n.stories-card-title {\n  margin: 0;\n  color: #16457f;\n  font-size: 1.18rem;\n  font-weight: 700;\n  line-height: 1.65;\n  letter-spacing: 0.04em;\n}\n\n.nescom-stories-list-final\n.stories-card-more {\n  display: inline-block;\n  margin-top: 20px;\n  color: #1e5aa8;\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.16em;\n}\n\n\n\/*\n * =========================================================\n * Tablet\n * =========================================================\n *\/\n\n@media (max-width: 900px) {\n\n  .nescom-stories-list-final {\n    padding: 25px 20px 80px;\n  }\n\n  .nescom-stories-list-final\n  .nescom-stories-grid {\n    grid-template-columns:\n      repeat(2, minmax(0, 1fr));\n\n    gap: 26px;\n  }\n\n}\n\n\n\/*\n * =========================================================\n * Smartphone\n * =========================================================\n *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-list-final {\n    padding: 20px 16px 65px;\n  }\n\n  .nescom-stories-list-final\n  .nescom-stories-grid {\n    grid-template-columns: 1fr;\n    gap: 22px;\n  }\n\n  .nescom-stories-list-final\n  .stories-card-body {\n    padding: 20px 18px;\n  }\n\n  .nescom-stories-list-final\n  .stories-card-title {\n    font-size: 1.08rem;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cDynamic Stories Cards\uff5cFINAL\n     \u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u307f\n========================================================= -->\n\n<section\n  class=\"nescom-stories-list nescom-stories-list-final\"\n  id=\"nescom-stories-final\"\n>\n\n  <div class=\"nescom-stories-list-inner\">\n\n    <div\n      class=\"nescom-stories-grid\"\n      id=\"nescom-stories-grid-final\"\n    >\n      <p class=\"nescom-stories-loading\">\n        STORIES\u3092\u8aad\u307f\u8fbc\u3093\u3067\u3044\u307e\u3059\u2026\n      <\/p>\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function () {\n\n  const currentSection =\n    document.getElementById(\"nescom-stories-final\");\n\n  const grid =\n    document.getElementById(\"nescom-stories-grid-final\");\n\n  if (!currentSection || !grid) return;\n\n\n  \/*\n   * =========================================================\n   * \u4ee5\u524d\u8cbc\u308a\u4ed8\u3051\u305fStories\u8868\u793a\u30d6\u30ed\u30c3\u30af\u304c\u6b8b\u3063\u3066\u3044\u308b\u5834\u5408\u3001\n   * \u3053\u306e\u30da\u30fc\u30b8\u304b\u3089\u524a\u9664\u3057\u307e\u3059\u3002\n   *\n   * \u4eca\u56de\u306eFINAL\u30d6\u30ed\u30c3\u30af\u3060\u3051\u3092\u6b8b\u3057\u307e\u3059\u3002\n   * =========================================================\n   *\/\n\n  document\n    .querySelectorAll(\".nescom-stories-list\")\n    .forEach(function (section) {\n\n      if (section !== currentSection) {\n        section.remove();\n      }\n\n    });\n\n\n  \/*\n   * =========================================================\n   * \u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u53d6\u5f97\n   * =========================================================\n   *\/\n\n  const siteRoot =\n    window.location.origin + \"\/2018\";\n\n  const categoryUrl =\n    siteRoot +\n    \"\/wp-json\/wp\/v2\/categories?search=\" +\n    encodeURIComponent(\"\u30b9\u30c8\u30fc\u30ea\u30fcS\") +\n    \"&per_page=100\";\n\n\n  fetch(categoryUrl)\n\n    .then(function (response) {\n\n      if (!response.ok) {\n        throw new Error(\"\u30ab\u30c6\u30b4\u30ea\u30fc\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\");\n      }\n\n      return response.json();\n\n    })\n\n    .then(function (categories) {\n\n      \/*\n       * \u540d\u524d\u304c\u5b8c\u5168\u4e00\u81f4\u3059\u308b\u30ab\u30c6\u30b4\u30ea\u30fc\u3060\u3051\u3092\u4f7f\u7528\n       *\/\n\n      const storyCategory =\n        categories.find(function (category) {\n\n          return category.name === \"\u30b9\u30c8\u30fc\u30ea\u30fcS\";\n\n        });\n\n\n      if (!storyCategory) {\n        throw new Error(\n          \"\u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u30ab\u30c6\u30b4\u30ea\u30fc\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\"\n        );\n      }\n\n\n      \/*\n       * =======================================================\n       * \u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u306e\u30ab\u30c6\u30b4\u30ea\u30fcID\u3092\u6307\u5b9a\n       *\n       * \u4ed6\u30ab\u30c6\u30b4\u30ea\u30fc\u306e\u8a18\u4e8b\u306f\u53d6\u5f97\u3057\u307e\u305b\u3093\u3002\n       * =======================================================\n       *\/\n\n      const postsUrl =\n        siteRoot +\n        \"\/wp-json\/wp\/v2\/posts\" +\n        \"?categories=\" +\n        storyCategory.id +\n        \"&status=publish\" +\n        \"&per_page=100\" +\n        \"&orderby=date\" +\n        \"&order=desc\" +\n        \"&_embed\";\n\n\n      return fetch(postsUrl);\n\n    })\n\n\n    .then(function (response) {\n\n      if (!response.ok) {\n        throw new Error(\"\u8a18\u4e8b\u3092\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\");\n      }\n\n      return response.json();\n\n    })\n\n\n    .then(function (posts) {\n\n      grid.innerHTML = \"\";\n\n\n      \/*\n       * \u516c\u958b\u6e08\u307f\u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u304c\u306a\u3044\u5834\u5408\n       *\/\n\n      if (!posts || !posts.length) {\n\n        grid.innerHTML = `\n          <p class=\"nescom-stories-empty\">\n            \u73fe\u5728\u516c\u958b\u3055\u308c\u3066\u3044\u308bSTORIES\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n          <\/p>\n        `;\n\n        return;\n      }\n\n\n      \/*\n       * =======================================================\n       * \u300c\u30b9\u30c8\u30fc\u30ea\u30fcS\u300d\u306e\u8a18\u4e8b\u3060\u3051\u30ab\u30fc\u30c9\u5316\n       * =======================================================\n       *\/\n\n      posts.forEach(function (post) {\n\n        if (post.status !== \"publish\") {\n          return;\n        }\n\n\n        const title =\n          post.title &&\n          post.title.rendered\n            ? post.title.rendered\n            : \"\";\n\n\n        const link =\n          post.link\n            ? post.link\n            : \"#\";\n\n\n        const image =\n          post._embedded &&\n          post._embedded[\"wp:featuredmedia\"] &&\n          post._embedded[\"wp:featuredmedia\"][0]\n            ? post._embedded[\"wp:featuredmedia\"][0].source_url\n            : \"\";\n\n\n        const card =\n          document.createElement(\"article\");\n\n        card.className =\n          \"stories-card\";\n\n\n        card.innerHTML = `\n\n          <a\n            class=\"stories-card-link\"\n            href=\"${link}\"\n          >\n\n            ${\n              image\n                ? `\n                  <div class=\"stories-card-image\">\n\n                    <img decoding=\"async\"\n                      src=\"${image}\"\n                      alt=\"${title}\"\n                      loading=\"lazy\"\n                    >\n\n                  <\/div>\n                `\n                : \"\"\n            }\n\n            <div class=\"stories-card-body\">\n\n              <h3 class=\"stories-card-title\">\n                ${title}\n              <\/h3>\n\n              <span class=\"stories-card-more\">\n                READ STORY\n              <\/span>\n\n            <\/div>\n\n          <\/a>\n\n        `;\n\n\n        grid.appendChild(card);\n\n      });\n\n\n      \/*\n       * \u516c\u958b\u6e08\u307f\u8a18\u4e8b\u304c\u306a\u304b\u3063\u305f\u5834\u5408\n       *\/\n\n      if (!grid.children.length) {\n\n        grid.innerHTML = `\n          <p class=\"nescom-stories-empty\">\n            \u73fe\u5728\u516c\u958b\u3055\u308c\u3066\u3044\u308bSTORIES\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n          <\/p>\n        `;\n\n      }\n\n    })\n\n\n    .catch(function (error) {\n\n      console.error(\n        \"NESCOM STORIES:\",\n        error\n      );\n\n      grid.innerHTML = `\n        <p class=\"nescom-stories-empty\">\n          STORIES\u3092\u8aad\u307f\u8fbc\u3081\u307e\u305b\u3093\u3067\u3057\u305f\u3002\n        <\/p>\n      `;\n\n    });\n\n});\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cArchive Heading\n========================================================= *\/\n\n.nescom-stories-archive-heading {\n  width: 100%;\n  margin: 0;\n  padding: 55px 24px 30px;\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.nescom-stories-archive-heading-inner {\n  width: min(100%, 900px);\n  margin: 0 auto;\n  text-align: center;\n}\n\n.nescom-stories-archive-label {\n  margin: 0 0 14px;\n  color: #1e5aa8;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n  line-height: 1.5;\n}\n\n.nescom-stories-archive-title {\n  margin: 0;\n  color: #16457f;\n  font-size: clamp(1.7rem, 3.5vw, 2.35rem);\n  font-weight: 700;\n  line-height: 1.6;\n  letter-spacing: 0.08em;\n}\n\n.nescom-stories-archive-text {\n  margin: 18px 0 0;\n  color: #596776;\n  font-size: 0.94rem;\n  line-height: 1.9;\n  letter-spacing: 0.04em;\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-archive-heading {\n    padding: 42px 18px 22px;\n  }\n\n  .nescom-stories-archive-title {\n    font-size: 1.5rem;\n  }\n\n  .nescom-stories-archive-text {\n    font-size: 0.88rem;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cArchive Heading\n========================================================= -->\n\n<section class=\"nescom-stories-archive-heading\">\n\n  <div class=\"nescom-stories-archive-heading-inner\">\n\n    <p class=\"nescom-stories-archive-label\">\n      STORY ARCHIVE\n    <\/p>\n\n    <h2 class=\"nescom-stories-archive-title\">\n      \u7269\u8a9e\u304b\u3089\u3001\u5b66\u3076\u3002\n    <\/h2>\n\n    <p class=\"nescom-stories-archive-text\">\n      \u305d\u308c\u305e\u308c\u306e\u4eba\u751f\u306b\u306f\u3001<br>\n      \u5b66\u3073\u65b9\u3084\u751f\u304d\u65b9\u306b\u3064\u3044\u3066\u306e\u30d2\u30f3\u30c8\u304c\u3042\u308a\u307e\u3059\u3002\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cSpecial Story\n========================================================= *\/\n\n.nescom-stories-special {\n  width: 100%;\n  margin: 0;\n  padding: 90px 24px;\n  background: #f5f9fd;\n  box-sizing: border-box;\n}\n\n.nescom-stories-special-inner {\n  width: min(100%, 900px);\n  margin: 0 auto;\n  text-align: center;\n}\n\n.nescom-stories-special-copy {\n  width: min(100%, 700px);\n  margin: 0 auto;\n}\n\n.nescom-stories-special-label {\n  margin: 0 0 18px;\n  color: #1e5aa8;\n  font-size: 0.76rem;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n  line-height: 1.5;\n}\n\n.nescom-stories-special-title {\n  margin: 0;\n  color: #16457f;\n  font-size: clamp(1.8rem, 3.8vw, 2.5rem);\n  font-weight: 700;\n  line-height: 1.6;\n  letter-spacing: 0.07em;\n}\n\n.nescom-stories-special-text {\n  margin: 30px 0 0;\n  color: #465565;\n  font-size: 0.98rem;\n  line-height: 2;\n  letter-spacing: 0.04em;\n}\n\n.nescom-stories-special-note {\n  margin: 26px 0 0;\n  color: #596776;\n  font-size: 0.92rem;\n  line-height: 2;\n  letter-spacing: 0.04em;\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-special {\n    padding: 65px 18px;\n  }\n\n  .nescom-stories-special-title {\n    font-size: 1.5rem;\n  }\n\n  .nescom-stories-special-text {\n    margin-top: 24px;\n    font-size: 0.88rem;\n    line-height: 1.9;\n  }\n\n  .nescom-stories-special-note {\n    font-size: 0.84rem;\n    line-height: 1.9;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cSpecial Story\n========================================================= -->\n\n<section class=\"nescom-stories-special\">\n\n  <div class=\"nescom-stories-special-inner\">\n\n    <div class=\"nescom-stories-special-copy\">\n\n      <p class=\"nescom-stories-special-label\">\n        SPECIAL STORY\n      <\/p>\n\n      <h2 class=\"nescom-stories-special-title\">\n        \u3082\u3046\u3072\u3068\u3064\u306e\u7269\u8a9e\u3002\n      <\/h2>\n\n      <p class=\"nescom-stories-special-text\">\n        \u30cd\u30b9\u30b3\u30e0\u4e2d\u91ce\u6559\u5ba4\u304c\u9078\u3093\u3060\u3001<br>\n        14\u4eba\u306e\u5049\u4eba\u3068\u306f\u5c11\u3057\u9055\u3046\u7269\u8a9e\u3002<br>\n        <br>\n        \u305d\u308c\u306f\u3001\u305f\u304f\u3055\u3093\u306e\u4eba\u306b\u611b\u3055\u308c\u7d9a\u3051\u3066\u304d\u305f<br>\n        \u300c\u30aa\u30ba\u306e\u9b54\u6cd5\u4f7f\u3044\u300d\u3067\u3059\u3002\n      <\/p>\n\n      <p class=\"nescom-stories-special-note\">\n        \u3053\u306e\u7269\u8a9e\u306b\u3082\u3001<br>\n        \u52c7\u6c17\u3084\u6210\u9577\u3001\u4ef2\u9593\u3001\u305d\u3057\u3066<br>\n        \u300c\u81ea\u5206\u306e\u529b\u3092\u4fe1\u3058\u308b\u3053\u3068\u300d\u306b\u3064\u3044\u3066\u306e<br>\n        \u5b66\u3073\u304c\u3042\u308a\u307e\u3059\u3002\n      <\/p>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/nansiki.net\/2018\/archives\/4433\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/image-1-1024x683.png\" alt=\"\" class=\"wp-image-4434\" srcset=\"https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/image-1-1024x683.png 1024w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/image-1-300x200.png 300w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/image-1-768x512.png 768w, https:\/\/nansiki.net\/2018\/wp-content\/uploads\/2026\/09\/image-1.png 1536w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cClosing Message\n========================================================= *\/\n\n.nescom-stories-close {\n  width: 100%;\n  margin: 0;\n  padding: 90px 24px 100px;\n  background: #ffffff;\n  box-sizing: border-box;\n}\n\n.nescom-stories-close-inner {\n  width: min(100%, 760px);\n  margin: 0 auto;\n  text-align: center;\n}\n\n.nescom-stories-close-label {\n  margin: 0 0 18px;\n  color: #1e5aa8;\n  font-size: 0.75rem;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n  line-height: 1.5;\n}\n\n.nescom-stories-close-title {\n  margin: 0;\n  color: #16457f;\n  font-size: clamp(1.8rem, 4vw, 2.6rem);\n  font-weight: 700;\n  line-height: 1.65;\n  letter-spacing: 0.07em;\n}\n\n.nescom-stories-close-text {\n  margin: 32px 0 0;\n  color: #4b5968;\n  font-size: 0.98rem;\n  line-height: 2;\n  letter-spacing: 0.04em;\n}\n\n.nescom-stories-close-message {\n  margin: 28px 0 0;\n  color: #596776;\n  font-size: 0.94rem;\n  line-height: 2;\n  letter-spacing: 0.04em;\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-close {\n    padding: 65px 18px 75px;\n  }\n\n  .nescom-stories-close-title {\n    font-size: 1.5rem;\n    line-height: 1.7;\n  }\n\n  .nescom-stories-close-text {\n    margin-top: 25px;\n    font-size: 0.88rem;\n    line-height: 1.9;\n  }\n\n  .nescom-stories-close-message {\n    margin-top: 23px;\n    font-size: 0.85rem;\n    line-height: 1.9;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cClosing Message\n========================================================= -->\n\n<section class=\"nescom-stories-close\">\n\n  <div class=\"nescom-stories-close-inner\">\n\n    <p class=\"nescom-stories-close-label\">\n      LEARNING NEVER ENDS\n    <\/p>\n\n    <h2 class=\"nescom-stories-close-title\">\n      \u7269\u8a9e\u306e\u4e2d\u306b\u306f\u3001<br>\n      \u5b66\u3076\u3053\u3068\u304c\u305f\u304f\u3055\u3093\u3042\u308b\u3002\n    <\/h2>\n\n    <p class=\"nescom-stories-close-text\">\n      \u8ab0\u304b\u306e\u6311\u6226\u3092\u77e5\u308b\u3053\u3068\u3002<br>\n      \u5931\u6557\u304b\u3089\u7acb\u3061\u4e0a\u304c\u308b\u59ff\u3092\u898b\u308b\u3053\u3068\u3002<br>\n      \u65b0\u3057\u3044\u3053\u3068\u3092\u77e5\u308a\u3001\u8003\u3048\u3066\u307f\u308b\u3053\u3068\u3002\n    <\/p>\n\n    <p class=\"nescom-stories-close-message\">\n      \u305d\u3093\u306a\u5c0f\u3055\u306a\u767a\u898b\u306e\u7a4d\u307f\u91cd\u306d\u304c\u3001<br>\n      \u3053\u308c\u304b\u3089\u306e\u5b66\u3073\u306b\u3064\u306a\u304c\u3063\u3066\u3044\u304d\u307e\u3059\u3002\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cFooter CTA\n========================================================= *\/\n\n.nescom-stories-footer-cta {\n  width: 100%;\n  margin: 0;\n  padding: 75px 24px;\n  background: #16457f;\n  box-sizing: border-box;\n}\n\n.nescom-stories-footer-cta-inner {\n  width: min(100%, 760px);\n  margin: 0 auto;\n  text-align: center;\n}\n\n.nescom-stories-footer-cta-label {\n  margin: 0 0 18px;\n  color: #ffffff;\n  font-size: 0.72rem;\n  font-weight: 700;\n  letter-spacing: 0.2em;\n  line-height: 1.5;\n}\n\n.nescom-stories-footer-cta-title {\n  margin: 0;\n  color: #ffffff;\n  font-size: clamp(1.8rem, 4vw, 2.6rem);\n  font-weight: 700;\n  line-height: 1.65;\n  letter-spacing: 0.08em;\n}\n\n.nescom-stories-footer-cta-text {\n  margin: 24px 0 0;\n  color: #eaf2fb;\n  font-size: 0.94rem;\n  line-height: 1.9;\n  letter-spacing: 0.04em;\n}\n\n\n\/* =========================================================\n   Smartphone\n========================================================= *\/\n\n@media (max-width: 600px) {\n\n  .nescom-stories-footer-cta {\n    padding: 58px 18px;\n  }\n\n  .nescom-stories-footer-cta-title {\n    font-size: 1.5rem;\n  }\n\n  .nescom-stories-footer-cta-text {\n    font-size: 0.85rem;\n  }\n\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cFooter CTA\n========================================================= -->\n\n<section class=\"nescom-stories-footer-cta\">\n\n  <div class=\"nescom-stories-footer-cta-inner\">\n\n    <p class=\"nescom-stories-footer-cta-label\">\n      NESCOM NAKANO\n    <\/p>\n\n    <h2 class=\"nescom-stories-footer-cta-title\">\n      \u5b66\u3076\u3053\u3068\u3092\u3001<br>\n      \u767a\u898b\u3059\u308b\u697d\u3057\u3055\u3078\u3002\n    <\/h2>\n\n    <p class=\"nescom-stories-footer-cta-text\">\n      \u4eca\u65e5\u306e\u767a\u898b\u304c\u3001<br>\n      \u660e\u65e5\u306e\u81ea\u4fe1\u306b\u3064\u306a\u304c\u308a\u307e\u3059\u3002\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style data-wp-block-html=\"css\">\n<!-- =========================================================\n     NESCOM STORIES\uff5cStory Archive\n     \u516c\u958b\u6e08\u307f\u306e\u8a18\u4e8b\u3060\u3051\u3092\u81ea\u52d5\u8868\u793a\n========================================================= -->\n\n<section class=\"nescom-stories-list\">\n\n  <div class=\"nescom-stories-list-inner\">\n\n    <div\n      class=\"nescom-stories-grid\"\n      id=\"nescom-stories-grid\"\n      data-posts-url=\"\/2018\/wp-json\/wp\/v2\/posts?per_page=100&_embed\"\n    ><\/div>\n\n    <p\n      class=\"nescom-stories-empty\"\n      id=\"nescom-stories-empty\"\n      hidden\n    >\n      \u73fe\u5728\u516c\u958b\u3055\u308c\u3066\u3044\u308bSTORIES\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n<script>\n(function () {\n\n  const grid = document.getElementById(\"nescom-stories-grid\");\n  const empty = document.getElementById(\"nescom-stories-empty\");\n\n  if (!grid) return;\n\n  const apiUrl =\n    window.location.origin +\n    grid.dataset.postsUrl;\n\n  function getImage(post) {\n\n    if (\n      post._embedded &&\n      post._embedded[\"wp:featuredmedia\"] &&\n      post._embedded[\"wp:featuredmedia\"][0]\n    ) {\n      return post._embedded[\"wp:featuredmedia\"][0].source_url;\n    }\n\n    return \"\";\n  }\n\n  function getTitle(post) {\n\n    if (\n      post.title &&\n      post.title.rendered\n    ) {\n      const temp = document.createElement(\"div\");\n      temp.innerHTML = post.title.rendered;\n      return temp.textContent;\n    }\n\n    return \"\";\n  }\n\n  function getExcerpt(post) {\n\n    if (\n      post.excerpt &&\n      post.excerpt.rendered\n    ) {\n      const temp = document.createElement(\"div\");\n      temp.innerHTML = post.excerpt.rendered;\n      return temp.textContent.trim();\n    }\n\n    return \"\";\n  }\n\n  function createCard(post) {\n\n    const card = document.createElement(\"a\");\n\n    card.className = \"nescom-stories-card\";\n    card.href = post.link;\n\n    const image = getImage(post);\n    const title = getTitle(post);\n    const excerpt = getExcerpt(post);\n\n    card.innerHTML = `\n      <article class=\"nescom-stories-card-inner\">\n\n        <div class=\"nescom-stories-card-image-wrap\">\n\n          ${\n            image\n              ? `<img decoding=\"async\"\n                   class=\"nescom-stories-card-image\"\n                   src=\"${image}\"\n                   alt=\"${title}\"\n                   loading=\"lazy\"\n                 >`\n              : `\n                <div class=\"nescom-stories-card-no-image\">\n                  STORIES\n                <\/div>\n              `\n          }\n\n        <\/div>\n\n        <div class=\"nescom-stories-card-body\">\n\n          <h3 class=\"nescom-stories-card-title\">\n            ${title}\n          <\/h3>\n\n          ${\n            excerpt\n              ? `<p class=\"nescom-stories-card-excerpt\">\n                   ${excerpt}\n                 <\/p>`\n              : \"\"\n          }\n\n          <span class=\"nescom-stories-card-more\">\n            READ STORY\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n    `;\n\n    return card;\n  }\n\n  fetch(apiUrl)\n    .then(function (response) {\n\n      if (!response.ok) {\n        throw new Error(\"WordPress REST API error\");\n      }\n\n      return response.json();\n\n    })\n    .then(function (posts) {\n\n      grid.innerHTML = \"\";\n\n      if (!posts.length) {\n        empty.hidden = false;\n        return;\n      }\n\n      posts.forEach(function (post) {\n\n        \/*\n         * WordPress\u306e\u516c\u958b\u6e08\u307f\u6295\u7a3f\u3060\u3051\u3092\u8868\u793a\u3002\n         * \u4e88\u7d04\u6295\u7a3f\u306f\u516c\u958b\u3055\u308c\u308b\u307e\u3067REST API\u306b\n         * \u8868\u793a\u3055\u308c\u306a\u3044\u305f\u3081\u3001\u81ea\u52d5\u7684\u306b\u9664\u5916\u3055\u308c\u307e\u3059\u3002\n         *\/\n        if (post.status !== \"publish\") {\n          return;\n        }\n\n        grid.appendChild(\n          createCard(post)\n        );\n\n      });\n\n      if (!grid.children.length) {\n        empty.hidden = false;\n      }\n\n    })\n    .catch(function (error) {\n\n      console.error(\n        \"NESCOM STORIES:\",\n        error\n      );\n\n      empty.hidden = false;\n\n    });\n\n})();\n<\/script>\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cStory Archive\n     \u516c\u958b\u6e08\u307f\u306e\u8a18\u4e8b\u3060\u3051\u3092\u81ea\u52d5\u8868\u793a\n========================================================= -->\n\n<section class=\"nescom-stories-list\">\n\n  <div class=\"nescom-stories-list-inner\">\n\n    <div\n      class=\"nescom-stories-grid\"\n      id=\"nescom-stories-grid\"\n      data-posts-url=\"\/2018\/wp-json\/wp\/v2\/posts?per_page=100&_embed\"\n    ><\/div>\n\n    <p\n      class=\"nescom-stories-empty\"\n      id=\"nescom-stories-empty\"\n      hidden\n    >\n      \u73fe\u5728\u516c\u958b\u3055\u308c\u3066\u3044\u308bSTORIES\u306f\u3042\u308a\u307e\u305b\u3093\u3002\n    <\/p>\n\n  <\/div>\n\n<\/section>\n\n<script>\n(function () {\n\n  const grid = document.getElementById(\"nescom-stories-grid\");\n  const empty = document.getElementById(\"nescom-stories-empty\");\n\n  if (!grid) return;\n\n  const apiUrl =\n    window.location.origin +\n    grid.dataset.postsUrl;\n\n  function getImage(post) {\n\n    if (\n      post._embedded &&\n      post._embedded[\"wp:featuredmedia\"] &&\n      post._embedded[\"wp:featuredmedia\"][0]\n    ) {\n      return post._embedded[\"wp:featuredmedia\"][0].source_url;\n    }\n\n    return \"\";\n  }\n\n  function getTitle(post) {\n\n    if (\n      post.title &&\n      post.title.rendered\n    ) {\n      const temp = document.createElement(\"div\");\n      temp.innerHTML = post.title.rendered;\n      return temp.textContent;\n    }\n\n    return \"\";\n  }\n\n  function getExcerpt(post) {\n\n    if (\n      post.excerpt &&\n      post.excerpt.rendered\n    ) {\n      const temp = document.createElement(\"div\");\n      temp.innerHTML = post.excerpt.rendered;\n      return temp.textContent.trim();\n    }\n\n    return \"\";\n  }\n\n  function createCard(post) {\n\n    const card = document.createElement(\"a\");\n\n    card.className = \"nescom-stories-card\";\n    card.href = post.link;\n\n    const image = getImage(post);\n    const title = getTitle(post);\n    const excerpt = getExcerpt(post);\n\n    card.innerHTML = `\n      <article class=\"nescom-stories-card-inner\">\n\n        <div class=\"nescom-stories-card-image-wrap\">\n\n          ${\n            image\n              ? `<img decoding=\"async\"\n                   class=\"nescom-stories-card-image\"\n                   src=\"${image}\"\n                   alt=\"${title}\"\n                   loading=\"lazy\"\n                 >`\n              : `\n                <div class=\"nescom-stories-card-no-image\">\n                  STORIES\n                <\/div>\n              `\n          }\n\n        <\/div>\n\n        <div class=\"nescom-stories-card-body\">\n\n          <h3 class=\"nescom-stories-card-title\">\n            ${title}\n          <\/h3>\n\n          ${\n            excerpt\n              ? `<p class=\"nescom-stories-card-excerpt\">\n                   ${excerpt}\n                 <\/p>`\n              : \"\"\n          }\n\n          <span class=\"nescom-stories-card-more\">\n            READ STORY\n          <\/span>\n\n        <\/div>\n\n      <\/article>\n    `;\n\n    return card;\n  }\n\n  fetch(apiUrl)\n    .then(function (response) {\n\n      if (!response.ok) {\n        throw new Error(\"WordPress REST API error\");\n      }\n\n      return response.json();\n\n    })\n    .then(function (posts) {\n\n      grid.innerHTML = \"\";\n\n      if (!posts.length) {\n        empty.hidden = false;\n        return;\n      }\n\n      posts.forEach(function (post) {\n\n        \/*\n         * WordPress\u306e\u516c\u958b\u6e08\u307f\u6295\u7a3f\u3060\u3051\u3092\u8868\u793a\u3002\n         * \u4e88\u7d04\u6295\u7a3f\u306f\u516c\u958b\u3055\u308c\u308b\u307e\u3067REST API\u306b\n         * \u8868\u793a\u3055\u308c\u306a\u3044\u305f\u3081\u3001\u81ea\u52d5\u7684\u306b\u9664\u5916\u3055\u308c\u307e\u3059\u3002\n         *\/\n        if (post.status !== \"publish\") {\n          return;\n        }\n\n        grid.appendChild(\n          createCard(post)\n        );\n\n      });\n\n      if (!grid.children.length) {\n        empty.hidden = false;\n      }\n\n    })\n    .catch(function (error) {\n\n      console.error(\n        \"NESCOM STORIES:\",\n        error\n      );\n\n      empty.hidden = false;\n\n    });\n\n})();\n<\/script>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* =========================================================\n   NESCOM STORIES\uff5cPage End\n========================================================= *\/\n\n.nescom-stories-page-end {\n  width: 100%;\n  height: 1px;\n  margin: 0;\n  padding: 0;\n  background: transparent;\n}\n<\/style>\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cPage End\n========================================================= -->\n\n<div class=\"nescom-stories-page-end\" aria-hidden=\"true\"><\/div>\n\n\n\n<!-- =========================================================\n     NESCOM STORIES\uff5cPage Complete\n========================================================= -->\n\n\n\n\n\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>NESCOM NAKANO STORIES STORIES \u4eba\u751f\u306e\u4e2d\u306b\u3042\u308b\u3001 \u300c\u5b66\u3073\u300d\u306e\u7269\u8a9e\u3002 \u30cd\u30b9\u30b3\u30e0\u4e2d\u91ce\u6559\u5ba4\u304c\u9078\u3093\u3060\u3001 14\u4eba\u306e\u5049\u4eba\u3068\u3001\u3072\u3068\u3064\u306e\u7269\u8a9e\u3002 \u52c7\u6c17\u3084\u611f\u52d5\u3060\u3051\u3067\u306f\u306a\u304f\u3001 \u8003\u3048\u308b\u3053\u3068\u3001\u884c\u52d5\u3059\u308b\u3053\u3068\u3001\u6e96\u5099\u3059\u308b\u3053\u3068 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","vkExUnit_sitemap":"","vkExUnit_EyeCatch_disable":"","_veu_custom_css":"","veu_display_promotion_alert":"","_exclude_from_list_pages":"","vkexunit_cta_each_option":"","vkExUnit_childPageIndex":"","vkExUnit_pageList_ancestor":"","vkExUnit_contact_enable":"","_lightning_design_setting":{"layout":"col-one-no-subsection"},"footnotes":""},"class_list":["post-4509","page","type-page","status-publish","hentry"],"acf":[],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages\/4509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/comments?post=4509"}],"version-history":[{"count":14,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages\/4509\/revisions"}],"predecessor-version":[{"id":4528,"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/pages\/4509\/revisions\/4528"}],"wp:attachment":[{"href":"https:\/\/nansiki.net\/2018\/wp-json\/wp\/v2\/media?parent=4509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}