/* ============================================================
   darkmode-overrides.css  v1.5.0
============================================================ */


/* ============================================================
   ① .smb-accordion__item__title の背景色制御
============================================================ */
html[data-color-mode="light"] .smb-accordion__item__title {
    background-color: #ffffff !important;
    color: #231815 !important;
    border-color: #dddddd !important;
}

html[data-color-mode="light"] .faq-aco .smb-accordion__item__title {
	background-color: #eee !important;
}

html[data-color-mode="light"] .faq-aco .smb-accordion__item {
	border: 1px solid #ccc;
}

html[data-color-mode="dark"] .faq-aco .smb-accordion__item {
	border: 1px solid #666;
}

html[data-color-mode="dark"] .smb-accordion__item__title {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

html[data-color-mode="light"]
  .work-efficiency-support-title > .smb-accordion__item > .smb-accordion__item__title,
html[data-color-mode="light"]
  .tech-specific-support-title > .smb-accordion__item > .smb-accordion__item__title {
    background-color: #ffffff !important;
    border-color: #dddddd !important;
    color: #231815 !important;
}

html[data-color-mode="dark"]
  .work-efficiency-support-title > .smb-accordion__item > .smb-accordion__item__title,
html[data-color-mode="dark"]
  .tech-specific-support-title > .smb-accordion__item > .smb-accordion__item__title {
    background-color: #1a1a1a !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

/* ダークモード時: ::after の矢印画像を色反転（白に） */
html[data-color-mode="dark"]
  .work-efficiency-support-title > .smb-accordion__item > .smb-accordion__item__title::after,
html[data-color-mode="dark"]
  .tech-specific-support-title > .smb-accordion__item > .smb-accordion__item__title::after {
    filter: invert(1) !important;
}

html[data-color-mode="dark"] .smb-accordion__item__body {
    background-color: #111111 !important;
    color: #ffffff !important;
}

html[data-color-mode="dark"] .smb-accordion__item__body a {
    color: #ffe066 !important;
}


/* ============================================================
   ② .animatedfsmenu の背景色制御
============================================================ */
html[data-color-mode="light"] .animatedfsmenu.navbar-expand-md,
html[data-color-mode="light"] .animatedfsmenu.navbar-expand-ht {
    background: #d8d8d8 !important;
}

html[data-color-mode="dark"] .animatedfsmenu.navbar-expand-md,
html[data-color-mode="dark"] .animatedfsmenu.navbar-expand-ht {
    background: #111111 !important;
}

html[data-color-mode="dark"] .animatedfsmenu a,
html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list a {
    color: #ffe066 !important;
}

html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list,
html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list h3,
html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list h4,
html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list h5,
html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list li {
    color: #ffffff !important;
}

html[data-color-mode="dark"] .animatedfsmenu .navbar-collapse.animatedfs_menu_list h3 {
    border-bottom-color: #555555 !important;
}

html[data-color-mode="dark"] .animatedfsmenu .menu-box {
    background: #1a1a1a !important;
    border-color: #555555 !important;
}

html[data-color-mode="dark"] .animatedfsmenu .menu-box h5,
html[data-color-mode="dark"] .animatedfsmenu .link-has-title {
    background: #2a2a2a !important;
}

html[data-color-mode="dark"] .animatedfsmenu .menu-box > div {
    background: #1a1a1a !important;
    border-top-color: #555555 !important;
}

html[data-color-mode="dark"] .animatedfsmenu-html-area p {
    color: #ffffff;
}

/* animatedfsmenu button の hover / focus 背景色を無効化 */
html .animatedfsmenu button:hover,
html .animatedfsmenu button:focus,
html .animatedfsmenu button:active,
html .animatedfsmenu button:focus-visible {
    background:       transparent !important;
    background-color: transparent !important;
    box-shadow:       none        !important;
    outline:          none        !important;
}


/* ============================================================
   ③ サイト全体のダークモード追加対応
============================================================ */
html[data-color-mode="dark"] .site-body,
html[data-color-mode="dark"] .entry-body {
    background-color: #111111;
    color: #ffffff;
}

html[data-color-mode="dark"] .wp-block-column {
    color: #ffffff;
}

html[data-color-mode="dark"] .smb-tab-panel {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

html[data-color-mode="dark"] .smb-tabs__tab {
    color: #ffffff !important;
}

html[data-color-mode="dark"] table,
html[data-color-mode="dark"] th,
html[data-color-mode="dark"] td {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border-color: #444444 !important;
}

html[data-color-mode="dark"] table a {
    color: #ffe066 !important;
}

html[data-color-mode="dark"] .vk_faq_title.open {
    background: #2a2a2a !important;
}

html[data-color-mode="dark"] .vk_faq_content {
    background: #1a1a1a !important;
    color: #ffffff !important;
}

html[data-color-mode="dark"] h4.wp-block-heading.is-style-default {
    background: #2a2a2a !important;
    color: #ffffff !important;
}

html[data-color-mode="dark"] #slide-menu {
    background: #1a1a1a !important;
    border-color: #444444 !important;
    color: #ffffff !important;
}

html[data-color-mode="dark"] #slide-menu a {
    color: #ffe066 !important;
}

html[data-color-mode="dark"] .breadcrumb {
    background: #111111;
    color: #cccccc;
}

html[data-color-mode="dark"] .breadcrumb a {
    color: #ffe066 !important;
}

html[data-color-mode="dark"] .has-black-color {
    color: #ffffff !important;
}


/* ============================================================
   ④ ヘッダー内の旧 .tool-btns を非表示
   （ウィジェットエリアへ移動したため）
============================================================ */
.site-header .tool-btns {
    display: none !important;
}


/* ============================================================
   ⑤ tool-btns-sidebar：サイドバーウィジェット縦並びボタン
   
   サイドバー幅 70px（タブレット以下 55px）に合わせた
   コンパクトな縦積みレイアウト。
   ボタン1個の幅 = 親幅いっぱい（width: 100%）。
   グループラベル（文字・色）は極小文字で上部に表示。
============================================================ */
.tool-btns-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;
    padding: 8px 0;
    width: 100%;
}

