Update entry_info04.html

entry_info04.html

@@ -175,7 +175,7 @@
     font-size: 14px; color: #fff; display: block; font-weight: normal; margin-top: 5px; opacity: 0.9;
   }
 
-  /* 【NEW】画像マニュアル表示エリア（全幅表示） */
+  /* 画像マニュアル表示エリア */
   .manual-vertical-area {
     margin-top: 40px;
     border-top: 1px dashed #ddd;
@@ -185,22 +185,19 @@
     text-align: center; font-size: 18px; font-weight: bold; color: #333; margin-bottom: 25px;
     display: flex; align-items: center; justify-content: center; gap: 8px;
   }
-  
   .manual-grid-vertical {
     display: grid;
     grid-template-columns: 1fr;
     gap: 40px;
-    /* max-width制限を解除し、親要素(container)の幅いっぱいまで広げる */
     width: 100%; 
   }
-
   .manual-item { text-align: center; }
   
   .manual-link {
     display: block; width: 100%; 
     border: 2px solid #eee; border-radius: 12px;
     overflow: hidden; position: relative; transition: all 0.3s;
-    background: #fff; cursor: pointer; /* クリックできることを明示 */
+    background: #fff; cursor: pointer;
   }
   .manual-link:hover {
     border-color: var(--theme-green);
@@ -222,39 +219,59 @@
     margin-top: 15px; font-weight: bold; color: var(--theme-green-dark); font-size: 18px;
   }
 
-  /* 【NEW】モーダル用スタイル */
+  /* * ==========================================================================
+   * モーダル用スタイル (95%幅制御・スクロール対応)
+   * ==========================================================================
+   */
   .modal-overlay {
-    display: none; /* 初期は非表示 */
+    display: none;
     position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-    background: rgba(0, 0, 0, 0.85); z-index: 2000;
-    align-items: center; justify-content: center;
-    opacity: 0; transition: opacity 0.3s ease;
+    background: rgba(0, 0, 0, 0.9); z-index: 2000;
+    /* 縦長画像対応のためスクロール許可 */
+    overflow-y: auto; 
+    -webkit-overflow-scrolling: touch;
+    box-sizing: border-box;
+    padding: 20px 0;
   }
   .modal-overlay.active {
-    display: flex; opacity: 1;
+    display: flex; 
+    align-items: flex-start; /* 上端合わせでスクロールさせる */
+    justify-content: center;
+    opacity: 1;
   }
+  
   .modal-content {
     position: relative;
-    max-width: 95%; max-height: 95%;
+    /* 【重要】ウィンドウ幅の95%に固定 */
+    width: 95%; 
+    max-width: 1400px; /* PCでの拡大しすぎ防止（任意） */
+    margin: auto; /* 上下左右中央寄せ（スクロール時はよしなに配置される） */
     background: transparent;
     border-radius: 4px;
     box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-    overflow: hidden;
   }
+  
   .modal-img {
-    display: block; max-width: 100vw; max-height: 95vh;
-    object-fit: contain;
+    display: block; 
+    /* コンテンツ幅(95%)いっぱいに表示 */
+    width: 100%; 
+    height: auto; 
+    background: #fff;
+    border-radius: 4px;
   }
+  
+  /* 閉じるボタン（追従型） */
   .modal-close-btn {
-    position: absolute; top: 15px; right: 15px;
+    position: fixed; top: 20px; right: 20px;
     background: rgba(0,0,0,0.6); color: #fff;
-    border: none; border-radius: 50%;
-    width: 40px; height: 40px; font-size: 20px; cursor: pointer;
+    border: 2px solid #fff; border-radius: 50%;
+    width: 50px; height: 50px; font-size: 24px; cursor: pointer;
     display: flex; align-items: center; justify-content: center;
+    z-index: 2010;
     transition: background 0.2s;
   }
-  .modal-close-btn:hover { background: rgba(0,0,0,0.9); }
-  
+  .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; }
@@ -295,7 +312,6 @@
     .btn-pweb-main { font-size: 18px; padding: 15px 20px; }
     .url-text { font-size: 11px; }
     
-    /* スマホでのマニュアル表示調整 */
     .manual-label { font-size: 16px; }
     .manual-caption { font-size: 16px; }
   }
@@ -408,7 +424,7 @@
         <div class="manual-item">
           <a href="https://lh3.googleusercontent.com/d/1HaAQibjYgB2Lwd3k1Pj74rkJn-dNVcKK" class="manual-link js-modal-trigger">
             <img src="https://lh3.googleusercontent.com/d/1HaAQibjYgB2Lwd3k1Pj74rkJn-dNVcKK" alt="初回利用の手順" class="manual-img">
-            <div class="zoom-hint"><i class="fa-solid fa-expand"></i> 大きく表示</div>
+            <div class="zoom-hint"><i class="fa-solid fa-expand"></i> 画面幅95%で表示</div>
           </a>
           <div class="manual-caption">▲ 初回利用の手順</div>
         </div>
@@ -416,7 +432,7 @@
         <div class="manual-item">
           <a href="https://lh3.googleusercontent.com/d/1UVRXjNafHk8xUIzoR9x1HOtnKXZZcjWY" class="manual-link js-modal-trigger">
             <img src="https://lh3.googleusercontent.com/d/1UVRXjNafHk8xUIzoR9x1HOtnKXZZcjWY" alt="操作画面イメージ" class="manual-img">
-            <div class="zoom-hint"><i class="fa-solid fa-expand"></i> 大きく表示</div>
+            <div class="zoom-hint"><i class="fa-solid fa-expand"></i> 画面幅95%で表示</div>
           </a>
           <div class="manual-caption">▲ 操作画面イメージ</div>
         </div>
@@ -498,34 +514,36 @@
 </div>
 
 <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(); // リンク遷移をキャンセル
+        e.preventDefault();
         const imgSrc = trigger.getAttribute('href');
         modalImg.src = imgSrc;
-        modal.classList.add('active'); // モーダル表示
+        modal.classList.add('active');
         document.body.style.overflow = 'hidden'; // 背景スクロール禁止
       });
     });
 
-    // 閉じる処理 (ボタン or 背景クリック)
+    // 閉じる処理
     const closeModal = () => {
       modal.classList.remove('active');
       document.body.style.overflow = ''; // スクロール解除
-      setTimeout(() => { modalImg.src = ''; }, 300); // アニメーション後にsrcクリア
+      setTimeout(() => { modalImg.src = ''; }, 300);
     };
 
     closeBtn.addEventListener('click', closeModal);
     modal.addEventListener('click', (e) => {
-      if (e.target === modal) closeModal();
+      // 画像以外の領域クリックで閉じる
+      if (e.target === modal || e.target.classList.contains('modal-content')) {
+        closeModal();
+      }
     });
   });
 </script>