/**
 * 000 base — ウォームモノクローム・ラインデザイン
 *
 * デザイン原則:
 * - すべて罫線（1px）で区切る。影・角丸は使わない
 * - 色は「アイボリー背景＋ウォームダーク＋罫線」のモノクローム構成
 * - 英字ラベル（セリフ体・広いトラッキング）をセクションの見出しに添える
 *
 * cascade layer（@layer）で弱く当てるため、
 * 他社プラグイン・制作者の上書きが詳細度に関係なく常に勝つ。
 * 色・サイズは theme.json のデザイントークン（--wp--preset--*）を参照する。
 */
@layer wst000 {

	/* ===== ベース ===== */

	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	body {
		-webkit-font-smoothing: antialiased;
		/* 長い日本語タイトル・URLのはみ出し防止 */
		overflow-wrap: anywhere;
		line-break: strict;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* ===== レイアウト ===== */

	.l-container {
		max-width: 46rem;
		margin-inline: auto;
		padding-inline: 1rem;
	}

	/* ワイド幅（ヘッダー・フッター・ダッシュボードグリッド）は大画面で1980pxまで広がる */
	.l-container--wide {
		max-width: 123.75rem;
		padding-inline: clamp(1rem, 3vw, 4rem);
	}

	/* スキップリンク（キーボード操作時のみ表示） */
	.skip-link {
		position: absolute;
		top: -100%;
		left: 1rem;
		z-index: 100;
		padding: 0.5rem 1rem;
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	.skip-link:focus {
		top: 0;
	}

	/* ===== 英字ラベル・番号（ラインデザインの要） ===== */

	.section-label {
		display: flex;
		align-items: baseline;
		gap: 0.75rem;
		margin: 0 0 1.25rem;
		font-family: var(--wp--preset--font-family--serif);
		font-size: 1rem;
		font-weight: 400;
		letter-spacing: 0.22em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast-2);
	}

	.section-label::after {
		content: "";
		flex: 1;
		border-top: 1px solid var(--wp--preset--color--border);
		transform: translateY(-0.3em);
	}

	.section-label__num {
		font-size: 1rem;
		letter-spacing: 0.1em;
	}

	/* アウトライン英字（装飾用の縁取りテキスト） */
	.display-outline {
		margin: 0;
		font-family: var(--wp--preset--font-family--serif);
		font-size: clamp(2.5rem, 1rem + 7vw, 10rem);
		font-weight: 400;
		line-height: 1.05;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: transparent;
		-webkit-text-stroke: 1px var(--wp--preset--color--contrast-2);
	}

	@supports not (-webkit-text-stroke: 1px black) {
		.display-outline {
			color: var(--wp--preset--color--contrast-2);
		}
	}

	/* ===== ヘッダー ===== */

	.site-header {
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--preset--color--contrast);
	}

	.site-header__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 0.5rem 1.5rem;
		padding-block: 1.1rem;
	}

	.site-title {
		margin: 0;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 700;
		letter-spacing: 0.06em;
	}

	.site-title a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}

	.global-nav__list,
	.global-nav .menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.75rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.global-nav a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		letter-spacing: 0.08em;
	}

	.global-nav a:hover {
		text-decoration: underline;
		text-underline-offset: 0.4em;
	}

	/* ===== ページ見出し ===== */

	.page-header {
		margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem) 2rem;
		padding-bottom: 1.25rem;
		border-bottom: 1px solid var(--wp--preset--color--contrast);
	}

	.page-header h1 {
		margin: 0;
	}

	.page-header__description {
		margin-top: 0.75rem;
		color: var(--wp--preset--color--contrast-2);
	}

	/* ===== トップページ: ダッシュボードグリッド ===== */

	.front-sections {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(1.5rem, 1rem + 1vw, 2.5rem);
		margin-block: clamp(2.5rem, 1.5rem + 3vw, 5rem);
	}

	.panel {
		background: var(--wp--preset--color--base-2);
		border: 1px solid var(--wp--preset--color--border);
		padding: clamp(1.5rem, 1rem + 1.5vw, 3.5rem);
	}

	.panel--full {
		grid-column: 1 / -1;
	}

	.panel > h2:first-of-type,
	.panel .wp-block-heading:first-of-type {
		margin-top: 0;
	}

	@media (max-width: 768px) {
		.front-sections {
			grid-template-columns: 1fr;
		}
	}

	.front-section__more {
		margin: 1.5rem 0 0;
	}

	.front-section__more a,
	.entry-nav__back a {
		display: inline-block;
		padding: 0.6rem 1.5rem;
		border: 1px solid var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
		letter-spacing: 0.08em;
	}

	.front-section__more a::after,
	.entry-nav__back a::after {
		content: " →";
	}

	.front-section__more a:hover,
	.entry-nav__back a:hover {
		background: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	/* ===== 記事一覧（罫線リスト・番号付き） ===== */

	.post-list {
		counter-reset: post-card;
		display: grid;
		margin-block: 2rem;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	/* パネル内の一覧は外余白を詰める */
	.panel .post-list {
		margin-block: 0;
	}

	.post-card {
		counter-increment: post-card;
		position: relative;
		padding: 1.5rem 0 1.5rem 3.25rem;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.post-card::before {
		content: counter(post-card, decimal-leading-zero);
		position: absolute;
		left: 0;
		top: 1.65rem;
		font-family: var(--wp--preset--font-family--serif);
		font-size: 1rem;
		letter-spacing: 0.1em;
		color: var(--wp--preset--color--contrast-2);
	}

	.post-card__meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 0.75rem;
		font-size: 1rem;
		color: var(--wp--preset--color--contrast-2);
	}

	.post-card__meta a {
		color: inherit;
		text-decoration: none;
	}

	.post-card__title {
		margin: 0.25rem 0;
		font-size: var(--wp--preset--font-size--large);
	}

	.post-card__title a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}

	.post-card__title a:hover {
		text-decoration: underline;
		text-underline-offset: 0.35em;
	}

	.post-card__excerpt {
		margin: 0;
		color: var(--wp--preset--color--contrast-2);
		/* 全幅パネル内でも1行が長くなりすぎないよう可読幅で止める */
		max-width: 46rem;
	}

	/* お知らせ（日付＋タイトルの罫線リスト） */
	.news-list {
		display: grid;
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.news-list__item {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.25rem;
		padding-block: 1rem;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.news-list__item time {
		color: var(--wp--preset--color--contrast-2);
		font-family: var(--wp--preset--font-family--serif);
		letter-spacing: 0.08em;
	}

	.news-list__item a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}

	.news-list__item a:hover {
		text-decoration: underline;
		text-underline-offset: 0.35em;
	}

	/* ===== 記事詳細 ===== */

	.entry {
		margin-block: clamp(2.5rem, 1.5rem + 3vw, 4rem);
	}

	.entry-title {
		margin: 0 0 1rem;
	}

	.entry-meta {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.25rem;
		padding-block: 0.9rem;
		border-top: 1px solid var(--wp--preset--color--contrast);
		border-bottom: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--contrast-2);
	}

	.entry-meta a {
		color: inherit;
	}

	.entry-thumbnail {
		margin-top: 1.5rem;
	}

	.entry-content {
		margin-top: 2rem;
	}

	/* ブロック間の縦リズム（トップレベルの要素間にだけ余白を入れる） */
	.entry-content > * + * {
		margin-block-start: 1.5rem;
	}

	/* 見出しは罫線で区切る（ラインデザイン） */
	.entry-content > h2 {
		margin-block-start: 3rem;
		padding-bottom: 0.6rem;
		border-bottom: 1px solid var(--wp--preset--color--contrast);
	}

	.entry-content > h3 {
		margin-block-start: 2.25rem;
		padding-left: 0.9rem;
		border-left: 2px solid var(--wp--preset--color--contrast);
	}

	.entry-footer {
		margin-top: 2.5rem;
		padding-top: 1rem;
		border-top: 1px solid var(--wp--preset--color--border);
	}

	.entry-tags a {
		color: var(--wp--preset--color--contrast-2);
	}

	/* 前後記事・一覧へ戻る */
	.entry-nav {
		margin-block: 2.5rem;
		display: grid;
		gap: 1.5rem;
	}

	.post-navigation .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 1rem;
		padding-block: 1rem;
		border-top: 1px solid var(--wp--preset--color--border);
		border-bottom: 1px solid var(--wp--preset--color--border);
	}

	.post-navigation a {
		color: var(--wp--preset--color--contrast);
		text-decoration: none;
	}

	.post-navigation a:hover {
		text-decoration: underline;
		text-underline-offset: 0.35em;
	}

	/* ===== ページネーション ===== */

	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5rem;
		margin-block: 2.5rem;
	}

	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 2.75rem;
		padding: 0.5rem 0.75rem;
		border: 1px solid var(--wp--preset--color--border);
		text-decoration: none;
		font-family: var(--wp--preset--font-family--serif);
		color: var(--wp--preset--color--contrast);
	}

	.pagination .page-numbers.current {
		background: var(--wp--preset--color--contrast);
		border-color: var(--wp--preset--color--contrast);
		color: var(--wp--preset--color--base);
	}

	/* ===== フッター ===== */

	.site-footer {
		margin-top: clamp(4rem, 2.5rem + 6vw, 7rem);
		border-top: 1px solid var(--wp--preset--color--contrast);
		background: var(--wp--preset--color--base);
	}

	.site-footer__inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem 1.5rem;
		padding-block: clamp(2rem, 1.5rem + 2vw, 3rem) 1rem;
	}

	.social-links {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem 1.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.social-links a {
		font-family: var(--wp--preset--font-family--serif);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast-2);
		text-decoration: none;
	}

	.social-links a:hover {
		color: var(--wp--preset--color--contrast);
	}

	.site-footer__copyright {
		margin: 0;
		padding-block: 1rem 1.5rem;
		border-top: 1px solid var(--wp--preset--color--border);
		color: var(--wp--preset--color--contrast-2);
		font-family: var(--wp--preset--font-family--serif);
		letter-spacing: 0.08em;
	}

	/* ===== 全幅セクション（パターン） ===== */

	/* 全幅グループ内のテキストが画面端に付かないように左右の逃げを確保 */
	.wp-block-group.alignfull {
		padding-inline: clamp(1rem, 3vw, 3rem);
	}

	/* ヒーロー（罫線で下を区切る。内側はワイド幅で左揃え） */
	.hero-panel {
		padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
		border-bottom: 1px solid var(--wp--preset--color--contrast);
	}

	.hero-panel__inner {
		max-width: 123.75rem;
		margin-inline: auto;
	}

	.hero-panel__inner > * + * {
		margin-block-start: 1.5rem;
	}

	/* リード文だけは可読幅で止める（左揃えのまま） */
	.hero-panel__inner > p {
		max-width: 46rem;
	}

	/* ===== ブロック調整 ===== */

	/* ボタン内リンクの矢印 */
	.wp-block-button__link::after {
		content: " →";
	}

	/* FAQ用 詳細ブロック（角丸なし・罫線区切り） */
	.wp-block-details {
		border: 1px solid var(--wp--preset--color--border);
		background: var(--wp--preset--color--base-2);
		padding: 1rem 1.25rem;
	}

	.wp-block-details + .wp-block-details {
		border-top: 0;
	}

	.wp-block-details summary {
		font-weight: 700;
		cursor: pointer;
	}

	.wp-block-details[open] summary {
		margin-bottom: 0.75rem;
	}

	/* テーブル（会社概要・比較表） */
	.wp-block-table table {
		border-collapse: collapse;
		width: 100%;
	}

	.wp-block-table th,
	.wp-block-table td {
		border: 1px solid var(--wp--preset--color--border);
		padding: 0.75rem 1rem;
		text-align: left;
	}

	.wp-block-table th {
		background: var(--wp--preset--color--base);
		font-weight: 700;
		white-space: nowrap;
	}

	/* 記事メタの更新日ラベル（ブロックエディタ利用時） */
	.wp-block-post-date__modified-date::before {
		content: "更新日: ";
	}
}

/*
 * パネル内に描画したパターンは中央寄せの細いカラムにせず全幅で流す。
 * ブロックのレイアウトエンジンが出力するCSSは非レイヤーのため、
 * このルールだけ @layer の外に置いて上書きする。
 */
.panel .is-layout-constrained > * {
	max-width: none;
}

/* 一覧カードの見出しサイズ（theme.jsonのh2グローバル指定が非レイヤーで勝つため、ここも非レイヤーで上書き） */
.post-card__title {
	font-size: var(--wp--preset--font-size--large);
}

