@charset "UTF-8";

/* 色設定のカスタマイズ */

:root {
    /* ボーダーカラー */
        --cstm7-linecolor-001: #cb5278;
        --cstm7-linecolor-002: #fff;
        --cstm7-linecolor-002-20: rgba(255, 255, 255, 0.2);
        --cstm7-linecolor-003: #000;
    /* 背景色 */
        --cstm7-bgcolor-001: #cb5278;
        --cstm7-bgcolor-002: #fff;
        --cstm7-bgcolor-003: #fffc00;
        --cstm7-bgcolor-004: #000;
        --cstm7-bgcolor-004-50: rgba(0, 0, 0, 0.5);
    /* フォントカラー */
        --cstm7-fontcolor-001: #000;
        --cstm7-fontcolor-002: #fff;
        --cstm7-fontcolor-003: #fffc00;
        --cstm7-fontcolor-004: #cb5278;
}

/* ================================================================ */

/* グローバルメニューのライン色 */
#header,
#header.active {
    border-color: var(--cstm7-linecolor-001);

    #header_logo,
    #lang_button,
    #header_sns,
    #menu_button,
    #index_news,
    #global_menu_button,
    nav.global_menu > ul > li > a,
    nav.global_menu .menu > ul > li > a {
        border-color: var(--cstm7-linecolor-001);
    }
}

body.header_fix_mobile #header #menu_button,
body.header_fix_mobile #header #global_menu_button {
    border-color: var(--cstm7-linecolor-001);
}

/*　グローバルメニューのリンクテキストの色　*/
#header,
#header.active {
    color: var(--cstm7-fontcolor-004);

    nav.global_menu > ul > li > a,
    nav.global_menu .menu > ul > li > a,
    #header_news a,
    #header_button,
    #menu_button:before,
    #header_sns li a:before,
    #lang_button li a,
    #header_search_button:before {
        color: var(--cstm7-fontcolor-004);
    }
}

body.header_fix_mobile #header #menu_button:before {
    color: var(--cstm7-fontcolor-004);
}


/* ヘッダー挙動変更
 * 移動後の自動反転の中止
*/
#header.active:after {
    height: 0 !important;

    @media screen and (max-width: 1201px) {
        height: 0 !important;
    }
}

/* ヘッダーの反転時の色設定 */
#body #header:hover {
    background: var(--cstm7-bgcolor-001) !important;
    color: var(--cstm7-fontcolor-003) !important;

    a {
        color: var(--cstm7-fontcolor-002) !important;
    }

    #header_search_button:before {
        color: var(--cstm7-fontcolor-002) !important;
    }

    /* 反転時カーソルオンのリンク色 */
    & a:hover {
        color: var(--cstm7-fontcolor-003) !important;
    }

    /* 反転時カーソルオンのボーダーカラー */
    & #header_logo,
    & nav.global_menu > ul > li > a,
    & nav.global_menu .menu > ul > li > a,
    & #lang_button,
    & #header_sns,
    & #menu_button,
    & #global_menu_button,
    body.header_fix_mobile #header #menu_button {
        border-color: var(--cstm7-linecolor-002);
    }

}

/* 反転時のサブメニューの背景色 */
nav.global_menu ul ul {
    box-shadow: 0 1px 4px var(--cstm7-bgcolor-004-50);
}

nav.global_menu ul ul a {
    background-color: var(--cstm7-bgcolor-001) !important;
}

/* ヘッダーロゴの色設定
 * ロゴはカラーフィルターで色を設定。下記サイトでカラーフィルターを生成
 * https://angel-rs.github.io/css-color-filter-generator/
 */
/* 通常時 #cb5278 */
#header #header_logo .logo a,
#header.active #header_logo .logo a {
    filter: brightness(0) saturate(100%) invert(51%) sepia(30%) saturate(4192%) hue-rotate(310deg) brightness(86%) contrast(83%);
}

/* カーソルオン時 #fff */
#body #header:hover #header_logo .logo a {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}


