@charset "utf-8";
/*
あぶない刑事40周年特設サイト『ABDK40+』
news.css … ②NEWS等WP記事更新機能のベースデザイン

カード一覧・前後記事・関連記事・シェアボタン・カテゴリー/タグのピル一覧は、
接頭辞なしのクラス名をそのまま使っている
（.getPost / .PostTitle / .post-navigation / .category-list 等）。
ヘッダー・フッター・グロナビ等のサイト共通コンポーネントは既存の ab- 接頭辞のまま touch しない。

common.css の :root トークンに依存する（common.css を先に読み込む前提）。
body[data-page="sub"] のライトトーン切り替え（common.css側）を前提に、色は必ず var() 経由で参照する。
.ab-entry-content 配下の装飾は editor-style.css（WP/）にも同一トーンで移植している。
------------------------------------------------------------*/

/*------------------------------------------------------------
	共通見出し（NEWS一覧・アーカイブ・カテゴリー・タグの先頭で使う汎用パーツ）
------------------------------------------------------------*/
.ab-page-head {
	padding-block: clamp(100px, 16vw, 160px) clamp(20px, 3vw, 30px);
	text-align: center;
}
/* 480px以上：中幅（タブレット等）でヘッダー中央ロゴ（幅上限380px到達で高さがほぼ一定になる）の下端と
   見出しが被るため、上paddingの下限を引き上げてクリアランスを確保する（480px未満のSPは元のままで変更なし） */
@media (min-width: 480px) {
	.ab-page-head {
		padding-top: clamp(166px, 16vw, 180px);
	}
}
.ab-page-head__title {
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-size: clamp(2.8rem, 2.8rem + 2vw, 10rem);
 line-height: 1.2em;
	font-weight: var(--ab-font-weight-bold);
	letter-spacing: -0.08em;
}
.ab-page-head__desc {
	margin-top: 12px;
	color: var(--ab-color-text-muted);
}

/*------------------------------------------------------------
	メディア情報ページ用サブナビ（.gnav）。page-media.php / page-media.html で使用。
------------------------------------------------------------*/
.gnav {
	padding-block: clamp(24px, 4vw, 40px) 0;
 padding: clamp(20px, 4vw, 40px) clamp(20px, 10vw, 150px);
}
.gnav .menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(8px, 2vw, 16px);
}
.gnav .menu li {
	flex: 1 1 30%;
	max-width: 220px;
}
.gnav .menu a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 12px 16px;
	background-color: var(--ab-color-black);
	color: var(--ab-color-white);
	font-weight: var(--ab-font-weight-bold);
	transition: background 200ms var(--ab-ease);
}
.gnav .menu a:hover {
	background-color: var(--ab-color-accent);
	opacity: 1;
}
.ttl-media {
	font-size: clamp(1.8rem, 1.8rem + 0.6vw, 2.8rem);
	font-weight: var(--ab-font-weight-bold);
	text-align: center;
 margin-bottom: -1rem;
}

/*------------------------------------------------------------
	カテゴリー／タグのピル型リンク一覧（.category-list / .tags-list）
	一覧ページ上部の絞り込みにも、記事詳細下部のメタ情報にも同じマークアップ・クラスで使い回す。
------------------------------------------------------------*/
.category-list,
.tags-list {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 0;
	margin-bottom: 12px;
}
.category-list .group,
.tags-list .group {
	flex-shrink: 0;
	margin-right: 10px;
	font-size: .9em;
	font-weight: var(--ab-font-weight-bold);
	color: var(--ab-color-text-muted);
}
.category-list ul,
.tags-list ul,
.post-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.category-list a,
.tags-list a,
.post-categories a {
	display: inline-block; /* インライン要素のためpadding/背景を効かせる前にdisplay変更 */
	padding: 0.3em 0.5em;
	background: var(--ab-color-surface);
	color: var(--ab-color-accent);
	font-size: .9em;
	font-weight: var(--ab-font-weight-bold);
	transition: background 200ms var(--ab-ease), color 200ms var(--ab-ease);
}
.category-list a:hover,
.tags-list a:hover,
.post-categories a:hover {
	background: var(--ab-color-accent);
	color: var(--ab-color-white);
	opacity: 1;
}

