diff --git a/hataraku.css b/hataraku.css
index ff4fcf1..37893fd 100644
--- a/hataraku.css
+++ b/hataraku.css
@@ -36,20 +36,6 @@
   .section-title-box{
     text-align: center;
   }
-/*   .section-title-box::before{
-    content: "";
-    display: block;
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 97.0031545741%;
-    height: 89.7959183673%;
-    border: 2px solid #231815;
-    background-color: #fff;
-    -webkit-box-sizing: border-box;
-    box-sizing: border-box;
-    z-index: -1;
-  } */
   .section-title-box .section-title{
     border: rgb(58, 58, 58) solid 2px;
     padding: 3px 55px 3px 55px;
@@ -383,13 +369,10 @@
     top: 0;
     padding-top: 70px;
   }
-  .corporate-name {
+  .archive li {
     font-size: 1rem;
     padding: 16px;
   }
-  .corporate-year{
-    padding: 13px;
-  }
   .corporate-title-box{
     text-align: center;
     margin-top: -20px;
@@ -417,7 +400,7 @@
     background-color: #fff;
   }
   .corporate-box:nth-child(2){
-    height: 290px;
+    height: 320px;
     margin-top: 40px;
   }
 
@@ -460,6 +443,48 @@
       }
     /*記事の一覧見るところ終わり*/
   /*-----------------------------------------------------ハタラクをみるページーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー*/
+  /*目次一覧始まり*/
+
+ /* .l_toc {
+    width: 80%;
+    max-width: 100%;
+    margin:10px auto;
+    font-weight: bold;
+}
+
+.l_toc a {
+    text-decoration: none;
+    color: rgb(0, 0, 0);
+}
+
+.l_toc ol {
+    background-color: rgb(255, 194, 204);
+    padding-left: 0;
+    list-style: none;
+    counter-reset: section;
+    padding: 10px;
+    
+}
+#tocopen:checked+.toc_container {
+  display: block;
+  padding: 45px;
+  border: 4px solid tan;
+}
+
+
+#tocopen:checked+.toc_container {
+  display: block;
+  padding: 45px;
+  border: 4px solid tan;
+}
+
+.toc_container,.l_toc input[type="checkbox"]{
+  display: none;
+}
+.child_ol li {
+    padding-left: 20px;
+}*/
+/*目次一覧終わり*/
 
 /*社長ページ始まり*/
 /*プロフィール*/
@@ -493,6 +518,10 @@
     font-weight: bold;
 }
 
