@charset "utf-8";

/* ============================================
   コンポーネント共通CSS
   記事本文（.article-body）で使用するパーツ

   ブレークポイント:
   - SP:             max-width: 767px
   - タブレット・PC:  min-width: 768px
   - PC:             min-width: 1025px（必要に応じて）
============================================= */

/* --------------------------------------------
   0. 記事本文エリア（.article-body）
   - 記事ページ・スタイルガイド共通の土台
---------------------------------------------- */
/* 外枠（main） */
.article-body {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 24px;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: 0.05em;
    color: #333333;
    background-color: #fff;
}

@media (min-width: 768px) {
    .article-body {
        padding: 0 0 40px;
        background-color: #F7FAFD;
    }
}

/* コンテンツ中枠 */
.article-body__inner {
    width: 100%;
    padding: 0 0 24px;
    background-color: #fff;
}

@media (min-width: 768px) {
    .article-body__inner {
        width: 90%;
        max-width: 800px;
        margin: 24px auto 0;
        padding: 32px 0 40px;
        border-radius: 8px;
        box-shadow: 0 0 12px #E8F2FC;
    }
}

/* コンテンツ内枠 */
.article-body__content {
    width: 90%;
    max-width: 720px;
    margin: 0 auto;
}

/* --------------------------------------------
   記事メインビジュアル（article-hero）
   - 画像の下部に記事タイトルを重ねて表示
---------------------------------------------- */
.article-hero {
    position: relative;
    margin-bottom: 24px;
    border-radius: 4px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border: 1px solid #d1d8e2;
}

.article-hero__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.article-body .article-hero__title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    padding: 40px 16px 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
}

@media (min-width: 768px) {
    .article-hero {
        border-radius: 8px;
    }

    .article-hero__title {
        padding: 60px 24px 20px;
        font-size: 24px;
    }
}

/* 単独配置のul/olにmargin-top */
.article-body__content > ul:not(.ez-toc-list),
.article-body__content > ol:not(.ez-toc-list) {
    margin-top: 32px;
}

@media (min-width: 768px) {
    .article-body__content > ul:not(.ez-toc-list),
    .article-body__content > ol:not(.ez-toc-list) {
        margin-top: 40px;
    }
}

.article-body p {
    margin: 20px 0;
}

/* コードブロック（pre > code） */
.article-body pre {
    position: relative;
    margin: 8px 0 24px;
    padding: 0;
    background-color: #2D2D2D;
    border-radius: 4px;
    overflow: hidden;
}

/* code にpadding を付ける（pre は padding:0 にしてプラグインのボタン領域と分離） */
.article-body pre > code {
    display: block;
}