/*------------------------------------------------------------
	NEWS一覧カード（.getPostDispArea / .getPost）
------------------------------------------------------------*/
.getPostDispArea {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* コンテナ1200pxで最大3列 */
	gap: clamp(24px, 4vw, 40px);
	padding-block: 0 clamp(30px, 5vw, 50px);
}
.related .getPostDispArea {
	padding-bottom: 0;
}
/* 白カード（角丸なし）にサムネ16:9＋タイトル＋下段メタ（カテゴリ左・日付右） */
.getPost {
	background: var(--ab-color-white);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.getPost a {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 14px 14px 16px;
}
.getPost .ImgArea {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	margin-bottom: 14px;
}
.getPost .ImgArea .images {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
 object-fit: contain;
}
.getPost .PostTitle {
	font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.6rem);
 font-weight: 500;
	line-height: 1.6;
	margin-bottom: 12px;
}
.getPost__meta {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: auto; /* カード高さが揃わない場合もメタ行を下端に固定 */
}
.getPost .cat {
	font-size: 1.2rem;
	color: var(--ab-color-text-muted);
}
.getPost .date {
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	font-size: 1.3rem;
	letter-spacing: -0.08em;
	color: var(--ab-color-accent);
	white-space: nowrap;
}

/*------------------------------------------------------------
	関連記事（RELATED ARTICLES）／黒地斜体のREAD MOREボタン（.btn）
------------------------------------------------------------*/
.related {
	padding-block: 0 clamp(40px, 6vw, 72px);
}
.related .section-title {
	text-align: center;
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-size: clamp(2rem, 2.4rem + 1vw, 4rem);
	font-weight: var(--ab-font-weight-bold);
	letter-spacing: -0.08em;
	margin-bottom: clamp(24px, 3vw, 30px);
}
.btn {
	display: flex;
	justify-content: center;
	margin-top: clamp(32px, 6vw, 56px);
}
.btn-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
 min-width: 200px;
	padding: 2px 28px;
	background: var(--ab-color-accent);
	color: var(--ab-color-white);
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.8rem, 2vw, 2.8rem);
	letter-spacing: -0.08em;
	transition: background 200ms var(--ab-ease), opacity 200ms var(--ab-ease);
}
.btn-link:hover {
	background: var(--ab-color-accent-dark);
	opacity: 1;
}

/*------------------------------------------------------------
	ページネーション（.ab-pagination。WP core の .page-numbers を利用）
------------------------------------------------------------*/
.ab-pagination {
	display: flex;
	justify-content: center;
	padding-bottom: clamp(60px, 8vw, 100px);
}
.ab-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
	list-style: none;
}
.ab-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border-radius: 50%;
 font-weight: bold;
	background: var(--ab-color-text-muted);
	color: var(--ab-color-white);
	transition: background 200ms var(--ab-ease);
}
.ab-pagination a.page-numbers:hover {
	background: var(--ab-color-black);
}
.ab-pagination .page-numbers.current {
	background: var(--ab-color-accent);
	color: var(--ab-color-white);
}

/*------------------------------------------------------------
	記事詳細：白ボックス（.ab-article-box）＋ヘッダー（.ab-article-head）
	記事全体（メタ行・タイトル・本文・Share・カテゴリー）を
	1枚の白ボックスに収め、タイトル下にアクセント色の罫線を敷く。
------------------------------------------------------------*/
/* single.php専用：記事本体（.ab-article-box）と前後ナビ（.post-navigation）を
   1枚のパネルに連結する。影は外周のみに1つだけ掛け、境界には出さない。 */
.ab-article-panel {
	width: min(100%, var(--ab-container-width));
	margin: clamp(96px, 14vw, 150px) auto clamp(60px, 8vw, 100px);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}
/* 480px以上：中央ロゴとの被り回避で上マージンの下限を引き上げる */
@media (min-width: 480px) {
	.ab-article-panel {
		margin-top: 166px;
	}
}
/* パネル内では子の個別の幅・マージン・影を打ち消す（影の二重掛け＝境界の影を防ぐ） */
.ab-article-panel .ab-article-box,
.ab-article-panel .post-navigation {
	width: 100%;
	margin: 0;
	box-shadow: none;
}

.ab-article-box {
	width: min(100%, var(--ab-container-width));
	margin: clamp(96px, 14vw, 150px) auto 0;
	padding: 0 0 10px;
	background: var(--ab-color-white);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}
