contact us

2021-09-29 06:23:02 -07:00 · 2021-09-29 06:23:02 -07:00 · 94546eff81
--- a/backend/config/database.php
+++ b/backend/config/database.php
@ -48,8 +48,8 @@ return [
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
-            'database' => env('DB_DATABASE', 'forge'),
-            'username' => env('DB_USERNAME', 'forge'),
+            'database' => env('DB_DATABASE', 'laravel_local'),
+            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', ''),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@ -13,6 +13,9 @@
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
-        "postcss": "^8.1.14"
+        "postcss": "^8.1.14",
+        "resolve-url-loader": "^4.0.0",
+        "sass": "^1.42.1",
+        "sass-loader": "^12.1.0"
    }
 }
--- a/backend/public/css/app.css
+++ b/backend/public/css/app.css
@ -0,0 +1 @@
+
--- a/backend/public/css/index.css
+++ b/backend/public/css/index.css
@ -0,0 +1,153 @@
+@charset "UTF-8";
+/**
+ * VARIABLE
+ * global...サイト全体に使用するサイズや数値に関する変数です。
+ * breakpoint...メディアクエリで使用するブレイクポイントです。
+ * font-family...font-family指定をまとめています。
+ * color...グローバルに使用する色指定です。
+ * z-index...z-indexの並び順を管理します。
+ * easing...cubic-bezier関数を使用したタイミング関数を定義しています。
+ *
+ * FUNCTION
+ * strip-unit...pxやremなどの単位を取り除きます。
+ * em...pxをemに変換します。
+ * rem...pxをremに変換します。
+ * tint...白色を加えて明度を明るくします。
+ * shade...黒色を加えて明度を暗くします。
+ * z-index...z-indexの並び順を管理します。
+ * tracking...Photoshopのカーニングをemに変換します。
+ *
+ * MIXIN
+ * mq-up...メディアクエリを`min-width`で挿入します。
+ * mq-down...メディアクエリを`max-width`で挿入します。
+ * responsive...レスポンシブ対応クラスを生成します。
+ * clearfix...floatの解除をします。
+ * on-event...:hover, :active, :focusをまとめて指定します。
+ * sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
+ *
+ * BASE
+ * normalize...Normalize.cssをインポートしています。
+ * base...タイプセレクタと属性セレクタのデフォルトスタイルです。
+ *
+ * LAYOUT
+ * header...ヘッダーエリアのコンテナブロックのスタイルです。
+ * footer...フッターエリアのコンテナブロックのスタイルです。
+ * main...コンテンツエリアのコンテナブロックのスタイルです。
+ * side...サイドバーエリアのコンテナブロックのスタイルです。
+ * section...`<section>`要素を使うようなセクションの余白を管理します。
+ *
+ * COMPONENT
+ * wrapper...最大幅を指定します。
+ * layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
+ * media...画像とテキストが横並びになるオブジェクトです。
+ * list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
+ * embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
+ * table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
+ *
+ * PROJECT
+ * icon...アイコンフォントです。テンプレートから自動で生成されます。
+ * icon-extend...アイコンフォントを拡張するModifierです。
+ * button...ボタンコンポーネントです。
+ * breadcrumb...パンくずリストコンポーネントです。
+ * label...インラインのラベルコンポーネントです。
+ * badge...投稿数のような数値を表示するバッジコンポーネントです。
+ * card...カードタイプのコンポーネントです。
+ * split...定義リストをブロックからインラインにするコンポーネントです。
+ * notification...お知らせエリアのコンポーネントです。
+ *
+ * SCOPE
+ * blog...ブログページのスタイルです。
+ *
+ * UTILITY
+ * text...テキストのスタイルに関する汎用クラスです。
+ * image...画像のレイアウトに関する汎用クラスです。
+ * margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
+ * display...要素の表示や改行をコントロールする場合に使用します。
+ * width...おもにグリッドで使用する`width`を指定する汎用クラスです。
+ * offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
+ * percent...`width`プロパティを5%刻みで指定する汎用クラスです。
+ */
+/**
+ * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
+ * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
+ * 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
+ */
+/* =============================================================================
+   #Foundation
+   ========================================================================== */
+/**
+ * Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
+ * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
+ * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
+ */
+/* =============================================================================
+   #Layout
+   ========================================================================== */
+/**
+ * Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
+ * 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
+ * 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
+ * グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
+ * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
+ * プレフィックス（接頭辞）として`l-`をつけます。
+ */
+/* =============================================================================
+   #Object
+   ========================================================================== */
+/**
+ * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
+ * 拡張性などによって、4つのレイヤーにわけられます。
+ * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
+ * 1. Component（`c-`）
+ * 2. Project（`p-`）
+ * 3. Scope(`s-`)
+ * 4. Utility（`u-`）
+ *
+ * ランディングページのようにページ特有のスタイルを多く含む場合は、
+ * ページ専用のCSSファイルを作成することもできます。
+ * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
+ * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
+ */
+/* -----------------------------------------------------------------------------
+   #Component
+   -------------------------------------------------------------------------- */
+/**
+ * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
+ * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
+ * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
+ * 例えばgridやmediaといったレイアウトパターンが該当します。
+ * プレフィックス（接頭辞）として`c-`をつけます。
+ */
+/* -----------------------------------------------------------------------------
+   #Project
+   -------------------------------------------------------------------------- */
+/**
+ * Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
+ * 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`p-`をつけます。
+ */
+/* -----------------------------------------------------------------------------
+   #Scope
+   -------------------------------------------------------------------------- */
+/**
+ * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
+ * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
+ * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
+ * 例えばブログページのスタイルとして_blog.scssを作成します。
+ * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、
+ * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`s-`をつけます。
+ */
+/* -----------------------------------------------------------------------------
+   #Utility
+   -------------------------------------------------------------------------- */
+/**
+ * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
+ * コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
+ * `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
+ * pxよりもemや%で指定することを推奨します。
+ * 確実にスタイルを適応させるために`!important`を使用します。
+ * プレフィックス（接頭辞）として`u-`をつけます。
+ */
--- a/backend/public/js/app.js
+++ b/backend/public/js/app.js
--- a/backend/public/mix-manifest.json
+++ b/backend/public/mix-manifest.json
@ -0,0 +1,4 @@
+{
+    "/js/app.js": "/js/app.js",
+    "/css/app.css": "/css/app.css"
+}
--- a/backend/resources/js/component/header.js
+++ b/backend/resources/js/component/header.js
--- a/backend/resources/sass/.DS_Store
+++ b/backend/resources/sass/.DS_Store
--- a/backend/resources/sass/app.scss
+++ b/backend/resources/sass/app.scss
@ -0,0 +1,67 @@
+@charset "UTF-8";
+
+$breakpoint-up: (
+    'sm': 'screen and (min-width: 600px)',
+    'md': 'screen and (min-width: 900px)',
+) !default;
+
+$breakpoint-down: (
+    'sm': 'screen and (max-width: 599px)',
+    'md': 'screen and (max-width: 899px)',
+) !default;
+
+@mixin mq_up($breakpoint: md) {
+    @media #{map-get($breakpoint-up, $breakpoint)} {
+        @content;
+    }
+}
+
+@mixin mq_down($breakpoint: md) {
+    @media #{map-get($breakpoint-down, $breakpoint)} {
+        @content;
+    }
+}
+
+/* Fonts */
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+/* Variables */
+@import 'variables';
+
+// Bootstrap
+// @import '~bootstrap/scss/bootstrap';
+
+
+/* ---------------------------------------------------------------------------------
+	color
+--------------------------------------------------------------------------------- */
+/* color */
+$colorRed: #af0606;
+$colorBlue: #004DC7;
+$colorBlack: #000000;
+$colorGray: #B2B2B2;
+/* border color */
+$borderColorGray: #eeeeee;
+/* input color */
+$inputBorderGray: #D8D8D8;
+
+
+/* ---------------------------------------------------------------------------------
+	foundation
+--------------------------------------------------------------------------------- */
+/* base */
+
+
+
+/* ---------------------------------------------------------------------------------
+	layout
+    --------------------------------------------------------------------------------- */
+@import "./variables";
+
+@import "./layout/_footer";
+@import "./layout/_header";
+@import "./layout/_main";
+@import "./layout/_section";
+@import "./layout/_content";
+@import "./layout/_side";
+
--- a/backend/resources/sass/assets/.DS_Store
+++ b/backend/resources/sass/assets/.DS_Store
--- a/backend/resources/sass/assets/css/.DS_Store
+++ b/backend/resources/sass/assets/css/.DS_Store
--- a/backend/resources/sass/assets/css/single.scss
+++ b/backend/resources/sass/assets/css/single.scss
@ -0,0 +1,27 @@
+// -----------------------------------------------------------------------------
+// #Single
+// -----------------------------------------------------------------------------
+
+// 各HTMLファイル専用のscssファイルで読み込む変数と関数をまとめています。
+// variable, function, mixinレイヤーでファイルを追加した場合はこのファイルにも追記してください。
+// `/css/single.scss` では以下のパスでインポートします。
+// @import "../assets/css/single";
+@import "../../foundation/variable/_global";
+@import "../../foundation/variable/_breakpoint";
+@import "../../foundation/variable/_font-family";
+@import "../../foundation/variable/_color";
+@import "../../foundation/variable/_z-index";
+@import "../../foundation/variable/_easing";
+
+@import "../../foundation/function/_em";
+@import "../../foundation/function/_rem";
+@import "../../foundation/function/_tint";
+@import "../../foundation/function/_shade";
+
+@import "../../foundation/mixin/_pc";
+@import "../../foundation/mixin/_sp";
+@import "../../foundation/mixin/_responsive";
+@import "../../foundation/mixin/_clearfix";
+@import "../../foundation/mixin/_on-event";
+@import "../../foundation/mixin/_sr-only";
+@import "../../foundation/mixin/_layout";
--- a/backend/resources/sass/assets/css/style.scss
+++ b/backend/resources/sass/assets/css/style.scss
@ -0,0 +1,243 @@
+@charset "UTF-8";
+
+/**
+ * VARIABLE
+ * global...サイト全体に使用するサイズや数値に関する変数です。
+ * breakpoint...メディアクエリで使用するブレイクポイントです。
+ * font-family...font-family指定をまとめています。
+ * color...グローバルに使用する色指定です。
+ * z-index...z-indexの並び順を管理します。
+ * easing...cubic-bezier関数を使用したタイミング関数を定義しています。
+ *
+ * FUNCTION
+ * strip-unit...pxやremなどの単位を取り除きます。
+ * em...pxをemに変換します。
+ * rem...pxをremに変換します。
+ * tint...白色を加えて明度を明るくします。
+ * shade...黒色を加えて明度を暗くします。
+ * z-index...z-indexの並び順を管理します。
+ * tracking...Photoshopのカーニングをemに変換します。
+ *
+ * MIXIN
+ * mq-up...メディアクエリを`min-width`で挿入します。
+ * mq-down...メディアクエリを`max-width`で挿入します。
+ * responsive...レスポンシブ対応クラスを生成します。
+ * clearfix...floatの解除をします。
+ * on-event...:hover, :active, :focusをまとめて指定します。
+ * sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
+ * layout...layoutオブジェクトのベーススタイルです。
+ * media...mediaオブジェクトのベーススタイルです。
+ * flag...flagオブジェクトのベーススタイルです。
+ * list-unstyled...list-unstyledオブジェクトのベーススタイルです。
+ * list-mark...list-markオブジェクトのベーススタイルです。
+ * ratio...ratioオブジェクトのベーススタイルです。
+ * box...boxオブジェクトのベーススタイルです。
+ *
+ * BASE
+ * normalize...Normalize.cssをインポートしています。
+ * base...タイプセレクタと属性セレクタのデフォルトスタイルです。
+ *
+ * LAYOUT
+ * header...`<body>`タグ直下にある`<header>`タグのスタイルです。
+ * footer...`<body>`タグ直下にある`<footer>`タグのスタイルです。
+ * main...`<main>`タグのスタイルです。
+ * content...`<article>`タグが使われるようなメインコンテンツのスタイルです。
+ * side...`<aside>`タグが使われるようなサイドバーのスタイルです。
+ * section...`<section>`要素を使うようなセクションの余白を管理します。
+ *
+ * COMPONENT
+ * wrapper...最大幅を指定します。
+ * layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
+ * media...画像とテキストが横並びになるオブジェクトです。テキストを画像に回り込みさせます。
+ * flag...画像とテキストが横並びになるオブジェクトです。縦方向の指定ができます。
+ * list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
+ * list-ordered...番号付きリストを入れ子レベルに応じて、1, 1.1のように区切り文字を付け加えます。
+ * list-mark...リストアイテムの左にアイコンを配置します。
+ * embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
+ * ratio...アスペクト比を固定したまま伸縮させます。
+ * table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
+ *
+ * PROJECT
+ * icon...アイコンフォントです。テンプレートから自動で生成されます。
+ * icon-extend...アイコンフォントを拡張するModifierです。
+ * button...ボタンコンポーネントです。
+ * breadcrumb...パンくずリストコンポーネントです。
+ * label...インラインのラベルコンポーネントです。
+ * box...画像やテキストなどを縦に並べるコンポーネントです。
+ * card...カードタイプのコンポーネントです。
+ * notification...お知らせエリアのコンポーネントです。
+ * meeting...ミーティングエリアのコンポーネントです。
+ * article...詳細ページのコンポーネントです。
+ * modal...モーダルのコンポーネントです。 
+ * search...検索ページのコンポーネントです。 
+ * profile...プロフィールページのコンポーネントです。
+ * edit...エディットページのコンポーネントです。
+ * 
+ * SCOPE
+ * blog...ブログページのスタイルです。
+ *
+ * UTILITY
+ * text...テキストのスタイルに関する汎用クラスです。
+ * align...画像などを中央や右側に配置します。
+ * margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
+ * display...要素の表示や改行をコントロールする場合に使用します。
+ * width...おもにグリッドで使用する`width`を指定する汎用クラスです。
+ * offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
+ * percent...`width`プロパティを5%刻みで指定する汎用クラスです。
+ * sr-only...要素を非表示にさせますが、スクリーンリーダーには読み上げられます。
+ */
+
+/**
+ * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
+ * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
+ * 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
+ */
+
+/* =============================================================================
+   #Foundation
+   ========================================================================== */
+//
+// Sassの変数と関数を定義します。
+// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
+// プレフィックス（接頭辞）として`_`をつけます。
+//
+@import"../../foundation/variable/_global";
+@import "../../foundation/variable/_breakpoint";
+@import "../../foundation/variable/_font-family";
+@import "../../foundation/variable/_color";
+@import "../../foundation/variable/_z-index";
+@import "../../foundation/variable/_easing";
+
+@import "../../foundation/function/_em";
+@import "../../foundation/function/_rem";
+@import "../../foundation/function/_tint";
+@import "../../foundation/function/_shade";
+
+@import "../../foundation/mixin/_pc";
+@import "../../foundation/mixin/_sp";
+@import "../../foundation/mixin/_responsive";
+@import "../../foundation/mixin/_clearfix";
+@import "../../foundation/mixin/_on-event";
+@import "../../foundation/mixin/_sr-only";
+@import "../../foundation/mixin/_layout";
+@import "../../foundation/mixin/_box";
+
+/**
+ * Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
+ * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
+ * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
+ */
+@import "../../foundation/base/_normalize";
+@import "../../foundation/base/_reset";
+@import "../../foundation/base/_base";
+
+
+
+/* =============================================================================
+   #Layout
+   ========================================================================== */
+/**
+ * Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
+ * 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
+ * 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
+ * グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
+ * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
+ * プレフィックス（接頭辞）として`l-`をつけます。
+ */
+@import "../../layout/_header";
+@import "../../layout/_footer";
+@import "../../layout/_main";
+@import "../../layout/_content";
+@import "../../layout/_side";
+@import "../../layout/_section";
+
+/* =============================================================================
+   #Object
+   ========================================================================== */
+/**
+ * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
+ * 拡張性などによって、4つのレイヤーにわけられます。
+ * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
+ * 1. Component（`c-`）
+ * 2. Project（`p-`）
+ * 3. Scope(`s-`)
+ * 4. Utility（`u-`）
+ *
+ * ランディングページのようにページ特有のスタイルを多く含む場合は、
+ * ページ専用のCSSファイルを作成することもできます。
+ * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
+ * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
+ */
+
+/* -----------------------------------------------------------------------------
+   #Component
+   -------------------------------------------------------------------------- */
+/**
+ * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
+ * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
+ * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
+ * 例えばgridやmediaといったレイアウトパターンが該当します。
+ * プレフィックス（接頭辞）として`c-`をつけます。
+ */
+@import "../../object/component/_wrapper";
+@import "../../object/component/_layout";
+
+/* -----------------------------------------------------------------------------
+   #Project
+   -------------------------------------------------------------------------- */
+/**
+ * Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
+ * 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`p-`をつけます。
+ */
+@import "../../object/project/_icon";
+@import "../../object/project/_icon-extend";
+@import "../../object/project/_button";
+@import "../../object/project/_breadcrumb";
+@import "../../object/project/_label";
+@import "../../object/project/_box";
+@import "../../object/project/_card";
+@import "../../object/project/_form";
+@import "../../object/project/_login";
+@import "../../object/project/_user";
+@import "../../object/project/_notification";
+@import "../../object/project/_meeting";
+@import "../../object/project/_article.scss";
+@import "../../object/project/_modal.scss";
+@import "../../object/project/_search.scss";
+@import "../../object/project/_profile.scss";
+@import "../../object/project/_edit.scss";
+
+/* -----------------------------------------------------------------------------
+   #Scope
+   -------------------------------------------------------------------------- */
+/**
+ * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
+ * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
+ * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
+ * 例えばブログページのスタイルとして_blog.scssを作成します。
+ * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、
+ * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`s-`をつけます。
+ */
+@import "../../object/scope/_blog";
+
+/* -----------------------------------------------------------------------------
+   #Utility
+   -------------------------------------------------------------------------- */
+/**
+ * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
+ * コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
+ * `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
+ * pxよりもemや%で指定することを推奨します。
+ * 確実にスタイルを適応させるために`!important`を使用します。
+ * プレフィックス（接頭辞）として`u-`をつけます。
+ */
+@import "../../object/utility/_text";
+@import "../../object/utility/_align";
+@import "../../object/utility/_margin";
+@import "../../object/utility/_display";
+@import "../../object/utility/_percent";
+@import "../../object/utility/_sr-only";
--- a/backend/resources/sass/foundation/.DS_Store
+++ b/backend/resources/sass/foundation/.DS_Store
--- a/backend/resources/sass/foundation/base/.DS_Store
+++ b/backend/resources/sass/foundation/base/.DS_Store
--- a/backend/resources/sass/foundation/base/_base.scss
+++ b/backend/resources/sass/foundation/base/_base.scss
@ -0,0 +1,159 @@
+/* #Base
+   -------------------------------------------------------------------------- */
+/**
+ * Baseレイヤーにはプロジェクトにおける、基本的なベーススタイルを定義します。
+ * 要素セレクタや属性セレクタなど、詳細度はできるかぎり低く保っておきます。
+ * 基本的にclass属性は使用しません。
+ */
+/**
+ * `padding`と`border`を`width`に含めます。
+ * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+html {
+  overflow-x: hidden;
+  font-size: 62.5%;
+  min-height: 100%;
+}
+
+body {
+  min-width: 320px;
+  background: #fff;
+  font-family: "Open Sans", "Myriad", Helvetica, Arial, sans-serif;
+  @include pc{
+    background: #F7FAFC;
+  }
+}
+
+body, button, code, input, optgroup, pre, select, textarea {
+  color: #080808;
+  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Segoe UI, Hiragino Kaku Gothic ProN, Hiragino Sans, ヒラギノ角ゴ ProN W3, Arial, メイリオ, Meiryo, sans-serif;
+  font-size: 1.6rem;
+  word-wrap: break-word;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -moz-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+  -webkit-font-feature-settings: "kern";
+  font-feature-settings: "kern";
+  -webkit-font-kerning: normal;
+  font-kerning: normal;
+  line-height: 1.6;
+}
+
+input[type=number], input[type=url], input[type=tel], input[type=text], input[type=email], input[type=password], select, textarea {
+  font-family: inherit;
+  -webkit-appearance: none; 
+}
+
+img[src$=".svg"]:not([width]), img[src*=".svg?"]:not([width]) {
+
+}
+
+img, legend {
+  max-width: 100%
+}
+
+progress, sub, sup {
+  vertical-align: baseline
+}
+
+body, svg:not(:root) {
+  overflow: hidden
+}
+
+a, legend {
+  color: inherit
+}
+
+a[href^="tel:"] {
+  cursor: text;
+  pointer-events: none;
+  text-decoration: none
+}
+
+[type=submit], a, button{
+  cursor: pointer;
+  text-decoration: none;
+}
+
+ol, ul{
+  list-style: none;
+}
+
+button{
+  padding: 0;
+}
+
+button:focus {
+  outline: 0
+}
+
+input[type="checkbox"], input[type="radio"]{
+  margin-right: 0.5em;
+  margin-top: -2px;
+}
+input[type=number], input[type=url], input[type=tel], input[type=text], input[type=email], input[type=password], input[type=search], select, textarea {
+  border: 1px solid #D0D0D0;
+  background-color: #fff;
+  outline: 0!important;
+  width: 100%;
+  border-radius: 10px;
+  padding: 12px 18px;
+  font-weight: 400;
+  color: #414141;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  @include pc{
+    padding: 15px 20px;
+    border-radius: 14px;
+  }
+}
+input[type=search]{
+  @include pc{
+    padding-right: 52px;
+  }
+  @include sp{
+    padding-right: 40px;
+  }
+}
+
+html:not(.sp) input[type=number]:focus, html:not(.sp) input[type=url]:focus, html:not(.sp) input[type=tel]:focus,  html:not(.sp) input[type=text]:focus, 
+html:not(.sp) input[type=email]:focus, html:not(.sp) input[type=password]:focus, html:not(.sp) select:focus, html:not(.sp) textarea:focus{
+  border-color: #00c4ac;
+  background-color: #fff;
+  -webkit-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
+}
+
+html.sp input[type=number], html.sp input[type=url], html.sp input[type=tel], html.sp input[type=text], html.sp input[type=email], html.sp input[type=password], html.sp select, html.sp textarea {
+  font-size: 16px!important;
+  font-size: 1.6rem!important
+}
+
+input[type=file]{
+  display: none;
+}
+
+select {
+  -moz-appearance: none;
+  background-color: #fff
+}
+
+input[type=number]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
+  color: #999;
+  font-size: 1.6rem;
+}
+
+input[type=number]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, textarea:-ms-input-placeholder {
+  color: #999;
+  font-size: 1.6rem;
+}
+
+input[type=number]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=password]::-moz-placeholder, textarea::-moz-placeholder {
+  color: #999;
+  font-size: 1.6rem;
+}
+
+h1,h2,h3,h4,h5{
+  font-weight: bold;
+}
--- a/backend/resources/sass/foundation/base/_normalize.scss
+++ b/backend/resources/sass/foundation/base/_normalize.scss
@ -0,0 +1,427 @@
+/* #Normalize.css
+   -------------------------------------------------------------------------- */
+
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
--- a/backend/resources/sass/foundation/base/_reset.scss
+++ b/backend/resources/sass/foundation/base/_reset.scss
@ -0,0 +1,105 @@
+/* #Reset.css
+   -------------------------------------------------------------------------- */
+
+/*
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+body {
+    line-height:1;
+}
+
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section {
+    display:block;
+}
+
+nav ul {
+    list-style:none;
+}
+
+blockquote, q {
+    quotes:none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+    content:'';
+    content:none;
+}
+
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000;
+    font-style:italic;
+    font-weight:bold;
+}
+
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;  
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}
--- a/backend/resources/sass/foundation/function/_em.scss
+++ b/backend/resources/sass/foundation/function/_em.scss
@ -0,0 +1,9 @@
+// @desc - pxをemに変換します。
+// @param {Number} $self - 指定したいpx。
+// @param {Number} $parent - 基準となるpx。
+// @example - _em(15px, 30px) => 0.5em
+@use "sass:math";
+
+@function _em($self, $parent) {
+  @return math.div($self, $parent) * 1em;
+}
--- a/backend/resources/sass/foundation/function/_rem.scss
+++ b/backend/resources/sass/foundation/function/_rem.scss
@ -0,0 +1,10 @@
+// @desc - pxをremに変換します。
+// @param {Number} - 指定したいピクセル値。
+// @param {String} $key [sm] - 指定するブレイクポイントを`$_font-size`のキーで指定。
+// @example - _rem(15px) => 1rem
+@use "sass:math";
+
+@function _rem($px, $key: 'sm') {
+  $value: map-get($_font-size, $key);
+  @return math.div($px, $value) * 1rem;
+}
--- a/backend/resources/sass/foundation/function/_shade.scss
+++ b/backend/resources/sass/foundation/function/_shade.scss
@ -0,0 +1,6 @@
+// @desc - 黒色を加えて明度を暗くします。
+// @param {String}
+// @example - _shade(blue, 50%) => navy
+@function _shade($color, $percent) {
+  @return mix(#000, $color, $percent);
+}
--- a/backend/resources/sass/foundation/function/_tint.scss
+++ b/backend/resources/sass/foundation/function/_tint.scss
@ -0,0 +1,6 @@
+// @desc - 白色を加えて明度を明るくします。
+// @param {String}
+// @example - _tint(blue, 50%) => #8080ff
+@function _tint($color, $percent) {
+  @return mix(#fff, $color, $percent);
+}
--- a/backend/resources/sass/foundation/mixin/.DS_Store
+++ b/backend/resources/sass/foundation/mixin/.DS_Store
--- a/backend/resources/sass/foundation/mixin/_box.scss
+++ b/backend/resources/sass/foundation/mixin/_box.scss
@ -0,0 +1,38 @@
+@mixin _p-box() {
+  display: block;
+  @include _clearfix;
+}
+
+@mixin _p-box__image($margin-bottom: null) {
+  position: relative;
+  display: block;
+  margin-bottom: $margin-bottom;
+  > img {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+@mixin _p-box__labels() {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding-left: 0;
+  list-style-type: none;
+  @include _clearfix;
+}
+
+@mixin _p-box__label() {
+  float: left;
+}
+
+@mixin _p-box__content($padding: 0) {
+  display: block;
+  padding: $padding;
+  > :first-child {
+    margin-top: 0;
+  }
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
--- a/backend/resources/sass/foundation/mixin/_clearfix.scss
+++ b/backend/resources/sass/foundation/mixin/_clearfix.scss
@ -0,0 +1,30 @@
+// @desc - クリアーフィックスのスタイルを挿入します。
+// @param {Bool, String} - 引数$importantに"important"を渡すと`!important`の指定ができます。
+// @example scss - Usage
+//
+// .foo { @include _clearfix; }
+// .bar { @include _clearfix(important); }
+//
+// @example css - CSS output
+// .foo:after {
+//   content: "";
+//   display: block;
+//   clear: both;
+// }
+// .bar:after {
+//   content: "" !important;
+//   display: block !important;
+//   clear: both !important;
+// }
+@mixin _clearfix($important: false) {
+  @if ($important == "important") {
+    $important: unquote("!important");
+  } @else {
+    $important: null;
+  }
+  &:after {
+    content: "" $important;
+    display: block $important;
+    clear: both $important;
+  }
+}
--- a/backend/resources/sass/foundation/mixin/_layout.scss
+++ b/backend/resources/sass/foundation/mixin/_layout.scss
@ -0,0 +1,15 @@
+@mixin _c-layout() {
+  display: block;
+  margin: 0;
+  padding: 0;
+  font-size: 0;
+  list-style-type: none;
+}
+
+@mixin _c-layout__item() {
+  display: inline-block;
+  width: 100%;
+  font-size: medium;
+  font-size: 1rem;
+  vertical-align: top;
+}
--- a/backend/resources/sass/foundation/mixin/_on-event.scss
+++ b/backend/resources/sass/foundation/mixin/_on-event.scss
@ -0,0 +1,30 @@
+// @desc - マウスオーバーなどのイベントをまとめて指定します。
+// @author - Harry Roberts
+// @param {Bool} $self [false] - Whether or not to include current selector
+// @link https://twitter.com/csswizardry/status/478938530342006784 Original tweet from Harry Roberts
+// @example scss - Usage
+// .foo {
+//   @include _on-event{
+//     background-color: red;
+//   }
+// }
+// @example css - CSS output
+// .foo:hover, .foo:active, .foo:focus {
+//   background-color: red;
+// }
+@mixin _on-event($self: false) {
+  @if $self {
+    &,
+    &:hover,
+    &:active,
+    &:focus {
+      @content;
+    }
+  } @else {
+    &:hover,
+    &:active,
+    &:focus {
+      @content;
+    }
+  }
+}
--- a/backend/resources/sass/foundation/mixin/_pc.scss
+++ b/backend/resources/sass/foundation/mixin/_pc.scss
@ -0,0 +1,29 @@
+// @desc - メディアクエリを`min-width`で挿入します。
+// @param {String} $breakpoint [$_default-breakpoint] - 引数に変数のキーワードを渡します。
+// @see - $_breakpoint-up
+// @example scss - Usage
+// .foo {
+//   color: red;
+//   @include _mq-up {
+//     color: blue;
+//   }
+// }
+// @example css - CSS output
+// .foo {
+//   color: red;
+// }
+// @media screen and (min-width: 768px) {
+//   .foo {
+//     color: blue;
+//   }
+// }
+@mixin pc($breakpoint: $_default-breakpoint) {
+  @if map-has-key($_breakpoint-up, $breakpoint) {
+    @media screen and (min-width: 1068px) {
+      @content;
+    }
+  } @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+    + "Please make sure it is defined in `$_breakpoint-up` map.";
+  }
+}
--- a/backend/resources/sass/foundation/mixin/_responsive.scss
+++ b/backend/resources/sass/foundation/mixin/_responsive.scss
@ -0,0 +1,29 @@
+// @desc - class名とルールセットを指定することで、レスポンシブに対応したスタイルを生成します。
+// @param {String} - 共通のclass名をクウォートとドットをつけて渡します（e.g. `.foo`）。
+// @param {Strind} - 使用するブレイクポイントを定義した変数を渡します。
+// @see - foundation/variable/_breakpoint.scss
+// @example scss - Usage
+// @include _responsive(".display-none") {
+//   display: none;
+// }
+// @example css - CSS output
+// .display-none {
+//   display: none;
+// }
+// @media screen and (min-width: 400px) {
+//   .display-none-sm {
+//     display: none;
+//   }
+// }
+@mixin _responsive($class, $bp: $_breakpoint-up) {
+  #{$class} {
+    @content;
+  }
+  @each $suffix, $value in $bp {
+    @media #{$value} {
+      #{$class}-#{$suffix} {
+        @content;
+      }
+    }
+  }
+}
--- a/backend/resources/sass/foundation/mixin/_sp.scss
+++ b/backend/resources/sass/foundation/mixin/_sp.scss
@ -0,0 +1,52 @@
+// @desc - メディアクエリを`max-width`で挿入します。
+// @param {String} $breakpoint [$_default-breakpoint] - 引数に変数のキーワードを渡します。
+// @see - $_breakpoint-down
+// @example scss - Usage
+// .foo {
+//   color: red;
+//   @include sp {
+//     color: blue;
+//   }
+// }
+// @example css - CSS output
+// .foo {
+//   color: red;
+// }
+// @media screen and (max-width: 767px) {
+//   .foo {
+//     color: blue;
+//   }
+// }
+@mixin sp($breakpoint: $_default-breakpoint) {
+  @if map-has-key($_breakpoint-down, $breakpoint) {
+    @media screen and (max-width: 1067px) {
+      @content;
+    }
+  } @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+    + "Please make sure it is defined in `$_breakpoint-down` map.";
+  }
+}
+
+@mixin sp02($breakpoint: $_default-breakpoint) {
+  @if map-has-key($_breakpoint-down, $breakpoint) {
+    @media screen and (max-width: 430px) {
+      @content;
+    }
+  } @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+    + "Please make sure it is defined in `$_breakpoint-down` map.";
+  }
+}
+
+
+@mixin min($breakpoint: $_default-breakpoint) {
+  @if map-has-key($_breakpoint-down, $breakpoint) {
+    @media screen and (max-width: 374px) {
+      @content;
+    }
+  } @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
+    + "Please make sure it is defined in `$_breakpoint-down` map.";
+  }
+}
--- a/backend/resources/sass/foundation/mixin/_sr-only.scss
+++ b/backend/resources/sass/foundation/mixin/_sr-only.scss
@ -0,0 +1,17 @@
+// @desc - 表示だけをせずに、スクリーンリーダーにだけ対応したい場合に使用します。
+// @param {String} - 引数に"important"を渡すと`!important`の指定ができます。
+@mixin _sr-only($important: false) {
+  @if ($important == "important") {
+    $important: unquote("!important");
+  } @else {
+    $important: null;
+  }
+  position: absolute $important;
+  width: 1px $important;
+  height: 1px $important;
+  margin: -1px $important;
+  border: 0 $important;
+  overflow: hidden $important;
+  padding: 0 $important;
+  clip: rect(0, 0, 0, 0) $important;
+}
--- a/backend/resources/sass/foundation/variable/.DS_Store
+++ b/backend/resources/sass/foundation/variable/.DS_Store
--- a/backend/resources/sass/foundation/variable/_animation.scss
+++ b/backend/resources/sass/foundation/variable/_animation.scss
@ -0,0 +1,22 @@
+// // アニメーションの管理
+
+// @include mixin.pc{
+//   .fade {
+//     transition: opacity 0.3s ease;
+//     -webkit-backface-visibility: hidden;
+//     backface-visibility: hidden;
+//     &:hover{
+//       opacity: 0.7;
+//       cursor: pointer;
+//     }
+//   }
+//   .fade02 {
+//     transition: opacity 0.3s ease;
+//     -webkit-backface-visibility: hidden;
+//     backface-visibility: hidden;
+//     &:hover{
+//       opacity: 0.5;
+//       cursor: pointer;
+//     }
+//   }
+// }
--- a/backend/resources/sass/foundation/variable/_breakpoint.scss
+++ b/backend/resources/sass/foundation/variable/_breakpoint.scss
@ -0,0 +1,15 @@
+// min-width
+$_breakpoint-up: (
+  'sm': 'screen and (min-width: 400px)',
+  'md': 'screen and (min-width: 768px)',
+  'lg': 'screen and (min-width: 1000px)',
+  'xl': 'screen and (min-width: 1200px)',
+) !default;
+
+// max-width
+$_breakpoint-down: (
+  'sm': 'screen and (max-width: 399px)',
+  'md': 'screen and (max-width: 767px)',
+  'lg': 'screen and (max-width: 999px)',
+  'xl': 'screen and (max-width: 1199px)',
+) !default;
--- a/backend/resources/sass/foundation/variable/_color.scss
+++ b/backend/resources/sass/foundation/variable/_color.scss
@ -0,0 +1,15 @@
+// base color
+$_color-text: #000 !default;
+$_color-text--gray: #ccc !default;
+$_color-text--gray02: #6f7372 !default;
+$_color-text--gray03: #989898 !default;
+$_color-bg: #fff !default;
+$_color-bg02: #F7FAFC !default;
+
+// link color
+$_color-link--visited: null !default;
+
+// component color
+$_color-ui-gray: #F5F7F8 !default;
+$_color-ui-bg: #fff !default;
+$_color-ui-yellow: #F0DE00 !default;
--- a/backend/resources/sass/foundation/variable/_easing.scss
+++ b/backend/resources/sass/foundation/variable/_easing.scss
@ -0,0 +1,48 @@
+// `transition-timing-function`と`animation-timing-function`プロパティに指定する、
+// cubic-bezier() 関数記法で定義した、3次ベジェ曲線のタイミング関数です。
+// 実際に動きは、以下のサイトで確認できます。
+// https://matthewlein.com/ceaser/
+//
+// デフォルトのタイミング関数には以下のような特徴があります。
+// easeは「ゆっくりと」、inは「始まる」、outは「終わる」に置き換えると想像しやすいです。
+// * linear - 一定の速度で変化する
+// * ease - 開始時から急速に加速して、中盤から緩やかになる
+// * ease-in - 緩やかに始まり、次第に加速し、突然停止する
+// * ease-in-out - 緩やかに始まり、加速が緩やかになっていく
+// * ease-out - 急速に始まり、次第に緩やかになっていく
+
+$_linear: cubic-bezier( 0.250, 0.250, 0.750, 0.750 ) !default;
+$_ease: cubic-bezier( 0.250, 0.100, 0.250, 1.000 ) !default;
+
+// ease
+$_ease-in: cubic-bezier( 0.420, 0.000, 1.000, 1.000 ) !default;
+$_ease-in-quad: cubic-bezier( 0.550, 0.085, 0.680, 0.530 ) !default;
+$_ease-in-cubic: cubic-bezier( 0.550, 0.055, 0.675, 0.190 ) !default;
+$_ease-in-quart: cubic-bezier( 0.895, 0.030, 0.685, 0.220 ) !default;
+$_ease-in-quint: cubic-bezier( 0.755, 0.050, 0.855, 0.060 ) !default;
+$_ease-in-sine: cubic-bezier( 0.470, 0.000, 0.745, 0.715 ) !default;
+$_ease-in-expo: cubic-bezier( 0.950, 0.050, 0.795, 0.035 ) !default;
+$_ease-in-circ: cubic-bezier( 0.600, 0.040, 0.980, 0.335 ) !default;
+$_ease-in-back: cubic-bezier( 0.600, -0.280, 0.735, 0.045 ) !default;
+
+// ease-out
+$_ease-out: cubic-bezier( 0.000, 0.000, 0.580, 1.000 ) !default;
+$_ease-out-quad: cubic-bezier( 0.250, 0.460, 0.450, 0.940 ) !default;
+$_ease-out-cubic: cubic-bezier( 0.215, 0.610, 0.355, 1.000 ) !default;
+$_ease-out-quart: cubic-bezier( 0.165, 0.840, 0.440, 1.000 ) !default;
+$_ease-out-quint: cubic-bezier( 0.230, 1.000, 0.320, 1.000 ) !default;
+$_ease-out-sine: cubic-bezier( 0.390, 0.575, 0.565, 1.000 ) !default;
+$_ease-out-expo: cubic-bezier( 0.190, 1.000, 0.220, 1.000 ) !default;
+$_ease-out-circ: cubic-bezier( 0.075, 0.820, 0.165, 1.000 ) !default;
+$_ease-out-back: cubic-bezier( 0.175, 0.885, 0.320, 1.275 ) !default;
+
+// ease-in-out
+$_ease-in-out: cubic-bezier( 0.420, 0.000, 0.580, 1.000 ) !default;
+$_ease-in-out-quad: cubic-bezier( 0.455, 0.030, 0.515, 0.955 ) !default;
+$_ease-in-out-cubic: cubic-bezier( 0.645, 0.045, 0.355, 1.000 ) !default;
+$_ease-in-out-quart: cubic-bezier( 0.770, 0.000, 0.175, 1.000 ) !default;
+$_ease-in-out-quint: cubic-bezier( 0.860, 0.000, 0.070, 1.000 ) !default;
+$_ease-in-out-sine: cubic-bezier( 0.445, 0.050, 0.550, 0.950 ) !default;
+$_ease-in-out-expo: cubic-bezier( 1.000, 0.000, 0.000, 1.000 ) !default;
+$_ease-in-out-circ: cubic-bezier( 0.785, 0.135, 0.150, 0.860 ) !default;
+$_ease-in-out-back: cubic-bezier( 0.680, -0.550, 0.265, 1.550 ) !default;
--- a/backend/resources/sass/foundation/variable/_font-family.scss
+++ b/backend/resources/sass/foundation/variable/_font-family.scss
@ -0,0 +1,160 @@
+// font-familyを定義しています。WindowsとMacで指定する名前が微妙に変わるので、
+// 半角スペースなどを変更しないようにしてください。
+
+// ## ゴシックとsans-serif
+// 欧文書体は"Helvetica Neue"か"Verdana"、
+// "Helvetica Neue"を指定する場合はWindowsのフォールバックに"Arial"か"Verdana"、
+// HelveticaはWindowsではArialとして表示される。
+// 和文書体は游ゴシックかヒラギノ角ゴ、游書体はWindowsのChromeで薄く表示される。
+// MS書体はアンチエイリアスが効かないために指定せず、メイリオを指定する。
+
+// 和欧混植、Helvetica優先、游ゴシックなし
+$_font-family-sans-serif-1: "Helvetica Neue", Helvetica, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !default;
+// 和欧混植、Helvetica優先、游ゴシック優先
+$_font-family-sans-serif-2: "Helvetica Neue", Helvetica, "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !default;
+// 和欧混植、Verdana優先、游ゴシックなし
+$_font-family-sans-serif-3: Verdana, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !default;
+// 和欧混植、游ゴシック優先
+$_font-family-sans-serif-4: YakuHanJP, "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴシック Pro", Meiryo, "メイリオ", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !default;
+// 和文のみ、游ゴシックなし
+$_font-family-sans-serif-5: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !default;
+// 和文のみ、游ゴシック優先
+$_font-family-sans-serif-6: "游ゴシック", YuGothic, "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !default;
+
+
+// ## 明朝とserif
+// 欧文書体は"Times New Roman"か"Georgia"。
+// 和文書体は游明朝かヒラギノ明朝、游書体はWindowsのChromeで薄く表示される。
+// 古いWindows用に"HG明朝E"（Officeをインストールしていれば使える）、フォールバックとしてメイリオ。
+// "ＭＳ Ｐ明朝"はアンチエイリアスが効かないので指定しない。
+// Androidは明朝体に非対応。
+
+// 和欧混植、Times New Roman優先、游明朝なし
+$_font-family-serif-1: "Times New Roman", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif !default;
+// 和欧混植、Times New Roman優先、游明朝優先
+$_font-family-serif-2: "Times New Roman", "游明朝", "YuMincho", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif !default;
+// 和欧混植、Georgia優先、游明朝なし
+$_font-family-serif-3: Georgia, "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif !default;
+// 和欧混植、Georgia優先、游明朝優先
+$_font-family-serif-4: Georgia, "游明朝", "YuMincho", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif !default;
+// 和欧混植、游明朝優先
+$_font-family-serif-5: YuMinch, "Yu Mincho", "游明朝", "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !default;
+// 和文のみ、游明朝なし
+$_font-family-serif-6: "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif !default;
+
+
+// ## 源柔ゴシック
+$_font-family-genju-p: GenJyuuGothic-P, sans-serif; 
+.font-genju-p-r {
+  font-family: GenJyuuGothic-P, sans-serif;
+  font-weight: 400;
+  -webkit-font-feature-settings: "palt";
+  font-feature-settings: "palt"
+}
+.font-genju-p-b {
+  font-family: GenJyuuGothic-P, sans-serif;
+  font-weight: 700;
+  -webkit-font-feature-settings: "palt";
+  font-feature-settings: "palt"
+}
+@font-face {
+  font-family: GenJyuuGothic-P;
+  font-weight: 400;
+  src: url(../../assets/fonts/GenJyuuGothic-P/GenJyuuGothic-P-Regular.woff2) format("woff2"), url(../../assets/fonts/GenJyuuGothic-P/GenJyuuGothic-P-Regular.woff) format("woff"), url(../../assets/fonts/GenJyuuGothic-P/GenJyuuGothic-P-Regular.ttf) format("TrueType")
+}
+@font-face {
+  font-family: GenJyuuGothic-P;
+  font-weight: 700;
+  src: url(../../assets/fonts/GenJyuuGothic-P/GenJyuuGothic-P-Bold.woff2) format("woff2"), url(../../assets/fonts/GenJyuuGothic-P/GenJyuuGothic-P-Bold.woff) format("woff"), url(../../assets/fonts/GenJyuuGothic-P/GenJyuuGothic-P-Bold.ttf) format("TrueType")
+}
+
+
+// ## AdobeBlank
+@font-face {
+  font-family: AdobeBlank;
+  src: url(data:application/font-woff;base64,d09GRk9UVE8AAATUAAkAAAAACkAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA4AAAAOcAAAEhIl9jq09TLzIAAAHIAAAARQAAAGBRQK3+Y21hcAAAAhAAAAAmAAAALAAMAFNoZWFkAAACOAAAADAAAAA2BZfPvmhoZWEAAAJoAAAAGgAAACQHWf+LaG10eAAAAoQAAAAIAAAACAPoAYhtYXhwAAACjAAAAAYAAAAGAAJQAG5hbWUAAAKUAAACKwAAB2b3USAEcG9zdAAABMAAAAATAAAAIP+4ADJ42mNkYGFmYGRkFHRMyU9KdcpJzMvWLS5ITE4FCZr8kP4h080j183D+EOW8Ycc0w955h8SLN2/eX7V/GJh7eVRkmF4xS/DyCcow/CeR1WG4TuPCgMbEwMjAxsDH0M4QzpDOUM72GDPlNS8ksySSuf8gsqizPSMEgUFIwNDYx0QaaoAVqIQXFlckppbrOCZl5xfVJBflFiSmqKgkVFSUmClr19eXq6XCFKml5yfq6+ph+5cQnwGBpCzGJhBBJjNyMj1Q4FHbYoMI6tQD4/grxqRHx2iDEwsQFlGsAoGBla+Px18AK/lT1cAeNpjYGZ+wTiBgZWBgamLKYKBgcEbQjPGMRgx3GFABYzIHEcXJ38GBwYFBgXmgv8dDAzMBQwVCfqM/5GUKDAwAAArbQs0AAAAeNpjYGBgZGAGYgYGHgYWBgUgzQKEIL7C//8Q8v9DMJ8BAEreBlwAAHjaY2BkYGAA4vc75S7F89t8ZWBmfgEUYbjo4/oZQf/vYH7BXADkMjMwgUQBcKYMvHjaY2BkYGAu+N/BAAXMLxgYGVABEwBNCALqAAAD6AGIAAAAAAAAUAAAAgAAeNrtkz9r20AYxp+zpZhSCEnpBzgolKQk5/8m2FOSJckUYgi0U2VZtlzbkpAVG2+dSukYQj5Bh36A0KFzpw6dOvXLpI/k1ynNYkq3UB8n/+798zx3JwTgufoOhcXvmHPBChtcLTiHAl4K5xl/LWyRI2EbTbwVXmP8i3CB/I2s8DjT/ylMffVMmPqqKkx91RSmvjoRpr56JUx9dSVMffVR+An5JuXbWzwlf6Wash7R91L9EFbQuZ5wDuu5d8J5xq+ELfKNsI0kt+xdg84fCRfIvvAG+b3wJtbznzLeTH3zn4Xpax0J09fyhelrTYXpa10L09da9tLXfiFMX/tEmL72G2H62h8Ow2geD/p+onWlVK7upM+63u+GHU+355PEG0/0ceCGcRTGTuJ19ZafJFGzWJzNZsZJy4wbjovbJms5GDnBcHcSOa535vUvRk58P3x/fe7Fk0EY6LIp1eqt07aAHyZuGEzTldmrtMbO0AuTnhkNOhVTN41qrdRYpfxwT7ZqjUOE/MrmiDFAHz4SaI4KSiijip07rpP20WV1Bx65zZ4Jqz2M+a/57QVwmY2plj6dLNdlZitTTRhvosgxy4ZhxVLNZJ1j5rbJv10OMGJVgCF26RGRXUbPOPu4yHLxyupV+XPOmOsBqwLutswdlFDjeVs45Sn/jPisSrLdBpje5Qz2eEstnsChupfV9BgdUbXDjGGvQYP3WWN145/3/Hc39P8NP/A3/AvEJ2JBAHjaY2BmAIP/WxmMGLAAACzCAeoA) format("woff")
+}
+
+
+// ## Yaku Han JP
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 100;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-Thin.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Thin.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Thin.eot)
+}
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 200;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-Light.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Light.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Light.eot)
+}
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 300;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-DemiLight.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-DemiLight.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-DemiLight.eot)
+}
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 400;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-Regular.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Regular.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Regular.eot)
+}
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 500;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-Medium.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Medium.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Medium.eot)
+}
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 700;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-Bold.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Bold.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Bold.eot)
+}
+@font-face {
+  font-family: YakuHanJP;
+  font-weight: 900;
+  src: url(../../assets/fonts/YakuHanJP/YakuHanJP-Black.woff2) format("woff2"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Black.woff) format("woff"), url(../../assets/fonts/YakuHanJP/YakuHanJP-Black.eot)
+}
+
+
+// ## Macで追加できるフォント
+// ヒラギノ丸ゴ→ "ヒラギノ丸ゴ ProN", "Hiragino Maru Gothic ProN"
+// EL Captainで追加されたフォント。
+// 筑紫丸Aゴシック→ "TsukuARdGothic-Regular"（ふところを絞ったデザインの丸ゴシック体で和風、落ち着いた印象）
+// 筑紫丸Bゴシック→ "TsukuBRdGothic-Regular"（筑紫丸Aゴシックよりも特徴がある）
+// クレー→ "Klee"（鉛筆やペンのような手書き風で本文組みに適した書体）
+// ヒラギノ角ゴシック→ "Hiragino Sans"（ヒラギノ角ゴに10種類のウェイトを追加）
+// 游明朝体+36ポかな→ "YuMin_36pKn-Medium"（毛筆表現のある游明朝体で漢字と英数字は含んでいない）
+// San Francisco→ -apple-system
+
+// 主要なフォント。
+// 游ゴシック Windows8.1以降、MacOS10.9以降
+// 游明朝 Windows8.1以降、MacOS10.9以降
+// メイリオ Windows Vista以降
+// ヒラギノ角ゴ ProN Mac OS 10.5以降、iOS
+// ヒラギノ明朝 ProN Mac OS 10.5以降、iOS6以降
+// Droid Sans Android
+// Roboto Android4以降
+
+// WindowsとMacでの共通フォント。
+// Arial
+// Arial Black
+// Comic Sans MS
+// Courier
+// Courier New
+// Georgia
+// Impact
+// Times New Roman
+// Trebuchet MS
+// Verdana
+
+// ブラウザのデフォルトフォント
+// Safari 7 / Mac 10.9 Helvetica / ヒラギノ角ゴシック ProN
+// Firefox 25 / Mac 10.9 ヒラギノ角ゴシック ProN
+// Chrome 30 / Mac 10.9 ヒラギノ角ゴシック ProN
+// IE 11 / Win 8.1 メイリオ
+// IE 8 / Win 7 Arial / ＭＳ Ｐゴシック
+// Firefox 25 / Win 8.1 ＭＳ Ｐゴシック
+// Chrome 30 / Win 8.1 ＭＳ Ｐゴシック
+
+// Androidについて
+// * 明朝体には対応していない
+// * 4.0以降ではRobotoとモトヤフォントがデフォルト、それ以前はDroid Sans（Droid Sans Japaneseも含む）
+// * HelveticaかArialを指定するとブラウザ側でDroid Sansがエイリアスとして表示される
--- a/backend/resources/sass/foundation/variable/_global.scss
+++ b/backend/resources/sass/foundation/variable/_global.scss
@ -0,0 +1,38 @@
+// default breakpoint
+$_default-breakpoint: 'md';
+
+// default wrapper width
+$_max-width: 960px !default;
+
+// default grid columns
+$_column: 12 !default;
+
+// base font-size
+$_font-size: (
+  'sm': 15px,
+  'md': 16px,
+) !default;
+
+$_font-size--large: 16px !default;
+$_font-size--small: 0.8em !default;
+
+// base font-weight
+$_font-weight-light: 300;
+$_font-weight-normal: 400;
+$_font-weight-regular: 400;
+$_font-weight-medium: 500;
+$_font-weight-semibold: 600;
+$_font-weight-bold: 700;
+$_font-weight-extrabold: 800;
+$_font-weight-heavy: 900;
+
+// base Rounded corners
+$_radius: 3px !default;
+
+// base animation speed
+$_duration: 0.3s !default;
+
+// base spacing
+$_white-space: 1.7rem !default;
+$_white-space--small: ($_white-space * 0.5) !default;
+$_white-space--large: ($_white-space * 2) !default;
--- a/backend/resources/sass/foundation/variable/_z-index.scss
+++ b/backend/resources/sass/foundation/variable/_z-index.scss
@ -0,0 +1,10 @@
+// z-indexが定義されていない要素は`z-index:0;`として描画されます。
+// 同じz-indexを持つ要素はスタック文脈が同じであればHTMLの記述順に依存します。
+// なるべく数値はユニーク（一意）にして、シンプルに管理できるようにします。
+// @see - 'e-z-index()' (foundation/function/_z-index.scss)
+$_z-index: (
+  'below': -1,
+  'default': 1,
+  'fixNav': 2,
+  'modal': 3,
+) !default;
--- a/backend/resources/sass/index.scss
+++ b/backend/resources/sass/index.scss
@ -0,0 +1,227 @@
+@charset "UTF-8";
+
+/**
+ * VARIABLE
+ * global...サイト全体に使用するサイズや数値に関する変数です。
+ * breakpoint...メディアクエリで使用するブレイクポイントです。
+ * font-family...font-family指定をまとめています。
+ * color...グローバルに使用する色指定です。
+ * z-index...z-indexの並び順を管理します。
+ * easing...cubic-bezier関数を使用したタイミング関数を定義しています。
+ *
+ * FUNCTION
+ * strip-unit...pxやremなどの単位を取り除きます。
+ * em...pxをemに変換します。
+ * rem...pxをremに変換します。
+ * tint...白色を加えて明度を明るくします。
+ * shade...黒色を加えて明度を暗くします。
+ * z-index...z-indexの並び順を管理します。
+ * tracking...Photoshopのカーニングをemに変換します。
+ *
+ * MIXIN
+ * mq-up...メディアクエリを`min-width`で挿入します。
+ * mq-down...メディアクエリを`max-width`で挿入します。
+ * responsive...レスポンシブ対応クラスを生成します。
+ * clearfix...floatの解除をします。
+ * on-event...:hover, :active, :focusをまとめて指定します。
+ * sr-only...非表示にしてスクリーンリーダーにだけ読み上げさせます。
+ *
+ * BASE
+ * normalize...Normalize.cssをインポートしています。
+ * base...タイプセレクタと属性セレクタのデフォルトスタイルです。
+ *
+ * LAYOUT
+ * header...ヘッダーエリアのコンテナブロックのスタイルです。
+ * footer...フッターエリアのコンテナブロックのスタイルです。
+ * main...コンテンツエリアのコンテナブロックのスタイルです。
+ * side...サイドバーエリアのコンテナブロックのスタイルです。
+ * section...`<section>`要素を使うようなセクションの余白を管理します。
+ *
+ * COMPONENT
+ * wrapper...最大幅を指定します。
+ * layout...汎用的なレイアウトオブジェクトです。グリッドレイアウトなどに使用できます。
+ * media...画像とテキストが横並びになるオブジェクトです。
+ * list-unstyled...`<ul>`と`<ol>`でデフォルトスタイルをリセットします。
+ * embed...Youtubeなどをアスペクト比を固定してレスポンシブ対応させる場合に使用します。
+ * table...tableのレイアウトアルゴリズムの変更、余白の変更をします。
+ *
+ * PROJECT
+ * icon...アイコンフォントです。テンプレートから自動で生成されます。
+ * icon-extend...アイコンフォントを拡張するModifierです。
+ * button...ボタンコンポーネントです。
+ * breadcrumb...パンくずリストコンポーネントです。
+ * label...インラインのラベルコンポーネントです。
+ * badge...投稿数のような数値を表示するバッジコンポーネントです。
+ * card...カードタイプのコンポーネントです。
+ * split...定義リストをブロックからインラインにするコンポーネントです。
+ * notification...お知らせエリアのコンポーネントです。
+ *
+ * SCOPE
+ * blog...ブログページのスタイルです。
+ *
+ * UTILITY
+ * text...テキストのスタイルに関する汎用クラスです。
+ * image...画像のレイアウトに関する汎用クラスです。
+ * margin...マージンで余白の管理をします。常に下方向にだけ余白をとります。
+ * display...要素の表示や改行をコントロールする場合に使用します。
+ * width...おもにグリッドで使用する`width`を指定する汎用クラスです。
+ * offset...おもにグリッドで使用する`margin-right`を指定する汎用クラスです。
+ * percent...`width`プロパティを5%刻みで指定する汎用クラスです。
+ */
+/**
+ * このスタイルシートは[FLOCSS](https://github.com/hiloki/flocss)をベースにしています。
+ * 定義されているレイヤー以外にもThemeやTestなどのレイヤーを追加することもできます。
+ * 詳しくは[CSSコーディングルール](https://github.com/manabuyasuda/styleguide/blob/master/css-coding-rule.md#flocss)を参照してください。
+ */
+
+/* =============================================================================
+   #Foundation
+   ========================================================================== */
+//
+// Sassの変数と関数を定義します。
+// 変数は用途ごとにモジュール化、関数は機能ごとにモジュール化をします。
+// プレフィックス（接頭辞）として`_`をつけます。
+
+@import "./foundation/mixin/box";
+@import "./foundation/mixin/clearfix";
+@import "./foundation/mixin/layout";
+@import "./foundation/mixin/on-event";
+@import "./foundation/mixin/pc";
+@import "./foundation/mixin/responsive";
+@import "./foundation/mixin/sp";
+@import "./foundation/mixin/sr-only";
+
+//
+@import "./foundation/variable/animation";
+@import "./foundation/variable/breakpoint";
+@import "./foundation/variable/color";
+@import "./foundation/variable/easing";
+@import "./foundation/variable/font-family";
+@import "./foundation/variable/global";
+@import "./foundation/variable/z-index";
+
+
+// @import "foundation/function/_em";
+// @import "foundation/function/_rem";
+// @import "foundation/function/_tint";
+// @import "foundation/function/_shade";
+
+
+/**
+ * Foundationレイヤーでは`html`や`body`のような広範囲にわたるベーススタイル、
+ * `h2`や`ul`のような基本的なタイプセレクタのデフォルトスタイルを定義します。
+ * 装飾的なスタイルは避けて、できる限り低詳細度に保ちます。idセレクタやclassセレクタは使用しません。
+ */
+// @import "foundation/base/normalize";
+// @import "foundation/base/base";
+// @import "foundation/base/reset";
+
+/* =============================================================================
+   #Layout
+   ========================================================================== */
+/**
+ * Layoutレイヤーはヘッダーやフッターのような、ページを構成するコンテナブロックのスタイルを定義します。
+ * 目安としてはワイヤーフレームに書かれるような大きな単位のブロックです。
+ * 汎用性のあるグリッドシステムは次のObject/Componentレイヤーで定義します。
+ * グローバルナビゲーションやコピーライトのようなコンポーネントは、Object/Projectレイヤーで定義します。
+ * 基本的にはclass属性を使用しますが、id属性を使用することもできます。
+ * プレフィックス（接頭辞）として`l-`をつけます。
+ */
+// @import "./layout/content";
+// @import "./layout/footer";
+// @import "./layout/header";
+// @import "./layout/main";
+// @import "./layout/section";
+// @import "./layout/side";
+
+/* =============================================================================
+   #Object
+   ========================================================================== */
+/**
+ * Objectレイヤーはプロジェクトにおけるビジュアルパターンです。抽象度や詳細度、
+ * 拡張性などによって、4つのレイヤーにわけられます。
+ * それぞれのレイヤーにはプレフィックス（接頭辞）をつけます。
+ * 1. Component（`c-`）
+ * 2. Project（`p-`）
+ * 3. Scope(`s-`)
+ * 4. Utility（`u-`）
+ *
+ * ランディングページのようにページ特有のスタイルを多く含む場合は、
+ * ページ専用のCSSファイルを作成することもできます。
+ * ページ専用のスタイルは、そのページにだけ読み込ませることでスコープをつくり、
+ * プレフィックス（接頭辞）をつけないことで名前の重複を防ぎます。
+ */
+
+/* -----------------------------------------------------------------------------
+   #Component
+   -------------------------------------------------------------------------- */
+/**
+ * Componentレイヤーは多くのプロジェクトで横断的に再利用のできるような、小さな単位のモジュール（機能）です。
+ * OOCSSの構造（structure）の機能を担うため、装飾的なスタイルをできるだけ含めないようにします。
+ * また、`width`や`margin`といったレイアウトに影響を与えるプロパティもできるだけ含めないようにします。
+ * 例えばgridやmediaといったレイアウトパターンが該当します。
+ * プレフィックス（接頭辞）として`c-`をつけます。
+ */
+// @import "object/component/_wrapper";
+// @import "object/component/_layout";
+// @import "object/component/_table";
+
+/* -----------------------------------------------------------------------------
+   #Project
+   -------------------------------------------------------------------------- */
+/**
+ * Projectレイヤーはプロジェクト固有のパターンで、複数のページで使い回せるようなコンポーネントです。
+ * 具体的なスタイルを持つUI（ユーザーフェイス）で、追加されるコンポーネントのほとんどはこのレイヤーに置かれます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、別のコンポーネントとしてまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`p-`をつけます。
+ */
+// @import "object/project/article";
+// @import "object/project/box";
+// @import "object/project/breadcrumb";
+// @import "object/project/button";
+// @import "object/project/card";
+// @import "object/project/edit";
+// @import "object/project/form";
+// @import "object/project/icon-extend";
+// @import "object/project/icon";
+// @import "object/project/label";
+// @import "object/project/login";
+// @import "object/project/meeting";
+// @import "object/project/modal";
+// @import "object/project/notification";
+// @import "object/project/profile";
+// @import "object/project/search";
+// @import "object/project/user";
+
+/* -----------------------------------------------------------------------------
+   #Scope
+   -------------------------------------------------------------------------- */
+/**
+ * ComponentレイヤーやProjectレイヤーのようなコンポーネント単位ではなく、
+ * ページ単位や任意の範囲（スコープ）でのスタイルを定義します。1箇所でしか使わないような特異なスタイルや、
+ * ページ単位でComponentやProjectレイヤーのスタイルを微調整したい場合に使用してもかまいません。
+ * 例えばブログページのスタイルとして_blog.scssを作成します。
+ * このレイヤーでは`.s-blog p`のような要素セレクタとの結合子も使うこともできます。
+ * もし、このレイヤーで同じパターンが3箇所で使われていたら、
+ * ProjectレイヤーやUtilityレイヤーでまとめられないか検討しましょう。
+ * プレフィックス（接頭辞）として`s-`をつけます。
+ */
+// @import "object/scope/_blog";
+
+/* -----------------------------------------------------------------------------
+   #Utility
+   -------------------------------------------------------------------------- */
+/**
+ * Utilityレイヤーはいわゆる汎用クラスで、ほとんどの場合は単一のスタイルをもっています。
+ * コンポーネント間の間隔を調整したり、BEMのModifierが増えすぎるのを防ぎます。
+ * `.mb10`のような具体的な名前より`.mb-small`のような相対的な名前にしたり、
+ * pxよりもemや%で指定することを推奨します。
+ * 確実にスタイルを適応させるために`!important`を使用します。
+ * プレフィックス（接頭辞）として`u-`をつけます。
+ */
+// @import "object/utility/align";
+// @import "object/utility/display";
+// @import "object/utility/margin";
+// @import "object/utility/percent";
+// @import "object/utility/sr-only";
+// @import "object/utility/text";
--- a/backend/resources/sass/layout/_content.scss
+++ b/backend/resources/sass/layout/_content.scss
@ -0,0 +1,91 @@
+ /* #Content
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: content
+name: content
+categories: [layout]
+---
+
+`<article>`タグが使われるようなメインコンテンツのスタイルです。
+ナビゲーションやバナーなどのレイアウトを含むことはできますが、
+コンポーネント自体はobject/projectレイヤーで定義します。
+
+```block
+<body>
+  <article class="l-content s-blog">
+    <header class="l-content__lead"></header>
+  </article>
+</body>
+```
+*/
+.l-content {
+  width: 100%;
+  margin: 30px auto 0;
+  padding: 0 20px;
+  @include pc{
+    margin: 25px 0 0 240px;
+    padding: 0 32px;
+  }
+  @include sp{
+    padding-bottom: 130px;
+    max-width: 700px;
+    box-sizing: border-box;
+  }
+  @include sp02{
+    padding-bottom: 110px;
+  }
+  &-wrap{
+    margin: 0 auto;
+    box-sizing: border-box;
+    @include pc{
+      max-width: 1064px;
+      -webkit-box-shadow: 0 1px 4px #ddd;
+      box-shadow: 0 1px 4px #ddd;
+      margin-bottom: 40px;
+      border-radius: 8px;
+      background: #fff;
+    }
+  }
+  &__ttl{
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 35px;
+    @include pc{
+      max-width: 1064px;
+      justify-content: space-between;
+      margin: 0 auto 25px;
+    }
+    @include sp02{
+      margin: 0 auto 30px
+    }
+    &__left{
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+    }
+    h2{
+      font-size: 2.4rem;
+      font-weight: bold;
+      @include pc{
+        margin-right: 30px;
+        font-size: 3rem;
+      }
+      @include sp{
+        letter-spacing: 0.04em;
+      }
+      @include min{
+        font-size: 2rem;
+      }
+    }
+  }
+  &-w560{
+    margin: 0 auto;
+    width: 100%;
+    @include pc{
+      max-width: 560px;
+    }
+  }
+}
--- a/backend/resources/sass/layout/_footer.scss
+++ b/backend/resources/sass/layout/_footer.scss
@ -0,0 +1,32 @@
+ /* #Footer
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: footer
+name: footer
+categories: [layout]
+---
+
+`<body>`タグ直下にある`<footer>`タグのスタイルです。
+コピーライトやナビゲーションのレイアウトを含むことはできますが、
+コンポーネント自体はobject/projectレイヤーで定義します。
+
+```block
+<body>
+  <footer class="l-footer">
+    <div class="l-footer__copyright">
+      <small class="p-copyright"></small>
+    </div>
+    <nav class="l-footer__sub-nav">
+      <ul class="p-foot-nav">
+        <li></li>
+        <li></li>
+      <ul>
+    </nav>
+  </footer>
+</body>
+```
+*/
+// .l-footer {
+
+// }
--- a/backend/resources/sass/layout/_header.scss
+++ b/backend/resources/sass/layout/_header.scss
@ -0,0 +1,32 @@
+ /* #Header
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: header
+name: header
+categories: [layout]
+---
+
+`<body>`タグ直下にある`<header>`タグのスタイルです。
+ロゴやグローバルナビゲーションのレイアウトを含むことはできますが、
+コンポーネント自体はobject/projectレイヤーで定義します。
+
+```block
+<body>
+  <header class="l-header">
+    <div class="l-header__logo">
+      <h1 class="p-logo">logo</h1>
+    </div>
+    <nav class="l-header__global-nav">
+      <ul class="p-global-nav">
+        <li></li>
+        <li></li>
+      <ul>
+    </nav>
+  </header>
+</body>
+```
+*/
+// .l-header {
+
+// }
--- a/backend/resources/sass/layout/_main.scss
+++ b/backend/resources/sass/layout/_main.scss
@ -0,0 +1,106 @@
+ /* #Main
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: main
+name: main
+categories: [layout]
+---
+
+`<main>`タグのスタイルです。ドキュメントのメインコンテンツを示し、ドキュメント内で1つしか記述できません。
+<article>タグや<nav>タグなどの中に入れることはできません。
+
+取り扱いの難しいタグなので、使わないという選択をするのもいいでしょう。
+
+```block
+<body>
+  <main id="l-main">
+  </main>
+</body>
+```
+*/
+
+.l-centeringbox{
+  width: 100%;
+  height: 100%;
+  &-wrap{
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%,0);
+    width: 100%;
+    border-radius: 20px;
+    box-sizing: border-box;
+    @include pc{
+      padding: 192px 0;
+    }
+  }
+}
+.l-container{
+  display: flex;
+  flex-flow: row-reverse;
+  background: #fff;
+  justify-content: flex-end;
+  @include pc{
+    background: $_color-bg02;
+  }
+}
+.l-single {
+  &-main{
+    min-height: 100vh; /* Fallback */
+    min-height: calc(var(--vh, 1vh) * 100);
+  }
+  &-container{
+    max-width: 540px;
+    width: 100%;
+    margin: 0 auto;
+    border-radius: 8px;
+    padding: 50px 24px 70px;
+    background: #fff;
+    box-sizing: border-box;
+    display: block;
+    @include pc{
+      width: 540px;
+      max-width: none;
+      box-shadow: 0 1px 4px #dddddd;
+      padding: 60px 60px 60px;
+    }
+    h1{
+      font-size: 3rem;
+      text-align: center;
+      margin-bottom: 35px;
+      line-height: 1;
+      @include pc{
+        margin-bottom: 35px;
+        font-size: 2.8rem;
+      }
+      @include sp{
+        letter-spacing: 0.02em;
+      }
+      @include min{
+        font-size: 2.8rem;
+      }
+   }
+  }
+  &-inner{
+    width: 100%;
+    margin: 0 auto;
+    width: 410px;
+    @include sp02{
+      width: 100%;
+    }
+    .form-group{
+      margin: 0 0 17px;
+      @include pc{
+        margin: 0 0 20px;
+      }
+    }
+  }
+}
+.l-registration{
+  .l-single-container h1{
+    @include pc{
+      margin-bottom: 40px;
+    }
+  }
+}
--- a/backend/resources/sass/layout/_section.scss
+++ b/backend/resources/sass/layout/_section.scss
@ -0,0 +1,39 @@
+ /* #Section
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: section
+name: section
+categories: [layout]
+---
+
+`<section>`タグを使うようなセクションの余白（`margin`）を管理します。
+コンポーネント単位での余白はobject/utility/_margin.scssで管理をします。
+
+サイズはデフォルトで3つ、最大で5つとします。
+
+1. tiny(optional)
+2. small
+3. medium(default)
+4. large
+5. huge(optional)
+
+Modifierなしをmedium、変更する場合にはModifierを指定します。
+
+```block
+<div class="l-section">
+  <h2>見出し2</h2>
+</div>
+
+<div class="l-section l-section--small">
+  <h2>見出し2</h2>
+</div>
+
+<div class="l-section l-section--large">
+  <h2>見出し2</h2>
+</div>
+```
+*/
+// .l-section {
+
+// }
--- a/backend/resources/sass/layout/_side.scss
+++ b/backend/resources/sass/layout/_side.scss
@ -0,0 +1,259 @@
+ /* #Side
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: side
+name: side
+categories: [layout]
+---
+
+`<aside>`タグが使われるようなサイドバーのスタイルです。
+ナビゲーションやバナーなどのレイアウトを含むことはできますが、
+コンポーネント自体はobject/projectレイヤーで定義します。
+
+```block
+<body>
+  <article class="l-content"></article>
+  <aside class="l-side">
+    <div class="l-side__item">
+       <ul class="p-side-nav"></ul>
+    </div>
+    <div class="l-side__item">
+       <div class="p-banner"></div>
+    </div>
+  </aside>
+</body>
+```
+*/
+
+.l-side {
+  position: fixed;
+  left: 0;
+  overflow-x: auto;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+  -webkit-overflow-scrolling: touch;
+  background: #000000;
+  z-index: 3;
+  width: calc(100% - 20px);
+  height: 54px;
+  @include pc{
+    height: 100vh;
+    width: 240px;
+  }
+  @include sp{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    left: 7px;
+    right: 7px;
+    bottom: 7px;
+    border-radius: 12px;
+    width: calc(100% - 14px);
+  }
+  &-logo{
+    line-height: 1;
+    margin: 35px auto;
+    @include pc{
+      width: 38px;
+    }
+    @include sp{
+      display: none;
+    }
+    a{
+      display: block;
+      line-height: 1;
+    }
+  }
+}
+
+.mypage-nav{
+  @include sp{
+    width: 100%;
+    height: 100%;
+  }
+  &-list{
+    @include sp{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      height: 100%;
+      padding: 0 7px;
+    }
+    &__item{
+      display: flex;
+      align-items: center;
+      &.nav-active{
+        @include pc{
+          a{
+            background: $_color-ui-yellow;
+            color: #000;
+            &:hover{
+              opacity: 1;
+            }
+          }
+        }
+        .prof-wrap{
+          border: 1px solid $_color-ui-yellow;
+        }
+        &.-profile{
+          .prof-wrap{
+            border: 1px solid #ccc;
+          }
+        }
+        .icon{
+          &.meeting{
+            &:before{
+              background-image: url(../../assets/img/icon/list-yellow.svg);
+              @include pc{
+                background-image: url(../../assets/img/icon/list-black.svg);
+              }
+            }
+          }
+          &.star{
+            &:before{
+              @include sp{
+                background-image: url(../../assets/img/icon/star-outline-yellow02.svg);
+              }
+            }
+          }
+          &.parents{
+            &:before{
+              background-image: url(../../assets/img/icon/people-yellow.svg);
+              @include pc{
+                background-image: url(../../assets/img/icon/people-black.svg);
+              }
+            }
+          }
+          &.search{
+            &:before{
+              background-image: url(../../assets/img/icon/search-yellow.svg);
+              @include pc{
+                background-image: url(../../assets/img/icon/search-black.svg);
+              }
+            }
+          }
+          &.log-out{
+            &:before{
+              background-image: url(../../assets/img/icon/log-out-yellow.svg);
+              @include pc{
+                background-image: url(../../assets/img/icon/log-out-black.svg);
+              }
+            }
+          }
+        }
+      }
+      @include sp{
+        width: 20%;
+        height: 100%;
+      }
+      &.-logout{
+        @include sp{
+          display: none;
+        }
+      }
+      &.-favorite{
+        @include pc{
+          display: none;
+        }
+      }
+      a{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        color: #ccc;
+        line-height: 1.5;
+        font-weight: bold;
+        word-break: break-all;
+        transition: all .25s ease-out;
+        text-decoration: none;
+        @include pc{
+          padding: 13px 1.2em;
+          &:hover{
+            opacity: 0.6;
+          }
+        }
+        @include sp{
+          justify-content: center;
+          box-sizing: border-box;
+          height: 100%;
+        }
+        span{
+          @include sp{
+            display: none;
+          }
+        }
+      }
+      .icon{
+        width: 29px;
+        height: 29px;
+        position: relative;
+        @include pc{
+          margin-right: 13px;
+          transition: all .25s ease-out;
+          width: 24px;
+          height: 24px;
+        }
+        &:before{
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          display: inline-block;
+          background-repeat: no-repeat;
+          background-position: 50%;
+          background-size: 100%;
+        }
+        &.meeting{
+          &:before{
+            background-image: url(../../assets/img/icon/list-gray.svg) ;
+          }
+        }
+        &.star{
+          &:before{
+            background-image: url(../../assets/img/icon/star-outline-gray02.svg);
+          }
+        }
+        &.search{
+          &:before{
+            background-image: url(../../assets/img/icon/search-gray.svg);
+          }
+        }
+        &.parents{
+          &:before{
+            background-image: url(../../assets/img/icon/people-gray.svg);
+          }
+        }
+        &.log-out{
+          &:before{
+            background-image: url(../../assets/img/icon/log-out-gray.svg);
+          }
+        }
+      }
+    }
+    &__link{
+      &.user-icon{
+        figure{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          @include pc{
+            margin-right: 13px;
+            width: 24px;
+            height: 24px;
+          }
+          .prof-wrap{ 
+            width: 18px;
+            height: 18px;
+            border: 1px solid #ccc;
+            border-radius: 50%;
+            overflow: hidden;
+            @include sp{
+              width: 28px;
+              height: 28px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
--- a/backend/resources/sass/object/.DS_Store
+++ b/backend/resources/sass/object/.DS_Store
--- a/backend/resources/sass/object/component/_layout.scss
+++ b/backend/resources/sass/object/component/_layout.scss
@ -0,0 +1,188 @@
+ /* #Layout
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: layout
+name: layout
+categories: [component]
+---
+
+汎用的なレイアウトオブジェクトです。`width`の変更はUtilityレイヤーで指定します。
+
+Modifierは以下のとおりです。
+
+* ガターの追加 `--small`, `--medium`, `--large`
+* text-alignの変更 `--middle`, `--bottom`
+* 配置を反転 `--reverse`
+* `.c-layout__item`のカラム幅をまとめて指定 `--colx`, `--colxandx`
+
+```block
+<div class="c-wrapper">
+  <div class="c-layout c-layout--medium" style="margin-bottom:1rem;">
+    <div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout__item u-8of12-md</div></div>
+    <div class="c-layout__item u-4of12-md"><div style="background-color:lightblue;">c-layout__item u-4of12-md</div></div>
+  </div>
+
+  <div class="c-layout c-layout--reverse c-layout--medium" style="margin-bottom:1rem;">
+    <div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout--rev c-layout__item u-8of12-md</div></div>
+    <div class="c-layout__item u-4of12-md"><div style="background-color:lightblue;">c-layout--rev c-layout__item u-4of12-md</div></div>
+  </div>
+
+  <div class="c-layout c-layout--center c-layout--medium" style="margin-bottom:1rem;">
+    <div class="c-layout__item u-8of12-md"><div style="background-color:lightblue;">c-layout--center c-layout__item u-8of12-md</div></div>
+  </div>
+
+  <div class="c-layout c-layout--medium c-layout--col2-sm c-layout--col3-md" style="margin-bottom:1rem;">
+    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
+    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
+    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item c-layout--col2-sm c-layout--col3-md</div></div>
+  </div>
+
+  <div class="c-layout c-layout--col4and8" style="margin-bottom:1rem;">
+    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item u-8of12-md</div></div>
+    <div class="c-layout__item"><div style="background-color:lightblue;">c-layout__item u-4of12-md</div></div>
+  </div>
+</div>
+```
+*/
+@use "sass:math";
+
+$_layout-gutter: $_white-space !default;
+$_layout-gutter-small: ($_layout-gutter * 0.5) !default;
+$_layout-gutter-large: ($_layout-gutter * 2) !default;
+
+.c-layout {
+  @include _c-layout();
+}
+
+.c-layout__item {
+  @include _c-layout__item();
+}
+
+/**
+ * ガターを3つのパリエーションから選択します。
+ */
+.c-layout--small {
+  margin-left: -$_layout-gutter-small;
+  > .c-layout__item {
+    padding-left: $_layout-gutter-small;
+  }
+}
+
+.c-layout--medium {
+  margin-left: -$_layout-gutter;
+  > .c-layout__item {
+    padding-left: $_layout-gutter;
+  }
+}
+
+.c-layout--large {
+  margin-left: -$_layout-gutter-large;
+  > .c-layout__item {
+    padding-left: $_layout-gutter-large;
+  }
+}
+
+/**
+ * 垂直位置を2つのパリエーションから選択します（デフォルトは`top`）。
+ */
+.c-layout--middle {
+  > .c-layout__item {
+    vertical-align: middle;
+  }
+}
+
+.c-layout--bottom {
+  > .c-layout__item {
+    vertical-align: bottom;
+  }
+}
+
+/**
+ * 要素を中央配置にします（デフォルトは`left`）。
+ */
+.c-layout--center {
+  text-align: center;
+  > .c-layout__item {
+    text-align: left;
+  }
+}
+
+/**
+ * 要素を右端寄せにします（デフォルトは`left`）。
+ */
+.c-layout--right {
+  text-align: right;
+  > .c-layout__item {
+    text-align: left;
+  }
+}
+
+/**
+ * `.c-layout__item`のカラム数をまとめて指定します。
+ */
+@include _responsive('.c-layout--col2') {
+  > .c-layout__item {
+    width: percentage(1 * 0.5);
+  }
+}
+
+@include _responsive('.c-layout--col3') {
+  > .c-layout__item {
+    width: percentage(math.div(1, 3));
+  }
+}
+
+@include _responsive('.c-layout--col4') {
+  > .c-layout__item {
+    width: percentage(math.div(1,4));
+  }
+}
+
+@include _responsive('.c-layout--col2and10') {
+  > .c-layout__item:nth-child(odd) {
+    width: percentage(math.div(2, 12));
+  }
+  > .c-layout__item:nth-child(even) {
+    width: percentage(math.div(10, 12));
+  }
+}
+
+@include _responsive('.c-layout--col3and9') {
+  > .c-layout__item:nth-child(odd) {
+    width: percentage(math.div(3, 12));
+  }
+  > .c-layout__item:nth-child(even) {
+    width: percentage(math.div(9, 12));
+  }
+}
+
+@include _responsive('.c-layout--col4and8') {
+  > .c-layout__item:nth-child(odd) {
+    width: percentage(math.div(4, 12));
+  }
+  > .c-layout__item:nth-child(even) {
+    width: percentage(math.div(8, 12));
+  }
+}
+
+@include _responsive('.c-layout--col5and7') {
+  > .c-layout__item:nth-child(odd) {
+    width: percentage(math.div(5, 12));
+  }
+  > .c-layout__item:nth-child(even) {
+    width: percentage(math.div(7, 12));
+  }
+}
+
+/**
+ * 要素を右から配置させます（HTMLの記述を反転させた状態でレイアウトされます）。
+ */
+@include _responsive('.c-layout--reverse') {
+  text-align: left;
+  direction: rtl;
+  > .c-layout__item {
+    text-align: left;
+    direction: ltr;
+  }
+}
--- a/backend/resources/sass/object/component/_table.scss
+++ b/backend/resources/sass/object/component/_table.scss
@ -0,0 +1,100 @@
+ /* #Table
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: table
+name: table
+categories: [component]
+---
+
+tableのレイアウト
+
+```block
+<div class="c-wrapper">
+  <table class="c-table c-table--fixed">
+    <tr>
+      <th class="u-percent50">th1</th>
+      <th>th2</th>
+      <th>th3</th>
+    </tr>
+    <tr>
+      <td>td1</td>
+      <td>td2</td>
+      <td>td3</td>
+    </tr>
+  </table>
+</div>
+```
+*/
+.c-table {
+  width: 100%;
+  th,
+  td {
+    padding: 1em;
+  }
+}
+
+/**
+ * セルを均等にします。`width`を1つだけ指定した場合は、残りのセルが均等になります。
+ */
+.c-table--fixed {
+  table-layout: fixed;
+}
+
+
+.c-form--tableA{
+  width: 100%;
+  background: #fff;
+  border-radius: 10px;
+  table-layout: fixed;
+  tr{
+    width: 970px;
+    overflow: hidden;
+    th,td{
+      text-align: left;
+      @include sp{
+        display: block;
+        width: 100%;
+      }
+    }
+    &:last-child{
+      th{
+        @include pc{
+          border-bottom: none;
+        }
+      }
+      td{
+        border-bottom: none;
+      }
+    }
+    th{
+      padding: 10px 20px 10px 20px;
+      font-size: 1.5rem;
+      line-height: 1.8;
+      border-bottom: 1px solid #d2d2d2;
+      max-height: 100%;
+      @include pc{
+        min-width: 225px;
+      }
+      @include sp{
+        padding: 15px;
+        margin: 0 auto;
+        width: 100%;
+      }
+    }
+    td{
+      padding: 13px 0;
+      width: calc(744/970*100%);
+      font-size: 1.5rem;
+      border-bottom: 1px solid #d2d2d2;
+      @include pc{
+        border-left: 1px solid #d2d2d2;
+      }
+      @include sp{
+        padding: 15px;
+        margin: 0 auto;
+        width: 100%;
+      }
+    }
+  }
+}
--- a/backend/resources/sass/object/component/_wrapper.scss
+++ b/backend/resources/sass/object/component/_wrapper.scss
@ -0,0 +1,26 @@
+ /* #Wrapper
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: wrapper
+name: wrapper
+categories: [component]
+---
+
+横幅を制限するオブジェクトです。
+
+Modifierは以下のとおりです。
+
+* 左右の余白を追加 `--small`, `--medium`, `--large`
+
+```block
+```
+*/
+
+.c-wrapper {
+  width: 100%;
+  max-width: $_max-width;
+  margin-right: auto;
+  margin-left: auto;
+}
+
--- a/backend/resources/sass/object/project/.DS_Store
+++ b/backend/resources/sass/object/project/.DS_Store
--- a/backend/resources/sass/object/project/_article.scss
+++ b/backend/resources/sass/object/project/_article.scss
@ -0,0 +1,214 @@
+ /* #Article
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: article
+name: article
+categories: [project]
+---
+
+記事に関するコンポーネントです。
+
+```block
+```
+*/
+
+.p-article{
+  &-wrap{
+    @include pc{
+      padding: 30px 35px 50px;
+    }
+  }
+
+  &__content{
+    .meeting-member{
+      margin-bottom: 15px;
+    }
+    .meeting-ttl{
+      @include pc{
+        margin-bottom: 3px;
+      }
+    }
+    .meeting-time{
+      margin-bottom: 25px;
+    }
+  }
+  &__txt{
+    margin-bottom: 15px;
+    max-height: 100%;
+  }
+  &__pdf{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 25px;
+    &__btn{
+      width: 100%;
+      margin-right: 20px;
+    }
+  }
+  &-btn{
+    &-list{
+      display: flex;
+      justify-content: space-between;
+      padding-bottom: 25px;
+    }
+    &__item{
+      width: 23.5%;
+      a{
+        @include sp{
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+  .meeting-member-count{
+    @include sp{
+      display: none;
+    }
+  }
+  .meeting-member__item{
+    .avatar{
+      @include sp{
+        width: 38px;
+        height: 38px;
+      }
+      @include min{
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+  .meeting-member-link{
+    @include sp{
+      margin-bottom: 20px;
+    }
+  }
+}
+.p-article__context{
+  width: 100%;
+}
+.p-article__content{
+  width: 100%;
+}
+.p-file{
+  &-list{
+    margin-bottom: 25px;
+    max-width: 700px;
+  }
+  &-for{
+    padding: 50px 0;
+    border: 1px solid rgba(36,77,138,.1);
+    border-radius: 6px;
+    margin-bottom: 15px;
+    @include pc{
+      padding: 80px 0;
+    }
+  }
+  &-nav{
+    display: flex;
+    align-items: center;
+    overflow-x: auto;
+    width: 100%;
+    max-width: 100%;
+    @include pc{
+      max-width: 495px;
+    }
+    figure{
+      width: calc((100% - 220px) / 3);
+      min-width: 54px;
+      margin-right: 10px;
+      border: 1px solid rgba(36,77,138,.1);
+      transition: all .2s ease-out;
+      cursor: pointer;
+      overflow: hidden;
+      position: relative;
+      @include pc{
+        &:hover{
+          opacity: 0.8;
+        }
+      }
+      &:before{
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+      img{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        -o-object-fit: cover;
+        object-fit: cover;
+        font-family: "object-fit: cover;";
+      }
+    }
+  }
+  &-image{
+    display: flex;
+    flex-wrap: wrap;
+    margin: 8px -6px;
+    align-items: center;
+    justify-content: space-between;
+    figure{
+      width: calc(20% - 12px);
+      overflow: hidden;
+      margin: 10px 5px 0;
+      border: 1px solid rgba(36,77,138,.1);
+      transition: all .2s ease-out;
+      position: relative;
+      @include pc{
+        &:hover{
+          opacity: 0.8;
+        }
+      }
+      &:before{
+        content: "";
+        display: block;
+        padding-top: 100%;
+      }
+      &:last-child{
+        @include sp{
+          margin-right: auto;
+        }
+      }
+      img{
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        margin: auto;
+        object-fit: cover;
+        font-family: 'object-fit: cover;';
+      }
+      &.image-upload{
+        cursor: pointer;
+        &:after{
+          display: block;
+          content: "";
+          width: 22px;
+          height: 22px;
+          border-radius: 11px;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21'%3E%3Ccircle cx='10.5' cy='10.5' r='10.5' style='fill:%23d82828'/%3E%3Cline x1='4' y1='10.5' x2='17' y2='10.5' style='fill:none;stroke:%23fff'/%3E%3C/svg%3E");
+          position: absolute;
+          right: 2px;
+          bottom: 2px;
+          box-shadow: 0 0px 4px rgb(0 0 0 / 30%);
+          @include sp{
+            width: 18px;
+            height: 18px;
+            border-radius: 9px;
+          }
+        }
+        
+      }
+      
+    }
+  }
+}
--- a/backend/resources/sass/object/project/_box.scss
+++ b/backend/resources/sass/object/project/_box.scss
@ -0,0 +1,69 @@
+ /* #Box
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: box
+name: box
+categories: [project]
+---
+
+画像やテキストなどを縦に並べるコンポーネントです。
+
+ラベルはデフォルトで右上に配置されます。Modifierで以下のように変更できます。
+
+- 右下 `.p-box__labels--right-bottom`
+- 左上 `.p-box__labels--left-top`
+- 左下 `.p-box__labels--left-bottom`
+
+```block
+<div class="p-box">
+  <div class="p-box__image">
+    <img src="http://lorempixel.com/600/400/" alt="">
+    <ul class="p-box__labels">
+      <li class="p-box__label p-label">ラベル1</li>
+      <li class="p-box__label p-label">ラベル2</li>
+    </ul>
+  </div>
+  <div class="p-box__content">
+    <h2>見出し</h2>
+    <p>文章</p>
+  </div>
+</div>
+```
+*/
+.p-box {
+  @include _p-box();
+}
+
+.p-box__image {
+  @include _p-box__image();
+}
+
+.p-box__labels {
+  @include _p-box__labels();
+}
+
+.p-box__labels--right-bottom {
+  top: auto;
+  bottom: 0;
+}
+
+.p-box__labels--left-top {
+  right: auto;
+  left: 0;
+}
+
+.p-box__labels--left-bottom {
+  top: auto;
+  right: auto;
+  bottom: 0;
+  left: 0;
+}
+
+.p-box__label {
+  @include _p-box__label();
+}
+
+.p-box__content {
+  @include _p-box__content();
+}
--- a/backend/resources/sass/object/project/_breadcrumb.scss
+++ b/backend/resources/sass/object/project/_breadcrumb.scss
@ -0,0 +1,48 @@
+ /* #Breadcrumb
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: breadcrumb
+name: breadcrumb
+categories: [project]
+---
+
+パンくずリストのコンポーネントです。横幅を超えると、折り返さず省略されます。
+
+```block
+<ol class="p-breadcrumb">
+  <li class="p-breadcrumb__item">
+    <a href="#" class="p-breadcrumb__link">home</a>
+  </li>
+  <li class="p-breadcrumb__item">
+    <a href="#" class="p-breadcrumb__link">page1</a>
+  </li>
+  <li class="p-breadcrumb__item">page2</li>
+</ol>
+```
+*/
+.p-breadcrumb {
+  overflow: hidden;
+  margin: 0;
+  padding-left: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  list-style-type: none;
+}
+
+.p-breadcrumb__item {
+  display: inline-block;
+  &:last-child {
+    display: inline;
+  }
+}
+
+.p-breadcrumb__link {
+  display: inline-block;
+}
+
+/* 2つ目以降のリストの前に`>`を表示する。 */
+.p-breadcrumb__item:not(:first-of-type):before {
+  content: "\003E";
+  margin: 0 0.5em;
+}
--- a/backend/resources/sass/object/project/_button.scss
+++ b/backend/resources/sass/object/project/_button.scss
@ -0,0 +1,288 @@
+ /* #Btn-icon
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: btn-icon
+name: btn-icon
+categories: [project]
+---
+
+ボタンコンポーネントです。
+
+Modifierは以下のとおりです。
+
+* 100%表示 `-full`
+* width指定 `-w`
+* height指定 `-h`
+* 真円 `-circle`
+* 楕円 `-r`
+
+```block
+```
+*/
+
+/* icon */
+.icon{
+
+}
+.svg{
+  &-icon{
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    color: inherit;
+    vertical-align: middle;
+    fill: none;
+    stroke: currentColor;
+  }
+  &-fill{
+    fill: currentColor;
+    stroke: none;
+  }
+  &-up{
+    transform: rotate(0deg);
+  }
+  &-y50{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.btn{
+  &-meeting{
+    @include pc{
+      padding: 0 5px 0 8px;
+    }
+    .icon{
+      width: 22px;
+      height: 22px;
+      position: relative;
+      @include pc{
+        top: -1px;
+        padding-left: 11px;
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+}
+
+.btn {
+  &-default{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    font-size: 1.6rem;
+    font-weight: bold;
+    border: 1px solid transparent;
+    -webkit-transition: all ease-out .2s;
+    transition: all ease-out .2s;
+    cursor: pointer;
+    text-align: center;
+    line-height: 1;
+    &:hover{
+      opacity: 0.7;
+    }
+  }
+  &-yellow{
+    background: #F0DE00;
+    /* border: 1px solid #F0DE00; */
+    border: none;
+  }
+  /* font-size */
+  &-fz14{
+    font-size: 1.4rem;
+  }
+  /* shadow */
+  &-shadow{
+    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
+  }
+}
+/* 
+.p-btn {
+  display: inline-block;
+  margin: 0;
+  padding: 0.75em;
+  border: none;
+  border-radius: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 1;
+  text-align: center;
+  text-decoration: none;
+  background: transparent;
+  cursor: pointer;
+  appearance: none;
+  @include _on-event {
+    text-decoration: none;
+  }
+  &:disabled,
+  &.is-disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+  &--base{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  &--inner{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1px;
+  }
+}
+*/
+
+.p-btn--full {
+  width: 100%;
+}
+
+.p-btn--circle {
+  border-radius: 50%;
+}
+
+
+/**
+ * 角丸
+ */
+.btn-r3 {
+  border-radius: 3px;
+} 
+.btn-r5 {
+  border-radius: 5px;
+}
+.btn-r8 {
+  border-radius: 8px;
+}
+.btn-r10 {
+  border-radius: 10px;
+}
+.btn-r14{
+  border-radius: 10px;
+  @include pc{
+    border-radius: 14px;
+  }
+}
+.btn-r15 {
+  border-radius: 15px;
+}
+.btn-r20 {
+  border-radius: 20px;
+}
+.btn-r24 {
+  border-radius: 24px;
+}
+.btn-r25 {
+  border-radius: 25px;
+}
+.btn-r30 {
+  border-radius: 5px;
+}
+.btn-r35 {
+  border-radius: 35px;
+}
+.btn-r40 {
+  border-radius: 40px;
+}
+.btn-r45 {
+  border-radius: 45px;
+}
+.btn-r50 {
+  border-radius: 50px;
+}
+
+/**
+ * width
+ */
+
+.btn-w100p{
+  max-width: 100%;
+}
+.btn-w56 {
+  max-width: 56px;
+}
+.btn-w130 {
+  max-width: 130px;
+}
+.btn-w150 {
+  max-width: 150px;
+}
+.btn-w170 {
+  max-width: 170px;
+}
+.btn-w200 {
+  max-width: 200px;
+}
+.btn-w230 {
+  max-width: 230px;
+}
+.btn-w250 {
+  max-width: 250px;
+}
+.btn-w300 {
+  max-width: 300px;
+}
+.btn-w320 {
+  max-width: 320px;
+}
+
+
+/**
+ * height
+ */
+.btn-h28 {
+  height: 28px;
+}
+.btn-h30 {
+  height: 30px;
+}
+.btn-h42 {
+  height: 42px;
+}
+.btn-h45 {
+  height: 45px;
+}
+.btn-h48 {
+  height: 48px;
+}
+.btn-h50 {
+  height: 50px;
+}
+.btn-h52 {
+  height: 52px;
+  line-height: 48px;
+}
+.btn-h55 {
+  height: 55px;
+}
+.btn-h60 { 
+  height: 60px;
+  line-height: 56px;
+}
+.btn-h65 {
+  height: 65px;
+}
+.btn-h70 {
+  height: 66px;
+  @include pc{
+    height: 70px;
+  } 
+}
+.btn-h75 {
+  height: 75px;
+}
+.btn-h80 {
+  height: 80px;
+}
+.btn-h85 {
+  height: 85px;
+}
+.btn-h90 {
+  height: 90px;
+}
--- a/backend/resources/sass/object/project/_card.scss
+++ b/backend/resources/sass/object/project/_card.scss
@ -0,0 +1,92 @@
+ /* #Card
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: card
+name: card
+categories: [project]
+---
+
+カードタイプのコンポーネントです。
+
+```block
+<div class="c-layout c-layout--small">
+  <div class="c-layout__item u-6of12-md">
+    <div class="p-card">
+      <img src="http://lorempixel.com/640/340/" class="p-card__image-top">
+      <div class="p-card__body">
+        <h2>Card Object</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?</p>
+      </div>
+      <ul class="p-card__list">
+        <li class="p-card__list-item">list1</li>
+        <li class="p-card__list-item">list2</li>
+      </ul>
+      <div class="p-card__foot">
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, est.</p>
+      </div>
+    </div>
+  </div>
+
+  <div class="c-layout__item u-6of12-md">
+    <div class="p-card">
+      <div class="p-card__head">
+        <h2>Card Object</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat illo autem, possimus obcaecati numquam sunt ut quas, repellat cum aspernatur voluptatem, a explicabo! Facilis sed quos, nisi rerum placeat ad?</p>
+      </div>
+      <ul class="p-card__list">
+        <li class="p-card__list-item">list1</li>
+        <li class="p-card__list-item">list2</li>
+      </ul>
+      <img src="http://lorempixel.com/640/340/" class="p-card__image-bottom">
+    </div>
+  </div>
+</div>
+```
+*/
+
+.p-card {
+}
+
+.p-card__head {
+  > :last-child {
+  }
+}
+
+.p-card__body {
+  > :last-child {
+  }
+}
+
+.p-card__foot {
+  > :last-child {
+  }
+}
+
+.p-card__image,
+.p-card__image-top,
+.p-card__image-bottom {
+  max-width: none;
+  width: 100%;
+}
+
+.p-card__head,
+.p-card__image-top {
+}
+
+.p-card__foot,
+.p-card__image-bottom {
+}
+
+.p-card__list {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+.p-card__list-item {
+}
+
+.p-card__list-link {
+  display: block;
+}
--- a/backend/resources/sass/object/project/_edit.scss
+++ b/backend/resources/sass/object/project/_edit.scss
@ -0,0 +1,205 @@
+ /* #Edit
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: edit
+name: edit
+categories: [project]
+---
+
+エディット関係のコンポーネントです。
+
+```block
+```
+*/
+
+.edit{
+  &-container{
+
+  }
+  &-wrap{
+    @include pc{
+      padding: 38px 40px 55px;
+    }
+  }
+  &-content{
+    .btn-user-add{
+      margin: 19px auto 0;
+    }
+  }
+  &-bg{
+    background: $_color-ui-gray;
+    border-radius: 4px;
+    padding: 22px 26px 15px;
+    margin-top: 18px;
+    @include sp{
+      margin-top: 23px;
+      padding: 25px 23px 15px;
+    }
+    .checkbox{
+      margin-bottom: 10px;
+      @include sp{
+        margin-bottom: 13px;
+      }
+    }
+  }
+  &-form{
+    .btn-edit{
+      margin-top: 35px;
+      @include sp{
+        margin-top: 25px;
+        font-size: 1.8rem;
+      }
+    }
+  }
+  &-set{
+    position: relative;
+    &:not(:first-child){
+      margin-top: 14px;
+      @include pc{
+        margin-top: 19px;
+      }
+    }
+    &-mt5{
+      margin-top: 5px !important;
+      @include sp{
+        margin-top: 13px !important;
+      }
+    }
+    &-mt10{
+      margin-top: 10px !important;
+    }
+    &-mt15{
+      margin-top: 15px !important;
+    }
+    &-bg{
+      background: $_color-ui-gray;
+      border-radius: 3px;
+      padding: 18px 22px;
+      @include pc{
+        padding: 17px 25px;
+      }
+    }
+    &-file{
+      &__txt{
+        color: #93A0A7;
+        font-weight: bold;
+        font-size: 1.4rem;
+        text-align: center;
+      }
+    }
+    &.user_remember_me{
+      margin-top: 30px;
+      margin-bottom: 30px;
+      .checkbox{
+        text-align: center;
+      }
+    }
+    &.edit-set-send{
+      margin-top: 25px;
+      @include pc{
+        margin-top: 22px;
+      }
+    }
+  }
+  &-user{
+    &-wrap{
+      margin-top: 38px;
+      @include pc{
+        margin-top: 43px;
+      }
+    }
+    &-thumb{
+      margin: 0 auto;
+      width: 128px;
+      height: 128px;
+      border-radius: 110px;
+      position: relative;
+      figure{
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        vertical-align: middle;
+        text-align: center;
+        position: relative;
+        overflow: hidden;
+        border-radius: 50%;
+      }
+      &__image{
+        width: 128px;
+        height: 128px;
+        object-fit: cover;
+        font-family: 'object-fit: cover;';
+      }
+    }
+    &-name{
+      font-weight: bold;
+      font-size: 1.8rem;
+      text-align: center;
+      padding: 11px 0 0;
+      letter-spacing: 0.07em;
+      @include pc{
+        font-size: 1.4rem;
+        padding: 13px 0 0;
+      }
+    }
+    &-txt{
+      text-align: center;
+      color: $_color-text--gray03;
+      margin-top: 15px;
+      @include pc{
+        font-size: 1.4rem;
+      }
+    }
+  }
+  &-txtLink{
+    margin-top: 32px;
+    text-align: center;
+    .a-icon{
+      width: auto;
+    }
+  }
+}
+
+/* バリデーション関係 */
+.validation{
+  &_error{
+    border: 1px solid #e71e14 !important;
+  }
+}
+.error{
+  &_area{
+    background: #f2eaea;
+    border-radius: 4px;
+    margin-top: 12px;
+    padding: 12px 20px;
+    @include sp{
+      padding: 12px 18px;
+    }
+    &.area_top{
+      margin-bottom: 30px;
+      padding: 15px 20px;
+      @include sp{
+        margin-bottom: 25px;
+      }
+    }
+    p{
+      color: #e71e14;
+      font-size: 1.5rem;
+      @include sp{
+        line-height: 1.5;
+      }
+    }
+  }
+}
+
+
+
+.checkbox{
+  label{
+    letter-spacing: 0.06em;
+  }
+  .label-lsnone{
+    letter-spacing: 0;
+  }
+}
--- a/backend/resources/sass/object/project/_form.scss
+++ b/backend/resources/sass/object/project/_form.scss
@ -0,0 +1,84 @@
+ /* #Form
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: form
+name: form
+categories: [project]
+---
+
+フォーム関係のコンポーネントです。
+
+```block
+```
+*/
+
+.control-label{
+  color: $_color-text--gray03;
+  line-height: 1;
+  padding: 0 8px;
+  margin-left: 12px;
+  background: #fff;
+  position: relative;
+  z-index: 1;
+  @include pc{
+    padding: 0 11px;
+  }
+  @include sp{
+    font-size: 1.4rem;
+  }
+}
+.edit-set-file-label{
+  color: #93A0A7; 
+  background-color: #F2F5F7;
+  border: 1px dashed #B8C3C9;
+  width: 100%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.4rem;
+  font-weight: bold;
+  transition: all .2s ease-out;
+  cursor: pointer;
+  @include pc{
+    &:hover{
+      opacity: 0.7;
+    }
+  }
+}
+.input{
+  &-default{
+    margin-top: -13px;
+  }
+  &-w380{
+    @include pc{
+      max-width: 380px;
+    }
+  }
+  &-h56{
+    @include pc{
+      height: 56px;
+    }
+  }
+  &-h60{
+    @include pc{
+      height: 60px;
+    }
+  }
+}
+.textarea{
+  &-default{
+    margin-top: -13px;
+    line-height: 1.7;
+    padding-top: 17px;
+    @include sp{
+      height: 205px;
+    }
+  }
+}
+@include sp{
+  .test{
+    display: none;
+  }
+}
--- a/backend/resources/sass/object/project/_icon-extend.scss
+++ b/backend/resources/sass/object/project/_icon-extend.scss
@ -0,0 +1 @@
+/* アイコンのModifer */
--- a/backend/resources/sass/object/project/_icon.scss
+++ b/backend/resources/sass/object/project/_icon.scss
@ -0,0 +1,193 @@
+ /* #Icon
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: icon
+name: icon
+categories: [project]
+---
+
+アイコンフォントを使ったアイコンを表示します。デフォルトでは`:before`擬似要素で表示されます。
+サンプルコードはパンくずリストのホームをアイコンで（2つ目以降はアイコンだけで）示した場合の例です。
+
+装飾的なアイコンは`<span>`と`aria-hidden="true"`でマークアップをします。
+
+意味を伝えたいアイコンは`aria-label=""`でマークアップします。
+テキスト全体を読み上げたときに違和感が出ないようにします。
+
+テキストを表示できない場合は`.u-sr-only`でテキストをマークアップします（非表示のままスクリーンリーダーには読み上げられます）。
+
+```block
+<div>
+  <span class="p-icon p-icon--home" aria-hidden="true"></span>ホーム
+</div>
+
+<div>
+  <span class="p-icon p-icon--home" aria-label="ホーム"></span>
+</div>
+
+<div>
+  <span class="p-icon p-icon--home" aria-hidden="true"></span>
+  <span class="u-sr-only">ホーム</span>
+</div>
+```
+*/
+// 任意のクラスの擬似要素で表示する場合は@mixinを使って、
+// ベーススタイルとアイコンの名前を取得します。
+// @example scss
+// .p-list__link {
+//   &:after {
+//     @include _p-icon;
+//     @include _p-icon-name(chevron-right);
+//   }
+// }
+@font-face {
+  font-family: "iconfont";
+  src: url('../font/iconfont.eot');
+  src: url('../font/iconfont.eot?#iefix') format('eot'),
+    url('../font/iconfont.woff') format('woff'),
+    url('../font/iconfont.ttf') format('truetype'),
+    url('../font/iconfont.svg#iconfont') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+// アイコンフォントのベーススタイル
+@mixin _p-icon {
+  font-family: "iconfont";
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: relative;
+  top: -0.1em;
+  display: inline-block;
+  vertical-align: middle;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-decoration: none;
+  text-transform: none;
+  speak: none;
+}
+
+/* `p-icon p-icon--icon-name`のようなマルチクラスで指定します。 */
+.p-icon:before {
+  @include _p-icon;
+}
+
+@function _icon-char($filename) {
+  $char: "";
+
+  @if $filename == home { $char: "\E001"; }
+
+  @return $char;
+}
+
+@mixin _p-icon-name($filename) {
+  & { content: _icon-char($filename); }
+}
+
+.p-icon--home:before { @include _p-icon-name(home); }
+
+
+/* 使用中CSS */
+.icon{
+  &:after{
+    display: block;
+    content: "";
+  }
+}
+.a-icon{
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 30px;
+  line-height: 1;
+  color: inherit;
+  vertical-align: top;
+  touch-action: manipulation;
+  background-color: transparent;
+  border: none;
+  appearance: none;
+}
+.like-icon{
+  position: relative;
+  &:after{
+    background-size: 33px 30px;
+    width: 33px;
+    height: 32px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}
+.icon-star{
+  &:after{
+    background: url(../../assets/img/icon/star-outline-gray.svg) no-repeat;
+  }
+  &Fill{
+    &:after{
+      background: url(../../assets/img/icon/star-outline-yellow.svg) no-repeat;
+    }
+  }
+  &-wrap{
+    border: 1px solid #D0D0D0;
+    border-radius: 8px;
+    min-width: 52px;
+    height: 52px;
+    &:after{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translateX(-50%) translateY(-50%);
+    }
+  }
+}
+.icon-search{
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 48px;
+  height: 61px;
+  cursor: pointer;
+  @include pc{
+    height: 69px;
+    width: 54px;
+  }
+  &:after{
+    background: url(../../assets/img/icon/search-gray.svg) no-repeat;
+    background-size: cover;
+    width: 20px;
+    height: 20px;
+    margin-top: 13px;
+    @include pc{
+      width: 26px;
+      height: 26px;
+    }
+  }
+}
+.icon-calendar{
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 52px;
+  height: 60px;
+  cursor: pointer;
+  @include pc{
+    height: 69px;
+    width: 58px;
+  }
+  &:after{
+    background: url(../../assets/img/icon/calendar.svg) no-repeat;
+    background-size: cover;
+    width: 23px;
+    height: 25px;
+    margin-top: 15px;
+  }
+}
--- a/backend/resources/sass/object/project/_label.scss
+++ b/backend/resources/sass/object/project/_label.scss
@ -0,0 +1,17 @@
+ /* #Label
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: label
+name: label
+categories: [project]
+---
+
+インラインでメッセージを表示するコンポーネントです。
+
+```block
+<p><span class="p-label">タグ名</span></p>
+```
+*/
+.p-label {
+}
--- a/backend/resources/sass/object/project/_login.scss
+++ b/backend/resources/sass/object/project/_login.scss
@ -0,0 +1,38 @@
+ /* #Login
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: login
+name: login
+categories: [project]
+---
+
+ログイン関係のコンポーネントです。
+
+```block
+```
+*/
+
+.login{
+  &-panel{
+    .links{
+      text-align: center;
+      padding: 28px 0 0;
+      @include pc{
+        padding: 32px 0 0;
+      }
+    }
+    a{
+      @include _on-event {
+        text-decoration: underline;
+      }
+    }
+  }
+  &-submit{
+    margin-top: 35px;
+  }
+}
+
+.user_remember_me + .login-submit{
+  margin-top: 30px;
+}
--- a/backend/resources/sass/object/project/_meeting.scss
+++ b/backend/resources/sass/object/project/_meeting.scss
@ -0,0 +1,426 @@
+ /* #Meeting
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: meeting
+name: meeting
+categories: [project]
+---
+
+画像やテキストなどを縦に並べるコンポーネントです。
+
+ラベルはデフォルトで右上に配置されます。Modifierで以下のように変更できます。
+
+- 右下 `.p-box__labels--right-bottom`
+- 左上 `.p-box__labels--left-top`
+- 左下 `.p-box__labels--left-bottom`
+
+```block
+```
+*/
+@keyframes show{
+  from{
+      opacity: 0.1;
+  }
+  to{
+      opacity: 1;
+  }
+}
+.meeting{
+  &-content{
+    &-wrap{
+      display: none;
+      &.is-active{
+        display: block;
+        animation: show 0.15s linear 0s;
+      }
+    }
+  }
+  &-head{
+    display: flex;
+    align-items:flex-end;
+    margin-bottom: 7px;
+    @include pc{
+      margin-bottom: 10px;
+    }
+    @include sp{
+      width: 100%;
+    }
+  }
+  &-form{
+    margin-right: 30px;
+    position: relative;
+    width: 100%;
+    @include pc{
+      width: 380px;
+    }
+    @include sp{
+      margin-bottom: 23px;
+      margin-top: -13px;
+    }
+  }
+  &-item{
+    border-bottom: 1px solid rgba(36,77,138,0.1);
+    position: relative;
+    .like-icon{
+      position: absolute;
+      right: 0;
+      top: 55px;
+    }
+  }
+  &-link{
+    padding: 18px 60px 22px 0;
+    display: block;
+    @include pc{
+      padding: 21px 80px 21px 0;
+    }
+    @include sp02{
+      padding-right: 50px;
+    }
+  }
+  &-ttl{
+    font-size: 1.8rem;
+    font-weight: bold;
+    margin-bottom: 7px;
+    line-height: 1.52;
+    max-height: 100%;
+    @include sp{
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 1;
+      overflow: hidden;
+      display: -webkit-box;
+      margin-bottom: 7px;
+    }
+  }
+  &-txt{
+    font-size: 1.4rem;
+    color: $_color-text--gray02;
+    margin-bottom: 11px;
+    line-height: 1.4;
+    max-height: 100%;
+    @include sp{
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      overflow: hidden;
+      display: -webkit-box;
+    }
+  }
+  &-time{
+    margin-bottom: 13px;
+    display: block;
+    line-height: 1;
+    @include pc{
+      margin-bottom: 16px;
+    }
+  }
+  &-date{
+    font-size: 1.3rem;
+    color: $_color-text--gray02;
+    letter-spacing: 0.04em;
+  }
+  &-member{
+    &__read{
+      margin-left: auto;
+      @include pc{
+        display: none;
+      }
+      p{
+        color: $_color-text--gray03;
+        font-size: 1.4rem;
+      }
+    }
+    &-link{
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      transition: all .2s ease-out;
+      @include pc{
+        &:hover{
+          opacity: 0.7;
+        }
+      }
+    }
+    &-count{
+      display: table;
+      background: $_color-ui-yellow;
+      border-radius: 6px;
+      padding: 2px 11px;
+      margin-right: 13px;
+      li{
+        font-size: 1.4rem;
+        font-weight: bold;
+        display: table-cell;
+      }
+      .numerator{
+        position: relative;
+        &:after{
+          display: inline-block;
+          content: '/';
+          font-size: 1.3rem;
+          position: relative;
+          bottom: 1px;
+          padding: 0 0.1rem;
+        }
+      }
+    }
+    &-list{
+      display: flex;
+      align-items: center;
+    }
+    &__item{
+      &:not(:first-child){
+        margin-left: -3px;
+      }
+      a{
+        display: block;
+        transition: all .2s ease-out;
+        @include pc{
+          &:hover{
+            opacity: 0.8;
+          }
+        }
+      }
+      .avatar{
+        width: 46px;
+        height: 46px;
+        border-radius: 23px;
+        border: 1px solid $_color-ui-yellow;
+        @include pc{
+          width: 40px;
+          height: 40px;
+          border-radius: 20px;
+        }
+      }
+    }
+  }
+  &-tab{
+    background: $_color-ui-gray;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    border-radius: 16px;
+    overflow: hidden;
+    position: relative;
+    @include pc{
+      border-radius: 20px;
+    }
+    @include sp{
+      width: 100%;
+    }
+    &-container{
+      @include pc{
+        padding: 35px 35px 50px;
+      }
+    }
+    &-wrap{
+      display: flex;
+      flex-wrap: wrap;
+      .tab-switch{
+        display: none;
+      }
+      .tab-label{
+        font-weight: 500;
+        text-transform: uppercase;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        width: 50%;
+        position: relative;
+        letter-spacing: 0.03em;
+        background: #f0f0f0;
+        cursor: pointer;
+        @include pc{
+          width: 190px;
+        }
+        &.is-active{
+          span{
+            color: #fff;
+            font-weight: bold;
+          }
+        }
+        span{
+          position: relative;
+          z-index: 2;
+          color: #6f7372;
+          max-height: 100%;
+        }
+        &:first-child{
+          &:before{
+            content: "";
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 100%;
+            z-index: 1;
+            transition: 0.3s ease all;
+            background: #000;
+            color: #fff;
+            border-radius: 16px;
+            @include pc{
+              width: 190px;
+              border-radius: 20px;
+              left: 190px;
+            }
+          }
+          &.is-active{
+            &:before{
+              left: 0px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.p{
+  &-meetingAdd{
+    &-btn{
+      width: 64px;
+      display: flex;
+      @include pc{
+        width: 181px;
+      }
+      @include sp02{
+        width: 58px;
+      }
+      @include sp{
+        position: fixed;
+        right: 20px;
+        bottom: 76px;
+        z-index: 5;
+        @include sp02{
+          bottom: 74px;
+        }
+        .btn-r8{
+          border-radius: 35px;
+        }
+        .btn-h48{
+          height: 64px;
+          @include sp02{
+            height: 58px;
+          }
+        }
+        
+        span{
+          display: none;
+        }
+      }
+    }
+  }
+  &-consent{
+    &-btn{
+      display: flex;
+      width: 64px;
+      @include sp{
+        width: 62px;
+        position: fixed;
+        right: 20px;
+        bottom: 72px;
+        z-index: 5;
+        .btn-r8{
+          border-radius: 35px;
+        }
+        .btn-h42{
+          height: 62px;
+        }
+        
+        span{
+          font-size: 1.6rem;
+        }
+      }
+    }
+  }
+}
+
+
+.meeting-consent{
+  .meeting{
+    &-item{
+      padding: 17px 0 22px;
+    @include pc{
+      padding: 19px 0 21px;
+      }
+    }
+    &-link{
+      padding: 9px 0 14px;
+    @include pc{
+      padding: 10px 0 11px;
+      }
+    }
+    &-txt{
+      margin-bottom: 0;
+    }
+    &-label{
+      background: #EAEFF2;
+      width: 120px;
+      height: 34px;
+      border-radius: 17px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.4rem;
+      margin-bottom: 12px;
+      font-weight: bold;
+    }
+    &-search{
+      .meeting-head{
+        margin-bottom: 14px;
+      }
+    }
+  }
+  .p-article{
+    &__content{
+      .meeting{
+        &-time{
+          margin-bottom: 18px;
+          @include pc{
+            margin-bottom: 13px;
+          }
+        }
+      }
+    }
+    &__context{
+      margin-top: 21px;
+    }
+    &-single{
+      .meeting-ttl{
+        margin-bottom: 6px;
+        @include sp{
+          overflow: visible;
+          display: block;
+          -webkit-line-clamp: auto;
+        }
+      }
+    }
+  }
+  .search-item{
+    .user-name{
+      margin-bottom: 0;
+      font-weight: normal;
+    }
+  }
+  
+}
+/* meeting-consent */
+/*
+.meeting-consent{
+  .meeting-link{
+    padding-right: 0;
+  }
+  .like-icon{
+    display: none;
+  }
+}
+いらないかも */
+
+/* meeting-search */
+.meeting-search{
+  .meeting-head{
+    @include sp{
+      display: block;
+    }
+  }
+}
--- a/backend/resources/sass/object/project/_modal.scss
+++ b/backend/resources/sass/object/project/_modal.scss
@ -0,0 +1,180 @@
+ /* #Modal
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: modal
+name: modal
+categories: [project]
+---
+
+モーダル関係のコンポーネントです。
+
+```block
+```
+*/
+
+@keyframes show{
+  from{
+      opacity: 0.1;
+  }
+  to{
+      opacity: 1;
+  }
+}
+.modal{
+  &-area{
+    position: fixed;
+    z-index: 10;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    &.modal01{
+      .modal-wrap{
+        padding-bottom: 9px;
+      }
+    }
+  }
+  &-pd{
+    .modal-ttl{
+      padding: 0;
+    }
+    .modal-wrap{
+      padding: 30px 20px;
+    }
+  }
+  &-bg{
+    width: 100%;
+    height: 100%;
+    background-color: rgba(30,30,30,0.5);
+  }
+  &-wrap{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    width: 70%;
+    background-color: #fff;
+    border-radius: 20px;
+    max-width: 340px;
+    box-sizing: border-box;
+    @include sp{
+      width: 82%;
+    }
+    @include min{
+      width: 88%;
+    }
+  }
+  &-box{
+
+  }
+  &-up65{
+    .modal-wrap{
+      top: 0px;
+      transform: translate(-50%,65px);
+      @include pc{
+        top: 65px;
+      }
+    }
+  }
+  &-content{
+    display: none;
+    &.is-active{
+      display: block;
+      animation: show 0.15s linear 0s;
+    }
+    &-area{
+      padding: 19px 25px 27px 20px;
+      @include pc{
+        padding: 24px 30px 33px 25px;
+      }
+    }
+    &-item{
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      &:not(:first-child){
+        margin-top: 23px;
+      }
+      .user{
+        &-wrap{
+          a{
+            display: flex;
+            align-items: center;
+            transition: all .2s ease-out;
+          }
+        }
+        &-avatar{
+          min-width: 40px;
+          width: 40px;
+          height: 40px;
+          border-radius: 20px;
+          border: 1px solid #f0de00;
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+  &-ttl{
+    text-align: center;
+    padding: 30px 20px 0px;
+    @include sp{
+      padding-top: 28px;
+    }
+  }
+  &-answer{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 84%;
+    margin: 0 auto;
+    li{
+      width: 50%;
+      p,a{
+        font-weight: bold;
+        text-align: center;
+        display: block;
+        padding: 23px 0 30px;
+        cursor: pointer;
+        transition: all .2s ease-out;
+      }
+    }
+  }
+  &-tab{
+    &-area{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-bottom: 1px solid rgba(36,77,138,.1);
+      
+    }
+    &-label{
+      width: 50%;
+      text-align: center;
+      cursor: pointer;
+      padding: 20px 0 18px;
+      span{
+        color: #6f7372;
+      }
+      &.is-active{
+        span{
+          font-weight: 700;
+          color: #000;
+        }
+      }
+    }
+  }
+  &-close-btn{
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    cursor: pointer;
+  }
+}
+
+.p-notification{
+  &-btn{
+    width: 100%;
+    max-width: 62px;
+  }
+}
--- a/backend/resources/sass/object/project/_notification.scss
+++ b/backend/resources/sass/object/project/_notification.scss
@ -0,0 +1,95 @@
+ /* #Notification
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: notification
+name: notification
+categories: [project]
+---
+
+お知らせアイコンのコンポーネントです。
+
+```block
+```
+*/
+
+.p{
+  &-notification{
+    padding: 6px 6px 0 0;
+    display: block;
+    @include sp{
+      position: absolute;
+      right: 18px;
+      top: 18px;
+      z-index: 5;
+    }
+    &-icon{
+      width: 44px;
+      height: 44px;
+      position: relative;
+      cursor: pointer;
+      color: rgb(51, 51, 51);
+      @include pc{
+        width: 48px;
+        height: 48px;
+      }
+      @include min{
+        width: 40px;
+        height: 40px;
+      }
+      &-wrap{
+        .count{
+          position: absolute;
+          right: -6px;
+          top: -6px;
+          background-color: #D82828;
+          color: rgb(255, 255, 255);
+          display: flex;
+          flex-direction: row;
+          -webkit-box-pack: center;
+          justify-content: center;
+          -webkit-box-align: center;
+          align-items: center;
+          z-index: 1;
+          border-radius: 200px;
+          min-width: 18px;
+          height: 18px;
+          padding: 2px;
+          font-size: 1.2rem;
+          font-weight: 500;
+          line-height: 1;
+          @include pc{
+            min-width: 20px;
+            height: 20px;
+          }
+          @include min{
+            min-width: 14px;
+            height: 14px;
+            font-size: 1rem;
+            right: -5px;
+            top: -5px;
+          }
+        }
+        .icon{
+          width: 21px;
+          height: 18px;
+          @include min{
+            width: 18px;
+            height: 15px;
+          }
+        }
+      }
+      &-bg{
+        width: 100%;
+        height: 100%;
+        background-color: $_color-ui-yellow;
+        border-radius: 500px;
+        position: absolute;
+        top: 0px;
+        left: 0px;
+        box-shadow: 0 1px 4px rgba(0,0,0,.1);
+      }
+    }
+    
+  }
+}
--- a/backend/resources/sass/object/project/_profile.scss
+++ b/backend/resources/sass/object/project/_profile.scss
@ -0,0 +1,186 @@
+ /* #Profile
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: profile
+name: profile
+categories: [project]
+---
+
+プロフィールページ関係のコンポーネントです。
+
+```block
+```
+*/
+
+.profile{
+  &-container{
+
+  }
+  &-wrap{
+    padding: 10px 0 40px;
+    @include pc{
+      padding: 45px 0 40px;
+    }
+  }
+  &-content{
+    max-width: 100%;
+    margin: 0 auto;
+    @include pc{
+      max-width: 380px; 
+    }
+  }
+  &-thumb{
+    margin: 0 auto;
+    width: 220px;
+    height: 220px;
+    border-radius: 110px;
+    position: relative;
+    label{
+      cursor: pointer;
+    }
+    label,figure{
+      display: flex;
+      vertical-align: middle;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+      border-radius: 50%;
+      width: 220px;
+      height: 220px;
+    }
+    &__image{
+      width: 220px;
+      height: 220px;
+      object-fit: cover;
+      font-family: 'object-fit: cover;';
+    }
+
+  }
+  &-camera{
+    width: 52px;
+    height: 52px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    .btn-camera{
+      width: 52px;
+      height: 52px;
+      background-color: #f0de00;
+      border-radius: 26px;
+      position: relative;
+      &:hover{
+        opacity: 1;
+        .icon{
+          opacity: 0.6;
+        }
+      }
+      .icon{
+        transition: all .2s ease-out;
+        &:after{
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translateX(-50%) translateY(-50%);
+          width: 22px;
+          height: 18px;
+          background-repeat: no-repeat;
+          background-position: center center;
+          background-size: 100% auto;
+          background-image: url(../../assets/img/icon/camera.svg);
+        }
+      }
+    }
+  }
+  &-name{
+    font-weight: bold;
+    font-size: 2.2rem;
+    text-align: center;
+    padding: 13px 0 30px;
+    letter-spacing: 0.06em;
+    @include pc{
+      font-size: 1.8rem;
+      padding: 17px 0 25px;
+    }
+  }
+  &-info{
+    background: $_color-ui-gray;
+    border-radius: 4px;
+    margin-bottom: 30px;
+    @include pc{
+      margin-bottom: 35px;
+    }
+    &__item{
+      display: flex;
+      align-items: center;
+      padding: 15px 20px 15px 15px;
+      position: relative;
+      @include pc{
+        padding: 15px 30px 15px 20px;
+      }
+      &:not(:first-child){
+        border-top: 1px solid #EAEFF2;
+      }
+      .txt{
+       margin-left: 35px;
+       max-height: 100%;
+      }
+      &.txt-long{
+        .txt{
+          padding-bottom: 10px;
+        }
+      }
+    }
+    &__icon{
+      -ms-flex-negative: 0;
+      flex-shrink: 0;
+      width: 22px;
+      height: 22px;
+      position: absolute;
+      top: 50%;
+      left: 15px;
+      transform: translateY(-50%);
+      @include pc{
+        left: 20px;
+      }
+    }
+  }
+}
+
+.p-profile-btn{
+  + .p-profile-btn{
+    margin-top: 17px;
+  }
+  + .p-profile-txtLink{
+    margin-top: 43px;
+    @include pc{
+      margin-top: 37px;
+    }
+  }
+}
+
+.p-profile-txtLink{
+  text-align: center;
+  .a-icon{
+    width: auto;
+  }
+  + .p-profile-txtLink{
+    margin-top: 7px;
+  }
+}
+
+#profile{
+  &-file{
+    &-preview{
+      width: 220px;
+      height: 220px;
+      -o-object-fit: cover;
+      object-fit: cover;
+      border-radius: 110px;
+      overflow: hidden;
+      border: 1px solid #d0d0d0;
+      box-sizing: border-box;
+      font-family: "object-fit: cover;";
+    }
+  }
+}
--- a/backend/resources/sass/object/project/_search.scss
+++ b/backend/resources/sass/object/project/_search.scss
@ -0,0 +1,102 @@
+ /* #Search
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: search
+name: search
+categories: [project]
+---
+
+検索ページ関係のコンポーネントです。
+
+```block
+```
+*/
+
+.search{
+  &-container{
+    @include pc{
+      padding: 10px 32px;
+    }
+  }
+  &-wrap{
+
+  }
+  &-content{
+
+  }
+  &-item{
+    &:not(:last-child){
+      border-bottom: 1px solid rgba(36,77,138,.1);
+    }
+    &:first-child{
+      @include sp{
+        border-top: 1px solid rgba(36,77,138,.1);
+      }
+    }
+    &:last-child{
+      @include sp{
+        border-bottom: 1px solid rgba(36,77,138,.1);
+      }
+    }
+    a{
+      display: block;
+      padding: 11px 0;
+      position: relative;
+      @include pc{
+        padding: 15px 0;
+      }
+      &:after{
+        display: block;
+        content: "";
+        position: absolute;
+        left: -32px;
+        top: 0;
+        width: calc(100% + 64px);
+        height: 100%;
+        opacity: 0;
+        background: #f8f8f8;
+        transition: .3s;
+        z-index: 1;
+      }
+      &:hover{
+        &:after{
+          opacity: 1;
+        }
+      }
+    }
+    .user{
+      &-wrap{
+        display: flex;
+        align-items: center;
+        position: relative;
+        z-index: 2;
+      }
+      &-avatar{
+        min-width: 60px;
+        width: 60px;
+        height: 60px;
+        border-radius: 30px;
+        border: 1px solid #f0de00;
+        margin-right: 13px;
+        @include pc{
+          margin-right: 15px;
+        }
+      }
+      &-info{
+
+      }
+      &-name{
+        font-weight: bold;
+        margin-bottom: 6px;
+        line-height: 1.3;
+        padding-right: 15px;
+      }
+      &-tel{
+        font-size: 1.4rem;
+        line-height: 1;
+        margin-bottom: 2px;
+      }
+    }
+  }
+}
--- a/backend/resources/sass/object/project/_user.scss
+++ b/backend/resources/sass/object/project/_user.scss
@ -0,0 +1,68 @@
+ /* #User
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: user
+name: user
+categories: [project]
+---
+
+ユーザー関係のコンポーネントです。
+
+```block
+```
+*/
+
+.user{
+  &-advice{
+    &-btn{
+      width: 142px;
+    }
+  }
+  &-date{
+    display: flex;
+    align-items: center;
+    span{
+      color:$_color-text--gray02;
+      font-size: 1.24rem;
+      letter-spacing: 0.01em;
+      @include pc{
+        font-size: 1.4rem;
+      }
+      .date{
+        letter-spacing: 0.06em;
+      }
+    }
+  }
+  &-updated-time{
+    margin-right: 30px;
+    @include pc{
+      margin-right: 50px;
+    }
+  }
+  &-sm{
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    a{
+      display: flex;
+      align-items: center;
+    }
+    .user{
+      &-avatar{
+        width: 46px;
+        height: 46px;
+        border-radius: 23px;
+        border: 1px solid #f0de00;
+        margin-right: 12px;
+        @include pc{
+          width: 40px;
+          height: 40px;
+          border-radius: 20px;
+          margin-right: 15px;
+        }
+      }
+      
+    }
+  }
+}
--- a/backend/resources/sass/object/scope/_blog.scss
+++ b/backend/resources/sass/object/scope/_blog.scss
@ -0,0 +1,8 @@
+ /* #Blog
+   -------------------------------------------------------------------------- */
+/**
+ * ブログページのスタイルです。
+ */
+.s-blog {
+
+}
--- a/backend/resources/sass/object/utility/.DS_Store
+++ b/backend/resources/sass/object/utility/.DS_Store
--- a/backend/resources/sass/object/utility/_align.scss
+++ b/backend/resources/sass/object/utility/_align.scss
@ -0,0 +1,36 @@
+ /* #Align
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: align
+name: align
+categories: [utility]
+---
+
+画像などを左右や中央に配置します。
+
+```block
+<div class="c-wrapper">
+  <img src="http://lorempixel.com/150/150/">
+  <img src="http://lorempixel.com/150/150/" class="u-align-center">
+  <img src="http://lorempixel.com/150/150/" class="u-align-right">
+</div>
+```
+*/
+.u-align-left {
+  display: block !important;
+  margin-left: 0 !important;
+  margin-right: auto !important;
+}
+
+.u-align-center {
+  display: block !important;
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+.u-align-right {
+  display: block !important;
+  margin-left: auto !important;
+  margin-right: 0 !important;
+}
--- a/backend/resources/sass/object/utility/_display.scss
+++ b/backend/resources/sass/object/utility/_display.scss
@ -0,0 +1,33 @@
+ /* #Display
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: display
+name: display
+categories: [utility]
+---
+
+表示非表示を切り替えます。改行位置のコントロールもできます。
+
+```block
+<p class="u-dn-md"><code>$-md</code>以降は非表示になります。</p>
+<p class="u-dn u-db-md"><code>$-md</code>以降は表示されます。</p>
+<p>基本はなりゆきでウィンドウサイズが狭くなると、<span class="u-dib">ここから改行されます。</span></p>
+<p><code>$-md</code>以降になると、<span class="u-db-md">ここから改行されます。</span></p>
+```
+*/
+@include _responsive(".u-dn") {
+  display: none !important;
+}
+
+@include _responsive(".u-db") {
+  display: block !important;
+}
+
+@include _responsive(".u-di") {
+  display: inline !important;
+}
+
+@include _responsive(".u-dib") {
+  display: inline-block !important;
+}
--- a/backend/resources/sass/object/utility/_margin.scss
+++ b/backend/resources/sass/object/utility/_margin.scss
@ -0,0 +1,195 @@
+ /* #Margin
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: margin
+name: margin
+categories: [utility]
+---
+
+マージンで余白の管理をします。常に下方向にだけ余白をとります。
+`<section>`要素を使うようなセクションの余白はlayout/_section.scssで管理します。
+
+* `.u-mb`は常に余白をとります。
+* `.u-mb-gain`はあるブレイクポイント以上で余白を指定します。
+* `.u-mb-lose`はあるブレイクポイント以上で余白を無くします。
+
+
+```block
+```
+*/
+/* 常に余白を指定するクラス。 */
+.u-mb-auto {
+  margin-bottom: auto !important;
+}
+.u-mb0 {
+  margin-bottom: 0 !important;
+}
+.u-mb5 {
+  margin-bottom: 5px !important;
+}
+.u-mb10 {
+  margin-bottom: 10px !important;
+}
+.u-mb15 {
+  margin-bottom: 15px !important;
+}
+.u-mb20 {
+  margin-bottom: 20px !important;
+}
+.u-mb25 {
+  margin-bottom: 25px !important;
+}
+.u-mb30 {
+  margin-bottom: 30px !important;
+}
+.u-mb35 {
+  margin-bottom: 35px !important;
+}
+.u-mb40 {
+  margin-bottom: 40px !important;
+}
+.u-mb45 {
+  margin-bottom: 45px !important;
+}
+.u-mb50 {
+  margin-bottom: 50px !important;
+}
+.u-mb55 {
+  margin-bottom: 55px !important;
+}
+.u-mb60 {
+  margin-bottom: 60px !important;
+}
+.u-mb65 {
+  margin-bottom: 65px !important;
+}
+.u-mb70 {
+  margin-bottom: 70px !important;
+}
+.u-mb75 {
+  margin-bottom: 75px !important;
+}
+.u-mb80 {
+  margin-bottom: 80px !important;
+}
+.u-mb-small {
+  margin-bottom: 0.5em !important;
+  @include pc {
+    margin-bottom: 1em !important;
+  }
+}
+
+
+/* ブレイクポイント以上 */
+@include sp {
+  .u-mb0-gain {
+    margin-bottom: 0 !important;
+  }
+  .u-mb5-gain {
+    margin-bottom: 5px !important;
+  }
+  .u-mb10-gain {
+    margin-bottom: 10px !important;
+  }
+  .u-mb15-gain {
+    margin-bottom: 15px !important;
+  }
+  .u-mb20-gain {
+    margin-bottom: 20px !important;
+  }
+  .u-mb25-gain {
+    margin-bottom: 25px !important;
+  }
+  .u-mb30-gain {
+    margin-bottom: 30px !important;
+  }
+  .u-mb35-gain {
+    margin-bottom: 35px !important;
+  }
+  .u-mb40-gain {
+    margin-bottom: 40px !important;
+  }
+  .u-mb45-gain {
+    margin-bottom: 45px !important;
+  }
+  .u-mb50-gain {
+    margin-bottom: 50px !important;
+  }
+  .u-mb55-gain {
+    margin-bottom: 55px !important;
+  }
+  .u-mb60-gain {
+    margin-bottom: 60px !important;
+  }
+  .u-mb65-gain {
+    margin-bottom: 65px !important;
+  }
+  .u-mb70-gain {
+    margin-bottom: 70px !important;
+  }
+  .u-mb75-gain {
+    margin-bottom: 75px !important;
+  }
+  .u-mb80-gain {
+    margin-bottom: 80px !important;
+  }
+}
+
+
+
+/* ブレイクポイント以上 */
+@include pc {
+  .u-mb0-lose {
+    margin-bottom: 0 !important;
+  }
+  .u-mb5-lose {
+    margin-bottom: 5px !important;
+  }
+  .u-mb10-lose {
+    margin-bottom: 10px !important;
+  }
+  .u-mb15-lose {
+    margin-bottom: 15px !important;
+  }
+  .u-mb20-lose {
+    margin-bottom: 20px !important;
+  }
+  .u-mb25-lose {
+    margin-bottom: 25px !important;
+  }
+  .u-mb30-lose {
+    margin-bottom: 30px !important;
+  }
+  .u-mb35-lose {
+    margin-bottom: 35px !important;
+  }
+  .u-mb40-lose {
+    margin-bottom: 40px !important;
+  }
+  .u-mb45-lose {
+    margin-bottom: 45px !important;
+  }
+  .u-mb50-lose {
+    margin-bottom: 50px !important;
+  }
+  .u-mb55-lose {
+    margin-bottom: 55px !important;
+  }
+  .u-mb60-lose {
+    margin-bottom: 60px !important;
+  }
+  .u-mb65-lose {
+    margin-bottom: 65px !important;
+  }
+  .u-mb70-lose {
+    margin-bottom: 70px !important;
+  }
+  .u-mb75-lose {
+    margin-bottom: 75px !important;
+  }
+  .u-mb80-lose {
+    margin-bottom: 80px !important;
+  }
+}
+
--- a/backend/resources/sass/object/utility/_percent.scss
+++ b/backend/resources/sass/object/utility/_percent.scss
@ -0,0 +1,48 @@
+ /* #Percent
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: percent
+name: percent
+categories: [utility]
+---
+
+`width`プロパティを5%刻みで指定する汎用クラスです。おもに`.c-table--fixed`と一緒に指定します。
+
+```block
+<div class="c-wrapper">
+  <table class="c-table c-table--medium c-table--fixed">
+    <tr>
+      <th class="u-percent50">th1</th>
+      <th>th2</th>
+      <th>th3</th>
+    </tr>
+    <tr>
+      <td>td1</td>
+      <td>td2</td>
+      <td>td3</td>
+    </tr>
+  </table>
+</div>
+```
+*/
+.u-percent5 { width: percentage(5 * 0.01) !important; }
+.u-percent10 { width: percentage(10 * 0.01) !important; }
+.u-percent15 { width: percentage(15 * 0.01) !important; }
+.u-percent20 { width: percentage(20 * 0.01) !important; }
+.u-percent25 { width: percentage(25 * 0.01) !important; }
+.u-percent30 { width: percentage(30 * 0.01) !important; }
+.u-percent35 { width: percentage(35 * 0.01) !important; }
+.u-percent40 { width: percentage(40 * 0.01) !important; }
+.u-percent45 { width: percentage(45 * 0.01) !important; }
+.u-percent50 { width: percentage(50 * 0.01) !important; }
+.u-percent55 { width: percentage(55 * 0.01) !important; }
+.u-percent60 { width: percentage(60 * 0.01) !important; }
+.u-percent65 { width: percentage(65 * 0.01) !important; }
+.u-percent70 { width: percentage(70 * 0.01) !important; }
+.u-percent75 { width: percentage(75 * 0.01) !important; }
+.u-percent80 { width: percentage(80 * 0.01) !important; }
+.u-percent85 { width: percentage(85 * 0.01) !important; }
+.u-percent90 { width: percentage(90 * 0.01) !important; }
+.u-percent95 { width: percentage(95 * 0.01) !important; }
+.u-percent100 { width: percentage(100 * 0.01) !important; }
--- a/backend/resources/sass/object/utility/_sr-only.scss
+++ b/backend/resources/sass/object/utility/_sr-only.scss
@ -0,0 +1,43 @@
+ /* #Sr-only
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: sr-only
+name: sr-only
+categories: [utility]
+---
+
+要素を非表示にさせますが、スクリーンリーダーには読み上げられます。
+
+```block
+
+```
+*/
+
+@include pc {
+  .v-sp,
+  .h-pc {
+    display: none ;
+  }
+}
+@include sp {
+  .v-pc,
+  .h-sp {
+    display: none ;
+  }
+}
+@media screen and (min-width: 1024px) {
+  .h-md{
+    display: none ;
+  }
+}
+@media screen and (max-width: 1023px) {
+  .v-md{
+    display: none ;
+  }
+}
+@media screen and (min-width: 568px) {
+  .v-se {
+    display: none ;
+  }
+}
--- a/backend/resources/sass/object/utility/_text.scss
+++ b/backend/resources/sass/object/utility/_text.scss
@ -0,0 +1,177 @@
+/* -----------------------------------------------------------------------------
+   #Text
+   -------------------------------------------------------------------------- */
+/*doc
+---
+title: text
+name: text
+categories: [utility]
+---
+
+テキストのスタイルを指定する汎用クラスです。
+
+```block
+<p class="u-text-light">font-weight 300</p>
+<p class="u-text-normal">font-weight 400</p>
+<p class="u-text-bold">font-weight 600</p>
+<p class="u-text-indent">先頭の1文字目を1文字分字下げします。</p>
+<p class="u-text-note">2行目以降の1文字目を1文字分字下げします。<br>2行目以降の1文字目を1文字分字下げします。</p>
+<p class="u-text-nowrap">テキストを折り返させません。横幅を超えても、このテキストは折り返さずに表示されます。</p>
+<p class="u-text-breakword">テキストを折り返させます。長文になっても、このテキストは必ず折り返して表示されます。</p>
+<p class="u-text-justify">テキストを両端揃え（均等割り付け）させます。通常のテキストと文字間が違うのが分かると思います。</p>
+<p class="u-text-none">記述した通りに表示します。</p>
+<p class="u-text-lowercase">abcdEFGH すべての英単語を小文字で表示します。</p>
+<p class="u-text-uppercase">abcdEFGH すべての英単語を大文字で表示します。</p>
+<p class="u-text-capitalize">abcdEFGH 英単語の先頭を大文字で表示します。</p>
+<p class="u-text-smallcaps">abcdEFGH スモールキャップ（小文字と同じ高さで作られた大文字）で表示します。</p>
+<p class="u-text-vertical">abcdEFGH 縦書きで表示します。</p>
+<p class="u-text-vertical u-text-vertical--upright">abcdEFGH 英文も縦書きにする場合はModifierを指定します。</p>
+<p class="u-text-right">text-align right</p>
+<p class="u-text-center">text-align center</p>
+<p class="u-text-left">text-align left</p>
+<p class="u-text-top">vertical-align top</p>
+<p class="u-text-middle">vertical-align middle</p>
+<p class="u-text-bottom">vertical-align bottom</p>
+<p class="u-text-baseline">vertical-align baseline</p>
+```
+*/
+
+/* font-weightを指定します。 */
+.u-text-light {
+  font-weight: $_font-weight-light !important;
+}
+
+.u-text-normal {
+  font-weight: $_font-weight-normal !important;
+}
+
+.u-text-bold {
+  font-weight: $_font-weight-bold !important;
+}
+
+/* 先頭の1文字目を1文字分字下げします。 */
+.u-text-indent {
+  text-indent: 1em !important;
+}
+
+/* 2行目以降の1文字目を1文字分字下げします。 */
+.u-text-note {
+  margin-left: 1em !important;
+  text-indent: -1em !important;
+}
+
+/* テキストを改行させません。 */
+.u-text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* テキストを改行させます。 */
+.u-text-breakword {
+  word-wrap: break-word !important;
+  overflow-wrap: break-word !important;
+}
+
+/* テキストを両端揃えさせます。 */
+.u-text-justify {
+  text-align: justify !important;
+  text-justify: inter-ideograph !important;
+}
+
+/* 記述した通りに表示します。 */
+.u-text-none {
+  text-transform: none !important;
+}
+
+/* すべての英単語を小文字にします。 */
+.u-text-lowercase {
+  text-transform: lowercase !important;
+}
+
+/* すべての英単語を大文字にします。 */
+.u-text-uppercase {
+  text-transform: uppercase !important;
+}
+
+/* 英単語の先頭を大文字にします。 */
+.u-text-capitalize {
+  text-transform: capitalize !important;
+}
+
+/* スモールキャップ（小文字と同じ高さで作られた大文字）にします。 */
+.u-text-smallcaps {
+  font-variant: small-caps !important;
+}
+
+/* 縦書きにします。 */
+.u-text-vertical {
+  writing-mode: vertical-rl !important;
+  text-orientation: mixed !important;
+}
+
+/* 英文も縦書きにする場合はModifierを指定します。 */
+.u-text-vertical--upright {
+  text-orientation: upright !important;
+}
+
+.u-text-right {
+  text-align: right !important;
+}
+.u-text-center {
+  text-align: center !important;
+}
+.u-text-left {
+  text-align: left !important;
+}
+@media screen and (max-width: 1023px){
+  .u-text_r-lg-c {
+    text-align: center !important;
+  }
+  .u-text_r-lg-l {
+    text-align: left !important;
+  }
+  .u-text_c-lg-r {
+    text-align: right !important;
+  }
+  .u-text_c-lg-l {
+    text-align: left !important;
+  }
+  .u-text_l-lg-c {
+    text-align: center !important;
+  }
+  .u-text_l-lg-r {
+    text-align: right !important;
+  }
+}
+@media print, screen and (min-width:768px) {
+  .u-text_r-sm-c {
+    text-align: center !important;
+  }
+  .u-text_r-sm-l {
+    text-align: left !important;
+  }
+  .u-text_c-sm-r {
+    text-align: right !important;
+  }
+  .u-text_c-sm-l {
+    text-align: left !important;
+  }
+  .u-text_l-sm-c {
+    text-align: center !important;
+  }
+  .u-text_l-sm-r {
+    text-align: right !important;
+  }
+}
+
+.u-text-top {
+  vertical-align: top !important;
+}
+.u-text-middle {
+  vertical-align: middle !important;
+}
+.u-text-bottom {
+  vertical-align: bottom !important;
+}
+.u-text-baseline {
+  vertical-align: baseline !important;
+}
--- a/backend/resources/views/contact/complete.blade.php
+++ b/backend/resources/views/contact/complete.blade.php
@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>Contact Us</title>
+
+    </head>
+    <body class="">
+        <main class="l-single-main l-registration">
+        <div class="l-centeringbox">
+            <div class="l-centeringbox-wrap">
+            <div class="l-single-container">
+                <div class="l-single-inner">
+                <h1>本登録</h1>
+                <form name="login" action="/login" accept-charset="UTF-8" method="post">
+                    <div class="edit-set-bg u-mb30-lose u-mb25-gain">
+                    <p>退会完了しました。<br>今後とも、危機管理をよろしくお願いいたします。</p>
+                    </div>
+                    <a href="" class="login-submit btn-default btn-r14 btn-h70 btn-yellow">ログイン画面へ</a>
+                </form>
+                </div>
+            </div>
+            </div>
+
+        </div>
+        </main>
+    </body>
+
+    <script src=""></script>
+</html>
--- a/backend/routes/web.php
+++ b/backend/routes/web.php
@ -16,3 +16,7 @@ use Illuminate\Support\Facades\Route;
 Route::get('/', function () {
    return view('welcome');
 });
+
+Route::get('/contact-us/complete/', function () {
+    return view('contact.complete');
+});
--- a/backend/webpack.mix.js
+++ b/backend/webpack.mix.js
@ -6,12 +6,11 @@ const mix = require('laravel-mix');
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel applications. By default, we are compiling the CSS
+ | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

 mix.js('resources/js/app.js', 'public/js')
-    .postCss('resources/css/app.css', 'public/css', [
-        //
-    ]);
+    .react()
+    .sass('resources/sass/index.scss', 'public/css');