/*
Theme Name: ls-server
Template: twentytwentyfive
Description: lightscend.co.jp/server/（サーバー選びの実測データ）の子テーマ。地は薄い水色（ライトセンドの青から）、文字は墨、強調は藍。角を丸め、罫線を影に替えたやわらかい見た目（0.4.0）。システムフォント、Web フォントなし。
Version: 0.4.0
Author: Lightscend Co.,Ltd.
Text Domain: ls-server
*/

/* 色と幅は theme.json の値を短い名前で使う */
:root {
	--ls-bg: var(--wp--preset--color--base);
	--ls-bg-sub: var(--wp--preset--color--base-sub);
	--ls-surface: var(--wp--preset--color--surface);
	--ls-ink: var(--wp--preset--color--contrast);
	--ls-ink-sub: var(--wp--preset--color--contrast-sub);
	--ls-rule: var(--wp--preset--color--rule);
	--ls-accent: var(--wp--preset--color--accent);
	--ls-content: 720px;
	--ls-wide: 1120px;
	--ls-gutter: 16px;
}

body {
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt" 0;
	overflow-wrap: anywhere;
}

/* ヘッダー・本文・フッターの間に WP が入れる余白は使わない */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.ls-wrap {
	max-width: var(--ls-wide);
	margin: 0 auto;
	padding: 0 var(--ls-gutter);
	box-sizing: border-box;
}

/* ---------- ヘッダー ---------- */
.ls-head {
	background: var(--ls-surface);
	border-bottom: 1px solid var(--ls-rule);
}
.ls-head-in {
	display: flex;
	align-items: center;
	gap: 8px 32px;
	flex-wrap: wrap;
	min-height: 56px;
}
.ls-brand {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}
.ls-brand a {
	color: var(--ls-ink);
	text-decoration: none;
}
.ls-nav {
	flex: 1 1 auto;
	min-width: 0;
}
.ls-nav ul {
	display: flex;
	gap: 0 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
}
.ls-nav a {
	display: block;
	padding: 16px 0 14px;
	border-bottom: 2px solid transparent;
	color: var(--ls-ink);
	font-size: 15px;
	text-decoration: none;
}
.ls-nav a:hover {
	color: var(--ls-accent);
}
.ls-nav a[aria-current] {
	border-bottom-color: var(--ls-accent);
	color: var(--ls-accent);
	font-weight: 700;
}
.ls-nav .ls-nav-method {
	margin-left: auto;
}
.ls-nav .ls-nav-method a {
	color: var(--ls-ink-sub);
}

/* 広告の開示バー: 淡い地・高さ 36px・目立たせない */
.ls-disclose-bar {
	background: var(--ls-bg-sub);
	border-bottom: 1px solid var(--ls-rule);
	color: var(--ls-ink-sub);
	font-size: 13px;
	line-height: 36px;
}
.ls-disclose-bar a {
	margin-left: 8px;
	white-space: nowrap;
	color: var(--ls-ink-sub);
}

/* ---------- 本文 ---------- */
.ls-main {
	padding-top: 24px;
	padding-bottom: 64px;
}
.ls-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ls-ink-sub);
	font-size: 13px;
	line-height: 1.6;
}
.ls-breadcrumb li + li::before {
	content: "›";
	margin: 0 8px;
}
.ls-breadcrumb a {
	color: var(--ls-ink-sub);
}
.ls-main .wp-block-post-title {
	margin-top: 16px;
	margin-bottom: 0;
}
.ls-dates {
	margin-top: 8px;
	color: var(--ls-ink-sub);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.ls-sep {
	margin: 0 8px;
}

.ls-entry h2 {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--ls-rule);
}
.ls-entry h3 {
	margin-top: 40px;
}
.ls-entry p,
.ls-entry ul,
.ls-entry ol {
	margin-top: 16px;
	margin-bottom: 0;
}
.ls-entry li + li {
	margin-top: 4px;
}
.ls-entry strong {
	font-weight: 700;
}

/* 冒頭の開示や注記（Markdown の引用）: 左罫線だけ */
.ls-entry blockquote,
.ls-entry .ls-note {
	margin: 24px 0 0;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--ls-rule);
	color: var(--ls-ink-sub);
	font-size: 15px;
	line-height: 1.8;
}
.ls-entry blockquote p {
	margin-top: 8px;
}
.ls-entry blockquote p:first-child {
	margin-top: 0;
}