/* メガメニューA　記事リンク部分　megamenu_a  */
.megamenu_a {
    .owl-item {
        border-bottom: solid 0.8px var(--cstm7-linecolor-002-20);
    }

    .owl-item .link {
        .title_area {
            background-color: var(--cstm7-bgcolor-004);
            border-left: solid 0.8px var(--cstm7-linecolor-002-20);

            .title {
                color: var(--cstm7-fontcolor-002);
                opacity: 1;

                &:hover {
                    color: var(--cstm7-fontcolor-003);
                }
            }
        }

        &:hover .title > * {
            color: var(--cstm7-fontcolor-003) !important;
        }
    }

    .owl-item .category {
        border-left: solid 0.8px var(--cstm7-linecolor-002-20);
    }
}

/* モバイルメニュー時ハンバーガーメニューボタン */

#header.active:hover #global_menu_button {
    span {
        background: var(--cstm7-bgcolor-002) !important;
    }
}

#header #global_menu_button,
#header.active #global_menu_button {
    span {
        background: var(--cstm7-bgcolor-001) !important;
    }

    &:hover span {
        background: var(--cstm7-bgcolor-003) !important;
        opacity: 1;
    }
}

/* モバイルメニューの色変更・表示の調整 */
/* 子メニュー、孫メニューの左側を1文字分下げる */
#mobile_menu li li a {
    padding-left: 2rem;
}

#mobile_menu li li li a {
    padding-left: 3rem;
}

/*カーソルオン時の文字色*/
#drawer_menu #mobile_menu a:hover {
    color: var(--cstm7-fontcolor-003) !important;
}

#mobile_menu li {
    overflow: hidden;
}

/* ================================================================ */
/* トップカルーセル 調整 */
#carousel2.layout_type1 .item {
    width: 271px;
    height: 300px;
    margin: 0 3px;
}

#carousel2.layout_type1 .image {
    width: auto;
    height: 164px;
    top: 5px;
    aspect-ratio: 76/46;
}

#carousel2.layout_type1 .content {
    top: 30px;
    height: 164px;
}

#carousel2.layout_type1 .owl-item a:hover .content {
    top: 5px;
}

#carousel2.layout_type2 {
    height: 295px;
}

#carousel2.layout_type2 .item {
    width: 380px;
    height: 380px;
    margin: 0 3px;

    @media screen and (max-width: 767.9px) {
        width: 360px;
    }

    @media screen and (max-width: 359.9px) {
        width: 300px;
    }
}

#carousel2.layout_type2 .image {
    width: 100%;
    height: 225px;
    top: 5px;
    aspect-ratio: 76/46;

    @media screen and (max-width: 767.9px) {
        aspect-ratio: auto;
    }
}


#carousel2.layout_type2 .content {
    top: 30px;
    height: 225px;
}

#carousel2.layout_type2 .owl-item a:hover .content {
    top: 5px;
}


/* ================================================================ */

/* 記事の詳細ページ */
/* ヘッダー*/
#body.single #header,
#body.no_index_header_content #header,
#body.header_fix #header {
    background: var(--cstm7-bgcolor-004);

    &.active {
        background: var(--cstm7-bgcolor-004-50);
    }
}

#body:has( #single_banner_onheader ) #header {
    background: var(--cstm7-bgcolor-004);

    &.active[style*="position: fixed;"] {
        background: var(--cstm7-bgcolor-004-50);
    }
}

