【最新版】店長マニュアル【目次】 – 課題解決のための羅針盤
@import url(‘https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+JP:wght@100..900&display=swap’);
body {
font-family: ‘Noto Sans JP’, ‘Inter’, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #f7fafc; /* Tailwindのgray-100に相当する背景色 */
}
/* カスタムスタイル */
.manual-container {
max-width: 800px; /* 記事コンテンツの最大幅を定義 */
}
/* アコーディオンコンテンツの開閉アニメーション */
.accordion-content {
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
max-height: 0;
overflow: hidden;
padding: 0 1.25rem; /* px-5 に相当 */
background-color: white;
}
.accordion-content.open {
max-height: 2000px; /* 十分な高さを確保 */
padding: 1.25rem; /* 開いた時にpaddingを適用 */
}
/* アコーディオンヘッダーのスタイル（画像のデザインに合わせたティール色） */
.main-category-header {
background-color: #008080; /* 深いティール色 */
transition: background-color 0.2s ease;
cursor: pointer;
}
.main-category-header:hover {
background-color: #006b6b; /* ホバーで少し暗く */
}
.main-category-header:active {
background-color: #005555; /* クリック時のフィードバック */
}
.main-category-header:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.5); /* フォーカスリング */
}
/* 検索ハイライトスタイル */
.highlight {
background-color: #fce899; /* 検索結果の黄色ハイライト */
padding: 1px 3px;
border-radius: 3px;
}
/* リストアイテムのボーダー */
.accordion-content ul li {
border-bottom: 1px solid #f3f4f6; /* Tailwind gray-100に近い薄いボーダー */
}
.accordion-content ul li:last-child {
border-bottom: none;
}
/* モバイルでの見やすさ調整 */
.topic-link-wrapper {
padding-top: 0.65rem; /* py-3より少しだけ小さく */
padding-bottom: 0.65rem;
}
「売上が上がらない」「スタッフが定着しない」…。
貴方が抱えるその問題の答えは、必ずこのマニュアルの中にあります。
キーワードで素早く「検索」するか、下記の「目次（Phase1〜5）」をタップして、今一番解決したい課題を探してください。
検索結果が見つかりませんでした。別のキーワードでお試しください。
/**
* アコーディオンの開閉を制御する
* @param {HTMLElement} header – クリックされたアコーディオンヘッダー要素
*/
function toggleAccordion(header) {
const content = header.nextElementSibling;
const icon = header.querySelector(‘svg’);
const isExpanded = header.getAttribute(‘aria-expanded’) === ‘true’;
// すべてのアコーディオンを一旦閉じる
document.querySelectorAll(‘.accordion-header’).forEach(h => {
const c = h.nextElementSibling;
const i = h.querySelector(‘svg’);
// 自分自身、または既に閉じているものはスキップ
if (h === header || !c.classList.contains(‘open’)) return;
// 閉じる処理
c.classList.remove(‘open’);
i.classList.remove(‘rotate-180’);
h.setAttribute(‘aria-expanded’, ‘false’);
});
// クリックされたアコーディオンを開閉する
if (isExpanded) {
// 閉じる処理
content.classList.remove(‘open’);
icon.classList.remove(‘rotate-180’);
header.setAttribute(‘aria-expanded’, ‘false’);
} else {
// 開く処理
content.classList.add(‘open’);
icon.classList.add(‘rotate-180’);
header.setAttribute(‘aria-expanded’, ‘true’);
}
}
/**
* 検索バーに入力されたテキストでトピックをフィルタリングする
* @param {string} searchTerm – 検索キーワード
*/
function filterTopics(searchTerm) {
const query = searchTerm.toLowerCase().trim();
const topicItems = document.querySelectorAll(‘.topic-item’);
const manualContent = document.getElementById(‘manualContent’);
const noResults = document.getElementById(‘noResults’);
let hasResults = false;
// 1. すべてのハイライトをクリア
document.querySelectorAll(‘.highlight’).forEach(span => {
span.outerHTML = span.innerHTML; // span要素を中身に置き換える
});
// 2. 検索キーワードがない場合の処理
if (query === “”) {
topicItems.forEach(item => {
item.style.display = ‘block’;
});
// すべてのカテゴリを閉じ、表示
document.querySelectorAll(‘.topic-category’).forEach(category => {
category.style.display = ‘block’;
const header = category.querySelector(‘.accordion-header’);
const content = category.querySelector(‘.accordion-content’);
const icon = header.querySelector(‘svg’);
content.classList.remove(‘open’);
icon.classList.remove(‘rotate-180’);
header.setAttribute(‘aria-expanded’, ‘false’);
});
noResults.classList.add(‘hidden’);
manualContent.classList.remove(‘hidden’);
return;
}
// 3. 検索キーワードがある場合の処理
document.querySelectorAll(‘.topic-category’).forEach(category => {
const header = category.querySelector(‘.accordion-header’);
const content = category.querySelector(‘.accordion-content’);
const icon = header.querySelector(‘svg’);
let categoryHasResult = false;
// カテゴリ内のトピックをチェック
Array.from(category.querySelectorAll(‘.topic-item’)).forEach(item => {
const linkElement = item.querySelector(‘a’) || item.querySelector(‘span’);
const title = linkElement ? linkElement.textContent : ”;
if (title.toLowerCase().includes(query)) {
// 検索に一致する場合
item.style.display = ‘block’;
categoryHasResult = true;
hasResults = true;
// 検索キーワードをハイライト
const regex = new RegExp(query, ‘gi’);
const highlightedTitle = title.replace(regex, match => `
${match}`);
linkElement.innerHTML = highlightedTitle;
} else {
// 検索に一致しない場合
item.style.display = ‘none’;
}
});
// カテゴリの表示/開閉を決定
if (categoryHasResult) {
category.style.display = ‘block’;
content.classList.add(‘open’);
icon.classList.add(‘rotate-180’);
header.setAttribute(‘aria-expanded’, ‘true’);
} else {
category.style.display = ‘none’;
content.classList.remove(‘open’);
icon.classList.remove(‘rotate-180’);
header.setAttribute(‘aria-expanded’, ‘false’);
}
});
// 4. 検索結果なしメッセージの表示/非表示
if (!hasResults) {
noResults.classList.remove(‘hidden’);
manualContent.classList.add(‘hidden’);
} else {
noResults.classList.add(‘hidden’);
manualContent.classList.remove(‘hidden’);
}
}
※専門家がお話を伺い、課題解決をサポートします。
