diff --git a/hataraku_view/img/bg.png b/hataraku_view/img/bg.png
new file mode 100644
index 0000000..fa6ec93
--- /dev/null
+++ b/hataraku_view/img/bg.png
Binary files differ
diff --git a/hataraku_view/img/sticky-note-blue.png b/hataraku_view/img/sticky-note-blue.png
new file mode 100644
index 0000000..93af00e
--- /dev/null
+++ b/hataraku_view/img/sticky-note-blue.png
Binary files differ
diff --git a/hataraku_view/img/sticky-note-yellow.png b/hataraku_view/img/sticky-note-yellow.png
new file mode 100644
index 0000000..86b8be0
--- /dev/null
+++ b/hataraku_view/img/sticky-note-yellow.png
Binary files differ
diff --git a/hataraku_view/index.html b/hataraku_view/index.html
index 71bef21..5517291 100644
--- a/hataraku_view/index.html
+++ b/hataraku_view/index.html
@@ -54,160 +54,58 @@
             </div>
         </section>
 
-            <section id="article-view" class="wrapper">
+         <section id="article-view" class="wrapper">
                     <div class="view-left">
-                        <div class="section-title-box"><h2 class="section-title">働き方をみる</h2></div>
-                                <article class="class9">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">閉塾式</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li>2022.02.12</li>
-                        <li>【振り返り】</li>
-                    </ul>
-                                <img src="../activities/img/0212.JPG" alt="閉塾式写真">
-                                <p class="text">
-                                閉塾式では、最後に 4 人で写真を撮っている姿をみて、ここまで仲良くなれたことを実感しました。
-                                お互いに教え合って、協力がうまくできていたチームになっていて、私の理想のチームを作り上げるこ
-                                とが出来ました！
-                                </p>
+                        <div class="section-title-box"><h2 class="section-title title-red">社長編</h2></div>
+                                <article class="class">
+                                    <div class="article-inner">
+                                        <img src="../hataraku_view/img/sticky-note-blue.png" alt="付箋" class="sticky-note">
+                                        <div class="article-flex">
+                                            <div class="article-box-left">
+                                                <h3 class="article-title">社長編　<span class="article-title-red">#01</span></h3>
+                                                <p class="article-name">楯の川酒造株式会社<br>佐藤　淳平さん</p>
+                                                <p class="article-text">酒田市出身。東京農業大学応用生物科学部酵造科学科に在学中楯の川酒造の６台目蔵元・代表 取締役に就任した。
+                                                    最近の趣味は音楽やドラムの演奏。何事にも失敗を恐れず前向きに挑戦している。
+                                                </p>
+                                            </div>
+                                            <img src="../img/tatenokawa7.JPG" alt="楯の川酒造社長 佐藤淳平さん">
+                                        </div>
+                                    </div>
                                 </article>
