Spaces:
Sleeping
Sleeping
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>入社時各種ご案内 | LEOC</title> | |
| <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-color: #2fa4e7; /* メインカラー（明るい青） */ | |
| --theme-color-dark: #305590; /* 濃い青（文字や強調部） */ | |
| --theme-color-light: #eef7fc; /* 薄い青背景 */ | |
| --theme-accent: #e67e22; /* アクセント（オレンジ） */ | |
| --header-height: 60px; | |
| } | |
| body { | |
| margin: 0; padding: 0; | |
| font-family: "Helvetica Neue", Arial, sans-serif; | |
| color: #333; line-height: 1.6; background-color: #fff; | |
| font-size: 16px; | |
| } | |
| html { scroll-behavior: smooth; } | |
| /* リンクの基本スタイル（青に変更） */ | |
| a { color: var(--theme-color); text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| /* ヘッダー */ | |
| header { | |
| background: #fff; border-bottom: 1px solid #ddd; height: var(--header-height); | |
| position: fixed; top: 0; width: 100%; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |
| } | |
| .header-inner { | |
| max-width: 900px; margin: 0 auto; height: 100%; padding: 0 15px; | |
| display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .header-title { font-weight: bold; font-size: 18px; color: #222; } | |
| .back-link { | |
| 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); | |
| display: flex; gap: 30px; | |
| } | |
| /* サイドナビ（PC用） */ | |
| .side-nav { | |
| width: 200px; flex-shrink: 0; | |
| position: sticky; top: 80px; height: calc(100vh - 100px); overflow-y: auto; | |
| display: none; | |
| } | |
| .side-nav ul { list-style: none; padding: 0; margin: 0; } | |
| .side-nav li { margin-bottom: 10px; } | |
| .side-nav a { | |
| 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-color-light); color: var(--theme-color); 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; | |
| scroll-margin-top: 80px; | |
| } | |
| /* 左ボーダーを青に変更 */ | |
| .sec-header { | |
| 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; } | |
| .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; | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.05); | |
| } | |
| .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: 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; } | |
| .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-color); /* 枠線を青に */ | |
| color: var(--theme-color-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-color-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; | |
| } | |
| .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) { | |
| .layout-wrapper { display: block; padding-top: var(--header-height); } | |
| .mobile-nav { | |
| position: sticky; top: var(--header-height); z-index: 99; | |
| background: rgba(255,255,255,0.95); border-bottom: 1px solid #eee; | |
| white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; | |
| padding: 10px 5px; | |
| } | |
| .mobile-nav a { | |
| 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-color); color: #fff; border-color: var(--theme-color); | |
| } | |
| .elder-btn { | |
| font-size: 17px; | |
| padding: 15px 10px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-inner"> | |
| <div class="header-title">入社時各種ご案内</div> | |
| <a href="entry_info.html" class="back-link">TOPへ戻る</a> | |
| </div> | |
| </header> | |
| <nav class="mobile-nav" id="mobileNav"> | |
| <a href="#sec-health">体調・緊急</a> | |
| <a href="#sec-training">研修動画</a> | |
| <a href="#sec-welfare">福利厚生</a> | |
| <a href="#sec-info">社内報</a> | |
| <a href="#sec-anpi">安否確認</a> | |
| <a href="#sec-compliance">相談窓口</a> | |
| </nav> | |
| <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-welfare">福利厚生・手当</a></li> | |
| <li><a href="#sec-info">社内報・メルマガ</a></li> | |
| <li><a href="#sec-anpi">安否確認サービス</a></li> | |
| <li><a href="#sec-compliance">相談窓口</a></li> | |
| </ul> | |
| </aside> | |
| <main class="main-content"> | |
| <section id="sec-health" class="section"> | |
| <div class="sec-header"><h2 class="sec-title">体調不良・緊急連絡</h2><span class="sec-sub" style="color:#d35400;">重要</span></div> | |
| <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> | |
| <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">団体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">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"> | |
| <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/1D10GDFZpNyla9UctZ1O2ITzB4UCv5Acp" alt="相談窓口"></div> | |
| </section> | |
| </main> | |
| </div> | |
| <script> | |
| const sections = document.querySelectorAll('.section'); | |
| const navLinks = document.querySelectorAll('.side-nav a, .mobile-nav a'); | |
| window.addEventListener('scroll', () => { | |
| let current = ''; | |
| 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'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |