Hugging Face's logo

Spaces:
Johnny0619
/
OU
Sleeping

App Files Community
OU / index.html
Johnny0619's picture
Johnny0619
Update index.html
2a9e8e0 verified
raw
history blame contribute delete
49.9 kB
 <!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新研修制度ポータルサイト</title>
<!-- Tailwind CSS (CDN) -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome (アイコン用 CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- Google Fonts (Inter) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<script>
// Tailwind CSSのカスタム設定
tailwind.config = {
theme: {
extend: {
colors: {
// LEOCの緑を基調色として定義
'leoc-green': {
'50': '#e6f2eb',
'100': '#cce6d7',
'200': '#99cdb0',
'300': '#66b388',
'400': '#339a61',
'500': '#00793D', // 基調色
'600': '#006e37',
'700': '#005b2e',
'800': '#004825',
'900': '#00351c',
'950': '#002213',
},
// 楽しい印象を与えるアクセントカラー
'leoc-accent': {
'yellow': '#F1C40F',
'orange': '#E67E22',
'sky': '#3498DB',
// スライドのテーマカラー
'program-green': '#9acd32',
'program-blue': '#4a90e2',
'program-orange': '#f5a623',
'program-yellow': '#f8e71c',
}
},
fontFamily: {
// UI用フォント(Inter)と日本語用フォント(Noto Sans JP)を指定
sans: ['Inter', 'Noto Sans JP', 'sans-serif'],
}
}
}
}
</script>
<style type="text/tailwindcss">
/* スムーズなスクロール */
html {
scroll-behavior: smooth;
}
/* スクロールバーのスタイル（モダンブラウザ向け） */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c0c0c0;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a0a0a0;
}
/* カスタムスタイル */
.section-title {
@apply text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl text-center mb-12;
}
.subsection-title {
@apply text-2xl font-bold text-leoc-green-700 sm:text-3xl mb-6 pb-2 border-b-4 border-leoc-green-500;
}
.content-blockquote {
@apply text-lg text-gray-700 mb-6 italic border-l-4 border-leoc-green-200 pl-4;
}
/* ★ 修正点 1: ファッショナブルなテーブルデザイン */
.fashionable-table {
@apply min-w-full shadow-xl rounded-lg overflow-hidden;
}
.fashionable-table thead {
@apply bg-leoc-green-600; /* 強いLEOCカラー */
}
.fashionable-table th {
@apply px-6 py-4 text-left text-sm font-semibold text-white uppercase tracking-wider; /* 白抜き文字 */
}
.fashionable-table tbody tr {
@apply border-b border-leoc-green-100 bg-white transition-all duration-200;
}
.fashionable-table tbody tr:nth-child(odd) { /* 奇数行 */
@apply bg-leoc-green-50; /* LEOCカラーの薄い緑 */
}
.fashionable-table tbody tr:nth-child(even) { /* 偶数行 */
@apply bg-white;
}
.fashionable-table tbody tr:hover {
@apply bg-leoc-green-100; /* ホバー色 */
}
.fashionable-table td {
@apply px-6 py-4 whitespace-nowrap text-sm text-gray-800;
}
/* 強調セル (時期など) */
.fashionable-table .highlight-cell {
@apply font-semibold text-leoc-green-700;
}
/* 強調行 (合計など) */
.fashionable-table .highlight-row {
@apply bg-leoc-green-100 font-bold;
}
.fashionable-table .highlight-row:hover {
@apply bg-leoc-green-200;
}
</style>
</head>
<body class="bg-gray-50 font-sans antialiased">
<!-- ===== ヘッダー ===== -->
<header class="bg-white shadow-md sticky top-0 z-50">
<nav class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- ロゴ -->
<div class="flex-shrink-0 flex items-center">
<span class="text-2xl font-bold text-leoc-green-500">
<i class="fa-solid fa-seedling mr-2"></i>ONODERA UNIVERSITY
</span>
<!-- 通称を追加 -->
<span class="ml-4 text-sm font-semibold text-gray-500 hidden md:block">(新研修制度ポータル)</span>
</div>
<!-- ナビゲーションメニュー (PC) -->
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
<a href="#home" class="inline-flex items-center px-1 pt-1 border-b-2 border-leoc-green-500 text-sm font-medium text-gray-900">
ホーム
</a>
<a href="#about" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
制度について
</a>
<a href="#materials" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
資料一覧
</a>
<a href="#faq" class="inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium text-gray-500 hover:border-gray-300 hover:text-gray-700">
よくある質問
</a>
</div>
<!-- ハンバーガーメニュー (モバイル) -->
<div class="-mr-2 flex items-center sm:hidden">
<button type=button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-leoc-green-500" aria-expanded="false">
<span class="sr-only">メニューを開く</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</nav>
<!-- モバイルメニュー (開閉) -->
<div class="sm:hidden hidden" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1">
<a href="#home" class="block pl-3 pr-4 py-2 border-l-4 border-leoc-green-500 bg-leoc-green-50 text-base font-medium text-leoc-green-700">ホーム</a>
<a href="#about" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700">制度について</a>
<a href="#message" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700">社長メッセージ</a>
<a href="#materials" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700">資料一覧</a>
<a href="#faq" class="block pl-3 pr-4 py-2 border-l-4 border-transparent text-base font-medium text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700">よくある質問</a>
</div>
</div>
</header>
<!-- ===== メインコンテンツ ===== -->
<main>
<!-- ===== ヒーローセクション (Home) ===== -->
<section id="home" class="relative bg-leoc-green-500 text-white overflow-hidden">
<div class="absolute inset-0 opacity-10">
<svg class="absolute bottom-0 left-0" width="400" height="400" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="200" cy="200" r="200" fill="url(#grad1)"/><defs><radialGradient id="grad1" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(200 200) rotate(90) scale(200)"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs></svg>
<svg class="absolute top-0 right-0" width="300" height="300" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="150" cy="150" r="150" fill="url(#grad2)"/><defs><radialGradient id="grad2" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(150 150) rotate(90) scale(150)"><stop stop-color="#F1C40F"/><stop offset="1" stop-color="#F1C40F" stop-opacity="0"/></radialGradient></defs></svg>
</div>
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-bold tracking-tight text-shadow">
未来を担う人財へ。
</h1>
<h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-shadow">
2026年4月、新研修制度スタート。
</h2>
<div class="mt-8 max-w-4xl mx-auto px-4">
<div class="bg-leoc-green-800 bg-opacity-30 rounded-xl p-6 border border-leoc-green-300 border-opacity-40 shadow-lg backdrop-blur-sm">
<p class="text-lg sm:text-xl md:text-2xl font-bold text-white leading-relaxed">
現場の主役は、皆さんです。<br>
<span class="text-leoc-accent-yellow">自ら考え、動き、未来を切り拓く。</span>
</p>
<p class="mt-4 text-base sm:text-lg text-leoc-green-50 font-medium leading-relaxed">
業界最高水準のマネジメントスキルを武器に<br class="hidden sm:block">
新しいLEOCスタンダードを創造しましょう。
</p>
</div>
</div>
<div class="mt-12 bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-6 inline-block">
<div class="text-center">
<span class="block text-sm font-semibold uppercase tracking-wider text-white">研修制度開始まで</span>
<div class="flex items-center justify-center mt-2">
<span id="countdown-days" class="text-6xl font-bold text-leoc-accent-yellow">...</span>
<span class="text-2xl font-medium ml-3">days</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 制度について (About) - ★更新セクション ===== -->
<section id="about" class="py-16 sm:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="section-title">
新研修制度 “ONODERA UNIVERSITY” について
</h2>
<!-- 田中社長メッセージ (テキスト) -->
<div class="max-w-3xl mx-auto text-center mb-16 bg-gray-50 p-8 rounded-lg shadow-inner">
<h3 class="text-2xl font-bold text-leoc-green-700 sm:text-3xl mb-4">
田中社長メッセージ「共に成長するために」
</h3>
<ul class="space-y-2 text-lg text-gray-800 list-inside">
<li class="font-semibold">
<i class="fa-solid fa-check-circle text-leoc-green-500 mr-2"></i>
責任者は会社の顔であり、LEOCのサービスを体現する最も重要な存在。
</li>
<li class="font-semibold">
<i class="fa-solid fa-check-circle text-leoc-green-500 mr-2"></i>
責任者の成長と後継者の育成こそが、LEOCの成長戦略のカギとなる。
</li>
</ul>
<div class="mt-8 max-w-4xl mx-auto">
<div class="relative w-full" style="padding-bottom: 56.25%;">
<iframe
src="https://drive.google.com/file/d/1_k3LIAcLWA0dsU8MJKBEyce4hrA6bZlx/preview"
class="absolute top-0 left-0 w-full h-full rounded-xl shadow-2xl border border-gray-200"
frameborder="0"
allow="autoplay; encrypted-media"
allowfullscreen
title="田中社長メッセージ動画">
</iframe>
</div>
<p class="text-center mt-4 text-sm text-gray-600">
※動画が再生されない場合は、<a href="https://drive.google.com/file/d/1_k3LIAcLWA0dsU8MJKBEyce4hrA6bZlx/view?usp=drive_link" target="_blank" rel="noopener noreferrer" class="text-leoc-green-600 hover:underline font-medium">こちらのリンク</a>から直接ご覧ください。
</p>
</div>
</div>
<!-- 新しい研修制度のポイント (3点) -->
<div class="max-w-6xl mx-auto grid md:grid-cols-3 gap-8 text-center mb-24">
<div class="p-6 bg-leoc-green-50 border-t-4 border-leoc-green-500 rounded-lg shadow-lg flex flex-col items-center">
<div class="flex items-center justify-center h-16 w-16 bg-leoc-green-500 text-white rounded-full text-3xl font-bold mb-4">1</div>
<h3 class="text-lg font-bold text-gray-900 tracking-tight"> 責任者の職務を定義します
</h3>
</div>
<div class="p-6 bg-leoc-green-50 border-t-4 border-leoc-green-500 rounded-lg shadow-lg flex flex-col items-center">
<div class="flex items-center justify-center h-16 w-16 bg-leoc-green-500 text-white rounded-full text-3xl font-bold mb-4">2</div>
<h3 class="text-lg font-bold text-gray-900 tracking-tight"> 責任者職務を学ぶ研修と<br>責任者資格制度を始めます
</h3>
</div>
<div class="p-6 bg-leoc-green-50 border-t-4 border-leoc-green-500 rounded-lg shadow-lg flex flex-col items-center">
<div class="flex items-center justify-center h-16 w-16 bg-leoc-green-500 text-white rounded-full text-3xl font-bold mb-4">3</div>
<h3 class="text-lg font-bold text-gray-900 tracking-tight"> 責任者の経験を<br>今後のキャリアに活かします
</h3>
</div>
</div>
<!-- 1. 職務の定義 -->
<div class="mb-20">
<h2 class="subsection-title" id="point1_shokumu">1. 責任者の職務を定義します</h2>
<blockquote class="content-blockquote">
責任者の職務は現場や上司によって解釈に差があります。
職務の定義を明確にすることで、誰もが同じ基準で責任者をこなすことができるようになります。
責任者を専門性の高い、ステータスのある仕事としていきます。
</blockquote>
<div class="text-center p-4 bg-leoc-accent-yellow bg-opacity-20 rounded-lg">
<p class="text-lg font-semibold text-leoc-accent-orange">
<i class="fa-solid fa-bullhorn mr-2"></i>オフィシャルの呼称を『事業所責任者』に統一します。
</p>
</div>
<h4 class="text-xl font-semibold text-gray-900 mt-12 mb-6 text-center">事業所責任者の6つの職務</h4>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- 職務カード -->
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h5 class="text-lg font-bold text-leoc-green-600 mb-2">① 業績管理</h5>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li>予算達成に向けた収支・コスト管理</li>
<li>予算・速報・推定等業績プロセスの遂行</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h5 class="text-lg font-bold text-leoc-green-600 mb-2">② 衛生管理</h5>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li>衛生マニュアルの遵守徹底</li>
<li>衛生事故の未然防止と早期対応</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h5 class="text-lg font-bold text-leoc-green-600 mb-2">③ 人財管理</h5>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li>採用・育成・評価の実施</li>
<li>スタッフ定着率向上とチーム力強化</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h5 class="text-lg font-bold text-leoc-green-600 mb-2">④ 顧客満足</h5>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li>定例会議の資料作成と運営</li>
<li>顧客との信頼関係構築と顧客満足度向上</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h5 class="text-lg font-bold text-leoc-green-600 mb-2">⑤ 食事品質管理</h5>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li>調理・サービスの品質基準順守と改善</li>
<li>ホスピタリティの実践</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h5 class="text-lg font-bold text-leoc-green-600 mb-2">⑥ リスク管理</h5>
<ul class="list-disc list-inside text-gray-700 space-y-1">
<li>法令遵守、引継ぎ</li>
<li>労務管理、ハラスメント防止</li>
<li>危機発生時の初動対応・報告体制の整備</li>
</ul>
</div>
</div>
</div>
<!-- 2. 研修と資格 -->
<div class="mb-20">
<h2 class="subsection-title" id="point2_kenshu">2. 責任者職務を学ぶ研修と責任者資格制度を始めます</h2>
<blockquote class="content-blockquote">
来年度より責任者研修を始めます。
責任者の皆さんは全員参加し、新しい職務を改めて確認いただきます。
責任者研修を修了すると公式な責任者資格が付与されます。
</blockquote>
<h4 class="text-xl font-semibold text-gray-900 mt-12 mb-6 text-center">新研修プログラム</h4>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<img src="https://lh3.googleusercontent.com/d/17na7ReFicew4NK4fHLeDgkAsZTbsQXUz" alt="新研修プログラム 01 オリエンテーション" class="rounded-lg shadow-md object-cover w-full h-auto">
<img src="https://lh3.googleusercontent.com/d/13z9A2B6aVGG8HNWct2dcPaCktmSGh8pV" alt="新研修プログラム 02 ピープル" class="rounded-lg shadow-md object-cover w-full h-auto">
<img src="https://lh3.googleusercontent.com/d/1DGKFNYxd2nURcCZa-8D8MfQeQH2uMA5O" alt="新研修プログラム 03 業績管理" class="rounded-lg shadow-md object-cover w-full h-auto">
<img src="https://lh3.googleusercontent.com/d/1ERA_FHV0tpRgmOAblBa4C6cnZfSuKiWo" alt="新研修プログラム 04 衛生管理" class="rounded-lg shadow-md object-cover w-full h-auto">
</div>
<div class="text-center bg-gray-50 p-6 rounded-lg shadow-inner">
<p class="text-lg font-semibold text-gray-900">事業所責任者職務習得に特化したカリキュラム</p>
<p class="text-leoc-green-600 font-bold text-xl my-2">2026年度4月開校</p>
<p class="text-gray-700">eラーニング＋オンライン講習＋テキスト</p>
<p class="mt-4 text-sm text-gray-600">
※2026年1月ごろにテキスト配布と受講方法のオンライン説明会を予定しています。
</p>
</div>
<div class="flex justify-center my-12">
<!-- ダミー画像を使用 -->
<a href="https://lh3.googleusercontent.com/d/1bXqv3ghmcativ87KJ1uI1L3V76bc0QZ1" target="_blank">
<img src="https://lh3.googleusercontent.com/d/1bXqv3ghmcativ87KJ1uI1L3V76bc0QZ1" alt="ONODERA UNIVERSITY ロゴ" class="h-48 w-auto">
</a>
</div>
<h4 class="text-xl font-semibold text-gray-900 mt-12 mb-6 text-center">“ONODERA UNIVERSITY” 3つのレベル</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-leoc-green-50 p-6 rounded-lg shadow-md border-l-4 border-leoc-green-400">
<h5 class="text-lg font-bold text-leoc-green-700 mb-2">レベル1 (13時間)</h5>
<p class="text-gray-700 mb-2"><strong>概要:</strong> 事業所勤務に必要な基礎知識（衛生、接遇、調理補助、安全管理など）を習得。</p>
<p class="text-gray-700"><strong>到達目標:</strong> 事業所の日常業務を理解し、実務者として業務ができる。</p>
</div>
<div class="bg-leoc-green-50 p-6 rounded-lg shadow-md border-l-4 border-leoc-green-500">
<h5 class="text-lg font-bold text-leoc-green-700 mb-2">レベル2 (16時間)</h5>
<p class="text-gray-700 mb-2"><strong>概要:</strong> シフト作成、現場管理、業者対応など「責任者スキルの基礎」を習得。</p>
<p class="text-gray-700"><strong>到達目標:</strong> シフト作成など部分的なマネジメント業務を担当できる。後輩へのOJT指導が可能。</p>
</div>
<div class="bg-leoc-green-50 p-6 rounded-lg shadow-md border-l-4 border-leoc-green-600">
<h5 class="text-lg font-bold text-leoc-green-700 mb-2">レベル3 (26時間)</h5>
<p class="text-gray-700 mb-2"><strong>概要:</strong> あたらしい事業所責任者職務をすべて習得。</p>
<p class="text-gray-700"><strong>到達目標:</strong> 1事業所を任され、独立してマネジメントできる。</p>
<p class="text-red-600 font-semibold mt-2">※全科目修了で事業所責任者資格を付与します</p>
</div>
</div>
<!-- ★ 修正点 1: テーブルデザイン変更 -->
<h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">研修科目と所要時間</h4>
<div class="overflow-x-auto">
<table class="fashionable-table"> <!-- class変更 -->
<thead>
<tr>
<th>科目</th>
<th>Lv. 1</th>
<th>Lv. 2</th>
<th>Lv. 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="highlight-cell">オリエンテーション</td>
<td>3:30</td>
<td>0:20</td>
<td>0:40</td>
</tr>
<tr>
<td class="highlight-cell">業績管理</td>
<td>0:30</td>
<td>1:30</td>
<td>6:00</td>
</tr>
<tr>
<td class="highlight-cell">衛生管理</td>
<td>0:30</td>
<td>1:30</td>
<td>2:45</td>
</tr>
<tr>
<td class="highlight-cell">リスク管理</td>
<td>0:00</td>
<td>1:30</td>
<td>4:05</td>
</tr>
<tr>
<td class="highlight-cell">人財管理</td>
<td>0:30</td>
<td>4:25</td>
<td>3:30</td>
</tr>
<tr>
<td class="highlight-cell">CS管理</td>
<td>0:10</td>
<td>0:15</td>
<td>3:00</td>
</tr>
<tr>
<td class="highlight-cell">品質管理</td>
<td>4:00</td>
<td>2:00</td>
<td>2:00</td>
</tr>
<tr>
<td class="highlight-cell">ホスピタリティ</td>
<td>4:30</td>
<td>4:30</td>
<td>4:30</td>
</tr>
<tr class="highlight-row"> <!-- class変更 -->
<td>合計（時間）</td>
<td>13:40</td>
<td>16:00</td>
<td>26:30</td>
</tr>
</tbody>
</table>
</div>
<!-- ★ 修正点 1: テーブルデザイン変更 -->
<h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">研修対象者（社員のみ）</h4>
<div class="overflow-x-auto">
<table class="fashionable-table"> <!-- class変更 -->
<thead>
<tr>
<th>対象者</th>
<th>開始時期</th>
<th>受講レベル</th>
<th>事業部長タスク他</th>
</tr>
</thead>
<tbody>
<tr>
<td class="highlight-cell">現事業所責任者</td>
<td>2026年2月</td>
<td>レベル2から</td>
<td>12月に対象者集計提出</td>
</tr>
<tr>
<td class="highlight-cell">次期事業所責任者</td>
<td>2026年2月</td>
<td>レベル2から</td>
<td>12月に対象者集計提出</td>
</tr>
<tr>
<td class="highlight-cell">新卒専門職／総合職／特定技能人財</td>
<td>2026年4月</td>
<td>レベル1から</td>
<td>入社研修と重複する項目は免除</td>
</tr>
<tr>
<td class="highlight-cell">中途事業所責任者</td>
<td>2026年4月以降随時</td>
<td>レベル1から</td>
<td>着任後1年以内に修了</td>
</tr>
<tr>
<td class="highlight-cell">中途事業所スタッフ</td>
<td>2026年4月以降随時</td>
<td>レベル1から</td>
<td>レベル2以降は必須ではない</td>
</tr>
<tr>
<td class="highlight-cell">既存事業所スタッフ</td>
<td>2026年10月以降</td>
<td>レベル2から</td>
<td>希望者のみ受講</td>
</tr>
</tbody>
</table>
</div>
<h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">事業所責任者資格を付与します</h4>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div class="text-center">
<!-- ダミー画像を使用 -->
<a href="https://lh3.googleusercontent.com/d/1sBNjPOpqY1F_7IpwDnur17CigD2WgUoH" target="_blank">
<img src="https://lh3.googleusercontent.com/d/1sBNjPOpqY1F_7IpwDnur17CigD2WgUoH" alt="事業所責任者資格認定証 サンプル" class="rounded-lg shadow-lg max-w-sm mx-auto border border-[#999999]"> <!-- サイズを調整 -->
</a>
<p class="text-sm text-gray-500 mt-2">※認定証はイメージです</p>
</div>
<blockquote class="content-blockquote text-xl">
資格制度によって責任者の実力を目に見える形で証明します。
<br><br>
<strong>『できる人』をきちんと評価するための仕組み</strong>になります。
</blockquote>
</div>
</div>
<!-- 3. キャリア -->
<div>
<h2 class="subsection-title" id="point3_career">3. 責任者の経験を今後のキャリアに活きるようにします</h2>
<blockquote class="content-blockquote">
今回の責任者研修は、不十分だから受けるものではなく、さらに強くなるための研修です。
資格制度によりスキルが「見える化」され、その後のキャリアアップの武器になっていきます。
会社は皆さんが自分らしいキャリアを歩めるよう、制度を整えます。
</blockquote>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h4 class="text-lg font-bold text-leoc-green-600 mb-4">業界でもっともレベルの高い責任者に</h4>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>全国で通用するスキル</li>
<li>自信を持って任されるポジション</li>
<li>成果が評価につながる</li>
<li>自立運営で長期的な運営</li>
<li>お客様満足度の向上</li>
<li>チーム力と定着率UP</li>
</ul>
</div>
<div class="bg-gray-50 p-6 rounded-lg shadow-md border border-gray-200">
<h4 class="text-lg font-bold text-leoc-green-600 mb-4">責任者の経験を土台として自分らしいキャリアを</h4>
<ul class="list-disc list-inside text-gray-700 space-y-2">
<li>責任者はゴールではなく、スタートにすぎません。</li>
<li>事業部長、本部長、幹部候補へ</li>
<li>専門職、グループ会社など多様な道</li>
<li>事業所責任者として現場のプロとして成長するキャリアも</li>
<li>公募制度を使って間接部門や外食、スポーツなど、自分らしいキャリアも</li>
</ul>
</div>
</div>
<!-- ★ 修正点 2: スケジュールをテーブルに変更 -->
<h4 class="text-xl font-semibold text-gray-900 mt-16 mb-6 text-center">これからのスケジュール</h4>
<div class="overflow-x-auto max-w-4xl mx-auto">
<table class="fashionable-table">
<thead>
<tr>
<th>時期 (予定)</th>
<th>内容</th>
<th>対象者</th>
</tr>
</thead>
<tbody>
<tr>
<td class="highlight-cell">2026年 1月</td>
<td>テキスト配布・受講方法オンライン説明会</td>
<td>既存責任者, 次世代責任者候補</td>
</tr>
<tr>
<td class="highlight-cell">2026年 2月</td>
<td>ONODERA University 開校 (Lv. 2から)</td>
<td>既存責任者, 次世代責任者候補</td>
</tr>
<tr>
<td class="highlight-cell">2026年 4月</td>
<td>ONODERA University 入学 (Lv. 1から)</td>
<td>新卒, 中途入社者</td>
</tr>
<tr>
<td class="highlight-cell">2026年 10月</td>
<td>ONODERA University 順次ご案内 (Lv. 2から)</td>
<td>既存事業所スタッフ (希望者)</td>
</tr>
<tr>
<td class="highlight-cell">2027年 2月-3月</td>
<td>既存責任者/次世代候補 受講完了 (1年間)</td>
<td>既存責任者, 次世代責任者候補</td>
</tr>
<tr>
<td class="highlight-cell">随時</td>
<td>中途責任者: 着任後1年以内に修了</td>
<td>中途事業所責任者</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
<!-- ===== 資料一覧 (Materials) ===== -->
<section id="materials" class="py-16 sm:py-24 bg-white">
<div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-12">
<h2 class="section-title">
関連資料一覧
</h2>
<p class="mt-4 text-lg text-gray-600">
事業所責任者向けの資料をご確認ください。
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="materials-grid">
</div>
</div>
</section>
<!-- ===== よくある質問 (FAQ) ===== -->
<section id="faq" class="py-16 sm:py-24 bg-gray-50"> <div class="container mx-auto px-4 sm:px-6 lg:px-8">
<div class="max-w-3xl mx-auto">
<h2 class="section-title">
よくあるご質問 (FAQ)
</h2>
<div classs="mb-12 bg-white rounded-lg shadow-lg overflow-hidden border border-gray-200">
<iframe
id="faq-bot-iframe"
src="https://script.google.com/a/macros/onodera-group.com/s/AKfycbxZj_e5aS5x4Kfst0zA6A1ATYQK382IP-coECD1ApUB_piLkSUt5TiExrQwRNy4adA6/exec"
style="width: 100%; height: 600px; border: none;"
frameborder="0"
title="AI回答Bot"
tabindex="-1"
>
Botを読み込んでいます...
</iframe>
</div>
</div>
</div>
</section>
</main>
<!-- ===== フッター ===== -->
<footer class="bg-leoc-green-700 text-leoc-green-100">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-12 text-center">
<span class="text-2xl font-bold">
<i class="fa-solid fa-seedling mr-2"></i>新研修制度ポータル
</span>
<p class="mt-4 text-sm text-leoc-green-200">
&copy;株式会社ONODERA GROUP All Rights Reserved.
</p>
</div>
</footer>
<!-- ===== JavaScript ===== -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// --- モバイルメニューのトグル ---
const menuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
const icons = menuButton.querySelectorAll('svg');
menuButton.addEventListener('click', () => {
const isExpanded = menuButton.getAttribute('aria-expanded') === 'true';
menuButton.setAttribute('aria-expanded', !isExpanded);
mobileMenu.classList.toggle('hidden');
icons[0].classList.toggle('hidden'); // Close icon
icons[1].classList.toggle('hidden'); // Open icon
// メニュークリックで閉じる
mobileMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
menuButton.setAttribute('aria-expanded', 'false');
mobileMenu.classList.add('hidden');
icons[0].classList.remove('hidden');
icons[1].classList.add('hidden');
});
});
});
// --- カウントダウンタイマー ---
const countdownElement = document.getElementById('countdown-days');
if (countdownElement) {
const targetDate = new Date('2026-04-01T00:00:00');
const now = new Date();
const diffTime = targetDate - now;
const diffDays = Math.max(0, Math.ceil(diffTime / (1000 * 60 * 60 * 24)));
countdownElement.textContent = diffDays;
}
// ★ステップ1で切り取ったデータをここに貼り付ける★
const materials = [
{ id: 2, category: 'jigyosho', categoryName: '事業所', title: '田中社長動画', url: 'https://drive.google.com/file/d/1_k3LIAcLWA0dsU8MJKBEyce4hrA6bZlx/view?usp=drive_link', type: 'video', icon: 'fa-file-video', color: 'text-blue-500' },
{ id: 3, category: 'jigyosho', categoryName: '事業所', title: '新研修制度説明会スライド', url: 'https://docs.google.com/presentation/d/1BhUA_vK7KDT0-EU47mrS6UsZbkKkC91C/edit?usp=drive_link&ouid=105544166267604286338&rtpof=true&sd=true', type: 'slide', icon: 'fa-file-powerpoint', color: 'text-orange-500' },
// { id: 4, category: 'jigyosho', categoryName: '事業所', title: '事業所責任者向け・新研修制度説明会（台本）', url: 'https://docs.google.com/document/d/1maQRmqqdhDXU2L7g76fegQoS10LYQepQ/edit?usp=drive_link&ouid=105544166267604286338&rtpof=true&sd=true', type: 'doc', icon: 'fa-file-word', color: 'text-blue-700' },
];
// --- 資料一覧の動的生成 ---
const materialsGrid = document.getElementById('materials-grid');
const materialsData = materials; // window.materials ではなく、上で定義した materials を使う // <script>タグで定義したデータを参照
if (materialsGrid) {
materialsData.forEach(item => {
const card = document.createElement('div');
card.className = 'material-card bg-white rounded-xl shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-xl';
card.setAttribute('data-category', item.category);
// truncate クラスを削除し、タイトルが途切れないように修正(break-words追加)
card.innerHTML = `
<a href="${item.url}" target="_blank" rel="noopener noreferrer" class="block group">
<div class="p-6 flex items-start space-x-4">
<div class="flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-lg ${item.color} bg-opacity-10 ${item.color.replace('text-', 'bg-')}">
<i class="fa-solid ${item.icon} text-2xl ${item.color}"></i>
</div>
<div class="flex-1 min-w-0">
<span class="inline-block bg-gray-100 text-gray-600 px-3 py-1 rounded-full text-xs font-medium mb-2">
対象: ${item.categoryName}
</span>
<h3 class="text-lg font-semibold text-gray-900 group-hover:text-leoc-green-500 break-words">
${item.title}
</h3>
<p class="text-sm text-gray-500 mt-1">
${item.type.toUpperCase()} ドキュメント
</p>
</div>
<div class="flex-shrink-0 text-gray-400 group-hover:text-leoc-green-500 transition-colors">
<i class="fa-solid fa-arrow-up-right-from-square"></i>
</div>
</div>
</a>
`;
materialsGrid.appendChild(card);
});
}
setTimeout(() => {
materialCards.forEach(card => {
card.style.opacity = '1';
card.style.transform = 'scale(1)';
});
}, 100);
// --- Bot iframe 読み込み時の「勝手スクロール」対策 ---
let lastScrollY = window.scrollY;
// ユーザーがスクロールするたびに位置を記録
window.addEventListener('scroll', () => {
lastScrollY = window.scrollY;
});
const botIframe = document.getElementById('faq-bot-iframe');
if (botIframe) {
botIframe.addEventListener('load', () => {
// iframe読み込みで勝手にスクロールされた場合でも、直前の位置に戻す
window.scrollTo({
top: lastScrollY,
behavior: 'auto'
});
// iframe自体のフォーカスも外す
botIframe.blur();
});
}
});
</script>
<script>
window.difyChatbotConfig = {
token: 'S5HWjTHyqfqFJ9gn',
baseUrl: 'http://localhost',
inputs: {
// You can define the inputs from the Start node here
// key is the variable name
// e.g.
// name: "NAME"
},
systemVariables: {
// user_id: 'YOU CAN DEFINE USER ID HERE',
// conversation_id: 'YOU CAN DEFINE CONVERSATION ID HERE, IT MUST BE A VALID UUID',
},
userVariables: {
// avatar_url: 'YOU CAN DEFINE USER AVATAR URL HERE',
// name: 'YOU CAN DEFINE USER NAME HERE',
},
}
</script>
<script
src="http://localhost/embed.min.js"
id="S5HWjTHyqfqFJ9gn"
defer>
</script>
<style>
#dify-chatbot-bubble-button {
background-color: #1C64F2 !important;
}
#dify-chatbot-bubble-window {
width: 24rem !important;
height: 40rem !important;
}
</style>
</body>
</html>