.ls-entry code,
.ls-entry pre {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.88em;
}
.ls-entry :not(pre) > code {
	padding: 1px 4px;
	background: var(--ls-bg-sub);
	border-radius: 3px;
}
.ls-entry pre {
	margin-top: 16px;
	padding: 16px;
	overflow-x: auto;
	background: var(--ls-bg-sub);
	border: 1px solid var(--ls-rule);
	line-height: 1.6;
}

/* 表: 横罫線のみ、数字は等幅 */
.ls-entry table,
.ls-table {
	width: 100%;
	background: var(--ls-surface);
	margin-top: 24px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}
.ls-entry th,
.ls-entry td,
.ls-table th,
.ls-table td {
	padding: 8px 12px 8px 0;
	border-bottom: 1px solid var(--ls-rule);
	text-align: left;
	vertical-align: top;
}
.ls-entry thead th,
.ls-table thead th {
	background: var(--ls-bg-sub);
	border-bottom-color: var(--ls-ink-sub);
	padding-left: 8px;
	font-weight: 700;
}
.ls-entry td:first-child,
.ls-table td:first-child,
.ls-table tbody th {
	padding-left: 8px;
}
.ls-table tbody th {
	font-weight: 400;
}
.ls-table th,
.ls-table td {
	white-space: nowrap;
}
.ls-th-unit {
	color: var(--ls-ink-sub);
	font-size: 12px;
	font-weight: 400;
}
.ls-num {
	text-align: right !important;
}

/* 測定条件ボックス: 淡い地、左に藍の縦線 */
.ls-method {
	margin-top: 24px;
	padding: 12px 16px;
	background: var(--ls-surface);
	border-left: 3px solid var(--ls-accent);
	font-size: 14px;
	line-height: 1.7;
}
.ls-method p {
	margin: 0;
}
.ls-method dl {
	margin: 0;
}
.ls-method dl > div {
	display: grid;
	grid-template-columns: 4.5em 1fr;
	gap: 0 8px;
}
.ls-method dt {
	color: var(--ls-ink-sub);
}
.ls-method dd {
	margin: 0;
}
.ls-method .ls-method-link {
	margin-top: 4px;
}