.article-body pre code {
    display: block;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #7EC699;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* プラグイン「Copy Anything to Clipboard」のボタンを記事デザインに合わせて上書き
   - .ctc-wrapper: コードブロック全体のラッパー
   - .ctc-outside: ボタン配置エリア
   - .ctc-copy-btn: コピーボタン本体
   - !important はプラグイン側CSSに勝つために必要 */

.article-body .ctc-wrapper {
    padding: 16px !important;
}

.article-body .ctc-outside {
    margin: 0 !important;
}

.article-body .ctc-copy-btn {
    position: absolute !important;
    top: 4px !important;
    right: 4px !important;
    padding: 10px 16px !important;
    font-family: "Noto Sans JP", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    color: #333 !important;
    background-color: #E0E0E0 !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
    width: auto !important;
    height: auto !important;
}

.article-body .ctc-copy-btn:hover {
    background-color: #CCC !important;
}

/* テキストブロック（box-text）
   - 本文テキストのラッパー
   - 上下の余白を一括管理 */
.box-text {
    margin: 32px 0 0;
}

@media (min-width: 768px) {
    .box-text {
        margin: 40px 0 0;
    }
}

.box-text p {
    margin: 0;
}

.box-text p + p {
    margin-top: 24px;
}

.article-body a {
    color: #005BAC;
    text-decoration: underline;
}

/* 強調マーカー */
.article-body em {
    font-weight: bold;
    font-style: normal;
    background: linear-gradient(transparent 60%, #F5E0A4 40%);
}

.article-body em.blu {
    background: linear-gradient(transparent 60%, #CCEAFC 40%);
}

.article-body em.red {
    background: linear-gradient(transparent 60%, #FCCCCC 40%);
}

/* --------------------------------------------
   1. 見出し（h1〜h6）
---------------------------------------------- */

/* スタイルガイドタイトル */
.styleguide-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    margin: 0 0 20px;
}

@media (min-width: 768px) {
    .styleguide-title {
        font-size: 28px;
    }
}

/* h2：左ボーダー太め */
.article-body h2 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    border-left: 8px solid #005BAC;
    padding-left: 16px;
    margin: 48px 0 20px;
}

@media (min-width: 768px) {
    .article-body h2 {
        font-size: 24px;
        margin-top: 80px;
    }
}

/* h3：左ボーダー細め + 下ボーダー */
.article-body h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    border-left: 4px solid #005BAC;
    border-bottom: 2px solid #CCCCCC;
    padding-left: 16px;
    padding-bottom: 8px;
    margin: 48px 0 16px;
}

@media (min-width: 768px) {
    .article-body h3 {
        font-size: 22px;
        margin-top: 80px;
    }
}

/* h4：下ボーダー実線 */
.article-body h4 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 2px solid #005BAC;
    padding-bottom: 8px;
    margin: 48px 0 16px;
}

@media (min-width: 768px) {
    .article-body h4 {
        font-size: 20px;
        margin-top: 80px;
    }
}

/* h5：下ボーダー点線 */
.article-body h5 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 1px dotted #005BAC;
    padding-bottom: 8px;
    margin: 48px 0 12px;
}

@media (min-width: 768px) {
    .article-body h5 {
        margin-top: 80px;
    }
}

/* h6：左アイコン付き */
.article-body h6 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    padding-left: 24px;
    margin: 48px 0 12px;
    position: relative;
}

@media (min-width: 768px) {
    .article-body h6 {
        margin-top: 80px;
    }
}

.article-body h6::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url(../images/icon-circle-right.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* --------------------------------------------
   2. この記事のポイント（exec-summary）
   - 記事冒頭に配置するポイントまとめBOX
---------------------------------------------- */
.exec-summary {
    margin: 48px 0 0;
    padding: 24px 16px 16px;
    border: none;
    border-top: 2px solid #005BAC;
    border-bottom: 2px solid #005BAC;
    border-radius: 0;
    background-color: #F7FAFD;
    position: relative;
}

.exec-summary__title {
    display: inline-block;
    margin: 0;
    padding: 4px 16px;
    background-color: #005BAC;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 100px;
    position: absolute;
    top: -22px;
    left: 0;
    transform: translateY(-50%);
}

@media (min-width: 768px) {
    .exec-summary {
        padding: 28px 24px 20px;
    }

    .exec-summary__title {
        font-size: 16px;
    }
}

/* exec-summary内のulはチェックリスト（.article-body ul）のスタイルをそのまま使用 */
.article-body .exec-summary ul:not(.ez-toc-list) {
    margin: 8px 0 0;
}

.article-body .exec-summary ul:not(.ez-toc-list) li {
    border-bottom: none;
    padding: 6px 0;
    font-size: 16px;
    line-height: 1.375;
    letter-spacing: 0.05em;
}

.article-body .exec-summary ul li::before {
    width: 16px;
    height: 16px;
    margin-top: calc((1em * 1.375 - 16px) / 2 + 2px);
}

@media (min-width: 768px) {
    .article-body .exec-summary ul li {
        font-size: 18px;
        line-height: 1.44;
    }

    .article-body .exec-summary ul li::before {
        width: 20px;
        height: 20px;
        margin-top: calc((1em * 1.44 - 20px) / 2 + 2px);
    }
}

/* --------------------------------------------
   3. ポイントBOX（box-points）
   - 見出しのポイントを表示
---------------------------------------------- */
.box-points {
    margin: 8px 0 0;
    padding: 12px 16px;
    background-color: #F7FAFD;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .box-points {
        margin: 16px 0 0;
    }
}

