@charset "UTF-8";

/* ==========================================
   1. フォントの読み込み (Google Fonts)
========================================== */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Nunito:wght@400;600;700&display=swap');

/* ==========================================
   2. サイト全体（body）のベース設定
========================================== */
body {
    background-color: #f7f3ee;
    color: #2c2016;
    font-family: 'Nunito', sans-serif;
}

/* ==========================================
   3. アクセントフォント（Lora）用クラス
========================================== */
.font-lora {
    font-family: 'Lora', serif;
}

/* ==========================================
   4. UI要素の表示切り替え用クラス
   （タブ、ステップ、セクションなどをJSで切り替えるためのもの）
========================================== */
.tab-content,
.step-content,
.step-container,
.section-content {
    display: none;
}

.tab-content.active,
.step-content.active,
.step-container.active,
.section-content.active {
    display: block;
}

/* ==========================================
   5. スクロールバー全体を非表示にする設定
   （Figma出力のスッキリしたデザインを再現）
========================================== */
* {
    scrollbar-width: none; /* Firefox用 */
}
*::-webkit-scrollbar {
    display: none; /* Chrome, Safari用 */
}

/* ==========================================
   6. 特定のエリアのみスクロールバーを表示する設定
   （メッセージ一覧やチャットエリアなどに使用）
========================================== */
.custom-scrollbar {
    scrollbar-width: thin; /* Firefox用 */
    scrollbar-color: #ddd0c0 transparent; /* Firefox用 */
}
.custom-scrollbar::-webkit-scrollbar {
    display: block;
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #ddd0c0;
    border-radius: 10px;
}