@charset "utf-8";

/*
    【本ファイルの目次】

    bootstrap 5.1.3 : メディアクエリの確認
        https://getbootstrap.com/docs/5.3/getting-started/introduction/

    bootstrap 上書き : 位置・大きさを変えないもの / カラーなど
        フォントファミリー

    bootstrap 上書き : 位置・大きさを変えるもの

    bootstrap 上書き : コンポーネントを調整する
        固定ヘッダーバー
        ハンバーガーボタンを表示
        ボタン : デフォルト
        ボタン : グリーン

    SVG : ロゴ / アイコン

    PC / スマホの基本レイアウト
        スマホ表示
        PC表示

    オフキャンバス
        オフキャンバス
        プロフィールエリア
        アコーディオン
        PC表示

    ACTI コンポーネント : シルバーボックス

    ●●●●●●●●●●● (未定義)

    ブロック / テキスト

*/

/*******************************************************************************
    CSS変数
*******************************************************************************/
:root {

    /* PC : 左カラム : 幅 */
    --acti-pc-left-column-width: 320px;

    /* PC : 中カラム : 幅 / ブレイクポイントの 576px 以下なら自由 */
    --acti-pc-center-column-width: 480px;

    /* PC : 右カラム : 幅 */
    --acti-pc-right-column-width: 300px;

    /* メインカラー */
    --acti-color-main-text: #fff;
    --acti-color-main-back: #2CBA57;

    /* メインカラー hover */
    --acti-color-main-hover-text: #fff;
    --acti-color-main-hover-back: #28A74E;

    /* メインカラー selected */
    --acti-color-main-selected-text: #fff;
    --acti-color-main-selected-back: #239546;

    /* メインカラー 反転 ( i = inversion ) */
    --acti-color-main-i-text: #2CBA57;
    --acti-color-main-i-back: #fff;

    /* メインカラー 反転 hover */
    --acti-color-main-i-hover-text: #28A74E;
    --acti-color-main-i-hover-back: #fff;

    /* メインカラー 反転 selected */
    --acti-color-main-i-selected-text: #239546;
    --acti-color-main-i-selected-back: #fff;

    /* サブカラー */
    --acti-color-sub-text: #fff;
    --acti-color-sub-back: #f17027;

    /* サブカラー hover */
    --acti-color-sub-hover-text: #fff;
    --acti-color-sub-hover-back: #d96523;

    /* サブカラー selected */
    --acti-color-sub-selected-text: #fff;
    --acti-color-sub-selected-back: #c15a1f;

}

html.theme-dark {
    --swiper-pagination-bullet-inactive-color: #aaa;
}


/*******************************************************************************
    bootstrap 5.3.2 / メディアクエリの確認
*******************************************************************************/

/* sm スマートフォン */
@media (max-width: 575.98px) { }

/* md タブレット */
@media (min-width: 576px) { }
@media (max-width: 767.98px) { }
@media (min-width: 576px) and (max-width: 767.98px) { }

/* lg PC 狭め */
@media (min-width: 768px) { }
@media (max-width: 991.98px) { }
@media (min-width: 768px) and (max-width: 991.98px) { }

/* xl PC 標準 */
@media (min-width: 992px) { }
@media (max-width: 1199.98px) { }
@media (min-width: 992px) and (max-width: 1199.98px) { }

/* xxl PC 広め */
@media (min-width: 1200px) { }
@media (max-width: 1399.98px) { }
@media (min-width: 1200px) and (max-width: 1399.98px) { }

/* xxl PC 全開 */
@media (min-width: 1400px) { }


/*******************************************************************************
    bootstrap 上書き : 位置・大きさを変えないもの / カラーなど
*******************************************************************************/

/* -------------------------------------------
    フォントファミリー
------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&display=swap');
@font-face {
    font-family: 'BabesNeue';
    src: url('font/BebasNeue-Regular.woff') format('woff'), url('font/BebasNeue-Regular.ttf') format('truetype');
}

html, body {
    font-family: "Noto Sans JP" , sans-serif;
    font-style: normal;
    font-weight: unset;
    letter-spacing: 0.06em;
}

/*
svg {
    fill: #aaa;
}
*/