.box-points p {
    margin: 0;
}

.box-points__title {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: #FA842F;
}

.box-points__title::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    background-image: url(../images/icon-point-orange.svg);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: text-bottom;
}

.box-points__text {
    margin: 0;
    font-size: 14px;
    line-height: 1.71;
    letter-spacing: 0.05em;
}

/* --------------------------------------------
   4. フリーBOX（box-free）
   - 汎用的なボーダーBOX
---------------------------------------------- */
.box-free {
    margin: 32px 0 0;
    padding: 12px 16px;
    border: 1px solid #6889AA;
    border-radius: 8px;
    background-color: #F7FAFD;
    font-size: 18px;
    line-height: 1.56;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .box-free {
        margin: 40px 0 0;
        padding: 20px 24px;
        font-size: 20px;
        line-height: 1.4;
    }
}

.box-free p {
    margin: 8px 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.05em;
}

@media (min-width: 768px) {
    .box-free p {
        font-size: 18px;
    }
}

.box-free p:first-child {
    margin-top: 0;
}

.box-free p:last-child {
    margin-bottom: 0;
}

/* タイトル付きBOX */
.box-free--titled {
    padding: 4px 4px 0;
}

/* タイトル：幅100% */
.box-free__title {
    margin: 0;
    padding: 6px 16px;
    background-color: #6889AA;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    border-radius: 6px;
}

@media (min-width: 768px) {
    .box-free__title {
        padding: 6px 16px;
        font-size: 20px;
    }
}

/* タイトル：可変幅 */
.box-free__title--inline {
    display: inline-block;
    margin: 0;
    padding: 6px 16px;
    background-color: #6889AA;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    border-radius: 6px;
}

@media (min-width: 768px) {
    .box-free__title--inline {
        padding: 6px 16px;
        font-size: 20px;
    }
}

/* タイトル付きBOXの本文エリア */
.box-free__body {
    padding: 4px 16px 12px;
}

@media (min-width: 768px) {
    .box-free__body {
        padding: 4px 16px 12px;
    }
}

/* BOX付きリスト：PC可変幅 */
.article-body .box-free ul:not(.ez-toc-list) {
    margin: 0;
}

.article-body .box-free ul li:last-child,
.article-body .box-free ol li:last-child {
    border-bottom: none;
}

.box-free--inline {
    display: inline-block;
    max-width: 720px;
}

@media (max-width: 767px) {
    .box-free--inline {
        display: block;
    }
}

/* --------------------------------------------
   6. 引用BOX（box-quote）
   - blockquoteとして使用
---------------------------------------------- */
.box-quote {
    margin: 32px 0 0;
    padding: 32px 16px 16px;
    background-color: #F7FAFD;
    border: 1px solid #E8F2FC;
    border-radius: 8px;
    position: relative;
}

@media (min-width: 768px) {
    .box-quote {
        margin: 40px 0 0;
        padding: 32px 24px 24px;
    }
}

.box-quote::after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 16px 16px;
    border-color: transparent transparent #005BAC transparent;
    position: absolute;
    bottom: -2px;
    right: -2px;
}

.box-quote::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-image: url(../images/icon-blockquote.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: -4px;
    left: -8px;
}

.box-quote p {
    margin: 0 0 10px;
    font-size: 16px;
    line-height: 1.6;
}

.box-quote p:last-child {
    margin-bottom: 0;
}

.box-quote .ref-link {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
}

/* --------------------------------------------
   7. 注釈（notes）
---------------------------------------------- */
.notes {
    margin: 16px 0 0;
    padding: 0;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: 0.05em;
    color: #333;
}

.notes p {
    margin: 2px 0 0;
}

