/* =====================================================
   PKSHA FAQ b→dashヘッダー
   ===================================================== */
#header {
    height: 65px;
    padding: 0 12px 0 24px;
    border-radius: 0;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 999999;
    position: fixed;
}

#header img {
    margin-left: 12px;
    width: 230px;
    display: inline-block;
    box-shadow: unset;
    border-radius: 0;
}

#header #site-title a {
  color: #fff !important;
}

#header #site-title a small {
  line-height: 26px;
}

#header #site-title h1 {
  font-size: 0px;
}

#header #menu {
  display: flex;
  align-items: center;
  gap: 40px;
  /* @include body2 の内容は定義に依存しますが、一般的にはフォント設定等が入ります */
}

#header #menu .header-nav {
  display: flex;
  gap: 24px;
}

#header #menu .header-nav a {
  color: #fff;
}

#header #menu #search .search-form {
  position: relative;
}

#header #menu #search .faq_tag_search_input_field input {
    opacity: 0.5;
    width: 300px !important;
    height: 45px !important;
}

/* --- ヘッダー検索窓（新ID対応） --- */
#header #menu #search #keyword_header_text_field {
    width: 400px !important;
    height: 40px !important;
    border-radius: 40px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 20px 0 50px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
    font-size: 14px !important;
}

/* ヘッダー内アイコンの微調整 */
#header .faq_search_frmArea::before {
    top: 11px !important; /* ヘッダーの高さに合わせる */
    transform: none !important;
}

#header .search_description{
    display: none !important;
}

/* --- 検索窓のクリックを1回で確実に反応させる --- */
#keyword_header_tag_field, 
#keyword_text_tag_field {
    cursor: pointer !important;
    position: relative !important;
    z-index: 9999999 !important; /* オーバーレイよりは下、他のヘッダー要素よりは上 */
    pointer-events: auto !important;
}

/* --- オーバーレイが閉じているときにクリックを邪魔しないようにする --- */
/* #faq_tag_search_overlay {
    display: none !important;
    visibility: hidden;
    pointer-events: none;
    z-index: 10000000 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */

/* オーバーレイ表示時のみクリックを受け付ける */
/* #faq_tag_search_overlay.open {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
} */

/* ヘッダー検索窓の z-index をシステム標準より上げる */
#header #search {
    position: relative !important;
    z-index: 9999999 !important;
}

/* --- ヘッダー検索窓（ID不一致の修正 ＆ デザイン統一） --- */
#header #menu #search #keyword_header_tag_field {
    width: 300px !important;
    height: 40px !important;
    border-radius: 40px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 20px 0 50px !important;
    box-sizing: border-box !important;
    background: #fff url(https://www.kpiee.com/wp-content/themes/kpiee/images/support/icon_research.svg) left 16px center no-repeat !important;
    font-size: 14px !important;
    cursor: pointer !important;
    opacity: 1 !important; /* 透明度を1に戻す */
}

/* ホバー時の微調整
#header #menu #search #keyword_header_tag_field:hover {
    border-color: #36C1FA !important;
} */

/* フォームの外枠余白をリセット */
.faq_tag_search_input_field {
    margin-bottom: 0 !important;
}

/* #header #menu #search #keyword_faq_text_field {
    width: 400px !important;
    height: 40px !important;
    border-radius: 40px !important;
    border: 1px solid #d1d5db !important;
    padding: 0 20px 0 50px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
} */

#header #menu #search .search-field {
  padding: 12px 24px 12px 48px;
  border-radius: 12px;
  width: 300px;
  background-color: #f5f5f5;
}

#header #menu #search .search-field::placeholder {
  color: #999;
}


#header #menu #search .search-submit {
  padding: 3px 1em;
  height: 20px;
  line-height: 1;
  font-size: 9px;
  font-weight: 900;
  position: absolute;
  right: 7px;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #80CAFD;
  border: 2px solid #80CAFD;
  border-radius: 10px;
  background-color: #fff;
  cursor: pointer;
}

#header.hide {
  top: -100px;
}

/* --- ナビゲーションメニューのデザイン --- */
#header #menu {
  display: flex !important;
  align-items: center !important;
  gap: 32px !important; /* メニューと検索窓の間隔 */
}

#header #menu .header-nav {
  display: flex !important;
  gap: 24px !important; /* 各メニュー間の間隔 */
  align-items: center !important;
}

#header #menu .header-nav a {
  color: #5B5B5F !important; /* ブランドのテキスト色 */
  font-size: 14px !important;
  font-weight: 400 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.2s ease !important;
}

#header #menu .header-nav a:hover {
  color: #0CAAEB !important; /* ホバー時にb→dashブルーに */
}

.admin-bar #header {
  top: calc(0rem + 32px);
}

.admin-bar #header.hide {
  top: calc(-100px + 32px);
}

body{
    font-family: 'Noto Sans CJK JP',sans-serif !important;
}

textarea, input, select{
    font-family: 'Noto Sans CJK JP',sans-serif !important;
}

/* ブラウザごとの互換性対応 */
input::-webkit-input-placeholder { font-family: 'Noto Sans CJK JP', sans-serif !important; }
input::-moz-placeholder { font-family: 'Noto Sans CJK JP', sans-serif !important; }
input:-ms-input-placeholder { font-family: 'Noto Sans CJK JP', sans-serif !important; }

/* ヘッダーとヒーローエリアの検索窓を特定して適用 */
#keyword_header_tag_field::placeholder,
#keyword_text_tag_field::placeholder,
#keyword_faq_tag_search_field::placeholder {
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

.oneCol .search_description{
    display: none !important;
}

.icoKeyword{
    background-image: none !important;
}

/* =====================================================
   【追加】ページ内ジャンプ時の停止位置（ヘッダー重なり防止）
   ===================================================== */
html {
    /* 固定ヘッダー(65px) + 余白(25px)分、停止位置を下げます */
    scroll-padding-top: 90px !important; 
}

/* =====================================================
   PKSHA FAQ TOPページ
   ===================================================== */
/* --- 1. 全体背景とレイアウトの初期化 --- */
body#category_index {
    background-color: #FFFFFF !important;
    margin: 0 !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

#okw_wrapper, #okw_contents {
    background: transparent !important;
}

#okw_contents_base {
    width: 90vw !important;
    margin: 0 auto !important;
    padding-right: 0 !important;
    background: transparent !important;
    position: relative !important;
    border: none !important;
}

body#category_index #okw_contents_inner {
    padding: 0 !important;
    background: transparent !important;
}

/* --- 2. ヒーローセクション（上部の白い検索・ロゴエリア） --- */
.okw_parts_faq_tag_search {
    background-color: #F0F9FF !important;
    padding: 120px 0 48px !important; 
    text-align: center !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    margin-bottom: -10px;
}

/* メインタイトル/ロゴ */
.okw_parts_faq_tag_search::before {
    content: "";
    display: block;
    width: 400px;
    height: 60px;
    margin: 0 auto 25px;
    background: url("https://dyc7a1957gj3w.cloudfront.net/uploads/BD-FMV8NW/image/7312/35333bf9-cec5-408c-aa45-5132d7f065e3.svg") no-repeat center / contain;
}

.okw_parts_faq_tag_search .ttl_bg .icoKeyword {
    background-image: none !important;
    height: auto !important;
    padding: 0 !important;
    display: none !important;
}

.okw_parts_faq_tag_search .ttl_col {
    background: none !important;
    height: auto !important;
    padding: 0 !important;
    display: none !important;
}

.faq_tag_search_input_field{
    max-width: 600px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.faq_tag_search_main_message {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
    color: #414143 !important;
}

.faq_tag_search_input_field input {
    width: 600px !important;
    height: 50px !important;
    padding: 0 20px 0 50px !important;
    font-size: 14px;
    letter-spacing: 1.8px;
    background: url(https://www.kpiee.com/wp-content/themes/kpiee/images/support/icon_research.svg) left 16px center no-repeat !important;
    border: 1px solid #d1d5db !important;
    border-radius: 40px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
}

/* 検索窓デザイン */
.faq_search_frmArea {
    max-width: 600px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.faq_tag_search_main {
    padding: 0px !important;
    margin: 0 !important;
    background-color: #F0F9FF !important;
    border-radius: 0 !important;
}

#keyword_faq_text_field {
    width: 100% !important;
    height: 48px !important;
    border-radius: 40px !important;
    border: unset !important;
    padding: 0 20px 0 50px !important;
    box-sizing: border-box !important;
    background-color: #fff !important;
}

/* 検索窓内の虫眼鏡アイコン */
.faq_search_frmArea::before {
    content: "" !important;
    position: absolute !important;
    left: 18px !important;
    top: 14px !important;
    width: 20px;
    height: 20px;
    background: url("https://www.kpiee.com/wp-content/themes/kpiee/images/support/icon_research.svg") no-repeat center / contain !important;
    z-index: 5 !important;
}

/* --- 3. よく検索されるキーワード --- */

.faq_tag_search_attention_message {
    padding-left: 0 !important;
    line-height: 1.5 !important;
    background: none !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #2d3745 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.faq_tag_search_attention_message::before {
    content: "" !important;
    width: 16px;
    height: 18px;
    margin-right: 6px !important;
    background: url(https://www.kpiee.com/wp-content/themes/kpiee/images/support/icon_keyword.svg) no-repeat center / contain !important;
}

.okw_parts_attention_keyword {
    background: #F0F9FF !important;
    margin-top: -50px !important;
    padding-bottom: 48px !important;
    margin: 0px auto 40px !important;
    text-align: center !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
}

.okw_parts_attention_keyword .ttl_bg {
    background: none !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    color: #2d3745 !important;
    margin-bottom: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* キーワードアイコン */
.okw_parts_attention_keyword .ttl_bg::before {
    content: "" !important;
    width: 22px;
    height: 22px;
    margin-right: 8px !important;
    background: url("https://www.kpiee.com/wp-content/themes/kpiee/images/support/icon_keyword.svg") no-repeat center / contain !important;
}

.faq_tags_area{
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}

.faq_tags_area li a {
    background-color: #FFFFFF !important;
    color: #36C1FA !important;
    padding: 4px 18px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: 1px solid #36C1FA !important;
}

.attention_keyword_list {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
}

.faq_tags_area .keyword_tag {
    background-color: #FFFFFF !important;
    color: #36C1FA !important;
    padding: 4px 18px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    text-decoration: none !important;
    border: 1px solid #36C1FA !important;
    height: auto !important;
    transition: ease 0.2s;
}

.attention_keyword_list li span {
    display: none !important;
}

.faq_tag_search_overlay_container{
    padding-top: 60px !important;
    height: 95%;
}

#faq_tag_search_overlay .faq_tag_search_header,
#faq_show .faq_tag_search_header{
    padding: 24px 24px 16px !important;
}

#faq_tag_search_overlay .faq_tag_search_text_input{
    gap: 8px !important;
}

#faq_tag_search_overlay .faq_tag_search_title{
    color: #414143 !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

#faq_tag_search_overlay .faq_tag_search_tag_area{
    padding: 24px 16px !important;
}

#faq_tag_search_overlay .faq_tag_search_text_input_icon svg {
    fill: #9e9e9e !important;
    width: 24px !important;
    height: 24px !important;
}

#faq_tag_search_overlay .faq_tag_search_result_area {
    flex: 1;
    overflow-y: scroll;
    padding: 16px !important;
    border-top: unset !important;
}

#faq_tag_search_overlay .faq_tag_search_icon {
    width: 35px !important;
    height: 35px !important;
    border-radius: 20px !important;
    background-color: #F5F5F6 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    color: #414143 !important;
    background-image: url(../images/front/ico_qst_monotone.svg) !important;
    background-size: 11px;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

#faq_tag_search_overlay .faq_tag_search_link path {
    fill: #787878 !important;
}

#faq_tag_search_overlay .faq_tag_search_content:hover {
    background-color: #f5f5f5 !important;
    border-radius: 8px !important;
}

#faq_tag_search_overlay ul.faq_tag_search_result {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#faq_tag_search_overlay .faq_tag_more_page_btn {
    width: 180px !important;
    height: 45px !important;
    border-radius: 32px !important;
    background-color: #36C1FA !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 44px !important;
    text-align: center !important;
    margin: 0 auto !important;
    cursor: pointer !important;
}

#faq_tag_search_overlay .tagify__tag[no_search="true"]{
    background-color: #0A4C6F !important;
}

/* 検索後サジェストタグ（Tagifyドロップダウン）のデザインを keyword_tag に統一 */
#faq_tag_search_overlay .faq-tags-suggestions .tagify__dropdown__item {
    background-color: #FFFFFF !important;
    color: #36C1FA !important;
    border: 1px solid #36C1FA !important;
    border-radius: 4px !important;
    padding: 4px 18px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    height: auto !important;
    text-shadow: none !important;
    transition: ease 0.2s;
}

