@charset "UTF-8";
/*
 * 追加スタイル
 *
 * 共通パーツに属さない、ページ横断の追加指定をここにまとめる。
 * 読み込みは共通パーツの後。
 */

/* 読み上げ専用テキスト（画面には出さず、支援技術にだけ読ませる） */
.u-visually-hidden {
	position: absolute;
	width: var(--border-thin);
	height: var(--border-thin);
	margin: calc(var(--border-thin) * -1);
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * <button> に対する継承の補正。
 *
 * 🚨 **`<button>` は `line-height` を継承しない。**
 * `body { line-height: 1 }` は `<a>` には効くが、
 * `<button>` にはブラウザ既定の `line-height: normal` が当たる。
 * `font-family` / `font-size` と同じく明示的に継承させる。
 *
 * 既存テーマに `<button>` は1つも無く、このテーマの `<button>` はすべて
 * `<a>` を置き換えたものなので、継承させれば想定どおりの見た目に戻る。
 */
button {
	line-height: inherit;
}

/*
 * ボタンの既定スタイルを打ち消す。
 *
 * 🚨 `padding: 0` と `display: block` を書いてはいけない。
 * このファイルは parts/header.css より**後**に読まれるため、
 * `.m-header-gnav-closer .m-icon-hamburger`（幅・高さ・padding）を打ち消してしまう。
 * 打ち消すのは「枠線・背景・書体」だけにとどめる。
 */
.m-icon-hamburger {
	background: none;
	border: 0;
	cursor: pointer;
	appearance: none;
}

/*
 * 🚨 **`<button>` は中身を上下中央に寄せる。**
 * ブラウザが中身を高さの真ん中に置くため、`<a>` より下にずれる。
 * `display: block` や `align-items` では直らず、
 * **縦方向の flex** にすると `<a>` と同じ位置になる。
 *
 * ※ MENU の文字（::after）は position: absolute なので影響を受けない。
 */
.m-header-gnav-closer .m-icon-hamburger {
	display: flex;
	flex-direction: column;
}

/*
 * 🚨 読み上げ用のテキストを `display: none` にしない。
 * `.m-icon-hamburger span { display: none }`（アイコン用に span を隠す指定）が
 * 読み上げ用の span にも当たるため、クラス指定で上書きする。
 * 画面には出さず、読み上げだけ効かせる。
 */
.m-icon-hamburger .u-visually-hidden {
	display: block;
}

/* キーボード操作時のフォーカスを見えるようにする */
a:focus-visible,
button:focus-visible {
	outline: var(--border-focus) solid var(--color-focus);
	outline-offset: var(--border-focus);
}

/* ------------------------------------------------------------------
 * 番号ページャ
 *
 * ★色・角丸はサイト内のボタン（var(--color-red) / 3px）に合わせる。
 * ---------------------------------------------------------------- */

.m-pager {
	/* ★タップ領域の一辺。
	   アクセシビリティの下限 44px を優先する。 */
	--pager-size: var(--tap-min);
	margin-top: var(--space-16);
}

.m-pager-list {
	flex-wrap: wrap;
	gap: var(--space-6);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 数字・前へ・次へ・… の共通の形 */
.m-pager .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: var(--pager-size);
	min-height: var(--pager-size);
	padding: 0 var(--space-8);
	border: var(--border-thin) solid var(--color-red);
	border-radius: var(--radius-s);
	color: var(--color-red);
	line-height: 1.2;
	text-decoration: none;
}

.m-pager a.page-numbers:hover,
.m-pager a.page-numbers:focus-visible {
	background: var(--color-red);
	color: var(--color-bg);
	opacity: 1;
}

/* 表示中のページ */
.m-pager .page-numbers.current {
	background: var(--color-red);
	border-color: var(--color-red);
	color: var(--color-bg);
	font-weight: 700;
}

/* 省略記号はボタンにしない */
.m-pager .page-numbers.dots {
	border-color: transparent;
	color: var(--color-gray-500);
	min-width: 0;
	padding: 0 var(--space-4);
}

/* 前へ／次へ は文字が入るぶん横に広く */
.m-pager .prev.page-numbers,
.m-pager .next.page-numbers {
	padding: 0 var(--space-12);
}

@media screen and (min-width: 751px) {
	.m-pager {
		margin-top: var(--space-32);
	}

	.m-pager-list {
		gap: var(--space-8);
	}

	.m-pager .page-numbers {
		min-width: var(--pager-size);
		min-height: var(--pager-size);
		padding: 0 var(--space-10);
	}

	.m-pager .page-numbers.dots {
		min-width: 0;
		padding: 0 var(--space-4);
	}

	.m-pager .prev.page-numbers,
	.m-pager .next.page-numbers {
		padding: 0 var(--space-16);
	}
}


/* ------------------------------------------------------------------
 * ニュース見出しの行数を2行までにする
 * ------------------------------------------------------------------ */
/*
 * トップ・ニュース一覧とも、2行を超えた分は「…」で省略する。
 *
 * ★書き方はサイト内の既存指定（`.m-crew-story-list-title`）に合わせている。
 *
 * 🚨 タイトル全文は `<a>` の中のテキストとしてHTMLに残るため、
 * 検索エンジンにも読み上げにも全文が渡る。見た目だけを詰めている。
 */
/*
 * 🚨 **`.m-article-item` 全部に掛けてはいけない。**
 * このクラスは事業内容のサービス説明にも使われており、
 * 全部に掛けると説明文まで2行で切れてしまう。
 *
 * ニュースの見出しは `<dl>` の中（`dt`＝日付、`dd`＝見出し）にあり、
 * サービス説明は `<div>` の中にある。**`dl` の中のものだけ**に限定する。
 */
dl > .m-article-item {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}