/*.md-grid { /* max-width: 1400px; /*} /*TOC*/ .md-sidebar--secondary { display: none; } /* ===== 見出しの部分カラー下線（H2/H3） ===== */ .md-typeset h2 { position: relative; padding-bottom: .6rem; /* 下線ぶんの余白 */ margin-bottom: 1.2rem; } .md-typeset h3 { position: relative; padding-bottom: .6rem; /* 下線ぶんの余白 */ margin-bottom: 1.2rem; } /* 既存のborder系は無効化（入れていた場合） */ .md-typeset h2, .md-typeset h3 { border-bottom: none !important; } /* 下線本体：左だけアクセント、右はグレー */ .md-typeset h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; /* 太さはお好みで */ border-radius: 4px; background: linear-gradient(to right, var(--md-accent-fg-color) 0 var(--h-underline-accent, 28%), var(--md-default-fg-color--light) 0 100%); /* ↑ 左から --h-underline-accent% までアクセント色、以降は薄いグレー */ } .md-typeset h3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; /* 太さはお好みで */ border-radius: 2px; background: linear-gradient(to right, rgb(31, 27, 255) 0 var(--h-underline-accent, 48%), var(--md-default-fg-color--light) 0 100%); /* ↑ 左から --h-underline-accent% までアクセント色、以降は薄いグレー */ } /* 右TOCの強調はそのまま */ .md-nav--secondary .md-nav__link--active, .md-nav--secondary .md-nav__link--active:hover { text-decoration: underline; text-underline-offset: .2em; font-weight: 600; } /* ---- フェード（in/out） ---- JSが を付与 → 初期は透明 → is-ready で不透明へ */ .md-content { transition: opacity .24s ease-in-out; } html.js .md-content { opacity: 0; } html.js .md-content.is-ready { opacity: 1; } /* スムーススクロール（任意） */ html { scroll-behavior: smooth; } /* ---- テーブルの縦罫線 + ゼブラ背景 ---- */ :root { /* 色トークンから計算（必要なら%を調整） */ --tbl-divider: var(--md-default-fg-color--lightest); --tbl-zebra-even: color-mix(in srgb, var(--md-default-bg-color) 3%, var(--md-default-fg-color) 4%); --tbl-zebra-hover: color-mix(in srgb, var(--md-default-bg-color) 9%, var(--md-default-fg-color) 8%); } /* Markdown標準テーブル（クラス無し）を対象 */ .md-typeset table:not([class]) { border-collapse: separate; /* 縦罫線を入れるので separate に */ border-spacing: 0; width: 100%; } .md-typeset table:not([class]) th, .md-typeset table:not([class]) td { padding: .6rem .8rem; border-top: 1px solid var(--tbl-divider); } /* 列ごとの縦罫線 */ .md-typeset table:not([class]) th+th, .md-typeset table:not([class]) td+td { border-left: 2px solid var(--tbl-divider); } /* ヘッダーの見分けを少し強めに */ .md-typeset table:not([class]) thead th { background: var(--tbl-zebra-even); border-bottom: 2px solid var(--tbl-divider); font-weight: 700; } /* 偶数行のゼブラ */ .md-typeset table:not([class]) tbody tr:nth-child(even) td { background: var(--tbl-zebra-even); } /* 行ホバー（任意） .md-typeset table:not([class]) tbody tr:hover td { background: var(--tbl-zebra-hover); }*/ /* 見出しの左側にパーマリンクアイコンを移動 */ .md-typeset h1[id], .md-typeset h2[id], .md-typeset h3[id], .md-typeset h4[id] { position: relative; /* 絶対配置の基準にする */ } /* 右側配置のデフォルト余白を無効化 */ .md-typeset .headerlink { margin-left: 0 !important; } /* 左に固定配置（レイアウトを押し広げない） */ .md-typeset h1[id]>.headerlink, .md-typeset h2[id]>.headerlink, .md-typeset h3[id]>.headerlink, .md-typeset h4[id]>.headerlink { position: absolute; left: -1.4em; /* 左に出す量。好みで調整 */ top: 50%; transform: translateY(-50%); /* 見出しの縦中央に揃える */ padding: 0; } /* （任意）モバイルで少し内側に寄せる */ @media (max-width: 600px) { .md-typeset h1[id]>.headerlink, .md-typeset h2[id]>.headerlink, .md-typeset h3[id]>.headerlink, .md-typeset h4[id]>.headerlink { left: -1em; } } /* ==== 回り込み画像のサイズを一定に（大きすぎを防止） ==== */ :root { /* 好みで調整：最大幅(px) と 画面に対する割合 */ --aligned-img-max: 520px; --aligned-img-percent: 42%; } /* 左右回り込み画像に上限幅を適用（解像度が大きくてもはみ出さない） */ .md-typeset img.align-left, .md-typeset img.align-right { max-width: clamp(260px, var(--aligned-img-percent), var(--aligned-img-max)); height: auto; } /* 余白（Materialのデフォルトより少し広めに） */ .md-typeset img.align-left { float: left; margin: .25rem 1.25rem 1rem 0; } .md-typeset img.align-right { float: right; margin: .25rem 0 1rem 1.25rem; } /* セクション境界では回り込みをリセット（次の見出しが食い込まないように） */ .md-typeset h2, .md-typeset h3 { clear: both; } /* モバイルは縦並びに戻す */ @media (max-width: 960px) { .md-typeset img.align-left, .md-typeset img.align-right { float: none; display: block; margin: .5rem auto 1rem; max-width: 100%; } } /* （任意）段落単位で明示的にクリアしたい時用 */ .md-typeset .clear { clear: both; } /* ========================================================= ダークテーマの背景をもう少し暗く（lilToon風） ========================================================= */ [data-md-color-scheme="slate"] { /* ベース背景：本文・サイドバー */ --md-default-bg-color: hsl(240, 6%, 11%); /* #1b1b1f 相当 */ --md-default-bg-color--light: hsl(240, 6%, 14%); --md-default-bg-color--lighter: hsl(240, 6%, 17%); --md-default-bg-color--lightest: hsl(240, 6%, 20%); /* コードブロック等の一段明るい面 */ --md-code-bg-color: hsl(240, 6%, 15%); /* ヘッダー（primary: black の上書き）。揃えたい場合のみ有効化 */ --md-primary-fg-color: hsl(240, 6%, 9%); --md-primary-fg-color--light: hsl(240, 6%, 13%); --md-primary-fg-color--dark: hsl(240, 6%, 7%); /* フッター */ --md-footer-bg-color: hsl(240, 6%, 8%); --md-footer-bg-color--dark: hsl(240, 6%, 6%); } /* ========================================================= 番号付きリスト = タイムライン風ステップ 1. 〜 と書くだけで、左に色付きバッジ、項目間に灰色ドット線 ========================================================= */ .md-typeset ol { list-style: none; counter-reset: step; padding-left: 0; margin-left: .25rem; } .md-typeset ol>li { counter-increment: step; position: relative; padding-left: 1.8rem; padding-bottom: 1.1rem; min-height: 2rem; } /* 項目間をつなぐ「灰色の点（ドット線）」 */ .md-typeset ol>li::before { content: ""; position: absolute; left: .42rem; /* バッジ中央に合わせる */ top: 1.5rem; /* バッジの下から始める */ bottom: -.2rem; border-left: 4px dotted var(--md-default-fg-color--lighter); } .md-typeset ol>li:last-child::before { display: none; } /* 左側の色付き番号バッジ */ .md-typeset ol>li::after { content: counter(step); position: absolute; left: 0; top: .1rem; width: 1rem; height: 1rem; border-radius: 20%; background: var(--md-accent-fg-color); color: #fff; font-size: .78rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--md-default-bg-color); /* 線との重なりを抜く */ } /* ネストした ol（入れ子）はカウンタを再スタート */ .md-typeset ol ol { margin-top: .4rem; } .md-typeset ol ol>li { padding-bottom: .6rem; } /* ol 内の見出し的な強調（**太字** を行頭に置いた場合）を少し大きく */ .md-typeset ol>li>p:first-child>strong:first-child { font-size: 1.02em; }