/*front.css*/


/*--------------------------------
  フォント
--------------------------------*/
/* 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;
}

/* 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;
}
/* ルビの配置を均等にする */
ruby {
	ruby-align: space-around;
}
/*ルビを文字に近づける（数字を大きくすると下がる）*/
ruby rt {
	line-height: 1;
	margin-bottom: var(--cpls-rt-offset);
}


/*--------------------------------
  Cocoonの余計なデフォルト設定
--------------------------------*/
/*アドミンバーを半透明に*/
#wpadminbar {
	background: rgba(29, 35, 39, 0.8);
}
/*bodyの背景色（親テーマ）を無効化*/
body {
	background-color: transparent;
}
/*スマホ表示のときに箇条書きリスト左側の余白を無効化*/
@media screen and (max-width: 834px) {
    .article ul, .article ol {
        padding-left: unset;
    }
}
/*引用の余白調整*/
blockquote {
	padding: 1.5rem 1rem;
}
/*ページネーションを無効化*/
.pagination-next-link {
	display: none;
}
/*フッターのロゴのセンター表示を強制*/
.footer-bottom-logo,
.footer-bottom.fdt-up-and-down .footer-bottom-logo {
	display: block;
    float: none;
    bottom: 0;
    position: static;
}
/*フッターのクレジットのセンター表示を強制*/
.footer-bottom-content,
.footer-bottom.fdt-up-and-down .footer-bottom-content {
    float: none;
    display: block;
    text-align: center;
}


/*--------------------------------
  mainエリアとsidebarエリアの背景色
--------------------------------*/
#main.main,
#sidebar.sidebar {
    background-color: var(--cpls-main-bg);
}


/*------------------------------------
  箇条書きリスト（ul）
------------------------------------*/
:root {
	--cpls-list-indent: 1.5em;
	--cpls-li-space: 0.5em; /* li同士の縦間隔 */
	--cpls-mk-space: 0.3em; /* マーカーと本文の隙間 */
}
li:last-child {
    margin-bottom: 0; /* 最後の項目の下だけ隙間を消す */
}
/* ul=リスト全体 */
.entry-content > ul {
    list-style: none; /* 元マーカー削除 */
    padding-left: var(--cpls-list-indent); /* リスト左にアイコン分1.5emスペースを作る */
}
/* li=各リスト */
.entry-content > ul li {
    position: relative;
    line-height: inherit;
    padding-left: var(--cpls-mk-space);
	margin-bottom: var(--cpls-li-space); /* 箇条書き同士の隙間 */
}
/* li::before=マーカー挿入 */
.entry-content > 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.5em; /* フォントサイズと連動して上下位置を微調整 */
}


/*--------------------------------
  ol番号付きリスト（1. 2. 3.）
--------------------------------*/
body.cpls-list-decimal ol {
    list-style: decimal;
    padding-left: var(--cpls-list-indent);
}
/* marker を左にずらす */
body.cpls-list-decimal ol li {
	position: relative;
	line-height: inherit;
    padding-left: var(--cpls-mk-space);
    margin-bottom: var(--cpls-li-space);
}
/* li::before を無効化 */
body.cpls-list-decimal ol li::before {
    content: none !important;
}
/* デフォルトマーカー（::marker）の装飾 */
body.cpls-list-decimal ol li::marker {
    color: var(--cpls-list-color);
}
/* フォント（Sans / Serif）反映 */
body.cpls-list-decimal.cpls-list-sans ol li::marker {
    font-family: sans-serif;
}
body.cpls-list-decimal.cpls-list-serif ol li::marker {
    font-family: serif;
}


