@charset "UTF-8";
/*
 * Web App Lab — フロントエンドスタイル
 *
 * 1. ベース / アクセシビリティ
 * 2. ページシェル（紙の質感）
 * 3. ヘッダー / フッター
 * 4. 汎用パーツ（見出し・ボタン）
 * 5. フロントページ各セクション
 * 6. サンプルカード
 * 7. 投稿・固定ページ（ブロックエディター出力）
 * 8. レスポンシブ
 * 9. 出現アニメーション
 */

/* ==========================================================================
   1. ベース / アクセシビリティ
   ========================================================================== */
* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	line-height: 1.8;
	-webkit-text-size-adjust: 100%;
}

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

/* hidden 属性を確実に効かせる。
   .demo-card などに display 指定があると、ブラウザ既定の
   [hidden]{display:none} が上書きされて消えなくなるため。 */
[hidden] {
	display: none !important;
}

a {
	color: var(--accent);
}

/* スクリーンリーダー専用テキスト */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* キーボード操作時のみ表示するスキップリンク */
.skip-link {
	position: absolute;
	top: -100px;
	left: 16px;
	z-index: 100;
	padding: 10px 18px;
	background: var(--dark);
	color: #fff;
	font-size: 13px;
	text-decoration: none;
}

.skip-link:focus {
	top: 16px;
}

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* ==========================================================================
   2. ページシェル（紙の質感）
   背景は画面全体でひと続き。カード状に浮かせず、
   中身だけを --shell-width の中央カラムに揃える。
   ========================================================================== */