-                        
-                                <article id="class8">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">最終発表会</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li><a href="#">2022.02.05</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../activities/img/20220205.jpeg" alt="最終発表会写真" width="800px">
-                    <p class="text">
-                    今回は最終発表会の日です。コロナウィルスの都合上オンラインでの開催となりました。皆
-                    さん緊張した面持ちでしっかりと発表できるか不安な部分がありました。ですが、それぞれ
-                    のチームが前日のギリギリまでリハーサルを行っていたので皆さん立派に発表ができまし
-                    た。
-                    </p>
-                    </article>
-                        
-                                <article id="class7">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">最終発表会に向けて</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li><a href="#">2022.01.08</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../activities/img/0108.jpeg" alt="最終報告会に向けて写真">
-                    <p class="text">
-                    最終報告会に向けての話し合いを進めるにあたって塾生自身で進行ができるようになりました。今ま
-                    で、親睦を深めつつ、自分の役割を意識させるように話題を振っていた成果が出ました！
-                    </p>
-                    </article>
-                        
-                                <article id="class6">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">難しくなっていく授業</a></h2>
-                    </div>
-                                <ul class="meta">
-                    <li><a href="#">2021.11.27</a></li>
-                    <li>【振り返り】</li>
-                                </ul>
-                                <img src="../activities/img/1127.jpg" alt="難しい授業写真">
-                                <p class="text">
-                                今回の授業では Ruby での CSV ファイルの使い方について授業を行いました。授業を聞く
-                                だけでは皆さん理解ができていない様子でした。ですが、実際にプログラムを動かしたり、
-                                コードを変えて実行したりと、少しずつ挙動を理解していきました。最後まで全部は理解で
-                                きなかった様子でしたが、自分でわかりたいとする姿勢が目立った授業だったと思いました!
-                                </p>
+                                <article class="class">
+                                    <div class="article-inner">
+                                        <img src="../hataraku_view/img/sticky-note-blue.png" alt="付箋" class="sticky-note">
+                                        <div class="article-flex">
+                                            <div class="article-box-left">
+                                                <h3 class="article-title">社長編　<span class="article-title-red">#02</span></h3>
+                                                <p class="article-name">楯の川酒造株式会社<br>佐藤　淳平さん</p>
+                                                <p class="article-text">酒田市出身。東京農業大学応用生物科学部酵造科学科に在学中楯の川酒造の６台目蔵元・代表 取締役に就任した。
+                                                    最近の趣味は音楽やドラムの演奏。何事にも失敗を恐れず前向きに挑戦している。
+                                                </p>
+                                            </div>
+                                            <img src="../img/maruno1.JPG" alt="楯の川酒造社長 佐藤淳平さん">
+                                        </div>
+                                    </div>
                                 </article>
-                        
-                                <article id="class5">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">交通心理学とプログラミング</a></h2>
+                                <article class="class">
+                                    <div class="article-inner">
+                                        <img src="../hataraku_view/img/sticky-note-blue.png" alt="付箋" class="sticky-note">
+                                        <div class="article-flex">
+                                            <div class="article-box-left">
+                                                <h3 class="article-title">社長編　<span class="article-title-red">#03</span></h3>
+                                                <p class="article-name">楯の川酒造株式会社<br>佐藤　淳平さん</p>
+                                                <p class="article-text">酒田市出身。東京農業大学応用生物科学部酵造科学科に在学中楯の川酒造の６台目蔵元・代表 取締役に就任した。
+                                                    最近の趣味は音楽やドラムの演奏。何事にも失敗を恐れず前向きに挑戦している。
+                                                </p>
+                                            </div>
+                                            <img src="../img/syoukou1.JPG" alt="楯の川酒造社長 佐藤淳平さん">
+                                        </div>
+                                    </div>
+                                </article>
+
                     </div>
