[update]

季節ごとの区切り線を変更

css/kitagata_creature_encyclopedia.css

@@ -7,30 +7,108 @@
     width: 100%;
 }
 
-.seasonalCreaturesTitleBar {
+.springCreaturesTitleBar {
     content: '';
     width: 94%;
     height: 4px;
     display: inline-block;
-    background-color: #F0F0F0;
+    background-color:	#AEAEAE;
     position: absolute;
     top: 148px;
 }
 
-.seasonalCreaturesTitleBar::after {
+.springCreaturesTitleBar::after {
     content: '';
     width: 20px;
     height: 20px;
     border-radius: 50%;
     display: inline-block;
-    background-color: #F0F0F0;
+    background-color: 	#AEAEAE;
     position: absolute;
     top: -8px;
     right: -4px;
 }
 
+.summerCreaturesTitleBar {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color: #00AE9D;
+    position: absolute;
+    top: 1390px;
+}
+
+.summerCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #00AE9D;
+    position: absolute;
+    top: -8px;
+    right: -4px;
+}
+
+.autumnCreaturesTitleBar {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color: #AE0011;
+    position: absolute;
+    top: 2650px;
+}
+
+.autumnCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #AE0011;
+    position: absolute;
+    top: -8px;
+    right: -4px;
+}
+
+.winterCreaturesTitleBar {
+    content: '';
+    width: 94%;
+    height: 4px;
+    display: inline-block;
+    background-color: #0068AE;
+    position: absolute;
+    top: 3930px;
+}
+
+.winterCreaturesTitleBar::after {
+    content: '';
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    display: inline-block;
+    background-color: #0068AE;
+    position: absolute;
+    top: -8px;
+    right: -4px;
+}
+
+.springCreatures_block {
+    margin-bottom: 20px;
+}
+
+.summerCreatures_block {
+    margin-bottom: 20px;
+}
+
+.autumnCreatures_block {
+    margin-bottom: 20px;
+}
+
 .seasonalCreatures_title {
-    margin-bottom: 16px;
+    margin-bottom: 20px;
 }
 
 .seasonalCreatures_titleText {

second/kitagata_creature_encyclopedia.html

@@ -289,7 +289,7 @@
           </div>
 
           <div class="seasonalCreatures_block">
-            <div class="seasonalCreaturesTitleBar"></div>
+            <div class="springCreaturesTitleBar"></div>
             <div class="springCreatures_block">
               <div class="seasonalCreatures_title">
                 <span class="seasonalCreatures_titleText">春の生き物</span>
@@ -623,7 +623,7 @@
               </div>
             </div>
 
-            <div class="seasonalCreaturesTitleBar"></div>
+            <div class="summerCreaturesTitleBar"></div>
             <div class="summerCreatures_block">
               <div class="seasonalCreatures_title">
                 <span class="seasonalCreatures_titleText">夏の生き物</span>
@@ -957,7 +957,7 @@
               </div>
             </div>
 
-            <div class="seasonalCreaturesTitleBar"></div>
+            <div class="autumnCreaturesTitleBar"></div>
             <div class="autumnCreatures_block">
               <div class="seasonalCreatures_title">
                 <span class="seasonalCreatures_titleText">秋の生き物</span>
@@ -1291,7 +1291,7 @@
               </div>
             </div>
 
-            <div class="seasonalCreaturesTitleBar"></div>
+            <div class="winterCreaturesTitleBar"></div>
             <div class="winterCreatures_block">
               <div class="seasonalCreatures_title">
                 <span class="seasonalCreatures_titleText">冬の生き物</span>