/* -------------------------------------------
------------------------------------------- */
/*
::placeholder {
    color: #BABABA !important;
}
*/

/* -------------------------------------------
    背景色
    https://getbootstrap.com/docs/5.3/utilities/background/
------------------------------------------- */

.bg-custom-silver {
    background: #F1F1F1;
    color: #555;
}


/*******************************************************************************
    bootstrap 上書き : 位置・大きさを変えるもの
*******************************************************************************/

p:last-child {
    margin-bottom: 0;
}


/*******************************************************************************
    bootstrap 上書き : コンポーネントを調整する
*******************************************************************************/


/* -------------------------------------------
    固定ヘッダーバー
------------------------------------------- */
body.has-fixed-header {
    padding-top: 52px;
}

body.no-fixed-header #header-main {
    display: none;
}

@media (max-width: 991px) {
    #header-main .navbar-dark .navbar-nav .nav-link {
        color: rgba(0,0,0,.55);
    }
}

/* -------------------------------------------
    ハンバーガーボタンを表示
------------------------------------------- */
.navbar-expand .navbar-toggler {
    display: block;
}
.navbar-expand .navbar-toggler {
    border-width: 0;
}



/*******************************************************************************
    汎用的な
*******************************************************************************/

/* スティッキーフッター */
html ,
body {
    height: 100%;
}

#footer {
    position: sticky;
    top: 100vh;
    top: 100dvh;
}


/* カミングスーン */
.coming-soon {
    text-decoration: line-through !important;
}
.coming-soon ,
.coming-soon a {
    color: #faa !important;
}


/*******************************************************************************
    アイコン
*******************************************************************************/

.ac-icon {
    position: relative;
    display: inline-block;
    width: 512px;
    height: 512px;
    fill: #fff;
    background-color: #00C300;
    text-align: left;
}
.ac-icon svg {
    position: relative;
    display: inline-block;
    vertical-align: top;
}

/* 四角 */
.ac-icon-square {
    border-radius: 10%;
}
.ac-icon-square svg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 円 */
.ac-icon-circle {
    border-radius: 50%;
}
.ac-icon-circle svg {
    top: 10%;
    left: 10%;
    width: 80% !important;
    height: 80% !important;
}

/* ライトモード */
.ac-icon-light-mode {
    fill: #fff;
    background-color: #000;
}

/* ダークモード */
.ac-icon-ddark-mode {
    fill: #000;
    background-color: #fff;
}

/* 128px */
.ac-icon-128 ,
.ac-icon-128 svg {
    width: 128px;
    height: 128px;
}

/*******************************************************************************
    ボタン
*******************************************************************************/

#btn-history-back {
    position: fixed;
    bottom: 35px;
    left: 20px;
    z-index: 1;
}

@media (min-width: 576px) {
    #btn-history-back {
        left: calc(50% - 180px);
    }
}

#btn-history-back a {
    display: inline-block;
}

#btn-history-back a:hover {
    opacity: .5;
}


.btn-shop {
    background-color: #2CBA56;
    color: #fff;
    padding: 10px 20px;
    min-width: 240px;
    svg {
        fill: #fff;
        margin-right: 5px;
    }
}

.btn-shop:hover {
    background-color: #00c3ad;
}

/*******************************************************************************
    SVG : ロゴ / アイコン
*******************************************************************************/

/* ロゴ */
.acti-logo-001-main-125x36 {
    fill: transparent;
    width: 125px;
    height: 36px;
}

.theme-dark {
    .acti-logo-001-main-125x36 {
        fill: transparent;
    }
}

/* 固定ヘッダー */
#header-main {
    .navbar-brand {
        .acti-logo-001-main-125x36 {
            width: 86px;
            height: 24px;
        }
    }
}

/*******************************************************************************
    基本スタイル
*******************************************************************************/

.h2-3 {
    color: #222222;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1;
    display: flex;
    align-items: center;
}

.h2-3 > svg:first-child {
    margin-right: 5px;
}

.a-1 {
    color: #2CBA57;
    text-decoration: none;
}


