From 6d0e302754c5eedf643146626315e02f5e7c0acb Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Mon, 9 Nov 2020 11:35:36 +0900
Subject: [PATCH 1/8] =?UTF-8?q?scroll=20reveal=20=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json             |  1 -
 src/components/Modal.vue | 12 ++++++------
 src/main.js              |  3 ---
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index cfd458e1..8a88b2fe 100755
--- a/package.json
+++ b/package.json
@@ -17,7 +17,6 @@
     "global": "^4.4.0",
     "gridsome": "^0.7.14",
     "gridsome-plugin-remark-prismjs-all": "^0.3.5",
-    "gridsome-scroll-reveal": "^1.0.11",
     "prismjs": "^1.20.0",
     "swiper": "^6.0.4",
     "vercel": "^20.1.1",
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 305328b5..0d499261 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -50,7 +50,7 @@
                 </g-link><!-- c-modal__services-link -->
 
                 <g-link to="/services/serverless-development" class="c-modal__services-link" @click.native="$emit('close');">
-                  <div class="c-modal__services-menu" v-scroll-reveal.reset="{ delay: 350 }">
+                  <div class="c-modal__services-menu">
                     <span class="c-modal__services-menu-serverless">Serverless</span>Products
                     <span class="c-modal__services-menu-ja">私たちが開発したプロダクト</span>
                   </div>
@@ -74,14 +74,14 @@
             </v-col>
 
             <v-col cols="6" md="2" offset-md="0" class="c-modal__menu-column mt-3 mt-md-0">
-              <g-link @click.native="$emit('close');" to="/blog-archives" class="c-modal__link" v-scroll-reveal.reset="{ delay: 350 }">
+              <g-link @click.native="$emit('close');" to="/blog-archives" class="c-modal__link">
                 <span class="c-modal__link--menu">Blog</span>
                 <span class="c-modal__link--ja">開発ブログ</span>
               </g-link>
             </v-col>
 
             <v-col cols="6" md="2" offset-md="0" class="c-modal__menu-column mt-3 mt-md-0">
-              <g-link @click.native="$emit('close');" to="/news-archives" class="c-modal__link" v-scroll-reveal.reset="{ delay: 400 }">
+              <g-link @click.native="$emit('close');" to="/news-archives" class="c-modal__link">
                 <span class="c-modal__link--menu">News</span>
                 <span class="c-modal__link--ja">おしらせ</span>
               </g-link>
@@ -96,7 +96,7 @@
               <div class="c-modal__services-block">
 
                 <g-link to="/services/serverless-consulting" class="c-modal__services-link" @click.native="$emit('close');">
-                  <div class="c-modal__services-menu" v-scroll-reveal.reset="{ delay: 250 }">
+                  <div class="c-modal__services-menu">
                     <span class="c-modal__services-menu-serverless">Serverless</span>
                     <span class="c-modal__services-name">Consulting</span>
                     <span class="c-modal__services-menu-ja">サーバーレスコンサルティング</span>
@@ -112,7 +112,7 @@
                 </g-link>
 
                 <g-link @click.native="$emit('close');" to="/our-products" class="c-modal__services-link">
-                  <div class="c-modal__services-menu" v-scroll-reveal.reset="{ delay: 350 }">
+                  <div class="c-modal__services-menu">
                     <span class="c-modal__services-menu-serverless">Serverless</span>
                     <span class="c-modal__services-name">Products</span>
                     <span class="c-modal__services-menu-ja">私たちが開発したプロダクト</span>
@@ -123,7 +123,7 @@
             </v-col>
 
             <v-col cols="12" md="4" lg="4" xl="3" offset-md="2" offset-lg="0">
-              <div class="c-modal__contact-button-wrapper" v-scroll-reveal.reset="{ delay: 400 }">
+              <div class="c-modal__contact-button-wrapper">
                 <g-link
                   to="/contact"
                   class="c-modal__contact-button"
diff --git a/src/main.js b/src/main.js
index da77cef7..520d974e 100755
--- a/src/main.js
+++ b/src/main.js
@@ -9,8 +9,6 @@ import '~/assets/js/chatplus.js'
 import Vuelidate from 'vuelidate'
 import VueAwesomeSwiper from 'vue-awesome-swiper'
 
-// import GridsomeScrollReveal from 'gridsome-scroll-reveal';
-
 export default function (Vue, { router, head, appOptions, isClient, isServer }) {
   
   // Add an external Javascript before the closing </body> tag
@@ -53,5 +51,4 @@ export default function (Vue, { router, head, appOptions, isClient, isServer })
   // Set default layout as a global component
   Vue.component('Layout', DefaultLayout)
 
-  // Vue.use(GridsomeScrollReveal);
 }

From d00112f71fb664cf310c458360d2672302a9472a Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Mon, 9 Nov 2020 13:00:07 +0900
Subject: [PATCH 2/8] =?UTF-8?q?=E3=83=91=E3=83=83=E3=82=B1=E3=83=BC?=
 =?UTF-8?q?=E3=82=B8=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json |   1 +
 yarn.lock    | 147 ++++++++++++++++++++++++++++++++++-----------------
 2 files changed, 100 insertions(+), 48 deletions(-)

diff --git a/package.json b/package.json
index 8a88b2fe..d0a4a281 100755
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "gridsome": "^0.7.14",
     "gridsome-plugin-remark-prismjs-all": "^0.3.5",
     "prismjs": "^1.20.0",
+    "sharp": "^0.26.2",
     "swiper": "^6.0.4",
     "vercel": "^20.1.1",
     "vue": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 4482575e..b6dc51d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1846,6 +1846,15 @@ bl@^4.0.1:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
+bl@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.3.tgz#12d6287adc29080e22a705e5764b2a9522cdc489"
+  integrity sha512-fs4G6/Hu4/EE+F75J8DuN/0IpQqNjAdC7aEQv7Qt8MHGUH7Ckv2MwTEEeN9QehD0pfIDkMI1bkHYkKy7xHyKIg==
+  dependencies:
+    buffer "^5.5.0"
+    inherits "^2.0.4"
+    readable-stream "^3.4.0"
+
 block-stream@*:
   version "0.0.9"
   resolved "https://registry.yarnpkg.com/block-stream/-/block-stream-0.0.9.tgz#13ebfe778a03205cfe03751481ebb4b3300c126a"
@@ -3028,6 +3037,13 @@ decompress-response@^4.2.0:
   dependencies:
     mimic-response "^2.0.0"
 
+decompress-response@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/decompress-response/-/decompress-response-6.0.0.tgz#ca387612ddb7e104bd16d85aab00d5ecf09c66fc"
+  integrity sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==
+  dependencies:
+    mimic-response "^3.1.0"
+
 decompress-tar@^4.0.0, decompress-tar@^4.1.0, decompress-tar@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/decompress-tar/-/decompress-tar-4.1.1.tgz#718cbd3fcb16209716e70a26b84e7ba4592e5af1"
@@ -4775,13 +4791,6 @@ gridsome-plugin-remark-prismjs-all@^0.3.5:
     prismjs "^1.19.0"
     unist-util-visit "^2.0.2"
 
-gridsome-scroll-reveal@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/gridsome-scroll-reveal/-/gridsome-scroll-reveal-1.0.11.tgz#f3a6325e2d357a163e16fdfb9c3477a6ab61bf38"
-  integrity sha512-5wJ71VnyypG2NQiBIdg7OlLw26l721q5uXoePifaJbznBSN2ZK1e3PWEQ8p7wvYo2O7GP1xqPsQ7fYG69x2YSw==
-  dependencies:
-    scrollreveal "^4.0.2"
-
 gridsome@^0.7.14:
   version "0.7.14"
   resolved "https://registry.yarnpkg.com/gridsome/-/gridsome-0.7.14.tgz#d919f62bd9f0a500ded4599e70b63cb09cfa68ad"
@@ -5487,18 +5496,6 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
-is-dom-node-list@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz#141ded0c66de759d0976800d21370bb908f2950f"
-  integrity sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==
-  dependencies:
-    is-dom-node "^1.0.4"
-
-is-dom-node@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-dom-node/-/is-dom-node-1.0.4.tgz#abb18af7133f1e687610cfeb274da1ced342f1c5"
-  integrity sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -6369,6 +6366,11 @@ mimic-response@^2.0.0:
   resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-2.1.0.tgz#d13763d35f613d09ec37ebb30bac0469c0ee8f43"
   integrity sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==
 
