/* 【文字色と影の設定エリア】 
   ここを変更することで、それぞれの色や影を個別に調整できます。
*/
:root {
    /* 影の設定方法: 
       横のズレ 縦のズレ ぼかしの大きさ 色(rgba)
       例: 0 2px 8px rgba(0, 0, 0, 0.6); 
       影を消したい場合は none と書いてください。
    */

    /* ▼▼▼ 1. カバーページ（ランディング）用の設定 ▼▼▼ */
    
    /* (A) ロゴ本体「BANI*Lab」 */
    --landing-text-logo-main: #4a4a4a;
    --landing-shadow-logo-main: 0 2px 8px rgba(255, 255, 255, 0.6);

    /* (B) ロゴ下「バーニーの...」 */
    --landing-text-logo-sub: #6b6b6b;
    --landing-shadow-logo-sub: 0 2px 8px rgba(255, 255, 255, 0.6);

    /* (C) キャッチコピー「暮らしから...」 */
    --landing-text-catch: #4a4a4a;
    --landing-shadow-catch: 0 2px 8px rgba(255, 255, 255, 0.6);


    /* ▼▼▼ 2. 左側固定パネル（メイン画面）用の設定 ▼▼▼ */

    /* (A) ロゴ本体「BANI*Lab」 */
    --panel-text-logo-main: #4a4a4a;
    --panel-shadow-logo-main: 0 2px 8px rgba(255, 255, 255, 0.6);

    /* (B) ロゴ下「バーニーの...」 */
    --panel-text-logo-sub: #4a4a4a;
    --panel-shadow-logo-sub: 0 2px 8px rgba(255, 255, 255, 0.6);

    /* (C) キャッチコピー「暮らしから...」 */
    --panel-text-catch: #ffffff;
    --panel-shadow-catch: 0 2px 8px rgba(0, 0, 0, 0.6);
}

/* --- クラスへの適用設定 --- */

/* 1. カバーページ用 */
.text-landing-logo-main { 
    color: var(--landing-text-logo-main);
    text-shadow: var(--landing-shadow-logo-main);
}
.text-landing-logo-sub { 
    color: var(--landing-text-logo-sub);
    text-shadow: var(--landing-shadow-logo-sub);
}
.text-landing-catch { 
    color: var(--landing-text-catch);
    text-shadow: var(--landing-shadow-catch);
}

/* 2. 左側固定パネル用 */
.text-panel-logo-main { 
    color: var(--panel-text-logo-main);
    text-shadow: var(--panel-shadow-logo-main);
}
.text-panel-logo-sub { 
    color: var(--panel-text-logo-sub);
    text-shadow: var(--panel-shadow-logo-sub);
}
.text-panel-catch { 
    color: var(--panel-text-catch);
    text-shadow: var(--panel-shadow-catch);
}


/* 【スクロールバーの非表示】 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 【スムーススクロール】 */
html {
    scroll-behavior: smooth;
}

/* フェードインアニメーション */
.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* メニュー開閉時のアニメーション */
.menu-enter {
    animation: slideInRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

/* 相談ドロワーのアニメーション */
.drawer-enter {
    animation: drawerSlideIn 1.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.drawer-exit {
    animation: drawerSlideOut 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes drawerSlideIn {
    from { transform: translateX(100%); opacity: 0.5; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes drawerSlideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

/* バックドロップのフェード */
.backdrop-enter {
    animation: fadeInBackdrop 1.6s ease-out forwards;
}
.backdrop-exit {
    animation: fadeOutBackdrop 0.5s ease-in forwards;
}
@keyframes fadeInBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeOutBackdrop {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* モーダル用スライドアップ */
.modal-enter {
    animation: slideUpModal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.modal-exit {
    animation: slideDownModal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes slideUpModal {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes slideDownModal {
    from { transform: translateY(0); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

/* PC表示時の縦書きスタイル */
@media (min-width: 1024px) {
    .vertical-rl-pc {
        writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
        text-orientation: upright;
        letter-spacing: 0.2em;
    }
}

/* トップページのフェードアウト */
.landing-exit {
    animation: fadeOutLanding 1.2s cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
@keyframes fadeOutLanding {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.05); pointer-events: none; }
}

/* メインコンテンツのフェードイン */
.content-enter {
    animation: fadeInContent 1.5s ease-in-out forwards;
}
@keyframes fadeInContent {
    from { opacity: 0; }
    to { opacity: 1; }
}