.page-shell {
	background: var(--paper);
	overflow: hidden;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* 中央カラム（ヘッダー内側・各セクション・フッター内側で共有） */
.site-header__inner,
.site-footer__inner,
.section-pad {
	max-width: var(--shell-width);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* 紙のノイズテクスチャ（SVGフィルターをデータURIで埋め込み） */
.page-shell::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .16;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
	mix-blend-mode: multiply;
}

.site-header,
.site-main,
.section-pad,
.site-footer {
	position: relative;
	z-index: 1;
}

/* フッターを常に最下部へ押し下げる */
.site-main {
	flex: 1 0 auto;
}

.section-pad {
	padding: 64px var(--shell-pad);
}

/* ==========================================================================
   3. ヘッダー / フッター
   ========================================================================== */
.site-header {
	border-bottom: 1px solid var(--line);
}

.site-header__inner {
	min-height: 88px;
	padding: 24px var(--shell-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.brand {
	color: inherit;
	text-decoration: none;
	display: flex;
	gap: 16px;
	align-items: baseline;
}

.brand-ja {
	font: 700 24px var(--heading);
	letter-spacing: .06em;
}

.brand-en,
.eyebrow {
	font: 700 11px var(--display);
	letter-spacing: .18em;
	color: var(--accent);
}

.custom-logo {
	width: auto;
	max-height: 44px;
}

.header-note {
	font-size: 12px;
	color: var(--muted);
}

/* グローバルナビ（メニュー未設定時は出力されない） */
.global-nav ul {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.global-nav a {
	color: var(--ink);
	text-decoration: none;
	font-size: 12px;
	font-weight: 700;
}

.global-nav a:hover,
.global-nav .current-menu-item > a {
	color: var(--accent);
}

.site-footer {
	background: var(--dark);
	color: #eee;
	flex-shrink: 0;
}

.site-footer__inner {
	padding: 20px var(--shell-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	font-size: 11px;
}

.site-footer a {
	color: #fff;
}

/* フッター左側のリンク群。メニュー（またはホームへ戻る）と
   プライバシーポリシーを横に並べる。狭い画面では折り返す */
.site-footer__links {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.footer-nav ul {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   4. 汎用パーツ（見出し・ボタン）
   ========================================================================== */
/* セクション見出しの英字ラベル。左にアクセントカラーの縦バーを付ける
   （.brand-en には付けないよう、書体指定とは別ルールにしている） */
.eyebrow {
	margin: 0 0 16px;
	padding: 1px 0 1px 11px;
	border-left: 3px solid var(--accent);
	line-height: 1.5;
}

.hero h1,
h2 {
	font-family: var(--heading);
	font-weight: 900;
	line-height: 1.3;
	margin: 0;
}

h2 {
	font-size: 32px;
}

.accent {
	color: var(--accent);
}

.mobile-only {
	display: none;
}

/* ボタン（サイト独自クラスとコアのボタンブロックの両方に適用） */
.btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 175px;
	padding: 11px 20px;
	border: 1px solid var(--accent);
	border-radius: 5px;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	font-family: var(--sans);
	cursor: pointer;
	transition: opacity .2s ease;
}

.btn-primary,
.wp-block-button__link {
	background: var(--accent);
	color: #fff;
}

.btn-outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--accent);
	background: transparent;
}

.btn:hover:not(:disabled),
.wp-block-button__link:hover {
	opacity: .85;
}

.btn span {
	font-size: 20px;
	margin-left: 8px;
	line-height: 0;
}

.btn:disabled,
.btn[aria-disabled="true"] {
	border-color: var(--line);
	color: #aaa;
	background: #e4e0d9;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   5. フロントページ各セクション
   ========================================================================== */

/* --- ヒーロー --- */
/* 見出しを1行に保つため、幅が足りないときはカウンターを下の行へ回り込ませる */
.hero {
	min-height: 345px;
	padding-top: 55px;
	padding-bottom: 48px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	row-gap: 24px;
	border-bottom: 1px solid var(--line);
}

.hero-copy {
	max-width: 700px;
}

/* 「触って、確かめる。」を1行に収める。
   モバイルでは .mobile-only の <br> で意図した位置だけ改行させる。 */
.hero h1 {
	font-size: clamp(34px, 4.8vw, 56px);
	letter-spacing: .02em;
	white-space: nowrap;
}

.hero-lead {
	font-size: 13px;
	color: #504b45;
	margin: 20px 0 24px;
}

/* ボタンとカウンターは右側にまとめる（デザイン案に合わせた配置） */
.hero-side {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
	margin-left: auto;
	flex-shrink: 0;
}

.hero-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* --- 公開数カウンター --- */
.stats {
	display: flex;
	gap: 10px;
	margin: 0;
}

.stat {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
	min-width: 0;
	border: 1px solid var(--line);
	padding: 12px 16px;
	background: rgba(255, 255, 255, .32);
}

/* アイコンのバッジ */
.stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--accent);
	color: #fff;
	flex-shrink: 0;
}

.stat-icon svg {
	display: block;
	width: 19px;
	height: 19px;
}

.stat-body {
	display: block;
	min-width: 0;
}

.stat-label {
	display: block;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.5;
	white-space: nowrap;
}

.stat strong {
	display: block;
	font: 700 24px var(--display);
	line-height: 1.15;
}

/* --- セクション見出し --- */
.section-heading {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.section-intro {
	color: var(--muted);
	font-size: 12px;
	margin: 0;
}

/* --- 使い方（ステップ） ---
   デザイン案どおり、左に見出し／右に丸番号バッジ付きのステップを縦に並べる。 */
.how-inner {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 48px;
	align-items: start;
}

.how-heading h2 {
	margin: 0;
}

/* 見出しの下に置くマスコット。
   枠の縦横比は同梱画像（380x360）に合わせている。
   画像が未設定のときは body に has-mascot-how が付かないので非表示になる。 */
.how-mascot {
	display: none;
	width: 200px;
	height: 190px;
	margin: 28px 0 0;
	background-image: var(--wal-mascot-how, none);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left bottom;
}

.has-mascot-how .how-mascot {
	display: block;
}

.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

/* 番号バッジどうしをつなぐ縦線（先頭と末尾のバッジ中心を結ぶ） */
.steps::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 45px;
	bottom: 45px;
	width: 1px;
	background: var(--line);
}

.step {
	display: grid;
	grid-template-columns: 46px 1fr;
	gap: 24px;
	align-items: center;
	padding: 22px 0;
	position: relative;
}

/* 行の区切り線。縦の連結線と交差しないよう、バッジの右側から引く */
.step + .step::before {
	content: "";
	position: absolute;
	left: 70px;
	right: 0;
	top: 0;
	height: 1px;
	background: var(--line);
}

/* 丸番号バッジ。背景色で縦線を隠す */
.step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin: 0;
	border: 1px solid var(--accent);
	border-radius: 50%;
	background: var(--paper);
	font: 700 15px var(--display);
	color: var(--accent);
	position: relative;
	z-index: 1;
}

/* 見出しと説明を同じ行に並べ、幅が足りなければ折り返す
   （margin: 0 はパターンで組んだときのグループブロック既定マージン対策） */
.step-body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 24px;
	margin: 0;
}

.step-body h3 {
	font-family: var(--heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
	min-width: 150px;
	flex-shrink: 0;
}

.step-body p {
	font-size: 12px;
	color: var(--muted);
	line-height: 1.75;
	margin: 0;
}

/* --- マスコット ---
   画像は「外観 → カスタマイズ → マスコットキャラクター」でセクションごとに設定する。
   未設定のときは CSS 変数が none になり、何も表示されない。
   任意の縦横比の画像を想定するため contain で比率を保持する。 */
.mascot {
	background-repeat: no-repeat;
	background-size: contain;
	position: absolute;
	pointer-events: none;
}

/* 枠の縦横比は同梱画像（380x318）に合わせている */
.mascot-notice {
	background-image: var(--wal-mascot-notice, none);
	width: 190px;
	height: 159px;
	right: 24px;
	bottom: 0;
	background-position: right bottom;
}

/* --- ご相談について --- */
.contact {
	border-top: 1px solid var(--line);
}

.contact p:not(.eyebrow) {
	font-size: 14px;
}

.contact small {
	display: block;
	color: var(--muted);
	font-size: 11px;
	margin-top: 14px;
}

/* --- 注意事項 --- */
.notice {
	max-width: calc(var(--shell-width) - var(--shell-pad) * 2);
	margin: 0 auto 64px;
	padding: 26px 30px;
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	display: flex;
	position: relative;
	overflow: hidden;
}

/* マスコットと本文が重ならないよう、本文側の幅を制限する */
.has-mascot-notice .notice-copy {
	max-width: calc(100% - 215px);
}

/* 見出しの前に警告アイコンを付ける。
   ブロックパターンでもマークアップを足さずに済むよう、擬似要素で描画している。
   （データURI内の %23ef4b2c は --accent と同じ色） */
.notice h2 {
	font-size: 25px;
}

.notice h2::before {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	margin-right: 10px;
	vertical-align: -4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4b2c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

.notice ul {
	padding-left: 18px;
	font-size: 11px;
	color: #59534d;
	margin-bottom: 0;
}

/* ==========================================================================
   6. サンプルカード
   ========================================================================== */
/* --- 絞り込み ---
   紙の質感に合わせ、角丸を小さめにした枠付きボタン。
   選択中はアクセントカラーで塗る。 */
.demo-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 34px;
}

.filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: rgba(255, 255, 255, .55);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.6;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.filter-btn:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.filter-btn.is-active {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* 件数は小さなバッジで添える */
.filter-count {
	font: 700 10px var(--display);
	letter-spacing: .04em;
	padding: 1px 6px;
	border-radius: 3px;
	background: rgba(25, 24, 23, .07);
	color: var(--muted);
}

.filter-btn.is-active .filter-count {
	background: rgba(255, 255, 255, .24);
	color: #fff;
}

.demo-filter-empty {
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 32px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
	margin: 0;
}

/* --- カード一覧 ---
   カードを箱で囲まず、紙の上に直接置く誌面のような構成にする。
   囲みは「ブラウザの窓」だけが持ち、本文は罫線で仕切る。
   2カラム。右列を少し下げた段違いにして、整然としたグリッドと差を付ける。 */
.demo-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 54px 40px;
	align-items: start;
}

.demo-card.is-offset {
	margin-top: 3.25rem;
}

/* 見出し → 図版 → 本文、という記事の組み方にする。
   1件ずつを細い上罫で区切り、目次のように並べる。 */
.demo-card {
	display: flex;
	flex-direction: column;
	padding-top: 15px;
	border-top: 1px solid var(--line);
}

.demo-head {
	margin-bottom: 15px;
}

/* 準備中のカードは彩度と濃度を落とす。
   出現アニメーション（wal-rise）が opacity を最終値まで持っていってしまうため、
   ここでは opacity ではなく filter 側で薄くする。 */
.demo-card.is-pending {
	filter: grayscale(.65) opacity(.63);
}

/* --- サムネイル（ブラウザの窓に入れて見せる）---
   囲み・影を持つのはこの窓だけ。ホバーで浮くのも窓だけ。 */
.demo-frame {
	border: 1px solid var(--line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--paper-2);
	transition: transform .2s ease, box-shadow .2s ease;
}

.demo-card:hover .demo-frame {
	transform: translateY(-4px);
	box-shadow: 0 16px 34px rgba(31, 25, 18, .14);
}

.demo-card.is-pending:hover .demo-frame {
	transform: none;
	box-shadow: none;
}

/* 窓の上部バー。丸3つはSVGを背景に敷いている */
.demo-frame__bar {
	display: block;
	height: 26px;
	border-bottom: 1px solid var(--line);
	background: #e7e1d5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8' viewBox='0 0 46 8'%3E%3Ccircle cx='4' cy='4' r='3.5' fill='%23c9c0b0'/%3E%3Ccircle cx='19' cy='4' r='3.5' fill='%23c9c0b0'/%3E%3Ccircle cx='34' cy='4' r='3.5' fill='%23c9c0b0'/%3E%3C/svg%3E") no-repeat 14px center;
}

.demo-thumb {
	aspect-ratio: 16 / 10;
	background: linear-gradient(140deg, #ede8dd 0 45%, #d7d0c5 45% 46%, #252526 46% 68%, #ef4b2c 68% 70%, #ede8dd 70%);
	position: relative;
	overflow: hidden;
}

/* アイキャッチ画像が未設定のときだけ、ダミーのラベルを表示する */
.demo-thumb:not(.has-image)::after {
	content: attr(data-label);
	position: absolute;
	right: 20px;
	top: 16px;
	font: 700 44px var(--display);
	color: rgba(255, 255, 255, .62);
}

.demo-thumb.has-image {
	background: var(--paper-2);
}

.demo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* 本文は図版の下、紙に直接置く */
.demo-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1;
	padding: 16px 0 0;
}

.card-top {
	display: flex;
	justify-content: space-between;
	width: 100%;
	align-items: start;
	gap: 12px;
}

/* サイト共通の英字ラベルと同じく、左にアクセントの縦バーを付ける */
.category {
	font: 700 11px var(--display);
	color: var(--accent);
	letter-spacing: .1em;
	padding-left: 9px;
	border-left: 2px solid var(--accent);
	line-height: 1.5;
}

.status {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .08em;
	background: none;
	color: var(--muted);
	padding: 0;
	border: 1px solid var(--line);
	padding: 1px 8px;
	border-radius: 0;
	white-space: nowrap;
}

/* 見出しが1行でも2行でも図版の高さが揃うよう、2行分を確保する */
.demo-card h3 {
	font-family: var(--heading);
	font-weight: 800;
	font-size: 23px;
	line-height: 1.45;
	margin: 9px 0 0;
	min-height: calc(1.45em * 2);
}

.demo-card p {
	font-size: 13px;
	color: #59534d;
	line-height: 1.75;
	margin: 0 0 12px;
}

.tags {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

/* タグは丸ピルをやめ、区切り点で並べる */
.tag {
	font-size: 11px;
	color: var(--muted);
	border: 0;
	padding: 0;
}

.tag + .tag::before {
	content: "/";
	margin-right: 7px;
	color: var(--line);
}

/* 絞り込みボタンと同じ角丸5pxのボタンに揃える。
   塗り（実際に操作する）と枠線（動画を見る）で主従を付ける。 */
.card-actions {
	display: flex;
	gap: 9px;
	margin-top: auto;
	padding-top: 16px;
	width: 100%;
}

.card-actions .btn {
	min-width: 0;
	flex: 1;
	padding: 9px 12px;
	font-size: 12px;
}

/* サンプルが1件も登録されていないとき */
.demo-empty {
	grid-column: 1 / -1;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 32px;
	text-align: center;
	color: var(--muted);
	font-size: 13px;
}

/* ==========================================================================
   7. 投稿・固定ページ（ブロックエディター出力）
   ========================================================================== */
.entry-header {
	margin-bottom: 26px;
}

.entry-title {
	font-family: var(--heading);
	font-weight: 900;
	font-size: 31px;
	line-height: 1.4;
	margin: 0;
}

.entry-meta {
	font-size: 11px;
	color: var(--muted);
	margin-top: 8px;
}

.entry-content {
	font-size: 14px;
}

.entry-content h2 {
	font-size: 25px;
	margin: 40px 0 12px;
}

.entry-content h3 {
	font-family: var(--heading);
	font-weight: 700;
	font-size: 19px;
	margin: 32px 0 10px;
}

.entry-content p,
.entry-content ul,
.entry-content ol {
	margin: 0 0 18px;
}

.entry-content blockquote {
	border-left: 3px solid var(--accent);
	margin: 24px 0;
	padding: 4px 0 4px 18px;
	color: var(--muted);
}

.entry-content figure {
	margin: 24px 0;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--line);
	padding: 8px 12px;
}

.entry-content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 40px 0;
}

/* コアブロックの幅指定（クラシックテーマでも alignwide / alignfull を効かせる） */
.entry-content .alignwide {
	margin-left: calc(var(--shell-pad) * -1 + 24px);
	margin-right: calc(var(--shell-pad) * -1 + 24px);
	max-width: none;
}

.entry-content .alignfull {
	margin-left: calc(var(--shell-pad) * -1);
	margin-right: calc(var(--shell-pad) * -1);
	max-width: none;
}

.entry-content .alignleft {
	float: left;
	margin: 0 24px 16px 0;
}

.entry-content .alignright {
	float: right;
	margin: 0 0 16px 24px;
}

/* ブロックスタイル: 注意書きボックス（グループブロック用） */
.wp-block-group.is-style-wal-notice {
	border: 1px solid var(--accent);
	border-radius: var(--radius);
	padding: 26px 30px;
}

/* ブロックスタイル: 用紙カード（グループブロック用） */
.wp-block-group.is-style-wal-card {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .38);
	box-shadow: var(--shadow);
	padding: 22px 26px;
}