+mimic-response@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-response/-/mimic-response-3.1.0.tgz#2d1d59af9c1b129815accc2c46a022a5ce1fa3c9"
+  integrity sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==
+
 min-document@^2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
@@ -6407,7 +6409,7 @@ minimatch@^3.0.4, minimatch@~3.0.2:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.3, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -6419,11 +6421,6 @@ minipass@^3.0.0:
   dependencies:
     yallist "^4.0.0"
 
-miniraf@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/miniraf/-/miniraf-1.0.0.tgz#5d88e108bbdcb55b4a2ff3da337f24a13a3377e1"
-  integrity sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==
-
 minizlib@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.0.tgz#fd52c645301ef09a63a2c209697c294c6ce02cf3"
@@ -6456,7 +6453,7 @@ mixin-deep@^1.2.0:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
 
-mkdirp-classic@^0.5.2:
+mkdirp-classic@^0.5.2, mkdirp-classic@^0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
   integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
@@ -6585,6 +6582,11 @@ node-abi@^2.7.0:
   dependencies:
     semver "^5.4.1"
 
+node-addon-api@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/node-addon-api/-/node-addon-api-3.0.2.tgz#04bc7b83fd845ba785bb6eae25bc857e1ef75681"
+  integrity sha512-+D4s2HCnxPd5PjjI0STKwncjXTUKKqm74MDMz9OPXavjsGmjkvwgLtA5yoxJUdmpj52+2u+RrXgPipahKczMKg==
+
 node-fetch@^2.3.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
@@ -7690,6 +7692,27 @@ prebuild-install@^5.3.3:
     tunnel-agent "^0.6.0"
     which-pm-runs "^1.0.0"
 
+prebuild-install@^5.3.5:
+  version "5.3.6"
+  resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291"
+  integrity sha512-s8Aai8++QQGi4sSbs/M1Qku62PFK49Jm1CbgXklGz4nmHveDq0wzJkg7Na5QbnO1uNH8K7iqx2EQ/mV0MZEmOg==
+  dependencies:
+    detect-libc "^1.0.3"
+    expand-template "^2.0.3"
+    github-from-package "0.0.0"
+    minimist "^1.2.3"
+    mkdirp-classic "^0.5.3"
+    napi-build-utils "^1.0.1"
+    node-abi "^2.7.0"
+    noop-logger "^0.1.1"
+    npmlog "^4.0.1"
+    pump "^3.0.0"
+    rc "^1.2.7"
+    simple-get "^3.0.3"
+    tar-fs "^2.0.0"
+    tunnel-agent "^0.6.0"
+    which-pm-runs "^1.0.0"
+
 prelude-ls@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
@@ -8119,11 +8142,6 @@ relateurl@0.2.x:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-rematrix@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/rematrix/-/rematrix-0.3.0.tgz#4f3f9156aa80ded8a8ca23785f48c6012b6dea4a"
-  integrity sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==
-
 remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz#c24bce2a283adad5bc3f58e0d48249b92379d8ef"
@@ -8386,15 +8404,6 @@ schema-utils@^2.6.1:
     ajv "^6.12.0"
     ajv-keywords "^3.4.1"
 
-scrollreveal@^4.0.2:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/scrollreveal/-/scrollreveal-4.0.6.tgz#4cb7d13cf95d4f8aeeb3fbae876caf07c7e54809"
-  integrity sha512-uXG2pYY5OWIk2XSsCYhv4yH1iypp4uM7H3jTdp0Q5+sTAwS6NYND3OY+7PTdTJVr1uzw6jLBcg4Vipwuxv+AiA==
-  dependencies:
-    miniraf "1.0.0"
-    rematrix "0.3.0"
-    tealight "0.3.6"
-
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -8449,6 +8458,11 @@ semver@^6.0.0, semver@^6.1.0, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
+semver@^7.3.2:
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.2.tgz#604962b052b81ed0786aae84389ffba70ffd3938"
+  integrity sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ==
+
 semver@~5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"
@@ -8543,6 +8557,21 @@ sharp@^0.23.2:
     tar "^5.0.5"
     tunnel-agent "^0.6.0"
 
+sharp@^0.26.2:
+  version "0.26.2"
+  resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.26.2.tgz#3d5777d246ae32890afe82a783c1cbb98456a88c"
+  integrity sha512-bGBPCxRAvdK9bX5HokqEYma4j/Q5+w8Nrmb2/sfgQCLEUx/HblcpmOfp59obL3+knIKnOhyKmDb4tEOhvFlp6Q==
+  dependencies:
+    color "^3.1.2"
+    detect-libc "^1.0.3"
+    node-addon-api "^3.0.2"
+    npmlog "^4.1.2"
+    prebuild-install "^5.3.5"
+    semver "^7.3.2"
+    simple-get "^4.0.0"
+    tar-fs "^2.1.0"
+    tunnel-agent "^0.6.0"
+
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"
@@ -8574,6 +8603,15 @@ simple-get@^3.0.3, simple-get@^3.1.0:
     once "^1.3.1"
     simple-concat "^1.0.0"
 
+simple-get@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.0.tgz#73fa628278d21de83dadd5512d2cc1f4872bd675"
+  integrity sha512-ZalZGexYr3TA0SwySsr5HlgOOinS4Jsa8YB2GJ6lUNAazyAu4KG/VmzMTwAt2YVXzzVj8QmefmAonZIK2BSGcQ==
+  dependencies:
+    decompress-response "^6.0.0"
+    once "^1.3.1"
+    simple-concat "^1.0.0"
+
 simple-swizzle@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
@@ -9173,6 +9211,16 @@ tar-fs@^2.0.0:
     pump "^3.0.0"
     tar-stream "^2.0.0"
 
+tar-fs@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
+  integrity sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==
+  dependencies:
+    chownr "^1.1.1"
+    mkdirp-classic "^0.5.2"
+    pump "^3.0.0"
+    tar-stream "^2.1.4"
+
 tar-stream@^1.5.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
@@ -9197,6 +9245,17 @@ tar-stream@^2.0.0:
     inherits "^2.0.3"
     readable-stream "^3.1.1"
 
+tar-stream@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.4.tgz#c4fb1a11eb0da29b893a5b25476397ba2d053bfa"
+  integrity sha512-o3pS2zlG4gxr67GmFYBLlq+dM8gyRGUOvsrHclSkvtVtQbjV0s/+ZE8OpICbaj8clrX3tjeHngYGP7rweaBnuw==
+  dependencies:
+    bl "^4.0.3"
+    end-of-stream "^1.4.1"
+    fs-constants "^1.0.0"
+    inherits "^2.0.3"
+    readable-stream "^3.1.1"
+
 tar@^2.0.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/tar/-/tar-2.2.2.tgz#0ca8848562c7299b8b446ff6a4d60cdbb23edc40"
@@ -9218,14 +9277,6 @@ tar@^5.0.5:
     mkdirp "^0.5.0"
     yallist "^4.0.0"
 
-tealight@0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/tealight/-/tealight-0.3.6.tgz#14c8071ce3c188972a5cb7d8a5668ca2820b4292"
-  integrity sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==
-  dependencies:
-    is-dom-node "^1.0.4"
-    is-dom-node-list "^1.2.1"
-
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"

From 221a0b9e988c1813f4ba07146bbcaeefb7134d75 Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Mon, 9 Nov 2020 17:20:51 +0900
Subject: [PATCH 3/8] =?UTF-8?q?footer=20=E8=83=8C=E6=99=AF=E3=82=B0?=
 =?UTF-8?q?=E3=83=A9=E3=83=87=E3=81=A8particle=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/footer/footer-cta-particle.svg     | 121 ++++++++++++++++++
 src/assets/images/footer/footer-particle.svg  |  11 ++
 src/components/CallToAction.vue               |  49 +++++--
 src/components/Footer.vue                     |  42 +-----
 4 files changed, 171 insertions(+), 52 deletions(-)
 create mode 100644 src/assets/images/footer/footer-cta-particle.svg
 create mode 100644 src/assets/images/footer/footer-particle.svg

