diff --git a/components/ConfirmedCasesCard.vue b/components/ConfirmedCasesCard.vue
new file mode 100644
index 00000000..90af2b37
--- /dev/null
+++ b/components/ConfirmedCasesCard.vue
@@ -0,0 +1,42 @@
+<template>
+  <data-view :title="title" :title-id="titleId" :date="date">
+    <template v-slot:button>
+      <p :class="$style.note">
+        {{ $t('（注）チャーター機帰国者、クルーズ船乗客等は含まれていない') }}
+      </p>
+    </template>
+    <slot />
+  </data-view>
+</template>
+
+<style lang="scss" module>
+.note {
+  margin-top: 10px;
+  margin-bottom: 0;
+  font-size: 12px;
+  color: $gray-3;
+}
+</style>
+
+<script lang="ts">
+import Vue from 'vue'
+import DataView from '@/components/DataView.vue'
+
+export default Vue.extend({
+  components: { DataView },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleId: {
+      type: String,
+      default: ''
+    },
+    date: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/components/ConfirmedCasesTable.vue b/components/ConfirmedCasesTable.vue
index 41aec911..f91e51a9 100644
--- a/components/ConfirmedCasesTable.vue
+++ b/components/ConfirmedCasesTable.vue
@@ -1,87 +1,74 @@
 <template>
-  <ul class="wrapper group">
-    <li class="item checked">
-      <div class="gutter">
-        <div class="box tall">
-          <!-- eslint-disable vue/no-v-html-->
-          <span v-html="$t('検査実施<br />人数')" />
-          <!-- eslint-enable vue/no-v-html-->
-          <span>
-            <b>{{ 検査実施人数 }}</b>
-            <span class="unit">{{ $t('人') }}</span>
-          </span>
-        </div>
-      </div>
-    </li>
-    <li class="item positive">
-      <div class="gutter">
-        <div class="box tall">
+  <ul :class="$style.container">
+    <li :class="[$style.box, $style.tall, $style.parent, $style.confirmed]">
+      <div :class="$style.pillar">
+        <div :class="$style.content">
           <span>
             {{ $t('陽性者数') }}
-            <br />{{ $t('(累積)') }}
+            <br />({{ $t('累計') }})
           </span>
           <span>
             <b>{{ 陽性物数 }}</b>
-            <span class="unit">{{ $t('人') }}</span>
+            <span :class="$style.unit">{{ $t('人') }}</span>
           </span>
         </div>
       </div>
-      <ul class="group">
-        <li class="item in-hospital">
-          <div class="gutter oneThird">
-            <div class="box">
+      <ul :class="$style.group">
+        <li :class="[$style.box, $style.parent, $style.hospitalized]">
+          <div :class="$style.pillar">
+            <div :class="$style.content">
               <span>{{ $t('入院中') }}</span>
               <span>
                 <b>{{ 入院中 }}</b>
-                <span class="unit">{{ $t('人') }}</span>
+                <span :class="$style.unit">{{ $t('人') }}</span>
               </span>
             </div>
           </div>
-          <ul class="group">
-            <li class="item mild">
-              <div class="gutter">
-                <div class="box short">
+          <ul :class="$style.group">
+            <li :class="[$style.box, $style.short, $style.minor]">
+              <div :class="$style.pillar">
+                <div :class="$style.content">
                   <!-- eslint-disable vue/no-v-html-->
                   <span v-html="$t('軽症・<br />中等症')" />
                   <!-- eslint-enable vue/no-v-html-->
                   <span>
                     <b>{{ 軽症中等症 }}</b>
-                    <span class="unit">{{ $t('人') }}</span>
+                    <span :class="$style.unit">{{ $t('人') }}</span>
                   </span>
                 </div>
               </div>
             </li>
-            <li class="item serious">
-              <div class="gutter">
-                <div class="box short">
+            <li :class="[$style.box, $style.short, $style.severe]">
+              <div :class="$style.pillar">
+                <div :class="$style.content">
                   <span>{{ $t('重症') }}</span>
                   <span>
                     <b>{{ 重症 }}</b>
-                    <span class="unit">{{ $t('人') }}</span>
+                    <span :class="$style.unit">{{ $t('人') }}</span>
                   </span>
                 </div>
               </div>
             </li>
           </ul>
         </li>
-        <li class="item deceased">
-          <div class="gutter">
-            <div class="box">
+        <li :class="[$style.box, $style.deceased]">
+          <div :class="$style.pillar">
+            <div :class="$style.content">
               <span>{{ $t('死亡') }}</span>
               <span>
                 <b>{{ 死亡 }}</b>
-                <span class="unit">{{ $t('人') }}</span>
+                <span :class="$style.unit">{{ $t('人') }}</span>
               </span>
             </div>
           </div>
         </li>
-        <li class="item recovered">
-          <div class="gutter">
-            <div class="box">
+        <li :class="[$style.box, $style.recovered]">
+          <div :class="$style.pillar">
+            <div :class="$style.content">
               <span>{{ $t('退院') }}</span>
               <span>
                 <b>{{ 退院 }}</b>
-                <span class="unit">{{ $t('人') }}</span>
+                <span :class="$style.unit">{{ $t('人') }}</span>
               </span>
             </div>
           </div>
@@ -147,220 +134,242 @@ export default Vue.extend({
           return 0
         }
       }
-    },
-    /** グラフ内容がわかる支援技術用テキストの中身を取得する **/
-    ariaLabel(
-      inspected: number,
-      positive: number,
-      hospitalized: number,
-      mild: number,
-      critically: number,
-      deceased: number,
-      discharged: number
-    ) {
-      const ariaLabel = `検査陽性者の状況: 検査実施人数は${inspected}人、うち累積の陽性者数は${positive}人です。入院中は${hospitalized}人で、うち軽症・中等症は${mild}人、また重症は${critically}人です。さらに死亡は${deceased}人、退院は${discharged}人です。`
-      return ariaLabel
     }
   }
 })
 </script>
 