#faq_tag_search_overlay .faq-tags-suggestions .tagify__dropdown__wrapper {
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
}


#faq_tag_search_overlay .faq-tags-suggestions .tagify__dropdown__item:hover {
    background-color: #36C1FA !important;
    color: #FFFFFF !important;
}

#faq_tag_search_overlay .faq-tags-suggestions .tagify__dropdown__item--active {
    background-color: #36C1FA !important;
    color: #FFFFFF !important;
}

/* --- 4. Information (お知らせ枠) --- */
.okw_parts_info_and_news {
    padding: 48px 0px 30px !important;
    margin: 0 auto 50px !important;
    width: 75vw !important;
    box-sizing: border-box !important;
}

/* ヘッダーのレイアウト */
.okw_parts_info_and_news .ttl_col {
    background: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    height: auto !important;
    padding: 0 0 4px 0 !important;
    margin-bottom: 15px !important;
}

/* .icoInf を再利用してアイコンを表示 */
.icoInf {
    background: url("https://dyc7a1957gj3w.cloudfront.net/uploads/BD-FMV8NW/image/7307/b9f4d1a9-d1b2-4c97-aa8b-b6f154b1ef31.svg") no-repeat left center / 22px !important;
    padding: 0 0 0 30px !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #016CA3 !important;
    height: auto !important;
    display: inline-block !important;
}

.newsList li {
    background: none !important;
    border-bottom: 1px solid #CCCCCC !important;
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    transition: transform 0.2s ease;
}

.newsList li:hover {
    opacity: 0.7;
}

.datetime {
    line-height: 1.2 !important;
    margin-right: 12px !important;
    white-space: nowrap !important;
    color: #5B5B5F !important;
}

.infoTxt{
    color: #5B5B5F !important;
}

.infoTxt a{
    color: #5B5B5F !important;
    text-decoration: unset !important;
}

.okw_parts_category {
    padding: 30px 0px !important;
    margin: 0 auto 50px !important;
    width: 75vw !important;
    box-sizing: border-box !important;
}

.icoCate {
    background: url(https://dyc7a1957gj3w.cloudfront.net/uploads/BD-FMV8NW/image/7304/0e110247-41ce-4455-88be-c43e96b19a64.svg) no-repeat left center / 22px !important;
    padding: 0 0 0 30px !important;
    font-size: 24px !important;
    font-weight: bold !important;
    color: #016CA3 !important;
    height: auto !important;
    display: inline-block !important;
}

/* =====================================================
   カテゴリカードデザイン（サイズ調整 & アニメーション）
   ===================================================== */

/* カード全体のレイアウト */
.cateList_area .cateList_box {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin: 20px 0 !important;
}

.cateList_3line {
    width: 32% !important;
    float: none !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    padding: 24px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    border: none !important;
    /* ホバー時のための設定 */
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    position: relative !important; /* ストレッチリンクの基準点 */
    align-items: flex-start !important;
}

/* ストレッチリンク：リンクを親要素全体に広げる */
.cateList_3line .cate_middle a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 10 !important; /* カード全体を覆う */
}

/* ホバーアニメーション（小さくなる） */
.cateList_3line:hover {
    transform: scale(0.97) !important; /* 押し込まれる動き */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    background-color: #fcfcfc !important;
}

/* イラストエリア */
.cate-card-illustration {
    flex-shrink: 0;
    width: 80px; /* 少しコンパクトに調整 */
    height: 80px;
}
.cate-card-illustration img {
    width: 100% !important;
    height: auto !important;
    margin-left: 0 !important;
}

/* テキストエリア */
.cate-card-content {
    flex-grow: 1;
}

/* カテゴリ名：16px */
.cate_middle {
    padding: 0 !important;
    margin-bottom: 12px !important;
    margin-top: 4px !important;
}
.cate_middle a {
    display: flex !important;
    align-items: center !important;
    font-size: 16px !important; /* 指定サイズ */
    font-weight: 700 !important;
    color: #414143 !important;
    text-decoration: none !important;
    gap: 8px;
    line-height: 1.4 !important;
}

.cate-title-icon {
    width: 18px; /* 文字サイズに合わせて少し縮小 */
    height: 18px;
    object-fit: contain;
}

/* 概要文：12px */
.cate-description {
    font-size: 12px !important; /* 指定サイズ */
    color: #5B5B5F;
    line-height: 1.6 !important;
    margin: 0;
}

/* .icoQa を再利用してアイコンを表示 */
.icoQa {
    background: none !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #016CA3 !important;
    height: auto !important;
    display: inline-block !important;
}

.icoNew {
    background: none !important;
    padding: 0 !important;
    font-size: 22px !important;
    font-weight: bold !important;
    color: #016CA3 !important;
    height: auto !important;
    display: inline-block !important;
}

.okw_parts_category .ttl_col{
    background: none !important;
    height: auto !important;
}

.okw_parts_access_rank_faq .ttl_col{
    background: none !important;
    height: auto !important;
}

.okw_parts_new_faq .ttl_col{
    background: none !important;
    height: auto !important;
}

/* --- 6. その他不要パーツ --- */
.topLink, .faq_cate_col { display: none !important; }

#okw_footer_default {
    text-align: center !important;
    padding: 40px 0 !important;
    background: transparent !important;
    border: none !important;
    display: none !important;
}

/* --- 【追記】パンくずリストのデザイン調整 --- */
#faq_show #okw_sub_header {
    display: block !important; /* 記事ページのみ表示 */
    margin-bottom: 24px !important;
}

/* --- 2. 不要パーツの非表示設定（更新） --- */
/* 文字サイズ変更ボタンを全ページで非表示にします */
#fontCol {
    display: none !important;
}

/* サブヘッダー（パンくずリスト等）を一旦全ページで非表示にします */
#okw_sub_header {
    display: none !important;
}

/* 修正：コンテナ自体は残し、中にあるアイコン（.icoQ）や不要な回答見出しだけを消す */
.faq_ans_bor.faq_ans_ttl,
.icoPrint {
    display: none !important;
}

/* 質問コンテナ自体は表示させる */
.faq_qstCont_col {
    display: block !important;
}

/* --- 記事ページ（#faq_show）のみパンくずリストを表示 --- */
#faq_show #okw_sub_header {
    display: block !important;
    margin-bottom: 24px !important;
}

/* パンくずリスト自体のデザイン調整 */
.okw_bread {
    font-size: 13px !important;
    color: #5B5B5F !important;
}

.okw_main_faq .okw_bread li a:link {
    color: #5B5B5F !important; /* リンクはb→dash水色 */
    text-decoration: none !important;
}

.okw_bread {
    font-size: 13px !important;
    color: #5B5B5F !important;
}

/* --- 【追記】最下部の戻るボタン用エリア --- */
.bottom-back-btn-area {
    margin-top: 60px !important;
    border-top: 1px solid #E6E6E7 !important; /* 本文との区切り線 */
    padding-top: 32px !important;
    border-bottom: none !important;
}

.icoHot{
    background-image: unset;
    padding: 0;
}

.ttl_bg{
    background: unset;
    height: auto;
    padding: 4px;
}

.okw_main_faq .imglink-box._vertical {
    display: block !important;
}

.okw_main_faq .imglink-box {
    margin: 2em 0 !important;
    display: flex !important;
}