/* --------------------------------------------
   8. チェックリスト（ul）
---------------------------------------------- */
.article-body ul:not(.ez-toc-list) {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
    text-align: left;
}

@media (min-width: 768px) {
    .article-body ul:not(.ez-toc-list) {
        margin-top: 40px;
        width: fit-content;
        max-width: 100%;
    }
}

.article-body ul:not(.ez-toc-list) li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px dashed #6889AA;
    line-height: 1.5;
}

.article-body ul:not(.ez-toc-list) li::before {
    content: "";
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: calc((1em * 1.5 - 20px) / 2 + 2px);
    background-image: url(../images/icon-check.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}


/* --------------------------------------------
   9. 番号リスト（ol）
---------------------------------------------- */
.article-body ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: listnum;
    width: 100%;
    text-align: left;
}

@media (min-width: 768px) {
    .article-body ol {
        width: fit-content;
        max-width: 100%;
    }
}

.article-body ol li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px dashed #6889AA;
    line-height: 1.5;
}

.article-body ol li::before {
    counter-increment: listnum;
    content: counter(listnum);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    background-color: #005BAC;
    border-radius: 2px;
    margin-top: calc((1em * 1.5 - 20px) / 2 + 4px);
}

@media (min-width: 768px) {
    .article-body ol li::before {
        margin-top: calc((1em * 1.5 - 20px) / 2 + 6px);
    }
}

/* --------------------------------------------
   10. 定義リスト（box-dl）
---------------------------------------------- */
.box-dl {
    margin: 32px 0 0;
    border: 1px solid #6889AA;
    overflow: hidden;
}

@media (min-width: 768px) {
    .box-dl {
        margin: 40px 0 0;
    }
}

.box-dl dt {
    margin: 0;
    padding: 8px 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    background-color: #6889AA;
    color: #fff;
    position: relative;
}

.box-dl dt::before {
    content: "";
    display: block;
    width: 4px;
    position: absolute;
    left: 4px;
    top: 4px;
    bottom: 4px;
    background-color: #fff;
}

.box-dl dd {
    margin: 0;
    padding: 16px 20px;
    background-color: #F7FAFD;
}

.box-dl dd p {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 0.05em;
}


/* --------------------------------------------
   11. テーブル
---------------------------------------------- */
.box-table {
    width: 100%;
    padding: 0;
}

.article-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    margin: 32px 0 0;
    background-color: #E8F2FC;
    border: 1px solid #E8F2FC;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.article-body thead {
    background-color: #6889AA;
    border-radius: 6px 6px 0 0;
}

.article-body table:not(:has(thead)) {
    border-radius: 0;
}

@media (min-width: 768px) {
    .article-body table {
        font-size: 14px;
        margin: 40px 0 0;
    }
}

.article-body thead th {
    background-color: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    padding: 6px 12px;
    text-align: left;
}

.article-body thead th:first-child {
    border-radius: 6px 0 0 0;
}

.article-body thead th:last-child {
    border-radius: 0 6px 0 0;
}

@media (min-width: 768px) {
    .article-body thead th {
        padding: 12px 12px;
    }
}

.article-body tbody th,
.article-body tbody td {
    border-bottom: 1px solid #E8F2FC;
}

.article-body tbody td {
    border-right: 1px solid #E8F2FC;
}

.article-body tbody td:last-child {
    border-right: none;
}

.article-body tbody tr:last-child th,
.article-body tbody tr:last-child td {
    border-bottom: none;
}

.article-body tbody th {
    position: relative;
    isolation: isolate;
    width: 25%;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    padding: 10px 12px;
    text-align: left;
    color: #6889AA;
    background-color: #fff;
}

.article-body tbody th::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96%;
    height: 88%;
    background: #E8F2FC;
    border-radius: 4px;
}

@media (min-width: 768px) {
    .article-body tbody th {
        width: 20%;
        padding: 12px 12px;
    }
}

.article-body tbody td {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    padding: 10px 12px;
    background-color: #fff;
}