/*******************************************************************************
    
*******************************************************************************/



/*******************************************************************************
    オフキャンバス
*******************************************************************************/

/* -------------------------------------------
    オフキャンバス
------------------------------------------- */
#main-menu-offcanvas {

    background: #303030;
    color: #e1e1e1;

    .offcanvas-header {
        position: absolute;
        top: 0;
        width: 98%;

        /* 閉じるボタンの色を変える */
        .btn-close {
            filter: invert(1) grayscale(100%) brightness(200%);
        }

    }

    .offcanvas-body {

        /* padding: 0; */

        .menu-header {
            display: block;
            margin: 0;
            padding: 0;

            a {
                color: #fff;
                text-decoration: none;
            }

            .menu-header-icon {
                text-align: center;
                margin: 0;
            }

            .menu-header-name {
                position: relative;
                text-align: center;
                margin: 10px 0 0 0;
            }

            /* ログインしていないとき */
            .menu-header-name.guest-content {
                .btn {
                    color: #fff;
                    letter-spacing: 0;
                }
            }

            /* ログインしているとき */
            .menu-header-name.member-content {
                .me-nickname {
                    color: #fff;
                }
                .acti-id {
                    display: block;
                    font-size: 12px;
                    margin-top: 5px;
                    letter-spacing: 0.2em;
                    color: #777;

                    .me-acti-code {
                    }
                }
            }
        }

        .nav-menu {
            .accordion {
                .accordion-header {
                    padding: 10px 0;

                    h2 {
                        svg {
                            fill: #6D6D74;
                            width: 23px;
                            height: 23px;
                        }
                        .new-window {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }
                .accordion-content {
                    .menu-list {
                        margin-bottom: 0;

                        li {

                            a:hover {
                                text-decoration: underline !important;
                            }

                            a.btn:hover {
                                text-decoration: none !important;
                            }
                        }
                    }
                }
            }

            .accordion.disable {
                color: #494949;

                .accordion-header {
                    cursor: default;
                }
            }
        }
    }
}




/* -------------------------------------------
    プロフィールエリア
------------------------------------------- */

#main-menu-offcanvas {


    /* -------------------------------------------
        アコーディオン
    ------------------------------------------- */
    .nav-menu {
        margin-top: 20px;

        .accordion {

            .accordion-header {
            }

            .accordion-content {
            }
        }


        .accordion-container {
          width: 100%;
        }
    
        .accordion-item {
          position: relative;
          overflow: hidden;
        }
    
        .accordion-toggle {
          display: none;
        }
    
        .accordion-header {
          cursor: pointer;
          display: block;
          padding: 1rem;
          border-bottom: 1px solid rgb(255 255 255 / 12%);
        }
    
        .accordion-content {
          border-top: none;
          max-height: 0;
          overflow: hidden;
          /*
          transition: max-height 0.3s, padding 0.3s;
          */
          padding: 0 1rem;
          overflow-y: hidden;
        }
    
        .accordion-toggle:checked ~ .accordion-content {
          max-height: 100vh;
          padding: 1rem;
        }
    
        .accordion-content .menu-list {
            padding-left: 30px;
            margin-top: 10px;
        }
    
        .accordion-content .menu-list li {
            list-style: none;
        }
    
        .accordion-content .menu-list li a {
            text-decoration: none;
            color: #ffffffbd;
            line-height: 2.5;
            font-size: .8rem;
        }
    
        .accordion-content .menu-list li a:before {
            content: "";
            display: inline-block;
            width: 4px;
            height: 4px;
            background: #fff;
            border-radius: 50%;
            vertical-align: middle;
            margin-right: 10px;
            position: relative;
            top: -1px;
        }
    
        /*
        .active .accordion-content .menu-list li:before {
            content: "";
            width: 1px;
            height: 32px;
            display: block;
            background: #ffffff4f;
            position: absolute;
            left: 42px;
            border-collapse: separate;
        }
        */
    
        .accordion .accordion-header h2:after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 0 5px 8.7px;
            border-color: transparent transparent transparent #bfbfbf;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 6px;
        }
    
        .accordion.active .accordion-header h2:after {
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 8.7px 5px 0px 5px;
            border-color: #bfbfbf transparent transparent transparent;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 6px;
        }
    
        .accordion-header h2 {
            position: relative;
            font-size: 14px;
            margin-bottom: 0;
        }
    
        .accordion-header h2 svg {
            margin-right: 10px;
            position: relative;
            top: -2px;
        }
    
        .accordion-header h2 a {
            text-decoration: none;
            color: #fff;
        }
    
        .accordion {
            margin: 0 auto 5px;
            width: 90%;
        }
    
        .accordion.no-link .accordion-header h2:after {
            display: none;
        }
    
        .accordion h2 svg {
            width: 20px;
            height: 20px;
        }

        .accordion h2 svg.new-window {
            width: 12px;
            height: 12px;
            margin-left: 5px;
        }

        .accordion.disable {

            .accordion-header {
                h2 {
                    color: #777 !important;
                    svg {
                        fill: #555 !important;
                    }
                }
            }

            .accordion-content {
            }
        }
    }

    .btn-shop-wrap {
        margin-top: 15px;
    }

}

