diff --git a/jdmain.css b/jdmain.css
index 16174fe..7ce0dfb 100644
--- a/jdmain.css
+++ b/jdmain.css
@@ -1,25 +1,23 @@
 /*
  * CSS for Junior Doctor Chokai Course
  */
- @charset "UTF-8";
-
+  @charset "UTF-8";
+ 
+* {
+    margin: 0px;
+    padding: 0px;
+}
+ 
  html {
     font-size: 100%;
   }
  body{
     margin: 0;
     height: 100%;
-    font-family: "Sawarabi Gothic";
+    font-family: 'Noto Sans JP', sans-serif;
     color: rgb(45, 45, 45);
+    line-height: 1.7;
 }
-.c, body.top h2 {text-align: center;}
-body.top h2 {
-    padding: 1ex 2em; width: 20em;
-    border: groove #4a7 3px; margin: 5em auto; border-radius: 1em;
-}
-body.top a {text-decoration: none; color: #284}
-body.top a:hover h2 {background: #9ea;}
-
 body:after{
     margin: 0;
     position: fixed;
@@ -29,88 +27,138 @@
     background: #afeeee;
     /* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */
     /* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */
-    background: linear-gradient(to bottom, #afeeee 0%, #FFF 100%);
+     background: linear-gradient(to bottom, #afeeee 0%, #fff 100%);  
     z-index: -1;
 }
-
+ 
 body.vmenuspace {margin-top: 2em; border-top: 3px solid;}
 div.scrollbox {
     height: 6em; overflow: auto; background: #eff;
 }
-
+ 
 img {
     max-width: 100%;
   }
 
-/*--------------------------------------common---------------------------------*/
-.wrapper {
+/* --------------------------------------ヘッダー ------------------------------------------------------------*/
+.header{
+    width: 100vw;
+    height: auto;
+    z-index: 99;
+    position: fixed;
+    transition: all .5s;
+    top:0;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+#hamburger-menu{
+  opacity: 0;
+  position: fixed;
+}
+.header.change-color {
+    background-color: #ffffff;
+  }
+ 
+.header-nav {
+    height: auto;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 5%;
+ }
+ .header-nav .sp-logo{
+   display: none;
+ }
+ 
+ .header-nav nav ul {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+ }
+ 
+ .header-nav nav ul li {
+    margin-right: 50px;
+    list-style: none;
+    font-size: 1.05em;
+    padding-left: 9px;
+    padding-right: 9px;
+    border-left: grey 2px dotted;
+    border-right: grey 2px dotted;
+ }
+ .header-nav nav ul .bd-no{
+   border: none;
+ }
+ 
+ .header-nav nav ul li a{
+    text-decoration: none;
+    color: black;
+    transition: .3s;
+    display: block;
+ }
+ .header-nav nav ul li a:hover{
+    border-bottom: grey 3px dotted;
+ }
+ .header-nav nav ul li .bd-none:hover{
+    border-bottom: none;
+ }
+ 
+ .top-logo{
+     width: 65px;
+     height: 65px;
+     object-fit: cover;
+ }
+ header.scroll-nav{
+    background: white;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
+    padding-top: 0;
+    padding-bottom: 0;
+ }
+
+/*--------------------------------------common---------------------------------*/
+  .wrapper {
+    max-width: 1150px;
+    margin: 0 auto;
+    padding: 0 5%;
+    padding-top: 30px;
+    margin-bottom: 80px;
   }
-  .section-title {
-    font-size: 1.6rem;
+.section-title {
+    font-size: 2.1rem;
     text-align: center;
     position: relative;
-    margin-left:20px;
     width: 100%;
+    margin-top: 30px;
+    margin-bottom: 20px;
+    text-shadow: 0 4px 6px rgb(194, 194, 194);
   }
-  .section-title::before{
-    position: absolute;
-    bottom: -20px;
-    left: calc(50% - 30px);
-    width: 65px;
-    height: 5px;
-    content: '';
-    border-radius: 3px;
-    background: rgb(2, 219, 248);
-  }
-
+.section-title::before{
+  content: '';
+  display: inline-block;
+  width: 170px;
+  height: 170px;
+  background-image: url(../testpage/yellow-green.png);
+  background-size: contain;
+  vertical-align: middle;
+}
+.section-title::after{
+  content: '';
+  display: inline-block;
+  width: 170px;
+  height: 170px;
+  background-image: url(../testpage/green.png);
+  background-size: contain;
+  vertical-align: middle;
+}
+.section-text{
+  text-align: center;
+  font-size: 1.3rem;
+  padding-top: 10px;
+  padding-bottom: 30px;
+  max-width: 800px;
+  margin: 0 auto;
+  line-height: 1.7;
+}
 /*--------------------------------------//common----------------------------------*/
 
-/*--------------------------------------- header ---------------------------------*/
-header{
-    width: 100%;
-    height: auto;
-}
-header > div.list{
-    display: flex;
-    align-items: center;
-    justify-content: left;
-    width: 100%;
-    height: 50px;
-    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.8),
-    rgba(40, 40, 40, 0.8));
-}
-header nav a {
-    color: white;
-    text-decoration: none;
-    margin-left: 20px;
-    margin-right: 20px;
-}
-header nav a:hover {
-    color: white;
-    text-decoration: underline;
-}
-header ul{
-    display:flex;
-}
-header  ul  li{
-    list-style: none;
-}
-header > div.logobox {
-    position: relative;
-    margin-left: 20px;
-}
-header > div.logobox > h1 {
-    position:absolute; top: 30px; left: 170px;
-}
-header > div.logobox > img {
-    width: 150px;
-    height: 150px;
-}
-/*--------------------------------------- //header -------------------------------*/
-
 /* -------------------------------------- home ---------------------------------------*/
 #home{
     padding: 0 1ex;  
@@ -369,4 +417,4 @@
         max-width: 500px;
     }
 }
-/*------------------------------------------ //media -------------------------------------------------*/
\ No newline at end of file
+/*------------------------------------------ //media -------------------------------------------------*/