/* TROBZ ナレッジハブ（trobz.co.jp テーマ）からの複製。直接編集しない。案件の差は site.css で上書きする */


.wrapTitlePage .titleEn, .wrapTitlePage .titleJp {
    color: #000000;
}

.knowledgeDetail .detailIntro .introCat li.orange a{
    background-color: #ee881a;
}
.knowledgeDetail .detailIntro .introCat li.blue a{
    background-color: #1e5a9f;
}
.knowledgeDetail .detailIntro .introCat li.pink a{
    background-color: #d94848;
}
.knowledgeDetail .detailIntro .introCat li.green a{
    background-color: #2ec111;
}
.knowledgeDetail .detailIntro .introUpdate {
    font-weight: 300;
}

.knowledgeDetail .detailWrap:not(:first-child) {
    margin-top: 80px;
}

/* 執筆者プロフィールは assets/css/knowledge-profile.css に移した（2026-09-24） */
/* FB251225 */

/* =====================================================
 * ナレッジ記事の見出し（2026-09-23）
 * 畔栁さんが5案から「3 金の透かし番号＋線が引かれる」を選んだ（見本 /design/knowledge-heading/）。
 *
 *   記事タイトル … 下に薄い線。左端の120pxだけ金で太く
 *   大見出し h2  … 後ろに章番号を淡い金で大きく透かす。画面に入ると、金から薄いグレーへ流れる線が左から引かれる
 *   小見出し h3  … 画面に入ると、下に金の短い線が引かれる
 *
 * 章番号（data-no）と、線を引く目印（drawIn）は inc/knowledge-headings.php が本文に付ける。
 * 線は画面に入ると draw-in.js が is-in を付けて引く。動きは transform だけなので、
 * 本文の位置は動かない（見出しが入ってきても、画面はずれない）。
 * 旧：灰色の地に紺（#12347c）の太線、小見出しは紺の二重の下線。紺はサイトの墨色・金と別の色だった。
 * ===================================================== */
.areaNewsDetail .detailTitle {
    position: relative;
    padding-bottom: 22px;
    border-bottom: 1px solid #E3E3E6;
}

.areaNewsDetail .detailTitle::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 120px;
    height: 2px;
    background: var(--gold);
}

.areaNewsDetail .detailWrap .detailContent h2 {
    position: relative;
    z-index: 0;
    margin-top: 48px;
    padding: 48px 0 16px;
    background: none;
    border: 0;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: .02em;
    color: var(--ink);
}

/* 章番号の透かし。見出しの文字の後ろに敷く */
.areaNewsDetail .detailWrap .detailContent h2[data-no]::before {
    content: attr(data-no);
    position: absolute;
    left: -4px;
    top: -18px;
    z-index: -1;
    font-family: "FuturaLTProLight", "Futura", sans-serif;
    font-weight: 300;
    font-size: 120px;
    line-height: 1;
    letter-spacing: -.02em;
    color: #EFE4C9;
    pointer-events: none;
}

/* 文字で書かれた「1. 」は、透かしの「01」と二重になるので隠す */
.areaNewsDetail .detailWrap .detailContent h2 .hNum {
    display: none;
}

.areaNewsDetail .detailWrap .detailContent h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;   /* 2026-09-24 畔栁さんの指示で 1px → 2px */
    background: linear-gradient(90deg, var(--gold), #EFE4C9 45%, #E3E3E6);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.2s cubic-bezier(.65, 0, .35, 1);
}

.areaNewsDetail .detailWrap .detailContent h2.is-in::after {
    transform: none;
}

.areaNewsDetail .detailWrap .detailContent h3 {
    position: relative;
    margin-top: 40px;
    padding: 0 0 10px;
    border: 0;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--ink);
}

.areaNewsDetail .detailWrap .detailContent h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 2px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .9s cubic-bezier(.65, 0, .35, 1);
}

.areaNewsDetail .detailWrap .detailContent h3.is-in::after {
    transform: none;
}