/* データの図（[ls_data]）: 題 → 測定条件 → グラフ → 表 → 出典 */
.ls-data {
	margin: 40px 0 0;
}
.ls-data-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
}
.ls-chart {
	margin-top: 16px;
}
.ls-chart svg {
	display: block;
	width: 100%;
	height: auto;
}
.ls-chart.has-narrow .ls-chart-narrow {
	display: none;
}
.ls-table-wrap {
	overflow-x: auto;
}
.ls-table-wrap .ls-table {
	margin-top: 16px;
}
.ls-data-foot {
	margin-top: 8px;
	color: var(--ls-ink-sub);
	font-size: 14px;
	line-height: 1.7;
}
.ls-data-foot p {
	margin: 4px 0 0;
}
.ls-data-foot a {
	color: var(--ls-ink-sub);
}
.ls-updated {
	margin: 16px 0 0;
	color: var(--ls-ink-sub);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.ls-updated + .ls-cards {
	margin-top: 8px;
}

/* サジェスト評判（[ls_suggest]） */
.ls-suggest-summary {
	margin: 16px 0 0;
	padding-left: 1.2em;
	line-height: 1.8;
}
.ls-suggest-legend,
.ls-suggest-more,
.ls-suggest-download {
	margin: 8px 0 0;
	color: var(--ls-ink-sub);
	font-size: 14px;
	line-height: 1.7;
}
.ls-suggest-feed,
.ls-suggest-links {
	margin: 12px 0 0;
	padding-left: 1.2em;
	line-height: 1.8;
}
.ls-suggest-links {
	columns: 2 16em;
}
.ls-suggest-signal td {
	font-variant-numeric: tabular-nums;
}

/* 公式サイト欄: 全社同じ形、ボタンは枠線だけ */
.ls-official {
	margin: 40px 0 0;
	padding: 16px 20px;
	background: var(--ls-surface);
	border: 1px solid var(--ls-rule);
	font-size: 15px;
	line-height: 1.7;
}
.ls-official p {
	margin: 0;
}
.ls-official-name {
	font-size: 19px;
	font-weight: 700;
}
.ls-pr {
	display: inline-block;
	margin-left: 8px;
	padding: 0 6px;
	border: 1px solid var(--ls-ink-sub);
	border-radius: 3px;
	color: var(--ls-ink-sub);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.6;
	vertical-align: 3px;
}
.ls-official-co,
.ls-official-price {
	margin-top: 4px !important;
	color: var(--ls-ink-sub);
}
.ls-official-go {
	margin-top: 12px !important;
}
.ls-button {
	display: inline-block;
	padding: 8px 24px;
	border: 1px solid var(--ls-accent);
	border-radius: 4px;
	color: var(--ls-accent);
	font-weight: 700;
	text-decoration: none;
}
.ls-button:hover {
	background: var(--ls-bg-sub);
}
.ls-official-note {
	margin-top: 8px !important;
	color: var(--ls-ink-sub);
	font-size: 13px;
}

/* 更新履歴と著者欄（記事末） */
.ls-history {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--ls-rule);
}
.ls-history h2 {
	margin: 0;
	font-size: 19px;
}
.ls-history ol {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	line-height: 1.7;
}
.ls-history li {
	display: flex;
	gap: 16px;
	padding: 4px 0;
}
.ls-history time {
	flex: none;
	color: var(--ls-ink-sub);
	font-variant-numeric: tabular-nums;
}
.ls-author {
	margin-top: 48px;
	padding: 20px;
	background: var(--ls-surface);
	border: 1px solid var(--ls-rule);
	font-size: 15px;
	line-height: 1.8;
}
.ls-history + .ls-author {
	margin-top: 32px;
}
.ls-author p {
	margin: 8px 0 0;
}
.ls-author .ls-author-label {
	margin: 0;
	color: var(--ls-ink-sub);
	font-size: 13px;
}
.ls-author-name {
	margin-top: 2px !important;
	font-size: 17px;
	font-weight: 700;
}
.ls-author-name span {
	margin-left: 12px;
	color: var(--ls-ink-sub);
	font-size: 14px;
	font-weight: 400;
}
.ls-author-coi strong {
	margin-right: 4px;
}

/* 数値カード */
.ls-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 24px;
}
.ls-card {
	padding: 16px;
	background: var(--ls-surface);
	border: 1px solid var(--ls-rule);
}
.ls-card p {
	margin: 0;
}
.ls-card-label {
	font-size: 14px;
	line-height: 1.5;
}
.ls-card-value {
	margin-top: 8px !important;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.ls-card-value.is-date {
	font-size: 24px;
	line-height: 1.5;
}
.ls-unit {
	margin-left: 4px;
	font-size: 15px;
	font-weight: 400;
}
.ls-card-note {
	margin-top: 8px !important;
	color: var(--ls-ink-sub);
	font-size: 13px;
	line-height: 1.6;
}

/* 記事一覧 */
.ls-postlist {
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ls-rule);
}
.ls-postlist li {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--ls-rule);
}
.ls-postlist-date {
	color: var(--ls-ink-sub);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}
.ls-empty {
	color: var(--ls-ink-sub);
}