@media (min-width: 768px) {
    .article-body tbody td {
        padding: 12px 12px;
    }
}

/* SP横スクロール */
.article-body .js-scrollable {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.article-body .js-scrollable::-webkit-scrollbar {
    display: none;
}



/* スクロールヒント上書き */
.article-body .scroll-hint-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: rgba(40, 65, 100, 0.88);
    border-radius: 8px;
}

.article-body .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: 1;
}

.article-body .scroll-hint-text {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-top: 0;
    margin-bottom: 4px;
    order: 1;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0;
    width: 85px;
}

.article-body .scroll-hint-icon::before {
    order: 3;
    width: 32px;
    height: 32px;
}

.article-body .scroll-hint-icon::after {
    order: 2;
    position: static;
    top: auto;
    left: auto;
    margin-left: 0;
    width: 34px;
    height: 14px;
    opacity: 1;
    transition-delay: 0s;
}

/* max-content でコンテンツ幅に応じてスクロール発生、
   min-width: 100% で列数が少ない場合もコンテナ幅いっぱいに広げる */
.article-body .js-scrollable table {
    width: max-content;
    min-width: 100%;
}

.article-body .js-scrollable tbody th {
    width: auto;
    min-width: auto;
    max-width: 10em;
    white-space: normal;
    word-break: break-word;
}

.article-body .js-scrollable td {
    max-width: 10em;
    word-break: break-word;
}

/* --------------------------------------------
   12. 参照リンク（ref-link）
---------------------------------------------- */
/* 詳細度を上げて .box-free p (0,1,1) より優先させる */
p.ref-link {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

.ref-link a {
    color: #005BAC;
}

/* --------------------------------------------
   13. とら吹き出し（tora）
   - 吹き出しは下揃え、テキスト量で上に伸びる
---------------------------------------------- */
.tora {
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin: 32px 0 32px;
}

@media (min-width: 768px) {
    .tora {
        margin: 48px 0 48px;
    }
}

.tora__icon {
    flex-shrink: 0;
    width: 100px;
    height: 100px;
    margin-left: -4px;
    transform: translateY(20px);
}

.tora__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tora__body {
    position: relative;
    padding: 10px 16px;
    border: 2px solid #005BAC;
    border-radius: 12px;
    background-color: #F7FAFD;
    margin-left: -16px;
    margin-bottom: 24px;
}

.tora__body::before {
    content: "";
    position: absolute;
    bottom: -16px;
    left: 23px;
    border-left: none;
    border-right: 18px solid transparent;
    border-top: 16px solid #005BAC;
    border-bottom: none;
}

.tora__body::after {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 25px;
    border-left: none;
    border-right: 15px solid transparent;
    border-top: 13px solid #F7FAFD;
    border-bottom: none;
}

.tora__body p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.05em;
    color: #003F7A;
}

@media (min-width: 768px) {
    .tora__body p {
        font-size: 18px;
        line-height: 1.33;
    }
}

@media (min-width: 768px) {
    .tora__icon {
        width: 120px;
        height: 120px;
        transform: translateY(28px);
    }

    .tora__body {
        display: inline-block;
    }
}

@media (max-width: 767px) {
    .tora__body {
        flex: 1;
    }
}

/* --------------------------------------------
   14. 著者プロフィールカード（author-card）
---------------------------------------------- */
.author-card {
    margin: 48px 0 0;
    padding: 16px 16px 12px;
    background-color: #fff;
    border: 1px solid #CCCCCC;
    border-radius: 0;
    text-align: left;
}

@media (min-width: 768px) {
    .author-card {
        margin: 80px 0 0;
        padding: 24px 24px 16px;
    }
}

.author-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    position: relative;
}