/* 動きを減らす設定の方には、最初から線を引いた状態で見せる */
@media (prefers-reduced-motion: reduce) {
    .areaNewsDetail .detailWrap .detailContent h2::after,
    .areaNewsDetail .detailWrap .detailContent h3::after {
        transform: none;
        transition: none;
    }
}

.areaNewsDetail .detailWrap .detailContent p:not(:has(a)) b {
    text-decoration: underline;
    text-underline-offset: -5px;
    text-decoration-color: #fafa99;
    text-decoration-thickness: 11px;
}
/* END FB251225 */

.areaNewsDetail .detailWrap .detailContent>ul:not(#toc_container ul),
.areaNewsDetail .detailWrap .detailContent ol {
  /* margin: 0 0 1em; */
  padding-left: 24px;
}

/* ===== UL: dấu chấm mặc định ===== */
.areaNewsDetail .detailWrap .detailContent>ul:not(#toc_container ul) {
  list-style: none;
  padding-left: 0;
}

.areaNewsDetail .detailWrap .detailContent>ul:not(#toc_container ul)>li {
  position: relative;
  margin-bottom: 6px;
  line-height: 1.6;
  padding-left: 15px;
}

.areaNewsDetail .detailWrap .detailContent>ul:not(#toc_container ul)>li::before {
    content: "•";
    position: absolute;
    left: 0px;
    top: 0.8em;
    transform: translateY(-80%);
    font-size: 2em;
}
/* ===== OL: số tự động ===== */
.areaNewsDetail .detailWrap .detailContentol {
    /* 1. 2. 3. */
  list-style-type: none;    
  padding-left: 20px;
  /* margin: 0; */
}

.areaNewsDetail .detailWrap .detailContent ol li {
  margin-bottom: 6px;
}

/* (Tuỳ chọn) chỉnh style marker */
.areaNewsDetail .detailWrap .detailContent ul li::marker,
.areaNewsDetail .detailWrap .detailContent ol li::marker {
  font-weight: normal;
}
@media(max-width: 768px) {
    .areaNewsDetail .detailWrap .detailContent ul, 
    .areaNewsDetail .detailWrap .detailContent ol {
        margin-left: 15px;
    }
    .knowledgeDetail .detailWrap:not(:first-child) {
        margin-top: 40px;
    }

    /* FB251225 */

    /* ナレッジ記事の見出し（狭い画面） */
    .areaNewsDetail .detailWrap .detailContent h2 {
        margin-top: 40px;
        padding-top: 34px;
        font-size: clamp(19px, 5.2vw, 22px);
    }

    .areaNewsDetail .detailWrap .detailContent h2[data-no]::before {
        top: -12px;
        font-size: 84px;
    }

    .areaNewsDetail .detailWrap .detailContent h3 {
        margin-top: 32px;
        font-size: clamp(17px, 4.6vw, 19px);
    }
    /* FB251225 */
}

/* knowledgeBannerCta */

/* bannerCtaAi */
/* bannerCtaAi */

/* bannerCtaSales */
/* bannerCtaSales */
@media (max-width: 768px) {

    .areaNewsDetail .detailWrap .detailContent .bannerctaAioIntroduce {
        padding: 10px 10px 20px;
    }
}
@media (max-width: 600px) {
    .areaNewsDetail .detailWrap .detailContent .bannerctaAioIntroduce {
        padding: 10px 10px 20px;
    }
}
/* knowledgeBannerCta */
/* =====================================================
 * 記事本文の「枠の上辺に浮かせた帯」を、狭い画面では枠の中に置き直す（2026-09-23）
 *
 * 記事の本文には、枠（div）の上辺に帯（p）を浮かせる指定が直に書き込まれている
 * （position:absolute; top:-16px; left:20px）。154記事・436か所。
 * 帯が1行のうちは枠の上に乗るが、狭い画面で2行に折り返すと、帯の高さだけ下に伸びて
 * 枠の中の最初の項目に覆いかぶさり、読めなくなる。帯の右端から枠までの余裕は6pxほどしかなく、
 * 文字の幅がわずかに違う端末では折り返してしまう。
 *
 * 記事の本文は触らず、狭い画面のときだけ帯を浮かせるのをやめ、枠の中の最初の行に置く。
 * 何行に折り返しても重ならない。本文の指定は style 属性にあるので、!important でなければ上書きできない。
 * 中央寄せの帯（「この記事でわかること」型）は 1行に収める指定（nowrap）が入っていて崩れないので、触らない。
 * ===================================================== */
@media (max-width: 768px) {
    .detailContent div[style*="position: relative"] > p[style*="position: absolute"]:not([style*="nowrap"]),
    .detailContent div[style*="position:relative"] > p[style*="position:absolute"]:not([style*="nowrap"]) {
        position: static !important;
        display: inline-block !important;
        max-width: 100%;
        /* 枠の上の余白（本文で 30px）を少し詰めて、帯を枠の上辺に近づける */
        margin: -10px 0 16px !important;
    }
}

/* =====================================================
 * ナレッジ記事の目次（2026-09-24）
 * 畔栁さんが見本 /design/knowledge-toc-2/ から「案D 金の印が動く」を選んだ。
 *   左に縦の線と小さなひし形。金のひし形が1つ、カーソルを合わせた項目（スマホは押した項目）へ動き、金の線もそこまで伸びる。
 *   番号は見出しの透かし番号と同じ金の「01」。
 * 組み替えは inc/knowledge-toc.php、動き（現れ方・金の印・なめらかな移動）は assets/js/knowledge-toc.js。
 * 線の端と金の印の高さは、番号の真ん中に合わせて JS が --t（最初）・--b（最後）・--y（金の印）に入れる。
 * 旧：紺の二重線・縞模様の地・紺のアイコン（FB251225）。見出しの墨色・金と合わないので外した。
 * 目次プラグインの CSS と news-detail.css は #toc_container（id）で指定しているので、ここも全部 #toc_container を付けて強さをそろえる。
 * ===================================================== */
.areaNewsDetail .detailContent #toc_container.kToc {
    --ink: #242428;
    --gold: #C9A551;
    --gold-dark: #A8812F;
    --pale: #EFE4C9;
    --line: #E3E3E6;
    --muted: #6A6A72;
    --ease: cubic-bezier(.22, .61, .36, 1);
    --ease2: cubic-bezier(.65, 0, .35, 1);
    position: relative;
    color: var(--ink);
}
/* 古い目次の指定を消す。news-detail.css（このファイルの先頭で読み込む）の紺の二重線・縞模様と、
   目次プラグインの screen.min.css の灰色の枠。どちらも #toc_container に付いているので、同じ強さ以上で上書きする */