diff --git a/src/assets/images/footer/footer-cta-particle.svg b/src/assets/images/footer/footer-cta-particle.svg
new file mode 100644
index 00000000..903c6d82
--- /dev/null
+++ b/src/assets/images/footer/footer-cta-particle.svg
@@ -0,0 +1,121 @@
+<svg width="1800" height="579" viewBox="0 0 1800 579" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="1800" height="406">
+<rect width="1800" height="406" fill="url(#paint0_linear)"/>
+</mask>
+<g mask="url(#mask0)">
+<g opacity="0.3">
+<path d="M741.011 -62.5791V52.6314L625.801 -62.5791L741.011 -62.5791Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M568.06 52.6314L741.011 52.6314V-4.83838L510.59 -4.83838L568.06 52.6314Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M971.434 -4.83838V110.372L856.224 -4.83838L971.434 -4.83838Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M798.481 110.372L971.433 110.372V52.6313L741.012 52.6313L798.481 110.372Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M741.012 -4.83838V52.6314L913.692 52.6314L856.222 -4.83838L741.012 -4.83838Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M971.435 52.6314L1086.37 52.6314L971.435 -62.5791V52.6314Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1201.59 52.6316V167.842L1086.38 52.6316L1201.59 52.6316Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1028.9 167.842L1201.58 167.842V110.373L971.433 110.373L1028.9 167.842Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1201.58 -4.83838V52.6314L1086.37 52.6314L1028.9 -4.83838L1201.58 -4.83838Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M971.433 52.6316V110.372L1144.11 110.372L1086.37 52.6316L971.433 52.6316Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1201.58 110.372L1316.79 110.372L1201.58 -4.83813V110.372Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1432 110.373V225.583L1316.79 110.373L1432 110.373Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1201.58 52.6316L1432 52.6316L1374.53 -4.83813L1201.58 -4.83813V52.6316Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1259.32 225.583L1432.01 225.583V167.842L1201.58 167.842L1259.32 225.583Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1432 52.6316V110.372L1316.79 110.372L1259.32 52.6316L1432 52.6316Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1201.58 110.373V167.842L1374.54 167.842L1316.79 110.373L1201.58 110.373Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1432.01 167.842H1547.22L1432.01 52.6313V167.842Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1662.42 167.842V283.053L1547.21 167.842H1662.42Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1432.01 110.372L1662.43 110.372L1604.96 52.6313L1432.01 52.6313V110.372Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1489.74 283.052H1662.42V225.583L1432 225.583L1489.74 283.052Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1662.42 110.372V167.842L1547.21 167.842L1489.74 110.372L1662.42 110.372Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1432 167.842V225.583L1604.95 225.583L1547.21 167.842H1432Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1662.42 225.583H1777.63L1662.42 110.373V225.583Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1892.85 225.583V340.794L1777.63 225.583H1892.85Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1662.42 167.842L1892.84 167.842L1835.38 110.373L1662.42 110.373V167.842Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1720.16 340.794H1892.84V283.053H1662.42L1720.16 340.794Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1892.85 167.842V225.583L1777.63 225.583L1720.17 167.842L1892.85 167.842Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1662.42 225.583V283.053H1835.38L1777.63 225.583H1662.42Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1604.96 -62.5791V52.6314L1489.75 -62.5791L1604.96 -62.5791Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1432 52.6314L1604.96 52.6314V-4.83838L1374.54 -4.83838L1432 52.6314Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1835.38 -4.83838V110.372L1720.17 -4.83838L1835.38 -4.83838Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1662.42 110.372L1835.38 110.372V52.6313L1604.96 52.6313L1662.42 110.372Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1604.96 -4.83838V52.6314L1777.64 52.6314L1720.17 -4.83838L1604.96 -4.83838Z" stroke="#02007C" stroke-miterlimit="10"/>
+</g>
+</g>
+<mask id="mask1" mask-type="alpha" maskUnits="userSpaceOnUse" x="-1" y="179" width="1801" height="401">
+<rect x="1799.5" y="578.5" width="1799" height="399" transform="rotate(180 1799.5 578.5)" fill="url(#paint1_linear)" stroke="#02007C"/>
+</mask>
+<g mask="url(#mask1)">
+<g opacity="0.3">
+<path d="M1058.7 640.692L1058.7 525.481L1173.91 640.692L1058.7 640.692Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1231.65 525.481L1058.7 525.481L1058.7 582.951L1289.12 582.951L1231.65 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M828.278 582.951L828.278 467.741L943.488 582.951L828.278 582.951Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1001.23 467.741L828.279 467.741L828.279 525.481L1058.7 525.481L1001.23 467.741Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M1058.7 582.951L1058.7 525.481L886.02 525.481L943.49 582.951L1058.7 582.951Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M828.278 525.481L713.339 525.481L828.278 640.692L828.278 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M598.126 525.481L598.126 410.271L713.337 525.481L598.126 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M770.81 410.271L598.129 410.271L598.129 467.741L828.279 467.741L770.81 410.271Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M598.128 582.951L598.128 525.481L713.339 525.481L770.809 582.951L598.128 582.951Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M828.279 525.481L828.279 467.741L655.599 467.741L713.34 525.481L828.279 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M598.13 467.741L482.919 467.741L598.13 582.951L598.13 467.741Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M367.708 467.74L367.708 352.53L482.919 467.74L367.708 467.74Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M598.13 525.481L367.709 525.481L425.179 582.951L598.13 582.951L598.13 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M540.388 352.53L367.708 352.53L367.708 410.271L598.129 410.271L540.388 352.53Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M367.709 525.481L367.709 467.74L482.92 467.74L540.39 525.481L367.709 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M598.129 467.74L598.129 410.27L425.178 410.27L482.918 467.74L598.129 467.74Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M367.706 410.271L252.496 410.271L367.706 525.481L367.706 410.271Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M137.288 410.271L137.287 295.06L252.498 410.271L137.288 410.271Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M367.706 467.741L137.285 467.741L194.755 525.481L367.706 525.481L367.706 467.741Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M309.968 295.061L137.288 295.061L137.288 352.53L367.709 352.53L309.968 295.061Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M137.287 467.741L137.287 410.271L252.498 410.271L309.968 467.741L137.287 467.741Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M367.709 410.271L367.709 352.53L194.758 352.53L252.498 410.271L367.709 410.271Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M137.288 352.53L22.0775 352.53L137.288 467.741L137.288 352.53Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M-93.1334 352.53L-93.1334 237.32L22.0771 352.53L-93.1334 352.53Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M137.288 410.271L-93.133 410.271L-35.6632 467.741L137.288 467.741L137.288 410.271Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M79.5473 237.319L-93.133 237.319L-93.133 295.06L137.288 295.06L79.5473 237.319Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M-93.1335 410.271L-93.1335 352.53L22.0771 352.53L79.5469 410.271L-93.1335 410.271Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M137.288 352.53L137.288 295.061L-35.6632 295.061L22.0775 352.53L137.288 352.53Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M194.755 640.692L194.755 525.481L309.966 640.692L194.755 640.692Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M367.707 525.481L194.756 525.481L194.756 582.951L425.177 582.951L367.707 525.481Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M-35.6646 582.951L-35.6646 467.741L79.5459 582.951L-35.6646 582.951Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M137.287 467.741L-35.6642 467.741L-35.6642 525.481L194.757 525.481L137.287 467.741Z" stroke="#02007C" stroke-miterlimit="10"/>
+<path d="M194.757 582.951L194.757 525.481L22.0765 525.481L79.5463 582.951L194.757 582.951Z" stroke="#02007C" stroke-miterlimit="10"/>
+</g>
+</g>
+<mask id="mask2" mask-type="alpha" maskUnits="userSpaceOnUse" x="-82" y="35" width="1929" height="492">
+<rect x="-82" y="35" width="1929" height="491.706" rx="3.54596" fill="url(#paint2_linear)"/>
+</mask>
+<g mask="url(#mask2)">
+<rect x="132.355" y="253.179" width="51.963" height="51.963" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="103.487" y="290.707" width="51.963" height="51.963" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="239.17" y="175.234" width="25.9815" height="25.9815" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="787.941" y="91.7354" width="25.9815" height="25.9815" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="602.623" y="278.944" width="46.1893" height="46.1893" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="395.131" y="286.612" width="25.9815" height="25.9815" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="109.261" y="175.234" width="8.6605" height="8.6605" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="24.1387" y="324.854" width="25.9815" height="25.9815" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="324.209" y="436.121" width="25.9815" height="25.9815" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="259.376" y="426.389" width="8.6605" height="8.6605" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1662.91" y="289.92" width="47.822" height="47.822" transform="rotate(180 1662.91 289.92)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1689.47" y="255.383" width="47.822" height="47.822" transform="rotate(180 1689.47 255.383)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1564.6" y="361.653" width="23.911" height="23.911" transform="rotate(180 1564.6 361.653)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1073.07" y="476.571" width="23.911" height="23.911" transform="rotate(180 1073.07 476.571)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1331.67" y="357.921" width="42.5085" height="42.5085" transform="rotate(180 1331.67 357.921)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1220.29" y="133.825" width="23.911" height="23.911" transform="rotate(180 1220.29 133.825)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1684.16" y="361.653" width="7.97021" height="7.97034" transform="rotate(180 1684.16 361.653)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1762.5" y="223.956" width="23.911" height="23.911" transform="rotate(180 1762.5 223.956)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1486.34" y="121.556" width="23.911" height="23.911" transform="rotate(180 1486.34 121.556)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect x="1546.01" y="130.514" width="7.97034" height="7.97034" transform="rotate(180 1546.01 130.514)" fill="#8AE3FF" fill-opacity="0.1"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear" x1="212.296" y1="358.466" x2="345.729" y2="-232.209" gradientUnits="userSpaceOnUse">
+<stop offset="1.15328e-07" stop-color="#181878"/>
+<stop offset="0.998" stop-color="#187FC4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="2012.3" y1="932.169" x2="2142" y2="349.392" gradientUnits="userSpaceOnUse">
+<stop offset="1.15328e-07" stop-color="#181878"/>
+<stop offset="0.998" stop-color="#187FC4"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="145.828" y1="469.083" x2="325.765" y2="-236.826" gradientUnits="userSpaceOnUse">
+<stop stop-color="#00007D"/>
+<stop offset="1" stop-color="#2C48FF"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/footer/footer-particle.svg b/src/assets/images/footer/footer-particle.svg
new file mode 100644
index 00000000..38ff001d
--- /dev/null
+++ b/src/assets/images/footer/footer-particle.svg
@@ -0,0 +1,11 @@
+<svg width="1560" height="860" viewBox="0 0 1560 860" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="108.437" height="108.437" transform="matrix(-1 0 0 1 1333.68 423.231)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="108.437" height="108.437" transform="matrix(-1 0 0 1 1393.92 501.547)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="54.2186" height="54.2186" transform="matrix(-1 0 0 1 1110.77 260.576)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="96.3886" height="96.3886" transform="matrix(-1 0 0 1 352.312 477)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="54.2186" height="54.2186" transform="matrix(-1 0 0 1 785.312 493)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="18.0728" height="18.0729" transform="matrix(-1 0 0 1 1381.87 260.576)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="54.2186" height="54.2186" transform="matrix(-1 0 0 1 1559.5 572.807)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="54.2186" height="54.2186" transform="matrix(-1 0 0 1 933.312 805)" fill="#8AE3FF" fill-opacity="0.1"/>
+<rect width="18.0729" height="18.0729" transform="matrix(-1 0 0 1 1068.61 784.689)" fill="#8AE3FF" fill-opacity="0.1"/>
+</svg>
diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue
index cdd6b8b4..d0c30180 100644
--- a/src/components/CallToAction.vue
+++ b/src/components/CallToAction.vue
@@ -1,19 +1,32 @@
 <template>
   <div class="v-content">
     <div class="container">