.okw_main_faq .imglink-box._vertical .imglink-list {
    margin: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.okw_main_faq .imglink-box .imglink-list {
    padding: 0;
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.okw_main_faq a:link {
    color: #0CAAEB !important;
    text-decoration: underline !important;
}

.okw_main_faq .imglink-box._vertical .imglink-list li {
    margin: 0.5em 10px 0;
}
.okw_main_faq .imglink-box .imglink-list li {
    list-style: none;
}

.okw_main_faq .imglink-box .imglink-list li a {
    display: block;
    padding: 8px;
    background-color: #F5F5F6;
    border-radius: 32px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    color: #0CAAEB !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.75;
    letter-spacing: 0.04em;
}
.okw_main_faq .faq_ans_col a {
    color: #0CAAEB;
    text-decoration: underline;
}

.okw_main_faq .imglink-box .imglink-list li a:before {
    content: "1";
    display: inline-block;
    margin: 0 8px 0 0;
    width: 26px;
    height: 26px;
    border-radius: 16px;
    background-color: #0CAAEB;
    color: #fff;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.okw_main_faq strong{
    color: #0CAAEB;
    font-weight: 700;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(2) a:before {
    content: "2";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(3) a:before {
    content: "3";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(4) a:before {
    content: "4";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(5) a:before {
    content: "5";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(6) a:before {
    content: "6";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(7) a:before {
    content: "7";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(8) a:before {
    content: "8";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(9) a:before {
    content: "9";
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(10) a:before {
    content: "10";
}

.okw_main_faq h3 {
    padding: 8px 0 8px 16px !important;
    margin: 56px 0 16px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
    border-radius: 8px !important;
    background-color: #F5F5F6 !important;
    color: #515153 !important;
}

.okw_main_faq h4 {
    margin: 24px 0;
    border-top: 2px solid #E6E6E7;
    border-bottom: 2px solid #E6E6E7;
    padding: 8px 16px;
    color: #5B5B5F;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.okw_main_faq .box p{
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    margin: 16px 0 24px 24px !important;
}

.okw_main_faq .box p img{
    width: 650px !important;
    margin-left: 48px !important;
    height: auto !important;
}

.okw_main_faq div{
    color: #515153 !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

.okw_main_faq .box h5 {
    margin-left: 0px !important;
}

.okw_main_faq .box._lightblue{
    background-color: #F0F9FF !important;
}

#faq_answer_contents .su-spoiler a{
    text-decoration: underline !important;
    color: #0CAAEB !important;
}

#faq_answer_contents .su-spoiler .su-spoiler-content h5{
    margin: 40px 24px 8px !important;
    padding: 0 8px !important;
    color: #5B5B5F !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
    border-left: 5px solid !important;
}

#faq_answer_contents .su-spoiler p{
    margin-left: 0px !important;
}

#faq_answer_contents .su-spoiler p img{
    margin-left: 48px !important;
}

#faq_answer_contents .su-spoiler .su-u-trim>:first-child {
    margin-top: 0 !important;
}

.okw_main_faq h5 {
    margin: 40px 24px 8px;
    padding: 0 8px;
    color: #5B5B5F;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    border-left: 5px solid;
}

.okw_main_faq h6 {
    margin: 24px 0px 0px 32px;
    color: #5B5B5F;
    font-weight: 600;
}

.okw_main_faq .faq_ans_col p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
    margin: 16px 0 24px 32px !important;
    color: #515153 !important;
}


.okw_main_faq .imglink-box {
    margin: 2em 0 !important;
    display: flex !important;
    gap: 12px !important;
}

.okw_main_faq .imglink-box .imglink-list {
    padding: 0 !important;
    width: 30% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.okw_main_faq .imglink-box .imglink-list li a {
    display: block !important;
    padding: 8px !important;
    background-color: #F5F5F6 !important;
    border-radius: 32px !important;
    text-decoration: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #0CAAEB !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.75 !important;
    letter-spacing: 0.04em !important;
}

.okw_main_faq .imglink-box .imglink-list li {
    list-style: none !important;
}

.okw_main_faq .imglink-box .imglink-list li a:before {
    content: "1" !important;
    display: inline-block !important;
    margin: 0 8px 0 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 16px !important;
    background-color: #0CAAEB !important;
    color: #fff !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(2) a:before{
    content: "2" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(3) a:before{
    content: "3" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(4) a:before{
    content: "4" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(5) a:before{
    content: "5" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(6) a:before{
    content: "6" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(7) a:before{
    content: "7" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(8) a:before{
    content: "8" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(9) a:before{
    content: "9" !important;
}

.okw_main_faq .imglink-box .imglink-list li:nth-child(10) a:before{
    content: "10" !important;
}

/* =====================================================
   ソースコード箇所
   ===================================================== */

.hcb_wrap {
    position: relative;
    z-index: 0;
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0;
}

.hcb_wrap .hcb-clipboard {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    padding: 0;
    text-align: center;
    background-color: hsla(0, 0%, 100%, .8);
    background-image: url(https://support.smart-bdash.com/wp-content/plugins/highlighting-code-block/assets/img/clipborad.svg);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 16px auto;
    border: none;
    border-radius: 1px;
}

.hcb_wrap pre.prism {
    font-size: 14px;
}

.hcb_wrap pre.line-numbers {
    position: static;
    padding-left: 3.75em;
    counter-reset: linenumber;
}
.hcb_wrap pre, .hcb_wrap pre code {
    color: #f8f8f2;
    text-shadow: 0 1px #1a1a1a;
    background: #34352e;
}
.hcb_wrap pre {
    font-family: Menlo, Consolas, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
.hcb_wrap pre {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.hcb_wrap pre {
    position: static;
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 1.75em 1.5em;
    overflow: auto;
    font-family: Menlo, Consolas, Hiragino Kaku Gothic ProN, Hiragino Sans, Meiryo, sans-serif;
    line-height: 1;
    letter-spacing: .1px;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
}
.hcb_wrap code, .hcb_wrap pre {
    white-space: pre;
    text-align: left;
    word-wrap: normal;
    word-break: normal;
    word-spacing: normal;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    border: none;
}

.hcb_wrap pre.line-numbers>code {
    position: relative;
    white-space: inherit;
}
.hcb_wrap pre, .hcb_wrap pre code {
    color: #f8f8f2;
    text-shadow: 0 1px #1a1a1a;
    background: #34352e;
}
.hcb_wrap code, .hcb_wrap span {
    box-sizing: border-box;
    font-size: inherit;
    font-family: inherit;
    line-height: 1.5;
}

.token.constant, .token.deleted, .token.important, .token.property, .token.symbol, .token.tag {
    color: #ff2c78;
}

.token.attr-name, .token.builtin, .token.char, .token.class-name, .token.inserted, .token.selector {
    color: #b4ec43;
}

.token.atrule, .token.attr-value, .token.function, .token.string {
    color: #f3e880;
}

.token.punctuation {
    color: #f8f8f2;
}

.su-image-carousel {
    margin: 1.5em 0;
    width: 100%;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.su-image-carousel-slides-style-default .su-image-carousel-item-content span {
    right: 4px;
    bottom: 4px;
    left: 4px;
    padding: .5em .7em;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, .7)), to(transparent));
    background: linear-gradient(to top, rgba(0, 0, 0, .7), transparent);
    color: #fff;
    text-shadow: 0 2px 5px #000;
}
.su-image-carousel-item-content span:empty {
    display: none;
}
.su-image-carousel-item-content span {
    position: absolute;
    display: block;
    overflow: auto;
    max-height: 60%;
    word-wrap: break-word;
    font-size: .9em;
    line-height: 1.3;
}

.su-image-carousel-item {
    box-sizing: border-box;
    width: 100%;
}

.su-image-carousel-slides-style-default .su-image-carousel-item-content {
    margin: 1px;
}

.su-image-carousel-item-content {
    position: relative;
}

.su-image-carousel-slides-style-default .su-image-carousel-item-content img{
    padding: 3px;
    border: 1px solid #ccc;
    border-radius: 7px;
    background: #fff;
}

.su-image-carousel-item-content a,
.su-image-carousel-item-content a:active,
.su-image-carousel-item-content a:focus,
.su-image-carousel-item-content a:hover,
.su-image-carousel-item-content a:visited,
.su-image-carousel-item-content img {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    text-decoration: none;
}

a:visited{
    color: #515153 !important;
}

img:is([sizes=auto i],[sizes^="auto," i]) {
    contain-intrinsic-size: 3000px 1500px;
}

/* =====================================================
   Flickity 表示バグ修正（追加）
   ===================================================== */

/* カルーセルのアイテムが正しく認識されるように設定 */
.su-image-carousel-item {
    width: 100% !important; /* 1枚ずつ表示する場合 */
    height: auto !important;
    min-height: 200px; /* 読み込み中の崩れ防止 */
    display: block;
    float: left;
}

/* ビューポートの高さが0になるのを防止 */
.flickity-viewport {
    transition: height 0.3s ease;
    min-height: 200px; /* 最小の高さを確保 */
}

/* 画像自体の表示設定 */
.su-image-carousel-item-content img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
    display: block !important; /* PKSHA標準の非表示設定を上書き */
}

/* ボタンが消えるのを防ぐ */
.flickity-prev-next-button {
    z-index: 10;
}

/* =====================================================
   記事リストデザイン（よく見られている記事 / 新着記事）最終調整
   ===================================================== */

/* 1. 2カラムの親要素にFlexboxを適用して64pxの余白を作る */
.colArea:has(.okw_parts_access_rank_faq) {
    display: flex !important;
    justify-content: space-between !important;
    gap: 48px !important; /* 指定の余白 */
    width: 75vw !important;
    margin: 0 auto 50px !important;
}

.okw_parts_access_rank_faq, 
.okw_parts_new_faq {
    width: calc(50% - 32px) !important; /* 余白64pxを考慮した幅計算 */
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. 見出しのデザイン（線の色: #016CA3） */
.okw_parts_access_rank_faq .ttl_col, 
.okw_parts_new_faq .ttl_col {
    border-bottom: 1px solid #016CA3 !important; /* 指定の色 */
    margin-bottom: 4px !important;
    padding-bottom: 12px !important;
    background: none !important;
    height: auto !important;
}

.okw_parts_access_rank_faq .ttl_bg, 
.okw_parts_new_faq .ttl_bg {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #016CA3 !important; /* 指定の色 */
    background: none !important;
    padding: 0 !important;
}

/* 3. 各記事アイテムのデザイン */
.qaList li, .faqList li {
    background: none !important;
    padding: 32px 0 !important; /* 24pxから拡大 */
    margin: 0 !important;
    border-bottom: 1px dashed #E6E6E7 !important;
    list-style: none !important;
}

.qaList li:last-child, .faqList li:last-child {
    border-bottom: none !important;
}

/* 記事タイトル：省略させずに複数行表示を許可 */
.qaList li a, .faqList li a {
    display: block !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #414143 !important;
    line-height: 1.5 !important; /* 行間を少し広げて読みやすく */
    margin-bottom: 12px !important;
    text-decoration: none !important;
    /* 省略設定を解除 */
    white-space: normal !important; 
    overflow: visible !important;
    text-overflow: clip !important;
}

.qaList li a:hover, .faqList li a:hover {
    color: #016CA3 !important;
}

/* 記事本文（16px / #5B5B5F） */
.article-snippet {
    display: block !important;
    font-size: 14px !important;
    color: #5B5B5F !important;
    line-height: 1.8 !important;
    margin: 0 !important;
    /* 2行以上になる場合は三点リーダーにする */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; 
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* モバイル対応：1カラム化 */
@media screen and (max-width: 1200px) {
    .colArea:has(.okw_parts_access_rank_faq) {
        width: 100% !important;
        flex-direction: column !important;
        gap: 40px !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
    .okw_parts_access_rank_faq, .okw_parts_new_faq {
        width: 100% !important;
    }
}


/* =====================================================
   b→dash サポートサイト：ブランドカラー完全適用CSS
   （1200px幅・手打ち目次・b→dashブルー準拠）
   ===================================================== */

:root {
    /* b→dash ブランドカラー定義（SCSS準拠） */
    --b-brand-main: #0CAAEB;        /* $brand-500: メインの青 */
    --b-brand-pale: #F0F9FF;        /* $brand-50: H2背景などの薄い青 */
    --b-brand-accent: #B9E7FE;      /* $brand-200: アンダーライン等のアクセント */
    --b-neutral-dark: #2D3745;      /* Figma指定: 見出し・強調テキスト色 */
    --b-neutral-body: #5B5B5F;      /* Figma指定: 本文テキスト色 */
    --b-neutral-bg: #F5F5F6;        /* $neutral-50: H3背景などのグレー */
    --b-border-light: #E6E6E7;      /* $neutral-100: 境界線 */
}

/* --- 1. 全体レイアウト：1200px固定 ＆ 見切れ防止 --- */
/* ヘッダー（65px）によるコンテンツの隠れを解消し、中央寄せを行います */
#faq_show #okw_contents,
#info_and_news_show #okw_contents,
#category_show #okw_contents,
#category_search #okw_contents {
    padding-top: 65px !important; 
}

#okw_contents_base {
    width: 90vw !important;
    margin: 0 auto !important;
    padding-right: 0 !important;
    background: none !important;
    position: relative !important;
}

#okw_contents_inner {
    background: #FFFFFF !important;
    padding: 32px 0 !important;
    box-sizing: border-box !important;
}

/* --- 2. 不要な標準パーツの非表示 --- */
/* 復活した「回答」の文字や、中間のカテゴリー表示を完全に消去します */
.faq_ans_bor.faq_ans_ttl {
    display: none !important;
}

/* --- 3. 戻る・閉じるボタン（.siteLink）のデザイン --- */
/* 矢印付きの丸角グレーボタンに変更します */
.faq_qstInf_col {
    border: none !important;
    margin: 0 0 32px !important;
    padding: 0 !important;
}

.siteLink {
    display: inline-block !important;
    margin: 0 !important;
}

.siteLink li.preLink, 
.siteLink li.closeLink {
    background: none !important;
    padding: 0 !important;
}

.siteLink li.preLink a,
.siteLink li.closeLink a {
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid #ebebeb;
    color: #414143 !important;
    padding: 8px 24px !important;
    border-radius: 40px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.siteLink li.preLink a::before,
.siteLink li.closeLink a::before {
    content: "＜" !important;
    margin-right: 8px !important;
    font-size: 10px !important;
    font-weight: bold !important;
}

.siteLink li.preLink a:hover,
.siteLink li.closeLink a:hover {
    background-color: #E6E6E7 !important;
    color: #414143 !important;
}

.faq_dateNo{
    font-family: "Noto Sans CJK JP",sans-serif !important;
}

/* .faq_dateNo li.faq_date{
    display: none !important;
} */

.icoPrint{
    display: none !important;
}

/* --- 3. 本文全体の基本設定 --- */
#faq_show {
    font-family: "Noto Sans CJK JP",sans-serif !important;
    height: 100vh;
}
#faq_answer_contents { 
    color: var(--b-neutral-body) !important; 
    line-height: 2.0 !important; 
    font-size: 16px !important; 
}

/* --- 1. 記事詳細レイアウト：2カラム・サイドバー構成 --- */
#faq_show #okw_contents {
    padding-top: 65px !important;
}

/* --- 1. レイアウト設定（重なり防止の要） --- */
.faq-article-layout {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    width: 100% !important;
}

/* 本文カラム：幅が狭まった時に中の要素を強制的に縮めさせる設定 */
.faq-main-column {
    flex: 1 !important;
    min-width: 0 !important; /* はみ出しを物理的に防ぐ重要プロパティ */
}

/* サイドバー：横幅を328pxで固定 */
.faq-side-column {
    width: 25vw !important;
    position: sticky !important;
    top: 90px !important;
    flex-shrink: 0 !important;
    margin-left: 40px !important;
}

/* --- 2. 不要パーツの非表示設定 --- */
.faq_ans_bor.faq_ans_ttl {
    display: none !important;
}

/* --- 3. 目次（#toc_container）をサイドバー用にリデザイン --- */
#toc_container, .toc_widget {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
}

.toc_title {
    font-size: 16px !important;
    font-weight: 700 !important;
    background: url(https://support.smart-bdash.com/wp-content/themes/bdash_support/assets/images/base/ico_toc.svg) no-repeat left center / 16px auto !important;
    padding-left: 24px !important;
    color: #5B5B5F;
    margin-bottom: 20px !important; /* タイトル下の余白 */
    line-height: 1.5;
    letter-spacing: 0.04em;
}

#toc_container ul.toc_list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* h2（大項目）の設定：間隔 16px */
.toc_item_h2 {
    margin-top: 16px !important; /* 項目上の間隔を16pxに */
    list-style: none !important;
}
.toc_item_h2:first-child {
    margin-top: 0 !important;
}

.toc_item_h2 > a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5B5B5F !important;
    text-decoration: none !important;
}

/* h3（小項目）を包むリスト：1文字分インデント */
.toc_child_list {
    margin-top: 8px !important;    /* 親h2との間隔 */
    margin-left: 1em !important;   /* 【修正】1文字分右にズラす */
    padding: 0 !important;
    list-style: none !important;
}

/* h3（小項目）単体の設定：間隔 8px */
.toc_item_h3 {
    margin-bottom: 8px !important; /* 【修正】h3同士の間隔を8pxに */
    list-style: none !important;
}
.toc_item_h3:last-child {
    margin-bottom: 0 !important;
}

.toc_item_h3 a {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #5B5B5F !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/* アクティブ（スクロール追従）時の色強調 */
#toc_container ul.toc_list li a.active {
    color: #0CAAEB !important;
    font-weight: 700 !important;
}

#toc_container ul.toc_list li {
    margin: 0; 
    padding: 0 !important;
    list-style: none !important;
}

#toc_container ul.toc_list li a {
    text-decoration: none !important;
    transition: all 0.3s ease;
    color: #5B5B5F !important;
    font-weight: 500 !important;
}

#toc_container ul.toc_list li a:hover {
    color: #0CAAEB !important;
    text-decoration: none !important;
}

/* 子要素（2.1 など）の字下げ */
#toc_container ul.toc_list ul {
    margin-top: 8px !important;
}


/* --- 5. 見出し全階層 (h2 〜 h6) b→dash専用配色 --- */
#faq_answer_contents h2 {
    background: var(--b-brand-pale) !important; /* 薄い青 */
    border-left: solid 7px var(--b-brand-main) !important; /* メインの青 */
    color: var(--b-brand-main) !important;
    padding: 12px 20px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin: 48px 0 16px !important;
    border-radius: 0 4px 4px 0 !important;
}
#faq_answer_contents h3 {
    background-color: var(--b-neutral-bg) !important; /* 薄いグレー */
    color: #515153 !important;
    padding: 12px 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    margin: 32px 0 24px !important;
    border-radius: 4px !important;
}
#faq_answer_contents h4 { 
    color: #515153 !important; 
    font-size: 17px !important; 
    font-weight: 700 !important; 
    margin: 25px 0 15px !important; 
}

#faq_answer_contents h5 { 
    border-left: 5px solid #515153 !important;
    padding: 0 16px !important; 
    font-size: 16px !important; 
    font-weight: 700 !important; 
    color: var(--b-neutral-body) !important; 
    margin: 40px 0 8px 0 !important; 
}
#faq_answer_contents h6 { 
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--b-neutral-body) !important;
    margin: 24px 0 0 40px !important;
    line-height: 2;
}

#faq_answer_contents p{
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 0.04em;
    margin: 16px 0 16px 24px;
    padding-left: 0 !important;
}

