Spaces:

Johnny0619
/

OU

Sleeping

App Files Files Community

Johnny0619 commited on Dec 9, 2025

Commit

744b810

verified ·

1 Parent(s): d7eb578

Upload 2 files

Browse files

Files changed (2) hide show

entry_info04.html +466 -0
guide.html +203 -0

entry_info04.html ADDED Viewed

	@@ -0,0 +1,466 @@

+<!DOCTYPE html>
+<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>
+  /* * ==========================================================================
+   * ベーススタイル
+   * ==========================================================================
+   */
+  :root {
+    --theme-green: #29a745;
+    --theme-green-dark: #1e7e34;
+    --theme-accent: #e67e22;
+    --bg-color: #ffffff;
+    --text-color: #333;
+    --gray-bg: #f8f9fa;
+  }
+  body {
+    margin: 0; padding: 0;
+    background-color: var(--bg-color);
+    font-family: "Helvetica Neue", "Arial", sans-serif;
+    color: var(--text-color);
+    line-height: 1.6;
+    font-size: 16px;
+  }
+  /* ヘッダー */
+  header {
+    background: #fff;
+    border-bottom: 4px solid var(--theme-green);
+    padding: 15px 0;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    position: sticky; top: 0; z-index: 1000;
+  }
+  .header-inner {
+    max-width: 1000px; margin: 0 auto; padding: 0 20px;
+    display: flex; justify-content: space-between; align-items: center;
+  }
+  .logo-main { font-size: 24px; font-weight: 900; color: #222; }
+  .logo-sub { font-size: 11px; color: #777; letter-spacing: 0.1em; }
+  /* メインコンテンツ枠 */
+  .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 {
+    background: #f0f9f2; border-left: 5px solid var(--theme-green);
+    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);
+    border-radius: 12px;
+    padding: 40px 30px;
+    margin-bottom: 60px;
+    box-shadow: 0 5px 15px rgba(41, 167, 69, 0.1);
+    position: relative;
+    overflow: hidden;
+  }
+  .pweb-section::before {
+    content: "必須対応";
+    position: absolute; top: 0; left: 0;
+    background: var(--theme-accent); color: #fff;
+    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;
+    border: 2px solid #c3e6cb;
+    border-radius: 8px;
+    padding: 25px;
+    max-width: 600px;
+    margin: 0 auto 40px auto;
+    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+  }
+  .card-head {
+    font-weight: bold; font-size: 20px; margin-bottom: 20px;
+    padding-bottom: 10px; border-bottom: 1px dashed #aaa;
+    color: var(--theme-green-dark); display: flex; align-items: center; gap: 10px;
+  }
+  /* 会社コード削除に伴い1カラムに変更 */
+  .login-grid {
+    display: grid; grid-template-columns: 1fr; gap: 20px;
+  }
+  .login-field { margin-bottom: 0; }
+  .field-label { display: block; font-size: 13px; color: #555; margin-bottom: 5px; font-weight: bold; }
+  .field-value {
+    background: #fff; border: 1px solid #ccc; border-radius: 4px;
+    padding: 10px 15px; font-family: monospace; font-size: 18px; font-weight: bold; color: #333;
+    display: block; box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
+  }
+  /* パスワード例などの補足 */
+  .field-helper {
+    font-size: 13px; color: #666; margin-top: 5px; text-align: right;
+  }
+  /* 赤枠の注釈 */
+  .note-red {
+    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;
+  }
+  /* 手順フロー（初回手順に変更） */
+  .flow-area { margin-bottom: 40px; }
+  .flow-title {
+    text-align: center; font-size: 18px; font-weight: bold; margin-bottom: 20px;
+    color: #444; position: relative; display: inline-block; left: 50%; transform: translateX(-50%);
+    background: #fff; padding: 0 15px; z-index: 2;
+  }
+  .flow-container {
+    display: flex; gap: 15px; justify-content: space-between;
+    counter-reset: step;
+  }
+  .flow-step {
+    flex: 1;
+    background: #fff; border: 1px solid #ddd; border-radius: 8px;
+    padding: 20px 10px; text-align: center;
+    position: relative;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
+  }
+  .flow-step::before {
+    counter-increment: step;
+    content: "STEP " counter(step);
+    display: block;
+    background: var(--theme-green); color: #fff;
+    font-size: 12px; font-weight: bold;
+    padding: 2px 10px; border-radius: 10px;
+    width: fit-content; margin: 0 auto 10px auto;
+  }
+  /* PC用矢印 */
+  .flow-step:not(:last-child)::after {
+    content: "\f054"; /* chevron-right */
+    font-family: "Font Awesome 6 Free"; font-weight: 900;
+    position: absolute; top: 50%; right: -15px; transform: translateY(-50%);
+    color: #ccc; font-size: 18px; z-index: 1;
+    background: #fff; height: 20px; line-height: 20px;
+  }
+  .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; }
+  .btn-pweb-main {
+    display: inline-block;
+    background-color: var(--theme-accent); color: #fff;
+    font-size: 22px; font-weight: bold;
+    padding: 20px 60px; 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;
+    word-break: break-all;
+  }
+  .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;
+  }
+  /* 【NEW】画像マニュアル表示エリア（1カラム・縦並び） */
+  .manual-vertical-area {
+    margin-top: 40px;
+    border-top: 1px dashed #ddd;
+    padding-top: 40px;
+  }
+  .manual-label {
+    text-align: center; font-size: 16px; font-weight: bold; color: #555; margin-bottom: 20px;
+  }
+  /* グリッドを1カラムに変更し、縦に積む */
+  .manual-grid-vertical {
+    display: grid;
+    grid-template-columns: 1fr; /* 1列 */
+    gap: 30px; /* 画像間の余白 */
+    max-width: 600px;
+    margin: 0 auto;
+  }
+  .manual-item {
+    text-align: center;
+  }
+  .manual-link {
+    display: block;
+    width: 100%;
+    border: 2px solid #eee;
+    border-radius: 10px;
+    overflow: hidden;
+    position: relative;
+    transition: all 0.3s;
+    background: #fff;
+  }
+  .manual-link:hover {
+    border-color: var(--theme-green);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+    opacity: 0.95;
+  }
+  .manual-img {
+    width: 100%; height: auto; display: block;
+  }
+  .zoom-hint {
+    position: absolute; bottom: 15px; right: 15px;
+    background: rgba(0,0,0,0.7); color: #fff;
+    padding: 8px 15px; border-radius: 30px; font-size: 14px; font-weight: bold;
+    pointer-events: none;
+  }
+  .manual-caption {
+    margin-top: 10px; font-weight: bold; color: var(--theme-green-dark); font-size: 15px;
+  }
+  /* メニューエリア */
+  .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; }
+  .menu-header::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; border-top: 1px solid #ddd; z-index: 0; }
+  .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; }
+  .menu-card {
+    display: flex; align-items: center; background: #fff; border: 1px solid #eee; border-radius: 8px;
+    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-green); background-color: #f9fff9;
+    transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  }
+  .menu-icon { font-size: 24px; color: var(--theme-green); 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: #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; }
+    .flow-container { flex-direction: column; gap: 15px; }
+    .flow-step { text-align: left; display: flex; align-items: center; gap: 15px; padding: 15px; }
+    .flow-step::before { margin: 0; flex-shrink: 0; }
+    .flow-step:not(:last-child)::after {
+      content: "\f078"; /* chevron-down */
+      top: auto; bottom: -22px; right: 50%; transform: translateX(50%);
+      width: 20px; height: 20px; line-height: 20px;
+      background: transparent; color: #ccc; font-size: 14px;
+      display: block;
+    }
+    .step-icon { font-size: 24px; margin-bottom: 0; width: 30px; text-align: center; }
+    .btn-pweb-main { font-size: 18px; padding: 15px 20px; }
+    .url-text { font-size: 11px; }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="header-inner">
+    <div class="logo-area">
+      <div class="logo-main">オノパー</div>
+      <div class="logo-sub">ONODERA PARK</div>
+    </div>
+  </div>
+</header>
+<main class="container">
+  <section class="welcome-box">
+    <h1 class="page-title">ご入社ありがとうございます</h1>
+    <div class="status-message">
+      <p>
+        <strong><i class="fa-solid fa-check-circle"></i> お手続き状況について</strong><br>
+        お手続き完了の通知は担当者へ送られています。<br>
+        正式な勤務開始日時、手順などのご連絡をお待ち下さい。
+      </p>
+    </div>
+  </section>
+  <section class="pweb-section">
+    <div class="pweb-header">
+      <h2 class="pweb-title"><i class="fa-solid fa-id-card"></i> マイナンバー登録・初回設定</h2>
+      <p class="pweb-desc">以下の手順で初期設定を行い、マイナンバー登録へ進んでください。</p>
+    </div>
+    <div class="login-card">
+      <div class="card-head"><i class="fa-solid fa-key"></i> ログイン情報</div>
+      <div class="login-grid">
+        <div class="login-field">
+          <span class="field-label">ユーザーID</span>
+          <div class="field-value">社員番号 (6桁)</div>
+        </div>
+        <div class="login-field">
+          <span class="field-label">初期パスワード (生年月日8桁)</span>
+          <div class="field-value">19710401</div>
+          <div class="field-helper">
+            例：1971年4月1日生まれ → 数字8桁
+          </div>
+        </div>
+      </div>
+      <p class="note-red">
+        <i class="fa-solid fa-triangle-exclamation"></i> 初回ログイン時に「電子交付の承諾」と「パスワード変更」が必須となります。
+      </p>
+    </div>
+    <div class="flow-area">
+      <div class="flow-title">初回設定から登録までの流れ</div>
+      <div class="flow-container">
+        <div class="flow-step">
+          <i class="fa-solid fa-right-to-bracket step-icon"></i>
+          <div class="step-text">
+            下のボタンから<br>
+            <span class="step-highlight">ログイン</span>
+          </div>
+        </div>
+        <div class="flow-step">
+          <i class="fa-solid fa-file-contract step-icon"></i>
+          <div class="step-text">
+            電子交付の承諾<br>
+            <span class="step-highlight">「承諾する」</span>
+          </div>
+        </div>
+        <div class="flow-step">
+          <i class="fa-solid fa-lock step-icon"></i>
+          <div class="step-text">
+            <span class="step-highlight">パスワード変更</span><br>
+            (PDF用は空欄可)
+          </div>
+        </div>
+        <div class="flow-step">
+          <i class="fa-solid fa-id-card step-icon"></i>
+          <div class="step-text">
+            メニューから<br>
+            <span class="step-highlight">マイナンバー登録</span>
+          </div>
+        </div>
+      </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">▼ 手順詳細・画面イメージ（クリックで拡大）</div>
+      <div class="manual-grid-vertical">
+        <div class="manual-item">
+          <a href="https://lh3.googleusercontent.com/d/1HaAQibjYgB2Lwd3k1Pj74rkJn-dNVcKK" target="_blank" class="manual-link">
+            <img src="https://lh3.googleusercontent.com/d/1HaAQibjYgB2Lwd3k1Pj74rkJn-dNVcKK" alt="初回利用の手順" class="manual-img">
+            <div class="zoom-hint"><i class="fa-solid fa-magnifying-glass-plus"></i> 手順を拡大</div>
+          </a>
+          <div class="manual-caption">▲ 初回利用の手順</div>
+        </div>
+        <div class="manual-item">
+          <a href="https://lh3.googleusercontent.com/d/1UVRXjNafHk8xUIzoR9x1HOtnKXZZcjWY" target="_blank" class="manual-link">
+            <img src="https://lh3.googleusercontent.com/d/1UVRXjNafHk8xUIzoR9x1HOtnKXZZcjWY" alt="操作画面イメージ" class="manual-img">
+            <div class="zoom-hint"><i class="fa-solid fa-magnifying-glass-plus"></i> 画面を拡大</div>
+          </a>
+          <div class="manual-caption">▲ 操作画面イメージ</div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="menu-header">
+    <h2>その他 入社時のご案内</h2>
+  </section>
+  <div class="menu-grid">
+    <a href="guide.html#sec-health" class="menu-card">
+      <div class="menu-icon"><i class="fa-solid fa-user-nurse"></i></div>
+      <div class="menu-content">
+        <span class="menu-title">体調不良・緊急連絡</span>
+        <span class="menu-desc">ルールと緊急時の連絡先</span>
+      </div>
+      <i class="fa-solid fa-chevron-right menu-arrow"></i>
+    </a>
+    <a href="guide.html#sec-training" class="menu-card">
+      <div class="menu-icon"><i class="fa-solid fa-graduation-cap"></i></div>
+      <div class="menu-content">
+        <span class="menu-title">研修・動画視聴</span>
+        <span class="menu-desc">入社時必須の研修動画</span>
+      </div>
+      <i class="fa-solid fa-chevron-right menu-arrow"></i>
+    </a>
+    <a href="guide.html#sec-welfare" class="menu-card">
+      <div class="menu-icon"><i class="fa-solid fa-gift"></i></div>
+      <div class="menu-content">
+        <span class="menu-title">福利厚生・手当</span>
+        <span class="menu-desc">ベネフィット・各種手当</span>
+      </div>
+      <i class="fa-solid fa-chevron-right menu-arrow"></i>
+    </a>
+    <a href="guide.html#sec-info" class="menu-card">
+      <div class="menu-icon"><i class="fa-solid fa-circle-info"></i></div>
+      <div class="menu-content">
+        <span class="menu-title">社内情報・メルマガ</span>
+        <span class="menu-desc">Web社内報「オノパー」</span>
+      </div>
+      <i class="fa-solid fa-chevron-right menu-arrow"></i>
+    </a>
+    <a href="guide.html#sec-anpi" class="menu-card">
+      <div class="menu-icon"><i class="fa-solid fa-mobile-screen"></i></div>
+      <div class="menu-content">
+        <span class="menu-title">安否確認サービス</span>
+        <span class="menu-desc">災害時の確認用アプリ</span>
+      </div>
+      <i class="fa-solid fa-chevron-right menu-arrow"></i>
+    </a>
+    <a href="guide.html#sec-compliance" class="menu-card">
+      <div class="menu-icon"><i class="fa-solid fa-comments"></i></div>
+      <div class="menu-content">
+        <span class="menu-title">相談窓口</span>
+        <span class="menu-desc">コンプライアンス相談</span>
+      </div>
+      <i class="fa-solid fa-chevron-right menu-arrow"></i>
+    </a>
+  </div>
+</main>
+<footer>
+  <div class="footer-inner">
+    <p>ONODERA PARK</p>
+    <div class="copyright">Copyright© ONODERA GROUP All Rights Reserved.</div>
+  </div>
+</footer>
+</body>
+</html>

guide.html ADDED Viewed

	@@ -0,0 +1,203 @@

+<!DOCTYPE html>
+<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>
+  :root {
+    --theme-green: #29a745;
+    --theme-green-light: #f0f9f2;
+    --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; }
+  /* ヘッダー */
+  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;
+  }
+  /* レイアウト */
+  .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-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;
+    scroll-margin-top: 80px;
+  }
+  .sec-header {
+    border-left: 6px solid var(--theme-green); 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: #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%; }
+  /* スマホ対応 */
+  @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-green); color: #fff; border-color: var(--theme-green);
+    }
+  }
+</style>
+</head>
+<body>
+<header>
+  <div class="header-inner">
+    <div class="header-title">入社時各種ご案内</div>
+    <a href="index.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>
+    </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>
+    </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>
+    </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>
+    </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>
+    </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(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>