/* 一覧ページ */
.archive-list {
	display: grid;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.archive-item {
	border-bottom: 1px solid var(--line);
	padding-bottom: 18px;
}

.archive-item h2 {
	font-size: 20px;
	margin: 0 0 4px;
}

.archive-item a {
	color: var(--ink);
	text-decoration: none;
}

.archive-item a:hover {
	color: var(--accent);
}

.pagination {
	margin-top: 32px;
	font-size: 13px;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--line);
	margin-right: 4px;
	text-decoration: none;
}

.pagination .current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* 検索フォーム */
.search-form {
	display: flex;
	gap: 8px;
	margin: 24px 0;
}

.search-form input[type="search"] {
	flex: 1;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 5px;
	font-family: var(--sans);
	font-size: 13px;
	background: #fff;
}

/* 404 */
.error-404 {
	text-align: center;
	padding: 80px var(--shell-pad);
	max-width: var(--shell-width);
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   7-2. パターンで組んだときの互換調整
   ブロックエディターのパターンから組み立てた場合でも、
   静的版と同じ見た目になるように調整する。
   -------------------------------------------------------------------------- */

/* フロントページをブロックで組む場合は、セクション側でパディングを持つ */
.front-content > .alignwide,
.front-content > .alignfull {
	margin-left: 0;
	margin-right: 0;
}

/* グループブロックの旧マークアップ（inner-container）でもレイアウトを維持する */
.hero > .wp-block-group__inner-container,
.hero-side > .wp-block-group__inner-container,
.section-heading > .wp-block-group__inner-container,
.how-inner > .wp-block-group__inner-container,
.steps > .wp-block-group__inner-container,
.step > .wp-block-group__inner-container,
.step-body > .wp-block-group__inner-container,
.notice > .wp-block-group__inner-container,
.notice-copy > .wp-block-group__inner-container {
	display: contents;
}

/* ボタンブロックをヒーローのボタン列として使う場合 */
.hero-actions.wp-block-buttons,
.card-actions.wp-block-buttons {
	gap: 12px;
}

/* 段落ブロックで注記を表現する場合（静的版の <small> 相当） */
.contact .contact-note {
	color: var(--muted);
	font-size: 11px;
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   プライバシーポリシー（ブロックパターン web-app-lab/privacy）

   PC表示では本文カラム（944px）いっぱいに広げる方針。
   1行は全角63字前後と長めになるため、行を見失わないよう
   本文を 15px・行間 2.0 にして補っている。
   （幅を絞る指定を足す場合は、行間もあわせて詰めること）
   -------------------------------------------------------------------------- */
.wal-privacy {
	font-size: 15px;
	line-height: 2;
}

/* 導入文。本文より一段落ち着かせ、下の区切り線で「ここから本題」を示す */
.wal-privacy .privacy-lead {
	color: var(--muted);
	padding-bottom: 24px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 0;
}

/* 節の切れ目。見出しの大きさで差をつけるのではなく、
   左のアクセントバーと上の余白で切れ目を作る（.eyebrow と同じ語彙） */
.wal-privacy h2 {
	font-size: 21px;
	line-height: 1.6;
	margin: 48px 0 16px;
	padding: 2px 0 2px 13px;
	border-left: 3px solid var(--accent);
}

/* ツール名。h2 ほど強くせず、小さな四角を添えて並びを揃える */
.wal-privacy h3 {
	font-size: 16px;
	margin: 30px 0 12px;
}

.wal-privacy h3::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-right: 9px;
	vertical-align: 0.15em;
	background: var(--accent);
	border-radius: 2px;
}

/* 送信先・送信される情報・利用目的。
   外部送信規律で一番読ませたい部分なので、素の箇条書きのままにせず
   カードに載せてラベルを行頭に立てる */
.wal-privacy .privacy-spec {
	list-style: none;
	margin: 0 0 20px;
	padding: 18px 22px;
	background: var(--paper-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	font-size: 14px;
	line-height: 1.9;
}

.wal-privacy .privacy-spec li + li {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--line);
}

.wal-privacy .privacy-spec strong {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.6;
	color: var(--accent);
}

/* Clarity のマスキングに関する補足。カードの直後に置く注記 */
.wal-privacy .privacy-note {
	font-size: 14px;
	color: var(--muted);
}

/* 各社ポリシーへのリンク集 */
.wal-privacy .privacy-links {
	list-style: none;
	padding-left: 0;
}

.wal-privacy .privacy-links li + li {
	margin-top: 6px;
}

.wal-privacy .privacy-links a::before {
	content: "→";
	margin-right: 8px;
	color: var(--accent);
	text-decoration: none;
}

/* 本文中のリンク。色で主張させず、下線の色だけアクセントにする */
.wal-privacy a {
	color: var(--ink);
	text-decoration: underline;
	text-decoration-color: var(--accent);
	text-underline-offset: 4px;
}

.wal-privacy a:hover {
	color: var(--accent);
}

/* 制定日 */
.wal-privacy .privacy-date {
	margin: 40px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
	text-align: right;
}

/* ==========================================================================
   8. レスポンシブ
   ========================================================================== */
/* カードは幅が足りなくなった時点で1カラムへ。段違いも解除する */
@media (max-width: 820px) {
	.demo-grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.demo-card.is-offset {
		margin-top: 0;
	}
}

@media (max-width: 700px) {
	.site-header__inner {
		min-height: 74px;
		padding: 18px var(--shell-pad-sp);
		flex-wrap: wrap;
	}

	.brand {
		gap: 10px;
	}

	.brand-ja {
		font-size: 21px;
	}

	.brand-en {
		font-size: 9px;
	}

	.section-pad {
		padding: 42px var(--shell-pad-sp);
	}

	.hero {
		min-height: 0;
		display: block;
		padding-top: 42px;
	}

	.mobile-only {
		display: block;
	}

	.hero h1 {
		font-size: 46px;
	}

	.hero-lead {
		font-size: 12px;
	}

	.hero-actions {
		flex-direction: column;
	}

	.btn,
	.wp-block-button__link {
		width: 100%;
	}

	.hero-actions .wp-block-button {
		width: 100%;
	}

	.hero-side {
		margin: 26px 0 0;
		gap: 14px;
	}

	.stats {
		margin: 0;
	}

	.stat {
		padding: 10px 12px;
		gap: 10px;
	}

	.stat-icon {
		width: 30px;
		height: 30px;
	}

	.stat-icon svg {
		width: 17px;
		height: 17px;
	}

	.stat strong {
		font-size: 21px;
	}

	.section-heading {
		display: block;
	}

	.section-intro {
		margin-top: 12px;
	}

	.demo-content {
		padding: 13px 0 0;
	}

	.demo-head {
		margin-bottom: 13px;
	}

	/* 1カラムでは高さを揃える必要がないので、2行確保をやめる */
	.demo-card h3 {
		font-size: 20px;
		min-height: 0;
	}

	.demo-card p {
		font-size: 12px;
	}

	.demo-filter {
		gap: 7px;
		margin-bottom: 26px;
	}

	.filter-btn {
		padding: 7px 13px;
		gap: 7px;
		font-size: 11px;
	}

	/* 見出しをステップの上に積み、バッジを一回り小さくする */
	.how-inner {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	/* マスコットは見出しの右側に回して、縦の間延びを防ぐ */
	.how-heading {
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		gap: 16px;
		flex-wrap: wrap;
	}

	.how-mascot {
		width: 128px;
		height: 121px;
		margin: 0;
		flex-shrink: 0;
	}

	.step {
		grid-template-columns: 38px 1fr;
		gap: 16px;
		padding: 18px 0;
	}

	.step-num {
		width: 38px;
		height: 38px;
		font-size: 13px;
	}

	.steps::before {
		left: 19px;
		top: 37px;
		bottom: 37px;
	}

	.step + .step::before {
		left: 54px;
	}

	/* 見出しと説明は縦積みにする */
	.step-body {
		display: block;
	}

	.step-body h3 {
		min-width: 0;
		font-size: 16px;
		margin-bottom: 4px;
	}

	.mascot-notice {
		right: 0;
		width: 124px;
		height: 104px;
	}

	.notice {
		max-width: none;
		margin: 0 var(--shell-pad-sp) 42px;
		padding: 22px 18px;
	}

	.has-mascot-notice .notice-copy {
		max-width: calc(100% - 134px);
	}

	.site-footer__inner {
		padding: 18px var(--shell-pad-sp);
		display: block;
	}

	.site-footer span {
		display: block;
		margin-top: 8px;
	}

	.contact p:not(.eyebrow) {
		font-size: 13px;
	}

	.entry-title {
		font-size: 27px;
	}

	.entry-content .alignwide,
	.entry-content .alignfull {
		margin-left: calc(var(--shell-pad-sp) * -1);
		margin-right: calc(var(--shell-pad-sp) * -1);
	}

	/* プライバシーポリシー。狭い画面では行間と余白を詰め、
	   カードの内側もきつくなりすぎないように調整する */
	.wal-privacy {
		font-size: 14px;
		line-height: 1.9;
	}

	.wal-privacy h2 {
		font-size: 18px;
		margin: 38px 0 14px;
	}

	.wal-privacy h3 {
		margin: 26px 0 10px;
	}

	.wal-privacy .privacy-spec {
		padding: 15px 17px;
	}

	.wal-privacy .privacy-date {
		text-align: left;
	}
}

/* ==========================================================================
   9. 出現アニメーション
   ========================================================================== */
/* 隠すのは JavaScript が動く環境（html.js）だけ。
   さらに app.js が読み込めない・初期化に失敗した場合は、header の保険スクリプトが
   js クラスを外すため、本文が消えたままになることはない。

   サンプル一覧はセクションを丸ごとではなく、見出し → 絞り込み → カード1枚ずつ、と
   個別に出す。ここで隠す要素は app.js の ITEM_SELECTOR と必ず揃えること。 */
.js .reveal,
.js .applications .section-heading,
.js .demo-filter,
.js .demo-card {
	opacity: 0;
}

.js .reveal.is-visible,
.js .applications .section-heading.is-visible,
.js .demo-filter.is-visible,
.js .demo-card.is-visible {
	animation: wal-rise .65s ease both;
}

@keyframes wal-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js .reveal,
	.js .applications .section-heading,
	.js .demo-filter,
	.js .demo-card {
		opacity: 1;
	}

	.js .reveal.is-visible,
	.js .applications .section-heading.is-visible,
	.js .demo-filter.is-visible,
	.js .demo-card.is-visible {
		animation: none;
	}
}