Update index.html

index.html

@@ -203,9 +203,18 @@
                     <h2 class="mt-4 text-3xl sm:text-4xl font-bold tracking-tight text-shadow">
                         2026年4月、新研修制度スタート。
                     </h2>
-                    <p class="mt-6 text-lg sm:text-xl max-w-2xl mx-auto">
-                        新しい研修制度は、皆さんのキャリアと成長をサポートするために設計されました。このポータルで最新情報を確認してください。
-                    </p>
+                    <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">
@@ -347,16 +356,16 @@
                         責任者研修を修了すると公式な責任者資格が付与されます。
                     </blockquote>
                     
-                    <h4 class="text-xl font-semibold text-gray-900 mt-12 mb-6 text-center">育成プログラム（仮）</h4>
+                    <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">
+                        <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年度2月開校予定</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月ごろにテキスト配布と受講方法のオンライン説明会を予定しています。
@@ -576,11 +585,6 @@
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr>
-                                    <td class="highlight-cell">2025年 12月</td>
-                                    <td>事業部長タスク: 対象者集計提出</td>
-                                    <td>事業部長</td>
-                                </tr>
                                 <tr>
                                     <td class="highlight-cell">2026年 1月</td>
                                     <td>テキスト配布・受講方��オンライン説明会</td>
@@ -621,42 +625,19 @@
 
 
         <!-- ===== 資料一覧 (Materials) ===== -->
-        <section id="materials" class="py-16 sm:py-24 bg-white"> <!-- 背景色を白に変更 -->
+        <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="flex justify-center flex-wrap gap-2 sm:gap-4 mb-10" id="filter-buttons">
-                    <button data-filter="all" class="filter-btn active-filter px-4 sm:px-6 py-2 font-medium rounded-full text-white bg-leoc-green-500 shadow-lg transition duration-200">
-                        すべて
-                    </button>
-                    <button data-filter="jigyosho" class="filter-btn inactive-filter px-4 sm:px-6 py-2 font-medium rounded-full text-gray-700 bg-white shadow-sm hover:bg-gray-100 transition duration-200">
-                        事業所責任者
-                    </button>
-                    <button data-filter="bucho" class="filter-btn inactive-filter px-4 sm:px-6 py-2 font-medium rounded-full text-gray-700 bg-white shadow-sm hover:bg-gray-100 transition duration-200">
-                        事業部長
-                    </button>
-                    <button data-filter="kansetsu" class="filter-btn inactive-filter px-4 sm:px-6 py-2 font-medium rounded-full text-gray-700 bg-white shadow-sm hover:bg-gray-100 transition duration-200">
-                        間接部門 (本社)
-                    </button>
-                </div>
-                
-                <!-- コンテンツ一覧 -->
                 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="materials-grid">
-                    
-                    <!-- コンテンツデータ -->
-
-
-                    <!-- カードはJSで動的に生成されます -->
-
-                </div>
+                    </div>
             </div>
         </section>
 
@@ -679,42 +660,6 @@
                             Botを読み込んでいます...
                         </iframe>
                     </div>
-                    <h3 class="text-2xl font-semibold text-gray-800 text-center mb-8 mt-16 pt-8 border-t border-gray-200">
-                        主なご質問
-                    </h3>
-
-                    <div class="space-y-6" id="faq-container">
-                        <div class="faq-item bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200">
-                            <button class="faq-question w-full flex justify-between items-center text-left p-6">
-                                <span class="text-lg font-medium text-gray-900">Q1. 新しい研修制度はいつから始まりますか？</span>
-                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform duration-300"></i>
-                            </button>
-                            <div class="faq-answer hidden p-6 pt-0 text-gray-700">
-                                <p>2026年4月からの開始を予定しています。それに先立ち、必要な情報や資料をこのポータルサイトで随時公開していきます。（ダミー回答）</p>
-                            </div>
-                        </div>
-
-                        <div class="faq-item bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200">
-                            <button class="faq-question w-full flex justify-between items-center text-left p-6">
-                                <span class="text-lg font-medium text-gray-900">Q2. eラーニングは必須ですか？</span>
-                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform duration-300"></i>
-                            </button>
-                            <div class="faq-answer hidden p-6 pt-0 text-gray-700">
-                                <p>対象となる研修は原則必須となります。事業所運営と並行しながら受講できるよう、スマートフォンやタブレットからの学習も可能です。（ダミー回答）</p>
-                            </div>
-                        </div>
-
-                        <div class="faq-item bg-white rounded-lg overflow-hidden shadow-sm border border-gray-200">
-                            <button class="faq-question w-full flex justify-between items-center text-left p-6">
-                                <span class="text-lg font-medium text-gray-900">Q3. 研修の評価はどのようになりますか？</span>
-                                <i class="fa-solid fa-chevron-down text-gray-500 transition-transform duration-300"></i>
-                            </button>
-                            <div class="faq-answer hidden p-6 pt-0 text-gray-700">
-                                <p>eラーニングの受講状況や理解度テスト、および研修後の実践状況（OJT）を上長が評価し、人事評価の一部として組み込まれる予定です。詳細は追ってご案内します。（ダミー回答）</p>
-                            </div>
-                        </div>
-                        
-                    </div>
                 </div>
             </div>
         </section>