/*--------------------------------
  番号付きリスト（丸囲み数字）
--------------------------------*/
@font-face {
    font-family: 'CPLS-CircledSerif';
    src: url('fonts/CircledNumbers_Serif.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'CPLS-CircledSans';
    src: url('fonts/CircledNumbers_Sans.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.cpls-list-sans { --cpls-list-font: sans-serif; }
body.cpls-list-serif { --cpls-list-font: serif; }
/* 白丸・黒丸のときだけ番号を消す */
body.cpls-list-white ol,
body.cpls-list-black ol {
	list-style: none;
	padding-left: var(--cpls-list-indent); /* 他のリストと同じ余白を確保 */
}
/* インデント調整（白丸・黒丸のときだけ） */
body.cpls-list-white ol li,
body.cpls-list-black ol li {
	position: relative;
    line-height: inherit;
    padding-left: var(--cpls-mk-space);
    margin-bottom: var(--cpls-li-space);
}
/* li::before=マーカー挿入 */
body.cpls-list-white ol li::before,
body.cpls-list-black ol li::before {
	color: var(--cpls-list-color);
	font-family: var(--cpls-list-font);
	font-size: 1.1em;
	/* アイコン自体の調整 */
	display: inline-block;
	width: var(--cpls-list-indent);
	text-align: left;  /* widthの中で位置決め */
    /* 配置設定 */
	position: absolute;
    left: calc(var(--cpls-list-indent) * -1); /* 左側の余白部分に配置 */
    top: 0.02em; /* 位置がズレる場合は 0.1em などで微調整 */
}
/*白丸（cpls-list-white）*/
body.cpls-list-white ol > li:nth-of-type(1)::before {content: '\2460';}
body.cpls-list-white ol > li:nth-of-type(2)::before {content: '\2461';}
body.cpls-list-white ol > li:nth-of-type(3)::before {content: '\2462';}
body.cpls-list-white ol > li:nth-of-type(4)::before {content: '\2463';}
body.cpls-list-white ol > li:nth-of-type(5)::before {content: '\2464';}
body.cpls-list-white ol > li:nth-of-type(6)::before {content: '\2465';}
body.cpls-list-white ol > li:nth-of-type(7)::before {content: '\2466';}
body.cpls-list-white ol > li:nth-of-type(8)::before {content: '\2467';}
body.cpls-list-white ol > li:nth-of-type(9)::before {content: '\2468';}
body.cpls-list-white ol > li:nth-of-type(10)::before {content: '\2469';}
body.cpls-list-white ol > li:nth-of-type(11)::before {content: '\246a';}
body.cpls-list-white ol > li:nth-of-type(12)::before {content: '\246b';}
body.cpls-list-white ol > li:nth-of-type(13)::before {content: '\246c';}
body.cpls-list-white ol > li:nth-of-type(14)::before {content: '\246d';}
body.cpls-list-white ol > li:nth-of-type(15)::before {content: '\246e';}
body.cpls-list-white ol > li:nth-of-type(16)::before {content: '\246f';}
body.cpls-list-white ol > li:nth-of-type(17)::before {content: '\2470';}
body.cpls-list-white ol > li:nth-of-type(18)::before {content: '\2471';}
body.cpls-list-white ol > li:nth-of-type(19)::before {content: '\2472';}
body.cpls-list-white ol > li:nth-of-type(20)::before {content: '\2473';}
/*黒丸（cpls-list-black）*/
body.cpls-list-black ol > li:nth-of-type(1)::before {content: '\2776';}
body.cpls-list-black ol > li:nth-of-type(2)::before {content: '\2777';}
body.cpls-list-black ol > li:nth-of-type(3)::before {content: '\2778';}
body.cpls-list-black ol > li:nth-of-type(4)::before {content: '\2779';}
body.cpls-list-black ol > li:nth-of-type(5)::before {content: '\277a';}
body.cpls-list-black ol > li:nth-of-type(6)::before {content: '\277b';}
body.cpls-list-black ol > li:nth-of-type(7)::before {content: '\277c';}
body.cpls-list-black ol > li:nth-of-type(8)::before {content: '\277d';}
body.cpls-list-black ol > li:nth-of-type(9)::before {content: '\277e';}
body.cpls-list-black ol > li:nth-of-type(10)::before {content: '\277f';}
body.cpls-list-black ol > li:nth-of-type(11)::before {content: '\24eb';}
body.cpls-list-black ol > li:nth-of-type(12)::before {content: '\24ec';}
body.cpls-list-black ol > li:nth-of-type(13)::before {content: '\24ed';}
body.cpls-list-black ol > li:nth-of-type(14)::before {content: '\24ee';}
body.cpls-list-black ol > li:nth-of-type(15)::before {content: '\24ef';}
body.cpls-list-black ol > li:nth-of-type(16)::before {content: '\24f0';}
body.cpls-list-black ol > li:nth-of-type(17)::before {content: '\24f1';}
body.cpls-list-black ol > li:nth-of-type(18)::before {content: '\24f2';}
body.cpls-list-black ol > li:nth-of-type(19)::before {content: '\24f3';}
body.cpls-list-black ol > li:nth-of-type(20)::before {content: '\24f4';}
/* クラスによる専用Webフォントの上書き（この位置に記述） */
body.cpls-list-sans ol li::before { font-family: 'CPLS-CircledSans'; }
body.cpls-list-serif ol li::before { font-family: 'CPLS-CircledSerif';}

/*目次への適用除外*/
body.cpls-list-white .toc ol li::before,
body.cpls-list-black .toc ol li::before { content: none; }


/*--------------------------------
  情報/メモボックス
--------------------------------*/
.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: 12px 16px;
    margin: 1.5em 0;
    font-size: 0.95em;
}


/*--------------------------------
  フルワイド背景色
--------------------------------*/
.cpls-fullwide {
    background: var(--cpls-fullwide-bg);
    width: 100%;
    display: block;
    padding: 1.5em 1em;
    box-sizing: border-box;
}

/*EOF*/