.areaNewsDetail .detailContent #toc_container.kToc {
    display: block;
    width: auto;
    max-width: none;
    margin: 56px 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
}
.areaNewsDetail .detailContent #toc_container .kTocTitle {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-family: "FuturaLTProLight", "Futura", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    letter-spacing: .28em;
    color: var(--gold-dark);
}
.areaNewsDetail .detailContent #toc_container .kTocTitle::before {
    content: "";
    width: 36px;
    height: 1px;
    background: var(--gold);
    transform-origin: left;
    transition: transform 1s var(--ease2);
}
.areaNewsDetail .detailContent #toc_container .kTocTitle small {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--ink);
}
.areaNewsDetail .detailContent #toc_container .kTocTitle em {
    margin-left: auto;
    font-style: normal;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    color: var(--muted);
}
.areaNewsDetail .detailContent #toc_container .kTocList {
    position: relative;
    margin: 24px 0 0;
    padding: 0 0 0 34px;
    list-style: none;
}
/* 縦の線（灰色の下地）と、金の印まで伸びる金の線 */
.areaNewsDetail .detailContent #toc_container .kTocList::before,
.areaNewsDetail .detailContent #toc_container .kTocList::after {
    content: "";
    position: absolute;
    left: 6px;
    top: var(--t, 22px);
    width: 1px;
}
.areaNewsDetail .detailContent #toc_container .kTocList::before {
    bottom: var(--b, 22px);
    background: var(--line);
}
.areaNewsDetail .detailContent #toc_container .kTocList::after {
    height: var(--y, 0px);
    background: var(--gold);
    transition: height .6s var(--ease);
}
.areaNewsDetail .detailContent #toc_container .kTocList > li {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.areaNewsDetail .detailContent #toc_container .kTocList > li::before {
    display: none; /* 本文の箇条書きの印を出さない */
}
.areaNewsDetail .detailContent #toc_container .kTocList a {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 11px 0;
    color: var(--ink);
    text-decoration: none;
}
/* 番号と、その左の小さなひし形（番号の真ん中にそろう） */
.areaNewsDetail .detailContent #toc_container .kTocList .tNo {
    position: relative;
    flex: none;
    width: 30px;
    font-family: "FuturaLTProLight", "Futura", sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--gold-dark);
    font-feature-settings: "tnum";
}
.areaNewsDetail .detailContent #toc_container .kTocList .tNo::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -3px;
    background: #fff;
    border: 1px solid #CFCFD4;
    transform: rotate(45deg);
    z-index: 1;
}
.areaNewsDetail .detailContent #toc_container .kTocList .tTx {
    flex: 1;
    min-width: 0;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .03em;
    transition: transform .5s var(--ease);
}
.areaNewsDetail .detailContent #toc_container .kTocList a:hover .tTx {
    transform: translateX(6px);
}
/* 金の印（JS が高さ --m を入れたら出す） */
.areaNewsDetail .detailContent #toc_container.kToc::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 0;
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: translateY(calc(var(--m, 0px) - 4px)) rotate(45deg);
    transition: transform .6s var(--ease), opacity .6s .6s;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}