/* グループ（文字サイズ or 配色） */
.tbs-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* グループラベル（「文字」「色」） */
.tbs-label {
    display: block;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 0.05em;
    margin-bottom: 2px;
    line-height: 1;
}

/* ボタンを縦に積むラッパー */
.btn_wrap.tbs-stack {
    flex-direction: column;
    gap: 0;
    width: 100%;
	background: #666666;
}

/* ボタン共通 */
.tool-btns-sidebar .btn_wrap button {
    display: block;
    width: 100%;
    min-width: unset;
    padding: 5px 4px;
    font-size: clamp(10px, 1.1rem, 13px);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    border-radius: 0;
    border-left: none;
    border-right: none;
    outline: none;
    cursor: pointer;
    transition:
        background-color 0.15s ease,
        color            0.15s ease,
        border-color     0.15s ease;
}

/* 最初のボタン: 上ボーダーのみ */
.tool-btns-sidebar .btn_wrap.tbs-stack button:first-child {
    border-bottom: none;
}

/* 2番目以降のボタン: 下ボーダーのみ（上は前のボタンの下と共有） */
.tool-btns-sidebar .btn_wrap.tbs-stack button:last-child {
    border-top: 1px solid rgba(255,255,255,0.3);
}

.tool-btns-sidebar .btn_wrap button:focus,
.tool-btns-sidebar .btn_wrap button:focus-visible {
    outline: none;
}

/* ---- ライトモード ---- */
html:not([data-color-mode="dark"]) .tool-btns-sidebar .btn_wrap button {
    background-color: transparent;
    color: #ffffff;           /* サイドバー背景 #212222 に対して白文字 */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-left: none;
    border-right: none;
}

html:not([data-color-mode="dark"]) .tool-btns-sidebar .btn_wrap button:hover,
html:not([data-color-mode="dark"]) .tool-btns-sidebar .btn_wrap button:active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

html:not([data-color-mode="dark"]) .tool-btns-sidebar .btn_wrap button.is_active {
    background-color: #ffffff;
    color: #212222;           /* サイドバー背景色と合わせる */
    border-color: #ffffff;
}

html:not([data-color-mode="dark"]) .tool-btns-sidebar .btn_wrap button.is_active:hover,
html:not([data-color-mode="dark"]) .tool-btns-sidebar .btn_wrap button.is_active:active {
    background-color: #cccccc;
    color: #212222;
}

/* ---- ダークモード ---- */
html[data-color-mode="dark"] .tool-btns-sidebar .btn_wrap button {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-left: none;
    border-right: none;
}

