@layer components {
	/* 矢印・外部リンクのアイコン */
	.ar { color: #fff; }
	.ex { color: var(--ink-faint); }

	/* セクションの見出し（デザイン .hd）。ラベルの罫線と h2 */
	.hd { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 26px; align-items: start; }
	.hd .no {
		font-size: 13px; font-weight: 500; color: var(--ink-faint); letter-spacing: .14em;
		padding-top: 10px; border-top: 1px solid var(--ink); display: block;
	}
	.hd h2 { font-size: 22px; letter-spacing: .05em; }
	.hd p { color: var(--ink-soft); font-size: 14.5px; margin-top: 14px; max-width: 56ch; }
	@media (min-width: 768px) {
		.hd { grid-template-columns: 76px 1fr; gap: 0 28px; margin-bottom: 48px; }
		.hd .no { padding-top: 14px; }
		.hd h2 { font-size: 29px; }
	}

	/* ボタン */
	.btn {
		display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--mint); color: #fff;
		padding: 17px 32px; font-size: 15px; font-weight: 500; letter-spacing: .05em; border: 1px solid var(--mint);
	}
	.btn:hover { background: var(--mint-deep); border-color: var(--mint-deep); }
	.btn.gh { background: #fff; color: var(--ink); border-color: var(--line-mid); }
	.btn.gh:hover { background: var(--mint-tint); }
	.btn.gh .ar { color: var(--mint); }
	.cta { display: flex; flex-direction: column; gap: 12px; }
	@media (min-width: 768px) { .cta { flex-direction: row; } .btn { justify-content: flex-start; } }

	/* 問い合わせ帯（所属の組合へ） */
	.band {
		background: var(--mint); color: #fff; padding: 34px 24px; display: flex; flex-direction: column; align-items: stretch; gap: 22px;
		position: relative; overflow: hidden;
	}
	.band > div, .band .btn { position: relative; }
	.band::before {
		content: ""; position: absolute; inset-block-start: -120px; inset-inline-end: -60px; width: 320px; height: 320px;
		border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
	}
	.band::after {
		content: ""; position: absolute; inset-block-start: -60px; inset-inline-end: 10px; width: 200px; height: 200px;
		border: 1px solid rgba(255, 255, 255, .16); border-radius: 50%;
	}
	.band h3 { font-size: 20px; letter-spacing: .05em; margin-bottom: 10px; }
	.band p { font-size: 13.5px; color: rgba(255, 255, 255, .9); }
	.band .btn { background: #fff; color: var(--mint); border-color: #fff; }
	.band .btn:hover { background: var(--mint-tint); }
	.band .btn .ar { color: var(--mint); }
	@media (min-width: 768px) {
		.band { flex-direction: row; align-items: center; gap: 40px; padding: 52px 56px; }
		.band h3 { font-size: 24px; }
		.band .btn { margin-inline-start: auto; flex: none; }
	}

	/* お知らせ・関連団体の行（デザイン .rows） */
	.rows { border-top: 1px solid var(--ink); }
	.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-block: 16px; border-bottom: 1px solid var(--line); }
	.rows .ix { font-size: 11.5px; font-weight: 500; letter-spacing: .16em; color: var(--ink-faint); flex: none; width: 22px; }
	.rows time { font-size: 13px; color: var(--ink-faint); font-variant-numeric: tabular-nums; letter-spacing: .06em; flex: none; width: 92px; }
	.rows .tt { font-size: 14.5px; flex-basis: 100%; }
	.rows .ex { margin-inline-start: auto; }
	.rows a.tt:hover { text-decoration: underline; text-underline-offset: .25em; }
	.rows .ix + .tt { flex-basis: auto; }
	@media (min-width: 768px) {
		.rows li { flex-wrap: nowrap; gap: 24px; padding-block: 20px; }
		.rows .ix { width: 28px; }
		.rows .tt { font-size: 15px; flex-basis: auto; }
	}
	.rows__more { margin-top: 28px; }

	/* 会員組合の2列罫線リスト（デザイン .mem） */
	.mem { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
	.mem li { border-bottom: 1px solid var(--line); }
	.mem li > a, .mem li > span.row { display: flex; align-items: center; gap: 12px; padding-block: 14px; font-size: 14px; }
	.mem .pr {
		font-size: 11.5px; font-weight: 500; letter-spacing: .1em; color: var(--mint); background: var(--mint-tint);
		padding: 3px 9px; min-width: 54px; text-align: center; flex: none;
	}
	.mem .ex { margin-inline-start: auto; }
	.mem a:hover .nm { text-decoration: underline; text-underline-offset: .25em; }
	@media (min-width: 768px) {
		.mem { grid-template-columns: 1fr 1fr; gap: 0 56px; }
		.mem li > a, .mem li > span.row { gap: 16px; padding-block: 17px; font-size: 15px; }
	}

	/* 下層ページの見出し（デザイン .phead） */
	.phead { border-bottom: 1px solid var(--line); padding-block: 26px 32px; background: var(--mint-wash); }
	.crumb { font-size: 12px; color: var(--ink-faint); margin-bottom: 16px; letter-spacing: .04em; }
	.crumb a:hover { text-decoration: underline; }
	.crumb .sep { margin-inline: 7px; }
	.phead h1 { font-size: 24px; letter-spacing: .06em; }
	.phead p { margin-top: 16px; color: var(--ink-soft); font-size: 14.5px; max-width: 60ch; }
	.note {
		font-size: 12px; color: var(--ink-faint); border-inline-start: 2px solid var(--mint-soft);
		padding-inline-start: 12px; margin-top: 20px; display: block;
	}
	@media (min-width: 768px) {
		.phead { padding-block: 44px 52px; }
		.phead h1 { font-size: 34px; }
	}

	.caution { border: 1px solid var(--line); padding: 26px 30px; font-size: 14px; color: var(--ink-soft); margin-top: 40px; background: #fff; }
	.caution b { display: block; color: var(--ink); font-weight: 700; margin-bottom: 6px; letter-spacing: .05em; }

	/* 支給待ちの仮表示。公開前に「支給待ち」で検索して残りを数える */
	.ph-wait {
		border: 2px dashed var(--wait-line); background: var(--wait-bg); color: var(--wait-ink);
		padding: 14px 18px; font-size: 14px; line-height: 1.7;
	}
	.ph-wait strong { font-weight: 700; letter-spacing: .08em; margin-inline-end: .6em; }
	.ph-wait--inline { display: inline-block; padding: 2px 10px; font-size: 13px; border-width: 1px; }
	.ph-wait--box { display: grid; place-items: center; text-align: center; height: 100%; min-height: 160px; }

	/* 本文（ブロックエディタ）の見出し。個人情報保護方針などで使う */
	.entry > * + * { margin-top: 1.2em; }
	.entry h2 { font-size: 22px; margin-top: 2.4em; padding-top: 14px; border-top: 1px solid var(--ink); }
	.entry h3 { font-size: 18px; margin-top: 2em; }
	.entry p { color: var(--ink-soft); }
	.entry ul { list-style: disc; padding-inline-start: 1.4em; }
	.entry ol { list-style: decimal; padding-inline-start: 1.6em; }
	.entry a { color: var(--mint); text-decoration: underline; text-underline-offset: .2em; }
	.entry img { height: auto; }
}