/* ---------- トップ ---------- */
.ls-hero {
	padding: 8px 0 0;
}
.ls-hero-title {
	margin: 0;
	font-size: 30px;
	line-height: 1.4;
}
.ls-lede {
	max-width: var(--ls-content);
	margin-top: 16px;
}
.ls-section {
	margin-top: 40px;
}
.ls-section > h2 {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--ls-rule);
	font-size: 23px;
}
.ls-uses,
.ls-hubs {
	display: grid;
	gap: 12px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.ls-uses {
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.ls-uses li {
	background: var(--ls-surface);
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 16px;
	border: 1px solid var(--ls-rule);
}
.ls-use-state {
	color: var(--ls-ink-sub);
	font-size: 13px;
}
.ls-hubs {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.ls-hubs li {
	padding: 12px 0;
	border-bottom: 1px solid var(--ls-rule);
}
.ls-hubs a {
	font-weight: 700;
}
.ls-hubs span {
	display: block;
	margin-top: 4px;
	color: var(--ls-ink-sub);
	font-size: 14px;
	line-height: 1.6;
}

/* ---------- フッター ---------- */
.ls-foot {
	margin-top: 64px;
	padding: 32px 0 48px;
	background: var(--ls-bg-sub);
	border-top: 1px solid var(--ls-rule);
	color: var(--ls-ink-sub);
	font-size: 14px;
	line-height: 1.7;
}
.ls-foot p {
	margin: 8px 0 0;
}
.ls-foot-name {
	margin-top: 0 !important;
	color: var(--ls-ink);
	font-weight: 700;
}
.ls-foot-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 16px 0;
	padding: 0;
	list-style: none;
}
.ls-foot a {
	color: var(--ls-ink-sub);
}

/* ---------- スマホ ---------- */
@media (max-width: 781px) {
	.ls-head-in {
		display: block;
		padding-top: 12px;
	}
	/* ナビはハンバーガーにせず横スクロールのタブ */
	.ls-nav {
		margin: 0 calc(-1 * var(--ls-gutter));
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.ls-nav::-webkit-scrollbar {
		display: none;
	}
	.ls-nav ul {
		gap: 0 20px;
		padding: 0 var(--ls-gutter);
	}
	.ls-nav a {
		padding: 10px 0 8px;
	}
	.ls-nav .ls-nav-method {
		margin-left: 0;
	}
	.ls-disclose-bar {
		font-size: 12px;
		line-height: 1.6;
		padding: 8px 0;
	}
	.ls-entry table:not(.ls-table) {
		display: block;
		overflow-x: auto;
	}
	.ls-chart.has-narrow .ls-chart-wide {
		display: none;
	}
	.ls-chart.has-narrow .ls-chart-narrow {
		display: block;
	}
	.ls-method dl > div {
		grid-template-columns: 1fr;
	}
	.ls-official {
		padding: 16px;
	}
	.ls-author {
		padding: 16px;
	}
	.ls-author-name span {
		display: block;
		margin-left: 0;
	}
	.ls-entry td,
	.ls-entry th {
		min-width: 6em;
	}
	.ls-entry td:first-child,
	.ls-entry th:first-child,
	.ls-table td:first-child,
	.ls-table th:first-child {
		white-space: nowrap;
		position: sticky;
		left: 0;
		background: var(--ls-surface);
	}
	.ls-entry thead th:first-child,
	.ls-table thead th:first-child {
		background: var(--ls-bg-sub);
	}
	.ls-cards {
		grid-template-columns: 1fr 1fr;
		gap: 12px;
	}
	.ls-card-value {
		font-size: 26px;
	}
	.ls-card-value.is-date {
		font-size: 19px;
	}
	.wp-block-post-title,
	.ls-hero-title {
		font-size: 25px !important;
	}
}

/* グラフの項目名からブランド記事へ */
.ls-chart a.ls-brand-link text {
	text-decoration: underline;
	text-decoration-color: rgba(31, 35, 40, 0.35);
}
.ls-chart a.ls-brand-link:hover text,
.ls-chart a.ls-brand-link:focus text {
	fill: #0969da;
}

/* ---------- やわらかい見た目（0.4.0、2026-11-05）: 角を丸め、罫線を淡い影に、余白と行間を広げる ---------- */
:root {
	--ls-radius: 14px;
	--ls-radius-sm: 10px;
	--ls-shadow: 0 1px 2px rgba(43, 94, 140, 0.06), 0 6px 18px rgba(43, 94, 140, 0.07);
	--ls-tint: #EEF4FB;
}
body {
	letter-spacing: 0.01em;
}
.ls-main {
	padding-top: 32px;
	padding-bottom: 80px;
}

/* ヘッダー: 罫線をやめて淡い影、ナビは丸いタブ */
.ls-head {
	border-bottom: 0;
	box-shadow: 0 1px 0 rgba(43, 94, 140, 0.06), 0 6px 20px rgba(43, 94, 140, 0.06);
}
.ls-nav ul {
	gap: 0 4px;
}
.ls-nav a {
	margin: 8px 0;
	padding: 8px 14px;
	border-bottom: 0;
	border-radius: 999px;
	transition: background-color 0.15s;
}
.ls-nav a:hover {
	background: var(--ls-tint);
}
.ls-nav a[aria-current] {
	background: var(--ls-bg-sub);
}
.ls-disclose-bar {
	border-bottom: 0;
	background: var(--ls-tint);
}

/* 見出し: 区切り線をやめて、淡い帯とやわらかい縦線 */
.ls-entry h2 {
	margin-top: 56px;
	padding: 10px 18px;
	border-top: 0;
	border-radius: var(--ls-radius-sm);
	background: var(--ls-bg-sub);
}
.ls-entry h3 {
	padding-left: 12px;
	border-left: 4px solid #9DBBE0;
	border-radius: 2px;
}
.ls-entry p,
.ls-entry ul,
.ls-entry ol {
	margin-top: 18px;
}
.ls-entry li + li {
	margin-top: 6px;
}

/* 冒頭の開示や注記: 淡い琥珀色の丸い箱 */
.ls-entry blockquote,
.ls-entry .ls-note {
	padding: 14px 18px;
	border-left: 0;
	border-radius: var(--ls-radius-sm);
	background: #FFF7E3;
	color: #4D4630;
}
.ls-entry pre {
	border: 0;
	border-radius: var(--ls-radius-sm);
}
.ls-entry :not(pre) > code {
	border-radius: 6px;
	padding: 2px 6px;
}

/* 表: 丸い面に載せ、縞と淡い罫線で読みやすく */
.ls-entry table,
.ls-table {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 16px;
	line-height: 1.7;
	border-radius: var(--ls-radius);
	overflow: hidden;
	box-shadow: var(--ls-shadow);
}
.ls-entry th,
.ls-entry td,
.ls-table th,
.ls-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--ls-rule);
}
.ls-entry thead th,
.ls-table thead th {
	padding-left: 14px;
	border-bottom-color: var(--ls-rule);
}
.ls-entry td:first-child,
.ls-table td:first-child,
.ls-table tbody th {
	padding-left: 14px;
}
.ls-entry tbody tr:nth-child(even) td,
.ls-table tbody tr:nth-child(even) th,
.ls-table tbody tr:nth-child(even) td {
	background: #F8FBFE;
}
.ls-entry tbody tr:last-child td,
.ls-table tbody tr:last-child th,
.ls-table tbody tr:last-child td {
	border-bottom: 0;
}
.ls-table-wrap {
	margin-top: 16px;
	padding-bottom: 6px;
}
.ls-table-wrap .ls-table {
	margin-top: 0;
}

/* 測定条件・カード・公式サイト欄・著者欄: 枠線を影に、角を丸く */
.ls-method {
	padding: 14px 18px;
	border-left: 4px solid var(--ls-accent);
	border-radius: var(--ls-radius);
	box-shadow: var(--ls-shadow);
}
.ls-card,
.ls-uses li,
.ls-official {
	border: 0;
	border-radius: var(--ls-radius);
	box-shadow: var(--ls-shadow);
}
.ls-card {
	padding: 18px 20px;
}
.ls-uses li {
	padding: 14px 18px;
}
.ls-official {
	padding: 20px 24px;
}
.ls-chart {
	padding: 12px;
	border-radius: var(--ls-radius);
	background: var(--ls-surface);
	box-shadow: var(--ls-shadow);
}
.ls-pr {
	border-radius: 999px;
	padding: 0 10px;
}
.ls-button {
	padding: 10px 28px;
	border-radius: 999px;
	background: var(--ls-accent);
	color: #fff;
	text-decoration: none;
	transition: background-color 0.15s;
}
.ls-button:hover {
	background: #214B72;
	color: #fff;
}
.ls-hubs li {
	padding: 14px 0;
}

/* リンク: 下線を細く、離して */
.ls-entry a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* 記事内の画像: 本文の幅に収め、角を丸く */
.ls-entry img {
	max-width: 100%;
	height: auto;
	margin-top: 18px;
	border-radius: var(--ls-radius);
	box-shadow: var(--ls-shadow);
}

@media (max-width: 600px) {
	.ls-nav ul {
		gap: 0;
	}
	.ls-nav a {
		padding: 8px 6px;
		font-size: 14px;
	}
	.ls-nav .ls-nav-method {
		margin-left: 0;
	}
}

/* ヘッダーのロゴ（サーバーくん） */
.ls-brand a {
	display: flex;
	align-items: center;
	gap: 10px;
}
.ls-brand-icon {
	flex: none;
	width: 40px;
	height: auto;
}
@media (max-width: 600px) {
	.ls-brand-icon {
		width: 34px;
	}
}