/*cpls-front.css*/


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

/*--------------------------------
  フォント
--------------------------------*/
/* Inter */
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Bold.woff2') format('woff2');
    font-weight: 700;
}
/* IBMPlex Sans JP */
@font-face {
    font-family: 'IBMPlex';
    src: url('fonts/IBMPlexSansJP-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'IBMPlex';
    src: url('fonts/IBMPlexSansJP-Bold.woff2') format('woff2');
    font-weight: 700;
}
/* LINE Seed */
@font-face {
    font-family: 'LINESeed';
    src: url('fonts/LINESeedJP-Regular.woff2') format('woff2');
    font-weight: 400;
}
@font-face {
    font-family: 'LINESeed';
    src: url('fonts/LINESeedJP-Bold.woff2') format('woff2');
    font-weight: 700;
}
/* Noto Sans */
@font-face {
    font-family: 'NotoSans';
    src: url('fonts/NotoSansJP-Regular.woff2') format('woff2');
    font-weight: 100 400;
}
@font-face {
    font-family: 'NotoSans';
    src: url('fonts/NotoSansJP-Bold.woff2') format('woff2');
    font-weight: 500 900;
}
/* 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-face {
    font-family: 'Font Awesome 5 Free';
    src: url('fonts/fa-solid-900.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}
/* cocoonは何も書かない */
body.cpls-font-cocoon {
    font-family: unset;
}
body.cpls-font-lineseed {
    font-family: 'LINESeed', sans-serif;
    --cpls-rt-offset: -0.1em;
}
body.cpls-font-ibmplex {
    font-family: 'Inter', 'IBMPlex', sans-serif;
    --cpls-rt-offset: -0.2em;
}
body.cpls-font-notosans {
    font-family: 'NotoSans', sans-serif;
    --cpls-rt-offset: -0.7em;
}
body.cpls-font-notoserif {
    font-family: 'NotoSerif', serif;
    --cpls-rt-offset: -0.7em;
}
/* Cocoonに負けないように少し強めに書く */
body.entry-content {
    font-size: 1rem;
}
/* ルビの配置を均等にする */
body ruby {
	ruby-align: space-around;
}
/*ルビを文字に近づける（数字を大きくすると下がる）*/
body ruby rt {
	line-height: 1;
	margin-bottom: var(--cpls-rt-offset);
}



/*--------------------------------
  Cocoonの余計なデフォルト設定
--------------------------------*/
/*アドミンバーを半透明に*/
#wpadminbar {
	background: rgba(29, 35, 39, 0.8);
}
body {
	font-size: revert; 
}
@media screen and (max-width: 480px) {
    .body, .menu-content {
        font-size: revert;
    }
}
/*bodyの背景色（親テーマ）を無効化*//* ■■■チェックボックスで選択 */
body {
	background-color: transparent;
}
/* パンくずリスト内の「ホーム」と「フォルダ」のアイコンのみを非表示 */
.breadcrumb :is(.fa-home, .fa-folder) {
    display: none;
}
/* 記事ページのアイキャッチを全幅にする *//* ■■■チェックボックスで選択 */
.entry-header .eye-catch {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
}
.entry-header .eye-catch img {
	width: 100%;
	height: auto;
	display: block;
	max-width: var(--cpls-column-width);
    margin-left: auto;
    margin-right: auto;
}
/* 引用 */
.entry-content blockquote {
    font-size: 0.95rem;
    line-height: 1.7;
    padding: 1.5em 1em;
}
/*スマホ表示のときに箇条書きリスト左側の余白を無効化*/
@media screen and (max-width: 834px) {
    .article ul, .article ol {
        padding-left: unset;
    }
}
/*ページネーションを無効化*/
.pagination-next-link {
	display: none;
}
/* フッター表示タイプ「ロゴ＆メニュー＆クレジット」のとき
* pcでの左右分割表示をリセットして常に中央揃え */
:is(.footer-bottom-logo, .footer-bottom-content) {
    all: revert;
    display: block;
    text-align: center;
    margin: 0 auto;
}


