Update guide.html

guide.html

@@ -9,7 +9,9 @@
 <style>
   :root {
     --theme-green: #29a745;
+    --theme-green-dark: #1e7e34;
     --theme-green-light: #f0f9f2;
+    --theme-accent: #e67e22; /* アクセントカラー（オレンジ） */
     --header-height: 60px;
   }
   body {
@@ -19,6 +21,10 @@
     font-size: 16px;
   }
   html { scroll-behavior: smooth; }
+  
+  /* リンクの基本スタイル */
+  a { color: var(--theme-green); text-decoration: none; }
+  a:hover { text-decoration: underline; }
 
   /* ヘッダー */
   header {
@@ -34,7 +40,7 @@
     font-size: 14px; color: #555; text-decoration: none; border: 1px solid #ccc; padding: 5px 12px; border-radius: 4px;
   }
   .back-link:hover { background-color: #f5f5f5; }
-
+  
   /* レイアウト */
   .layout-wrapper {
     max-width: 900px; margin: 0 auto; padding-top: calc(var(--header-height) + 20px);
@@ -56,9 +62,8 @@
   .side-nav a:hover, .side-nav a.active {
     background-color: var(--theme-green-light); color: var(--theme-green); font-weight: bold;
   }
-
   .main-content { flex: 1; padding: 0 15px 50px; min-width: 0; }
-
+  
   /* セクション */
   .section {
     margin-bottom: 60px; padding-top: 20px; border-top: 1px dashed #eee;
@@ -70,7 +75,7 @@
   }
   .sec-title { font-size: 24px; font-weight: bold; margin: 0; }
   .sec-sub { font-size: 13px; color: #666; background: #eee; padding: 2px 8px; border-radius: 4px; }
-
+  
   /* 画像・情報カード */
   .img-box {
     border: 1px solid #ddd; border-radius: 8px; overflow: hidden; margin-bottom: 20px;
@@ -78,19 +83,89 @@
   }
   .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;
   }
   .info-row { margin-bottom: 8px; font-size: 15px; }
   .label { font-weight: bold; margin-right: 10px; color: #444; }
   .val { font-family: monospace; font-weight: bold; background: #fff; padding: 2px 6px; border: 1px solid #ccc; border-radius: 3px; }
-
   .video-wrap {
     position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: 8px; margin-bottom: 10px;
   }
   .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
+  /* ==========================================================================
+   * 【改修】高齢者向け：大きく分かりやすいリンクボタン
+   * ========================================================================== */
+  .elder-action-area {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 10px;
+    margin-top: 15px;
+    border: 1px solid #eee;
+  }
+  
+  .elder-btn {
+    display: block;
+    background: #fff;
+    border: 2px solid var(--theme-green); /* 緑の枠線 */
+    color: var(--theme-green-dark);
+    padding: 15px 20px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-size: 18px; /* 文字サイズを大きく */
+    font-weight: bold;
+    text-align: center;
+    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);
+    transform: translateY(-2px);
+    text-decoration: none;
+    box-shadow: 0 5px 10px rgba(0,0,0,0.15);
+  }
+
+  .elder-btn i {
+    font-size: 1.3em;
+    margin-right: 8px;
+    vertical-align: middle;
+  }
+
+  /* 電話用ボタン（オレンジ色） */
+  .elder-btn-phone {
+    border-color: var(--theme-accent);
+    color: #d35400;
+  }
+  .elder-btn-phone:hover {
+    background: #fff5eb;
+  }
+
+  /* URLなどの補足テキスト */
+  .btn-sub-text {
+    display: block;
+    font-size: 12px;
+    color: #666;
+    font-weight: normal;
+    margin-top: 5px;
+    word-break: break-all;
+  }
+  
+  /* サブタイトルの強調 */
+  .area-label {
+    font-weight: bold;
+    font-size: 16px;
+    margin-bottom: 10px;
+    display: block;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 5px;
+  }
+
   /* スマホ対応 */
   @media (min-width: 769px) { .side-nav { display: block; } }
   @media (max-width: 768px) {
@@ -108,6 +183,10 @@
     .mobile-nav a.active {
       background: var(--theme-green); color: #fff; border-color: var(--theme-green);
     }
+    .elder-btn {
+        font-size: 17px;
+        padding: 15px 10px;
+    }
   }
 </style>
 </head>
@@ -116,7 +195,7 @@
 <header>
   <div class="header-inner">
     <div class="header-title">入社時各種ご案内</div>
-    <a href="/entry_info04" class="back-link">TOPへ戻る</a>
+    <a href="entry_info.html" class="back-link">TOPへ戻る</a>
   </div>
 </header>
 
@@ -132,11 +211,11 @@
 <div class="layout-wrapper">
   <aside class="side-nav">
     <ul>
-      <li><a href="#sec-health">体調不良・緊急</a></li>
-      <li><a href="#sec-training">研修動画</a></li>
+      <li><a href="#sec-health">体調不良・緊急連絡</a></li>
+      <li><a href="#sec-training">入社時研修動画</a></li>
       <li><a href="#sec-welfare">福利厚生・手当</a></li>
       <li><a href="#sec-info">社内報・メルマガ</a></li>
-      <li><a href="#sec-anpi">安否確認</a></li>
+      <li><a href="#sec-anpi">安否確認サービス</a></li>
       <li><a href="#sec-compliance">相談窓口</a></li>
     </ul>
   </aside>
@@ -148,37 +227,95 @@
       <p>勤務中の体調不良、特に消化器系症状（嘔吐・下痢）がある場合は、直ちに責任者へ報告してください。</p>
       <div class="img-box"><div class="img-caption">▼ 対応ルール・緊急連絡先カード</div><img src="https://lh3.googleusercontent.com/d/1XlMVeBv-kHYBgPo_1ufrbLXDeBAV0dGQ" alt="体調不良対応"></div>
       <div class="img-box"><img src="https://lh3.googleusercontent.com/d/189ei6TnFnGyWKG88YpVK5veckMHV9b1V" alt="緊急連絡先"></div>
+      
+      <div class="elder-action-area">
+        <div class="area-label">緊急時の電話はこちら</div>
+        <a href="tel:0120010462" class="elder-btn elder-btn-phone">
+            <i class="fa-solid fa-phone"></i> ここを押して電話をかける
+            <span class="btn-sub-text">0120-010-462 (通話無料)</span>
+        </a>
+      </div>
     </section>
 
     <section id="sec-training" class="section">
       <div class="sec-header"><h2 class="sec-title">入社時研修動画</h2><span class="sec-sub">必須</span></div>
       <div class="video-wrap"><iframe src="https://www.youtube.com/embed/M5DebUhDCVc" title="YouTube video" frameborder="0" allowfullscreen></iframe></div>
-      <p style="text-align:center;"><a href="https://youtube.com/watch?v=M5DebUhDCVc" target="_blank">YouTubeで直接見る場合はこちら</a></p>
+      
+      <div class="elder-action-area">
+        <a href="https://youtube.com/watch?v=M5DebUhDCVc" target="_blank" class="elder-btn">
+            <i class="fa-brands fa-youtube"></i> ここを押してYouTubeで見る
+            <span class="btn-sub-text">動画が再生されない場合はこちら</span>
+        </a>
+      </div>
     </section>
 
     <section id="sec-welfare" class="section">
       <div class="sec-header"><h2 class="sec-title">福利厚生・手当</h2></div>
       <div class="info-card">
         <div class="info-row"><strong>ベネフィット・ステーション</strong></div>
-        <div class="info-row"><span class="label">URL</span> <a href="http://bs.benefit-one.inc" target="_blank">http://bs.benefit-one.inc</a></div>
         <div class="info-row"><span class="label">団体ID</span> <span class="val">C100130AV</span></div>
       </div>
       <div class="img-box"><div class="img-caption">▼ 福利厚生詳細</div><img src="https://lh3.googleusercontent.com/d/1r1lauavxtwC3Ya1L8UGr2GcJ2jhjwU36" alt="福利厚生"></div>
+      
+      <div class="elder-action-area">
+        <div class="area-label">ベネフィット・ステーション</div>
+        <a href="http://bs.benefit-one.inc" target="_blank" class="elder-btn">
+            <i class="fa-solid fa-arrow-up-right-from-square"></i> ここを押してサイトを開く
+            <span class="btn-sub-text">http://bs.benefit-one.inc</span>
+        </a>
+        
+        <div class="area-label" style="margin-top:25px;">三菱UFJ Biz Person's</div>
+        <a href="https://biz-persons.mufg.jp/userlogin" target="_blank" class="elder-btn">
+            <i class="fa-solid fa-building"></i> ここを押してログイン画面へ
+            <span class="btn-sub-text">https://biz-persons.mufg.jp/userlogin</span>
+        </a>
+        
+        <div class="area-label" style="margin-top:25px;">お問い合わせ（総務部）</div>
+        <a href="tel:0352208523" class="elder-btn elder-btn-phone">
+            <i class="fa-solid fa-phone"></i> ここを押して総務部へ電話
+            <span class="btn-sub-text">03-5220-8523</span>
+        </a>
+        <a href="mailto:soumu_info@leoc.co.jp" class="elder-btn">
+            <i class="fa-solid fa-envelope"></i> メールを送る
+            <span class="btn-sub-text">soumu_info@leoc.co.jp</span>
+        </a>
+      </div>
     </section>
 
     <section id="sec-info" class="section">
       <div class="sec-header"><h2 class="sec-title">社内報・メルマガ</h2></div>
       <div class="info-card">
         <div class="info-row"><strong>Web社内報「オノパー」</strong></div>
-        <div class="info-row"><span class="label">URL</span> <a href="https://park.onodera-group.com/" target="_blank">https://park.onodera-group.com/</a></div>
         <div class="info-row"><span class="label">ID/PW</span> <span class="val">op</span> / <span class="val">2</span></div>
       </div>
       <div class="img-box"><div class="img-caption">▼ メルマガ登録用QR</div><img src="https://lh3.googleusercontent.com/d/1yTjJFqUfCGMoUE1wrolzfHlu4ZNSc5jk" alt="メルマガ登録"></div>
+      
+      <div class="elder-action-area">
+        <div class="area-label">メールマガジン</div>
+        <a href="https://bit.ly/3FOmOvO" target="_blank" class="elder-btn">
+            <i class="fa-solid fa-envelope-open-text"></i> ここを押して登録画面へ
+            <span class="btn-sub-text">https://bit.ly/3FOmOvO</span>
+        </a>
+
+        <div class="area-label" style="margin-top:25px;">Web社内報「オノパー」</div>
+        <a href="https://park.onodera-group.com" target="_blank" class="elder-btn">
+            <i class="fa-solid fa-globe"></i> ここを押してサイトを見る
+            <span class="btn-sub-text">https://park.onodera-group.com</span>
+        </a>
+      </div>
     </section>
 
     <section id="sec-anpi" class="section">
       <div class="sec-header"><h2 class="sec-title">安否確認サービス</h2></div>
       <div class="img-box"><div class="img-caption">▼ 登録手順</div><img src="https://lh3.googleusercontent.com/d/11od2GZX7U7zOP2J846dDADIfMFLsyxB_" alt="安否確認登録"></div>
+
+      <div class="elder-action-area">
+        <div class="area-label">アプリのダウンロード</div>
+        <a href="https://play.google.com/store/apps/details?id=com.cstap.anpi2&hl=ja" target="_blank" class="elder-btn">
+            <i class="fa-brands fa-android"></i> ここを押してアプリを入れる
+            <span class="btn-sub-text">Google Play ストアへ移動します</span>
+        </a>
+      </div>
     </section>
 
     <section id="sec-compliance" class="section">
@@ -193,7 +330,7 @@
   const navLinks = document.querySelectorAll('.side-nav a, .mobile-nav a');
   window.addEventListener('scroll', () => {
     let current = '';
-    sections.forEach(sec => { if(pageYOffset >= sec.offsetTop - 150) current = sec.getAttribute('id'); });
+    sections.forEach(sec => { if(window.pageYOffset >= sec.offsetTop - 150) current = sec.getAttribute('id'); });
     navLinks.forEach(link => {
       link.classList.remove('active');
       if(current && link.getAttribute('href').includes(current)) link.classList.add('active');