@charset "UTF-8"; /** cpls-front.css */



:root {
    --cpls-font-size-subtext: calc(1rem - 2px);
    --cpls-link-underline: underline;
}

/*--------------------------------
  画面の横揺れを無くす
--------------------------------*/
html {
  overflow-x: hidden;
}

/*--------------------------------
  mainエリアとsidebarエリアの背景色
--------------------------------*/
#main.main,
#sidebar.sidebar {
    background-color: var(--cpls-main-bg);
}

.no-sidebar .wrap {
    max-width: var(--cpls-column-width);
    margin-left: auto;
    margin-right: auto;
}
/* アドミンバーを半透明に */
#wpadminbar {
    background: rgba(29, 35, 39, 0.8);
}

/*--------------------------------
  フォント
--------------------------------*/
/* IBMPlex Sans JP */
@font-face {
    font-family: 'IBMPlex';
    src: url('fonts/IBMPlexSansJP-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'IBMPlex';
    src: url('fonts/IBMPlexSansJP-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
/* LINE Seed */
@font-face {
    font-family: 'LINESeed';
    src: url('fonts/LINESeedJP-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'LINESeed';
    src: url('fonts/LINESeedJP-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
/* Noto Sans */
@font-face {
    font-family: 'NotoSans';
    src: url('fonts/NotoSansJP-Regular.woff2') format('woff2');
    font-weight: 100 400;
    font-display: swap;
}
@font-face {
    font-family: 'NotoSans';
    src: url('fonts/NotoSansJP-Bold.woff2') format('woff2');
    font-weight: 500 900;
    font-display: swap;
}
/* Noto Serif */
@font-face {
    font-family: 'NotoSerif';
    src: url('fonts/NotoSerifJP-Regular.woff2') format('woff2');
    font-weight: 100 400;
}
@font-face {
    font-family: 'NotoSerif';
    src: url('fonts/NotoSerifJP-Bold.woff2') format('woff2');
    font-weight: 500 900;
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 5 Free';
    src: url('fonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
/* フォント */
.cpls,
.mce-content-body {
    font-family: var(--cpls-font-family);
    font-size: 1rem;
}
@media screen and (max-width: 480px) {
    .cpls {
        font-size: 1rem;
    }
}
/* エディターのフォントサイズ（CocoonMaster対処） */
.mce-content-body[class*="fz-"] {
    font-size: inherit;
}
/* リンク（AFXが上書きできるように.cplsは付けない） */
body a.a-wrap,
body a.a-wrap:hover {
    background: transparent;
    padding: 0;
    transition: none;
}
body .entry-content a,
body .entry-content a:hover {
    color: var(--cpls-link-color);
    text-decoration: var(--cpls-link-underline);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
/* ルビの配置を均等にする */
.cpls ruby {
    ruby-align: space-around;
}
/*ルビを文字に近づける（数字を大きくすると下がる）*/
.cpls ruby rt {
    line-height: 1;
    margin-bottom: var(--cpls-rt-offset);
}


/*--------------------------------
  Cocoonの余計なデフォルト設定
--------------------------------*/
/* bodyの背景色（親テーマ）を無効化 チェックボックスで選択 */
body {
    background-color: transparent;
}
/* パンくずリスト内の「ホーム」と「フォルダ」のアイコンのみを非表示 */
.cpls .breadcrumb :is(.fa-home, .fa-folder) {
    display: none;
}
/* カテゴリーラベルを非表示 */
.cpls .cat-label {
    display: none;
}
/* 記事ページのアイキャッチを全幅にする チェックボックスで選択 */
.cpls .eye-catch {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
}
.cpls .eye-catch img {
    width: 100%;
    height: auto;
    display: block;
    max-width: var(--cpls-column-width);
    margin-left: auto;
    margin-right: auto;
}
/* 引用 */
.cpls blockquote {
    font-size: var(--cpls-font-size-subtext);
    line-height: 1.7;
    padding: 1.5em 1em;
}
/* スマホ表示のときに箇条書きリスト左側の余白を無効化 */
@media screen and (max-width: 834px) {
    .cpls .article ul,
    .cpls .article ol {
        padding-left: 1rem;
    }
}
/* ページネーションを無効化 */
.cpls .pagination-next-link {
    display: none;
}
/* SNSボタンのデザイン */
.cpls .sns-share a {
    border: none;
}
.cpls .sns-share .button-caption,
.cpls .sns-share .sns-share-message {
    display: none;
}
/* フッター表示タイプ「ロゴ＆メニュー＆クレジット」のとき
* pcでの左右分割表示をリセットして常に中央揃え */
.cpls :is(.footer-bottom-logo, .footer-bottom-content) {
    all: revert;
    display: block;
    text-align: center;
    margin: 0 auto;
}
.cpls .social-icon.icon-x-corp,
.cpls .social-icon.icon-copy {
    font-size: 20px !important;
}
.cpls .social-icon.icon-line {
    font-size: 24px !important;
}

/*--------------------------------
  インライン
--------------------------------*/
/* 大文字 */
.cpls .large {
    font-size: 1.2rem;
}
.cpls small {
    color: color-mix(in srgb, var(--cpls-color-text) 50%, white);
    font-size: 0.8rem;
    vertical-align: baseline;
}
/* エディターのstrongをさらに装飾 */
.mce-content-body strong {
    text-shadow: 0 0 3px #666;
}
.cpls .cpls-highlight {
    background: var(--cpls-highlight);
}


/*--------------------------------
  アイキャッチ位置（タイトルの上に配置）
--------------------------------*/
.cpls.cpls-eyecatch-top .entry-header {
  display: flex;
  flex-direction: column;
}

.cpls.cpls-eyecatch-top .entry-header .eye-catch-wrap {
  order: -1;
}


/*--------------------------------
  投稿公開日・更新日
--------------------------------*/
.cpls .fas.fa-clock::before,
.cpls .fas.fa-history::before,
.cpls .fas.fa-folder-open::before,
.cpls .fas.fa-tags::before {
    content: none;
    font-weight: normal;
}


/*--------------------------------
  目次
--------------------------------*/
.cpls .toc {
    background: transparent;
    border: none;
}
.cpls .toc li {
    margin-left: 0;
}
/* 【Note】 body.cpls-toc-01 */
.cpls.cpls-toc-01 .toc {
    background-color: color-mix(in srgb, var(--cpls-color-text) 3%, transparent);
    border-radius: var(--cpls-border-radius);
    font-size: var(--cpls-font-size-subtext);
    padding: 1rem;
    width: 100%;
}
.cpls.cpls-toc-01 .toc-content {
    overflow: hidden; /* 枠外の線をカット */
}
.cpls.cpls-toc-01 .toc-list {
    margin-bottom: -1px; /* 一番最後の線（太さ）の分だけ、枠の外へ突き抜けさせる */
}
.cpls.cpls-toc-01 .toc-title {
    font-weight: bold;
    margin-bottom: 1em;
    text-align: start;
}
.cpls.cpls-toc-01 .toc ul ul {
    padding-left: 1em
}
.cpls.cpls-toc-01 .toc a,
.cpls.cpls-toc-01 .toc a:hover {
    display: block;
    color: var(--cpls-color-text);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--cpls-color-text) 15%, transparent);
    line-height: 1.4;
    padding: 0.5rem 0;
}
/* 【SWELL】 body.cpls-toc-02 */
body.cpls-toc-02 .toc {
    --bg: color-mix(in srgb, var(--cpls-color-text) 4%, transparent);
    --bg: oklch(from var(--cpls-color-text) l c h / 0.04);
    --line: color-mix(in srgb, var(--cpls-color-text) 12%, transparent);
    --line: oklch(from var(--cpls-color-text) l c h / 0.12);

    background:linear-gradient(135deg, transparent 25%, var(--bg) 25%, var(--bg) 50%, transparent 50%, transparent 75%, var(--bg) 75%);
    background-size: 4px 4px;
    background-clip: padding-box;
    border-top: 4px double var(--line);
    border-bottom: 4px double var(--line);
    box-sizing: border-box;
    font-size: var(--cpls-font-size-subtext);
    padding: 1.5em 1em 1em;
    margin-bottom: 2rem;
    width: 100%;
}
body.cpls-toc-02 .toc-title {
    text-align: center;
    margin-bottom: 1em;
}
body.cpls-toc-02 .toc a,
body.cpls-toc-02 .toc a:hover {
    display: block;
    color: var(--cpls-color-text);
    text-decoration: none;
    line-height: 1.3;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.cpls.cpls-toc-02 .toc .toc-content > ul > li {
    margin-bottom: 0.75em;
}
body.cpls-toc-02 .toc-list {
    list-style: none;
    margin-left: 1em;
}
body.cpls-toc-02 .toc-list > li {
    list-style-type: disc;
}
body.cpls-toc-02 .toc-list > li > a {
    display: block;
    position: relative;
}
body.cpls-toc-02 .toc-list > li > ul > li { /* h3 */
    position: relative;
    left: -1.5em;
}
body.cpls-toc-02 .toc-list > li > ul > li > a {
    display: block;
    padding-left: 1.5em;
    position: relative;
}
body.cpls-toc-02 .toc-list > li > ul > li > a::before {
    content: "┗";
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: center;
    font-size: var(--cpls-font-size-subtext);
}


/*--------------------------------
  見出し
--------------------------------*/
/* H1タイトルと各見出しの装飾を一斉にリセット */
.entry-title,
.article :is(h1, h2, h3, h4, h5, h6) {
    all: revert;
}
@media screen and (max-width: 480px) {
    .entry-title,
    .article :is(h1, h2, h3, h4, h5, h6) {
        all: revert;
    }
}
.entry-title,
.article :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--cpls-font-family);
    line-height: 1.3;
}
.cpls h1 {
    font-size: var(--cpls-h1-size);
}
.cpls .entry-content h2,
.mce-content-body h2 {
    font-size: var(--cpls-h2-size);
}
.mce-content-body h2 {
    border-bottom: solid 1px;
}
.cpls .entry-content h3,
.mce-content-body h3 {
    font-size: var(--cpls-h3-size);
}
/* フロントのみに適用「.entry-content」指定 */
.cpls .entry-content h2 {
    margin-top: calc(1rem * var(--cpls-h2-margintop));
}
/* フロントのみに適用「.entry-content」指定 */
.cpls .entry-content h3 {
    margin-top: 3em;
}
/*--------------------------------
  見出しデザインパターン
--------------------------------*/
:root {
    --cpls-lh: 1.3; /* line-height */
}
/* .cpls-hstyle-00 */
.cpls-hstyle-00 .article h2,
.cpls-hstyle-00 .article h3 {}
/* body.cpls-hstyle-01 */
.cpls-hstyle-01 .article h2 {
  position: relative;
  display: block; /* 親幅いっぱい */
  padding-bottom: 8px;
}
.cpls-hstyle-01 .article h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; /* 親幅いっぱい */
  height: 4px;
  background-color: var(--cpls-color-primary); /* 線の色 */
  border-radius: 2px; /* 線端の丸み */
}
.cpls-hstyle-01 .article h3 {
  position: relative;
  padding-left: 12px;
  line-height: var(--cpls-lh);
}
.cpls-hstyle-01 .article h3::before {
  content: "";
  position: absolute;
  top: calc(var(--cpls-lh) * 0.5 * 1em);
  left: 0;
  width: 6px; /* 線の太さ */
  height: calc(var(--cpls-lh) * 1em); /* 1行分の高さに固定 */
  background-color: var(--cpls-color-primary); /* 線の色 */
  border-radius: 3px; /* 線端の丸み */
  transform: translateY(-50%);
}


/*------------------------------------
  箇条書きリスト（ul）
------------------------------------*/
:root {
    --cpls-list-indent: 1.5em;
    --cpls-li-space: 0.5em; /* li同士の縦間隔 */
    --cpls-mk-space: 0.3em; /* マーカーと本文の隙間 */
}
:is(ul, ol) li:last-child {
    margin-bottom: 0; /* 最後の項目の下だけ隙間を消す */
}
/* ul=リスト全体 */
.cpls-ul-fa ul {
    list-style: none; /* 元マーカー削除 */
    padding-left: var(--cpls-list-indent); /* リスト左にアイコン分1.5emスペースを作る */
}
/* li=各リスト */
.cpls-ul-fa ul:not(.toc ul) li {
    position: relative;
    line-height: inherit;
    padding-left: var(--cpls-mk-space);
    margin-bottom: var(--cpls-li-space); /* 箇条書き同士の隙間 */
}
/* li::before=マーカー挿入 */
.cpls-ul-fa ul:not(:where(.toc, .footer) ul) li::before {
    /* FontAwesome設定 */
    content: var(--cpls-ul-marker);
    color: var(--cpls-ul-color);
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 0.7em; /* フォントサイズを指定 */
    /* アイコン自体の調整 */
    display: inline-block;
    width: var(--cpls-list-indent); /* アイコンの横幅を1.5emに固定 */
    text-align: left;  /* widthの中で位置決め */
    /* 配置設定 */
    position: absolute;
    left: calc(var(--cpls-list-indent) * -1);
    top: 0.3em; /* フォントサイズと連動して上下位置を微調整 */
}

.cpls-ul-fa .toc li::before,
.cpls-ul-fa .mobile-footer-menu-buttons.mobile-menu-buttons li::before {
    content: none;
}

/*--------------------------------
  ol番号付きリスト（1. 2. 3.）
--------------------------------*/
.cpls-ol-decimal ol {
    list-style: decimal;
    padding-left: var(--cpls-list-indent);
}
/* marker を左にずらす */
.cpls-ol-decimal ol li {
    position: relative;
    line-height: inherit;
    padding-left: var(--cpls-mk-space);
    margin-bottom: var(--cpls-li-space);
}
/* li::before を無効化 */
.cpls-ol-decimal ol li::before {
    content: none !important;
}
/* デフォルトマーカー（::marker）の装飾 */
.cpls-ol-decimal ol li::marker {
    color: var(--cpls-ol-color);
    font-family: inherit;
}
/* フォント（Sans / Serif）反映 */
.cpls-ol-decimal.cpls-ol-sans ol li::marker {
    font-family: sans-serif;
}
.cpls-ol-decimal.cpls-ol-serif ol li::marker {
    font-family: serif;
}


/*--------------------------------
  ol番号付きリスト（丸囲み数字）
--------------------------------*/
/* 白丸・黒丸のときだけ番号を消す */
.cpls-ol-white ol,
.cpls-ol-black ol {
    list-style: none;
    padding-left: var(--cpls-list-indent); /* 他のリストと同じ余白を確保 */
}
/* インデント調整（白丸・黒丸のときだけ） */
.cpls-ol-white ol li,
.cpls-ol-black ol li {
    position: relative;
    line-height: inherit;
    padding-left: var(--cpls-mk-space);
    margin-bottom: var(--cpls-li-space);
}
/* li::before=マーカー挿入 */
.cpls-ol-white ol li::before,
.cpls-ol-black ol li::before {
    color: var(--cpls-ol-color);
    font-family: inherit;
    font-size: 1.2em;
    /* アイコン自体の調整 */
    display: inline-block;
    width: var(--cpls-list-indent);
    text-align: left;  /* widthの中で位置決め */
    /* 配置設定 */
    position: absolute;
    left: calc(var(--cpls-list-indent) * -1); /* 左側の余白部分に配置 */
    top: -0.15em; /* 位置がズレる場合は微調整 */
}
/*白丸丸囲み*/
.cpls-ol-white ol > li:nth-of-type(1)::before {content: '\2460';}
.cpls-ol-white ol > li:nth-of-type(2)::before {content: '\2461';}
.cpls-ol-white ol > li:nth-of-type(3)::before {content: '\2462';}
.cpls-ol-white ol > li:nth-of-type(4)::before {content: '\2463';}
.cpls-ol-white ol > li:nth-of-type(5)::before {content: '\2464';}
.cpls-ol-white ol > li:nth-of-type(6)::before {content: '\2465';}
.cpls-ol-white ol > li:nth-of-type(7)::before {content: '\2466';}
.cpls-ol-white ol > li:nth-of-type(8)::before {content: '\2467';}
.cpls-ol-white ol > li:nth-of-type(9)::before {content: '\2468';}
.cpls-ol-white ol > li:nth-of-type(10)::before {content: '\2469';}
.cpls-ol-white ol > li:nth-of-type(11)::before {content: '\246a';}
.cpls-ol-white ol > li:nth-of-type(12)::before {content: '\246b';}
.cpls-ol-white ol > li:nth-of-type(13)::before {content: '\246c';}
.cpls-ol-white ol > li:nth-of-type(14)::before {content: '\246d';}
.cpls-ol-white ol > li:nth-of-type(15)::before {content: '\246e';}
.cpls-ol-white ol > li:nth-of-type(16)::before {content: '\246f';}
.cpls-ol-white ol > li:nth-of-type(17)::before {content: '\2470';}
.cpls-ol-white ol > li:nth-of-type(18)::before {content: '\2471';}
.cpls-ol-white ol > li:nth-of-type(19)::before {content: '\2472';}
.cpls-ol-white ol > li:nth-of-type(20)::before {content: '\2473';}
/*黒丸白抜き*/
.cpls-ol-black ol > li:nth-of-type(1)::before {content: '\2776';}
.cpls-ol-black ol > li:nth-of-type(2)::before {content: '\2777';}
.cpls-ol-black ol > li:nth-of-type(3)::before {content: '\2778';}
.cpls-ol-black ol > li:nth-of-type(4)::before {content: '\2779';}
.cpls-ol-black ol > li:nth-of-type(5)::before {content: '\277a';}
.cpls-ol-black ol > li:nth-of-type(6)::before {content: '\277b';}
.cpls-ol-black ol > li:nth-of-type(7)::before {content: '\277c';}
.cpls-ol-black ol > li:nth-of-type(8)::before {content: '\277d';}
.cpls-ol-black ol > li:nth-of-type(9)::before {content: '\277e';}
.cpls-ol-black ol > li:nth-of-type(10)::before {content: '\277f';}
.cpls-ol-black ol > li:nth-of-type(11)::before {content: '\24eb';}
.cpls-ol-black ol > li:nth-of-type(12)::before {content: '\24ec';}
.cpls-ol-black ol > li:nth-of-type(13)::before {content: '\24ed';}
.cpls-ol-black ol > li:nth-of-type(14)::before {content: '\24ee';}
.cpls-ol-black ol > li:nth-of-type(15)::before {content: '\24ef';}
.cpls-ol-black ol > li:nth-of-type(16)::before {content: '\24f0';}
.cpls-ol-black ol > li:nth-of-type(17)::before {content: '\24f1';}
.cpls-ol-black ol > li:nth-of-type(18)::before {content: '\24f2';}
.cpls-ol-black ol > li:nth-of-type(19)::before {content: '\24f3';}
.cpls-ol-black ol > li:nth-of-type(20)::before {content: '\24f4';}

/*目次への適用除外*/
.cpls-ol-white .toc ol li::before,
.cpls-ol-black .toc ol li::before { content: none; }


/*--------------------------------
  table
--------------------------------*/
.cpls .article table {
    border-collapse: collapse;
}
.cpls .article table,
.cpls .article table th,
.cpls .article table td {
    border: 1px solid #eee;
}
.cpls .table-caption {
    text-align: center;
    font-weight: bold;
    padding-bottom: 0.5em;
    margin-bottom: 0;
}
/* テーブル内の文字の行の高さ */
.cpls table th,
.cpls table td {
    line-height: 1.5;
}

.cpls .table-frame {
    border-radius: var(--cpls-border-radius);
    overflow: hidden;
    padding: 0;
}
.cpls .table-frame table {
    margin-bottom: 0;
}
/* テーブルデザイン 1 */
.cpls.cpls-table-01 .article table {
    border-style: hidden;
}
.cpls.cpls-table-01 .table-frame {
    border: 1px solid var(--cpls-color-primary);
}
/* テーブルデザイン 2 */
.cpls .article table {
    border-collapse: separate; /* ← これが最重要 */
    border-spacing: 0;         /* collapse と同じ見た目にする */
}
.cpls .table-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--cpls-border-radius);
    padding: 0;
}

.cpls.cpls-table-02 .table-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--cpls-color-primary) 5%, transparent);
    pointer-events: none;
    border-radius: inherit; /* ← これが必要 */
}

/*--------------------------------
  情報/メモボックス
--------------------------------*/
div.cpls-note {
    background: var(--cpls-note-bg);
    border-radius: var(--cpls-border-radius);
    border-top: var(--cpls-note-border-top);
    border-right: var(--cpls-note-border-right);
    border-bottom: var(--cpls-note-border-bottom);
    border-left: var(--cpls-note-border-left);
    padding: 0.75em 1em;
    margin: 1.5em 0;
}


/*--------------------------------
  フルワイド背景色
--------------------------------*/
div.cpls-fullwide {
    background: var(--cpls-fullwide-bg);
    width: 100%;
    display: block;
    padding: 1.5em 1em;
    box-sizing: border-box;
}


/*EOF*/