diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 0000000..4cc43f1
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,2 @@
+last 2 versions
+not dead
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0dfe296
--- /dev/null
+++ b/package.json
@@ -0,0 +1,35 @@
+{
+  "scripts": {
+    "dev": "webpack --mode development",
+    "watch": "npm-run-all -p watch:serve watch:pug",
+    "build": "npm-run-all -p build:webpack build:pug",
+    "build:webpack": "webpack --mode production",
+    "watch:serve": "webpack serve --mode development",
+    "build:pug": "pug src/pug/ --hierarchy -o dist/ -P",
+    "watch:pug": "pug src/pug/ --hierarchy -o dist/ -P -w"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.5",
+    "chokidar-cli": "^3.0.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.7.1",
+    "mini-css-extract-plugin": "^2.6.1",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.14",
+    "postcss-cli": "^9.1.0",
+    "postcss-loader": "^7.0.0",
+    "pug": "^3.0.2",
+    "pug-cli": "^1.0.0-alpha6",
+    "sass": "^1.52.3",
+    "sass-loader": "^13.0.0",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.9.2",
+    "webpack-remove-empty-scripts": "^0.8.1"
+  },
+  "private": true
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..f65d8b8
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')({grid: true})
+    ]
+};
\ No newline at end of file
diff --git a/src/img/common/bg_gradation.jpg b/src/img/common/bg_gradation.jpg
new file mode 100644
index 0000000..aee938b
Binary files /dev/null and b/src/img/common/bg_gradation.jpg differ
diff --git a/src/img/common/bg_gradation_02.jpg b/src/img/common/bg_gradation_02.jpg
new file mode 100644
index 0000000..aee938b
Binary files /dev/null and b/src/img/common/bg_gradation_02.jpg differ
diff --git a/src/js/index.js b/src/js/index.js
new file mode 100644
index 0000000..c5d1ffc
--- /dev/null
+++ b/src/js/index.js
@@ -0,0 +1,7 @@
+// import 文を使って sub.js ファイルを読み込む。
+import { hello } from "./sub.js";
+import { hello3 } from "./sub3.js";
+
+// sub.jsに定義されたJavaScriptを実行する。
+hello();
+//hello3();
\ No newline at end of file
diff --git a/src/js/sub.js b/src/js/sub.js
new file mode 100644
index 0000000..68c4aa0
--- /dev/null
+++ b/src/js/sub.js
@@ -0,0 +1,8 @@
+// export文を使ってhello関数を定義する。
+export function hello() {
+    const test = {
+        "test": "../img/common/bg_gradation.jpg"
+    }
+    // alert("helloメソッドが実行された。");
+    alert(test);
+}
\ No newline at end of file
diff --git a/src/js/sub3.js b/src/js/sub3.js
new file mode 100644
index 0000000..c34b1eb
--- /dev/null
+++ b/src/js/sub3.js
@@ -0,0 +1,4 @@
+// export文を使ってhello関数を定義する。
+export function hello3() {
+    alert("hello3メソッドが実行された。");
+}
\ No newline at end of file
diff --git a/src/pug/index.pug b/src/pug/index.pug
new file mode 100644
index 0000000..af273e9
--- /dev/null
+++ b/src/pug/index.pug
@@ -0,0 +1,13 @@
+doctype html
+html(lang="ja")
+  head
+    meta(charset="UTF-8")
+    title Page Title
+    script(src="./js/index.js")
+    link(rel="stylesheet" href="./css/style.css")
+  body
+    header.l-header
+      h1.l-header__logo Logo
+    main.l-main
+      h2 main
+      p pug
\ No newline at end of file
diff --git a/src/scss/_foundation.scss b/src/scss/_foundation.scss
new file mode 100644
index 0000000..38b065e
--- /dev/null
+++ b/src/scss/_foundation.scss
@@ -0,0 +1,2 @@
+@forward "foundation/variables";
+@forward "foundation/mixins";
\ No newline at end of file
diff --git a/src/scss/foundation/_animations.scss b/src/scss/foundation/_animations.scss
new file mode 100644
index 0000000..12618c2
--- /dev/null
+++ b/src/scss/foundation/_animations.scss
@@ -0,0 +1,8 @@
+@keyframes fadeIn{
+  0%{
+    opacity:0
+  }
+  to{
+    opacity:1
+  }
+}
\ No newline at end of file
diff --git a/src/scss/foundation/_default.scss b/src/scss/foundation/_default.scss
new file mode 100644
index 0000000..a760318
--- /dev/null
+++ b/src/scss/foundation/_default.scss
@@ -0,0 +1,66 @@
+@use "../foundation" as *;
+
+html,
+body {
+  -webkit-text-size-adjust:100%;
+  background: $color-back;
+
+  color: $color-text;
+  font-size: $fs-default;
+  font-family: $ff-default;
+  text-rendering: optimizeLegibility;
+}
+
+button {
+  cursor: pointer;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  display: block;
+  min-width: 375px; // viewport-extra検証用のため、仮追加
+  height: 200vh; // スクロールするため、仮追加
+}
+
+[data-whatinput='mouse'] *:focus,
+[data-whatinput='touch'] *:focus {
+  outline: none;
+}
+
+
+img{
+  height:auto;
+  max-width:100%;
+  vertical-align:bottom
+}
+table{
+  border-collapse:collapse;
+  margin:0 auto;
+  width:100%
+}
+td,th{
+  border:1px solid #ccc;
+  vertical-align:top
+}
+input,textarea{
+  background-color:#fff;
+  border:1px solid #a7a6aa;
+  border-radius:2px;
+  margin:0;
+  padding:5px 7px
+}
+input[type=text],textarea{
+  border:1px solid #aaa;
+  outline:none;
+  -webkit-transition:all .3s ease;
+  transition:all .3s ease
+}
+input[type=text]:focus,textarea:focus{
+  border:1px solid #52a8ec;
+  -webkit-box-shadow:0 0 7px #52a8ec;
+  box-shadow:0 0 7px #52a8ec
+}
\ No newline at end of file
diff --git a/src/scss/foundation/_destyle.scss b/src/scss/foundation/_destyle.scss
new file mode 100644
index 0000000..1f7a2f2
--- /dev/null
+++ b/src/scss/foundation/_destyle.scss
@@ -0,0 +1,421 @@
+/*! destyle.css v3.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
+
+/* Reset box-model and set borders */
+/* ============================================ */
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-style: solid;
+  border-width: 0;
+}
+
+/* Document */
+/* ============================================ */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ * 3. Remove gray overlay on links for iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -webkit-tap-highlight-color: transparent; /* 3*/
+}
+
+/* Sections */
+/* ============================================ */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/* Vertical rhythm */
+/* ============================================ */
+
+p,
+table,
+blockquote,
+address,
+pre,
+iframe,
+form,
+figure,
+dl {
+  margin: 0;
+}
+
+/* Headings */
+/* ============================================ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+  margin: 0;
+}
+
+/* Lists (enumeration) */
+/* ============================================ */
+
+ul,
+ol {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* Lists (definition) */
+/* ============================================ */
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-left: 0;
+}
+
+/* Grouping content */
+/* ============================================ */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+  border-top-width: 1px;
+  margin: 0;
+  clear: both;
+  color: inherit;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: inherit; /* 2 */
+}
+
+address {
+  font-style: inherit;
+}
+
+/* Text-level semantics */
+/* ============================================ */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+  text-decoration: none;
+  color: inherit;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: inherit; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Replaced content */
+/* ============================================ */
+
+/**
+ * Prevent vertical alignment issues.
+ */
+
+svg,
+img,
+embed,
+object,
+iframe {
+  vertical-align: bottom;
+}
+
+/* Forms */
+/* ============================================ */
+
+/**
+ * Reset form fields to make them styleable.
+ * 1. Make form elements stylable across systems iOS especially.
+ * 2. Inherit text-transform from parent.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  -webkit-appearance: none; /* 1 */
+  appearance: none;
+  vertical-align: middle;
+  color: inherit;
+  font: inherit;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  text-align: inherit;
+  text-transform: inherit; /* 2 */
+}
+
+/**
+ * Reset radio and checkbox appearance to preserve their look in iOS.
+ */
+
+[type="checkbox"] {
+  -webkit-appearance: checkbox;
+  appearance: checkbox;
+}
+
+[type="radio"] {
+  -webkit-appearance: radio;
+  appearance: radio;
+}
+
+/**
+ * Correct cursors for clickable elements.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  cursor: pointer;
+}
+
+button:disabled,
+[type="button"]:disabled,
+[type="reset"]:disabled,
+[type="submit"]:disabled {
+  cursor: default;
+}
+
+/**
+ * Improve outlines for Firefox and unify style with input elements & buttons.
+ */
+
+:-moz-focusring {
+  outline: auto;
+}
+
+select:disabled {
+  opacity: inherit;
+}
+
+/**
+ * Remove padding
+ */
+
+option {
+  padding: 0;
+}
+
+/**
+ * Reset to invisible
+ */
+
+fieldset {
+  margin: 0;
+  padding: 0;
+  min-width: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  outline-offset: -2px; /* 1 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Fix font inheritance.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/**
+ * Clickable labels
+ */
+
+label[for] {
+  cursor: pointer;
+}
+
+/* Interactive */
+/* ============================================ */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/*
+ * Remove outline for editable content.
+ */
+
+[contenteditable]:focus {
+  outline: auto;
+}
+
+/* Tables */
+/* ============================================ */
+
+/**
+1. Correct table border color inheritance in all Chrome and Safari.
+*/
+
+table {
+  border-color: inherit; /* 1 */
+  border-collapse: collapse;
+}
+
+caption {
+  text-align: left;
+}
+
+td,
+th {
+  vertical-align: top;
+  padding: 0;
+}
+
+th {
+  text-align: left;
+  font-weight: bold;
+}
\ No newline at end of file
diff --git a/src/scss/foundation/_mixins.scss b/src/scss/foundation/_mixins.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/foundation/_variables.scss b/src/scss/foundation/_variables.scss
new file mode 100644
index 0000000..c9a6322
--- /dev/null
+++ b/src/scss/foundation/_variables.scss
@@ -0,0 +1,15 @@
+
+// Base Setting
+$color-primary: #07308d;
+$color-secondary: #e5c20d;
+$color-black: #222;
+$color-white: #fff;
+
+// Naming for Use
+$color-back: $color-white;
+$color-text: $color-black;
+
+
+// font
+$fs-default: 1rem;
+$ff-default: sans-serif;
\ No newline at end of file
diff --git a/src/scss/layout/_footer.scss b/src/scss/layout/_footer.scss
new file mode 100644
index 0000000..f8e6c6b
--- /dev/null
+++ b/src/scss/layout/_footer.scss
@@ -0,0 +1,13 @@
+@use "../foundation" as *;
+
+.l-footer {
+  background: $color-back;
+  margin: 0 auto;
+  border-bottom: solid 1px #ccc;
+  padding: 20px;
+  display: none;
+
+  &__logo{
+    font-size: 3rem;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/layout/_header.scss b/src/scss/layout/_header.scss
new file mode 100644
index 0000000..01c919e
--- /dev/null
+++ b/src/scss/layout/_header.scss
@@ -0,0 +1,13 @@
+@use "../foundation" as *;
+
+.l-header {
+  background: $color-back;
+  margin: 0 auto;
+  border-bottom: solid 1px #ccc;
+  padding: 20px;
+  display: none;
+
+  &__logo{
+    font-size: 3rem;
+  }
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_box.scss b/src/scss/object/components/_box.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_button.scss b/src/scss/object/components/_button.scss
new file mode 100644
index 0000000..5844fd2
--- /dev/null
+++ b/src/scss/object/components/_button.scss
@@ -0,0 +1,93 @@
+
+.c-button01 .text{
+  -webkit-transition:opacity .6s;
+  transition:opacity .6s
+}
+.c-button01 .c-ico{
+  color:#fff;
+  height:2em;
+  margin-left:1em;
+  position:relative;
+  width:2em;
+  z-index:10
+}
+.c-button01 .c-ico:before{
+  background-color:#b99576;
+  border-radius:50%;
+  content:"";
+  height:100%;
+  left:50%;
+  position:absolute;
+  top:50%;
+  -webkit-transform:translate(-50%,-50%);
+  transform:translate(-50%,-50%);
+  -webkit-transition-duration:.3s;
+  transition-duration:.3s;
+  -webkit-transition-property:width,height;
+  transition-property:width,height;
+  -webkit-transition-timing-function:ease-out;
+  transition-timing-function:ease-out;
+  width:100%;
+  z-index:-1
+}
+.c-button02{
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  font-size:1.7rem;
+  width:100%
+}
+.c-button02.-right{
+  -webkit-box-pack:end;
+  -ms-flex-pack:end;
+  justify-content:flex-end
+}
+.c-button02.-mt-m{
+  margin-top:2em
+}
+.c-button02 a,.c-button02>span{
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex
+}
+.is-mouse .c-button02 a:hover .text,.is-mouse .c-button02>span:hover .text{
+  opacity:.7
+}
+.c-button02 .text{
+  -webkit-transition:opacity .6s;
+  transition:opacity .6s
+}
+.c-button02 .text,.c-button02 .text.-min{
+  font-family:游明朝,YuMincho,ヒラギノ明朝 Pro W3,Hiragino Mincho Pro,HG明朝E,MS P明朝,MS 明朝,serif
+}
+.c-button02 .c-arrow{
+  margin-left:1.2em
+}
+.c-button02 .c-arrow.-left{
+  margin-left:auto;
+  margin-right:1.2em
+}
+.c-button03{
+  font-size:2.2rem
+}
+.c-button03,.c-button03 a{
+  -webkit-box-pack:center;
+  -ms-flex-pack:center;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  justify-content:center;
+  width:100%
+}
+.c-button03 a{
+  -webkit-box-align:center;
+  -ms-flex-align:center;
+  align-items:center;
+  font-family:游明朝,YuMincho,ヒラギノ明朝 Pro W3,Hiragino Mincho Pro,HG明朝E,MS P明朝,MS 明朝,serif;
+  max-width:800px;
+  padding:2em;
+  position:relative
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_card_slider.scss b/src/scss/object/components/_card_slider.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_common_sectioning.scss b/src/scss/object/components/_common_sectioning.scss
new file mode 100644
index 0000000..1bfe91c
--- /dev/null
+++ b/src/scss/object/components/_common_sectioning.scss
@@ -0,0 +1,7 @@
+
+.c-common_section+.c-common_section{
+  margin-top:calc(4.89796vw + 41.63265px)
+}
+.c-common_block+.c-common_block{
+  margin-top:calc(3.67347vw + 31.22449px)
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_cta.scss b/src/scss/object/components/_cta.scss
new file mode 100644
index 0000000..c33e9c2
--- /dev/null
+++ b/src/scss/object/components/_cta.scss
@@ -0,0 +1,18 @@
+
+.c-cta{
+  background-color:#fff;
+  padding-bottom:80px;
+  position:relative;
+  z-index:10
+}
+.c-cta:before{
+  background:url("../img/common/bg_gradation.jpg") no-repeat 50%;
+  background-size:cover;
+  bottom:0;
+  content:"";
+  height:75%;
+  left:0;
+  position:absolute;
+  width:100%;
+  z-index:-1
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_gallery_slider.scss b/src/scss/object/components/_gallery_slider.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_heading.scss b/src/scss/object/components/_heading.scss
new file mode 100644
index 0000000..ee585b2
--- /dev/null
+++ b/src/scss/object/components/_heading.scss
@@ -0,0 +1,9 @@
+
+.c-heading_lv01{
+  border-bottom:1px solid #111;
+  bottom:0;
+  content:"";
+  left:0;
+  position:absolute;
+  width:100%
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_ico.scss b/src/scss/object/components/_ico.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_label.scss b/src/scss/object/components/_label.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_list.scss b/src/scss/object/components/_list.scss
new file mode 100644
index 0000000..6593227
--- /dev/null
+++ b/src/scss/object/components/_list.scss
@@ -0,0 +1,18 @@
+
+.c-dl01+.c-dl01{
+  margin-top:1.2em
+}
+
+.c-list01{
+  font-size:1.4rem;
+  line-height:1.8
+}
+.c-list02{
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -ms-flex-direction:column;
+  flex-direction:column
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_lower_intro.scss b/src/scss/object/components/_lower_intro.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_lower_kv.scss b/src/scss/object/components/_lower_kv.scss
new file mode 100644
index 0000000..7d46a94
--- /dev/null
+++ b/src/scss/object/components/_lower_kv.scss
@@ -0,0 +1,17 @@
+
+.c-lower_kv02{
+  margin-bottom:calc(5.71429vw + 18.57143px);
+  padding-top:calc(4.89796vw + 41.63265px)
+}
+.c-lower_kv02__inner{
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -webkit-box-align:start;
+  -ms-flex-align:start;
+  align-items:flex-start;
+  display:-webkit-box;
+  display:-ms-flexbox;
+  display:flex;
+  -ms-flex-direction:column;
+  flex-direction:column
+}
\ No newline at end of file
diff --git a/src/scss/object/components/_modal.scss b/src/scss/object/components/_modal.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_post_archive.scss b/src/scss/object/components/_post_archive.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_post_single.scss b/src/scss/object/components/_post_single.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_tab.scss b/src/scss/object/components/_tab.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_table.scss b/src/scss/object/components/_table.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/components/_text.scss b/src/scss/object/components/_text.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/object/project/_company.scss b/src/scss/object/project/_company.scss
new file mode 100644
index 0000000..6fbe463
--- /dev/null
+++ b/src/scss/object/project/_company.scss
@@ -0,0 +1,4 @@
+.p-company{
+  font-size:10px;
+
+}
\ No newline at end of file
diff --git a/src/scss/object/project/_contact.scss b/src/scss/object/project/_contact.scss
new file mode 100644
index 0000000..741559d
--- /dev/null
+++ b/src/scss/object/project/_contact.scss
@@ -0,0 +1,4 @@
+.p-contact{
+  font-size:10px;
+
+}
\ No newline at end of file
diff --git a/src/scss/object/project/_top.scss b/src/scss/object/project/_top.scss
new file mode 100644
index 0000000..ae77ff4
--- /dev/null
+++ b/src/scss/object/project/_top.scss
@@ -0,0 +1,11 @@
+.p-top{
+  font-size: 16px;
+}
+
+.p-top_kv{
+
+}
+
+.p-index_topics{
+
+}
\ No newline at end of file
diff --git a/src/scss/object/utility/_alignment.scss b/src/scss/object/utility/_alignment.scss
new file mode 100644
index 0000000..e4872ad
--- /dev/null
+++ b/src/scss/object/utility/_alignment.scss
@@ -0,0 +1,15 @@
+
+.u-block_center{
+  display:block;
+  margin-left:auto;
+  margin-right:auto
+}
+.u-left{
+  text-align:left
+}
+.u-center{
+  text-align:center
+}
+.u-right{
+  text-align:right
+}
\ No newline at end of file
diff --git a/src/scss/object/utility/_display.scss b/src/scss/object/utility/_display.scss
new file mode 100644
index 0000000..5fd4a5b
--- /dev/null
+++ b/src/scss/object/utility/_display.scss
@@ -0,0 +1,22 @@
+
+.u-none{
+  display:none
+}
+.u-ib{
+  display:inline-block
+}
+.u-disable{
+  pointer-events:none
+}
+.u-disable{
+  pointer-events:none
+}
+.u-visible{
+  display:block
+}
+.u-hidden{
+  display:none
+}
+.u-hidden-max,.u-hidden-md,.u-hidden-min,.u-hidden-sp,.u-hidden-spmin,.u-hidden-tab{
+  display:none!important
+}
\ No newline at end of file
diff --git a/src/scss/object/utility/_margin.scss b/src/scss/object/utility/_margin.scss
new file mode 100644
index 0000000..bf750e8
--- /dev/null
+++ b/src/scss/object/utility/_margin.scss
@@ -0,0 +1,505 @@
+
+.u-mt0{
+  margin-top:0!important
+}
+.u-mb0{
+  margin-bottom:0!important
+}
+.u-ml0{
+  margin-left:0!important
+}
+.u-mr0{
+  margin-right:0!important
+}
+.u-pt0{
+  padding-top:0!important
+}
+.u-pb0{
+  padding-bottom:0!important
+}
+.u-pl0{
+  padding-left:0!important
+}
+.u-pr0{
+  padding-right:0!important
+}
+.u-mt5{
+  margin-top:calc(.40816vw + 3.46939px)!important
+}
+.u-mb5{
+  margin-bottom:calc(.40816vw + 3.46939px)!important
+}
+.u-ml5{
+  margin-left:calc(.40816vw + 3.46939px)!important
+}
+.u-mr5{
+  margin-right:calc(.40816vw + 3.46939px)!important
+}
+.u-pt5{
+  padding-top:calc(.40816vw + 3.46939px)!important
+}
+.u-pb5{
+  padding-bottom:calc(.40816vw + 3.46939px)!important
+}
+.u-pl5{
+  padding-left:calc(.40816vw + 3.46939px)!important
+}
+.u-pr5{
+  padding-right:calc(.40816vw + 3.46939px)!important
+}
+.u-mt10{
+  margin-top:calc(.81633vw + 6.93878px)!important
+}
+.u-mb10{
+  margin-bottom:calc(.81633vw + 6.93878px)!important
+}
+.u-ml10{
+  margin-left:calc(.81633vw + 6.93878px)!important
+}
+.u-mr10{
+  margin-right:calc(.81633vw + 6.93878px)!important
+}
+.u-pt10{
+  padding-top:calc(.81633vw + 6.93878px)!important
+}
+.u-pb10{
+  padding-bottom:calc(.81633vw + 6.93878px)!important
+}
+.u-pl10{
+  padding-left:calc(.81633vw + 6.93878px)!important
+}
+.u-pr10{
+  padding-right:calc(.81633vw + 6.93878px)!important
+}
+.u-mt15{
+  margin-top:calc(1.22449vw + 10.40816px)!important
+}
+.u-mb15{
+  margin-bottom:calc(1.22449vw + 10.40816px)!important
+}
+.u-ml15{
+  margin-left:calc(1.22449vw + 10.40816px)!important
+}
+.u-mr15{
+  margin-right:calc(1.22449vw + 10.40816px)!important
+}
+.u-pt15{
+  padding-top:calc(1.22449vw + 10.40816px)!important
+}
+.u-pb15{
+  padding-bottom:calc(1.22449vw + 10.40816px)!important
+}
+.u-pl15{
+  padding-left:calc(1.22449vw + 10.40816px)!important
+}
+.u-pr15{
+  padding-right:calc(1.22449vw + 10.40816px)!important
+}
+.u-mt20{
+  margin-top:calc(1.63265vw + 13.87755px)!important
+}
+.u-mb20{
+  margin-bottom:calc(1.63265vw + 13.87755px)!important
+}
+.u-ml20{
+  margin-left:calc(1.63265vw + 13.87755px)!important
+}
+.u-mr20{
+  margin-right:calc(1.63265vw + 13.87755px)!important
+}
+.u-pt20{
+  padding-top:calc(1.63265vw + 13.87755px)!important
+}
+.u-pb20{
+  padding-bottom:calc(1.63265vw + 13.87755px)!important
+}
+.u-pl20{
+  padding-left:calc(1.63265vw + 13.87755px)!important
+}
+.u-pr20{
+  padding-right:calc(1.63265vw + 13.87755px)!important
+}
+.u-mt25{
+  margin-top:calc(2.04082vw + 17.34694px)!important
+}
+.u-mb25{
+  margin-bottom:calc(2.04082vw + 17.34694px)!important
+}
+.u-ml25{
+  margin-left:calc(2.04082vw + 17.34694px)!important
+}
+.u-mr25{
+  margin-right:calc(2.04082vw + 17.34694px)!important
+}
+.u-pt25{
+  padding-top:calc(2.04082vw + 17.34694px)!important
+}
+.u-pb25{
+  padding-bottom:calc(2.04082vw + 17.34694px)!important
+}
+.u-pl25{
+  padding-left:calc(2.04082vw + 17.34694px)!important
+}
+.u-pr25{
+  padding-right:calc(2.04082vw + 17.34694px)!important
+}
+.u-mt30{
+  margin-top:calc(2.44898vw + 20.81633px)!important
+}
+.u-mb30{
+  margin-bottom:calc(2.44898vw + 20.81633px)!important
+}
+.u-ml30{
+  margin-left:calc(2.44898vw + 20.81633px)!important
+}
+.u-mr30{
+  margin-right:calc(2.44898vw + 20.81633px)!important
+}
+.u-pt30{
+  padding-top:calc(2.44898vw + 20.81633px)!important
+}
+.u-pb30{
+  padding-bottom:calc(2.44898vw + 20.81633px)!important
+}
+.u-pl30{
+  padding-left:calc(2.44898vw + 20.81633px)!important
+}
+.u-pr30{
+  padding-right:calc(2.44898vw + 20.81633px)!important
+}
+.u-mt35{
+  margin-top:calc(2.85714vw + 24.28571px)!important
+}
+.u-mb35{
+  margin-bottom:calc(2.85714vw + 24.28571px)!important
+}
+.u-ml35{
+  margin-left:calc(2.85714vw + 24.28571px)!important
+}
+.u-mr35{
+  margin-right:calc(2.85714vw + 24.28571px)!important
+}
+.u-pt35{
+  padding-top:calc(2.85714vw + 24.28571px)!important
+}
+.u-pb35{
+  padding-bottom:calc(2.85714vw + 24.28571px)!important
+}
+.u-pl35{
+  padding-left:calc(2.85714vw + 24.28571px)!important
+}
+.u-pr35{
+  padding-right:calc(2.85714vw + 24.28571px)!important
+}
+.u-mt40{
+  margin-top:calc(3.26531vw + 27.7551px)!important
+}
+.u-mb40{
+  margin-bottom:calc(3.26531vw + 27.7551px)!important
+}
+.u-ml40{
+  margin-left:calc(3.26531vw + 27.7551px)!important
+}
+.u-mr40{
+  margin-right:calc(3.26531vw + 27.7551px)!important
+}
+.u-pt40{
+  padding-top:calc(3.26531vw + 27.7551px)!important
+}
+.u-pb40{
+  padding-bottom:calc(3.26531vw + 27.7551px)!important
+}
+.u-pl40{
+  padding-left:calc(3.26531vw + 27.7551px)!important
+}
+.u-pr40{
+  padding-right:calc(3.26531vw + 27.7551px)!important
+}
+.u-mt45{
+  margin-top:calc(3.67347vw + 31.22449px)!important
+}
+.u-mb45{
+  margin-bottom:calc(3.67347vw + 31.22449px)!important
+}
+.u-ml45{
+  margin-left:calc(3.67347vw + 31.22449px)!important
+}
+.u-mr45{
+  margin-right:calc(3.67347vw + 31.22449px)!important
+}
+.u-pt45{
+  padding-top:calc(3.67347vw + 31.22449px)!important
+}
+.u-pb45{
+  padding-bottom:calc(3.67347vw + 31.22449px)!important
+}
+.u-pl45{
+  padding-left:calc(3.67347vw + 31.22449px)!important
+}
+.u-pr45{
+  padding-right:calc(3.67347vw + 31.22449px)!important
+}
+.u-mt50{
+  margin-top:calc(4.08163vw + 34.69388px)!important
+}
+.u-mb50{
+  margin-bottom:calc(4.08163vw + 34.69388px)!important
+}
+.u-ml50{
+  margin-left:calc(4.08163vw + 34.69388px)!important
+}
+.u-mr50{
+  margin-right:calc(4.08163vw + 34.69388px)!important
+}
+.u-pt50{
+  padding-top:calc(4.08163vw + 34.69388px)!important
+}
+.u-pb50{
+  padding-bottom:calc(4.08163vw + 34.69388px)!important
+}
+.u-pl50{
+  padding-left:calc(4.08163vw + 34.69388px)!important
+}
+.u-pr50{
+  padding-right:calc(4.08163vw + 34.69388px)!important
+}
+.u-mt55{
+  margin-top:calc(4.4898vw + 38.16327px)!important
+}
+.u-mb55{
+  margin-bottom:calc(4.4898vw + 38.16327px)!important
+}
+.u-ml55{
+  margin-left:calc(4.4898vw + 38.16327px)!important
+}
+.u-mr55{
+  margin-right:calc(4.4898vw + 38.16327px)!important
+}
+.u-pt55{
+  padding-top:calc(4.4898vw + 38.16327px)!important
+}
+.u-pb55{
+  padding-bottom:calc(4.4898vw + 38.16327px)!important
+}
+.u-pl55{
+  padding-left:calc(4.4898vw + 38.16327px)!important
+}
+.u-pr55{
+  padding-right:calc(4.4898vw + 38.16327px)!important
+}
+.u-mt60{
+  margin-top:calc(4.89796vw + 41.63265px)!important
+}
+.u-mb60{
+  margin-bottom:calc(4.89796vw + 41.63265px)!important
+}
+.u-ml60{
+  margin-left:calc(4.89796vw + 41.63265px)!important
+}
+.u-mr60{
+  margin-right:calc(4.89796vw + 41.63265px)!important
+}
+.u-pt60{
+  padding-top:calc(4.89796vw + 41.63265px)!important
+}
+.u-pb60{
+  padding-bottom:calc(4.89796vw + 41.63265px)!important
+}
+.u-pl60{
+  padding-left:calc(4.89796vw + 41.63265px)!important
+}
+.u-pr60{
+  padding-right:calc(4.89796vw + 41.63265px)!important
+}
+.u-mt65{
+  margin-top:calc(5.30612vw + 45.10204px)!important
+}
+.u-mb65{
+  margin-bottom:calc(5.30612vw + 45.10204px)!important
+}
+.u-ml65{
+  margin-left:calc(5.30612vw + 45.10204px)!important
+}
+.u-mr65{
+  margin-right:calc(5.30612vw + 45.10204px)!important
+}
+.u-pt65{
+  padding-top:calc(5.30612vw + 45.10204px)!important
+}
+.u-pb65{
+  padding-bottom:calc(5.30612vw + 45.10204px)!important
+}
+.u-pl65{
+  padding-left:calc(5.30612vw + 45.10204px)!important
+}
+.u-pr65{
+  padding-right:calc(5.30612vw + 45.10204px)!important
+}
+.u-mt70{
+  margin-top:calc(5.71429vw + 48.57143px)!important
+}
+.u-mb70{
+  margin-bottom:calc(5.71429vw + 48.57143px)!important
+}
+.u-ml70{
+  margin-left:calc(5.71429vw + 48.57143px)!important
+}
+.u-mr70{
+  margin-right:calc(5.71429vw + 48.57143px)!important
+}
+.u-pt70{
+  padding-top:calc(5.71429vw + 48.57143px)!important
+}
+.u-pb70{
+  padding-bottom:calc(5.71429vw + 48.57143px)!important
+}
+.u-pl70{
+  padding-left:calc(5.71429vw + 48.57143px)!important
+}
+.u-pr70{
+  padding-right:calc(5.71429vw + 48.57143px)!important
+}
+.u-mt75{
+  margin-top:calc(6.12245vw + 52.04082px)!important
+}
+.u-mb75{
+  margin-bottom:calc(6.12245vw + 52.04082px)!important
+}
+.u-ml75{
+  margin-left:calc(6.12245vw + 52.04082px)!important
+}
+.u-mr75{
+  margin-right:calc(6.12245vw + 52.04082px)!important
+}
+.u-pt75{
+  padding-top:calc(6.12245vw + 52.04082px)!important
+}
+.u-pb75{
+  padding-bottom:calc(6.12245vw + 52.04082px)!important
+}
+.u-pl75{
+  padding-left:calc(6.12245vw + 52.04082px)!important
+}
+.u-pr75{
+  padding-right:calc(6.12245vw + 52.04082px)!important
+}
+.u-mt80{
+  margin-top:calc(6.53061vw + 55.5102px)!important
+}
+.u-mb80{
+  margin-bottom:calc(6.53061vw + 55.5102px)!important
+}
+.u-ml80{
+  margin-left:calc(6.53061vw + 55.5102px)!important
+}
+.u-mr80{
+  margin-right:calc(6.53061vw + 55.5102px)!important
+}
+.u-pt80{
+  padding-top:calc(6.53061vw + 55.5102px)!important
+}
+.u-pb80{
+  padding-bottom:calc(6.53061vw + 55.5102px)!important
+}
+.u-pl80{
+  padding-left:calc(6.53061vw + 55.5102px)!important
+}
+.u-pr80{
+  padding-right:calc(6.53061vw + 55.5102px)!important
+}
+.u-mt85{
+  margin-top:calc(6.93878vw + 58.97959px)!important
+}
+.u-mb85{
+  margin-bottom:calc(6.93878vw + 58.97959px)!important
+}
+.u-ml85{
+  margin-left:calc(6.93878vw + 58.97959px)!important
+}
+.u-mr85{
+  margin-right:calc(6.93878vw + 58.97959px)!important
+}
+.u-pt85{
+  padding-top:calc(6.93878vw + 58.97959px)!important
+}
+.u-pb85{
+  padding-bottom:calc(6.93878vw + 58.97959px)!important
+}
+.u-pl85{
+  padding-left:calc(6.93878vw + 58.97959px)!important
+}
+.u-pr85{
+  padding-right:calc(6.93878vw + 58.97959px)!important
+}
+.u-mt90{
+  margin-top:calc(7.34694vw + 62.44898px)!important
+}
+.u-mb90{
+  margin-bottom:calc(7.34694vw + 62.44898px)!important
+}
+.u-ml90{
+  margin-left:calc(7.34694vw + 62.44898px)!important
+}
+.u-mr90{
+  margin-right:calc(7.34694vw + 62.44898px)!important
+}
+.u-pt90{
+  padding-top:calc(7.34694vw + 62.44898px)!important
+}
+.u-pb90{
+  padding-bottom:calc(7.34694vw + 62.44898px)!important
+}
+.u-pl90{
+  padding-left:calc(7.34694vw + 62.44898px)!important
+}
+.u-pr90{
+  padding-right:calc(7.34694vw + 62.44898px)!important
+}
+.u-mt95{
+  margin-top:calc(7.7551vw + 65.91837px)!important
+}
+.u-mb95{
+  margin-bottom:calc(7.7551vw + 65.91837px)!important
+}
+.u-ml95{
+  margin-left:calc(7.7551vw + 65.91837px)!important
+}
+.u-mr95{
+  margin-right:calc(7.7551vw + 65.91837px)!important
+}
+.u-pt95{
+  padding-top:calc(7.7551vw + 65.91837px)!important
+}
+.u-pb95{
+  padding-bottom:calc(7.7551vw + 65.91837px)!important
+}
+.u-pl95{
+  padding-left:calc(7.7551vw + 65.91837px)!important
+}
+.u-pr95{
+  padding-right:calc(7.7551vw + 65.91837px)!important
+}
+.u-mt100{
+  margin-top:calc(8.16327vw + 69.38776px)!important
+}
+.u-mb100{
+  margin-bottom:calc(8.16327vw + 69.38776px)!important
+}
+.u-ml100{
+  margin-left:calc(8.16327vw + 69.38776px)!important
+}
+.u-mr100{
+  margin-right:calc(8.16327vw + 69.38776px)!important
+}
+.u-pt100{
+  padding-top:calc(8.16327vw + 69.38776px)!important
+}
+.u-pb100{
+  padding-bottom:calc(8.16327vw + 69.38776px)!important
+}
+.u-pl100{
+  padding-left:calc(8.16327vw + 69.38776px)!important
+}
+.u-pr100{
+  padding-right:calc(8.16327vw + 69.38776px)!important
+}
\ No newline at end of file
diff --git a/src/scss/style.scss b/src/scss/style.scss
new file mode 100644
index 0000000..538e6df
--- /dev/null
+++ b/src/scss/style.scss
@@ -0,0 +1,40 @@
+
+@use "foundation/destyle";
+@use "foundation/default";
+@use "foundation/animations";
+
+
+@use "layout/header";
+@use "layout/footer";
+
+
+
+
+@use "object/components/text";
+@use "object/components/heading";
+@use "object/components/table";
+@use "object/components/list";
+@use "object/components/button";
+@use "object/components/label";
+@use "object/components/box";
+@use "object/components/ico";
+@use "object/components/common_sectioning";
+@use "object/components/cta";
+@use "object/components/tab";
+@use "object/components/card_slider";
+@use "object/components/gallery_slider";
+@use "object/components/modal";
+@use "object/components/lower_kv";
+@use "object/components/lower_intro";
+@use "object/components/post_archive";
+@use "object/components/post_single";
+
+
+@use "object/project/top";
+@use "object/project/company";
+@use "object/project/contact";
+
+
+@use "object/utility/alignment";
+@use "object/utility/display";
+@use "object/utility/margin";
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..6226f62
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,125 @@
+const path = require('path');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require("copy-webpack-plugin");
+
+module.exports = (env, argv) => {
+
+    // 開発モードかどうか
+    // モード（none / production / development）
+    const IS_DEVELOPMENT = argv.mode === 'development';
+
+    const configs = {
+
+        mode: argv.mode,
+
+        // 開発パス
+        entry: {
+            'index': path.resolve(__dirname, "src/js/index.js"),
+            'style.css': path.resolve(__dirname, 'src/scss/style.scss')
+        },
+
+        // 出力パス
+        output: {
+            filename: 'js/[name].js',
+            path: path.resolve(__dirname, 'dist'),
+        },
+
+        plugins: [
+            // 出力先のフォルダを一旦空に
+            new CleanWebpackPlugin({
+                // 対象ファイル指定
+                cleanOnceBeforeBuildPatterns: [ // 複数ある場合は配列で指定
+                   // '**/*', // 出力フォルダ（output: で指定したパス）内のすべてのファイル
+                    'css/*',
+                    'js/*',
+                    'img/*',
+                ],
+            }),
+            new RemoveEmptyScriptsPlugin(), // CSS別出力時の不要JSファイルを削除
+            new MiniCssExtractPlugin({ // CSSの出力先
+                filename: 'css/[name]'// 出力ファイル名を相対パスで指定（[name]にはentry:で指定したキーが入る）
+            }),
+            new CopyPlugin({
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, 'src/img'),
+                        to: path.resolve(__dirname, 'dist/img'),
+                    }
+                ],
+            }),
+        ],
+
+        module: {
+            rules: [
+                // JS
+                {
+                    test: /\.js$/,
+                    use: [
+                        {
+                            loader: "babel-loader",
+                            options: {
+                                presets: [
+                                    // ES5 に変換
+                                    "@babel/preset-env"
+                                ]
+                            }
+                        }
+                    ]
+                },
+                {
+                    test: /\.(scss|css|sass)$/,
+                    use: [
+                        MiniCssExtractPlugin.loader, // JSとCSSを別々に出力する
+                        {
+                            loader: "css-loader",
+                            options: { url: false }
+                        },
+                        'postcss-loader', // オプションはpostcss.config.jsで指定
+                        'sass-loader',
+                    ],
+                },
+
+
+                // {
+                //     test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
+                //     type: 'asset/resource',
+                //     generator: {
+                //         filename: 'plugin_fonts/[name][ext]'
+                //     }
+                // },
+                // {
+                //     test: /\.(jpg|png|gif|svg)$/,
+                //     type: 'asset/resource',
+                //     generator: {
+                //         filename: 'plugin_images/[name][ext]'
+                //     }
+                // }
+            ],
+        },
+        // node_modules を監視（watch）対象から除外
+        watchOptions: {
+            followSymlinks: true,
+            ignored: /node_modules/,
+            poll: 1000, //毎秒変更を確認します
+        },
+        devServer: {
+            static: {
+                directory: path.join(__dirname, 'dist'),
+            },
+            watchFiles: [
+                'src/**/*.js',
+                'src/**/*.scss',
+                'public/**/*'
+            ],
+        },
+
+    }
+    if (IS_DEVELOPMENT) {
+        // development であれば、devtool を追加
+        configs.devtool = 'cheap-module-source-map';
+    }
+
+    return configs;
+};
\ No newline at end of file