/* p直後のh6、h6直後のpは余白を詰めて一続きの注釈として見せる */
/* ただし画像を含むpは除外（画像とテキストの距離を確保するため） */
#faq_answer_contents p:has(+ h6):not(:has(img)),
.okw_main_faq .faq_ans_col p:has(+ h6):not(:has(img)) {
    margin-bottom: 8px !important;
}
#faq_answer_contents p + h6,
.okw_main_faq .faq_ans_col p + h6 {
    margin-top: 0 !important;
}
#faq_answer_contents h6 + p:not(:has(img)),
.okw_main_faq .faq_ans_col h6 + p:not(:has(img)) {
    margin-top: 8px !important;
}

/* h6直後が画像入りpの場合は、画像との距離を十分に確保する */
#faq_answer_contents h6 + p:has(img),
.okw_main_faq .faq_ans_col h6 + p:has(img) {
    margin-top: 32px !important;
}

/* --- 6. 博士ボックス・アンダーライン (b→dashブルー) --- */
.box-doctor {
    margin: 32px 0 48px 100px !important;
    border: 2px solid #0CAAEB !important;
    border-radius: 8px;
    padding: 20px !important;
    background-color: #fff !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: auto !important;
    color: #515153 !important;
    line-height: 1.7 !important;
    max-width: 100% !important;
}

.okw_main_faq .box-doctor a{
    color: #0CAAEB !important;
    font-weight: 500 !important;
    text-decoration: underline;
}

#faq_answer_contents .okw_main_faq .box-doctor a{
    color: #0CAAEB !important;
    font-weight: 500 !important;
    text-decoration: underline;
}

