Update guide.html

guide.html

@@ -7,11 +7,14 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 <style>
+  /* ==========================================================================
+   * カラー定義（entry_info.htmlと統一）
+   * ========================================================================== */
   :root {
-    --theme-green: #29a745;
-    --theme-green-dark: #1e7e34;
-    --theme-green-light: #f0f9f2;
-    --theme-accent: #e67e22; /* アクセントカラー（オレンジ） */
+    --theme-color: #2fa4e7;       /* メインカラー（明るい青） */
+    --theme-color-dark: #305590;  /* 濃い青（文字や強調部） */
+    --theme-color-light: #eef7fc; /* 薄い青背景 */
+    --theme-accent: #e67e22;      /* アクセント（オレンジ） */
     --header-height: 60px;
   }
   body {
@@ -22,8 +25,8 @@
   }
   html { scroll-behavior: smooth; }
   
-  /* リンクの基本スタイル */
-  a { color: var(--theme-green); text-decoration: none; }
+  /* リンクの基本スタイル（青に変更） */
+  a { color: var(--theme-color); text-decoration: none; }
   a:hover { text-decoration: underline; }
 
   /* ヘッダー */
@@ -59,8 +62,9 @@
     display: block; padding: 10px; color: #555; text-decoration: none; font-size: 14px; border-radius: 4px;
     transition: background 0.2s;
   }
+  /* アクティブ時の色を青に変更 */
   .side-nav a:hover, .side-nav a.active {
-    background-color: var(--theme-green-light); color: var(--theme-green); font-weight: bold;
+    background-color: var(--theme-color-light); color: var(--theme-color); font-weight: bold;
   }
   .main-content { flex: 1; padding: 0 15px 50px; min-width: 0; }
   
@@ -69,8 +73,9 @@
     margin-bottom: 60px; padding-top: 20px; border-top: 1px dashed #eee;
     scroll-margin-top: 80px;
   }
+  /* 左ボーダーを青に変更 */
   .sec-header {
-    border-left: 6px solid var(--theme-green); padding-left: 15px; margin-bottom: 20px;
+    border-left: 6px solid var(--theme-color); padding-left: 15px; margin-bottom: 20px;
     display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px;
   }
   .sec-title { font-size: 24px; font-weight: bold; margin: 0; }
@@ -84,8 +89,9 @@
   .img-caption { background: #f5f5f5; padding: 8px 15px; font-weight: bold; font-size: 14px; border-bottom: 1px solid #ddd; }
   .img-box img { width: 100%; height: auto; display: block; }
   
+  /* 情報カードの色を青系に変更 */
   .info-card {
-    background: #f8fcf9; border: 1px solid #c3e6cb; padding: 15px; border-radius: 6px; margin-bottom: 20px;
+    background: var(--theme-color-light); border: 1px solid #b8dcf5; padding: 15px; border-radius: 6px; margin-bottom: 20px;
   }
   .info-row { margin-bottom: 8px; font-size: 15px; }
   .label { font-weight: bold; margin-right: 10px; color: #444; }
@@ -96,7 +102,7 @@
   .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
   /* ==========================================================================
-   * 【改修】高齢者向け：大きく分かりやすいリンクボタン
+   * 高齢者向け：大きく分かりやすいリンクボタン（青系に調整）
    * ========================================================================== */
   .elder-action-area {
     background-color: #f9f9f9;
@@ -109,23 +115,24 @@
   .elder-btn {
     display: block;
     background: #fff;
-    border: 2px solid var(--theme-green); /* 緑の枠線 */
-    color: var(--theme-green-dark);
+    border: 2px solid var(--theme-color); /* 枠線を青に */
+    color: var(--theme-color-dark);       /* 文字色を濃い青に */
     padding: 15px 20px;
     border-radius: 8px;
     text-decoration: none;
-    font-size: 18px; /* 文字サイズを大きく */
+    font-size: 18px;
     font-weight: bold;
     text-align: center;
-    margin-bottom: 15px; /* ボタン同士の間隔 */
+    margin-bottom: 15px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.1);
     transition: all 0.2s;
     line-height: 1.4;
   }
   .elder-btn:last-child { margin-bottom: 0; }
   
+  /* ホバー背景を薄い青に */
   .elder-btn:hover {
-    background: var(--theme-green-light);
+    background: var(--theme-color-light);
     transform: translateY(-2px);
     text-decoration: none;
     box-shadow: 0 5px 10px rgba(0,0,0,0.15);
@@ -137,7 +144,7 @@
     vertical-align: middle;
   }
 
-  /* 電話用ボタン（オレンジ色） */
+  /* 電話用ボタン（アクセントカラーのオレンジはそのまま維持） */
   .elder-btn-phone {
     border-color: var(--theme-accent);
     color: #d35400;
@@ -146,7 +153,6 @@
     background: #fff5eb;
   }
 
-  /* URLなどの補足テキスト */
   .btn-sub-text {
     display: block;
     font-size: 12px;
@@ -156,7 +162,6 @@
     word-break: break-all;
   }
   
-  /* サブタイトルの強調 */
   .area-label {
     font-weight: bold;
     font-size: 16px;
@@ -180,8 +185,9 @@
       display: inline-block; padding: 6px 15px; margin: 0 2px;
       color: #555; text-decoration: none; border-radius: 20px; font-size: 13px; border: 1px solid #ddd;
     }
+    /* アクティブ時の色を青に変更 */
     .mobile-nav a.active {
-      background: var(--theme-green); color: #fff; border-color: var(--theme-green);
+      background: var(--theme-color); color: #fff; border-color: var(--theme-color);
     }
     .elder-btn {
         font-size: 17px;