Update entry_info.html

entry_info.html

@@ -11,17 +11,17 @@
    * ベーススタイル・共通
    * ========================================================================== */
   :root {
-    /* 【改修】カラーテーマを青系に変更 */
-    --theme-color: #305590;       /* メインカラー（青） */
-    --theme-color-dark: #1a3a6c;  /* 濃い青 */
-    --theme-color-light: #eef2f7; /* 薄い青背景 */
-    --theme-accent: #e67e22;      /* アクセント（オレンジ色） */
+    /* 【改修】カラーテーマを添付画像のイメージ（青）に変更 */
+    --theme-color: #2fa4e7;       /* メインカラー（明るい青） */
+    --theme-color-dark: #305590;  /* 濃い青（文字や強調部） */
+    --theme-color-light: #eef7fc; /* 薄い青背景 */
+    --theme-accent: #e67e22;      /* アクセント（ボタンのオレンジ） */
     --bg-color: #ffffff; 
     --text-color: #333;
     --gray-bg: #f8f9fa;
   }
   
-  /* 【改修】全ての要素に box-sizing: border-box を適用し、幅のはみ出しを防ぐ */
+  /* 【改修】ボックスサイズの計算を統一し、はみ出しを防止 */
   *, *::before, *::after {
     box-sizing: border-box;
   }
@@ -38,7 +38,7 @@
   /* ヘッダー */
   header {
     background: #fff;
-    border-bottom: 4px solid var(--theme-color); /* 色変更 */
+    border-bottom: 4px solid var(--theme-color);
     padding: 15px 0;
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     position: sticky; top: 0; z-index: 1000;
@@ -55,10 +55,10 @@
   
   /* 挨拶エリア */
   .welcome-box { text-align: center; margin-bottom: 40px; }
-  .page-title { font-size: 28px; font-weight: 800; margin-bottom: 10px; color: var(--theme-color-dark); /* 色変更 */ }
+  .page-title { font-size: 28px; font-weight: 800; margin-bottom: 10px; color: var(--theme-color-dark); }
   .status-message {
-    background: var(--theme-color-light); /* 色変更 */
-    border-left: 5px solid var(--theme-color); /* 色変更 */
+    background: var(--theme-color-light);
+    border-left: 5px solid var(--theme-color);
     padding: 20px; border-radius: 4px; text-align: left; margin-top: 20px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   }
@@ -66,11 +66,11 @@
   /* マイナンバー登録エリア */
   .pweb-section {
     background: #fff;
-    border: 2px solid var(--theme-color); /* 色変更 */
+    border: 2px solid var(--theme-color);
     border-radius: 12px;
     padding: 40px 30px;
     margin-bottom: 60px;
-    box-shadow: 0 5px 15px rgba(48, 85, 144, 0.1); /* 色変更に伴う影色調整 */
+    box-shadow: 0 5px 15px rgba(47, 164, 231, 0.1);
     position: relative;
     overflow: hidden;
   }
@@ -87,8 +87,8 @@
   
   /* ログイン情報カード */
   .login-card {
-    background: var(--theme-color-light); /* 色変更 */
-    border: 2px solid #b8cce4; /* 色変更 */
+    background: var(--theme-color-light);
+    border: 2px solid #b8dcf5; /* 薄い青枠 */
     border-radius: 8px;
     padding: 25px; 
     max-width: 600px; 
@@ -98,7 +98,7 @@
   .card-head {
     font-weight: bold; font-size: 20px; margin-bottom: 20px;
     padding-bottom: 10px; border-bottom: 1px dashed #aaa;
-    color: var(--theme-color-dark); /* 色変更 */
+    color: var(--theme-color-dark);
     display: flex; align-items: center; gap: 10px;
   }
   .login-grid {
@@ -118,6 +118,7 @@
     font-size: 15px; color: #e74c3c; margin-top: 20px; font-weight: bold; 
     background: #fff5f5; padding: 15px; border-radius: 6px; border: 1px dashed #e74c3c;
     text-align: center;
+    margin-bottom: 25px; /* ボタンとの間隔を確保 */
   }
   
   /* 手順フロー */
@@ -142,7 +143,7 @@
     counter-increment: step;
     content: "STEP " counter(step);
     display: block;
-    background: var(--theme-color); /* 色変更 */
+    background: var(--theme-color);
     color: #fff;
     font-size: 12px; font-weight: bold;
     padding: 2px 10px; border-radius: 10px;
@@ -155,7 +156,7 @@
     color: #ccc; font-size: 18px; z-index: 1;
     background: #fff; height: 20px; line-height: 20px;
   }
-  .step-icon { font-size: 28px; color: var(--theme-color); /* 色変更 */ margin-bottom: 10px; display: block; }
+  .step-icon { font-size: 28px; color: var(--theme-color); margin-bottom: 10px; display: block; }
   .step-text { font-weight: bold; font-size: 14px; line-height: 1.4; }
   .step-highlight { color: var(--theme-accent); font-weight: 800; display: block; margin-top: 4px;}
   
@@ -164,27 +165,31 @@
     text-align: center; 
     margin-bottom: 30px; 
     margin-top: 40px;
+    width: 100%; /* 親要素に合わせる */
   }