.areaNewsDetail .detailContent #toc_container.kToc.is-set::after {
    opacity: 1;
}
/* 現れ方：見出しの金の線が引かれ、項目が順に現れ、最後に金の印 */
.areaNewsDetail .detailContent #toc_container.kToc.is-ready .kTocTitle::before {
    transform: scaleX(0);
}
.areaNewsDetail .detailContent #toc_container.kToc.is-ready .kTocList > li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
    transition-delay: calc(var(--i, 0) * 55ms + .15s);
}
.areaNewsDetail .detailContent #toc_container.kToc.is-ready::after {
    opacity: 0;
}
.areaNewsDetail .detailContent #toc_container.kToc.is-in .kTocTitle::before,
.areaNewsDetail .detailContent #toc_container.kToc.is-in .kTocList > li {
    opacity: 1;
    transform: none;
}
.areaNewsDetail .detailContent #toc_container.kToc.is-in.is-set::after {
    opacity: 1;
}
/* 見出しへ移ったとき、固定のヘッダーに隠れない位置で止める（JS が動かないときの控え） */
.areaNewsDetail .detailContent h2 [id] {
    scroll-margin-top: 130px;
}
@media (max-width: 768px) {
    .areaNewsDetail .detailContent #toc_container.kToc {
        margin: 44px 0;
    }
    .areaNewsDetail .detailContent #toc_container .kTocTitle {
        gap: 10px;
        font-size: 12px;
        letter-spacing: .22em;
    }
    .areaNewsDetail .detailContent #toc_container .kTocTitle::before {
        width: 24px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocTitle small {
        font-size: 12px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocTitle em {
        font-size: 11px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocList {
        padding-left: 26px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocList::before,
    .areaNewsDetail .detailContent #toc_container .kTocList::after {
        left: 2px;
    }
    .areaNewsDetail .detailContent #toc_container.kToc::after {
        left: -1px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocList a {
        gap: 14px;
        padding: 10px 0;
        align-items: baseline;
    }
    .areaNewsDetail .detailContent #toc_container .kTocList .tNo {
        width: 26px;
        font-size: 18px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocList .tNo::before {
        left: -26px;
    }
    .areaNewsDetail .detailContent #toc_container .kTocList .tTx {
        font-size: 14.5px;
        line-height: 1.65;
    }
}
@media (prefers-reduced-motion: reduce) {
    .areaNewsDetail .detailContent #toc_container.kToc *,
    .areaNewsDetail .detailContent #toc_container.kToc::after,
    .areaNewsDetail .detailContent #toc_container .kTocList::after {
        transition: none !important;
    }
}