-<style lang="scss" scoped>
-.wrapper {
-  width: calc(100% + 3px);
+<style lang="scss" module>
+$default-bdw: 3px;
+$default-boxh: 150px;
+$default-boxdiff: 35px;
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
   box-sizing: border-box;
+  color: $green-1;
+  line-height: 1.35;
   * {
-    box-sizing: inherit;
+    box-sizing: border-box;
   }
-}
-.group {
-  display: flex;
-  align-items: flex-end;
-  padding-left: 0;
-  flex: 0 0 auto;
-}
-.item {
-  display: block;
-  list-style-type: none;
-  flex: 0 0 auto;
-}
-.gutter {
-  width: 100%;
-  padding-right: 3px;
-  &.oneThird {
-    width: calc(100% / 3);
+  // override default styles
+  padding-left: 0 !important;
+  ul {
+    padding-left: 0;
   }
 }
 .box {
-  $box-height: 170px;
   display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  position: relative;
-  padding-bottom: 26px;
-  width: 100%;
-  height: $box-height;
-  border: 3px solid $green-1;
-  color: $green-1;
-  @include font-size(14);
-  text-align: center;
-  line-height: 1.2;
-  &.tall {
-    height: $box-height + 35px;
+  &.parent {
+    border-top: $default-bdw solid $green-1;
+    border-left: $default-bdw solid $green-1;
+    position: relative;
+    padding-top: $default-boxdiff - $default-bdw * 2;
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: -1px;
+      right: 0;
+      height: $default-boxdiff - $default-bdw - 2;
+      border-left: $default-bdw solid $green-1;
+    }
+    > .pillar {
+      margin-top: -($default-boxdiff - $default-bdw * 2);
+      border-top: none;
+      border-right: none;
+      border-left: none;
+    }
   }
-  &.short {
-    height: $box-height - 35px;
+  &.confirmed {
+    width: 100%;
+    > .pillar {
+      // [6列] 1/6
+      width: calc((100% + #{$default-bdw} * 2) / 6 - #{$default-bdw} * 3);
+    }
+    > .group {
+      // [6列] 5/6
+      width: calc((100% + #{$default-bdw} * 2) / 6 * 5 + #{$default-bdw});
+    }
   }
-  span:last-child {
-    margin-top: 0.2em;
+  &.hospitalized {
+    margin-left: $default-bdw;
+    // [5列] 3/5
+    width: calc(100% / 5 * 3 - #{$default-bdw});
+    > .pillar {
+      // [3列] 1/3
+      width: calc((100% + #{$default-bdw} * 2) / 3 - #{$default-bdw} * 3);
+    }
+    > .group {
+      // [3列] 2/3
+      width: calc((100% + #{$default-bdw} * 2) / 3 * 2 + #{$default-bdw});
+    }
   }
-  b {
-    font-weight: normal;
-    @include font-size(18);
+  &.minor,
+  &.severe {
+    margin-left: $default-bdw;
+    // [2列] 1/2
+    width: calc(100% / 2 - #{$default-bdw});
   }
-}
-.unit {
-  @include font-size(14);
-}
-
-// 検査
-.item.checked {
-  width: calc(100% / 7);
-  > .gutter > .box {
-    border-color: $gray-1;
-    color: $gray-1;
+  &.deceased,
+  &.recovered {
+    margin-left: $default-bdw;
+    // [5列] 1/5
+    width: calc(100% / 5 - #{$default-bdw});
   }
 }
-// 陽性
-.item.positive {
+.pillar {
   display: flex;
-  justify-content: space-between;
-  width: calc(100% / 7 * 6);
-  > .group {
-    width: calc(100% / 6 * 5);
-  }
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  text-align: center;
+  width: 100%;
+  border: $default-bdw solid $green-1;
 }
-// 入院
-.item.in-hospital {
+.group {
   display: flex;
-  justify-content: space-between;
-  width: calc(100% / 5 * 3);
-  > .group {
-    width: calc(100% / 3 * 2);
-  }
-}
-// 軽症・中等症
-.item.mild {
-  width: calc(100% / 2);
-}
-// 重症
-.item.serious {
-  width: calc(100% / 2);
-}
-// 死亡
-.item.deceased {
-  width: calc(100% / 5);
+  flex: 0 0 auto;
+  padding-left: 0;
+  padding-top: $default-bdw;
+  border-top: $default-bdw solid $green-1;
+  border-left: $default-bdw solid $green-1;
 }
-// 退院
-.item.recovered {
-  width: calc(100% / 5);
+.content {
+  min-height: $default-boxh;
+  padding: 10px 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  > span:not(:last-child) {
+    word-break: break-all;
+  }
+  > span {
+    display: block;
+    @include font-size(16);
+    &:last-child {
+      margin-top: 0.1em;
+    }
+  }
+  span b {
+    @include font-size(18);
+  }
+  span.unit {
+    @include font-size(16);
+  }
 }
 
-.item.positive > .gutter > .box::before,
-.item.in-hospital > .gutter > .box::before,
-.item.serious > .gutter > .box::before,
-.item.recovered > .gutter > .box::before {
-  content: '';
-  display: block;
-  border: 3px solid $green-1;
-  background-color: $white;
-  position: absolute;
-  height: 32px;
-}
-.item.positive > .gutter > .box::before,
-.item.in-hospital > .gutter > .box::before {
-  border-right: none;
-  top: -3px;
-  right: calc(-100% - 3px - 3px);
-  width: calc(100% + 3px + 3px);
-  border-left: none;
-  border-right: none;
-}
-.item.serious > .gutter > .box::before,
-.item.recovered > .gutter > .box::before {
-  top: calc(-35px - 3px);
-  right: -3px;
-  border-left: none;
-}
-.item.serious > .gutter > .box::before {
-  width: 200%;
-}
-.item.recovered > .gutter > .box::before {
-  width: 520%;
+@function px2vw($px, $vw: 0) {
+  @if $vw > 0 {
+    @return ceil($px / $vw * 100000vw) / 1000;
+  } @else {
+    @return $px * 1px;
+  }
 }
 
-@function px2vw($px, $vw) {
-  @return ceil($px / $vw * 100000vw) / 1000;
-}
-@mixin variation($vw, $bdw, $fz, $boxh, $boxdiff) {
-  .gutter {
-    padding-right: px2vw($bdw, $vw);
-  }
+@mixin override($vw, $bdw, $fz, $boxh, $boxdiff) {
   .box {
-    padding-bottom: px2vw($boxh * 0.17, $vw);
-    border-width: px2vw($bdw, $vw);
-    height: px2vw($boxh, $vw);
-    font-size: px2vw($fz, $vw);
-    &.tall {
-      height: px2vw($boxh + $boxdiff, $vw);
+    &.parent {
+      border-top-width: px2vw($bdw, $vw);
+      border-left-width: px2vw($bdw, $vw);
+      padding-top: px2vw($boxdiff, $vw) - px2vw($bdw, $vw) * 2;
+      &::after {
+        height: px2vw($boxdiff - $bdw, $vw);
+        border-left-width: px2vw($bdw, $vw);
+      }
+      > .pillar {
+        margin-top: px2vw((-($boxdiff - $bdw * 2)), $vw);
+      }
+    }
+    &.confirmed {
+      > .pillar {
+        width: calc(
+          (100% + #{px2vw($bdw, $vw)} * 2) / 6 - #{px2vw($bdw, $vw)} * 3
+        );
+      }
+      > .group {
+        width: calc(
+          (100% + #{px2vw($bdw, $vw)} * 2) / 6 * 5 + #{px2vw($bdw, $vw)}
+        );
+      }
+    }
+    &.hospitalized {
+      margin-left: px2vw($bdw, $vw);
+      width: calc(100% / 5 * 3 - #{px2vw($bdw, $vw)});
+      > .pillar {
+        width: calc(
+          (100% + #{px2vw($bdw, $vw)} * 2) / 3 - #{px2vw($bdw, $vw)} * 3
+        );
+      }
+      > .group {
+        width: calc(
+          (100% + #{px2vw($bdw, $vw)} * 2) / 3 * 2 + #{px2vw($bdw, $vw)}
+        );
+      }
     }
-    &.short {
-      height: px2vw($boxh - $boxdiff, $vw);
+    &.minor,
+    &.severe {
+      margin-left: px2vw($bdw, $vw);
+      width: calc(100% / 2 - #{px2vw($bdw, $vw)});
     }
-    b {
-      font-size: px2vw($fz + 2, $vw);
+    &.deceased,
+    &.recovered {
+      margin-left: px2vw($bdw, $vw);
+      width: calc(100% / 5 - #{px2vw($bdw, $vw)});
     }
   }
-  .unit {
-    font-size: px2vw($fz, $vw);
-  }
-  .item.positive > .gutter > .box::before,
-  .item.in-hospital > .gutter > .box::before,
-  .item.serious > .gutter > .box::before,
-  .item.recovered > .gutter > .box::before {
+  .pillar {
     border-width: px2vw($bdw, $vw);
-    height: px2vw($boxdiff - $bdw, $vw);
   }
-  .item.positive > .gutter > .box::before,
-  .item.in-hospital > .gutter > .box::before {
-    top: px2vw(-$bdw, $vw);
-    right: calc(-100% - #{px2vw($bdw * 2, $vw)} + 0.3px);
-    width: calc(100% + #{px2vw($bdw * 2, $vw)});
+  .group {
+    padding-top: px2vw($bdw, $vw);
+    border-top-width: px2vw($bdw, $vw);
+    border-left-width: px2vw($bdw, $vw);
   }
-  .item.serious > .gutter > .box::before,
-  .item.recovered > .gutter > .box::before {
-    top: px2vw(-$boxdiff - $bdw, $vw);
-    right: px2vw(-$bdw, $vw);
+  .content {
+    > span {
+      @include font-size($fz);
+    }
+    span b {
+      @include font-size($fz + 2);
+    }
+    span.unit {
+      @include font-size($fz);
+    }
   }
 }
 
-// variables.scss Breakpoints: huge
+// variables.scss Breakpoints: huge (1440)
 @include lessThan(1440) {
-  @include variation(1440, 3, 14, 180, 35);
+  @include override(1440, 3, 15, 150, 35);
 }
 
-// Vuetify Breakpoints: Large
+// Vuetify Breakpoints: Large (1264)
 @include lessThan(1263) {
-  @include variation(1263, 2, 12, 150, 24);
+  @include override(1263, 2, 13, 107, 24);
+}
+
+// variables.scss Breakpoints: large (1170)
+@include lessThan(1170) {
+  @include override(1170, 2, 13, 107, 24);
 }
 
-// Vuetify Breakpoints: Small
+// Vuetify Breakpoints: Small (960)
 @include lessThan(959) {
-  @include variation(960, 4, 16, 250, 40);
+  @include override(960, 4, 14, 180, 40);
+}
+@include lessThan(767) {
+  @include override(960, 3, 14, 180, 40);
 }
 
-// Vuetify Breakpoints: Extra Small
-@include lessThan(599) {
-  @include variation(600, 3, 14, 200, 35);
+// Vuetify Breakpoints: Extra Small (600)
+@include lessThan(600) {
+  @include override(600, 3, 14, 150, 35);
+}
+@include lessThan(420) {
+  @include override(600, 2, 12, 150, 35);
 }
 </style>
diff --git a/components/SvgCard.vue b/components/SvgCard.vue
deleted file mode 100644
index c0bb92e5..00000000
--- a/components/SvgCard.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <data-view class="SvgCard" :title="title" :title-id="titleId" :date="date">
-    <template v-slot:button>
-      <p class="Graph-Desc">
-        {{
-          $t(
-            '（注）都内において疑い例または患者の濃厚接触者として検査を行ったものについて掲載'
-          )
-        }}<br />
-        {{ $t('（チャーター機帰国者、クルーズ船乗客等は含まれていない）') }}
-        <br />
-        {{
-          $t(
-            '検査実施人数は、速報値として公開するものであり、後日確定データとして修正される場合があります'
-          )
-        }}
-      </p>
-    </template>
-    <slot />
-  </data-view>
-</template>
-
-<style lang="scss" scoped>
-.SvgCard {
-  ::v-deep svg {
-    width: 100%;
-  }
-  .Graph-Desc {
-    margin-top: 10px;
-    margin-bottom: 0;
-    font-size: 12px;
-    color: $gray-3;
-  }
-}
-</style>
-
-<script lang="ts">
-import Vue from 'vue'
-import DataView from '@/components/DataView.vue'
-
-export default Vue.extend({
-  components: { DataView },
-  props: {
-    title: {
-      type: String,
-      default: ''
-    },
-    titleId: {
-      type: String,
-      default: ''
-    },
-    date: {
-      type: String,
-      default: ''
-    }
-  }
-})
-</script>
diff --git a/components/TestedCasesCard.vue b/components/TestedCasesCard.vue
new file mode 100644
index 00000000..9fd61411
--- /dev/null
+++ b/components/TestedCasesCard.vue
@@ -0,0 +1,62 @@
+<template>
+  <data-view :title="title" :title-id="titleId" :date="date">
+    <template v-slot:button>
+      <ul :class="$style.notes">
+        <li>
+          {{ $t('（注）医療機関が保険適用で行った検査は含まれていない') }}
+        </li>
+        <li>
+          {{
+            $t(
+              '（注）検査実施人数には、チャーター機帰国者、クルーズ船乗客等は含まれていない'
+            )
+          }}
+        </li>
+        <li>
+          {{
+            $t(
+              '（注）速報値として公開するものであり、後日確定データとして修正される場合あり'
+            )
+          }}
+        </li>
+      </ul>
+    </template>
+    <slot />
+  </data-view>
+</template>
+
+<style lang="scss" module>
+ul.notes {
+  margin-top: 10px;
+  margin-bottom: 0;
+  padding-left: 0 !important;
+  font-size: 12px;
+  color: $gray-3;
+  > li {
+    list-style-type: none;
+  }
+}
+</style>
+
+<script lang="ts">
+import Vue from 'vue'
+import DataView from '@/components/DataView.vue'
+
+export default Vue.extend({
+  components: { DataView },
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    titleId: {
+      type: String,
+      default: ''
+    },
+    date: {
+      type: String,
+      default: ''
+    }
+  }
+})
+</script>
diff --git a/components/TestedCasesTable.vue b/components/TestedCasesTable.vue
new file mode 100644
index 00000000..73a59b66
--- /dev/null
+++ b/components/TestedCasesTable.vue
@@ -0,0 +1,336 @@
+<template>
+  <ul :class="$style.container">
+    <li :class="[$style.box, $style.tall, $style.tested]">
+      <div :class="[$style.pillar]">
+        <div :class="$style.content">
+          <!-- eslint-disable vue/no-v-html-->
+          <span>
+            {{ $t('検査実施人数') }}
+            <br />({{ $t('累計') }})
+          </span>
+          <!-- eslint-enable vue/no-v-html-->
+          <span>
+            <b>{{ 累計人数 }}</b>
+            <span :class="$style.unit">{{ $t('人') }}</span>
+          </span>
+        </div>
+      </div>
+    </li>
+    <li :class="[$style.box, $style.tall, $style.parent, $style.cases]">
+      <div :class="$style.title">
+        {{ $t('検査実施件数') }}
+        ({{ $t('累計') }})
+      </div>
+      <div :class="$style.pillar">
+        <div :class="$style.content">
+          <span>{{ $t('合計') }}</span>
+          <span>
+            <b>{{ 合計件数 }}</b>
+            <span :class="$style.unit">{{ $t('件.tested') }}</span>
+          </span>
+        </div>
+      </div>
+      <ul :class="$style.group">
+        <li :class="[$style.box, $style.inside]">
+          <div :class="$style.pillar">
+            <div :class="$style.content">
+              <span>{{ $t('都内発生') }}</span>
+              <span>
+                <b>{{ 都内発生件数 }}</b>
+                <span :class="$style.unit">{{ $t('件.tested') }}</span>
+              </span>
+            </div>
+          </div>
+        </li>
+        <li :class="[$style.box, $style.others]">
+          <div :class="$style.pillar">
+            <div :class="$style.content">
+              <span>{{ $t('その他') }}</span>
+              <span :class="$style.small">{{
+                $t('（チャーター機・クルーズ船等）')
+              }}</span>
+              <span>
+                <b>{{ その他件数 }}</b>
+                <span :class="$style.unit">{{ $t('件.tested') }}</span>
+              </span>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+/* eslint-disable vue/prop-name-casing */
+export default Vue.extend({
+  props: {
+    累計人数: {
+      type: Number,
+      required: true
+    },
+    合計件数: {
+      type: Number,
+      required: true
+    },
+    都内発生件数: {
+      type: Number,
+      required: true
+    },
+    その他件数: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    /** 桁数に応じて位置の調整をする */
+    getAdjustX(input: number) {
+      const length = input.toString(10).length
+      switch (length) {
+        case 1: {
+          return 3
+        }
+        case 2: {
+          return 0
+        }
+        case 3: {
+          return -3
+        }
+        case 4: {
+          return -8
+        }
+        default: {
+          return 0
+        }
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" module>
+$default-bdw: 3px;
+$default-boxh: 150px;
+
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  box-sizing: border-box;
+  color: $green-1;
+  line-height: 1.35;
+  * {
+    box-sizing: border-box;
+  }
+  // override default styles
+  padding-left: 0 !important;
+  ul {
+    padding-left: 0;
+  }
+}
+.box {
+  display: flex;
+  &.parent {
+    border-top: $default-bdw solid $green-1;
+    border-left: $default-bdw solid $green-1;
+    position: relative;
+    > .pillar {
+      margin-top: -$default-bdw * 3;
+      border-top: none;
+      border-right: none;
+      border-left: none;
+    }
+  }
+  &.tested {
+    display: flex;
+    flex: 0 0 auto;
+    // [4列] 1/4セル
+    width: calc((100% - #{$default-bdw} * 3) / 4);
+  }
+  &.cases {
+    flex-wrap: wrap;
+    align-items: stretch;
+    margin-left: $default-bdw;
+    // [4列] 3/4
+    width: calc((100% - #{$default-bdw} * 3) / 4 * 3 + #{$default-bdw} * 2);
+    > .title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+      width: 100%;
+      padding: 10px 10px 10px calc(10px + #{$default-bdw});
+      border-right: $default-bdw solid $green-1;
+    }
+    > .pillar {
+      // [3列] 1/3
+      width: calc((100% + #{$default-bdw} * 2) / 3 - #{$default-bdw} * 3);
+      align-self: flex-end;
+      > .content {
+        padding-top: 10px + $default-bdw * 3;
+      }
+    }
+    > .group {
+      // [3列] 2/3
+      width: calc((100% + #{$default-bdw} * 2) / 3 * 2 + #{$default-bdw});
+    }
+  }
+  &.inside,
+  &.others {
+    margin-left: $default-bdw;
+    // [2列] 1/2
+    width: calc(100% / 2 - #{$default-bdw});
+  }
+}
+.pillar {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  flex: 0 0 auto;
+  text-align: center;
+  width: 100%;
+  border: $default-bdw solid $green-1;
+}
+.group {
+  display: flex;
+  flex: 0 0 auto;
+  padding-left: 0;
+  padding-top: $default-bdw;
+  border-top: $default-bdw solid $green-1;
+  border-left: $default-bdw solid $green-1;
+}
+.content {
+  min-height: $default-boxh;
+  padding: 10px 2px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: center;
+  > span:not(:last-child) {
+    word-break: break-all;
+  }
+  > span {
+    display: block;
+    @include font-size(16);
+    &:last-child {
+      margin-top: 0.1em;
+    }
+  }
+  span b {
+    @include font-size(18);
+  }
+  span.unit {
+    @include font-size(16);
+  }
+  .small {
+    @include font-size(14);
+  }
+}
+
+@function px2vw($px, $vw: 0) {
+  @if $vw > 0 {
+    @return ceil($px / $vw * 100000vw) / 1000;
+  } @else {
+    @return $px * 1px;
+  }
+}
+
+@mixin override($vw, $bdw, $fz, $boxh) {
+  .box {
+    &.parent {
+      border-top-width: px2vw($bdw, $vw);
+      border-left-width: px2vw($bdw, $vw);
+      > .pillar {
+        margin-top: px2vw((-$bdw * 3), $vw);
+      }
+    }
+    &.tested {
+      width: calc((100% - #{px2vw($bdw, $vw)} * 3) / 4);
+    }
+    &.cases {
+      margin-left: px2vw($bdw, $vw);
+      width: calc(
+        (100% - #{px2vw($bdw, $vw)} * 3) / 4 * 3 + #{px2vw($bdw, $vw)} * 2
+      );
+      > .title {
+        margin-top: -1px;
+        padding-left: calc(10px + #{px2vw($bdw, $vw)});
+        border-right-width: px2vw($bdw, $vw);
+      }
+      > .pillar {
+        width: calc(
+          (100% + #{px2vw($bdw, $vw)} * 2) / 3 - #{px2vw($bdw, $vw)} * 3
+        );
+      }
+      > .group {
+        width: calc(
+          (100% + #{px2vw($bdw, $vw)} * 2) / 3 * 2 + #{px2vw($bdw, $vw)}
+        );
+      }
+    }
+    &.inside,
+    &.others {
+      margin-left: px2vw($bdw, $vw);
+      width: calc(100% / 2 - #{px2vw($bdw, $vw)});
+    }
+  }
+  .pillar {
+    border-width: px2vw($bdw, $vw);
+  }
+  .group {
+    padding-top: px2vw($bdw, $vw);
+    border-top-width: px2vw($bdw, $vw);
+    border-left-width: px2vw($bdw, $vw);
+  }
+  .content {
+    > span {
+      @include font-size($fz);
+    }
+    span b {
+      @include font-size($fz + 2);
+    }
+    span.unit {
+      @include font-size($fz);
+    }
+    .unit {
+      @include font-size($fz - 2);
+    }
+    .small {
+      @include font-size($fz - 1);
+    }
+  }
+}
+
+// variables.scss Breakpoints: huge (1440)
+@include lessThan(1440) {
+  @include override(1440, 3, 15, 150);
+}
+
+// Vuetify Breakpoints: Large (1264)
+@include lessThan(1263) {
+  @include override(1263, 2, 13, 107);
+}
+
+// variables.scss Breakpoints: large (1170)
+@include lessThan(1170) {
+  @include override(1170, 2, 13, 107);
+}
+
+// Vuetify Breakpoints: Small (960)
+@include lessThan(959) {
+  @include override(960, 4, 14, 180);
+}
+@include lessThan(767) {
+  @include override(960, 3, 14, 180);
+}
+
+// Vuetify Breakpoints: Extra Small (600)
+@include lessThan(600) {
+  @include override(600, 3, 14, 150);
+}
+@include lessThan(420) {
+  @include override(600, 2, 12, 150);
+}
+</style>
diff --git a/components/cards/ConfirmedCasesDetailsCard.vue b/components/cards/ConfirmedCasesDetailsCard.vue
index eccd89c0..1c5357a8 100644
--- a/components/cards/ConfirmedCasesDetailsCard.vue
+++ b/components/cards/ConfirmedCasesDetailsCard.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <svg-card
+    <confirmed-cases-card
       :title="$t('検査陽性者の状況')"
       :title-id="'details-of-confirmed-cases'"
       :date="Data.inspections_summary.date"
@@ -9,19 +9,19 @@
         :aria-label="$t('検査陽性者の状況')"
         v-bind="confirmedCases"
       />
-    </svg-card>
+    </confirmed-cases-card>
   </v-col>
 </template>
 
 <script>
 import Data from '@/data/data.json'
 import formatConfirmedCases from '@/utils/formatConfirmedCases'
-import SvgCard from '@/components/SvgCard.vue'
+import ConfirmedCasesCard from '@/components/ConfirmedCasesCard.vue'
 import ConfirmedCasesTable from '@/components/ConfirmedCasesTable.vue'
 
 export default {
   components: {
-    SvgCard,
+    ConfirmedCasesCard,
     ConfirmedCasesTable
   },
   data() {
diff --git a/components/cards/TestedCasesDetailsCard.vue b/components/cards/TestedCasesDetailsCard.vue
new file mode 100644
index 00000000..3ab1b271
--- /dev/null
+++ b/components/cards/TestedCasesDetailsCard.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-col cols="12" md="6" class="DataCard">
+    <tested-cases-card
+      :title="$t('検査実施状況')"
+      :title-id="'details-of-tested-cases'"
+      :date="Data.inspection_status_summary.date"
+    >
+      <tested-cases-table
+        :aria-label="$t('検査実施状況')"
+        v-bind="testedCases"
+      />
+    </tested-cases-card>
+  </v-col>
+</template>
+
+<script>
+import Data from '@/data/data.json'
+import formatTestedCases from '@/utils/formatTestedCases'
+import TestedCasesCard from '@/components/TestedCasesCard.vue'
+import TestedCasesTable from '@/components/TestedCasesTable.vue'
+
+export default {
+  components: {
+    TestedCasesCard,
+    TestedCasesTable
+  },
+  data() {
+    // 検査陽性者の状況
+    const testedCases = formatTestedCases(Data.inspection_status_summary)
+
+    const data = {
+      Data,
+      testedCases
+    }
+    return data
+  }
+}
+</script>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 718e45c3..3860ffff 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -152,6 +152,7 @@ const config: Configuration = {
       const locales = ['ja', 'en', 'zh-cn', 'zh-tw', 'ko', 'ja-basic']
       const pages = [
         '/cards/details-of-confirmed-cases',
+        '/cards/details-of-tested-cases',
         '/cards/number-of-confirmed-cases',
         '/cards/attributes-of-confirmed-cases',
         '/cards/number-of-tested',
diff --git a/pages/cards/_card.vue b/pages/cards/_card.vue
index 8db35ced..4684fb8e 100644
--- a/pages/cards/_card.vue
+++ b/pages/cards/_card.vue
@@ -3,6 +3,9 @@
     <confirmed-cases-details-card
       v-if="this.$route.params.card == 'details-of-confirmed-cases'"
     />
+    <tested-cases-details-card
+      v-else-if="this.$route.params.card == 'details-of-tested-cases'"
+    />
     <confirmed-cases-number-card
       v-else-if="this.$route.params.card == 'number-of-confirmed-cases'"
     />
@@ -38,6 +41,7 @@ import Data from '@/data/data.json'
 import MetroData from '@/data/metro.json'
 import agencyData from '@/data/agency.json'
 import ConfirmedCasesDetailsCard from '@/components/cards/ConfirmedCasesDetailsCard.vue'
+import TestedCasesDetailsCard from '@/components/cards/TestedCasesDetailsCard.vue'
 import ConfirmedCasesNumberCard from '@/components/cards/ConfirmedCasesNumberCard.vue'
 import ConfirmedCasesAttributesCard from '@/components/cards/ConfirmedCasesAttributesCard.vue'
 import TestedNumberCard from '@/components/cards/TestedNumberCard.vue'
@@ -49,6 +53,7 @@ import AgencyCard from '@/components/cards/AgencyCard.vue'
 export default {
   components: {
     ConfirmedCasesDetailsCard,
+    TestedCasesDetailsCard,
     ConfirmedCasesNumberCard,
     ConfirmedCasesAttributesCard,
     TestedNumberCard,
@@ -64,6 +69,10 @@ export default {
         title = this.$t('検査陽性者の状況')
         updatedAt = Data.inspections_summary.date
         break
+      case 'details-of-tested-cases':
+        title = this.$t('検査実施状況')
+        updatedAt = Data.inspection_status_summary.date
+        break
       case 'number-of-confirmed-cases':
         title = this.$t('陽性患者数')
         updatedAt = Data.patients.date
diff --git a/pages/index.vue b/pages/index.vue
index 62727309..fd756945 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -14,6 +14,7 @@
     />
     <v-row class="DataBlock">
       <confirmed-cases-details-card />
+      <tested-cases-details-card />
       <confirmed-cases-number-card />
       <confirmed-cases-attributes-card />
       <tested-number-card />
@@ -34,6 +35,7 @@ import StaticInfo from '@/components/StaticInfo.vue'
 import Data from '@/data/data.json'
 import News from '@/data/news.json'
 import ConfirmedCasesDetailsCard from '@/components/cards/ConfirmedCasesDetailsCard.vue'
+import TestedCasesDetailsCard from '@/components/cards/TestedCasesDetailsCard.vue'
 import ConfirmedCasesNumberCard from '@/components/cards/ConfirmedCasesNumberCard.vue'
 import ConfirmedCasesAttributesCard from '@/components/cards/ConfirmedCasesAttributesCard.vue'
 import TestedNumberCard from '@/components/cards/TestedNumberCard.vue'
@@ -48,6 +50,7 @@ export default Vue.extend({
     WhatsNew,
     StaticInfo,
     ConfirmedCasesDetailsCard,
+    TestedCasesDetailsCard,
     ConfirmedCasesNumberCard,
     ConfirmedCasesAttributesCard,
     TestedNumberCard,
diff --git a/utils/formatTestedCases.ts b/utils/formatTestedCases.ts
new file mode 100644
index 00000000..bd136746
--- /dev/null
+++ b/utils/formatTestedCases.ts
@@ -0,0 +1,42 @@
+type DataType = {
+  attr: '累計人数'
+  value: number
+  children: [
+    {
+      attr: '合計件数'
+      value: number
+      children: [
+        {
+          attr: '都内発生件数'
+          value: number
+        },
+        {
+          attr: 'その他件数'
+          value: number
+        }
+      ]
+    }
+  ]
+}
+
+type TestedCasesType = {
+  累計人数: number
+  合計件数: number
+  都内発生件数: number
+  その他件数: number
+}
+
+/**
+ * Format for *Chart component
+ *
+ * @param data - Raw data
+ */
+export default (data: DataType) => {
+  const formattedData: TestedCasesType = {
+    累計人数: data.value,
+    合計件数: data.children[0].value,
+    都内発生件数: data.children[0].children[0].value,
+    その他件数: data.children[0].children[1].value
+  }
+  return formattedData
+}