Update entry_info04.html

entry_info04.html

@@ -7,13 +7,13 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 
 <style>
-  /* * ==========================================================================
-   * ベーススタイル
-   * ==========================================================================
-   */
+  /* ==========================================================================
+   * ベーススタイル・共通
+   * ========================================================================== */
   :root {
     --theme-green: #29a745; 
     --theme-green-dark: #1e7e34;
+    --theme-green-light: #f0f9f2;
     --theme-accent: #e67e22; 
     --bg-color: #ffffff; 
     --text-color: #333;
@@ -28,7 +28,7 @@
     line-height: 1.6;
     font-size: 16px; 
   }
-
+  
   /* ヘッダー */
   header {
     background: #fff;
@@ -46,8 +46,8 @@
   
   /* メインコンテンツ枠 */
   .container { max-width: 900px; margin: 0 auto; padding: 40px 20px 80px; }
-
-  /* 1. 挨拶エリア */
+  
+  /* 挨拶エリア */
   .welcome-box { text-align: center; margin-bottom: 40px; }
   .page-title { font-size: 28px; font-weight: 800; margin-bottom: 10px; color: var(--theme-green-dark); }
   .status-message {
@@ -55,11 +55,8 @@
     padding: 20px; border-radius: 4px; text-align: left; margin-top: 20px;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05);
   }
-
-  /* * ==========================================================================
-   * 2. マイナンバー登録エリア
-   * ==========================================================================
-   */
+  
+  /* マイナンバー登録エリア */
   .pweb-section {
     background: #fff;
     border: 2px solid var(--theme-green);
@@ -77,11 +74,10 @@
     padding: 5px 20px; font-weight: bold; font-size: 14px;
     border-bottom-right-radius: 12px;
   }