.box-doctor::before {
    content: ""; 
    width: 70px; 
    height: 70px; 
    position: absolute; 
    left: -90px; 
    top: 0; 
    bottom: 0; 
    margin: auto;
    background: url(https://support.smart-bdash.com/wp-content/themes/bdash_support/assets/images/base/doctor@2x.png) no-repeat center/contain;
}

.box-doctor::after {
    content: ""; width: 14px; height: 14px; background: #fff; 
    border-top: 2px solid var(--b-brand-main); 
    border-left: 2px solid var(--b-brand-main);
    position: absolute; left: -9px; top: 0; bottom: 0; margin: auto; transform: rotate(-45deg);
}

/* --- 3. 画像のはみ出し防止 --- */
/* 本文内の画像がサイドバーを突き破らないようにします */
#faq_answer_contents img, 
.wzd_qstCont_txt img {
    max-width: 100% !important;
    height: auto !important;
    margin: -8px 0 24px 0 !important;
}

strong.underline { position: relative; z-index: 1; }
strong.underline::before { 
    content: ""; width: 100%; height: 7px; 
    background-color: var(--b-brand-accent); /* 水色の下線 */
    position: absolute; bottom: 0; left: 0; border-radius: 7px; z-index: -1; 
}

/* 表デザイン */
@font-face {
    font-family: 'wpDataTablesIcons'!important;
    src: url(../fonts/wpDataTablesIcons.eot);
    src: url(../fonts/wpDataTablesIcons.eot?#iefix) format('embedded-opentype'),url(../fonts/wpDataTablesIcons.woff) format('woff'),url(../fonts/wpDataTablesIcons.ttf) format('truetype'),url(../fonts/wpDataTablesIcons.svg#wpDataTablesIcons) format('svg')
}

.wpdt-c {
    margin: 0 32px;
}

.wpdt-c.wpDataTableContainerSimpleTable {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable {
    display: table;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
    clear: both;
    margin: 0 auto;
    width: 100%;
    table-layout: auto;
    overflow: auto;
    text-align: center
}

.wpdt-c.wpDataTableContainerSimpleTable.wdtscroll {
    width: 100%;
    overflow-x: auto
}

.wpdt-c.wpDataTableContainerSimpleTable.wdtscroll table.wpdtSimpleTable {
    position: static;
    width: max-content!important;
    table-layout: fixed
}

.wpdt-c.wpDataTableContainerSimpleTable.wdtscroll table.wpdtSimpleTable td {
    white-space: normal
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.even td.wpdt-cell,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.odd td.wpdt-cell,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.even td.wpdt-cell,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.odd td.wpdt-cell,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td {
    border: 1px solid #ccc;
    height: 22px;
    empty-cells: show;
    line-height: 21px;
    padding: 10px;
    vertical-align: middle;
    text-align: center;
    overflow: hidden;
    word-break: normal
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable {
    font-size: inherit
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td {
    background-color: #fff
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th {
    cursor: default;
    background-color: #eee;
    white-space: normal;
    font-weight: 400;
    background-image: none!important;
    box-shadow: none;
    text-shadow: none
}

.wpdt-c .wdt-datatables-admin-wrap div.wpDataTableContainerSimpleTable .wpdtSimpleTable tr.even,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable tr.even {
    background-color: #eee
}

.wpdt-c .wpDataTableContainerConfigSimpleTable .handsontable td {
    padding: 10px;
    font-size: inherit;
    vertical-align: middle;
    white-space: normal;
    height: 21px
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:first-child,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:first-child,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:first-child,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:first-child,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:last-child,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:last-child,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:last-child,.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:last-child {
    border: 1px solid #ccc
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr:last-child td {
    border-bottom-color: #ccc
}

#faq_answer_contents .wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td img {
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
}

.wpdt-c .wpDataTableContainerConfigSimpleTable .handsontable td ul,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td ul {
    list-style-type: initial;
    margin-left: 2em
}

.wpdt-c .wpDataTableContainerConfigSimpleTable .handsontable td ul li,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td ul li {
    text-align: initial
}

.wpdt-c .wpDataTableContainerConfigSimpleTable .wpdtSimpleTable tr.even td,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable tr.even td {
    background: #eee
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td.wpdt-empty-cell,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable th.wpdt-empty-cell {
    white-space: pre-line
}

.wpdt-c.wpDataTableContainerConfigSimpleTable table td a[data-link-content="wpdt-link-content"] button,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td.wpdt-cell a[data-link-content="wpdt-link-content"] button {
    background-color: #4CAF50;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    text-decoration: none;
    font-size: 16px;
    color: #FFF;
    cursor: pointer;
    word-break: break-word
}

.wpdt-c.wpDataTableContainerConfigSimpleTable table td a[data-link-content="wpdt-link-content"] button:hover,.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable td.wpdt-cell a[data-link-content="wpdt-link-content"] button:hover {
    background-color: #449d48
}

.wpdt-modals .wpdt-star-rating,.wpdt-c .wpdt-star-rating {
    font-size: 45px;
    width: 100%
}

.wpdt-c .wpdt-bold {
    font-weight: bold!important
}

.wpdt-c .wpdt-italic {
    font-style: italic!important
}

.wpdt-c .wpdt-underline {
    text-decoration: underline!important
}

.wpdt-c .wpdt-align-left {
    text-align: left!important
}

.wpdt-c .wpdt-align-right {
    text-align: right!important
}

.wpdt-c .wpdt-align-center {
    text-align: center!important
}

.wpdt-c .wpdt-align-justify {
    text-align: justify!important
}

.wpdt-c .wpdt-valign-top {
    vertical-align: top!important
}

.wpdt-c .wpdt-valign-bottom {
    vertical-align: bottom!important
}

.wpdt-c .wpdt-valign-middle {
    vertical-align: middle!important
}

.wpdt-c .wpdt-overflow-text {
    white-space: nowrap!important;
    overflow: visible!important
}

.wpdt-c .wpdt-wrap-text {
    white-space: normal!important;
    overflow: visible!important
}

.wpdt-c .wpdt-clip-text {
    white-space: nowrap!important;
    overflow: hidden!important;
    text-overflow: ellipsis
}

.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable td.wpdt-cell span[data-content="wpdt-star-rating"],.wpdt-c .wpDataTableContainerConfigSimpleTable table td span[data-content="wpdt-star-rating"] {
    pointer-events: none!important
}

.wpdt-c .wpDataTableContainerConfigSimpleTable td span[data-content="wpdt-star-rating"] .jq-ry-container,.wpdt-c .wpDataTableContainerSimpleTable td.wpdt-cell span[data-content="wpdt-star-rating"] .jq-ry-container,.wpdt-c.wpDataTableContainerSimpleTable td.wpdt-cell span[data-content="wpdt-star-rating"] .jq-ry-container {
    padding: 0;
    margin: 0;
    display: inline-block;
    cursor: default!important
}

.wpdt-c .wpdtSimpleTable .wpdt-cell pre {
    overflow: auto
}

.wpdt-c .rating {
    border: none
}

.wpdt-c .rating>span {
    position: relative;
    display: inline-block
}

.wpdt-c .rating>span:after {
    margin: 5px;
    font-size: 1.25em;
    font-family: 'wpDataTablesIcons'!important;
    display: inline-block;
    content: "\f006"
}

.wpdt-c .rating>span.full.rated:after {
    color: gold
}

.wpdt-c .rating>span.full:after {
    color: #ccc
}

.wpdt-c .rating>.half:before {
    content: "\e92c";
    margin: 5px;
    font-size: 1.25em;
    font-family: 'wpDataTablesIcons'!important;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 1px;
    color: gold
}

.wpdt-c .rating>.half-reflect:after {
    content: "\e92c";
    font-family: 'wpDataTablesIcons'!important;
    transform: rotateY(180deg);
    color: #ccc
}

.wpdt-c table.bt thead,.wpdt-c table.bt tbody th {
    display: none
}

.wpdt-c table.bt tfoot th,.wpdt-c table.bt tfoot td,.wpdt-c table.bt tbody td {
    border: none;
    display: block;
    float: left\9;
    width: 100%\9
}

.wpdt-c table.bt tfoot th.bt-hide,.wpdt-c table.bt tfoot td.bt-hide,.wpdt-c table.bt tbody td.bt-hide {
    display: none
}

.wdt-res-wrapper.active {
    max-height: 310px;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.wpdt-c table.bt.bt--no-header tfoot td::before,.wpdt-c table.bt.bt--no-header tbody td::before {
    display: none
}

.wpdt-c table.wpdtSimpleTable.columnBlock td {
    display: block;
    height: auto!important;
    border: 1px solid #eee!important
}

.wpdt-c table.wpdtSimpleTable.bt td {
    height: auto!important;
    border: 1px solid #ccc!important;
    white-space: normal;
    width: 100%!important
}

.wpdt-c table.wpdtSimpleTable.bt[data-has-header='1'] td {
    width: 50%!important;
    float: left
}

table.wpdtSimpleTable.bt[data-has-header='1'] td.wpdt-header-classes {
    background-color: #eee
}

.wpdt-c table.wpdtSimpleTable.bt tr.even td:not(:last-child) {
    height: auto!important;
    border-bottom: 1px solid #fff!important
}

.wpdt-c table.wpdtSimpleTable.bt tr,.wpdt-c table.wpdtSimpleTable.columnBlock tr {
    border: 1px solid #ccc;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.wpdt-c.wpDataTableContainerSimpleTable {
    margin-top: 0;
    margin-bottom: 20px;
    padding: 0;
}
.wpdt-c {
    margin: 16px;
}

#faq_answer_contents table{
    border-color: unset;
    border-spacing: unset;
    box-sizing: unset;
    zoom: unset;
}

/* 親コンテナとテーブル本体の基本設定 */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(91, 91, 95, 0.1);
    border: 1px solid #E6E6E7 !important;
}

.faq_question table td, #faq_question_contents table td, #wizard_list table td{
    border-color: #eee !important;
    font-size: 14px !important;
}

/* 各セルの共通パディングとボーダー */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead th,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody th,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td {
  padding: .6em 3em;
  border-bottom: 1px solid #E6E6E7 !important;
}

/* ヘッダーとボディの見出し背景色 */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead th {
  background-color: #ddd;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody th {
  background-color: #eee;
}

/* 列間の垂直ボーダー設定 */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead th + th,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td {
  border-left: 1px solid #E6E6E7 !important;
}

/* 特定の列インデックスに対するボーダー制御 */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead th + th[data-col-index="0"],
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td[data-col-index="0"] {
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead th + th[data-col-index="1"],
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td[data-col-index="1"] {
  border-right: none !important;
  border-top: none !important;
}

/* 最終行のボーダーを消去 */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr:last-child th,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* 四隅の角丸調整（border-radius） */
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr:first-child th:first-child {
  border-radius: 8px 0 0 0;
  border: none;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr:first-child th:last-child {
  border-radius: 0 8px 0 0;
  border: none;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr:last-child th:first-child {
  border-radius: 0 0 0 8px;
  border: none;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr:last-child th:last-child {
  border-radius: 0 0 8px 0;
  border: none;
}

.wpdt-c .wpdt-align-left {
    text-align: left !important;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:first-child,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:first-child,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:first-child,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:first-child,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:last-child,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:last-child,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tr td:last-child,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable thead tr td:last-child{
    border: none;
}

.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.even td.wpdt-cell,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.odd td.wpdt-cell,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.even td.wpdt-cell,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody tr.odd td.wpdt-cell,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,
.wpdt-c.wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable th,
.wpdt-c .wpDataTableContainerSimpleTable .wpdtSimpleTable.wpDataTable tbody td{
border: none;
}

/* ===========================================
   PKSHA側のテーブル（cke5-table）のデザイン
   WordPress表（wpDataTable）と同じ見た目に揃える
   ※ セル背景色は記事側のインラインスタイルを尊重するため指定しない
   ※ rowspan/colspan を使っても罫線が消えないよう、
     「全セルに上＋左ボーダー」方式
   =========================================== */

/* テーブル本体：角丸・影・外枠 */
#faq_answer_contents table.cke5-table,
.okw_main_faq .faq_ans_col table.cke5-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #E6E6E7 !important;
    box-shadow:
        inset 1px 0 0 #fff,
        inset 0 1px 0 #fff,
        0 1px 2px rgba(91, 91, 95, 0.1) !important;
    margin: 16px 32px !important;
    width: calc(100% - 64px) !important;
    font-size: 14px !important;
}

/* 各セル：padding と「上・左」ボーダー（rowspan対応のため反転方式） */
#faq_answer_contents table.cke5-table td,
.okw_main_faq .faq_ans_col table.cke5-table td {
    padding: .5em !important;
    border-top: 1px solid #E6E6E7 !important;
    border-left: 1px solid #E6E6E7 !important;
    border-bottom: none !important;
    border-right: none !important;
    vertical-align: middle !important;
    font-family: "Noto Sans CJK JP", sans-serif !important;
    font-size: 16px !important;
    background-clip: padding-box !important;
}

#faq_answer_contents table.cke5-table td p,
.okw_main_faq .faq_ans_col table.cke5-table td p {
    font-size: 16px !important;
}

/* 四隅の角丸は table 本体の border-radius + overflow:hidden に任せるため、
   個別セルへの border-radius 指定は行わない（rowspan で誤マッチを防ぐ） */

/* セル内のp要素の余白をリセット */
#faq_answer_contents table.cke5-table td p,
.okw_main_faq .faq_ans_col table.cke5-table td p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
}

/* セル内の画像 */
#faq_answer_contents table.cke5-table td img,
.okw_main_faq .faq_ans_col table.cke5-table td img {
    max-width: 100% !important;
    height: auto !important;
    margin: 8px auto !important;
}

/* 表の1行目（見出し行）のセル内のstrongは黒文字に固定 */
#faq_answer_contents table.cke5-table tbody tr:first-child td strong,
.okw_main_faq .faq_ans_col table.cke5-table tbody tr:first-child td strong {
    color: #515153 !important;
    font-weight: 700;
}
 

#faq_answer_contents a{
    color: #0CAAEB !important;
    font-weight: 500;
    text-decoration: none;
    transition: ease 0.2s;
}

#faq_answer_contents .imglink-list a{
    text-decoration: none !important;
    transition: ease 0.2s !important;
}

#faq_answer_contents .imglink-list a:hover{
    opacity: 0.7 !important;
}

/* fancybox ------------------------------------------------- */
#fancybox-outer {
  height: auto !important;
}

a.fancybox.image {
  display: inline-block;
  position: relative;
  transform: none;
}

/* アコーディオン ---------------------------------------------- */

.su-spoiler {
  border-radius: 8px;
  border: 1px solid #E6E6E7;
  position: relative;
  overflow: hidden;
  padding: 24px;
  color: #5B5B5F;
  margin: 40px 32px 0;
  background-color: #FFFFFF;
}

.su-spoiler a {
  color: #0CAAEB;
  text-decoration: underline;
}

.su-spoiler .su-spoiler-title {
  border-radius: 0px !important;
  position: static !important;
  color: #5B5B5F !important;
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  border-bottom: none !important;
  /* @include h5 展開 */
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.04em !important;
}

.su-spoiler .su-spoiler-title span {
  border-bottom: 2px solid #F5F5F6; /* $color-border-secondary ($neutral-50) */
  padding-bottom: 8px; /* $spacing-small */
  display: block;
  width: 100%;
  position: relative;
}

.su-spoiler .su-spoiler-title span:before {
  position: absolute;
  content: " ";
  border-bottom: 3px solid #0CAAEB; /* $color-border-tertairy ($brand-500) */
  bottom: -2.5px;
  width: 50px;
}

.su-spoiler .su-spoiler-title:focus {
  outline: none;
}

.su-spoiler .su-tabs-nav span:focus {
  outline: none;
}

.su-spoiler .su-spoiler-icon {
  margin: auto;
  width: 100px !important;
  top: auto;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 8px 24px;
  text-align: center;
  background-color: #6B6C6F; /* $color-button-darkglay ($neutral-500) */
  border-radius: 32px; /* $border-radius-large */
  color: #fff;
  z-index: 10;
  border-bottom: none !important;
  position: absolute !important;
  /* @include h6 展開 */
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  transition: all 0.3s ease;
}

.su-spoiler .su-spoiler-icon::before {
  content: "Close" !important;
  border-bottom: none !important;
  font-family: "Noto Sans CJK JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    left: 52px;
    bottom: 7px !important;
}

.su-spoiler .su-spoiler-content {
  padding: 0 0 64px; /* ボタン用に下余白を多めに確保 */
  max-height: 100000px;
  transition: max-height 0.6s ease-in;
}

.su-spoiler.su-spoiler-closed > .su-spoiler-content {
    max-height: 16em;
    opacity: 1;
    position: relative;
    transition: none;
    padding: 0;
    overflow: hidden;
    border: none;
    pointer-events: none;
}

.su-spoiler .su-spoiler-icon:hover {
    opacity: 0.7;
}

.su-spoiler .su-u-trim>:first-child {
    margin-top: 0 !important;
}
.su-spoiler p {
    margin-left: 0px !important;
}

.su-spoiler.su-spoiler-closed > .su-spoiler-content::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  background: linear-gradient(rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.9) 70%, white 90%);
}

.su-spoiler.su-spoiler-closed .su-spoiler-icon {
  bottom: 20px;
}

.su-spoiler.su-spoiler-closed .su-spoiler-icon::before {
  content: "Open" !important;
  border-bottom: none !important;
  font-family: "Noto Sans CJK JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    left: 52px;
    bottom: 7px !important;
}

/* --- 4. 特殊ボックス (博士・アイコン) --- */

.box{
    margin: 40px 0 40px 24px;
    padding: 24px;
    border-radius: 8px;
    background-color: #FFFFFF;
    border: solid 1px #E6E6E7;
    max-width: 100%;
}

#faq_answer_contents .box img{
    margin: 0 auto !important;
    width: 700px !important;
}

.box :last-child {
    margin-bottom: 0 !important;
}
.box :first-child {
    margin-top: 0 !important;
}

.h-caution {
    margin: 0 0 24px;
    padding: 0 0 0 128px;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #5B5B5F;
}

.h-point {
    margin: 0 0 24px;
    padding: 0 0 0 105px;
    position: relative;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: #5B5B5F;
}


/* 注意・ポイントの見出し */
.h-caution:before {
    content: "";
    width: 159px;
    height: 28px;
    background: url(https://support.smart-bdash.com/wp-content/themes/bdash_support/assets/images/base/ico_caution.svg) no-repeat left top / contain;
    position: absolute;
    left: 0px;
    top: -1px;
}
.h-point:before {
    content: "";
    width: 89px;
    height: 28px;
    background: url(https://support.smart-bdash.com/wp-content/themes/bdash_support/assets/images/base/ico_point.svg) no-repeat left top / contain;
    position: absolute;
    left: 0px;
    top: -1px;
}

.faq_ans_col p img {
    margin: -8px 0 24px 24px;
}
img.size-full,
.cke5-image {
    width: 700px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(91, 91, 95, 0.1);
    margin: 16px 0 24px 24px;
}

#faq_answer_contents th {
    background-color: var(--color-accent-gray) !important;
    color: var(--color-primary) !important;
    font-weight: 700 !important;
}

#faq_answer_contents strong {
    color: var(--b-brand-main) !important;
    font-weight: 700 !important;
}

/* -----------------------------------------------------
   2. 追加：Shortcodes Ultimate スタイル
   （既存の su-spoiler 等は上記で保護されています）
   ----------------------------------------------------- */

.su-u-clearfix::after {
    content: '';
    display: table;
    clear: both
}

.su-u-trim>:first-child {
    margin-top: 0
}

.su-u-trim>:last-child {
    margin-bottom: 0
}

.su-u-responsive-media-yes {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden
}

.su-u-responsive-media-yes embed,.su-u-responsive-media-yes iframe,.su-u-responsive-media-yes object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

/* ボタン */
.su-button {
    display: inline-block!important;
    text-align: center;
    text-decoration: none!important;
    box-sizing: content-box!important;
    -webkit-transition: all .2s;
    transition: all .2s
}

.su-button-wide {
    display: block!important;
    margin: 1em 0
}

.su-button-center {
    text-align: center
}

.su-button span {
    display: block!important;
    text-decoration: none!important;
    box-sizing: content-box!important;
    -webkit-transition: all .2s;
    transition: all .2s
}

/* カラム */
.su-row {
    margin-bottom: 1.5em
}

.su-row::after {
    display: table;
    clear: both;
    content: ''
}

.su-row .su-column {
    display: block;
    float: left;
    box-sizing: border-box;
    margin: 0 0 0 4%
}

.su-row .su-column:first-child {
    margin-left: 0
}

.su-row .su-column-size-1-2 {
    width: 48%
}

/* タブ */
.su-tabs {
    margin: 0 0 1.5em;
    padding: 3px;
    border-radius: 3px;
    background: #eee
}

.su-tabs-nav span {
    display: inline-block;
    margin-right: 3px;
    padding: 10px 15px;
    min-height: 25px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #333;
    font-size: 13px;
    line-height: 20px;
    cursor: pointer;
    -webkit-transition: all .2s;
    transition: all .2s
}

.su-tabs-nav span:hover{
    background: #f5f5f5;
}

.su-tabs-nav span.su-tabs-current {
    background: #fff !important;
    cursor: default !important;
}

.su-tabs-pane {
    padding: 24px 16px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 13px
}

/* リスト・引用・その他 */
.su-list ul {
    margin: 0!important;
    padding: 0!important;
    list-style: none!important
}

.su-list ul li {
    position: relative;
    display: block!important;
    margin: 0!important;
    padding: 4px 0 4px 2em!important;
    list-style-type: none!important;
    line-height: 1.3em
}

.su-quote-style-default {
    position: relative;
    margin-bottom: 1.5em;
    padding: .5em 3em;
    font-style: italic
}

/* モバイル対応 */
@media screen and (max-width: 768px) {
    #okw_contents_base { width: 100% !important; }
    .su-row .su-column {
        float:none;
        width: 100%;
        margin: 0
    }
}

/* =====================================================
   サジェスト表示の最終修正（強制表示設定）
   ===================================================== */

/* サジェストボックス共通 */
.faq_suggest {
    position: absolute !important;
    background-color: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 9999999 !important; /* 最前面に */
    overflow-y: auto !important;
    padding: 8px 0 !important;
    margin-top: 5px !important;
    visibility: visible !important; /* 非表示設定を確実に上書き */
    opacity: 1 !important;
}

/* ヘッダー内サジェストの幅を固定（崩れ防止） */
#header .faq_suggest {
    width: 400px !important; 
    left: 0 !important;
    top: 100% !important;
}

/* 候補リストのデザイン */
.faq_suggest_link {
    display: block !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    text-align: left !important;
    color: #2D3745 !important;
}
.faq_suggest_link:hover { background-color: #F0F9FF !important; }
.faq_suggest_title { font-size: 14px !important; font-weight: 500 !important; }

/* =====================================================
   ウィザード記事ページのデザイン統一
   ===================================================== */

/* 1. ページ全体設定（通常記事と同期） */
body#faq_show #okw_contents_inner,
div#faq_show .faq_tags_modal_content {
    background: #FFFFFF !important;
    padding: 32px 24px !important;
    box-sizing: border-box !important;
}

/* 2. ウィザード質問タイトル（b→dashブルー） */
#faq_show .faq_qstCont_ttl {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0CAAEB !important; /* b→dashブルー */
    margin: 0 0 16px !important;
    border-bottom: 1px solid #F5F5F6 !important;
    padding-bottom: 16px !important;
    background: none !important;
}

#faq_show .icoQ {
    background: none !important; /* デフォルトのオレンジアイコン消去 */
    padding: 0 !important;
    width: 66vw !important;
}