/* 480px以上：中央ロゴとの被り回避で上マージンの下限を引き上げる（固定ページ単体表示用） */
@media (min-width: 480px) {
	.ab-article-box {
		margin-top: 166px;
	}
}
.ab-article-head {
	/* DOM順（date→cat→title）のまま、メタ行を「カテゴリ左・日付右」の1行に並べ替える */
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	row-gap: 12px;
 width: 100%;
	margin-inline: auto;
	padding: clamp(20px, 4vw, 40px) clamp(20px, 10vw, 150px);
	text-align: left;
 background-color: var(--ab-color-black);
 color: var(--ab-color-white);
}
.ab-article-head__date {
	order: 2;
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.08em;
}
.ab-article-head__cat {
	order: 1;
	display: flex;
	gap: 8px;
	font-size: .9em;
}
.ab-article-head__cat a {
	display: inline-block;
	padding: 0.1em 0.5em;
	background: var(--ab-color-accent);
	font-weight: var(--ab-font-weight-bold);
}
.ab-article-head__title {
	order: 3;
	width: 100%;
	font-size: clamp(2rem, 1.7rem + 2vw, 3rem);
	font-weight: var(--ab-font-weight-bold);
	line-height: 1.5;
}
/* page-media.php：.ttl-media と併用時、.ab-article-head の padding と .ttl-media の margin-top が
   二重に効いて上だけ余白が広がるため、この組み合わせでは margin を打ち消す */
.ab-article-head__title.ttl-media {
	margin: 0;
}