-  /* 【改修】幅のはみ出し防止のため box-sizing を明示（全体設定で効いているが念のため） */
+  /* 【改修】ボタンのはみ出し防止調整 */
   .btn-pweb-main {
     display: inline-block;
-    box-sizing: border-box; 
+    box-sizing: border-box; /* パディングを含めた幅計算にする */
     background-color: var(--theme-accent); color: #fff;
-    font-size: 22px; font-weight: bold;
-    padding: 20px 30px; /* 左右のpaddingを少���調整 */
+    font-size: 20px; /* 少しサイズ調整 */
+    font-weight: bold;
+    padding: 18px 20px; /* 左右パディングを減らしてはみ出し防止 */
     border-radius: 50px;
     text-decoration: none;
     box-shadow: 0 4px 6px rgba(0,0,0,0.2);
     transition: all 0.3s;
-    width: 100%; max-width: 500px;
+    width: 100%; 
+    max-width: 500px;
     word-break: break-all;
+    line-height: 1.3;
   }
   .btn-pweb-main:hover {
     background-color: #d35400; transform: translateY(-2px);
     box-shadow: 0 8px 16px rgba(0,0,0,0.25);
   }
   .url-text {
-    font-size: 14px; color: #fff; display: block; font-weight: normal; margin-top: 5px; opacity: 0.9;
+    font-size: 13px; color: #fff; display: block; font-weight: normal; margin-top: 5px; opacity: 0.9;
   }
   
   /* 画像マニュアル表示エリア */
@@ -212,7 +217,7 @@
     background: #fff; cursor: pointer;
   }
   .manual-link:hover {
-    border-color: var(--theme-color); /* 色変更 */
+    border-color: var(--theme-color);
     box-shadow: 0 10px 25px rgba(0,0,0,0.15);
     transform: translateY(-2px);
   }
@@ -220,7 +225,7 @@
   
   .zoom-hint {
     position: absolute; bottom: 20px; right: 20px;
-    background: rgba(48, 85, 144, 0.9); /* 色変更（青系） */
+    background: rgba(48, 85, 144, 0.9);
     color: #fff;
     padding: 10px 20px; border-radius: 30px; 
     font-size: 15px; font-weight: bold;
@@ -229,7 +234,7 @@
     display: flex; align-items: center; gap: 8px;
   }
   .manual-caption {
-    margin-top: 15px; font-weight: bold; color: var(--theme-color-dark); /* 色変更 */ font-size: 18px;
+    margin-top: 15px; font-weight: bold; color: var(--theme-color-dark); font-size: 18px;
   }
   
   /* モーダル用スタイル */
@@ -285,18 +290,18 @@
     padding: 20px; text-decoration: none; color: #333; transition: all 0.2s; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   }
   .menu-card:hover {
-    border-color: var(--theme-color); /* 色変更 */
-    background-color: var(--theme-color-light); /* 色変更 */
+    border-color: var(--theme-color);
+    background-color: var(--theme-color-light);
     transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1);
   }
-  .menu-icon { font-size: 24px; color: var(--theme-color); /* 色変更 */ width: 50px; text-align: center; margin-right: 15px; }
+  .menu-icon { font-size: 24px; color: var(--theme-color); width: 50px; text-align: center; margin-right: 15px; }
   .menu-content { flex: 1; }
   .menu-title { font-weight: bold; font-size: 18px; display: block; }
   .menu-desc { font-size: 13px; color: #666; }
   .menu-arrow { color: #ccc; }
   
   /* フッター */
-  footer { background-color: var(--theme-color); /* 色変更 */ color: #fff; padding: 30px 0; font-size: 13px; text-align: center; margin-top: 50px; }
+  footer { background-color: var(--theme-color-dark); color: #fff; padding: 30px 0; font-size: 13px; text-align: center; margin-top: 50px; }
   
   /* スマホ対応 */
   @media (max-width: 768px) {
@@ -315,7 +320,7 @@
     }
     .step-icon { font-size: 24px; margin-bottom: 0; width: 30px; text-align: center; }
     
-    .btn-pweb-main { font-size: 18px; padding: 15px 20px; }
+    .btn-pweb-main { font-size: 18px; padding: 15px 10px; /* スマホでより狭く */ }
     .url-text { font-size: 11px; }
     
     .manual-label { font-size: 16px; }
@@ -371,6 +376,14 @@
       <p class="note-red">
         <i class="fa-solid fa-triangle-exclamation"></i> 初回ログイン時に「電子交付の承諾」と「パスワード変更」が必須となります。
       </p>
+      
+      <div style="text-align: center;">
+        <a href="https://kyuyo5.keitai-bin.jp/leoc" target="_blank" class="btn-pweb-main">
+          <i class="fa-solid fa-right-to-bracket"></i> マイナンバー登録 ログイン画面へ
+          <span class="url-text">https://kyuyo5.keitai-bin.jp/leoc</span>
+        </a>
+      </div>
+      <p style="font-size:12px; color:#666; margin-top:10px; text-align:center;">(外部サイトが新しいタブで開きます)</p>
     </div>
 
     <div class="flow-area">
@@ -436,15 +449,6 @@
         </div>
 
       </div>
-      
-      <div class="action-area" style="margin-top: 40px;">
-        <a href="https://kyuyo5.keitai-bin.jp/leoc" target="_blank" class="btn-pweb-main">
-          <i class="fa-solid fa-right-to-bracket"></i> マイナンバー登録 ログイン画面へ
-          <span class="url-text">https://kyuyo5.keitai-bin.jp/leoc</span>
-        </a>
-        <p style="font-size:12px; color:#666; margin-top:10px;">(外部サイトが新しいタブで開きます)</p>
-      </div>
-
     </div>
 
     <div class="action-area">