+h3.president_profile_title::after{
+  content: '';
+  color: #ff6dfd;
+}
 
 .profile{
   font-size: 2em;
@@ -599,8 +628,55 @@
   padding: 20px 100px;
   margin: 50px 100px;
   background-color: #fff;
-  border: solid #000 2px;
-  border-radius: 20px;
+  border: solid #000 3px;
+  border-radius: 40px;
+}
+
+.article_work{
+  padding: 40px 0 60px;
+  font-size: 3em;
+  text-align: center;
+}
+
+
+
+
+.article-work-text{
+  font-size: 30px;
+  padding: 70px 0;
+}
+
+
+
+.section-title{
+  background-color: #fff;
+  margin: 0 6em;
+  padding: 1em 2em;
+  position: relative;
+  z-index: 1;
+  text-align: center;
+}
+.section-title::before,
+.section-title::after {
+  content: "";
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+.section-title::before {
+  background-color: rgb(255, 167, 182);
+  left: 0;
+  top: 0;
+  z-index: -1;
+  border: solid 2px #000;
+}
+
+.section-title::after {
+  background-color: #fff;
+  top: 5px;
+  left: 5px;
+  z-index: -2;
+  border: solid 2px #000;
 }
 
 /*社長ページ終わり*/
\ No newline at end of file
diff --git a/presidents_view/presidents.html b/presidents_view/presidents.html
index 259fcb8..9287951 100644
--- a/presidents_view/presidents.html
+++ b/presidents_view/presidents.html
@@ -29,6 +29,36 @@
             </ul>
         </nav>
     </header>
+<!--
+    <div class="l_toc">
+        <label for="tocopen">目次-OPEN</label>
+        <input id="tocopen" type="checkbox">
+        <ol class="child_ol">
+            <li><a href="#president_profile">社長プロフィール</a></li>
+            <li><a href="#profile-bg-2">会社概要</a></li>
+                </ol>
+                    <li>楯野川のワーク</li>
+                        <ol class="child_ol">
+                    <li><a href="#title1">事業内容</a></li>
+                    <li><a href="#title2">純米大吟醸の生産</a></li>
+                    <li><a href="#title3">従業員について</a></li>
+                    <li><a href="#title4">職場の雰囲気づくり</li>
+                    <li><a href="#title5">食材のこだわり</a></li>
+                    <li><a href="#title6">思い入れのある商品</a></li>
+                    <li><a href="#title7">プレッシャーを感じることは</a></li>
+                    <li><a href="#title8">失敗してしまうことは</a</li>
+                    <li><a href="#title9">学生におすすめのお酒</a></li>
+                </ol>
+            </li>
+            <li>楯野川のライフ
+                <ol class="child_ol">
+                    <li><a href="#title10">学生時代について</a></li>
+                    <li><a href="#title11">大学生に向けて</a></li>
+                    <li><a href="#title12">後悔しない生き方を</a></li>
+                </ol>
+            </li>
+    </div>
+-->
     <main>
         <section id="president_profile">
             <div class="profile-bg">
@@ -56,31 +86,31 @@
     <article id="article">
         <div class="article-box">
         <h1 class="article_work">佐藤社長のワーク</h1>
-        <h2 class="section-title">事業内容</h2>
+        <h2 id="section-title"><span id="title1">事業内容</span></h2>
         <p class="article-work-text">基本は酒類の製造・販売になります。アイテムとしては、日本酒やリキュール、焼酎、マッコリなどを製造しています。それを国内外に販売するということをしています。</p>
-        <h2 class="section-title">純米大吟醸の生産</h2>
+        <h2 class="section-title"><span id="title2">純米大吟醸の生産</span></h2>
         <p class="article-work-text">今から10年ほど前、平成22酒造年度で切り替える前までは純米酒、本醸造、純米吟醸、大吟醸など色々な種類のお酒を作っていました。蔵のカラーを海外の方にも伝えるために、生産を純米大吟醸に絞りました。結果、蔵を代表する人気商品となり、お客さんからいい評価を受けています。</p>
-        <h2 class="section-title">従業員について</h2>
+        <h2 class="section-title"><span id="title3">従業員について</span></h2>
         <p class="article-work-text">皆さん元サラリーマンなどですね。半分くらいはお酒が好きでお酒に関わる仕事がしたいって入ってきた人。残りの人は家が近くて出勤しやすいとかなんじゃないかな。</p>
-        <h2 class="section-title">職場の雰囲気づくり</h2>
+        <h2 class="section-title"><span id="title4">職場の雰囲気づくり</span></h2>
         <p class="article-work-text">私は社員の仕事に対して、基本的に口を挟むことはありません。社員の方々は働くにあたり、自分で考えて行動してくれます。「どうぞ、どうぞ。ご自由にやってください。会社はただの箱です。」という感じですね。</p>
-        <h2 class="section-title">食材のこだわり</h2>
+        <h2 class="section-title"><span id="title5">食材のこだわり</span></h2>
         <p class="article-work-text">山形県産のものを使うというコンセプトなので、プロダクトに関しては地元の物にこだわっています。</p>
-        <h2 class="section-title">思い入れのある商品</h2>
+        <h2 class="section-title"><span id="title6">思い入れのある商品</span></h2>
         <p class="article-work-text">私が独断と偏見で商品開発して作っているのですが、精米歩合1%までこだわったお酒に関しては思い入れがありますね。</p>
-        <h2 class="section-title">プレッシャーを感じることは</h2>
+        <h2 class="section-title"><span id="title7">プレッシャーを感じることは</span></h2>
         <p class="article-work-text">無いですね。事業継承したときは、売上3000万で社員が3人で借り入れが3億円ぐらいありましたけど、結局失うものは何もなかったので好きにできました。伝統があるという意識もなく自由気ままにやってきたという感じです。</p>
-        <h2 class="section-title">失敗してしまうことは</h2>                        
+        <h2 class="section-title"><span id="title8">失敗してしまうことは</span></h2>                        
         <p class="article-work-text">失敗はいっぱいあります。成功の方が少ないです。私の考え方として、とりあえずやってきて、やらずに悩むよりはやってから考えようという感じで、全てにおいてとりあえず飛び込みます。</p>
-        <h2 class="section-title">学生におすすめのお酒</h2>   
+        <h2 class="section-title"><span id="title9">学生におすすめのお酒</span></h2>   
         <p class="article-work-text">日本酒に限らず色々なお酒を飲んでいただいて、大人になってから日本酒を飲んでいただくのがいいと思います。無理に飲む必要はないと思います。</p>
-        <h1 class="article_work">佐藤社長のライフ</h1>
-        <h2 class="section-title">学生時代について</h2>   
+        <h1 class="article_work">佐藤社長のライフ</span></h1>
+        <h2 class="section-title"><span id="title10">学生時代について</span></h2>   
         <p class="article-work-text">バイトしかしてこなかったですね。大学3年生で名前だけ社長になって、できるだけ親に頼らないように自分で稼いでなんとかしようというのがあって、バイトをしていたというのもあります。</p> 
-        <h2 class="section-title">大学生に向けて</h2>  
+        <h2 class="section-title"><span id="title11">大学生に向けて</span></h2>  
         <p class="article-work-text">皆失敗することは怖いですよね。仮に失敗したと思うようなことでも、そのやり方がたまたま駄目だったと捉えればそれは失敗じゃなくて、次のステップになります。大学4年間は非常に大事だと思うので、大学生の時にしか出来ないことをやってほしいと思います。</p>
-        <h2 class="section-title">後悔しない生き方を</h2>  
-        <p class="article-work-text">いつ死ぬか分からないですけど、生かされている時間を上手く使ったか使わないかの話であって、最後どう死ぬかというところだと思います。後悔無く満足して死ぬのか、あれやっとけば良かったと思って死ぬのかだったら私に￥は前者が良いなと思うので。</p> 
+        <h2 class="section-title"><span id="title12">後悔しない生き方を</span></h2>  
+        <p class="article-work-text">いつ死ぬか分からないですけど、生かされている時間を上手く使ったか使わないかの話であって、最後どう死ぬかというところだと思います。後悔無く満足して死ぬのか、あれやっとけば良かったと思って死ぬのかだったら私は前者が良いなと思うので。</p> 
         </div>
     </article>