@charset "UTF-8";
/*
 * ベース
 *
 * 親テーマ SWELL のスタイルの上に乗せる前提。
 *
 * リセット目的のルールは :where() でセレクタ全体を包み、詳細度を 0 にしてある。
 * `body.midonavi img` のように書くと詳細度 (0,1,1) になり、あとから書く
 * `.cat-card__photo` (0,1,0) を打ち消してしまうため。
 * 逆に SWELL のレイアウトを打ち消す指定は、勝つ必要があるので :where() にしない。
 */

/*
 * 横あふれは clip で切る。
 * hidden だとスクロールできる箱になってしまい、ヘッダーの position:sticky が
 * 効かなくなる。clip はスクロールの箱を作らないので sticky を壊さない。
 * （カルーセルの矢印がコンテンツ幅の外に出るので、狭い画面だと数十pxあふれる。
 *   横に揺れると読みづらいのでここで止めている。根本はレスポンシブ対応で直す）
 */
html {
	overflow-x: clip;

	/*
	 * アンカー（#pickup や目次のリンク）で飛んだ先を、追従ヘッダーの下から始める。
	 * これが無いと見出しがヘッダー（PC 100px / SP 57px）の裏に潜って見えない。
	 * --header-height は SP で 57px に切り替わる（responsive.css）。
	 */
	scroll-padding-top: calc(var(--header-height) + var(--space-md));
}

body.midonavi {
	font-family: var(--font-base);
	color: var(--color-text);
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* --- リセット（詳細度 0） ----------------------------------- */

:where(body.midonavi img) {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

:where(body.midonavi a) {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

/*
 * リンクのホバーは**全体で「少し薄くする」だけ。下線は出さない。**
 * 個別に text-decoration: underline を足さないこと（見え方がばらつく）。
 *
 * 行き先が決まっていないリンクは href を持たない（midonavi_link_attrs）。
 * a[href] に限定して、押せないものが反応しないようにしている。
 */
:where(body.midonavi a[href]:hover) {
	opacity: 0.75;
}

:where(body.midonavi ul, body.midonavi ol) {
	list-style: none;
	margin: 0;
	padding: 0;
}

:where(body.midonavi button) {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

/* 見出しは SWELL の装飾（下線・疑似要素）を消して素の状態から組む */
:where(body.midonavi h1, body.midonavi h2, body.midonavi h3, body.midonavi h4) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-weight: 700;
	line-height: 1.4;
}

:where(body.midonavi p) {
	margin: 0;
}

/* --- SWELL の打ち消し（勝つ必要があるので詳細度を残す） -------- */

body.midonavi #content,
body.midonavi .l-content,
body.midonavi .l-mainContent,
body.midonavi .l-mainContent__inner {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

body.midonavi h2::before,
body.midonavi h2::after,
body.midonavi h3::before,
body.midonavi h3::after {
	content: none;
}

/*
 * 背景の飾りを絶対配置する基準。
 * z-index を持たせてスタッキングコンテキストを作り、飾り（-1）と
 * 帯の地色（-2）が body の背景より下に沈まないようにする。
 */
.site-main {
	position: relative;
	z-index: 0;
}

/* --- 共通ユーティリティ -------------------------------------- */

.mdn-container {
	width: var(--content-width);
	margin-inline: auto;
}

.mdn-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/*
 * 行き先が決まっていないリンクは href を持たない（midonavi_link_attrs）。
 * 押せると誤解されないよう、指カーソルにしない。
 */
:where(body.midonavi a:not([href])) {
	cursor: default;
}