/* -------------------------------------------
    PC表示
------------------------------------------- */
@media (min-width: 576px) {

    /* ヘッダーのハンバーガーを非表示 */
    #header-main .navbar-expand .navbar-toggler[data-bs-target="#main-menu-offcanvas"] {
        display: none;
    }

    /* 閉じるボタンを非表示 */
    #main-menu-offcanvas .offcanvas-header {
        display: none;
    }

    #main-menu-offcanvas {

        .offcanvas-body {

            .nav-menu {
                .accordion {
                    width: 100%;
                    .accordion-header {
                        h2 {
                            color: #fff;
                            svg {
                                fill: #fff;
                            }
                        }
                    }

                    .accordion-content {
                        .menu-list {
                            padding-left: 0;
                            li:before {
                                display: none;
                            }
                        }
                    }
                }

                a:hover {
                    color: #ff0;
                }
            }
        }
    }
}

/*******************************************************************************
    PC / スマホの基本レイアウト
*******************************************************************************/

/* -------------------------------------------
    スマホ表示
------------------------------------------- */
@media (max-width: 575px) {
    #pc-area {
        display: none;
    }
}

/* -------------------------------------------
    タブレット表示
------------------------------------------- */
@media (min-width: 576px) {

    /* bootstrap の sm 以上を無効化 */
    .col-sm-3 ,
    .col-sm-4 ,
    .col-sm-9 {
        flex: none;
        width: 100%;
    }

    .offset-sm-2 {
        margin-left: 0;
    }

    body {
        background-image: url(/assets/images/background-0001.webp);
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        background-color: #ddd;
    }

    #mobile-area {
        position: relative;
        box-sizing: border-box;
        max-width: var( --acti-pc-center-column-width );
        min-height: calc(100vh - 45px);
        background-color: #fff;
        margin: 0 auto;
        box-shadow: 0 10px 20px #555;
    }

    #header-main > .navbar {
        width: var( --acti-pc-center-column-width );
        left: auto;
        right: auto;
    }

    /* -------------------------------------------
        左右エリアの位置調整
    ------------------------------------------- */

    /* 左エリア */
    #main-menu-offcanvas {
        visibility: visible;
        transform: none;
        right: auto;
        padding-top: 30px;
        left: 0;
    }

    /* 右側エリア */
    #pc-area {
        position: fixed;
        top: 0;
        left: 50%;
        height: 100dvh;

        /* メインの幅の半分 + 余白 */
        margin-left: calc( ( var( --acti-pc-center-column-width ) / 2 ) + 30px  );
    }

    /* 左右エリアの幅 */
    #main-menu-offcanvas ,
    #pc-area {
        /* 画面の半分 - メインの幅の半分 - 余白 */
        width: calc( 50dvw - ( var( --acti-pc-center-column-width ) / 2 ) - 30px );
    }

    /* -------------------------------------------
        左エリアの装飾
    ------------------------------------------- */
    #main-menu-offcanvas {
        background-color: transparent;
        border-width: 0;
    }

    #main-menu-offcanvas ,
    #main-menu-offcanvas .menu-header a ,
    #main-menu-offcanvas .menu-header-name .acti-id ,
    #main-menu-offcanvas .accordion-content .menu-list li a ,
    #main-menu-offcanvas .accordion-header h2 a {
        color: #333;
    }

    #main-menu-offcanvas .menu-header-name:after {
        border-color: transparent transparent transparent #aaa;
    }

    #main-menu-offcanvas .accordion.active .accordion-header h2:after {
        border-color: #aaa transparent transparent transparent;
    }

    #main-menu-offcanvas .active .accordion-content .menu-list li:before {
        background: #aaa;
    }

    /* -------------------------------------------
        右エリアの装飾
    ------------------------------------------- */
    #pc-area {
        background-color: transparent;
    }
}