/* 記事本体*/
.single,
.page {

    /* 背景色 */
    #container,
    #main_contents:after,
    #side_col:after {
        background-color: var(--cstm7-bgcolor-004);
    }

    /* 文字色 */
    #main_col,
    #bread_crumb,
    #bread_crumb li.last,
    #bread_crumb li a,
    #bread_crumb li:after,
    #bread_crumb li.home a:before,
    #post_title .meta_top li,
    #post_title .meta_top li a,
    #related_post a{
        color: var(--cstm7-fontcolor-002);
    }

    /* 見出しの色設定 */
    .design_headline1,
    .blog001,
    .styled_h2 {
        border: solid 1px var(--cstm7-linecolor-002);
        background-color: var(--cstm7-bgcolor-004);
    }

    .design_headline2,
    .design_list tr:first-of-type th,
    .design_list tr:first-of-type th+td {
        color: var(--cstm7-fontcolor-001);
        border-color: var(--cstm7-linecolor-003) !important;
    }

    .styled_h3,
    .styled_h4,
    .styled_h5 {
        color: var(--cstm7-fontcolor-002);
        border-color: var(--cstm7-linecolor-002);
    }

    /* テキストリンクのホバーカラー */
    .post_content a {

        &:hover {
            color: var(--cstm7-fontcolor-003);
        }
    }

    .post_content {
        p:not(.speach_balloon_text > * ) {
            color: var(--cstm7-fontcolor-002);
        }

        .has-background,
        p.has-background {
            color: var(--cstm7-fontcolor-001);
        }

        blockquote {
            background-color: var(--cstm7-bgcolor-004);
            color: var(--cstm7-fontcolor-002);
        }

        .well,
        .well2,
        .well3 {
            background-color: var(--cstm7-bgcolor-004);
        }

        /* CVブロックの色調整 */
        .pb-cv-box {
            color: initial;
        }

        /* Arkhe BlocksのQAブロックの色調整 */
        .ark-block-faq__a:before {
            box-shadow: inset 0 0 0 2px var(--cstm7-linecolor-002-20);
            color: var(--cstm7-fontcolor-002);
        }

        /* liquid-speech-balloonブロックの色設定 */
        .liquid-speech-balloon-wrap {
            .liquid-speech-balloon-arrow {
                border-right-color: rgba(255 255 255 / 0.6);
                border-left-color: rgba(255 255 255 / 0.6);
            }

            /* 文字色はデフォルト */
            .liquid-speech-balloon-text p {
                color: initial;
            }
        }

    }



    /* 前後の記事へリンク */
    #next_prev_post {
        .item {
            border-color: var(--cstm7-linecolor-001);
        }

        .title:after {
            color: var(--cstm7-fontcolor-002) !important;
        }

        a {
            background-color: var(--cstm7-bgcolor-004);
            color: var(--cstm7-fontcolor-002);

            .nav {
                color: var(--cstm7-fontcolor-002);
            }

            &:hover {
                background-color: var(--cstm7-bgcolor-001);
                color: var(--cstm7-fontcolor-003) !important;

                .title,
                .nav {
                    color: var(--cstm7-fontcolor-003) !important;
                }
            }
        }
    }

    /* 投稿者の情報　小さいボックス */
    #post_meta_bottom {
        background: var(--cstm7-bgcolor-004);
    }

    #post_meta_bottom li:before {
        color: var(--cstm7-fontcolor-002);
    }

    #post_meta_bottom a {
        color: var(--cstm7-fontcolor-002) !important;

        &:hover {
            color: var(--cstm7-fontcolor-003) !important;
        }
    }

    /* 投稿者の情報　大きいボックス */
    .author_profile {
        background:#000;

        .sns_button_list.color_type1 li a {
            &:before {
                color: var(--cstm7-fontcolor-002);
            }

            &:hover:before {
                color: var(--cstm7-fontcolor-003);
                opacity: 1;
            }
        }
    }

    .author_profile a {
        color: var(--cstm7-fontcolor-002);

        &:hover {
            color: var(--cstm7-fontcolor-003);
        }
    }

    /* 関連記事リンク */
    #related_post .item:hover {
        background-color: var(--cstm7-bgcolor-001);
        color: var(--cstm7-fontcolor-003) !important;

        a {
            color: var(--cstm7-fontcolor-003) !important;
        }
    }

    #related_post .category {
        background-color: var(--cstm7-bgcolor-001);
    }

    #related_post .item:hover .title {
        color: var(--cstm7-fontcolor-003) !important;
    }

    #recent_news .post_list .item a {
        color: var(--cstm7-fontcolor-002);

        &:hover {
            color: var(--cstm7-fontcolor-003);

            .title {
                color: var(--cstm7-fontcolor-003);
            }
        }
    }

    /* コメント・トラックバック */
    #comment_tab {
        .active a{
            border:solid 1px var(--cstm7-linecolor-002);
        }
    }

    #comments .post_content blockquote {
        background:var(--cstm7-bgcolor-002);
        > * {
            color: var(--cstm7-fontcolor-001);
        }
    }

    #comments .post_content p {
        color: var(--cstm7-fontcolor-001);
    }

    fieldset#respond {
        margin-bottom: 16px;
    }

    /* ショールーム　詳細ページ */
    #showroom_title_area .title,
    #showroom_title_area .category,
    #showroom_title_area_bottom .category {
        color: var(--cstm7-fontcolor-002);
    }

    #showroom_title_area .category:hover,
    #showroom_title_area_bottom .category:hover {
        opacity: 0.8;
    }

    #showroom_title_area_bottom>* {
        color: var(--cstm7-fontcolor-002);
    }

    #showroom_title_area_bottom:before {
        background-color: var(--cstm7-bgcolor-002);
    }

}