/*------------------------------------------------------------
	記事本文装飾（.ab-entry-content）
	h2〜h4 / p / ul / ol / table / blockquote / img / リンク / wp-block基本 を一式まとめる
------------------------------------------------------------*/
.ab-article-box .ab-contents{
 width: 100%;
}
.ab-entry-content {
	margin-inline: auto;
	padding: clamp(20px, 4vw, 40px) clamp(20px, 10vw, 150px);
	font-size: clamp(1.5rem, 1.4rem + 0.2vw, 1.8rem);
}
.ab-entry-content > * + * {
	margin-top: 1.6em;
}
.ab-entry-content h1, .ab-entry-content h2 {
 margin: 3rem 0 2rem;
 position: relative;
 font-size: clamp(2rem, 4vw, 3rem);
	font-weight: var(--ab-font-weight-bold);
	border-bottom: 3px solid var(--ab-color-accent);
 line-height: 1.6em;
 padding-bottom: .2rem;
}
.ab-entry-content h3 {
	font-size: clamp(1.8rem, 1.5rem + 0.5vw, 2.8rem);
	font-weight: var(--ab-font-weight-bold);
 line-height: 1.6em;
}
.ab-entry-content h4 {
	font-size: clamp(1.7rem, 1.5rem + 0.3vw, 2.4rem);
	font-weight: var(--ab-font-weight-bold);
 line-height: 1.6em;
}
.ab-entry-content p {
	line-height: 1.9;
}
.ab-entry-content a {
	color: var(--ab-color-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ab-entry-content ul,
.ab-entry-content ol {
	padding-left: 1.4em;
}
.ab-entry-content ul li {
	list-style: disc;
}
.ab-entry-content ol li {
	list-style: decimal;
}
.ab-entry-content li + li {
	margin-top: 0.5em;
}
.ab-entry-content img,
.ab-entry-content figure {
	margin: 1.6em auto;
}
.ab-entry-content figure figcaption {
	margin-top: 8px;
	font-size: 1.2rem;
	color: var(--ab-color-text-muted);
	text-align: center;
}
.ab-entry-content blockquote, .ab-entry-content .wp-block-quote {
	padding: 1em 1.2em;
	border-left: 4px solid var(--ab-color-border-gray);
	background: var(--ab-color-surface);
	color: var(--ab-color-text-muted);;
}
.ab-entry-content table,
.ab-entry-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}
.ab-entry-content th,
.ab-entry-content td,
.ab-entry-content .wp-block-table th,
.ab-entry-content .wp-block-table td {
	padding: 0.8em 1em;
	border: 1px solid var(--ab-color-border-gray);
	text-align: left;
	vertical-align: middle;
	font-size: 0.95em;
}
.ab-entry-content table tr:first-of-type th,
.ab-entry-content table tr:first-of-type td {
	background: var(--ab-color-surface);
	color: var(--ab-color-accent);
	font-weight: var(--ab-font-weight-bold);
	text-align: center;
}
.wp-block-button {
 text-align: center;
}
.ab-entry-content .wp-block-button__link {
	display: inline-flex; /* インライン要素にサイズ・パディングを効かせるため先にdisplay変更 */
	align-items: center;
	padding: 10px 24px;
	background: var(--ab-color-accent);
	color: var(--ab-color-white);
	text-decoration: none;
 font-weight: 700;
}
/* 小見出し（h5・h6）。h2〜h4は上で定義済み。h4より下位の階層を補う */
.ab-entry-content h5 {
	font-size: clamp(1.4rem, 1.35rem + 0.2vw, 1.6rem);
	font-weight: var(--ab-font-weight-bold);
}
.ab-entry-content h6 {
	font-size: clamp(1.3rem, 1.3rem + 0.1vw, 1.4rem);
	font-weight: var(--ab-font-weight-bold);
	color: var(--ab-color-text-muted);
}
/* 強調。em/iのイタリックはUA既定に委ねる。strong/bの太字はデザイントークンで明示 */
.ab-entry-content strong,
.ab-entry-content b {
	font-weight: var(--ab-font-weight-bold);
}
/* 区切り線（hr / wp-block-separator） */
.ab-entry-content hr,
.ab-entry-content .wp-block-separator {
	height: 0;
	border: 0;
	border-top: 1px solid var(--ab-color-border-gray);
}
/* コード（インラインcode・整形済みpre）。本文サンプルに <code> 使用あり */
.ab-entry-content code {
	padding: 0.1em 0.4em;
	background: var(--ab-color-surface);
	border-radius: var(--ab-radius-s);
	font-family: "SFMono-Regular", Consolas, "Courier New", monospace;
	font-size: 0.9em;
}
.ab-entry-content pre {
	padding: 1em 1.2em;
	background: var(--ab-color-surface);
	border-radius: var(--ab-radius-m);
	overflow-x: auto;
	font-size: 0.9em;
	line-height: 1.7;
}
.ab-entry-content pre code {
	padding: 0;
	background: none;
	border-radius: 0;
}
/* 埋め込み（YouTube等の wp-block-embed）を16:9でレスポンシブ化 */
.ab-entry-content .wp-block-embed__wrapper {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.ab-entry-content .wp-block-embed__wrapper iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/* 画像ブロック・回り込み（wp-block-image / align系）。
   imgのmax-width・height:autoはcommon.cssのimg,svg共通指定を継承（ここでは再指定しない） */
.ab-entry-content .wp-block-image {
	text-align: center;
}
.ab-entry-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}
.ab-entry-content .alignleft {
	float: left;
	margin: 0 1.2em 1em 0;
}
.ab-entry-content .alignright {
	float: right;
	margin: 0 0 1em 1.2em;
}
/* ギャラリー（wp-block-gallery） */
.ab-entry-content .wp-block-gallery {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

/*------------------------------------------------------------
	記事メタ情報（カテゴリー・タグ。記事詳細下部）
------------------------------------------------------------*/
.ab-article-meta {
 padding: 0 clamp(20px, 10vw, 150px);
	margin: 0 auto clamp(32px, 5vw, 48px);
}
/* SP：記事まわりの左右余白が vw基準で広くなりすぎるため、.ab-contents と同じ20px固定に揃える
   （PCの表示はclamp()のvw基準のままなので変更なし。上下のpaddingは各ルールの値を維持） */
@media (max-width: 768px) {
	.ab-article-head,
	.ab-entry-content,
	.ab-article-meta {
		padding-inline: 20px;
	}
}

/*------------------------------------------------------------
	シェアボタン（.arti-sharing-wrapper / .arti-sharing-inner）
	アイコン＋ラベルの角丸アウトラインボタンを中央に並べる。
------------------------------------------------------------*/
.arti-sharing-wrapper {
	max-width: 820px;
	margin: clamp(6rem, 6vw, 8rem) auto;
}
.arti-sharing-inner {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
}
.arti-sharing-inner .item {
	display: inline-flex;
}
.arti-sharing-inner .link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 90px;
	gap: 0.5em;
	padding: 0.2em 1em;
	border: 1px solid var(--ab-color-border);
	font-size: 1.2rem;
	color: var(--ab-color-text);
	transition: border-color 200ms var(--ab-ease), color 200ms var(--ab-ease);
}
.arti-sharing-inner .link:hover {
	border-color: var(--ab-color-accent);
	color: var(--ab-color-accent);
}
/* common.css の img,svg{ height:auto } を上書きし、各ロゴの光学サイズを揃える（LINEのみ塗り面積が小さいぶん大きめ） */
.arti-sharing-inner svg {
	width: 18px;
	height: 18px;
}
.arti-sharing-inner svg.svg-line {
	width: 24px;
	height: 24px;
}

/*------------------------------------------------------------
	前後記事ナビ（.post-navigation）
	サムネイル画像付き2カラム・中央に区切り線。
------------------------------------------------------------*/
.post-navigation {
	display: flex;
	background: var(--ab-color-white);
	border-top: 1px solid var(--ab-color-border-gray); /* パネル内で記事本体との区切り線 */
}
.post-navigation li {
	width: 50%;
}
.post-navigation li.nav-next {
	position: relative;
}
.post-navigation li.nav-next::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	border-left: 1px solid var(--ab-color-border-gray);
}
/* 横並び（サムネは外側の端・Previousは左、Nextは右） */
.post-navigation a {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
	height: 100%;
	padding: clamp(20px, 3vw, 28px) clamp(12px, 3vw, 28px);
	text-align: left;
}
.post-navigation li.nav-next a {
	flex-direction: row-reverse;
	text-align: right;
}
.post-navigation .meta-nav {
	display: block;
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
 font-size: clamp(1.7rem, 1.5rem + 0.3vw, 3rem);
	font-weight: var(--ab-font-weight-bold);
	letter-spacing: -0.08em;
	color: var(--ab-color-accent);
	margin-bottom: 6px;
}
.post-navigation .ImgArea {
	position: relative;
	width: clamp(72px, 9vw, 110px); /* 正方形・角丸なし */
	flex-shrink: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--ab-color-surface);
}
.post-navigation .ImgArea .images {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.post-navigation .post-navigation__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.post-navigation .post-title {
 font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.6rem);
	line-height: 1.5;
 display: block;
 text-align: left;
}
@media (max-width: 600px) {
	.post-navigation a {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}
	.post-navigation li.nav-next a {
		flex-direction: column;
		text-align: center;
	}
}