/*--------------------------------
  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;
}


/*--------------------------------
  目次
--------------------------------*/
.toc,
.toc * { all: revert; }
/* body.cpls-toc-01 */
body.cpls-toc-01 .toc {
    color: var(--cpls-toc-text);
    background-color: var(--cpls-toc-bg);
    border: none;
    font-size: 0.9em;
    padding: 1rem;
}
body.cpls-toc-01 .toc-title {
    font-weight: bold;
    margin-bottom: 1em;
}
body.cpls-toc-01 .toc a,
body.cpls-toc-01 .toc a:hover {
	display: block;
    border-bottom: 1px solid var(--cpls-toc-border);
    line-height: 1.4;
    padding: 0.5rem 0;
    text-decoration: none;
}
body.cpls-toc-01 .toc > .toc-content > .toc-list > li:last-child > a {
    border-bottom: none;
}
/* body.cpls-toc-02 */
body.cpls-toc-02 .toc {
    background: linear-gradient(135deg, transparent 25%, rgba(73, 94, 105, 0.05 ) 25%, rgba(73, 94, 105, 0.05 ) 50%, transparent 50%, transparent 75%, rgba(73, 94, 105, 0.05 ) 75%, rgba(73, 94, 105, 0.05 ));
    background-size: 4px 4px;
    background-clip: padding-box;
    border-top: 4px double #E2E2E2;
    border-bottom: 4px double #E2E2E2;
	box-sizing: border-box;
    font-size: 0.9em;
    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 {
    text-decoration: none;
    display: block;
    line-height: 1.3;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
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: 0.9em;
}


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


/*------------------------------------
  箇条書きリスト（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=リスト全体 */
body.cpls-ul-fa ul {
    list-style: none; /* 元マーカー削除 */
    padding-left: var(--cpls-list-indent); /* リスト左にアイコン分1.5emスペースを作る */
}
/* li=各リスト */
body.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=マーカー挿入 */
body.cpls-ul-fa ul:not(.toc 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; /* フォントサイズと連動して上下位置を微調整 */
}

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

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


/*--------------------------------
  ol番号付きリスト（丸囲み数字）
--------------------------------*/
/* 白丸・黒丸のときだけ番号を消す */
body.cpls-ol-white ol,
body.cpls-ol-black ol {
	list-style: none;
	padding-left: var(--cpls-list-indent); /* 他のリストと同じ余白を確保 */
}
/* インデント調整（白丸・黒丸のときだけ） */
body.cpls-ol-white ol li,
body.cpls-ol-black ol li {
	position: relative;
    line-height: inherit;
    padding-left: var(--cpls-mk-space);
    margin-bottom: var(--cpls-li-space);
}
/* li::before=マーカー挿入 */
body.cpls-ol-white ol li::before,
body.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; /* 位置がズレる場合は微調整 */
}
/*白丸丸囲み*/
body.cpls-ol-white ol > li:nth-of-type(1)::before {content: '\2460';}
body.cpls-ol-white ol > li:nth-of-type(2)::before {content: '\2461';}
body.cpls-ol-white ol > li:nth-of-type(3)::before {content: '\2462';}
body.cpls-ol-white ol > li:nth-of-type(4)::before {content: '\2463';}
body.cpls-ol-white ol > li:nth-of-type(5)::before {content: '\2464';}
body.cpls-ol-white ol > li:nth-of-type(6)::before {content: '\2465';}
body.cpls-ol-white ol > li:nth-of-type(7)::before {content: '\2466';}
body.cpls-ol-white ol > li:nth-of-type(8)::before {content: '\2467';}
body.cpls-ol-white ol > li:nth-of-type(9)::before {content: '\2468';}
body.cpls-ol-white ol > li:nth-of-type(10)::before {content: '\2469';}
body.cpls-ol-white ol > li:nth-of-type(11)::before {content: '\246a';}
body.cpls-ol-white ol > li:nth-of-type(12)::before {content: '\246b';}
body.cpls-ol-white ol > li:nth-of-type(13)::before {content: '\246c';}
body.cpls-ol-white ol > li:nth-of-type(14)::before {content: '\246d';}
body.cpls-ol-white ol > li:nth-of-type(15)::before {content: '\246e';}
body.cpls-ol-white ol > li:nth-of-type(16)::before {content: '\246f';}
body.cpls-ol-white ol > li:nth-of-type(17)::before {content: '\2470';}
body.cpls-ol-white ol > li:nth-of-type(18)::before {content: '\2471';}
body.cpls-ol-white ol > li:nth-of-type(19)::before {content: '\2472';}
body.cpls-ol-white ol > li:nth-of-type(20)::before {content: '\2473';}
/*黒丸白抜き*/
body.cpls-ol-black ol > li:nth-of-type(1)::before {content: '\2776';}
body.cpls-ol-black ol > li:nth-of-type(2)::before {content: '\2777';}
body.cpls-ol-black ol > li:nth-of-type(3)::before {content: '\2778';}
body.cpls-ol-black ol > li:nth-of-type(4)::before {content: '\2779';}
body.cpls-ol-black ol > li:nth-of-type(5)::before {content: '\277a';}
body.cpls-ol-black ol > li:nth-of-type(6)::before {content: '\277b';}
body.cpls-ol-black ol > li:nth-of-type(7)::before {content: '\277c';}
body.cpls-ol-black ol > li:nth-of-type(8)::before {content: '\277d';}
body.cpls-ol-black ol > li:nth-of-type(9)::before {content: '\277e';}
body.cpls-ol-black ol > li:nth-of-type(10)::before {content: '\277f';}
body.cpls-ol-black ol > li:nth-of-type(11)::before {content: '\24eb';}
body.cpls-ol-black ol > li:nth-of-type(12)::before {content: '\24ec';}
body.cpls-ol-black ol > li:nth-of-type(13)::before {content: '\24ed';}
body.cpls-ol-black ol > li:nth-of-type(14)::before {content: '\24ee';}
body.cpls-ol-black ol > li:nth-of-type(15)::before {content: '\24ef';}
body.cpls-ol-black ol > li:nth-of-type(16)::before {content: '\24f0';}
body.cpls-ol-black ol > li:nth-of-type(17)::before {content: '\24f1';}
body.cpls-ol-black ol > li:nth-of-type(18)::before {content: '\24f2';}
body.cpls-ol-black ol > li:nth-of-type(19)::before {content: '\24f3';}
body.cpls-ol-black ol > li:nth-of-type(20)::before {content: '\24f4';}

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


/*--------------------------------
  情報/メモボックス
--------------------------------*/
div.cpls-note {
    background: var(--cpls-note-bg);
    border-radius: var(--cpls-note-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*/