/* PC表示 : 全体の幅次第でブレイクポイントを調整　( 左 + 余白 + 中 + 余白 + 右 ) */
@media (min-width: 1160px) {

    /* 左エリア */
    #main-menu-offcanvas {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 30px 30px;
        z-index: 1;

    }
    
    #main-menu-offcanvas:after {
        content: '';
        position: fixed;
        top: 0;
        background-color: #333;
        opacity: .7;
        z-index: -1;
    }

    #main-menu-offcanvas ,
    #main-menu-offcanvas:after {
        box-sizing: border-box;
        left: 50%;
        width: var( --acti-pc-left-column-width );
        /* 左エリアの幅 + メインの幅の半分 + 余白 */
        margin-left: calc( ( var( --acti-pc-left-column-width ) + ( var( --acti-pc-center-column-width ) / 2 ) + 30px ) * -1 );
        height: 100dvh;
    }

    /* 右側エリア */
    #pc-area {
        width: var( --acti-pc-right-column-width );
    }
}


#header-main > .navbar {
    box-shadow: 0 0 10px #555;
}

/*******************************************************************************
    ブロック / テキスト
*******************************************************************************/

/* -----------------------------------------
    ブロック / テキスト / 共通
----------------------------------------- */
.fs-xs {
    font-size: .6em;
}

.fs-s {
    font-size: .8em;
}

.fs-m {
    font-size: 1em;
}

.fs-l {
    font-size: 1.2em;
}

.fs-xl {
    font-size: 1.4em;
}

.left {
    text-align: left;
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}


/* -----------------------------------------
    ブロック / テキスト / タイトル / 1111

    廃止予定　.acti-com-XXXXXX で作り直す

----------------------------------------- */
.block-title-1111 {
    /*ここに要素デザインの内容をがっつり書く*/
}

/* ↓　※個別の上書きが必要な場合　↓ */

.block-title-1111.fs-xs {
    font-size: 10px;
}

.block-title-1111.fs-s {
    font-size: 14px;
}

.block-title-1111.fs-l {
    font-size: 18px;
}

.block-title-1111.fs-xl {
    font-size: 24px;
}

.block-title-1111.left {
    text-align: left;
}

.block-title-1111.center {
    text-align: center;
}

.block-title-1111.right {
}


/* -----------------------------------------
    ブロック / テキスト / タイトル / 2222

    廃止予定　.acti-com-XXXXXX で作り直す

----------------------------------------- */
.block-title-2222 {
    /* ここに要素デザインの内容をがっつり書く */
}


/* ↓　※個別の上書きが必要な場合　↓ */

.block-title-2222.fs-s {
    font-size: 12px;
}

.block-title-2222.fs-l {
    font-size: 15px;
}

.block-title-2222.fs-xl {
    font-size: 24px;
}


/* -----------------------------------------
    ブロック / テキスト / タイトル / 3333

    廃止予定　.acti-com-XXXXXX で作り直す

----------------------------------------- */
.block-title-3333 {

}


/*******************************************************************************
    強制スタイル
*******************************************************************************/

/* -------------------------------------------
    テキストカラー
    https://getbootstrap.com/docs/5.3/utilities/colors/
------------------------------------------- */

