/*
 * スキップリンク。
 *
 * ヘッダーのナビゲーションは項目が多く、キーボードだけで本文に着くまで
 * Tab を何十回も押すことになるため、先頭に本文へ飛ぶリンクを置く。
 * 通常は画面外に逃がしておき、フォーカスされたときだけ左上に出す。
 */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: #fff;
	color: #0a1e3c;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	border: 2px solid #0a1e3c;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* リンク先はレイアウトに影響しない目印なので、高さを持たせない */
#main-content {
	scroll-margin-top: 100px;
}

#main-content:focus {
	outline: none;
}

/*
 * a の入れ子を解消するために button を span へ置き換えた分の見た目を戻す。
 *
 * style.css の .about_page .story_block_card__button は寸法だけを指定しており、
 * display は button の既定値 inline-block に暗黙で依存していた。span の既定値
 * inline では width と padding-block が効かず、::after の矢印もテキスト幅を
 * 基準にずれる。セレクタは上書き対象と同じスコープに合わせている。
 */
.about_page .story_block_card__button {
	display: inline-block;
}