/* 3. ウィザード質問文エリアのクリーンアップ */
#faq_show .wzd_qstCont_col {
    background-color: transparent !important; /* デフォルトの黄色背景を消去 */
    border: none !important;
    padding: 0 !important;
    margin: 0 0 32px 0 !important;
}

/* 質問文内のテキスト設定（通常記事と同期） */
.wzd_qstCont_txt {
    color: #5B5B5F !important;
    line-height: 2.0 !important;
    font-size: 16px !important;
}

/* 4. 選択肢エリア（ラジオボタン部分）のデザイン刷新 */
#faq_show .wzd_slct_area {
    background-color: #F5F5F6 !important; /* 薄いグレーの背景 */
    border-radius: 12px !important;
    padding: 32px !important;
    margin: 40px 0 !important;
}

/* 「どちらに当てはまるか選んでください」のメッセージ */
#faq_show .selecttxt {
    background: none !important;
    padding: 0 !important;
    margin-top: 24px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #5B5B5F !important;
    text-align: center !important;
}

/* 選択肢1行の設定 */
#faq_show .wzd_slct_col {
    padding: 12px 16px !important;
    background: #FFFFFF !important;
    border: 1px solid #E6E6E7 !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

#faq_show .wzd_slct_col:hover {
    border-color: #0CAAEB !important;
    box-shadow: 0 4px 12px rgba(12, 170, 235, 0.1) !important;
}

/* 選択肢のテキスト */
#faq_show .wzd_slct_col a {
    color: #414143 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
}

/* ラジオボタンアイコンのカスタマイズ */
#faq_show .chckbx_off, #faq_show .chckbx_on {
    background-position: left center !important;
    padding-left: 35px !important;
}

/* 5. ウィザード文中の見出しを通常記事と同期 */
.wzd_qstCont_txt h2 {
    background: #F0F9FF !important;
    border-left: solid 7px #0CAAEB !important;
    color: #0CAAEB !important;
    padding: 12px 20px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 40px 0 16px !important;
    border-radius: 0 4px 4px 0 !important;
}

.wzd_qstCont_txt h3 {
    background-color: #F5F5F6 !important;
    color: #2D3745 !important;
    padding: 12px 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 24px 0 16px !important;
    border-radius: 4px !important;
}

.wzd_qstCont_txt #toc_container{
    display: none !important;
}

/* 6. 「戻る」ボタンの装飾 */
.wzd_bck {
    display: none !important;
}

/* 修正後（推奨）：2カラムレイアウト内の回答エリアにのみ適用 */
.faq-main-column #faq_answer_contents {
    padding: 0 0 32px !important;
    border-bottom: 1px solid #E6E6E7 !important;
    margin-bottom: 24px !important;
    word-wrap: break-word !important;
    display: block !important; /* 強制表示 */
}

/* 中身が空の回答コンテナは表示しない（幽霊ボックス対策） */
.faq_ans_col:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 空のfaq_ans_colを強制非表示 */
#faq_show .faq_ans_col {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* 中身があるfaq_ans_colは表示（クラスで上書き） */
#faq_show .faq_ans_col.has-content {
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  margin: revert !important;
  padding: revert !important;
  overflow: visible !important;
}

#faq_show .faq_ans_col:empty{
    display: none !important;
}

/* =====================================================
   【最優先】検索結果画面 デザイン完全上書き
   ===================================================== */

/* 1. ページ全体とメインコンテナの初期化 */
body#category_search {
    background-color: #FFFFFF !important;
}

/* 既存の回り込みやマージンをリセット */
#category_search #okw_contents_base,
#category_search #okw_contents_inner,
#category_search .colArea {
    width: 90vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    float: none !important;
    overflow: visible !important;
}

/* 2. ヒーローエリア（検索ボックス・フルワイド青背景） */
#category_search .okw_parts_faq_tag_search {
    background-color: #F0F9FF !important;
    padding: 120px 0 60px !important;
    text-align: center !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box !important;
    border: none !important;
    display: block !important;
    float: none !important;
    margin-bottom: 0 !important;
    z-index: 10 !important;
}

/* 既存のb→dashロゴを検索結果画面では消す */
#category_search .okw_parts_faq_tag_search::before {
    display: none !important;
}

/* 見出し：キーワード検索 */
#category_search .okw_parts_faq_tag_search .ttl_col {
    background: none !important;
    height: auto !important;
    margin-bottom: 24px !important;
}
#category_search .okw_parts_faq_tag_search .ttl_bg {
    background: none !important;
    font-size: 24px !important;
    font-weight: 500 !important;
    color: #36C1FA !important; /* Figma準拠の明るい青 */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

#category_search .okw_parts_faq_tag_search .ttl_bg::before {
    display: none !important;
}

#category_search .icoKeyword {
    background-image: url(https://www.kpiee.com/wp-content/themes/kpiee/images/support/icon_research.svg) !important;
    display: block !important;
    height: auto !important;
    background-position: left !important;
    padding: 0 0 0 32px !important;
}

#category_search .oneCol .search_description{
    display: none !important;
}

/* 検索フォーム自体の幅固定 */
#category_search .faq_search_frmArea {
    max-width: 661px !important;
    margin: 0 auto !important;
}
#category_search #keyword_faq_text_field {
    width: 660px !important;
    height: 48px !important;
    border-radius: 82px !important;
    background-color: #FFFFFF !important;
    padding: 0 50px !important;
    text-align: left !important;
}

/* 検索ボタン削除 */
.search_frmArea .keyword_frmbtn, .faq_search_frmArea .keyword_frmbtn{
    display: none !important;
}

/* 3. 関連キーワードエリア（青背景内の中央配置） */
#category_search .okw_parts_attention_keyword {
    background: #F0F9FF !important;
    float: none !important;
    text-align: center !important;
    padding: 24px 0 40px !important;
}
#category_search .okw_parts_attention_keyword .ttl_bg {
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-bottom: 12px !important;
    background: none !important;
}
#category_search .okw_parts_attention_keyword .ttl_bg::before {
    display: none !important;
}

#category_search .attention_keyword_list {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 !important;
    list-style: none !important;
}
#category_search .attention_keyword_list li a {
    background-color: #FFFFFF !important;
    border: 1px solid #36C1FA !important;
    color: #36C1FA !important;
    border-radius: 4px !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* 4. 検索結果リスト（コンテンツ本体） */
#category_search .okw_main_category {
    width: 1140px !important; /* Figma幅に準拠 */
    margin: 60px auto !important;
    float: none !important;
    clear: both !important;
}

/* 「〇〇」でキーワード検索した結果 */
#category_search .okw_main_category .ttl_col {
    background: none !important;
    border: none !important;
    height: auto !important;
    margin-bottom: 16px !important;
}

#category_search .okw_main_category .ttl_bg {
    font-size: 24px !important;
    color: #016CA3 !important;
    font-weight: 500 !important;
    text-align: center !important;
    background: none !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

#category_search .icoResult{
    background-image: none !important;
    padding: 0 !important;
    height: auto !important;
}

#category_search .search_list {
    margin-bottom: 4px;
    border-top: 1px solid #D0D0D1;
    width: 100%;
}

/* 標準の背景色（緑/白）を徹底剥奪 */
#category_search .search_list_inner {
    background: none !important;
    border: none !important;
    border-bottom: 1px dashed #E6E6E7 !important;
    padding: 40px 0 !important;
    margin: 0 !important;
}

/* 記事タイトル（Q. 付与）
#category_search .search_qattl {
    font-size: 20px !important;
    font-weight: 500 !important;
    margin-bottom: 16px !important;
    background: none !important;
    padding: 0 !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}
#category_search .search_qattl a {
    color: #36C1FA !important;
    text-decoration: none !important;
}
#category_search .search_qattl::before {
    content: "Q. " !important;
    color: #36C1FA !important;
} */

.search_word {
    font-weight: 500 !important;
}

#category_search .custom-more-btn{
    font-weight: 500 !important;
}

/* 本文プレビュー */
#category_search .icoA_sml {
    font-size: 16px !important;
    color: #5B5B5F !important;
    line-height: 1.6 !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

/* カード全体のカーソルを指の形にする */
#category_search .search_list_inner {
    position: relative !important; /* 範囲の基準点 */
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

#category_search .search_list_inner:hover {
    opacity: 0.7 !important;
}

/* 記事タイトルのリンク範囲を親要素全体（カード全体）に広げる */
#category_search .search_qattl a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1 !important; /* カード全体を覆う */
}

/* カテゴリー名のリンクや「もっと見る」ボタンがストレッチリンクの下に隠れないよう調整 */
#category_search .search_dateNo .category_name a,
#category_search .custom-more-btn {
    position: relative !important;
    z-index: 2 !important; /* ストレッチリンクより前面に出して個別にクリック可能にする */
}

/* メタ情報と「もっと見る」 */
#category_search .search_dateNo {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}
#category_search .search_dateNo li {
    font-size: 14px !important;
    color: #5B5B5F !important;
}

#category_search .search_dateNo .faq_no,
#category_search .search_dateNo .faq_date {
    display: none !important;
}

#category_search .search_dateNo .category_name a:link {
    color: #36C1FA;
}

#category_search .search_dateNo .category_name a:hover {
    color: #36C1FA;
}

/* JSで追加されるボタンのスタイル */
.custom-more-btn {
    margin-left: auto !important;
    color: #5B5B5F !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

/* 5. 不要なパーツの非表示 */
#category_search .pg_col_top, 
#category_search .pg_col_down, 
#category_search .faq_list_show_detail, 
#category_search .mark_area, 
#category_search .sort_arrow,
#category_search .okw_sort_select {
    display: none !important;
}

/* =====================================================
   カテゴリ画面（#category_show）デザイン最終統合版
   重なり・見切れ・文字色の修正
   ===================================================== */

/* 1. ページ全体とヘッダー見切れ防止 */
body#category_show {
    background-color: #FFFFFF !important;
    height: 100vh;
}

#category_show #okw_contents {
    padding-top: 65px !important; /* 固定ヘッダーの高さ分、全体を下に下げる */
    background: none !important;
}

#category_show .okw_parts_sub_category{
    display: none !important;
}

#category_show #okw_contents_base {
    width: 80vw !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
}

/* 2. パンくずリスト：左余白の調整 */
#category_show .okw_sub_header {
    display: block !important;
    width: 1140px !important;
    margin: 32px auto 0 !important;
}