.text-custom-orange {
    color: #EF7C5E;
}

.text-custom-gray {
    color: #595959;
}

.text-custom-green {
    color: #2CBA57;
}

/* -------------------------------------------
    フォントサイズ
    https://getbootstrap.com/docs/5.3/utilities/text/#font-size
------------------------------------------- */

/* .fs-6 = 16px */
.fs-10 { font-size: 10px; }
.fs-custom-10 { font-size: 10px; }
.fs-custom-11 { font-size: 11px; }
.fs-custom-12 { font-size: 12px; }
.fs-custom-13 { font-size: 13px; }
.fs-custom-14 { font-size: 14px; }
.fs-custom-15 { font-size: 15px; }


.fs-11-11 { font-size: 11px; line-height: calc(11 / 11); }


/* -------------------------------------------
    マージン
    https://getbootstrap.com/docs/5.3/utilities/spacing/
------------------------------------------- */

.mt-15 { margin-top: 15px; }
.mt-30 { margin-top: 30px; }

.mb-30 { margin-bottom: 30px; }

.pt-30 { padding-top: 30px; }



/*******************************************************************************
    ダークモード
*******************************************************************************/

html.theme-dark {

    /* 基本の文字色 */
    --bs-body-color: #f1f1f1;
    --bs-body-color-rgb: 241, 241, 241;

    /* 見出しなどに使われる強調色 */
    --bs-emphasis-color: #ffffff;

    /* 背景色（参考：文字色とのコントラスト確保用） */
    --bs-body-bg: #121212;

    /* リンク */
    --bs-link-color: #7be397;
    --bs-link-hover-color: #6bd185;

    /* 補助的な色（薄めの文字） */
    --bs-secondary-color: #bbbbbb;
    --bs-secondary-color-rgb: 187, 187, 187;

    --bs-tertiary-color: #999999;
    --bs-tertiary-color-rgb: 153, 153, 153;

    /* muted 表現など */
    --bs-muted-color: #888888;

    /* ヘッダーや装飾で使われる場合がある前景色 */
    --bs-heading-color: #f8f8f8;

    /* メインカラー */
    --acti-color-main-text: #1a1a1a;
    --acti-color-main-back: #7be397;

    /* メインカラー hover */
    --acti-color-main-hover-text: #1a1a1a;
    --acti-color-main-hover-back: #6bd185;

    /* メインカラー selected */
    --acti-color-main-selected-text: #1a1a1a;
    --acti-color-main-selected-back: #5abd74;

    /* メインカラー 反転 ( i = inversion ) */
    --acti-color-main-i-text: #7be397;
    --acti-color-main-i-back: #1a1a1a;

    /* メインカラー 反転 hover */
    --acti-color-main-i-hover-text: #6bd185;
    --acti-color-main-i-hover-back: #1a1a1a;

    /* メインカラー 反転 selected */
    --acti-color-main-i-selected-text: #5abd74;
    --acti-color-main-i-selected-back: #1a1a1a;

    /* サブカラー */
    --acti-color-sub-text: #1a1a1a;
    --acti-color-sub-back: #ff9a5f;

    /* サブカラー hover */
    --acti-color-sub-hover-text: #1a1a1a;
    --acti-color-sub-hover-back: #e28854;

    /* サブカラー selected */
    --acti-color-sub-selected-text: #1a1a1a;
    --acti-color-sub-selected-back: #cc7749;

    /* ハンバーガーアイコン */
    .navbar-toggler-icon {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }

    body {

        background-color: #121212;
        color: #E0E0E0;

        #main-menu-offcanvas ,
        #main-menu-offcanvas .menu-header a ,
        #main-menu-offcanvas .menu-header-name .acti-id ,
        #main-menu-offcanvas .accordion-content .menu-list li a ,
        #main-menu-offcanvas .accordion-header h2 a {
            color: #eee;
        }

        #main-menu-offcanvas .accordion svg {
            fill: #eee;
        }

        #mobile-area {

            background-color: #121212;
            color: #E0E0E0;

            #header-main {
                .navbar {
                    background-color: #111 !important;
                }
            }
        }

    }
}