html[data-color-mode="dark"] .tool-btns-sidebar .btn_wrap button:hover,
html[data-color-mode="dark"] .tool-btns-sidebar .btn_wrap button:active {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

html[data-color-mode="dark"] .tool-btns-sidebar .btn_wrap button.is_active {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

html[data-color-mode="dark"] .tool-btns-sidebar .btn_wrap button.is_active:hover,
html[data-color-mode="dark"] .tool-btns-sidebar .btn_wrap button.is_active:active {
    background-color: #cccccc;
    color: #000000;
}

/* タブレット以下（55px幅）でフォントを少し小さく */
@media (max-width: 1024px) {
    .tool-btns-sidebar .btn_wrap button {
        font-size: clamp(9px, 1rem, 11px);
        padding: 4px 2px;
    }
}


/* ============================================================
   ⑥ ヘッダー内 .btn_wrap（ウィジェット外）の従来スタイル維持
   サイドバー外の btn_wrap は従来の横並びスタイルを使う
============================================================ */
.btn_wrap {
    display: flex;
    gap: 0;
}

/* ---------- 共通ベース（サイドバー外） ---------- */
.btn_wrap button {
    min-width: 2.4em;
    padding: 4px 10px;
    border-radius: 0;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    outline: none;
    transition:
        background-color 0.15s ease,
        color            0.15s ease,
        border-color     0.15s ease;
}

.btn_wrap button:focus,
.btn_wrap button:focus-visible {
    outline: none;
}

/* ---------- ライトモード（サイドバー外） ---------- */
html:not([data-color-mode="dark"]) .btn_wrap button {
    background-color: transparent;
    color: #000000;
    border: 1.5px solid rgba(0, 0, 0, 0.5);
}

html:not([data-color-mode="dark"]) .btn_wrap button:hover,
html:not([data-color-mode="dark"]) .btn_wrap button:active {
    background-color: #555555;
    color: #ffffff;
    border-color: #555555;
}

html:not([data-color-mode="dark"]) .btn_wrap button.is_active {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}

html:not([data-color-mode="dark"]) .btn_wrap button.is_active:hover,
html:not([data-color-mode="dark"]) .btn_wrap button.is_active:active {
    background-color: #333333;
    color: #ffffff;
    border-color: #333333;
}

/* ---------- ダークモード（サイドバー外） ---------- */
html[data-color-mode="dark"] .btn_wrap button {
    background-color: #000000;
    color: #ffffff;
    border: 1.5px solid rgba(255, 255, 255, 0.5);
}

html[data-color-mode="dark"] .btn_wrap button:hover,
html[data-color-mode="dark"] .btn_wrap button:active {
    background-color: #888888;
    color: #ffffff;
    border-color: #888888;
}

html[data-color-mode="dark"] .btn_wrap button.is_active {
    background-color: #ffffff;
    color: #000000;
    border-color: #ffffff;
}

html[data-color-mode="dark"] .btn_wrap button.is_active:hover,
html[data-color-mode="dark"] .btn_wrap button.is_active:active {
    background-color: #cccccc;
    color: #000000;
    border-color: #cccccc;
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 991.98px) {
    .btn_wrap button {
        font-size: 1.2rem;
        padding: 3px 8px;
    }
}

@media (max-width: 767.98px) {
    .btn_wrap button {
        font-size: 1.1rem;
        min-width: 2em;
        padding: 3px 6px;
    }
}


/* ============================================================
   ⑦ フルスクリーンメニュー リストの文字サイズをrem非依存に修正
============================================================ */
.navbar-collapse.animatedfs_menu_list li,
.sitemap li {
    font-size: clamp(14px, 15px, 16px) !important;
}


/* ============================================================
   ⑧ .utility-nav-vertical .utility-nav-btn .btn-label
      文字サイズ「大」時に最大 13px になるよう制限
============================================================ */
.utility-nav-vertical .utility-nav-btn .btn-label {
    font-size: clamp(9px, 1em, 13px) !important;
}

.widget:has(.tool-btns-sidebar) {
    position: absolute;
    top: calc(15% + 90px); /* トグルボタン top:15% + height:70px + 余白 */
	left: 0;
    right: 0;
}

@media (max-width: 1024px) {
    .widget:has(.tool-btns-sidebar) {
        top: calc(15% + 80px); /* スマホ: height:55px + 余白 */
    }
}