/*------------------------------------------------------------
	404 / COMING SOON（.ab-notfound）
------------------------------------------------------------*/
/* 上下中央寄せ。#container はスティッキーフッター（min-height:100dvh／main が flex:1 0 auto）なので、
   main を flex コンテナにするだけで .ab-notfound は「ヘッダー〜フッターの間」の中央に収まる
   （旧実装の padding-block: clamp(200px,30vw,300px) で押し下げる方式は削除。同責務を2通り持たない）。
   body へ404専用クラスを増やさずに済むよう :has() で対象を絞る。
   padding-top はヘッダー中央ロゴ（top最大16px＋画像高さ最大134px）の逃げで、中央基準線もその分だけ下がる。 */
#container > main:has(.ab-notfound) {
	display: flex;
	/* 縦方向にする。archive.php / index.php / tag.php / category.php の空表示では
	   .ab-notfound の兄弟に空の .ab-contents（margin-inline:auto）が残るため、
	   row のままだとそれが余白を吸って .ab-notfound が右へ押し出される。 */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-bottom: clamp(24px, 4vw, 40px);
}
/* ヘッダー中央ロゴ（top最大16px＋画像高さ最大134px）の逃げ。
   404 と single の「記事なし」のように main が #container の先頭に来るページだけ必要。
   アーカイブ系は main の前に .ab-page-head が入り、見出し側が既にヘッダー分を空けているので加算しない。 */
#container > main:has(.ab-notfound):first-child {
	padding-top: clamp(130px, 15vw, 170px);
}
.ab-notfound {
	padding-inline: 20px;
	text-align: center;
}
.ab-notfound__code {
	font-family: var(--ab-font-heading);
	text-transform: uppercase;
	letter-spacing: -0.08em;
	/* クライアント指示で 1.5倍版（clamp(4rem, 22.5vw - 12px, 10.5rem)）の 2/3 に縮小＝
	   上限は「404」時と同じ 7rem。式の3項すべてを 2/3 にしているので、どの画面幅でも
	   ちょうど 2/3 になる。「NOT FOUND」は実測 4.237em 幅で、この式なら常に1行に収まる
	   （nowrap はその前提の保険）。 */
	font-size: clamp(2.6667rem, 15vw - 8px, 7rem);
	white-space: nowrap;
	font-weight: var(--ab-font-weight-bold);
	color: var(--ab-color-dark);
	line-height: 1;
}
.ab-notfound__text {
	margin-top: 16px;
	font-size: clamp(1.4rem, 1.3rem + 0.2vw, 1.6rem);
}
.ab-notfound__link {
	display: inline-flex;
	font-family: var(--ab-font-heading); /* ラベルを英字（GO TO TOP）にしたため見出し書体に揃える */
	letter-spacing: -0.08em; /* サイト内の他のAmarillo使用箇所と同じ字送り */
	margin-top: clamp(24px, 5vw, 40px);
	align-items: center;
	justify-content: center;
 min-width: 200px;
	padding: 2px 28px;
	background: var(--ab-color-accent);
	color: var(--ab-color-white);
	text-transform: uppercase;
	font-weight: var(--ab-font-weight-bold);
	font-size: clamp(1.8rem, 2vw, 2.4rem);
	transition: background 200ms var(--ab-ease), opacity 200ms var(--ab-ease);
}
.ab-notfound__link:hover {
	background: var(--ab-color-accent-dark);
	opacity: 1;
}