-                    <ul class="meta">
-                        <li><a href="#">2021.11.06</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../activities/img/S__73097248.jpg" alt="交通心理授業写真">
-                    <p class="text">
-                    今回の授業では 東北公益文科大学学長の神田直弥先生に交通心理学と交通心理に関連したプログラムを教えてもらいました。
-                    最初は交通心理学について教わり、その後交通心理学に基づいた面白いプログラムをみんなで動かしました。
-                    </p>
-                    </article>
-                        
-                                <article id="class4">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">中間発表会</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li><a href="#">2021.10.16</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../activities/img/1016.jpg" alt="中間発表会">
-                    <p class="text">
-                    今回は今までチームで作ってきたプログラムをチームみんなで協力して発表しました。それぞれのチームが自分たちで工夫して作った
-                    プログラムを発表方法も考えて時間内に発表しました。
-                    </p>
-                    </article>
-                        
-                                <article id="class3">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">久しぶりの対面授業！</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li><a href="#">2021.10.02</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../activities/img/1002.jpg" alt="久しぶりの対面授業写真">
-                    <p class="text">
-                      8 回目から対面授業再開！久しぶりの対面で緊張感はあったものの、チーム活動の時間にはリーダーを
-                              先頭にスムーズに話し合いが進んでいました。
-                    </p>
-                                  </article>
-                        
-                                <article id="class2">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">仲良くなるために・・・</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li><a href="#">2021.09.11</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../activities/img/0911.jpg" alt="仲良くなるために写真">
-                    <p class="text">
-                      ５回目あたりからブレイクアウトルームでのチーム活動がスムーズになってきました。
-                              余った時間を沈黙にしないために、なるべく話題を振ることを心掛けました。
-                              この時もカメラをオンにすることを大切にしました！
-                    </p>
-                                  </article>
-                        
-                                <article id="class1">
-                    <div class="article-title-area">
-                        <figure><img src="../img/riku_umi.png" alt="リクとウミ"></figure>
-                                <h2 class="article-title"><a href="#">初めての講義</a></h2>
-                    </div>
-                    <ul class="meta">
-                        <li><a href="#">2021.08.28</a></li>
-                        <li>【振り返り】</li>
-                    </ul>
-                    <img src="../img/JD2021-08-28.png" alt="初めての講義写真">
-                    <p class="text">
-                        第 2 回からの講義では新型コロナウイルスの影響でZoom授業を余儀なくされてしまいました。
-                        塾生の不安を取り除くためにまずはZoomのカメラをオンにすることから始めました！
-                    </p>
-                                  </article>
-                    </div>
-                            <aside id="sidebar">
+                    
+                    <aside id="sidebar">
                                 <div class="sidebarbox">
                                     <p>検索</p>
                                 </div>
@@ -216,27 +114,35 @@
     <input id="sbox2"  id="s" name="s" type="text" placeholder="キーワードを入力"/>
     <button type="submit" id="sbtn2"><i class="fa fa-search"></i></button>
     </form>
-
-    
                                 <section class="archive">
-                                  <h3 class="side-title">一覧</h3>
-                                  <ul>
-                    <li><a href="#class1" class="bd-bottom">2021年08月　初めての講義</a></li>
-                    <li><a href="#class2"class="bd-bottom">2021年09月　仲良くなるために</a></li>
-                    <li><a href="#class3"class="bd-bottom">2021年10月　久しぶりの対面授業</a></li>
-                    <li><a href="#class4"class="bd-bottom">2021年10月　中間発表会</a></li>
-                    <li><a href="#class5"class="bd-bottom">2021年11月　交通心理学とプログラミング</a></li>
-                    <li><a href="#class6"class="bd-bottom">2021年11月　難しくなっていく授業</a></li>
-                    <li><a href="#class7"class="bd-bottom">2022年01月　最終発表会に向けて</a></li>
-                    <li><a href="#class8"class="bd-bottom">2022年02月　最終発表会</a></li>
-                        
-                                  </ul>
+                                    <div class="corporate-box">
+                                        <div class="corporate-title-box"><p class="corporate-title">企業別一覧</p></div>
+                                        <ul class="corporate-list">
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                            <li><a href="#" class="corporate-name">楯の川酒造株式会社</a></li>
+                                        </ul>
+                                    </div>
+
+                                    <div class="corporate-box">
+                                        <div class="corporate-title-box"><p class="corporate-title corporate-title-orange">年度別一覧</p></div>
+                                        <ul class="corporate-list">
+                                            <li><a href="#" class="corporate-name">2019年</a></li>
+                                            <li><a href="#" class="corporate-name">2020年</a></li>
+                                            <li><a href="#" class="corporate-name">2021年</a></li>
+                                            <li><a href="#" class="corporate-name">2022年</a></li>
+                                        </ul>
+                                    </div>
                                 </section>
                             </aside>
                         </section>
     </main>
     <footer id="footer">
-        <small>copyright</small>
+        <small>&copy; 2019 - 2022 ハタラクカタチプロジェクト</small>
     </footer>
     
 </body>
diff --git a/img/22707667.png b/img/22707667.png
deleted file mode 100644
index fa6ec93..0000000
--- a/img/22707667.png
+++ /dev/null
Binary files differ