.author-card__icon {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.author-card__header::before {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background-color: #E8F2FC;
    top: 3px;
    left: 4px;
    z-index: 0;
}

.author-card__header::after {
    content: "";
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 1px solid #6889AA;
    top: -2px;
    left: -2px;
    z-index: 2;
    pointer-events: none;
}

.author-card__name {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.02em;
    margin: 0 0 4px;
}

.author-card__bio {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0.05em;
    margin: 0;
    text-align: left;
}


/* --------------------------------------------
   15. 関連記事（related-posts）
---------------------------------------------- */
.related-posts-wrap {
    margin: 40px 0 0;
    padding: 0 0 16px;
    border-bottom: 1px solid #005BAC;
}

.article-body .related-posts__heading {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 16px;
}

.related-posts__heading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #005BAC;
}

.related-posts__heading span {
    position: relative;
    z-index: 1;
    display: inline-block;
    width: 240px;
    padding: 2px 24px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    letter-spacing: 0.2em;
    color: #005BAC;
    background-color: #fff;
    border: 1px solid #005BAC;
    border-radius: 100px;
}

@media (min-width: 768px) {
    .related-posts__heading span {
        font-size: 18px;
        padding: 2px 32px;
    }
}

.related-posts {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding-bottom: 0;
}

@media (min-width: 768px) {
    .related-posts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

.related-posts__item {
    overflow: hidden;
    padding: 4px 0;
    border-bottom: 1px dotted #6889AA;
}

.related-posts__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

@media (min-width: 768px) {
    .related-posts__item {
        padding-bottom: 0;
        border-bottom: none;
    }
}

.related-posts__item a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (min-width: 768px) {
    .related-posts__item a {
        display: block;
    }
}

.related-posts__thumb {
    width: 120px;
    flex-shrink: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 4px;
}

@media (min-width: 768px) {
    .related-posts__thumb {
        width: 100%;
    }
}

.related-posts__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-posts__info {
    flex: 1;
    padding: 0;
}

@media (min-width: 768px) {
    .related-posts__info {
        padding: 8px 0 0;
    }
}

.article-body .related-posts__title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 768px) {
    .related-posts__title {
        -webkit-line-clamp: 3;
    }
}


/* --------------------------------------------
   16. テキストリンク型関連記事（related-links）
---------------------------------------------- */
.article-body ul.related-links {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

.article-body ul.related-links li {
    display: block;
    padding: 0;
    border-bottom: none;
    line-height: normal;
    gap: 0;
}

.article-body ul.related-links li::before {
    content: none;
    display: none;
}

.related-links a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.2em;
    color: #005BAC;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.related-links a::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 10px;
    margin-top: calc(1em * 1.6 / 2 - 5px);
    background-image: url(../images/icon-arrow-right.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

@media (min-width: 768px) {
    .related-links a {
        font-size: 16px;
    }
}

/* --------------------------------------------
   17. アコーディオン（accordion）
---------------------------------------------- */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 32px 0 0;
}

@media (min-width: 768px) {
    .accordion {
        margin: 40px 0 0;
    }
}

.accordion__item {
    border: 1px solid #d1d8e2;
    border-radius: 4px;
    overflow: hidden;
    background-color: #F7FAFD;
}

.accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

@media (min-width: 768px) {
    .accordion__header {
        padding: 24px;
    }
}

.accordion__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.05em;
    color: #333;
}

.accordion__icon {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 16px;
}

.accordion__icon::before,
.accordion__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #005BAC;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.accordion__icon::before {
    width: 20px;
    height: 4px;
    transform: translate(-50%, -50%);
}

.accordion__icon::after {
    width: 4px;
    height: 20px;
    transform: translate(-50%, -50%);
}

.accordion__item.is-open .accordion__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
    opacity: 0;
}

.accordion__body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

.accordion__item.is-open .accordion__body {
    grid-template-rows: 1fr;
}

.accordion__content {
    overflow: hidden;
}

.accordion__content-inner {
    padding: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.625;
    letter-spacing: 0.05em;
    color: #333;
    background-color: #fff;
    border-radius: 4px;
    margin: 0 16px 16px;
}

.article-body .accordion__content-inner p {
    margin: 0;
}