@@ -771,15 +716,9 @@
 
             // ★ステップ1で切り取ったデータをここに貼り付ける★
             const materials = [
-                { id: 1, category: 'all', categoryName: '全員', title: '20251010プロジェクトQ＆A集', url: 'https://drive.google.com/file/d/1enTzcWaidEsOvIg_DwHZEKc4JfmitlJ-/view?usp=drive_link', type: 'pdf', icon: 'fa-file-pdf', color: 'text-red-500' },
-                { 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' },
-                { id: 5, category: 'kansetsu', categoryName: '間接部門', title: 'FAQ', url: 'https://drive.google.com/file/d/1LxSZ7NOu2_lpHAEXhyCGTJRNvfUKItA0/view?usp=drive_link', type: 'pdf', icon: 'fa-file-pdf', color: 'text-red-500' },
-                { id: 6, category: 'kansetsu', categoryName: '間接部門', title: '【資料】事業所責任者育成の取り組み', url: 'https://drive.google.com/file/d/1X8c3u9FJgMDhnz0NEAJwmGGYKh7dEQF6/view?usp=drive_link', type: 'pdf', icon: 'fa-file-pdf', color: 'text-red-500' },
-                { id: 7, category: 'kansetsu', categoryName: '間接部門', title: '【動画】事業所責任者育成の取り組み', url: 'https://drive.google.com/file/d/1NbCCakTU13RxyPqqyeRn8WLtkzCX9-uX/view?usp=drive_link', type: 'video', icon: 'fa-file-video', color: 'text-blue-500' },
-                { id: 8, category: 'bucho', categoryName: '事業部長', title: '★【最新】事業部長研修_人事制度改革チーム', url: 'https://drive.google.com/file/d/1Zf05Pqws9qD1NfsvxB0ydBurS0abdDwe/view?usp=drive_link', type: 'file', icon: 'fa-file-zipper', color: 'text-yellow-600' },
-                { id: 9, category: 'bucho', categoryName: '事業部長', title: '20251016【事業本部長展開用】プロジェクトQ＆A集', url: 'https://drive.google.com/file/d/1jDOrURJlqZ7sNNPqGUWfLaEkl9WabSaP/view?usp=drive_link', type: 'pdf', icon: 'fa-file-pdf', color: 'text-red-500' },
+                { 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' },
             ];
 
             // --- 資料一覧の動的生成 ---
@@ -792,26 +731,24 @@
                     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 truncate group-hover:text-leoc-green-500">
+                                    <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>
@@ -822,43 +759,7 @@
                 });
             }
 
-            // --- 資料フィルター機能 ---
-            const filterButtonsContainer = document.getElementById('filter-buttons');
-            const filterButtons = filterButtonsContainer ? filterButtonsContainer.querySelectorAll('.filter-btn') : [];
-            const materialCards = materialsGrid ? materialsGrid.querySelectorAll('.material-card') : [];
             
-            const activeStyle = ['bg-leoc-green-500', 'text-white', 'shadow-lg'];
-            const inactiveStyle = ['bg-white', 'text-gray-700', 'shadow-sm', 'hover:bg-gray-100'];
-            
-            filterButtons.forEach(button => {
-                button.addEventListener('click', function() {
-                    const filterValue = this.getAttribute('data-filter');
-
-                    filterButtons.forEach(btn => {
-                        btn.classList.remove(...activeStyle);
-                        btn.classList.add(...inactiveStyle);
-                    });
-                    this.classList.add(...activeStyle);
-                    this.classList.remove(...inactiveStyle);
-
-                    materialCards.forEach(card => {
-                        const cardCategory = card.getAttribute('data-category');
-                        if (filterValue === 'all' || cardCategory === filterValue) {
-                            card.style.display = 'block';
-                            setTimeout(() => {
-                                card.style.opacity = '1';
-                                card.style.transform = 'scale(1)';
-                            }, 50);
-                        } else {
-                            card.style.opacity = '0';
-                            card.style.transform = 'scale(0.95)';
-                            setTimeout(() => {
-                                card.style.display = 'none';
-                            }, 300);
-                        }
-                    });
-                });
-            });
             
             setTimeout(() => {
                 materialCards.forEach(card => {
@@ -888,30 +789,6 @@
                     botIframe.blur();
                 });
             }
-
-
-            // --- FAQ アコーディオン ---
-            const faqContainer = document.getElementById('faq-container');
-            if (faqContainer) {
-                faqContainer.addEventListener('click', function(e) {
-                    const questionButton = e.target.closest('.faq-question');
-                    if (!questionButton) return;
-                    
-                    const faqItem = questionButton.closest('.faq-item');
-                    const answer = faqItem.querySelector('.faq-answer');
-                    const icon = questionButton.querySelector('i');
-
-                    const isOpen = !answer.classList.contains('hidden');
-                    
-                    if (isOpen) {
-                        answer.classList.add('hidden');
-                        icon.classList.remove('rotate-180');
-                    } else {
-                        answer.classList.remove('hidden');
-                        icon.classList.add('rotate-180');
-                    }
-                });
-            }
         });
     </script>
 </body>