-
   .pweb-header { text-align: center; margin-bottom: 30px; }
   .pweb-title { font-size: 26px; font-weight: 800; color: #333; margin-bottom: 10px; }
   .pweb-desc { color: #666; font-size: 16px; }
-
+  
   /* ログイン情報カード */
   .login-card {
     background: #f8fcf9; 
@@ -115,7 +111,7 @@
     background: #fff5f5; padding: 15px; border-radius: 6px; border: 1px dashed #e74c3c;
     text-align: center;
   }
-
+  
   /* 手順フロー */
   .flow-area { margin-bottom: 40px; }
   .flow-title {
@@ -153,9 +149,13 @@
   .step-icon { font-size: 28px; color: var(--theme-green); margin-bottom: 10px; display: block; }
   .step-text { font-weight: bold; font-size: 14px; line-height: 1.4; }
   .step-highlight { color: #d35400; font-weight: 800; display: block; margin-top: 4px;}
-
-  /* アクションボタン */
-  .action-area { text-align: center; margin-bottom: 50px; }
+  
+  /* アクションボタン（改修：マージン調整） */
+  .action-area { 
+    text-align: center; 
+    margin-bottom: 30px; 
+    margin-top: 40px;
+  }
   .btn-pweb-main {
     display: inline-block;
     background-color: var(--theme-accent); color: #fff;
@@ -174,7 +174,7 @@
   .url-text {
     font-size: 14px; color: #fff; display: block; font-weight: normal; margin-top: 5px; opacity: 0.9;
   }
-
+  
   /* 画像マニュアル表示エリア */
   .manual-vertical-area {
     margin-top: 40px;
@@ -218,16 +218,12 @@
   .manual-caption {
     margin-top: 15px; font-weight: bold; color: var(--theme-green-dark); font-size: 18px;
   }
-
-  /* * ==========================================================================
-   * モーダル用スタイル (95%幅制御・スクロール対応)
-   * ==========================================================================
-   */
+  
+  /* モーダル用スタイル */
   .modal-overlay {
     display: none;
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0, 0, 0, 0.9); z-index: 2000;
-    /* 縦長画像対応のためスクロール許可 */
     overflow-y: auto; 
     -webkit-overflow-scrolling: touch;
     box-sizing: border-box;
@@ -235,32 +231,26 @@
   }
   .modal-overlay.active {
     display: flex; 
-    align-items: flex-start; /* 上端合わせでスクロールさせる */
+    align-items: flex-start;
     justify-content: center;
     opacity: 1;
   }
-  
   .modal-content {
     position: relative;
-    /* 【重要】ウィンドウ幅の95%に固定 */
     width: 95%; 
-    max-width: 1400px; /* PCでの拡大しすぎ防止（任意） */
-    margin: auto; /* 上下左右中央寄せ（スクロール時はよしなに配置される） */
+    max-width: 1400px;
+    margin: auto; 
     background: transparent;
     border-radius: 4px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.5);
   }
-  
   .modal-img {
     display: block; 
-    /* コンテンツ幅(95%)いっぱいに表示 */
     width: 100%; 
     height: auto; 
     background: #fff;
     border-radius: 4px;
   }
-  
-  /* 閉じるボタン（追従型） */
   .modal-close-btn {
     position: fixed; top: 20px; right: 20px;
     background: rgba(0,0,0,0.6); color: #fff;
@@ -271,7 +261,7 @@
     transition: background 0.2s;
   }
   .modal-close-btn:hover { background: rgba(0,0,0,0.9); transform: scale(1.1); }
-
+  
   /* メニューエリア */
   .menu-header { text-align: center; margin-bottom: 30px; position: relative; margin-top: 50px; }
   .menu-header h2 { font-size: 22px; color: #555; background: #fff; display: inline-block; padding: 0 15px; z-index: 1; position: relative; }
@@ -290,9 +280,11 @@
   .menu-title { font-weight: bold; font-size: 18px; display: block; }
   .menu-desc { font-size: 13px; color: #666; }
   .menu-arrow { color: #ccc; }
-
+  
+  /* フッター */
   footer { background-color: #305590; color: #fff; padding: 30px 0; font-size: 13px; text-align: center; margin-top: 50px; }
-
+  
+  /* スマホ対応 */
   @media (max-width: 768px) {
     .page-title { font-size: 24px; }
     .pweb-section { padding: 30px 15px; }
@@ -406,14 +398,6 @@
       </div>
     </div>
 
-    <div class="action-area">
-      <a href="https://kyuyo5.keitai-bin.jp/leoc" target="_blank" class="btn-pweb-main">
-        <i class="fa-solid fa-right-to-bracket"></i> P-web ログイン画面へ
-        <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 class="manual-vertical-area">
       <div class="manual-label">
         <i class="fa-solid fa-images"></i> 手順詳細・画面イメージ（クリックで拡大）
@@ -440,6 +424,14 @@
       </div>
     </div>
 
+    <div class="action-area">
+      <a href="https://kyuyo5.keitai-bin.jp/leoc" target="_blank" class="btn-pweb-main">
+        <i class="fa-solid fa-right-to-bracket"></i> P-web ログイン画面へ
+        <span class="url-text">https://kyuyo5.keitai-bin.jp/leoc</span>
+      </a>
+      <p style="font-size:12px; color:#666; margin-top:10px;">(外部サイトが新しいタブで開きます)</p>
+    </div>
+
   </section>
 
   <section class="menu-header">
@@ -516,35 +508,34 @@
 <script>
   document.addEventListener('DOMContentLoaded', () => {
     const modal = document.getElementById('imageModal');
-    const modalImg = document.getElementById('modalImg');
-    const closeBtn = document.getElementById('modalClose');
-    const triggers = document.querySelectorAll('.js-modal-trigger');
-
-    // リンククリックでモーダル表示
-    triggers.forEach(trigger => {
-      trigger.addEventListener('click', (e) => {
-        e.preventDefault();
-        const imgSrc = trigger.getAttribute('href');
-        modalImg.src = imgSrc;
-        modal.classList.add('active');
-        document.body.style.overflow = 'hidden'; // 背景スクロール禁止
+    if (modal) {
+      const modalImg = document.getElementById('modalImg');
+      const closeBtn = document.getElementById('modalClose');
+      const triggers = document.querySelectorAll('.js-modal-trigger');
+
+      triggers.forEach(trigger => {
+        trigger.addEventListener('click', (e) => {
+          e.preventDefault();
+          const imgSrc = trigger.getAttribute('href');
+          modalImg.src = imgSrc;
+          modal.classList.add('active');
+          document.body.style.overflow = 'hidden'; 
+        });
       });
-    });
 
-    // 閉じる処理
-    const closeModal = () => {
-      modal.classList.remove('active');
-      document.body.style.overflow = ''; // スクロール解除
-      setTimeout(() => { modalImg.src = ''; }, 300);
-    };
-
-    closeBtn.addEventListener('click', closeModal);
-    modal.addEventListener('click', (e) => {
-      // 画像以外の領域クリックで閉じる
-      if (e.target === modal || e.target.classList.contains('modal-content')) {
-        closeModal();
-      }
-    });
+      const closeModal = () => {
+        modal.classList.remove('active');
+        document.body.style.overflow = ''; 
+        setTimeout(() => { modalImg.src = ''; }, 300);
+      };
+
+      if(closeBtn) closeBtn.addEventListener('click', closeModal);
+      modal.addEventListener('click', (e) => {
+        if (e.target === modal || e.target.classList.contains('modal-content')) {
+          closeModal();
+        }
+      });
+    }
   });
 </script>