/* --------------------------------------------
   18. 目次（ez-toc）
   - Easy Table of Contents プラグインのスタイル上書き
   - 折りたたみはプラグイン側で制御
---------------------------------------------- */
#ez-toc-container {
    margin: 24px 0 0;
    padding: 0;
    background-color: #F7FAFD;
    border: 1px solid #CCCCCC;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

@media (min-width: 768px) {
    #ez-toc-container {
        margin: 48px 0 0;
    }
}

/* タイトルコンテナ（プラグイン版） */
#ez-toc-container .ez-toc-title-container {
    display: flex !important;
    align-items: center !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    cursor: default;
    background: none !important;
    border: none !important;
}

/* タイトルテキスト（手書き版: div / プラグイン版: p） */
#ez-toc-container .ez-toc-title {
    display: flex !important;
    align-items: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    color: #333333 !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: default;
    background: none !important;
}

/* タイトルコンテナがない場合（手書き版）のpadding — プラグイン版と統一 */
#ez-toc-container > .ez-toc-title {
    padding: 8px 16px !important;
}

#ez-toc-container .ez-toc-title::before {
    content: "" !important;
    display: inline-block !important;
    flex-shrink: 0;
    width: 16px;
    height: 13px;
    margin-right: 8px;
    background-image: url(../images/icon-index.svg);
    background-repeat: no-repeat;
    background-size: 16px 13px;
}

/* プラグイン版のトグルボタン（青角丸 + 白矢印に差し替え、SVGアイコンは非表示） */
#ez-toc-container .ez-toc-title-toggle {
    margin-left: auto !important;
    padding: 0 !important;
}

#ez-toc-container .ez-toc-title-toggle a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background-color: #005BAC !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 2px 0 0 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s !important;
}

#ez-toc-container .ez-toc-title-toggle a:hover {
    background-color: #003D73 !important;
}

#ez-toc-container .ez-toc-title-toggle .ez-toc-icon-toggle-span {
    display: block !important;
    width: 14px !important;
    height: 8px !important;
    background-image: url(../images/icon-arrow-under-white.svg) !important;
    background-repeat: no-repeat !important;
    background-size: 14px 8px !important;
    transition: transform 0.3s;
}

#ez-toc-container .ez-toc-title-toggle .ez-toc-icon-toggle-span svg {
    display: none !important;
}

#ez-toc-container .ez-toc-title-toggle .eztoc-hide {
    display: none !important;
}

/* 手書き版のトグルボタン（青角丸 + 白矢印） */
.ez-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-color: #005BAC;
    background-image: url(../images/icon-arrow-under-white.svg);
    background-repeat: no-repeat;
    background-size: 14px 8px;
    background-position: center 55%;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.3s;
    transform: rotate(0deg);
}

.ez-toc-toggle:hover {
    background-color: #003D73;
}

#ez-toc-container nav {
    padding: 0 8px;
    background-color: #F7FAFD;
}

/* ul/ol 両対応 */
.ez-toc-list {
    padding: 0 0 8px;
    margin: 0;
    list-style: none;
    font-size: 14px;
    border-top: 1px solid #CCCCCC;
}

@media (min-width: 768px) {
    .ez-toc-list {
        font-size: 15px;
    }
}

.ez-toc-list li {
    padding: 12px 16px;
    border-bottom: 1px dashed #DCE3EA;
}

.ez-toc-list li:last-child {
    border-bottom: none;
}

.ez-toc-list ul,
.ez-toc-list ol {
    padding: 0;
    margin: 0;
    list-style: none;
}

.ez-toc-list ul li,
.ez-toc-list ol li {
    padding: 12px 16px 0;
    border-bottom: none;
}

#ez-toc-container .ez-toc-list,
#ez-toc-container .ez-toc-list ul,
#ez-toc-container .ez-toc-list ol {
    width: 100%;
    max-width: 100%;
}

/* チェックリスト・番号リストのスタイルを無効化 */
.article-body #ez-toc-container .ez-toc-list li::before {
    content: none;
    display: none;
}