/* ================================================================ */
/* PC時画面　右側のサイドボタン */
#side_menu{
    top: auto;
    bottom: 80px;
}

#side_menu a {
    color: var(--cstm7-fontcolor-004);
    border-color: var(--cstm7-linecolor-001);

    &:hover {
        color: var(--cstm7-fontcolor-003);
    }
}


/* ================================================================ */
/* サイドウィジェット */
#side_col {
    .widget_headline,
    .p-dropdown__title {
        color: var(--cstm7-fontcolor-004);
        border: solid 1px var(--cstm7-linecolor-001);
    }

    /* テキストウィジェット */
    .textwidget {
        padding: 16px 0;
        color: var(--cstm7-fontcolor-004);
    }

    /* 【TCD】アーカイブ一覧 */
    .p-dropdown__title{
        background-color: var(--cstm7-bgcolor-004);

        &::after {
            color: var(--cstm7-fontcolor-004) !important;
        }
    }

    /* 【TDC】カテゴリー一覧、【TCD】アーカイブ一覧 */
    .category_list_widget li a,
    .tcdw_archive_list_widget .p-dropdown__list li a {
        color: var(--cstm7-fontcolor-004);
        background-color: var(--cstm7-bgcolor-004);
        border-color: var(--cstm7-linecolor-001);

        &:hover {
            color: var(--cstm7-fontcolor-003);
            background-color: var(--cstm7-bgcolor-001);
        }
    }

    /* 【TDC】記事スライダー */
    .post_slider_widget a {
        .title_area {
            color: var(--cstm7-fontcolor-004);
            background-color: var(--cstm7-bgcolor-004);
            border-color: var(--cstm7-linecolor-001);

            &:hover {
                color: var(--cstm7-fontcolor-003) !important;
                background-color: var(--cstm7-bgcolor-001);
            }
        }

        .image_wrap {
            border-left: solid 1px var(--cstm7-linecolor-001);
            border-right: solid 1px var(--cstm7-linecolor-001);
            box-sizing:border-box;
        }

        &:hover {
            background-color: var(--cstm7-bgcolor-001);

            .title_area{
                background-color: var(--cstm7-bgcolor-001);
            }

            .title {
                color: var(--cstm7-fontcolor-003) !important;
            }
        }
    }

    /* 【TDC】タブ記事一覧 */
    .widget_tab_post_list_button div {
        color: var(--cstm7-fontcolor-004);
        border-color: var(--cstm7-linecolor-001);
        background: var(--cstm7-bgcolor-004);

        &.active {
            background: var(--cstm7-bgcolor-001);
        }

        &:hover {
            color: var(--cstm7-fontcolor-003);
            background-color: var(--cstm7-bgcolor-001);
        }
    }

    .widget_tab_post_list {
        &.active {
            border:solid 1px var(--cstm7-linecolor-001);
            border-top: none;
        }

        li.no_post {
            width: 100%;
            margin:0 0 10px;
            color: var(--cstm7-fontcolor-004);
        }

        .title {
            color: var(--cstm7-fontcolor-004);

            &:hover {
                color: var(--cstm7-fontcolor-003) !important;
                opacity: 1;
            }
        }
    }

}


/* ================================================================ */

/* フッター */
#footer {
    margin-top: 1px;
    border-color: var(--cstm7-linecolor-001);
    background: var(--cstm7-bgcolor-004);
}

#footer #copyright,
#return_top a {
    background-color: var(--cstm7-bgcolor-001)!important;
}

#footer_logo .logo a,
#footer_sns.sns_button_list.color_type1 li a:before,
#footer_info {
    color: var(--cstm7-fontcolor-002) !important;
}

#footer_logo .logo a,
#footer_sns.sns_button_list.color_type1 li a {
    &:hover,
    &:hover:before {
        color: var(--cstm7-fontcolor-003) !important;
        opacity: 1;
    }
}

/* フッターロゴ画像の色設定 */
#footer_logo .logo a img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);
}