/* 3. ヒーローエリア（タイトル・アイコン・説明文） */
.category-hero-section {
    margin: 48px auto 40px !important;
    text-align: center !important;
}
.category-hero-title-wrap { display: inline-flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 16px; }
.category-hero-icon { width: 32px; height: 32px; object-fit: contain; }
.category-hero-title { font-size: 28px !important; font-weight: 700 !important; color: #5B5B5F !important; margin: 0; }
.category-hero-desc { font-size: 16px !important; color: #5B5B5F !important; margin: 0; line-height: 1.6; }

/* 4. サブカテゴリ・セクション（Figma準拠の文字色とレイアウト） */
.custom-category-section { width: 80vw !important; margin: 0 auto 80px !important; }

/* セクション見出し：24px / #016CA3 (Figma準拠) */
.custom-section-header { 
    font-size: 22px !important; 
    font-weight: 700 !important; 
    color: #016CA3 !important; 
    padding-bottom: 16px; 
    text-align: left !important; 
}

/* リストアイテム全体設定 */
.custom-section-list {
    display: grid !important;
    list-style: none !important;
    border-radius: 12px;
    padding: 48px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(91, 91, 95, 0.1);
    grid-template-columns: repeat(3, 1fr);
    gap: 32px 48px;
}

/* 1アイテム（3列表示）：重なり防止設定 */
.custom-section-item {
    width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
}

/* ドット（●）：位置固定 */
.custom-section-item::before {
    content: "●" !important;
    font-size: 14px !important;
    color: #E6E6E7 !important;
    margin-right: 12px !important;
    margin-top: 2px !important; 
    flex-shrink: 0 !important;
}

/* 【重要】リンクテキスト：文字色をFigma準拠のグレーに変更 */
.custom-section-item a {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: #5B5B5F !important; /* ← 水色からFigmaの濃いグレーに修正 */
    text-decoration: none !important;
    line-height: 1.5 !important;
    display: block !important;
    word-break: break-all !important; /* 長いタイトルを枠内で改行させる */
    transition: all 0.3s ease;
}

.custom-section-item a:hover {
    color: #0CAAEB !important; /* ホバー時のみb→dashブルーに変更 */
}

/* 5. 記事リスト（末端ページ用）のデザイン適用
   「記事一覧」への文言変更とレイアウト修正版 */

/* リスト全体のコンテナ調整 */
#category_show .okw_main_category {
    margin: 0 auto 80px !important; /* ヒーローエリアとの間隔を調整 */
}

/* 見出し：アイコンを消して「記事一覧」に変更 */
#category_show .okw_main_category .ttl_bg {
    text-align: center !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 40px !important;
}

#category_show .okw_main_category .ttl_col {
    background: none !important; /* アイコン削除 */
    height: auto !important;
    padding: 0 !important;
}

#category_show .okw_main_category .pg_col_top {
    display: none !important;
}

#category_show .okw_main_category .icoResult {
    background-image: none !important; /* アイコン削除 */
    padding: 0 !important;
    font-size: 0 !important; /* 元の『...』内のFAQを非表示 */
}

#category_show .okw_main_category .icoResult::after {
    content: "記事一覧" !important;
    font-size: 24px !important;
    color: #016CA3 !important; /* 濃い青 */
    font-weight: 700 !important;
}

/* リストの上線を太くして区切りを明確に */
#category_show .search_list {
    border-top: 1px solid #D0D0D1 !important;
}

/* カード1枚のスタイル：余白を詰めて整列 */
#category_show .search_list_inner {
    background: none !important;
    border: none !important;
    border-bottom: 1px dashed #E6E6E7 !important;
    padding: 40px 0 !important;
    position: relative !important;
    cursor: pointer !important;
    transition: opacity 0.2s ease !important;
}

#category_show .search_list_inner:hover {
    opacity: 0.7 !important;
}

#category_show .search_date_area .search_dateNo {
    float: left;
    width: 100%;
}

/* 記事タイトル（Q. 付与） */
#category_show .search_qattl {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 12px !important;
    background: none !important;
    padding: 0 !important;
}

#category_show .search_qattl a {
    color: #36C1FA !important; /* 明るい青 */
    text-decoration: none !important;
}

/* #category_show .search_qattl::before {
    content: "Q. " !important;
    color: #36C1FA !important;
} */

/* カード全体をリンクにする擬似要素 */
#category_show .search_qattl a::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important; left: 0; right: 0; bottom: 0 !important;
    z-index: 1 !important;
}

/* 本文プレビュー：行間と文字色を調整 */
#category_show .icoA_sml {
    font-size: 16px !important;
    color: #5B5B5F !important;
    line-height: 1.8 !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}

/* --- 小カテゴリ・検索結果 記事リスト：右下固定の設定 --- */
#category_show .search_dateNo,
#category_search .search_dateNo {
    display: flex !important;
    justify-content: flex-end !important; /* 右端に寄せる */
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* もっと見るリンク：黒字＋水色の矢印 */
.custom-more-btn {
    color: #414143 !important; /* 濃いグレー（黒字） */
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* 水色の「＞」部分 */
.custom-more-btn span {
    color: #36C1FA !important; /* Figma準拠の水色 */
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.custom-more-btn:hover {
    opacity: 0.7 !important;
}

#category_show .search_dateNo .faq_no,
#category_show .search_dateNo .faq_date,
#category_show .search_dateNo .category_name {
    display: none !important; /* 不要な情報を非表示 */
}

/* もっと見るボタン自体の装飾 */
#category_show .custom-more-btn {
    position: relative !important;
    z-index: 2 !important;
    color: #5B5B5F !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
}

#category_show .pg_col_down {
    margin: 32px 0 0 !important;
    font-size: 14px !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

#category_show .pg_no {
    margin-left: 0 !important;
}

#category_show .pagination{
    font-size: 14px !important;
    font-family: 'Noto Sans CJK JP', sans-serif !important;
}

#category_show .pagination a{
    padding: 0 6px !important;
}

#category_show .pg_col_down a:link{
    color: #36C1FA !important;
}

em {
    padding: 0 6p !important;
}

/* =====================================================
   【更新】関連記事セクション（FAQ詳細ページ下部）
   ===================================================== */
.okw_parts_faq_relations {
    margin: 60px auto !important;
    padding: 0 !important;
    width: 83vw !important;
}

/* 見出し：関連記事（青色・アイコンなし） */
.okw_parts_faq_relations .ttl_bg {
    font-size: 20px !important;
    color: #0CAAEB !important;
    font-weight: 700 !important;
    background: none !important;
    padding: 0 !important;
    margin-bottom: 24px !important;
    display: block !important;
    margin: 48px 0 24px;
    background-color: transparent;
    border-radius: 0;
    line-height: 1.5;
    letter-spacing: 0.04em;
}

.okw_parts_faq_relations .ttl_col {
    background: none !important;
    height: auto !important;
    padding: 0 !important;
}

.okw_parts_faq_relations .icoFaq {
    background: none !important; /* 標準のアイコンを削除 */
    padding: 0 !important;
}

/* 各記事リストアイテム：背景色リセット・右矢印追加 */
.faq_relate_list li {
    background: none !important;
    border-bottom: 1px solid #E6E6E7 !important;
    padding: 0px 0 16px !important;
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 16px !important;
}

/* 右側の矢印アイコン（＞） */
.faq_relate_list li::after {
    content: "";
    display: block;
    position: absolute;
    right: 35px;
    top: 0;
    bottom: 16px;
    margin: auto;
    width: 6px;
    height: 6px;
    border-left: 2px solid #6B6C6F;
    border-bottom: 2px solid #6B6C6F;
    transform: rotate(-135deg);
}

/* 記事タイトルのテキスト色設定 */
.faq_relate_list li a {
    text-decoration: none;
    color: #5B5B5F;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    letter-spacing: 0.04em;
    transition: all 0.3s ease;
}

.faq_relate_list li a:hover {
    color: #0CAAEB !important;
}

/* =====================================================
   カテゴリ画面：アプリ別ナビゲーション（Figma完全再現）
   ===================================================== */

.inner__narrow {
    margin: 0 auto 64px !important;
}

.sec-app {
    padding: 0 20px !important;
}

/* 8列のグリッドレイアウト */
.app-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 0 !important;
    list-style: none !important;
    justify-content: center !important;
}

.app-list li {
    width: calc(10% - 11px) !important;
    min-width: 105px !important;
}

/* カードのデザイン */
.app-list label {
    display: block !important;
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 16px 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    width: 100%;
    box-shadow: 0 2px 4px rgba(91, 91, 95, 0.1) !important;
    font-weight: bold !important;
    position: relative !important;
    cursor: pointer !important;
}

.app-list label:hover {
    transform: scale(0.97) !important;
}

/* アクティブ（選択中）のスタイル：b→dashブルーの枠線 */
.app-list label._active {
    border: 1px solid #0CAAEB !important;
}

.app-list label div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.app-list label img {
    width: 48px !important;
    height: 48px !important;
    object-fit: contain !important;
}

.app-list label span {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #5B5B5F !important;
    line-height: 1.2 !important;
    display: block !important;
}

.app-list label .font-xs {
    font-size: 11px !important;
}

/* Coming Soon（契約/利用状況など）の半透明処理 */
.app-list li.comingsoon {
    opacity: 0.4 !important;
    cursor: default !important;
}
.app-list li.comingsoon label {
    cursor: default !important;
}

/* =====================================================
   Info & News 記事ページのデザイン統一（記事ページと同期）
   ===================================================== */

/* 1. ページ全体の共通設定を Info & News にも適用 */
body#info_and_news_show {
    background-color: #FFFFFF !important;
}

#info_and_news_show #okw_contents {
    padding-top: 65px !important; /* ヘッダー見切れ防止 */
}

#info_and_news_show #okw_contents_base {
    width: 90vw !important;
    margin: 0 auto !important;
    background: none !important;
}

#info_and_news_show #okw_contents_inner {
    background: #FFFFFF !important;
    padding: 48px 56px 32px !important; /* 記事ページと同じ余白 */
    box-sizing: border-box !important;
}

/* 2. タイトル（質問）部分のデザイン統一 */
#info_and_news_show .infonews_ttl {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #0CAAEB !important; /* b→dashブルー */
    margin: 0 0 24px !important;
    border-bottom: 1px solid #F5F5F6 !important;
    padding: 0 0 16px 0 !important;
    background: none !important;
}

#info_and_news_show .icoInfoNews {
    background: none !important; /* デフォルトの黄色いアイコンを消去 */
    padding: 0 !important;
}

/* 3. 投稿日時のスタイル調整 */
#info_and_news_show .infonews_datetime {
    text-align: left !important;
    margin-bottom: 8px !important;
    color: #5B5B5F !important;
    font-size: 14px !important;
}

/* 4. 本文全体の文字サイズ・行間設定 */
#info_news_contents {
    color: #5B5B5F !important;
    line-height: 2.0 !important;
    font-size: 16px !important;
}

/* 5. 本文内の見出し (h2 〜 h6) を記事ページと完全に同期 */
#info_news_contents h2 {
    background: #F0F9FF !important; /* 薄い青 */
    border-left: solid 7px #0CAAEB !important; /* メインの青 */
    color: #0CAAEB !important;
    padding: 12px 20px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 56px 0 16px !important;
    border-radius: 0 4px 4px 0 !important;
}

#info_news_contents h3 {
    background-color: #F5F5F6 !important; /* 薄いグレー */
    color: #2D3745 !important;
    padding: 12px 20px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 24px 0 16px !important;
    border-radius: 4px !important;
}

#info_news_contents h4 { 
    color: #2D3745 !important; 
    font-size: 17px !important; 
    font-weight: 700 !important; 
    margin: 25px 0 15px !important; 
}
#info_news_contents h4::before { content: "●"; margin-right: 8px; color: #0CAAEB; }

#info_news_contents h5 { 
    border-left: 5px solid #0CAAEB !important;
    padding: 0 16px !important; 
    font-size: 16px !important; 
    font-weight: 700 !important; 
    color: #5B5B5F !important; 
    margin: 40px 0 8px 0 !important; 
}

#info_and_news_show .infonewstitle_col{
    margin: 0 !important;
}

#info_and_news_show .infonews_col .ttl_col{
    background: none !important;
    height: auto !important;
    padding: 0 !important;
}


#info_and_news_show .infonews_date_txt { display: none !important; }

/* 6. 不要なパーツの非表示 */
#info_and_news_show .topLink { display: none !important; }

/* =====================================================
   【更新】タブ切り替えデザイン（b→dashスタイル）
   ===================================================== */

.su-tabs-nav {
    box-sizing: border-box !important;
}

/* 【重要】タブの中身：初期状態は非表示にする */
.su-tabs-pane {
    display: none !important; 
}

/* 【重要】アクティブな中身だけを表示する */
.su-tabs-pane.su-tabs-pane-open {
    display: block !important;
}

/*! Flickity v2.2.1
https://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled {
    position: relative
}

.flickity-enabled:focus {
    outline: 0
}

.flickity-viewport {
    overflow: hidden;
    position: relative;
    height: 100%
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%
}

.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing
}

.flickity-button {
    position: absolute;
    background: hsla(0,0%,100%,.75);
    border: none;
    color: #333
}

.flickity-button:hover {
    background: #fff;
    cursor: pointer
}

.flickity-button:focus {
    outline: 0;
    box-shadow: 0 0 0 5px #19f
}

.flickity-button:active {
    opacity: .6
}

.flickity-button:disabled {
    opacity: .3;
    cursor: auto;
    pointer-events: none
}

.flickity-button-icon {
    fill: currentColor
}

.flickity-prev-next-button {
    top: 50%;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    transform: translateY(-50%)
}

.flickity-prev-next-button.previous {
    left: 10px
}

.flickity-prev-next-button.next {
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.previous {
    left: auto;
    right: 10px
}

.flickity-rtl .flickity-prev-next-button.next {
    right: auto;
    left: 10px
}

.flickity-prev-next-button .flickity-button-icon {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60%;
    height: 60%
}

.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1
}

.flickity-rtl .flickity-page-dots {
    direction: rtl
}

.flickity-page-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 8px;
    background: #333;
    border-radius: 50%;
    opacity: .25;
    cursor: pointer
}

.flickity-page-dots .dot.is-selected {
    opacity: 1
}


/* =====================================================
   【追記】サイドバー目次の横幅調整（旧サイト準拠）
   ===================================================== */