+
       <v-row align="center"
              justify="center">
         <v-col cols="11">
-          <h2>サーバーレスで<br class="d-block d-md-none">クラウドの価値を最大限に<span>Maximize the cloud value with serverless</span></h2>
+          <h2>オンライン無料相談</h2>
+          <h3>サーバーレスの悩み事、お気軽にご相談ください</h3>
         </v-col>
       </v-row>
-      <v-row align="center"
-             justify="center">
-        <v-col cols="10"
-               md="6">
-          <p class="p-cta__paragraph">Serverless Operationsはこれまでグローバルの第一線で培ってきたクラウド技術<small>（AWS − アマゾンウェブサービス）</small>の豊富な実績と知見を活かし、お客さまのサーバーレスに関するさまざまな課題を解決します。</p>
+      <v-row 
+        align="center"
+        justify="center"
+      >
+        <v-col
+          cols="10"
+          md="6"
+        >
+          <p class="p-cta__paragraph">
+            Serverless Operations の担当者がオンラインで皆さんのサーバーレスに関するご相談やお問い合わせに無料でお答えいたします。
+              <a href="https://calendly.com/slsops/office-hours">カレンダー
+                <small>(Calendly)</small>
+              </a>
+            からお好きな日程をブッキングしていたくだけで、お申込みいただけます。
+          </p>
         </v-col>
       </v-row>
+
       <v-row align="center"
              justify="center"
              justify-md="space-between"
@@ -22,12 +35,14 @@
                sm="10"
                md="6"
                >
-          <v-card flat
-                  to="/services/serverless-consulting/"
-                  :hover="false"
-                  height="158px"
-                  width="100%"
-                  class="d-flex justify-center align-center p-cta__consulting theme--dark">
+          <v-card 
+            flat
+            to="/services/serverless-consulting/"
+            :hover="false"
+            height="158px"
+            width="100%"
+            class="d-flex justify-center align-center p-cta__consulting theme--dark"
+          >
            
             <v-card-title class="flex-column justify-end justify-sm-center align-start p-cta__menu">
               <span class="p-cta__menu--top">Serverless</span>
@@ -94,6 +109,9 @@
       }
     }
   }
+  h3 {
+    text-align: center;
+  }
   .v-card__link:focus:before {
     opacity: 0;
   }
@@ -104,6 +122,13 @@
       font-size: 1rem;
       text-align: justify;
       line-height: 2;
+      a {
+        color: #fff;
+        text-decoration: none;
+        &:hover {
+          text-decoration: underline;
+        }
+      }
     }
 
     &__contact {
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 5bacd990..0f7f9404 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,19 +1,6 @@
 <template>
   <footer class="v-footer footer v-sheet v-sheet--tile theme--dark">
 
-    
-    <!-- <v-container>
-      <v-col cols="12" class="c-footer-breadcrumb">
-        <nuxt-link to="/" class="c-footer-breadcrumb__home">
-          <span>Serverless Operations - Home</span>
-        </nuxt-link>
-        <span class="c-footer-breadcrumb__separater">/</span>
-        <span class="c-footer-breadcrumb__category">カテゴリー名</span>
-        <span class="c-footer-breadcrumb__separater">/</span>
-        <span class="c-footer-breadcrumb__current">現在のページ</span>
-      </v-col>
-    </v-container> -->
-
     <v-container>
       <v-row>
         <v-col cols="12"
@@ -46,31 +33,7 @@
             </li>
           </ul>
         </v-col>
-
-        <!-- <v-col cols="12" sm="6" md="3">
-          <div class="c-footer-menu__title">Works</div>
-          <div class="c-footer-menu__subtitle">導入事例</div>
-          <ul class="c-footer-list">
-            <li class="c-footer-list__item">事例一覧</li>
-            <li class="c-footer-list__item">Development</li>
-            <li class="c-footer-list__item">Auth0</li>
-          </ul>
-        </v-col> -->
-
-        <!-- <v-col cols="12" sm="6" md="3">
-          <div class="c-footer-menu__title">News</div>
-          <div class="c-footer-menu__subtitle">お知らせ</div>
-          <ul class="c-footer-list">
-            <li class="c-footer-list__item">お知らせの記事タイトルがはいります。ダミーテキストダミーテキスト</li>
-            <li
-              class="c-footer-list__item"
-            >お知らせの記事タイトルがはいります。ダミーテキストダミーテキストお知らせの記事タイトルがはいります。ダミーテキストダミーテキスト</li>
-            <li class="c-footer-list__item">お知らせの記事タイトルがはいります。ダミーテキストダミーテキスト</li>
-            <li class="c-footer-list__item">お知らせの記事タイトルがはいります。ダミーテキストダミーテキスト</li>
-          </ul>
-        </v-col> -->
        
-
         <v-col cols="12" sm="6" md="3">
           <g-link to="/company/" class="c-footer-list__link">
             <div class="c-footer-menu__title">Company</div>
@@ -173,8 +136,6 @@ export default {
   },
 }
 
