/*
Theme Name: ServerKurabe 3
Description: 2026年11月のデザイン見直し（案B1B：旧サイトの青い帯・ロゴ・見出しの印を残し、囲みを減らした2カラム）。本文の画像などは serverkurabe2 のものを使うので、serverkurabe2 は消さずに残す
Version: 1.0.0
Requires PHP: 8.0
Text Domain: serverkurabe3
*/
/* ==========================================================
共通の土台（3案とも同じ）。色・文字・角丸は各案の :root 変数で変える
旧テーマの画像（チャットのアイコンなど）は serverkurabe2 のものを使う
========================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
margin: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font-body);
font-size: var(--fs-ui);
line-height: 1.7;
font-feature-settings: "palt" var(--palt, 0);
-webkit-font-smoothing: antialiased;
overflow-wrap: anywhere;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 10; background: var(--surface); padding: 8px 12px; }
/* ---------- ヘッダー ---------- */
.site-header { background: var(--header-bg); color: var(--header-ink); border-bottom: 1px solid var(--header-line); }
.site-header__inner {
max-width: var(--wide); margin: 0 auto; padding: 10px 20px;
display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.brand__mark svg { display: block; fill: var(--brand-mark); }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; letter-spacing: .01em; }
.brand__tag { font-size: .72rem; color: var(--header-muted); }
.gnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.gnav a {
display: block; padding: 8px 12px; border-radius: var(--radius-s);
color: inherit; text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
}
.gnav a:hover { background: var(--header-hover); color: inherit; }
@media (max-width: 760px) {
.site-header__inner { padding: 10px 16px 0; }
.gnav { width: calc(100% + 32px); margin: 0 -16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gnav::-webkit-scrollbar { display: none; }
.gnav ul { padding: 2px 12px 6px; }
.gnav a { padding: 8px 10px; font-size: .86rem; }
}
/* ---------- パンくず ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
.crumbs li { display: inline; }
.crumbs li + li::before { content: "›"; margin: 0 .5em; color: var(--line-strong); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28em; }
@media (max-width: 600px) {
/* スマホでは1行に収め、長いページ名だけ「…」で切る */
.crumbs ol { flex-wrap: nowrap; white-space: nowrap; }
.crumbs li { flex: none; }
.crumbs [aria-current] { flex: 0 1 auto; min-width: 0; max-width: none; }
}
/* ---------- ページの見出し ---------- */
.entry__title {
font-family: var(--font-head); font-size: var(--fs-h1); line-height: 1.45; font-weight: 700;
margin: 18px 0 10px; letter-spacing: .01em; color: var(--heading);
}
.pagemeta { margin: 0 0 8px; font-size: .8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 1.2em; }
.pagemeta .prnotice { color: var(--muted); }
/* ==========================================================
本文（.prose）
========================================================== */
.prose { font-size: var(--fs); line-height: var(--lh); color: var(--text); }
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1.15em; }
.prose a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--link-line); }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong, .prose b { font-weight: 700; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.prose li { margin: .25em 0; }
.prose li::marker { color: var(--accent); }
.prose blockquote { margin: 1.4em 0; padding: .8em 1.1em; border-left: 3px solid var(--line-strong); background: var(--soft); color: var(--text-sub); }
.prose pre { overflow-x: auto; padding: 12px 14px; background: var(--soft); border-radius: var(--radius-s); font-size: .85em; line-height: 1.6; }
.prose img { height: auto; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.prose del { color: var(--muted); }
/* 見出し */
.prose h2 {
font-family: var(--font-head); font-size: var(--fs-h2); line-height: 1.5; font-weight: 700; color: var(--heading);
margin: 2.6em 0 .9em; letter-spacing: .01em;
}
.prose h3 {
font-family: var(--font-head); font-size: var(--fs-h3); line-height: 1.55; font-weight: 700; color: var(--heading);
margin: 2em 0 .7em;
}
.prose h4 { font-size: 1em; font-weight: 700; margin: 1.6em 0 .5em; }
.prose h2 + h3 { margin-top: 1.1em; }
.prose h2 img, .prose h3 img { display: none; }
/* h2.point / h2.caution / h2.spec … アイコンで区別（旧テーマの画像の代わり） */
.prose h2.point::before, .prose h2.caution::before, .prose h2.spec::before {
content: ""; display: inline-block; width: 1.05em; height: 1.05em; margin: 0 .45em -.14em 0;
background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.prose h2.point::before { color: var(--good); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm-1.2 14.2l-4-4 1.4-1.4 2.6 2.6 5.6-5.6 1.4 1.4-7 7z'/%3E%3C/svg%3E"); }
.prose h2.caution::before { color: var(--warn); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2L1 21h22L12 2zm1 15h-2v-2h2v2zm0-4h-2V9h2v4z'/%3E%3C/svg%3E"); }
.prose h2.spec::before { color: var(--accent); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 4h18v4H3zm0 6h18v4H3zm0 6h18v4H3z'/%3E%3C/svg%3E"); }
/* 強調（旧サイトで多用されている青い太字） */
.prose .enhance { font-weight: 700; color: var(--enhance-ink); background: var(--enhance-bg); }
.prose .attention { text-decoration: underline dashed var(--line-strong); text-underline-offset: .25em; }
.prose .supply { font-size: .88em; color: var(--muted); }
.prose .bold { font-weight: 700; }
.prose .small { font-size: .85em; }
/* 旧テーマの h3.subtitle 系はそのまま h3 の見た目に */
.prose h3.subtitle2, .prose h3.subtitle3 { font-size: calc(var(--fs-h3) * .95); }
/* ---------- 表 ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.4em 0 1.6em; border: 1px solid var(--line); border-radius: var(--radius-s); }
.table-scroll > table { margin: 0 !important; border: 0; }
.prose table { width: 100% !important; border-collapse: collapse; font-size: .86em; line-height: 1.6; background: var(--surface); margin: 1.4em 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: .55em .7em; vertical-align: top; text-align: left; width: auto !important; }
.table-scroll th, .table-scroll td { border-width: 0 1px 1px 0; }
.table-scroll tr > :last-child { border-right: 0; }
.table-scroll tr:last-child > * { border-bottom: 0; }
.prose th { background: var(--soft); font-weight: 700; color: var(--heading); }
.prose tr > td:first-child { color: var(--text-sub); }
.prose td.good { color: var(--good); font-weight: 700; }
.prose td.bad { color: var(--warn); }
.prose .specsub { display: block; font-size: .86em; color: var(--muted); }
.prose table#datalist th[colspan] { background: var(--soft-2); text-align: left; font-size: .95em; }
.prose .specmemo { list-style: none; padding: 0; font-size: .82em; color: var(--muted); }
@media (max-width: 760px) {
.table-scroll > table { min-width: 560px; }
.table-scroll > table.sv3, .table-scroll > table.sv4, .table-scroll > table.sv5 { min-width: 640px; }
/* 横にスクロールしても項目名（左の列）が見えたままになるように */
.table-scroll > table tr > :first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.table-scroll > table tr > th:first-child:not([colspan]) { background: var(--soft); }
.table-scroll .cell-sticky { position: sticky; left: .7em; display: inline-block; }
}
/* 横にスクロールできる表の上の一言（site.js が、はみ出している表にだけ付ける） */
.prose .table-hint { margin: 1.4em 0 .35em; font-size: .78rem; line-height: 1.4; color: var(--muted); text-align: right; }
.prose .table-hint + .table-scroll { margin-top: 0; }
/* ---------- レビューの冒頭（スクショ＋チャート） ---------- */
.prose .reviewtop {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 24px; align-items: start;
margin: 1.4em 0 2em; padding: 18px; background: var(--soft); border-radius: var(--radius);
}
.prose .reviewtop::after { content: none; }
.prose .capture, .prose .chart { width: auto; float: none; margin: 0; }
.prose .capture img { display: block; width: 100%; max-width: 360px; border-radius: var(--radius-s); border: 1px solid var(--line); background: #fff; }
.prose .capture p:empty { display: none; }
.prose .chart svg.radar { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
.prose .chart p { margin: 0; }
.prose .score { text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 1.15em; color: var(--heading); margin-top: 4px !important; }
@media (max-width: 600px) {
.prose .reviewtop { grid-template-columns: 1fr; padding: 14px; }
.prose .capture img { max-width: none; }
}
/* 公式サイトへのリンク（.gosite）→ ボタン */
.prose .gosite { margin: 12px 0 0; font-size: .9em; color: var(--muted); }
.prose .gosite img[src*="linkicon"] { display: none; }
.prose .gosite a, .prose .jumpbutton a {
display: inline-flex; align-items: center; gap: .4em; margin-left: .3em;
padding: .55em 1.1em; border-radius: var(--radius-btn);
background: var(--cta); color: var(--cta-ink); font-weight: 700; text-decoration: none; font-size: 1.02em; line-height: 1.4;
box-shadow: var(--cta-shadow);
}
.prose .gosite a::after, .prose .jumpbutton a::after { content: "›"; font-size: 1.2em; line-height: 1; }
.prose .gosite a:hover, .prose .jumpbutton a:hover { background: var(--cta-hover); color: var(--cta-ink); }
.prose .gosite.textlast { margin: 1.6em 0 2.2em; padding: 18px; text-align: center; background: var(--soft); border-radius: var(--radius); font-size: 1em; }
.prose .gosite.textlast a { margin: 8px 0 0; display: flex; justify-content: center; max-width: 360px; margin-inline: auto; font-size: 1.05em; }
.prose .jump { margin: 1em 0; }
/* ランキングの各サービス欄（スクショ＋公式・レビューのリンク） */
.prose .reviewtop:has(.rankcap) { grid-template-columns: 200px minmax(0, 1fr); padding: 14px; align-items: center; }
.prose .rankcap img { max-width: 200px; }
.prose .gosite.rankgo { margin: 0; color: var(--text); }
.prose .rankgo dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
.prose .rankgo dt { font-size: .82em; color: var(--muted); }
.prose .rankgo dd { margin: 0; }
.prose .rankgo dd a { margin: 0; }
.prose .rankgo dt:nth-of-type(2) + dd a { background: transparent; color: var(--link); box-shadow: none; padding: 0; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; }
.prose .rankgo dt:nth-of-type(2) + dd a::after { content: none; }
@media (max-width: 600px) {
.prose .reviewtop:has(.rankcap) { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
.prose .rankcap img { max-width: 92px; }
.prose .rankgo dd a { display: flex; justify-content: center; padding: .55em .7em; font-size: .94em; } /* 公式ボタンの文字が2行に割れにくいように */
.prose .rankgo dl { grid-template-columns: 1fr; gap: 2px; }
.prose .rankgo dd + dt { margin-top: 8px; }
}
/* 目次プラグイン（Table of Contents Plus） */
.prose #toc_container {
width: auto !important; display: block; margin: 1.6em 0 2em; padding: 14px 18px;
background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); font-size: .92em;
}
.prose #toc_container .toc_title { margin: 0 0 6px; font-weight: 700; text-align: left; }
.prose #toc_container ul { list-style: none; padding-left: 0; margin: 0; }
.prose #toc_container ul ul { padding-left: 1.2em; }
.prose #toc_container li { margin: .2em 0; }
.prose #toc_container a { text-decoration: none; color: var(--text); }
.prose #toc_container a:hover { color: var(--link); text-decoration: underline; }
.prose #toc_container .toc_number { color: var(--muted); margin-right: .3em; }
/* 初心者向けの会話（ネコくんとクマくん）：左にアイコン、セリフは淡い吹き出し。
旧サイトは話し手ごとに文字の色を変えていたので、吹き出しの色で見分けられるようにする（ネコ＝淡いピンク、クマ＝淡い青） */
.prose .kakeai, .prose .kakeai2 { --talk-indent: 62px; --talk-icon: 48px; }
.prose .kakeai p, .prose .kakeai2 p { margin: 0 0 1em; padding-left: var(--talk-indent); } /* 会話の中の画像や注記もセリフの位置にそろえる */
.prose .kakeai p.cat, .prose .kakeai2 p.cat, .prose .kakeai p.bear, .prose .kakeai2 p.bear {
position: relative; margin: 0 0 14px var(--talk-indent); padding: .7em 1.05em; min-height: var(--talk-icon);
border-radius: 12px; background: var(--talk-bg);
}
.prose p.cat { --talk-bg: #fcf1f4; --talk-face: url("../serverkurabe2/images/beginner/cat48.png"); }
.prose p.bear { --talk-bg: #edf2fa; --talk-face: url("../serverkurabe2/images/beginner/bear48.png"); }
.prose .kakeai p.cat::before, .prose .kakeai2 p.cat::before, .prose .kakeai p.bear::before, .prose .kakeai2 p.bear::before {
content: ""; position: absolute; left: calc(-1 * var(--talk-indent)); top: 0; width: var(--talk-icon); height: var(--talk-icon);
background: var(--talk-face) center / contain no-repeat;
}
.prose .kakeai p.cat::after, .prose .kakeai2 p.cat::after, .prose .kakeai p.bear::after, .prose .kakeai2 p.bear::after {
content: ""; position: absolute; left: -7px; top: 15px; border: 7px solid transparent; border-left: 0; border-right-color: var(--talk-bg);
}
@media (max-width: 600px) {
.prose .kakeai, .prose .kakeai2 { --talk-indent: 48px; --talk-icon: 38px; }
.prose .kakeai p.cat, .prose .kakeai2 p.cat, .prose .kakeai p.bear, .prose .kakeai2 p.bear { padding: .6em .85em; }
.prose .kakeai p.cat::after, .prose .kakeai2 p.cat::after, .prose .kakeai p.bear::after, .prose .kakeai2 p.bear::after { top: 11px; }
}
/* 一覧ページ（目的別・レビュー一覧・基礎知識）は lists.css */
/* 旧ページの固定幅の指定を打ち消す */
.prose [style*="width"]:not(img):not(svg) { max-width: 100%; }
/* 画像の style="max-width:300px" などが、狭い画面で枠からはみ出さないように */
@media (max-width: 600px) { .prose img[style*="width"]:not([width="1"]) { max-width: 100% !important; height: auto; } }
/* 旧ページの「>> このページのトップに戻る」（href="#header"）：小さく右寄せに */
.prose a[href="#header"] { float: right; font-size: 0; text-decoration: none; }
.prose a[href="#header"]::before { content: "↑ ページの先頭へ"; font-size: .8rem; color: var(--muted); }
.prose a[href="#header"]:hover::before { color: var(--link); }
.prose div:has(> a[href="#header"]) { overflow: hidden; margin: 2em 0 0 !important; }
.prose .alignleft { float: left; margin: 0 1em 1em 0; }
.prose .alignright { float: right; margin: 0 0 1em 1em; }
.prose .aligncenter { display: block; margin: 1em auto; }
/* 編集リンク（管理者のみ） */
.post-edit-link { font-size: .75rem; color: var(--muted); }
/* ==========================================================
サイト内の案内（関連・次に読む・ランキング・目的別）
========================================================== */
.related, .nextstep, .pager { margin: 40px 0 0; }
.related__title { font-family: var(--font-head); font-size: 1.1rem; margin: 0 0 12px; color: var(--heading); }
.related__list { list-style: none; margin: 0; padding: 0; }
.related__label, .recent__label, .nextstep__label {
display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--accent-ink);
background: var(--accent-soft); border-radius: 999px; padding: 1px 8px; margin-right: 8px; vertical-align: 2px; white-space: nowrap;
}
.related--list .related__item a {
display: block; padding: 12px 2px; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; line-height: 1.55;
}
.related--list .related__item:last-child a { border-bottom: 1px solid var(--line); }
.related--list .related__item a:hover .related__name { color: var(--link); text-decoration: underline; }
.related--cards .related__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.related--cards .related__item a {
display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1.5;
transition: border-color .15s, transform .15s;
}
.related--cards .related__item a:hover { border-color: var(--accent); transform: translateY(-1px); }
.related__thumb { display: block; aspect-ratio: 280 / 150; overflow: hidden; background: var(--soft); }
.related__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.related__thumb--none { display: grid; place-items: center; color: var(--accent); }
.related--cards .related__label { margin: 10px 12px 4px; align-self: flex-start; }
.related--cards .related__name { padding: 0 12px; font-weight: 600; }
.related__score { margin: auto 12px 10px; padding-top: 6px; font-size: .78rem; color: var(--muted); }
.related--cards .related__item:not(:has(.related__score)) .related__name { padding-bottom: 12px; }
.nextstep { padding: 18px 20px; background: var(--soft); border-radius: var(--radius); }
.nextstep__title { margin: 0 0 8px; font-weight: 700; font-family: var(--font-head); color: var(--heading); }
.nextstep ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.nextstep a { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.55; }
.nextstep__label { flex: none; min-width: 5.6em; margin-right: 0; text-align: center; } /* 種類の文字数が違っても題名の頭がそろうように */
.nextstep a:hover { color: var(--link); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager a { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1.5; }
.pager a span { display: block; font-size: .75rem; color: var(--muted); margin-bottom: 2px; }
.pager__next { text-align: right; grid-column: 2; }
.pager a:hover { border-color: var(--accent); }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; } .pager__next { grid-column: 1; } .pager > span:empty { display: none; } }
.series { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: .9rem; }
.series summary { cursor: pointer; padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; list-style: none; }
.series summary::-webkit-details-marker { display: none; }
.series summary::after { content: "一覧 ▾"; font-size: .8rem; color: var(--muted); }
.series[open] summary::after { content: "閉じる ▴"; }
.series__label { font-weight: 700; color: var(--heading); }
.series__count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.series__list { margin: 0; padding: 4px 14px 12px 2.2em; }
.series__list a { color: var(--text); text-decoration: none; }
.series__list a:hover { color: var(--link); text-decoration: underline; }
.series__list a[aria-current] { font-weight: 700; color: var(--accent-ink); }
.rankbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.rankbox__title { font-family: var(--font-head); font-size: 1rem; margin: 0 0 8px; color: var(--heading); }
.rankbox__list { list-style: none; margin: 0; padding: 0; }
.rankbox__list a { display: flex; align-items: center; gap: 12px; padding: 9px 0; color: var(--text); text-decoration: none; border-top: 1px solid var(--line); }
.rankbox__list li:first-child a { border-top: 0; }
.rankbox__list a:hover .rankbox__name { color: var(--link); text-decoration: underline; }
.rankbox__no {
flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
font-size: .8rem; font-weight: 700; background: var(--rank-bg); color: var(--rank-ink); font-variant-numeric: tabular-nums;
}
.rankbox__list li:first-child .rankbox__no { background: var(--rank1-bg); color: var(--rank1-ink); }
.rankbox__name { flex: 1; font-weight: 600; line-height: 1.45; }
.rankbox__score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--heading); }
.rankbox__score small { font-size: .7em; font-weight: 500; color: var(--muted); margin-left: 1px; }
.rankbox__thumb { width: 72px; height: 48px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--line); flex: none; }
.rankbox__more { margin: 8px 0 0; font-size: .85rem; }
.rankbox__more a { color: var(--link); }
.goals { list-style: none; margin: 0; padding: 0; }
.goals svg { flex: none; color: var(--accent); }
.goals--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.goals--chips a {
display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px 7px 10px; border-radius: 999px;
background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: .88rem; font-weight: 600;
}
.goals--chips svg { width: 18px; height: 18px; }
.goals--chips a:hover { border-color: var(--accent); color: var(--link); }
.goals--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.goals--tiles a {
display: flex; align-items: center; gap: 10px; padding: 14px; height: 100%; border-radius: var(--radius);
background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; font-size: .92rem; line-height: 1.4;
}
.goals--tiles a:hover { border-color: var(--accent); color: var(--link); }
.linkset { list-style: none; margin: 0; padding: 0; }
.linkset a { display: block; padding: 9px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; line-height: 1.5; }
.linkset li:first-child a { border-top: 0; }
.linkset a:hover { color: var(--link); text-decoration: underline; }
.recent { list-style: none; margin: 0; padding: 0; }
.recent--list a { display: block; padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; }
.recent--list li:first-child a { border-top: 0; }
.recent--list a:hover .recent__name { color: var(--link); text-decoration: underline; }
.recent__meta { display: flex; align-items: center; font-size: .78rem; color: var(--muted); margin-bottom: 2px; }
.recent__name { display: block; font-weight: 600; line-height: 1.5; }
.recent--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.recent--cards a { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--text); text-decoration: none; }
.recent--cards a:hover { border-color: var(--accent); }
.recent__thumb { display: block; aspect-ratio: 280 / 140; overflow: hidden; background: var(--soft); }
.recent__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.recent__thumb--none { display: grid; place-items: center; color: var(--accent); }
.recent--cards .recent__meta { padding: 10px 12px 0; }
.recent--cards .recent__name { padding: 2px 12px 12px; font-size: .92rem; }
/* rows：左に小さなスクショ（解説はアイコン）を同じ大きさで並べた行 */
.recent--rows a {
display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 14px; align-items: start;
padding: 11px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.recent--rows li:first-child a { border-top: 0; padding-top: 2px; }
.recent--rows .recent__thumb, .recent--rows .recent__thumb--none { grid-row: 1 / 3; width: 88px; height: auto; aspect-ratio: 88 / 58; border: 1px solid var(--line); border-radius: 4px; }
.recent--rows .recent__thumb--none svg { width: 22px; height: 22px; }
.recent--rows .recent__name { font-size: .92rem; }
.recent--rows a:hover .recent__name { color: var(--link); text-decoration: underline; }
/* ---------- フッター ---------- */
.site-footer { margin-top: 64px; background: var(--footer-bg); color: var(--footer-ink); font-size: .86rem; }
.site-footer__inner { max-width: var(--wide); margin: 0 auto; padding: 36px 20px 20px; display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.site-footer a { color: inherit; }
.site-footer__brand { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; margin: 0 0 6px; }
.site-footer__about p { margin: 0 0 8px; color: var(--footer-muted); }
.site-footer__links { display: flex; gap: 16px; }
.site-footer__head { font-weight: 700; margin: 0 0 6px; }
.site-footer .linkset a, .site-footer__list a { border-color: var(--footer-line); color: var(--footer-muted); padding: 6px 0; }
.site-footer .linkset a:hover { color: var(--footer-ink); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list a { display: block; text-decoration: none; border-top: 1px solid var(--footer-line); }
.site-footer__list li:first-child a { border-top: 0; }
.site-footer__copy { max-width: var(--wide); margin: 0 auto; padding: 12px 20px 24px; color: var(--footer-muted); font-size: .75rem; }
@media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; padding: 28px 16px 12px; } .site-footer__copy { padding: 8px 16px 20px; } }
/* アフィリエイトの計測用 1px 画像は大きさを変えない（読み込みはそのまま） */
.prose img[width="1"][height="1"] { width: 1px !important; height: 1px !important; max-width: 1px !important; border: 0 !important; padding: 0 !important; display: inline !important; position: absolute; opacity: 0; pointer-events: none; }
/* スクショのないページ（解説記事）はカードの画像枠を低くする */
.related__thumb--none, .recent__thumb--none { aspect-ratio: auto; height: 64px; }
/* スマホではカードを横長（左にスクショ）にして縦に長くなりすぎないように */
@media (max-width: 600px) {
.related--cards .related__list { grid-template-columns: 1fr; gap: 8px; }
.related--cards .related__item a { display: grid; grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 12px; align-items: start; padding: 10px; }
.related--cards .related__thumb { grid-row: 1 / 4; aspect-ratio: 280 / 200; border-radius: 6px; }
.related--cards .related__thumb--none { height: auto; }
.related--cards .related__label { margin: 0 0 2px; }
.related--cards .related__name { padding: 0 !important; font-size: .88rem; }
.related--cards .related__score { margin: 2px 0 0; padding: 0; }
}
@media (max-width: 600px) { .related--cards .related__label { justify-self: start; } }
.prose #datalist tr > td:first-child { min-width: 8.5em; }
/* 線画アイコン（node icons.js で生成。手で直さない） */
:root {
--i-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-4 4-6 8-6s7 2 8 6'/%3E%3C/svg%3E");
--i-building: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-3v19M12 9h8v12M8 8v.01M8 12v.01M8 16v.01M16 13v.01M16 17v.01'/%3E%3C/svg%3E");
--i-traffic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16'/%3E%3Cpath d='M4 16l5-5 4 3 7-7'/%3E%3Cpath d='M15 7h5v5'/%3E%3C/svg%3E");
--i-wp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5 8l4 11 3-8 3 8 4-11'/%3E%3C/svg%3E");
--i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
--i-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9 9l3 4 3-4M12 13v5M9 14h6'/%3E%3C/svg%3E");
--i-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L3 10.5l7 2.5 2.5 7z'/%3E%3Cpath d='M21 3L10 13'/%3E%3C/svg%3E");
--i-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l3-8h12l3 8v6H3z'/%3E%3Cpath d='M3 13h5l1 3h6l1-3h5'/%3E%3C/svg%3E");
--i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
--i-terminal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 9l3 3-3 3M12 15h5'/%3E%3C/svg%3E");
--i-candle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v4M7 15v6M17 5v5M17 16v3'/%3E%3Crect x='5' y='7' width='4' height='8' rx='1'/%3E%3Crect x='15' y='10' width='4' height='6' rx='1'/%3E%3C/svg%3E");
--i-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='7' rx='1.5'/%3E%3Crect x='4' y='14' width='16' height='7' rx='1.5'/%3E%3Cpath d='M8 6.5h.01M8 17.5h.01'/%3E%3C/svg%3E");
--i-disk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='13' width='18' height='7' rx='2'/%3E%3Cpath d='M5 13l2.5-8h9L19 13'/%3E%3Cpath d='M16 16.5h.01'/%3E%3C/svg%3E");
--i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3z'/%3E%3C/svg%3E");
--i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
--i-db: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5.5' rx='8' ry='3'/%3E%3Cpath d='M4 5.5v13c0 1.7 3.6 3 8 3s8-1.3 8-3v-13M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E");
--i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 018 0v3M12 14.5v2.5'/%3E%3C/svg%3E");
--i-history: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.6-6.1L3.5 8.5'/%3E%3Cpath d='M3.5 3.5v5h5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
--i-sliders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E");
--i-scale: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v17M7 20h10M5 7h14'/%3E%3Cpath d='M5 7l-3 6.5a3 3 0 0 0 6 0zM19 7l-3 6.5a3 3 0 0 0 6 0z'/%3E%3C/svg%3E");
--i-book: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H20v15H5.5A1.5 1.5 0 0 0 4 19.5z'/%3E%3Cpath d='M4 19.5A1.5 1.5 0 0 0 5.5 21H20v-3'/%3E%3C/svg%3E");
--i-wakaba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 26'%3E%3Cpath d='M1.5 1.5L10 5v19.5l-8.5-6z' fill='%23f7d417' stroke='%23c9a80a' stroke-width='.8' stroke-linejoin='round'/%3E%3Cpath d='M18.5 1.5L10 5v19.5l8.5-6z' fill='%232f9e44' stroke='%2323803a' stroke-width='.8' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* ==========================================================
一覧ページ（本文に旧サイトの並べ方が入っているページ）
・目的別のおすすめ（/recommend/ の .recommendlist）
・レビュー一覧（/shared-list/ などの .svlist）
・選び方・基礎知識（/learn/ の #learncats・#learnlist）
本文の HTML は変えず、旧テーマの画像は隠して icons.css の線画（--i-<名前>）に置き換える。
本文には WordPress の自動整形で空の や、リンクの外に出た
が入るので、それを前提に組む
========================================================== */
/* アイコンの共通部品：::before / ::after に --ico の形を、文字色で塗る */
.prose .recommendlist li > a:first-child::before,
.prose #learncats td a::before,
.prose .learncat h2::after {
content: ""; flex: none; display: block; background: currentColor;
-webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.prose .recommendlist p:empty, .prose .svlist p:empty { display: none; }
/* ---------- 目的別のおすすめ：PCは2列のカード、スマホは1列 ---------- */
.prose .recommendlist {
list-style: none; padding: 0; margin: 1.2em 0 2em !important;
display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px;
}
.prose .recommendlist li {
position: relative; margin: 0; padding: 14px 16px;
display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-content: start;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
font-size: .86em; line-height: 1.6; color: var(--text-sub);
transition: border-color .15s;
}
.prose .recommendlist li:hover { border-color: var(--accent); }
.prose .recommendlist li > a:first-child {
grid-row: span 2; width: 48px; height: 48px; border-radius: 10px;
display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.prose .recommendlist li > a:first-child img { display: none; }
.prose .recommendlist li > a:first-child::before { width: 26px; height: 26px; }
.prose .recommendlist li p { margin: 0; }
.prose .recommendlist li p a {
display: block; margin: 1px 0 2px; font-size: 1.12em; font-weight: 700; line-height: 1.45;
color: var(--heading); text-decoration: none;
}
.prose .recommendlist li p a::after { content: ""; position: absolute; inset: 0; } /* カード全体を押せるように */
.prose .recommendlist li:hover p a { color: var(--link); }
.recommendlist a::before { --ico: var(--i-book); } /* 未登録のページ用（詳しさが低いので下の指定が優先） */
.prose .recommendlist a[href*="shared-ranking"]::before { --ico: var(--i-person); }
.prose .recommendlist a[href*="business-ranking"]::before { --ico: var(--i-building); }
.prose .recommendlist a[href*="traffic-ranking"]::before { --ico: var(--i-traffic); }
.prose .recommendlist a[href*="wordpress-ranking"]::before { --ico: var(--i-wp); }
.prose .recommendlist a[href*="speed-ranking"]::before { --ico: var(--i-bolt); }
.prose .recommendlist a[href*="lowprice-ranking"]::before { --ico: var(--i-coin); }
.prose .recommendlist a[href*="send-mail"]::before { --ico: var(--i-send); }
.prose .recommendlist a[href*="server-for-imap"]::before { --ico: var(--i-inbox); }
.prose .recommendlist a[href*="anti-spam"]::before { --ico: var(--i-shield); }
.prose .recommendlist a[href*="use-ssh"]::before { --ico: var(--i-terminal); }
.prose .recommendlist a[href*="metatrader4-vps"]::before { --ico: var(--i-candle); }
@media (max-width: 600px) {
.prose .recommendlist { grid-template-columns: 1fr; gap: 8px; }
.prose .recommendlist li { padding: 12px 14px; grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; }
.prose .recommendlist li > a:first-child { width: 42px; height: 42px; }
.prose .recommendlist li > a:first-child::before { width: 23px; height: 23px; }
}
/* ---------- レビュー一覧：PCはスクショ付きのカードを横に、スマホはスクショを左に ---------- */
.prose .svlist {
list-style: none; padding: 0; margin: 1em 0 14px !important;
display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px;
}
.prose .svlist + .svlist { margin-top: 0 !important; }
.prose .svlist li {
position: relative; margin: 0; padding: 0 14px 14px; overflow: hidden;
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
font-size: .84em; line-height: 1.65; color: var(--text-sub);
transition: border-color .15s;
}
.prose .svlist li:hover { border-color: var(--accent); }
.prose .svlist li > a:first-child { display: block; margin: 0 -14px 6px; color: var(--heading); text-decoration: none; }
.prose .svlist li > a:first-child::after { content: ""; position: absolute; inset: 0; } /* カード全体を押せるように */
.prose .svlist li > a img {
display: block; width: 100%; height: auto; aspect-ratio: 280 / 165; object-fit: cover; object-position: top;
border-bottom: 1px solid var(--line); background: var(--soft);
}
.prose .svlist li > a p { margin: 10px 14px 0; font-size: 1.14em; font-weight: 700; line-height: 1.45; }
.prose .svlist li:hover > a p { color: var(--link); }
.prose .svlist li > p { margin: 0; }
.prose .svlist li span[style*="color"] { display: block; margin-top: 4px; font-size: .95em; font-weight: 600; }
/* 「その他のサービス」（文字だけの一覧）：線で区切った列 */
.prose .svlist.last { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 24px; font-size: inherit !important; line-height: inherit !important; margin-bottom: 1.6em !important; }
.prose .svlist.last li {
padding: 9px 2px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; overflow: visible;
font-size: 0; /* 本文の「・」を消す */
}
.prose .svlist.last li > * { font-size: .94rem; line-height: 1.55; }
.prose .svlist.last li > a:first-child { display: inline; margin: 0; color: var(--link); font-weight: 600; }
.prose .svlist.last li span[style*="color"] { font-size: .76rem; margin-top: 1px; }
@media (max-width: 600px) {
.prose .svlist { grid-template-columns: 1fr; gap: 8px; }
.prose .svlist + .svlist { margin-top: 0 !important; }
.prose .svlist li { display: flow-root; padding: 10px 12px; }
.prose .svlist li > a:first-child { margin: 0; }
.prose .svlist li > a img { float: left; width: 104px; aspect-ratio: 280 / 200; margin: 2px 12px 2px 0; border: 1px solid var(--line); border-radius: 6px; }
.prose .svlist li > a p { margin: 0 0 2px; }
.prose .svlist li > p { overflow: hidden; } /* 説明文をスクショの下に回り込ませない */
.prose .svlist.last { grid-template-columns: 1fr 1fr; gap: 0 14px; }
.prose .svlist.last li { display: block; padding: 8px 2px; }
}
/* ---------- 選び方・基礎知識 ---------- */
/* 上の分類ボタン：アイコン付き */
.prose #learncats table { width: 100% !important; border: 0; background: none; margin: 0 0 1.4em; }
.prose #learncats .table-scroll { border: 0; border-radius: 0; overflow: visible; margin: 0 0 1.4em; } /* site.js が表を包む枠は付けない */
.prose #learncats .table-scroll > table { margin: 0 !important; min-width: 0; }
.prose #learncats td { border: 0; padding: 4px; width: 33% !important; vertical-align: middle; }
.prose #learncats td > div { display: none; }
.prose #learncats td p { margin: 0; }
.prose #learncats td a {
display: flex; align-items: center; gap: .6em; padding: .65em .85em; border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--surface); text-decoration: none; color: var(--text); font-weight: 600; font-size: .9em; line-height: 1.4;
}
.prose #learncats td a::before { width: 1.35em; height: 1.35em; color: var(--accent); }
.prose #learncats td a:hover { border-color: var(--accent); color: var(--link); }
@media (max-width: 600px) {
/* 3つずつの行をほどいて、全部のボタンを2列に流す */
.prose #learncats table { display: block; }
.prose #learncats tbody { display: grid; grid-template-columns: 1fr 1fr; }
.prose #learncats tr { display: contents; }
.prose #learncats td { display: block; width: auto !important; padding: 3px; }
.prose #learncats td:empty { display: none; }
.prose #learncats td a { padding: .6em .7em; font-size: .86em; }
}
/* 分類の見出し：淡い四角（::before）の上に線画（::after）＋下線。本文の h2 の帯とは分けて一覧の区切りとして軽く */
.prose .learncat h2 {
position: relative; display: flex; align-items: center; gap: .55em;
background: none; border: 0; border-radius: 0; padding: 0 0 .45em; border-bottom: 2px solid var(--line);
font-size: 1.15rem; margin: 2.2em 0 .6em;
}
.prose .learncat:first-child h2 { margin-top: 1.4em; }
.prose .learncat h2::before { content: ""; flex: none; width: 1.9em; height: 1.9em; border-radius: 8px; background: var(--accent-soft); }
.prose .learncat h2::after { position: absolute; left: .4em; top: .4em; width: 1.1em; height: 1.1em; color: var(--accent); }
/* 分類ごとのアイコン（ボタンと見出しで同じもの） */
.prose #learncats td a::before, .prose .learncat h2::after { --ico: var(--i-book); } /* 未登録の分類用（下の指定が優先） */
.prose #learncats a[href="#general"]::before, .prose #general h2::after { --ico: var(--i-server); }
.prose #learncats a[href="#contract"]::before, .prose #contract h2::after { --ico: var(--i-coin); }
.prose #learncats a[href="#basic"]::before, .prose #basic h2::after { --ico: var(--i-disk); }
.prose #learncats a[href="#domain"]::before, .prose #domain h2::after { --ico: var(--i-globe); }
.prose #learncats a[href="#mail"]::before, .prose #mail h2::after { --ico: var(--i-mail); }
.prose #learncats a[href="#database"]::before, .prose #database h2::after { --ico: var(--i-db); }
.prose #learncats a[href="#security"]::before, .prose #security h2::after { --ico: var(--i-lock); }
.prose #learncats a[href="#backup"]::before, .prose #backup h2::after { --ico: var(--i-history); }
.prose #learncats a[href="#web"]::before, .prose #web h2::after { --ico: var(--i-sliders); }
.prose #learncats a[href="#vs"]::before, .prose #vs h2::after { --ico: var(--i-scale); }
.prose #learncats a[href="#others"]::before, .prose #others h2::after { --ico: var(--i-book); }
/* 記事の一覧：初心者向け（li.bgnr）は若葉マーク、ほかは小さな点。どちらも同じ位置にそろえる */
.prose #learnlist ul { list-style: none; padding-left: 0; margin: 0 0 1em; }
.prose #learnlist li { position: relative; margin: 0; padding: .28em 0 .28em 1.55em; line-height: 1.7; }
.prose #learnlist li::before {
content: ""; position: absolute; left: .42em; top: calc(.28em + .85em - .2em); width: .4em; height: .4em; border-radius: 50%; background: var(--line-strong);
}
.prose #learnlist li.bgnr::before {
left: .18em; top: calc(.28em + .85em - .5em); width: .78em; height: 1em; border-radius: 0; background: var(--i-wakaba) center / contain no-repeat;
}
/* 本文中の若葉マークの画像（「頭に〇のマークを付けています」）も同じ絵に */
.prose img[src*="wakaba_icon"] {
box-sizing: content-box; width: 0; height: 0; padding: .5em .39em; margin: 0 .15em; vertical-align: -.12em;
background: var(--i-wakaba) center / contain no-repeat;
}
/* はじめての方へ（トップ・サイド）：初心者向けの記事なので若葉マーク */
.home__start .linkset--start a, .side .linkset--start a { position: relative; padding-left: 1.4em; }
.home__start .linkset--start a::before, .side .linkset--start a::before {
content: ""; position: absolute; left: .1em; top: calc(9px + .75em - .5em); width: .78em; height: 1em; background: var(--i-wakaba) center / contain no-repeat;
}
/* ==========================================================
案B「Compare」：比較サイトらしい2カラムのカード型
本文は白いカードに載せ、右にランキング（スクショと点数）と目的別の入口。
公式サイトへのボタンははっきりした色、関連ページはスクショ付きカード
========================================================== */
:root {
--font-body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, sans-serif;
--font-head: var(--font-body);
--fs-ui: 15px;
--fs: 16.5px;
--lh: 1.9;
--fs-h1: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
--fs-h2: 1.3rem;
--fs-h3: 1.1rem;
--wide: 1180px;
--bg: #f2f4f8;
--surface: #ffffff;
--soft: #f4f7fc;
--soft-2: #e8eef9;
--text: #1f2633;
--text-sub: #3a4456;
--heading: #0f1d3a;
--muted: #667085;
--line: #e1e6ef;
--line-strong: #c3ccdb;
--accent: #2459d6;
--accent-ink: #1d4bb8;
--accent-soft: #e6eefe;
--link: #1d4bb8;
--link-hover: #153a91;
--link-line: #9fb6ea;
--good: #12805c;
--warn: #c2410c;
--enhance-ink: inherit;
--enhance-bg: linear-gradient(transparent 64%, #ffe58a 64%);
--cta: #f26b1d;
--cta-hover: #d9560c;
--cta-ink: #fff;
--cta-shadow: 0 2px 0 #c24e0b;
--rank-bg: #e8edf6;
--rank-ink: #33405a;
--rank1-bg: #f2b01e;
--rank1-ink: #3b2a00;
--radius: 14px;
--radius-s: 8px;
--radius-btn: 999px;
--header-bg: #0f1d3a;
--header-ink: #ffffff;
--header-muted: #aab6cf;
--header-line: #0f1d3a;
--header-hover: rgba(255,255,255,.1);
--brand-mark: #7fa6ff;
--footer-bg: #0f1d3a;
--footer-ink: #ffffff;
--footer-muted: #b3bdd2;
--footer-line: rgba(255,255,255,.12);
}
/* 本文の見出し：淡い帯 */
.prose h2 { background: var(--soft-2); border-left: 4px solid var(--accent); border-radius: 6px; padding: .55em .8em; }
.prose h2.point, .prose h2.caution, .prose h2.spec { border-left-width: 0; }
.prose h3 { padding-bottom: .35em; border-bottom: 2px solid var(--line); }
/* レイアウト */
.layout--compare { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.layout__cols { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; margin-top: 14px; align-items: start; }
.card { background: var(--surface); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(15,29,58,.06), 0 0 0 1px var(--line); padding: 32px 44px 40px; }
.entry__title { margin-top: 0; }
.entry__head { margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.side { display: grid; gap: 16px; } /* 追従はさせない（サイドが画面より長く、下の項目が見えなくなるため） */
.side__box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.side__title { font-size: 1rem; margin: 0 0 10px; color: var(--heading); }
.side .goals--chips a { font-size: .82rem; padding: 6px 12px 6px 9px; }
.side .linkset a { font-size: .88rem; }
.rankbox--cards .rankbox__list a { padding: 10px 0; }
.related--cards .related__list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.nextstep { background: var(--surface); border: 1px solid var(--line); }
@media (max-width: 1000px) {
.layout__cols { grid-template-columns: minmax(0, 1fr); }
.side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
:root { --fs: 16px; --lh: 1.85; }
.layout--compare { padding: 0 10px; }
.crumbs { padding: 0 6px; }
.card { padding: 20px 16px 28px; border-radius: 10px; }
.side { grid-template-columns: 1fr; }
.related, .nextstep { margin-left: 6px; margin-right: 6px; }
}
.layout--archive, .layout--notfound { max-width: 820px; margin: 0 auto; padding: 0 20px; }
/* トップ */
.home--compare { max-width: var(--wide); margin: 0 auto; padding: 0 20px; }
.home--compare .hero { margin: 24px 0 0; padding: 32px; border-radius: var(--radius); background: linear-gradient(135deg, #16306a, #2459d6); color: #fff; display: grid; gap: 20px; }
.home--compare .hero__title { margin: 0 0 8px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.4; }
.home--compare .hero__lead { margin: 0; color: #dbe5ff; }
.home--compare .goals--tiles { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.home--compare .goals--tiles a { background: rgba(255,255,255,.96); border-color: transparent; }
.home__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.home__section { margin-top: 36px; }
.home__h { font-size: 1.15rem; margin: 0 0 12px; color: var(--heading); }
.home--compare .home__section > .linkset { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 18px; }
@media (max-width: 760px) {
.home--compare { padding: 0 12px; }
.home--compare .hero { padding: 22px 16px; }
.home__grid { grid-template-columns: 1fr; }
.home--compare .goals--tiles { grid-template-columns: 1fr 1fr; }
}
.home--compare .goals--tiles { grid-template-columns: repeat(3, 1fr); }
.home--compare .recent--cards { grid-template-columns: repeat(3, 1fr); }
/* 新着（左・広め）とはじめての方へ（右）を横に */
.home__split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 0 36px; align-items: start; }
.home__more { margin: 10px 0 0; font-size: .88rem; }
@media (max-width: 760px) { .home__split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .home--compare .goals--tiles, .home--compare .recent--cards { grid-template-columns: 1fr 1fr; } }
.layout__cols { grid-template-columns: minmax(0, 1fr) 320px; }
.side .rankbox__thumb { width: 54px; height: 38px; }
.side .rankbox__list a { gap: 10px; }
@media (max-width: 1000px) { .layout__cols { grid-template-columns: minmax(0, 1fr); } }
/* ==========================================================
旧サイトから引き継ぐ要素（案 B1・B2・B3 で共通）
・ロゴ：Century Gothic の細い「Server Kurabe」、小さな説明はロゴの上
・色：旧サイトの青（#4569B2 / #113982）と淡い青灰色
・見出し：h2 の緑のチェック・黄色の注意マーク、h3 のオレンジの●
（旧サイトのつやのある画像は、同じ形・色の平らな図にした）
========================================================== */
:root {
--font-logo: "Century Gothic", "Questrial", "Avenir Next", "Segoe UI", sans-serif;
--legacy-pattern: url("../serverkurabe2/images/header_back.png");
--legacy-blue: #4569b2;
--legacy-navy: #113982;
--dot: #f39a1e;
--dline: #f5cf7f;
--h2line: #abbad4;
--accent: #4569b2;
--accent-ink: #2c4f96;
--accent-soft: #e9effa;
--link: #2f58a8;
--link-hover: #113982;
--link-line: #a7bbe0;
--heading: #1b2a4a;
--good: #4f9a2a;
--cta: #f07f1a;
--cta-hover: #d96a08;
--cta-shadow: 0 2px 0 #c45f07;
--radius-btn: 6px;
--rank1-bg: #f3a41c;
--rank1-ink: #fff;
}
/* ロゴ */
.brand__mark { display: none; }
.brand__text { flex-direction: column-reverse; line-height: 1.15; }
.brand__name { font-family: var(--font-logo); font-weight: 400; font-size: 31px; letter-spacing: .01em; }
.brand__tag { font-size: .7rem; letter-spacing: .02em; }
@media (max-width: 760px) { .brand__name { font-size: 26px; } }
/* h2.point：緑のチェック、h2.caution：黄色の注意マーク（どちらも旧サイトの形） */
.prose h2.point, .prose h2.caution {
background: none; border: 0; border-radius: 0; padding: 0 0 .35em; border-bottom: 4px double var(--h2line);
}
.prose h2.point::before, .prose h2.caution::before {
width: 1.25em; height: 1.25em; margin: 0 .45em -.22em 0; -webkit-mask: none; mask: none; background: center / contain no-repeat;
}
.prose h2.point::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M3 17.5l4.2-4 6 5.4L27.6 4.5 30 7.8 13.4 27z' fill='%2363ad2c'/%3E%3C/svg%3E"); }
.prose h2.caution::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='5.5' y='5.5' width='21' height='21' rx='2.5' transform='rotate(45 16 16)' fill='%23f6c21c' stroke='%23333b4d' stroke-width='2'/%3E%3Crect x='14.5' y='9' width='3' height='10' rx='1.5' fill='%23333b4d'/%3E%3Ccircle cx='16' cy='22.6' r='1.8' fill='%23333b4d'/%3E%3C/svg%3E"); }
/* h3：オレンジの●＋文字の幅だけの二重線 */
.prose h3 {
display: table; position: relative; padding: 0 .3em .2em 1.3em; border-bottom: 3px double var(--dline);
}
.prose h3::before {
content: ""; position: absolute; left: .1em; top: .52em; width: .66em; height: .66em; border-radius: 50%; background: var(--dot);
}
/* 強調：旧サイトの青い太字は、リンクと見分けやすいよう濃い紺の太字に */
.prose .enhance { color: #1d3266; background: none; }
/* 目次 */
.prose #toc_container .toc_title::before { content: "▼ "; color: var(--accent); font-size: .8em; }
/* ==========================================================
案B1「Heritage」：旧サイトの見た目をいちばん多く残す
・ヘッダー：旧サイトの青い柄の帯＋下の淡い色のメニューバー
・下地は旧サイトの淡い青灰色、囲みは細い青灰色の線
・h2 は旧サイトと同じ「左の太線＋淡い青の帯」
========================================================== */
:root {
--bg: #ebeff5;
--soft: #f6f8fa;
--soft-2: #f1f6fe;
--line: #d5deec;
--line-strong: #b4c1d8;
--radius: 6px;
--radius-s: 4px;
--header-bg: #466ab3 var(--legacy-pattern);
--header-ink: #fff;
--header-muted: #dbe4f6;
--header-line: #7591c7;
--footer-bg: #16357a var(--legacy-pattern);
--footer-ink: #fff;
--footer-muted: #d3dcef;
--footer-line: rgba(255,255,255,.18);
}
/* ヘッダー：帯＋メニューバー */
.site-header { border-bottom: 2px solid var(--header-line); }
.site-header__inner { padding: 8px 20px 0; row-gap: 0; }
.brand { padding: 2px 0 8px; }
.gnav {
flex-basis: 100%; margin-top: 2px;
position: relative; padding-top: 2px; /* 上の線の分 */
background: #f6f8fa; box-shadow: 0 0 0 100vmax #f6f8fa; clip-path: inset(0 -100vmax);
}
/* メニューバーの上の線：下の線（.site-header の border-bottom）と同じく画面の端まで */
/* （はみ出した分はヘッダーの端で切って、横スクロールが出ないように） */
.site-header { overflow-x: clip; }
.gnav::before { content: ""; position: absolute; top: 0; left: -100vmax; right: -100vmax; height: 2px; background: var(--header-line); }
.gnav ul { gap: 0; }
.gnav li + li a { border-left: 1px solid #dde3ec; }
.gnav a { color: #233a6b; border-radius: 0; padding: 8px 16px; font-size: .88rem; }
.gnav li:first-child a { padding-left: 4px; }
.gnav a:hover { background: #e9eef7; color: var(--link-hover); }
@media (max-width: 760px) {
.site-header__inner { padding: 8px 16px 0; }
.gnav { width: auto; margin: 0 -16px; box-shadow: none; clip-path: none; }
.gnav::before { left: 0; right: 0; }
.gnav ul { padding: 0 8px; }
.gnav li:first-child a { padding-left: 10px; }
}
/* 本文の囲み：影をやめて細い線 */
.card { border-radius: 4px; box-shadow: 0 0 0 1px var(--line), 2px 2px 3px rgba(40,60,100,.06); }
/* h2（種類なし）：旧サイトと同じ帯 */
.prose h2 { background: var(--soft-2); border: 1px solid var(--line-strong); border-left: 6px solid var(--legacy-blue); border-radius: 0; padding: .55em .8em .55em 1em; }
/* サイド：旧サイトの淡い囲み */
.side__box, .side .rankbox { background: var(--soft); border: 1px solid #cfd9eb; border-radius: 4px; }
.side__title, .side .rankbox__title { font-size: .98rem; padding-bottom: 6px; border-bottom: 1px solid #dde3ec; }
.nextstep { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.related--cards .related__item a, .recent--cards a, .goals--tiles a { border-radius: 4px; }
.related__label, .recent__label, .nextstep__label { border-radius: 3px; }
/* トップ：グラデーションの大きな帯をやめ、白い囲みに */
.home--compare .hero { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-top: 4px solid var(--legacy-blue); border-radius: 4px; }
.home--compare .hero__title { color: var(--heading); }
.home--compare .hero__lead { color: var(--text-sub); }
.home--compare .goals--tiles a { background: var(--soft); border: 1px solid #cfd9eb; }
.home__h { padding-left: 10px; border-left: 4px solid var(--legacy-blue); }
.site-footer { border-top: 2px solid var(--header-line); }
/* ==========================================================
案B1B：B1 の色（柄の帯・メニューバー・淡い青灰の下地）のまま、囲みを減らす
・サイドは囲みをやめ、見出し＋青い線＋リストだけ（B3 と同じ組み方）
・本文のカードは影をやめて線1本、h2 の帯は外枠の線をなくす
========================================================== */
.card { box-shadow: none; border: 1px solid var(--line); }
.prose h2 { border: 0; border-left: 6px solid var(--legacy-blue); }
.side { gap: 22px; }
.side__box, .side .rankbox { background: none; border: 0; padding: 0; border-radius: 0; }
.side__title, .side .rankbox__title { font-size: .98rem; padding: 0 0 6px; margin-bottom: 4px; border-bottom: 2px solid var(--legacy-blue); }
.side .rankbox__list a, .side .linkset a { border-color: #d3dbe8; }
.side .goals--chips a { background: var(--surface); }
.nextstep { background: none; border: 0; border-top: 2px solid var(--legacy-blue); border-radius: 0; padding: 14px 2px 0; }
/* トップ：ランキングの囲みもやめる */
.home__grid .rankbox { background: none; border: 0; padding: 0; }
.home__grid .rankbox__title { padding-bottom: 6px; border-bottom: 2px solid var(--legacy-blue); }
.home--compare .home__section > .linkset { background: none; border: 0; padding: 0; }
/* スマホ：メニュー4つが 390px 幅に収まるように詰める */
@media (max-width: 760px) {
.gnav ul { padding: 0; justify-content: space-between; }
.gnav li { flex: auto; }
.gnav a { padding: 9px 4px; font-size: .78rem; text-align: center; letter-spacing: -.01em; }
.gnav li:first-child a { padding-left: 4px; }
}