/* 横幅を旧サイトと同じ328pxに固定 */
.faq-side-column {
    width: 20vw !important;
    padding: 24px;
    border: solid 1px #E6E6E7;
    border-radius: 12px;
    background-color: #fff;
    max-height: calc(100vh - 130px - 0px);
    overflow-y: auto;
    box-sizing: border-box;
    position: sticky !important;
    right: 0;
    top: 90px !important;
    flex-shrink: 0 !important;
    margin-left: 32px !important;
    margin-top: 32px !important;
}

/* =====================================================
   最新HTML構造（simple footer）用スタイル修正
   ===================================================== */

/* フッター全体の背景と文字色 */
#footer.l-footer-simple {
    background-color: #0C4C6F !important;
    color: #fff !important;
    padding: 0 !important;
    margin-top: 60px;
    font-family: 'Noto Sans CJK JP', sans-serif;
}

/* 中央寄せの設定 */
#footer .inner.inner__wide {
    max-width: 90vw;
    margin: 80px auto 0;
    padding: 60px 24px;
    box-sizing: border-box;
}

/* ロゴとリンクエリアの横並び制御 */
#footer .container {
    display: flex !important;
    flex-direction: row-reverse; /* HTMLの並び順（メニュー→ロゴ）を反転させてロゴを左に配置 */
    justify-content: space-between;
    align-items: flex-start;
}

/* --- 左側：ロゴ・外部リンクエリア (.footer-siteid-wrap) --- */
#footer .footer-siteid-wrap {
    width: 30%;
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    padding-right: 40px;
    flex-shrink: 0;
}

#footer .footer-siteid-logo img {
    width: 200px !important;
    margin-bottom: 24px;
    box-shadow: none !important;
    display: block;
}

#footer .link-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#footer .link-list li {
    margin-bottom: 10px !important;
}

#footer .link-list a {
    color: #fff !important;
    font-size: 13px;
    font-weight: bold;
    text-decoration: none !important;
}

#footer .link-list a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 5px;
    vertical-align: middle;
}

/* --- 右側：メインメニューエリア (.footer-contents) --- */
#footer .footer-contents {
    width: 65%;
    display: flex !important;
    gap: 40px;
}

#footer .footer-box {
    flex: 1;
}

#footer .footer-dl {
    margin: 0;
    padding: 0;
}

#footer .footer-dl dt {
    margin-bottom: 12px;
    font-weight: bold;
    font-size: 14px;
}

#footer .footer-dl dt a {
    color: #fff !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

#footer .footer-dl dt a:hover {
    text-decoration: none !important;
    opacity: 0.7;
}

/* --- 下部：コピーライト --- */
#footer .copyright {
    background-color: #0D1E26 !important;
    color: #fff !important;
    text-align: center;
    padding: 15px 0;
    margin: 0 !important;
    font-size: 11px;
    width: 100%;
}

/* --- レスポンシブ対応 --- */
@media screen and (max-width: 900px) {
    #footer .container {
        flex-direction: column !important; /* スマホでは縦並びに */
    }

    #footer .footer-siteid-wrap {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.4);
        padding-right: 0;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    #footer .footer-contents {
        width: 100%;
        flex-direction: column;
        gap: 20px;
    }
}

/* ポップアップ内のTagifyデザイン調整 */
#faq_tag_search_overlay .tagify {
    border: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 1;
}
#faq_tag_search_overlay .tagify__input {
    margin: 0 !important;
    padding: 8px 0 !important;
    min-width: 150px;
    font-size: 14px;
}
#faq_tag_search_overlay .faq_tag_search_text_input {
    display: flex;
    align-items: center;
    background: #fff;
}
#faq_tag_search_overlay .faq_tag_search_text_input_cancel_icon {
    cursor: pointer;
    width: 20px;
    height: 20px;
    background: url(../images/icons/close/sml.svg) no-repeat center;
}
#faq_tag_search_overlay .faq_tag_search_result_area {
    border-top: 1px solid #C0CAD0 !important;
}
/* スクロール固定用 */
body.scroll_fix {
    overflow: hidden !important;
    height: 100% !important;
}


/* =====================================================
   Flickity SVG表示修正
   ===================================================== */
.flickity-button {
    font-size: 0 !important; /* コードを非表示に */
}
.flickity-button svg {
    display: inline-block !important;
    width: 60% !important;
    height: 60% !important;
    fill: #333 !important;
}

/* --- 記事表示バグ修正：強制表示設定 --- */

/* 新レイアウト内のコンテンツを確実に表示 */
.faq-main-column > div,
.faq-main-column > section,
.faq-main-column #faq_answer_contents,
.faq-main-column .faq_ansCont_txt,
.faq-main-column .faq_qstCont_col,
.faq-main-column .faq_ans_col {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.faq_ans_col {
    border-bottom: unset !important;
    margin-bottom: 0 !important;
    word-wrap: break-word !important;
}

/* 以前の「消える原因」だった空要素判定を無効化 */
.faq_ans_col:empty {
    display: none !important;
}

/* 記事全体のコンテナを可視化 */
.oneCol.okw_main_faq {
    visibility: visible !important;
    display: block !important;
}

/* faq_ans_colの余白を上書き（空のとき余白をなくす） */
#faq_show .faq_ans_col:not(.has-content) {
    padding: 0 !important;
    margin: 0 !important;
}

/* ウィザード形式の記事コンテンツを強制表示 */
#faq_show .wizard_content,
#faq_show .wzd_qstCont_col,
#faq_show .wzd_slct_area,
#faq_show .wzd_slct_col {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ウィザード選択肢のチェックマークデザイン変更 */
#faq_show .wzd_slct_area .chckbx_off {
    background: none !important;
    padding-left: 30px !important;
    position: relative !important;
}
#faq_show .wzd_slct_area .chckbx_off::before {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #ccc !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: block !important;
}
#faq_show .wzd_slct_area .chckbx_on {
    background: none !important;
    padding-left: 30px !important;
    position: relative !important;
}
#faq_show .wzd_slct_area .chckbx_on::before {
    content: '' !important;
    position: absolute !important;
    left: 2px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid #00AEEF !important;
    border-radius: 50% !important;
    background: #00AEEF !important;
    display: block !important;
}
#faq_show .wzd_slct_area .chckbx_on::after {
    content: '' !important;
    position: absolute !important;
    left: 9px !important;
    top: 50% !important;
    transform: translateY(-60%) rotate(45deg) !important;
    width: 5px !important;
    height: 9px !important;
    border-right: 2px solid #fff !important;
    border-bottom: 2px solid #fff !important;
    display: block !important;
}
#faq_show .wzd_slct_area .chckbx_on {
    background: none !important;
    padding-left: 30px !important;
    position: relative !important;
}

/* ===========================================
   Prism.js コードブロック関連スタイル
   - hcb_style.css（コード枠・行番号・コピーボタン）
   - coloring_dark.css（暗テーマのトークン配色）
   - 元ファイルの url(../../assets/img/*.svg) 参照は Data URI に置換
   =========================================== */
 
/* ---------- hcb_style.css （枠・行番号・コピーボタン） ---------- */
.hcb_wrap pre::-webkit-scrollbar{height:6px}
.hcb_wrap pre::-webkit-scrollbar-track{background:#f7f7f7;border:none}
.hcb_wrap pre::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
.hcb_wrap{position:relative;z-index:0;display:block;margin: 0 32px 2em;padding:0}
.hcb_wrap code,.hcb_wrap pre{white-space:pre;text-align:left;word-wrap:normal;word-break:normal;word-spacing:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;border:none}
.hcb_wrap pre{position:static;display:block;box-sizing:border-box;margin:0;padding:1.75em 1.5em;overflow:auto;font-family:Menlo,Consolas,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;line-height:1.5;letter-spacing:.1px;border-radius:0;-webkit-overflow-scrolling:touch}
.hcb_wrap code,.hcb_wrap span{box-sizing:border-box;font-size:inherit;font-family:inherit;line-height:1.5}
:not(pre)>code.prism{padding:.1em;white-space:normal;border-radius:.3em}
.hcb_wrap .line-highlight{position:absolute;right:0;left:0;margin-top:1.75em;padding:0;font-size:inherit;line-height:inherit;white-space:pre;pointer-events:none}
.hcb_wrap .line-highlight:before,.hcb_wrap .line-highlight[data-end]:after{position:absolute;top:0;left:0;box-sizing:border-box;min-width:1.5em;padding:1px 2px;font-weight:700;font-size:12px;line-height:inherit;text-align:center;text-shadow:none;vertical-align:middle;border-radius:0;content:attr(data-start)}
.hcb_wrap .line-highlight[data-end]:after{top:auto;bottom:0;content:attr(data-end)}
.hcb_wrap .line-numbers .line-highlight:after,.hcb_wrap .line-numbers .line-highlight:before{content:none}
.hcb_wrap pre.line-numbers{position:static;padding-left:3.75em;counter-reset:linenumber}
.hcb_wrap pre.line-numbers>code{position:relative;white-space:inherit}
.hcb_wrap .line-numbers .line-numbers-rows{position:absolute;font-size:13px !important;line-height: 1.5 !important;top:-2px;left:-3.75em;width:3em;font-size:inherit;letter-spacing:-1px;-webkit-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}
.hcb_wrap .line-numbers-rows>span{display:block;line-height: 1.5 !important;font-size: 13px !important;counter-increment:linenumber;pointer-events:none}
.hcb_wrap .line-numbers-rows>span:before{display:block;padding-right:.8em;text-align:right;content:counter(linenumber)}
.hcb_wrap pre:before{position:absolute;top:0;right:0;z-index:1;box-sizing:border-box;min-width:4em;padding:0 10px;font-size:12px;font-family:Arial,Helvetica,sans-serif;line-height:20px;text-align:center;content:attr(data-lang)}
.hcb_wrap .hcb-clipboard+pre:before{right:26px}
.hcb_wrap pre[data-show-lang="0"]:not([data-file]):before{content:none}
 
/* コピーボタン（クリップボードSVGを Data URI で内包） */
.hcb_wrap .hcb-clipboard{position:absolute;top:0;right:0;z-index:1;box-sizing:border-box;width:20px;height:20px;padding:0;text-align:center;background-color:hsla(0,0%,100%,.8);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2' ry='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>");background-repeat:no-repeat;background-position:50%;background-size:14px auto;border:none;border-radius:1px;cursor:pointer}
.hcb_wrap .hcb-clipboard.-done{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300a050' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")}
.hcb_wrap .hcb-clipboard.-done:before{position:absolute;right:0;bottom:100%;font-size:14px;font-family:Arial,Helvetica,sans-serif;line-height:1.5;content:"Copied!";white-space:nowrap;color:#00a050}
 
/* ---------- coloring_dark.css （暗テーマ・トークン配色） ---------- */
.hcb_wrap pre,.hcb_wrap pre code{color:#f8f8f2;text-shadow:0 1px #1a1a1a;background:#34352e}
.hcb_wrap pre:before{color:#fff;background-color:#111}
.line-highlight{background:rgba(255,251,247,.1)}
.line-highlight:before,.line-highlight[data-end]:after{color:#fcfcfc;text-shadow:none;background-color:rgba(175,167,161,.4)}
.line-numbers .line-numbers-rows{border-right:1px solid #999}
.line-numbers-rows>span:before{color:#999}
.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a8a897}
.token.punctuation{color:#f8f8f2}
.namespace{opacity:.7}
.token.constant,.token.deleted,.token.important,.token.property,.token.symbol,.token.tag{color:#ff2c78}
.token.boolean,.token.number{color:#ae81ff}
.token.attr-name,.token.builtin,.token.char,.token.class-name,.token.inserted,.token.selector{color:#b4ec43}
.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}
.token.atrule,.token.attr-value,.token.function,.token.string{color:#f3e880}
.token.function,.token.keyword.def{color:#5fe6ff}
.token.keyword,.token.operator{color:#f92672}
.token.keyword.this,.token.regex{color:#fd971f}
.token.delimiter:not(.symbol){color:#5294ff}
.token.bold{font-weight:700}
.token.builtin,.token.italic,.token.keyword.def{font-style:italic}
.token.entity{cursor:help}
.language-css .token.property,.language-json .token.property,.language-scss .token.property{color:#5fe6ff}
.language-php .token.important.delimiter{font-weight:400}
.language-ruby .token.interpolation{color:#f8f8f2}
.language-json .token.operator{color:#f3e880}