-
-
 if (process.client) {
   (function(){
   var w=window,d=document;
@@ -204,7 +165,8 @@ if (process.client) {
 }
 
 .footer {
-  background: $secondary;
+  background-image: url(../assets/images/footer/footer-particle.svg),
+                    linear-gradient(50.89deg, #00007D 8%, #2C48FF 148.73%);
 }
 
 // パンくず

From 356d1fa20a964832ff7d646b05482febbf159fe1 Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Mon, 9 Nov 2020 19:35:17 +0900
Subject: [PATCH 4/8] =?UTF-8?q?CTA=20PC=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E3=81=BB=E3=81=BC=E3=81=BB=E3=81=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CallToAction.vue | 340 ++++++++++++--------------------
 1 file changed, 123 insertions(+), 217 deletions(-)

diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue
index d0c30180..07e5d304 100644
--- a/src/components/CallToAction.vue
+++ b/src/components/CallToAction.vue
@@ -1,93 +1,78 @@
 <template>
-  <div class="v-content">
-    <div class="container">
+  <div class="">
 
-      <v-row align="center"
-             justify="center">
-        <v-col cols="11">
-          <h2>オンライン無料相談</h2>
-          <h3>サーバーレスの悩み事、お気軽にご相談ください</h3>
-        </v-col>
-      </v-row>
-      <v-row 
-        align="center"
-        justify="center"
-      >
-        <v-col
-          cols="10"
-          md="6"
-        >
-          <p class="p-cta__paragraph">
-            Serverless Operations の担当者がオンラインで皆さんのサーバーレスに関するご相談やお問い合わせに無料でお答えいたします。
-              <a href="https://calendly.com/slsops/office-hours">カレンダー
-                <small>(Calendly)</small>
-              </a>
-            からお好きな日程をブッキングしていたくだけで、お申込みいただけます。
-          </p>
-        </v-col>
-      </v-row>
+    <div class="v-content">
 
-      <v-row align="center"
-             justify="center"
-             justify-md="space-between"
-             class="mt-12 mb-12">
-        <v-col cols="12"
-               sm="10"
-               md="6"
-               >
-          <v-card 
-            flat
-            to="/services/serverless-consulting/"
-            :hover="false"
-            height="158px"
-            width="100%"
-            class="d-flex justify-center align-center p-cta__consulting theme--dark"
-          >
-           
-            <v-card-title class="flex-column justify-end justify-sm-center align-start p-cta__menu">
-              <span class="p-cta__menu--top">Serverless</span>
-              Consulting
-              <span class="p-cta__menu--bottom">サーバーレスコンサルテイング</span>
-            </v-card-title>
-          </v-card>
+      <div class="container">
 
-          <v-card flat
-                  to="/services/serverless-development"
-                  height="158px"
-                  width="100%"
-                  class="d-flex justify-center align-center p-cta__development theme--dark">
+        <v-row align="center" justify="center">
+          <v-col cols="11">
+            <h2>オンライン無料相談</h2>
+            <h3>サーバーレスの悩み事、お気軽にご相談ください</h3>
+          </v-col>
+        </v-row>
+
+        <v-row align="center" justify="center">
+          <v-col cols="10" md="6">
+            <p class="cta-header-text">
+              Serverless Operations の担当者がオンラインで皆さんのサーバーレスに関するご相談やお問い合わせに無料でお答えいたします。
+                <a href="https://calendly.com/slsops/office-hours">カレンダー
+                  <small>(Calendly)</small>
+                </a>
+              からお好きな日程をブッキングしていたくだけで、お申込みいただけます。
+            </p>
+          </v-col>
+        </v-row>
+
+        <v-row align="center" justify="center" justify-md="space-between" class="cta-task-container">
+          <v-col class="cta-task-list-container" cols="12" sm="8" md="9">
+            <h3>こんなお悩みや課題を抱えていませんか？</h3>
+            <div class="cta-task-list">
+              <ul>
+                <li>サーバーレスでやりたいことがあるが<br>何から始めていいかわからない</li>
+                <li>サーバーレスのアーキテクチャレビューをしてほしい</li>
+                <li>サーバーレスで進めようとしているが<br>適しているのかわからない</li>
+              </ul>
+              <ul>
+                <li>クラウド技術習得やこれからのキャリアに迷っている</li>
+                <li>社内でサーバーレスを広めたいがブロッカーがある</li>
+                <li>新卒エンジニアだがサーバーレスの勉強を<br>どうしたらいいのかわからない</li>
+              </ul>
+            </div>
             
-            <v-card-title class="flex-column justify-end justify-sm-center align-start p-cta__menu">
-              <span class="p-cta__menu--top">Serverless</span>
-              Development
-              <span class="p-cta__menu--bottom">サーバーレスディベロップメント</span>
-            </v-card-title>
-          </v-card>
+          </v-col>
+
+          <v-col class="cta-task-overview" align="start" justify="center" cols="12" sm="4" md="3">
+            <ul>
+              <li>対象：法人・個人</li>
+              <li>平日 10:00 – 19:00</li>
+              <li>1社 or 1人 / 60分</li>
+              <li>カレンダーから簡単予約</li>
+            </ul>
+          </v-col>
 
-        </v-col>
-        <v-col cols="12"
-               sm="8"
-               md="5">
-          <v-card color="#FFFFFF"
-                  class="d-flex justify-center align-center p-cta__contact"
-                  to="/contact">
-            <h3 class="d-flex justify-center align-center">Contact<span>お問い合わせ</span></h3>
-          </v-card>
-        </v-col>
-      </v-row>
+        </v-row>
+
+      </div>
 
     </div>
+
+    <a class="cta-button" href="https://calendly.com/slsops/office-hours">
+      オンライン無料相談をカレンダーから予約する
+    </a>
+
   </div>
+
 </template>
 
 <style lang="scss" scoped>
 .v-content {
-  background: url('../assets/images/cta-logo.svg') no-repeat,
-    linear-gradient(206.56deg, $tertiary -0.06%, $secondary 100.25%);
+  background-image: url('../assets/images/footer/footer-cta-particle.svg');
   background-repeat: no-repeat, no-repeat;
-  background-position: top 88px center, center;
-  background-size: 100%;
-  // margin-top: -72px;
+  background-position: center, center;
+  background-size: cover;
+  background-color: $tertiary;
+
   h2 {
     margin-top: 120px;
     font-size: 1.5rem;
@@ -116,154 +101,75 @@
     opacity: 0;
   }
 
-  .p-cta {
-    &__paragraph {
-      font-family: $font-jp-normal;
-      font-size: 1rem;
-      text-align: justify;
-      line-height: 2;
-      a {
-        color: #fff;
-        text-decoration: none;
-        &:hover {
-          text-decoration: underline;
-        }
+  .cta-header-text{
+    font-family: $font-jp-normal;
+    font-size: 1rem;
+    text-align: justify;
+    line-height: 2;
+    a {
+      color: #fff;
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
       }
     }
+  } // p-cta
 
-    &__contact {
-      height: 48px;
-      @include media-breakpoint-up(md) {
-        height: 100px;
-      }
-
+  .cta-task-container {
+    background-color: #fff;
+    border-radius: 3px;
+    color: $primary;
+    box-shadow: 8px 24px 50px rgba($primary, 0.4);
+    position: relative;
+    z-index: 1;
+    .cta-task-list-container {
+      font-size: 14px;
+      padding: 0 48px;
       h3 {
-        color: $tertiary;
-        font-size: 2rem;
-        padding: 0;
-        line-height: 1;
-        font-family: $font-en-normal;
-        font-weight: normal;
-        @include media-breakpoint-up(md) {
-          font-size: 3.5rem;
-        }
-        span {
-          display: inline-block;
-          font-size: 0.875rem;
-          margin-left: 28px;
-          @include media-breakpoint-up(md) {
-            font-size: 1rem;
-          }
-        } //span
-      } // h3
-    }
-    // コンサルティング、ディベロップメントのメニュー
-    &__consulting,
-    &__development {
-      background-color: initial;
-      background-repeat: no-repeat;
-      background-position: right 20px bottom 54px;
-      background-size: auto;
-      @include media-breakpoint-up(sm) {
-        background-position: right 20px center;
+        font-family: $font-jp-bold;
+        padding-bottom: 16px;
+        margin-bottom: 24px;
+        border-bottom: 1px solid $light-gray-1;
       }
-      @include media-breakpoint-up(md) {
-        background-size: auto;
+      .cta-task-list {
+        display: flex;
       }
     }
-    // コンサルティング
-    &__consulting {
-      background-image: url('../assets/images/cta-arrow.svg');
-      margin-bottom: 16px;
-      position: relative;
-      @include media-breakpoint-up(md) {
-        margin-bottom: 64px;
-        position: relative;
-      }
-
-      // コンサルティングの背景のアイコン
-      &:after {
-        pointer-events: none;
-        display: block;
-        width: 100%;
-        height: 100%;
-        content: ' ';
-        position: absolute;
-        background: url('../assets/images/service-icon-consulting.svg');
-        background-repeat: no-repeat;
-        background-position: left top 8px;
-        background-size: auto 80%;
-        opacity: 0.6;
-        z-index: 1;
-        @include media-breakpoint-up(md) {
-          background-size: auto 90%;
-        }
-      } //&:after
-    } // &__consulting
-
-    // ディベロップメント
-    &__development {
-      background-image: url('../assets/images/cta-arrow.svg');
-      margin-bottom: 32px;
-      position: relative;
-      @include media-breakpoint-up(md) {
-        margin-bottom: 0;
-      }
-      // 背景のアイコン
-      &:after {
-        pointer-events: none;
-        display: block;
-        width: 100%;
-        height: 100%;
-        content: ' ';
-        position: absolute;
-        background: url('../assets/images/service-icon-development.svg');
-        background-repeat: no-repeat;
-        background-position: left top 8px;
-        background-size: auto 80%;
-        opacity: 0.7;
-        z-index: 1;
-        @include media-breakpoint-up(md) {
-          background-size: auto 90%;
-        }
-      } //&:after
-    } // &__development
-
-    // CTAのリンクメニュー名部分
-    &__menu {
-      padding-left: 0;
-      font-size: 2rem;
-      font-family: $font-en-normal;
-      font-weight: normal;
-      height: 100%;
-
-      @include media-breakpoint-up(md) {
-        padding-left: 64px;
-        font-size: 3rem;
-      }
-
-      // メニュー上のServerless
-      &--top {
-        display: block;
-        font-size: 0.75rem;
-        margin: 8px 0 14px;
-        font-family: $font-jp-normal;
-        line-height: 1;
-        @include media-breakpoint-up(lg) {
-          font-size: 1.5rem;
-        }
-      }
-
-      // メニュー下のサービス名(日本語)
-      &--bottom {
-        display: block;
-        font-size: 0.875rem;
-        margin-top: 12px;
-        @include media-breakpoint-up(lg) {
-          font-size: 1rem;
-        }
-      }
+    .cta-task-overview {
+      background-color: $primary;
+      color: #fff;
+      min-height: 250px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
-  } // p-cta
+  }
+}
+.cta-button {
+  margin-top: -80px;
+  display: block;
+  text-align: center;
+  background: $secondary;
+  color: #fff;
+  text-decoration: none;
+  position: relative;
+  z-index: 0;
+  min-height: 360px;
+  font-size: 24px;
+  font-family: $font-jp-bold;
+  line-height: 360px;
+  &::after {
+    content: 'Office Hours';
+    position: absolute;
+    display: block;
+    z-index: 0;
+    left: 0;
+    top: 24px;
+    right: 0;
+    bottom: 0;
+    opacity: 0.1;
+    font-family: $font-en-light;
+    font-size: 256px;
+  }
 }
 </style>
\ No newline at end of file

From 1b42a88c991d801ba66c509e1aba48dd2096f48c Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Tue, 10 Nov 2020 18:12:42 +0900
Subject: [PATCH 5/8] =?UTF-8?q?CTA=20PC=E3=81=BB=E3=81=BC=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/cta/cta-icon-calendar.svg   |  8 ++
 src/assets/images/cta/cta-icon-check.svg      |  4 +
 src/assets/images/cta/cta-icon-hour.svg       |  6 ++
 src/assets/images/cta/cta-icon-min.svg        |  6 ++
 src/assets/images/cta/cta-icon-target.svg     |  6 ++
 .../cta-particle.svg}                         |  0
 src/components/CallToAction.vue               | 76 ++++++++++++++++---
 7 files changed, 94 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/images/cta/cta-icon-calendar.svg
 create mode 100644 src/assets/images/cta/cta-icon-check.svg
 create mode 100644 src/assets/images/cta/cta-icon-hour.svg
 create mode 100644 src/assets/images/cta/cta-icon-min.svg
 create mode 100644 src/assets/images/cta/cta-icon-target.svg
 rename src/assets/images/{footer/footer-cta-particle.svg => cta/cta-particle.svg} (100%)

diff --git a/src/assets/images/cta/cta-icon-calendar.svg b/src/assets/images/cta/cta-icon-calendar.svg
new file mode 100644
index 00000000..719518a1
--- /dev/null
+++ b/src/assets/images/cta/cta-icon-calendar.svg
@@ -0,0 +1,8 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M15.2222 2.95947H2.77778C1.79594 2.95947 1 3.75541 1 4.73725V17.1817C1 18.1635 1.79594 18.9595 2.77778 18.9595H15.2222C16.2041 18.9595 17 18.1635 17 17.1817V4.73725C17 3.75541 16.2041 2.95947 15.2222 2.95947Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5557 1.18164V4.7372" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.44434 1.18164V4.7372" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1 8.29297H17" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/images/cta/cta-icon-check.svg b/src/assets/images/cta/cta-icon-check.svg
new file mode 100644
index 00000000..a25bca99
--- /dev/null
+++ b/src/assets/images/cta/cta-icon-check.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17 8.26858V9.00458C16.999 10.7297 16.4404 12.4083 15.4075 13.79C14.3745 15.1718 12.9226 16.1826 11.2683 16.6717C9.61394 17.1608 7.8458 17.1021 6.22757 16.5042C4.60934 15.9064 3.22772 14.8015 2.28877 13.3542C1.34981 11.907 0.903833 10.195 1.01734 8.47363C1.13085 6.75223 1.79777 5.11364 2.91862 3.80224C4.03948 2.49083 5.55423 1.57688 7.23695 1.1967C8.91967 0.816507 10.6802 0.990449 12.256 1.69258" stroke="#2C48FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9996 2.60449L8.99961 10.6125L6.59961 8.21249" stroke="#2C48FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/assets/images/cta/cta-icon-hour.svg b/src/assets/images/cta/cta-icon-hour.svg
new file mode 100644
index 00000000..e5fb3ed5
--- /dev/null
+++ b/src/assets/images/cta/cta-icon-hour.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M9 17C13.4183 17 17 13.4183 17 9C17 4.58172 13.4183 1 9 1C4.58172 1 1 4.58172 1 9C1 13.4183 4.58172 17 9 17Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 4.2002V9.0002L12.2 10.6002" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/images/cta/cta-icon-min.svg b/src/assets/images/cta/cta-icon-min.svg
new file mode 100644
index 00000000..a10bf4b4
--- /dev/null
+++ b/src/assets/images/cta/cta-icon-min.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="13" viewBox="0 0 18 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<path d="M17.0001 2.45459L11.9092 6.09095L17.0001 9.72732V2.45459Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.4545 1H2.45455C1.65122 1 1 1.65122 1 2.45455V9.72727C1 10.5306 1.65122 11.1818 2.45455 11.1818H10.4545C11.2579 11.1818 11.9091 10.5306 11.9091 9.72727V2.45455C11.9091 1.65122 11.2579 1 10.4545 1Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/images/cta/cta-icon-target.svg b/src/assets/images/cta/cta-icon-target.svg
new file mode 100644
index 00000000..d21f9ea9
--- /dev/null
+++ b/src/assets/images/cta/cta-icon-target.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.7">
+<circle cx="8.65019" cy="5.95" r="4.95" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 9.97559C2.84633 11.5293 1 14.9856 1 19H16.3C16.3 14.9856 14.4537 11.5293 11.8 9.97559" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/src/assets/images/footer/footer-cta-particle.svg b/src/assets/images/cta/cta-particle.svg
similarity index 100%
rename from src/assets/images/footer/footer-cta-particle.svg
rename to src/assets/images/cta/cta-particle.svg
diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue
index 07e5d304..de0680c0 100644
--- a/src/components/CallToAction.vue
+++ b/src/components/CallToAction.vue
@@ -44,10 +44,10 @@
 
           <v-col class="cta-task-overview" align="start" justify="center" cols="12" sm="4" md="3">
             <ul>
-              <li>対象：法人・個人</li>
-              <li>平日 10:00 – 19:00</li>
-              <li>1社 or 1人 / 60分</li>
-              <li>カレンダーから簡単予約</li>
+              <li class="target">対象：法人・個人</li>
+              <li class="hour">平日 10:00 – 19:00</li>
+              <li class="min">1社 or 1人 / 60分</li>
+              <li class="calendar">カレンダーから簡単予約</li>
             </ul>
           </v-col>
 
@@ -67,7 +67,7 @@
 
 <style lang="scss" scoped>
 .v-content {
-  background-image: url('../assets/images/footer/footer-cta-particle.svg');
+  background-image: url('../assets/images/cta/cta-particle.svg');
   background-repeat: no-repeat, no-repeat;
   background-position: center, center;
   background-size: cover;
@@ -77,8 +77,9 @@
     margin-top: 120px;
     font-size: 1.5rem;
     text-align: center;
-    font-family: $font-jp-normal;
-    font-weight: normal;
+    font-family: $font-jp-bold;
+    margin-bottom: 40px;
+
     @include media-breakpoint-up(md) {
       font-size: 2.5rem;
     }
@@ -96,6 +97,7 @@
   }
   h3 {
     text-align: center;
+    font-size: 24px;
   }
   .v-card__link:focus:before {
     opacity: 0;
@@ -106,6 +108,8 @@
     font-size: 1rem;
     text-align: justify;
     line-height: 2;
+    padding: 0;
+    margin-bottom: 40px;
     a {
       color: #fff;
       text-decoration: none;
@@ -124,24 +128,61 @@
     z-index: 1;
     .cta-task-list-container {
       font-size: 14px;
-      padding: 0 48px;
+      padding: 0 48px 16px 48px;
+
+      // こんなお悩み
       h3 {
         font-family: $font-jp-bold;
+        font-size: 18px;
         padding-bottom: 16px;
-        margin-bottom: 24px;
+        margin: 32px 0 24px 0;
         border-bottom: 1px solid $light-gray-1;
       }
       .cta-task-list {
         display: flex;
+        ul {
+          margin-right: 4px;
+          li {
+            list-style: none;
+            margin-bottom: 16px;
+            background-image: url("../assets/images/cta/cta-icon-check.svg");
+            padding-left: 32px;
+            background-position:0px 1px;
+          }
+        }
       }
     }
     .cta-task-overview {
       background-color: $primary;
       color: #fff;
-      min-height: 250px;
+      min-height: 270px;
       display: flex;
       justify-content: center;
       align-items: center;
+      ul {
+        li {
+          margin-bottom: 14px;
+          font-size: 14px;
+          list-style: none;
+          &.target {
+            background-image: url("../assets/images/cta/cta-icon-target.svg");
+            padding-left: 32px;
+          }
+          &.hour {
+            background-image: url("../assets/images/cta/cta-icon-hour.svg");
+            padding-left: 32px;
+          }
+          &.min {
+            background-image: url("../assets/images/cta/cta-icon-min.svg");
+            padding-left: 32px;
+            background-position: 0px 3px;
+          }
+          &.calendar {
+            background-image: url("../assets/images/cta/cta-icon-calendar.svg");
+            padding-left: 32px;
+          }
+        }
+      }
     }
   }
 }
@@ -158,7 +199,7 @@
   font-size: 24px;
   font-family: $font-jp-bold;
   line-height: 360px;
-  &::after {
+  &::before {
     content: 'Office Hours';
     position: absolute;
     display: block;
@@ -169,7 +210,18 @@
     bottom: 0;
     opacity: 0.1;
     font-family: $font-en-light;
-    font-size: 256px;
+    font-size: 14vw;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    z-index: 0;
+    width: 100px;
+    height: 1px;
+    background: #fff;
+    right: 28%;
+    bottom: 50%;
   }
 }
 </style>
\ No newline at end of file

From faa6e308d53a66a99d601fbd1fcbfea128b30f90 Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Tue, 10 Nov 2020 18:50:43 +0900
Subject: [PATCH 6/8] =?UTF-8?q?=E8=AA=B2=E9=A1=8C=E3=83=AA=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=82=B9=E3=83=9E=E3=83=9B=E3=81=BE=E3=81=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CallToAction.vue | 79 ++++++++++++++++++++++++++++-----
 1 file changed, 67 insertions(+), 12 deletions(-)

diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue
index de0680c0..ae7346f4 100644
--- a/src/components/CallToAction.vue
+++ b/src/components/CallToAction.vue
@@ -6,14 +6,14 @@
       <div class="container">
 
         <v-row align="center" justify="center">
-          <v-col cols="11">
+          <v-col cols="12">
             <h2>オンライン無料相談</h2>
             <h3>サーバーレスの悩み事、お気軽にご相談ください</h3>
           </v-col>
         </v-row>
 
         <v-row align="center" justify="center">
-          <v-col cols="10" md="6">
+          <v-col cols="12" md="6">
             <p class="cta-header-text">
               Serverless Operations の担当者がオンラインで皆さんのサーバーレスに関するご相談やお問い合わせに無料でお答えいたします。
                 <a href="https://calendly.com/slsops/office-hours">カレンダー
@@ -25,8 +25,8 @@
         </v-row>
 
         <v-row align="center" justify="center" justify-md="space-between" class="cta-task-container">
-          <v-col class="cta-task-list-container" cols="12" sm="8" md="9">
-            <h3>こんなお悩みや課題を抱えていませんか？</h3>
+          <v-col class="cta-task-list-container" cols="12" sm="7" md="9">
+            <h3>こんなお悩みや課題を<br class="d-md-none" />抱えていませんか？</h3>
             <div class="cta-task-list">
               <ul>
                 <li>サーバーレスでやりたいことがあるが<br>何から始めていいかわからない</li>
@@ -42,7 +42,7 @@
             
           </v-col>
 
-          <v-col class="cta-task-overview" align="start" justify="center" cols="12" sm="4" md="3">
+          <v-col class="cta-task-overview" align="start" justify="center" cols="12" sm="5" md="3">
             <ul>
               <li class="target">対象：法人・個人</li>
               <li class="hour">平日 10:00 – 19:00</li>
@@ -58,7 +58,7 @@
     </div>
 
     <a class="cta-button" href="https://calendly.com/slsops/office-hours">
-      オンライン無料相談をカレンダーから予約する
+      オンライン無料相談を<br class="d-md-none" />カレンダーから予約する
     </a>
 
   </div>
@@ -73,15 +73,28 @@
   background-size: cover;
   background-color: $tertiary;
 
+  @include media-breakpoint-down(sm) {
+    padding-bottom: 64px;
+    background-image: url('../assets/images/cta/cta-particle.svg');
+  }
+
+  .container {
+    @include media-breakpoint-down(sm) {
+      width: 90vw;
+    }
+  }
+  
   h2 {
     margin-top: 120px;
-    font-size: 1.5rem;
+    font-size: 48px;
     text-align: center;
     font-family: $font-jp-bold;
     margin-bottom: 40px;
 
-    @include media-breakpoint-up(md) {
-      font-size: 2.5rem;
+    @include media-breakpoint-down(sm) {
+      margin-top: 64px;
+      margin-bottom: 16px;
+      font-size: 24px;
     }
     span {
       display: block;
@@ -90,7 +103,7 @@
       opacity: 0.5;
       font-weight: normal;
       font-family: $font-en-normal;
-      @include media-breakpoint-up(md) {
+      @include media-breakpoint-up(sm) {
         font-size: 1.5rem;
       }
     }
@@ -98,6 +111,9 @@
   h3 {
     text-align: center;
     font-size: 24px;
+    @include media-breakpoint-down(sm) {
+      font-size: 14px;
+    }
   }
   .v-card__link:focus:before {
     opacity: 0;
@@ -110,6 +126,9 @@
     line-height: 2;
     padding: 0;
     margin-bottom: 40px;
+    @include media-breakpoint-down(sm) {
+      font-size: 14px;
+    }
     a {
       color: #fff;
       text-decoration: none;
@@ -129,6 +148,9 @@
     .cta-task-list-container {
       font-size: 14px;
       padding: 0 48px 16px 48px;
+      @include media-breakpoint-down(sm) {
+        padding: 0 24px 24px 24px;
+      }
 
       // こんなお悩み
       h3 {
@@ -140,14 +162,27 @@
       }
       .cta-task-list {
         display: flex;
+        @include media-breakpoint-down(sm) {
+          flex-direction: column;
+        }
         ul {
           margin-right: 4px;
+          @include media-breakpoint-down(sm) {
+            padding-left: 0;
+            margin-right: 0;
+          }
           li {
             list-style: none;
             margin-bottom: 16px;
             background-image: url("../assets/images/cta/cta-icon-check.svg");
             padding-left: 32px;
             background-position:0px 1px;
+            @include media-breakpoint-down(sm) {
+              margin-bottom: 8px;
+              br {
+                display: none;
+              }
+            }
           }
         }
       }
@@ -155,15 +190,25 @@
     .cta-task-overview {
       background-color: $primary;
       color: #fff;
-      min-height: 270px;
+      min-height: 320px;
       display: flex;
       justify-content: center;
       align-items: center;
+      @include media-breakpoint-down(sm) {
+        min-height: 460px;
+      }
+      @include media-breakpoint-down(xs) {
+        min-height: 200px;
+      }
       ul {
         li {
           margin-bottom: 14px;
           font-size: 14px;
           list-style: none;
+          @include media-breakpoint-down(sm) {
+            margin-bottom: 8px;
+            font-size: 14px;
+          }
           &.target {
             background-image: url("../assets/images/cta/cta-icon-target.svg");
             padding-left: 32px;
@@ -199,6 +244,13 @@
   font-size: 24px;
   font-family: $font-jp-bold;
   line-height: 360px;
+  @include media-breakpoint-down(sm) {
+    margin-top: 0;
+    min-height: 176px;
+    line-height: 1.2;
+    font-size: 18px;
+    padding-top: 18%;
+  }
   &::before {
     content: 'Office Hours';
     position: absolute;
@@ -210,7 +262,10 @@
     bottom: 0;
     opacity: 0.1;
     font-family: $font-en-light;
-    font-size: 14vw;
+    font-size: 15vw;
+    @include media-breakpoint-down(sm) {
+      top: 30%;
+    }
   }
   &::after {
     content: '';

From 4852da0d87842af5bb0bff5645b06d885c73ff29 Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Wed, 11 Nov 2020 14:57:56 +0900
Subject: [PATCH 7/8] =?UTF-8?q?CTA=20SP=E3=81=BE=E3=81=A7=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CallToAction.vue | 71 ++++++++++++++++++++++++++++++---
 1 file changed, 66 insertions(+), 5 deletions(-)

diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue
index ae7346f4..aa36e30a 100644
--- a/src/components/CallToAction.vue
+++ b/src/components/CallToAction.vue
@@ -47,7 +47,11 @@
               <li class="target">対象：法人・個人</li>
               <li class="hour">平日 10:00 – 19:00</li>
               <li class="min">1社 or 1人 / 60分</li>
-              <li class="calendar">カレンダーから簡単予約</li>
+              <li class="calendar">
+                <a href="https://calendly.com/slsops/office-hours"> 
+                  カレンダーから簡単予約
+                </a>
+              </li>
             </ul>
           </v-col>
 
@@ -73,6 +77,10 @@
   background-size: cover;
   background-color: $tertiary;
 
+  @include media-breakpoint-down(md) {
+    padding-bottom: 64px;
+  }
+
   @include media-breakpoint-down(sm) {
     padding-bottom: 64px;
     background-image: url('../assets/images/cta/cta-particle.svg');
@@ -159,6 +167,7 @@
         padding-bottom: 16px;
         margin: 32px 0 24px 0;
         border-bottom: 1px solid $light-gray-1;
+        color: $secondary;
       }
       .cta-task-list {
         display: flex;
@@ -177,6 +186,8 @@
             background-image: url("../assets/images/cta/cta-icon-check.svg");
             padding-left: 32px;
             background-position:0px 1px;
+            font-family: $font-jp-bold;
+            color: $secondary;
             @include media-breakpoint-down(sm) {
               margin-bottom: 8px;
               br {
@@ -195,12 +206,13 @@
       justify-content: center;
       align-items: center;
       @include media-breakpoint-down(sm) {
-        min-height: 460px;
+        min-height: 480px;
       }
       @include media-breakpoint-down(xs) {
         min-height: 200px;
       }
       ul {
+        padding: 0;
         li {
           margin-bottom: 14px;
           font-size: 14px;
@@ -225,6 +237,15 @@
           &.calendar {
             background-image: url("../assets/images/cta/cta-icon-calendar.svg");
             padding-left: 32px;
+            a {
+              color: #fff;
+              text-decoration: none;
+              transition: all 2s cubic-bezier(0.76, 0, 0.3, 1);
+              &:hover {
+                opacity: 0.9;
+                text-decoration: underline;
+              }
+            }
           }
         }
       }
@@ -244,12 +265,23 @@
   font-size: 24px;
   font-family: $font-jp-bold;
   line-height: 360px;
+  transition: all 1s cubic-bezier(0.76, 0, 0.3, 1);
+  &:hover {
+    opacity: 0.9;
+  }
+  @include media-breakpoint-down(md) {
+    margin-top: -120px;
+    min-height: 240px;
+    line-height: 1.2;
+    font-size: 18px;
+    padding-top: 110px;
+  }
   @include media-breakpoint-down(sm) {
     margin-top: 0;
     min-height: 176px;
     line-height: 1.2;
     font-size: 18px;
-    padding-top: 18%;
+    padding-top: 68px;
   }
   &::before {
     content: 'Office Hours';
@@ -263,10 +295,20 @@
     opacity: 0.1;
     font-family: $font-en-light;
     font-size: 15vw;
+    transition: all 0.4s cubic-bezier(0.76, 0, 0.3, 1);
+    @include media-breakpoint-down(md) {
+      top: 10%;
+      font-size: 14vw;
+    }
     @include media-breakpoint-down(sm) {
-      top: 30%;
+      top: 20%;
+      font-size: 14vw;
     }
   }
+  &:hover::before {
+      opacity: 0.15;
+    }
+  // Border
   &::after {
     content: '';
     position: absolute;
@@ -275,8 +317,27 @@
     width: 100px;
     height: 1px;
     background: #fff;
-    right: 28%;
+    right: 20%;
     bottom: 50%;
+    transition: transform 0.4s cubic-bezier(0.76, 0, 0.3, 1);
+    transform: scaleX(0);
+    transform-origin: right center;
+    @include media-breakpoint-down(md) {
+      right: 16%;
+    }
+    @include media-breakpoint-down(sm) {
+      right: 20%;
+      width: 80px;
+    }
+    @include media-breakpoint-down(xs) {
+      right: 6%;
+      width: 32px;
+    }
+  }
+  &:hover::after {
+    transform: scaleX(1);
+    transform-origin: left center;
+    transition: transform 0.4s cubic-bezier(0.76, 0, 0.3, 1);
   }
 }
 </style>
\ No newline at end of file

From c1602fbc1bb00d72300b78edc62ede92687b67cd Mon Sep 17 00:00:00 2001
From: Fumito Abe <abe@necco.co>
Date: Wed, 11 Nov 2020 15:35:39 +0900
Subject: [PATCH 8/8] =?UTF-8?q?CTA=20=E3=83=9B=E3=83=90=E3=83=BC=E3=82=A2?=
 =?UTF-8?q?=E3=83=8B=E3=83=A1=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E8=AA=BF?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CallToAction.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/CallToAction.vue b/src/components/CallToAction.vue
index aa36e30a..69c56dc2 100644
--- a/src/components/CallToAction.vue
+++ b/src/components/CallToAction.vue
@@ -61,9 +61,12 @@
 
     </div>
 
-    <a class="cta-button" href="https://calendly.com/slsops/office-hours">
-      オンライン無料相談を<br class="d-md-none" />カレンダーから予約する
-    </a>
+    <div class="cta-button-container">
+      <a class="cta-button" href="https://calendly.com/slsops/office-hours">
+        オンライン無料相談を<br class="d-md-none" />カレンダーから予約する
+      </a>
+    </div>
+   
 
   </div>
 
@@ -252,6 +255,10 @@
     }
   }
 }
+// フルサイズのボタン
+.cta-button-container {
+  background-color: $tertiary;
+}
 .cta-button {
   margin-top: -80px;
   display: block;
@@ -265,8 +272,9 @@
   font-size: 24px;
   font-family: $font-jp-bold;
   line-height: 360px;
-  transition: all 1s cubic-bezier(0.76, 0, 0.3, 1);
+  transition: all 0.4s cubic-bezier(0.76, 0, 0.3, 1);
   &:hover {
+    // background-color: $tertiary;
     opacity: 0.9;
   }
   @include media-breakpoint-down(md) {