.article-body #ez-toc-container .ez-toc-list li {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px dashed #DCE3EA;
    line-height: inherit;
    gap: 0;
}

.article-body #ez-toc-container .ez-toc-list li:last-child {
    border-bottom: none;
}

.article-body #ez-toc-container .ez-toc-list ul li,
.article-body #ez-toc-container .ez-toc-list ol li {
    display: block;
    padding: 12px 16px 0;
    border-bottom: none;
}

.article-body .ez-toc-link {
    text-decoration: none;
    color: #333;
}

.ez-toc-link::before {
    content: "・";
}

.article-body .ez-toc-link:hover {
    text-decoration: underline;
}

/* 開閉制御（手書き版: is-closedクラス / プラグイン版: インラインstyle） */
#ez-toc-container:not(.is-closed) .ez-toc-title {
    padding-bottom: 0;
}

/* タイトル(padding:16px)と目次リストの上下余白を均等にするため margin-top:0 */
#ez-toc-container:not(.is-closed) nav {
    margin-top: 0;
}

#ez-toc-container.is-closed nav {
    display: none;
}

/* 閉じた状態で矢印を180度回転（手書き版 + プラグインJS方式 + CSS方式共通） */
#ez-toc-container.is-closed .ez-toc-toggle,
#ez-toc-container.is-closed .ez-toc-icon-toggle-span,
#ez-toc-container.is-closed .ez-toc-cssicon-toggle-label {
    transform: rotate(180deg);
}

/* --------------------------------------------
   404ページ
---------------------------------------------- */
.article-body--404 {
    padding-bottom: 0;
}

.error-box {
    padding: 40px 24px;
    background-color: #F7FAFD;
    border-radius: 8px;
}

@media (min-width: 768px) {
    .article-body--404 {
        padding-bottom: 40px;
    }

    .article-body--404 .article-body__inner {
        padding: 64px 0 80px;
    }

    .error-box {
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }
}

.article-body .errer_title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.article-body .errer_title .ib {
    display: block;
}

@media (min-width: 768px) {
    .article-body .errer_title .ib {
        display: inline;
    }

    .article-body .errer_text .ib {
        display: block;
    }
}

.article-body .errer_text {
    margin: 16px 0 32px;
    font-size: 16px;
    text-align: center;
    color: #333;
}

.article-body .new_button a {
    color: #fff;
    text-decoration: none;
}

/* --------------------------------------------
   記事一覧ページ（archive）
---------------------------------------------- */
.archive-body {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 24px;
    font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
    background-color: #F7FAFD;
}

@media (min-width: 768px) {
    .archive-body {
        padding: 0 0 40px;
    }
}

.archive-body__inner {
    width: 90%;
    max-width: 1024px;
    margin: 0 auto;
    padding: 24px 0;
}

@media (min-width: 768px) {
    .archive-body__inner {
        padding: 32px 0 40px;
    }
}

/* 記事カードグリッド（SP:1列 / PC:2列） */
.archive-body .column_list.article_list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0;
    margin: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .archive-body .column_list.article_list {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }
}

.archive-body .column_list > .article_list_item,
.archive-body .column_list > .article_list_item:nth-of-type(2n) {
    width: 100%;
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.archive-body .article_list_item article {
    border-radius: 0;
    box-shadow: none;
}

.archive-body .article_list_item figure {
    border-radius: 0;
}

.archive-body .article_content {
    height: auto;
    min-height: unset;
    border-radius: 0;
}

.archive-body .wp-pagenavi {
    margin-top: 32px;
}

.archive-body .article_list_item figure {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.archive-body .article_list_item img.article_img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.archive-body__title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    border-left: 8px solid #005BAC;
    padding-left: 16px;
    margin: 0 0 20px;
    color: #333;
}

@media (min-width: 768px) {
    .archive-body__title {
        font-size: 24px;
        margin: 0 0 24px;
    }
}