/*
Theme Name: SACS
Theme URI: https://sdgs.or.jp/
Description: 一般社団法人SDGs活動支援センターのテーマ。投稿と固定ページを出すことに絞った軽量テーマで、BizVektor には依存しない。
Author: SDGs活動支援センター
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL v2 or later
Text Domain: sacs
*/

/* ============================================================
   土台
   ============================================================ */

:root {
	--sacs-green: #125b43;
	--sacs-green-dark: #0e4735;
	--sacs-green-sub: #67a94b;
	--sacs-bg: #f7f8f3;
	--sacs-ink: #17231e;
	--sacs-muted: #5d6b64;
	--sacs-line: #dfe3da;
	--sacs-wrap: 1280px;
	--sacs-pad: 24px;
	--sacs-gothic: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: #fff;
	color: var(--sacs-ink);
	font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.9;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
}

img, video { max-width: 100%; height: auto; }
a { color: var(--sacs-green); }
a:hover { color: var(--sacs-green-dark); }

h1, h2, h3, h4, h5, h6 { line-height: 1.5; margin: 0 0 .6em; }

/* ============================================================
   レイアウト
   ============================================================ */

.sacs-wrap { max-width: var(--sacs-wrap); margin: 0 auto; padding: 0 var(--sacs-pad); }

.sacs-main { padding: 0 0 88px; }

.sacs-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
}

.sacs-columns--full { grid-template-columns: minmax(0, 1fr); }

/* ---- ページ見出し ---- */
.sacs-pagehead {
	background: var(--sacs-bg);
	border-bottom: 1px solid var(--sacs-line);
	padding: 40px 0;
}

.sacs-pagehead h1 { margin: 0; font-size: 30px; }

.sacs-breadcrumb {
	font-size: 12.5px;
	color: var(--sacs-muted);
	padding: 12px 0;
}

.sacs-breadcrumb a { color: var(--sacs-muted); text-decoration: none; }
.sacs-breadcrumb a:hover { text-decoration: underline; }
.sacs-breadcrumb span + span::before { content: " / "; margin: 0 .4em; color: #b6c0b8; }

/* ---- 記事本文 ---- */
.sacs-entry { margin: 0 0 56px; }
.sacs-entry__meta { font-size: 13px; color: var(--sacs-muted); margin-bottom: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
.sacs-entry__meta a { color: var(--sacs-muted); }

.sacs-content > * { margin-top: 0; margin-bottom: 1.4em; }
.sacs-content h2 {
	font-size: 23px; margin: 2em 0 .8em; padding-bottom: .4em;
	border-bottom: 2px solid var(--sacs-green);
}
.sacs-content h3 { font-size: 19px; margin: 1.8em 0 .7em; padding-left: .6em; border-left: 3px solid var(--sacs-green-sub); }
.sacs-content h4 { font-size: 17px; margin: 1.6em 0 .6em; }
.sacs-content ul, .sacs-content ol { padding-left: 1.6em; }
.sacs-content li { margin-bottom: .4em; }
/* max-width が無いと、本文に貼られた大きい画像がカラムから溢れる */
.sacs-content img { max-width: 100%; height: auto; }

/* ---- WordPress が本文に出す配置クラス ----
   エディタで指定した回り込み・中央寄せは、テーマ側に定義が無いと効かない。
   本サイトでは alignnone が186ページ、size-medium が117ページで使われている。 */
.sacs-content .alignnone { max-width: 100%; height: auto; }
.sacs-content .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.sacs-content .alignleft { float: left; margin: .3em 1.6em 1.1em 0; max-width: 50%; }
.sacs-content .alignright { float: right; margin: .3em 0 1.1em 1.6em; max-width: 50%; }

/* 回り込みを次の見出しへ持ち越さない */
.sacs-content h2, .sacs-content h3, .sacs-content h4 { clear: both; }

/* キャプション付き画像 */
.sacs-content .wp-caption { max-width: 100%; margin-bottom: 1.4em; }
.sacs-content .wp-caption img { display: block; }
.sacs-content .wp-caption-text {
	margin: 7px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--sacs-muted);
}

/* ギャラリー */
.sacs-content .gallery {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px; margin: 0 0 1.6em;
}
.sacs-content .gallery br { display: none; }
.sacs-content .gallery-item { margin: 0; }
.sacs-content .gallery-icon img { width: 100%; height: auto; display: block; }
.sacs-content .gallery-caption { font-size: 12px; color: var(--sacs-muted); }
/* 列が多い表は、カラム幅を超えた分だけ横スクロールさせる（67ページで table を使用） */
.sacs-content table {
	width: 100%; border-collapse: collapse;
	display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sacs-content table tbody, .sacs-content table thead { display: table; width: 100%; }
.sacs-content th, .sacs-content td { border: 1px solid var(--sacs-line); padding: 10px 14px; text-align: left; }
.sacs-content th { background: var(--sacs-bg); }
.sacs-content blockquote {
	margin: 1.6em 0; padding: 14px 20px; background: var(--sacs-bg);
	border-left: 3px solid var(--sacs-green-sub); color: var(--sacs-muted);
}
.sacs-content iframe { max-width: 100%; }

/* ---- 一覧 ---- */
.sacs-list { list-style: none; margin: 0; padding: 0; }
.sacs-list > li { border-bottom: 1px solid var(--sacs-line); }
.sacs-list > li:first-child { border-top: 1px solid var(--sacs-line); }

.sacs-list a {
	display: flex; align-items: center; gap: 18px; padding: 20px 6px;
	text-decoration: none; color: inherit; transition: background-color .16s;
}
.sacs-list a:hover { background: var(--sacs-bg); }
.sacs-list time { flex: 0 0 auto; font-size: 13px; color: var(--sacs-muted); font-variant-numeric: tabular-nums; }
.sacs-list__cat {
	flex: 0 0 auto; min-width: 88px; text-align: center; font-size: 11.5px; font-weight: 700;
	color: #fff; background: var(--sacs-green-sub); padding: 4px 9px; border-radius: 2px;
}
.sacs-list__t { flex: 1 1 auto; font-size: 15.5px; line-height: 1.6; }

/* ---- ページ送り ---- */
.sacs-pagination { margin-top: 44px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sacs-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--sacs-line); border-radius: 3px;
	text-decoration: none; color: var(--sacs-ink); font-size: 14px;
}
.sacs-pagination .page-numbers:hover { border-color: var(--sacs-green); color: var(--sacs-green); }
.sacs-pagination .page-numbers.current { background: var(--sacs-green); border-color: var(--sacs-green); color: #fff; }

/* ---- サイドバー ---- */
.sacs-side { font-size: 14px; }
.sacs-side .widget { margin-bottom: 34px; }
.sacs-side .widget-title,
.sacs-side h2 {
	font-size: 14px; letter-spacing: .04em; margin: 0 0 12px;
	padding-bottom: 9px; border-bottom: 2px solid var(--sacs-green);
}
.sacs-side ul { list-style: none; margin: 0; padding: 0; }
.sacs-side li { border-bottom: 1px solid var(--sacs-line); }
.sacs-side li a {
	display: block; margin: 0 -10px; padding: 9px 12px; border-radius: 4px;
	text-decoration: none; color: var(--sacs-ink);
	transition: color .18s, background-color .18s, box-shadow .18s;
}
/* 地色(#f7f8f3)は白地の上だとほぼ差が出ないので、緑みのある地色と左の線で反応を示す */
.sacs-side li a:hover,
.sacs-side li a:focus-visible {
	color: var(--sacs-green);
	background: rgba(18, 91, 67, .07);
	box-shadow: inset 3px 0 0 var(--sacs-green);
}
.sacs-side li a:focus-visible { outline: 2px solid var(--sacs-green); outline-offset: -2px; }
.sacs-side .search-field, .sacs-side input[type="search"], .sacs-side input[type="text"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--sacs-line); border-radius: 3px; font-size: 14px;
}

/* ---- 検索フォーム（WordPress 標準出力の search-form） ----
   標準出力は <label> が入力欄を包み、送信ボタンは label の外に出る。
   label を伸縮させて横一列に揃える。 */
.search-form {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.search-form label {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
}

.search-form .search-field {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--sacs-line);
	border-radius: 4px;
	background: #fff;
	color: var(--sacs-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	-webkit-appearance: none;
	appearance: none;
}

.search-form .search-field:focus {
	outline: none;
	border-color: var(--sacs-green);
	box-shadow: 0 0 0 2px rgba(18, 91, 67, .15);
}

.search-form .search-submit {
	flex: 0 0 auto;
	padding: 11px 18px;
	border: 1px solid var(--sacs-green);
	border-radius: 4px;
	background: var(--sacs-green);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color .18s, border-color .18s;
}

.search-form .search-submit:hover {
	background: var(--sacs-green-dark);
	border-color: var(--sacs-green-dark);
}

/* ---- 自サイトへのリンクカード（oEmbed の差し替え先） ---- */
.sacs-content p:has(> .sacs-linkcard) { margin: 0 0 14px; }
.sacs-linkcard {
	display: flex; align-items: center; gap: 18px;
	/* 下は 17 色ライン（4px）のぶん広げてある */
	padding: 20px 22px 24px;
	background: #fff; border: 1px solid var(--sacs-line); border-radius: 5px;
	text-decoration: none; color: var(--sacs-ink);
	transition: border-color .18s, box-shadow .18s;
	/* ::after の基準。角丸からラインがはみ出さないように切る */
	position: relative; overflow: hidden;
}

/*
 * SDGs 17 色のライン。
 * ファーストビュー直下の 17 色バー（.sacs-sdg）と同じ色を反復させて、
 * 「このサイトの色」として読ませる。
 *
 * 17 等分のハードストップなので、HTML を足さずに CSS だけで出せる。
 * 色は inc/sdg-goals.php の定義と同じ順・同じ値
 * （目標1 貧困をなくそう → 目標17 パートナーシップ）。
 * あちらを変えたときはここも合わせること。
 */
.sacs-linkcard::after {
	content: "";
	position: absolute; left: 0; right: 0; bottom: 0;
	height: 4px;
	background: linear-gradient(90deg,
		#e5243b 0 5.882%,
		#dda63a 5.882% 11.765%,
		#4c9f38 11.765% 17.647%,
		#c5192d 17.647% 23.529%,
		#ff3a21 23.529% 29.412%,
		#26bde2 29.412% 35.294%,
		#fcc30b 35.294% 41.176%,
		#a21942 41.176% 47.059%,
		#fd6925 47.059% 52.941%,
		#dd1367 52.941% 58.824%,
		#fd9d24 58.824% 64.706%,
		#bf8b2e 64.706% 70.588%,
		#3f7e44 70.588% 76.471%,
		#0a97d9 76.471% 82.353%,
		#56c02b 82.353% 88.235%,
		#00689d 88.235% 94.118%,
		#19486a 94.118% 100%);
}
.sacs-linkcard:hover {
	border-color: var(--sacs-green);
	box-shadow: 0 6px 18px rgba(23, 35, 30, .07);
}
.sacs-linkcard__img { flex: 0 0 72px; }
.sacs-linkcard__img img {
	width: 72px; height: 72px; object-fit: cover; border-radius: 3px; display: block;
}
.sacs-linkcard__body { flex: 1 1 auto; min-width: 0; }
.sacs-linkcard__t { display: block; font-size: 16px; font-weight: 700; line-height: 1.55; }
.sacs-linkcard__d {
	margin-top: 4px; font-size: 13px;
	line-height: 1.7; color: var(--sacs-muted);
	/* 長い説明でもカードの高さが暴れないよう 3 行で止める */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.sacs-linkcard__arw { flex: 0 0 auto; font-size: 18px; color: var(--sacs-green-sub); }
.sacs-linkcard:hover .sacs-linkcard__arw { color: var(--sacs-green); }

/* ---- スクロールで現れる要素 ----
   js-reveal は JS が動くときだけ立つ。付いていなければ常に表示されたまま。

   隠す側に :not(.is-revealed) を付けているのは詳細度のため。
   `.sacs-home-list > a` だけ要素セレクタを含んで詳細度が高く、
   `.is-revealed` を後から足しても勝てずに消えたままになる。 */
.js-reveal [data-reveal]:not(.is-revealed),
.js-reveal .sdgs-steps:not(.is-revealed),
.js-reveal .sacs-home-about__lead:not(.is-revealed),
.js-reveal .sacs-home-stat:not(.is-revealed),
.js-reveal .sacs-home-head:not(.is-revealed),
.js-reveal .sacs-home-card:not(.is-revealed),
.js-reveal .sacs-home-list > a:not(.is-revealed),
.js-reveal .sacs-mainbnr__item:not(.is-revealed) {
	opacity: 0;
	transform: translateY(18px);
}

/* 同じ並びの要素を少しずつ遅らせて、ぱらぱらと現れるようにする */
.js-reveal [data-reveal],
.js-reveal .sdgs-steps,
.js-reveal .sacs-home-about__lead,
.js-reveal .sacs-home-stat,
.js-reveal .sacs-home-head,
.js-reveal .sacs-home-card,
.js-reveal .sacs-home-list > a,
.js-reveal .sacs-mainbnr__item {
	transition:
		opacity .7s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-i, 0) * .07s),
		transform .7s cubic-bezier(.22, 1, .36, 1) calc(var(--reveal-i, 0) * .07s);
}

@media (prefers-reduced-motion: reduce) {
	.js-reveal [data-reveal],
	.js-reveal .sdgs-steps,
	.js-reveal .sacs-home-about__lead,
	.js-reveal .sacs-home-stat,
	.js-reveal .sacs-home-head,
	.js-reveal .sacs-home-card,
	.js-reveal .sacs-home-list > a,
	.js-reveal .sacs-mainbnr__item {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- ヒーローの上を通り過ぎていく塊 ----
   ヒーローが sticky で留まるので、こちらに地色を敷かないと透ける。 */
.sacs-below {
	position: relative;
	z-index: 1;
	background: #fff;
}

/* ---- トップのブロック（見出し・右寄せリンク・バナー画像） ---- */
.sacs-mainbnr { padding: 30px 0 0; background: #fff; }
/* 1つ目は17色バーの直下なので、他のセクションと同じだけ離す */
.sacs-mainbnr.sacs-mainbnr--first { padding-top: 64px; }
/* 見出しが空でもリンクは右に寄せる */
.sacs-mainbnr .sacs-home-head a { margin-left: auto; }
.sacs-mainbnr__inner {
	max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.sacs-mainbnr__item { display: block; border-radius: 5px; overflow: hidden; }
.sacs-mainbnr__item + .sacs-mainbnr__item { margin-top: 14px; }
.sacs-mainbnr__item img { display: block; width: 100%; height: auto; }
/* ホバーはヘッダーロゴと同じ。.sacs-mainbnr__item 自体の transition はスクロール表示用に
   上書きされる（0.7秒＋遅延）ので、中の画像に効かせる */
a.sacs-mainbnr__item img { transition: opacity .3s ease; }
a.sacs-mainbnr__item:hover img { opacity: .7; }

@media screen and (max-width: 900px) {
	.sacs-mainbnr { padding-top: 22px; }
}

/* ---- 五十音インデックス（団体リスト） ---- */
.sacs-kana-index {
	display: flex; flex-wrap: wrap; gap: 6px;
	margin: 0 0 34px; padding: 16px; border-radius: 4px; background: var(--sacs-bg);
	/* 画面上部に固定して、長い一覧をたどれるようにする。
	   ヘッダーも sticky なので、その高さ＋管理バーぶんだけ下げる */
	position: sticky;
	top: calc(var(--sacs-header-h, 84px) + var(--sacs-header-offset, 0px));
	z-index: 5;
}
.sacs-kana-index a {
	padding: 6px 13px; border-radius: 3px; background: #fff;
	border: 1px solid var(--sacs-line);
	font-size: 13px; font-weight: 700; color: var(--sacs-ink); text-decoration: none;
	transition: background-color .16s, border-color .16s, color .16s;
}
.sacs-kana-index a:hover {
	background: var(--sacs-green); border-color: var(--sacs-green); color: #fff;
}

.sacs-kana-head {
	display: flex; align-items: baseline; gap: 10px;
	margin: 40px 0 14px; padding-bottom: 9px;
	border-bottom: 2px solid var(--sacs-green);
	font-size: 19px; color: var(--sacs-green);
	/* インデックスが sticky なので、その下に隠れないよう余白を取る */
	scroll-margin-top: 78px;
}
.sacs-kana-head span {
	font-size: 12px; font-weight: 400; color: var(--sacs-muted);
}
.sacs-kana-head:first-of-type { margin-top: 0; }

/* ---- 会員一覧（マッピングページ） ---- */
.sacs-member-count { margin: 0 0 20px; font-size: 14px; color: var(--sacs-muted); }
.sacs-member-count strong { font-size: 22px; color: var(--sacs-green); margin-right: 2px; }

.sacs-member-list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 26px;
}
.sacs-member-list li {
	border-bottom: 1px solid var(--sacs-line);
	padding: 10px 2px; font-size: 14px; line-height: 1.6;
}
.sacs-member-list li a { color: var(--sacs-ink); text-decoration: none; }
.sacs-member-list li a:hover { color: var(--sacs-green); text-decoration: underline; }

/* ---- サイドバーの補強ブロック ---- */
.sacs-side-nav ul { list-style: none; margin: 0; padding: 0; }
.sacs-side-nav li { border-bottom: 1px solid var(--sacs-line); }
.sacs-side-nav li a {
	display: block; margin: 0 -10px; padding: 10px 12px; border-radius: 4px;
	text-decoration: none; color: var(--sacs-ink); font-size: 14px;
	transition: color .18s, background-color .18s, box-shadow .18s;
}
.sacs-side-nav li a:hover,
.sacs-side-nav li a:focus-visible {
	color: var(--sacs-green);
	background: rgba(18, 91, 67, .07);
	box-shadow: inset 3px 0 0 var(--sacs-green);
}
.sacs-side-nav li.is-current a {
	color: var(--sacs-green); font-weight: 700;
	/* 現在地の縦棒はカラム左端に揃えたいので、負のマージンだけ戻す */
	margin-left: 0; border-left: 3px solid var(--sacs-green); padding-left: 9px;
}

.sacs-side-main ul { list-style: none; margin: 0; padding: 0; }
.sacs-side-main li { border-bottom: 1px solid var(--sacs-line); }
.sacs-side-main li a {
	display: block; margin: 0 -10px; padding: 11px 12px; border-radius: 4px;
	text-decoration: none; color: var(--sacs-ink);
	transition: background-color .18s, box-shadow .18s;
}
.sacs-side-main li a strong {
	display: block; font-size: 14px; font-weight: 700;
	transition: color .18s;
}
.sacs-side-main li a span {
	display: block; margin-top: 3px; font-size: 11.5px;
	line-height: 1.7; color: var(--sacs-muted);
	transition: color .18s;
}
.sacs-side-main li a:hover,
.sacs-side-main li a:focus-visible {
	background: rgba(18, 91, 67, .07);
	box-shadow: inset 3px 0 0 var(--sacs-green);
}
.sacs-side-main li a:hover strong,
.sacs-side-main li a:focus-visible strong { color: var(--sacs-green); }
.sacs-side-main li a:hover span,
.sacs-side-main li a:focus-visible span { color: var(--sacs-ink); }
.sacs-side-main li.is-current a strong { color: var(--sacs-green); }
.sacs-side-main li.is-current { border-left: 3px solid var(--sacs-green); padding-left: 9px; }

.sacs-side-goals .sacs-sdg--tiles { flex-wrap: wrap; gap: 3px; }
.sacs-side-goals .sacs-sdg--tiles li { flex: 0 0 calc((100% - 15px) / 6); border-bottom: 0; }

.sacs-side-cta {
	background: var(--sacs-bg); border-radius: 4px; padding: 20px 18px;
}
.sacs-side-cta__t {
	margin: 0 0 8px; font-size: 15px; font-weight: 700;
	line-height: 1.6; color: var(--sacs-green);
}
.sacs-side-cta__d {
	margin: 0 0 14px; font-size: 12.5px; line-height: 1.8; color: var(--sacs-muted);
}
.sacs-side-cta .sacs-btn { width: 100%; }

/* ---- 汎用ボタン（ヘッダー・フッターと共用） ---- */
.sacs-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 11px 20px; border-radius: 4px; font-size: 14px; font-weight: 700;
	line-height: 1.2; text-decoration: none; white-space: nowrap;
	transition: background-color .18s, color .18s, border-color .18s;
}
.sacs-btn--ghost { color: var(--sacs-green); background: #fff; border: 1px solid var(--sacs-green); }
.sacs-btn--ghost:hover { background: var(--sacs-bg); color: var(--sacs-green); }
.sacs-btn--solid { color: #fff; background: var(--sacs-green); border: 1px solid var(--sacs-green); }
.sacs-btn--solid:hover { background: var(--sacs-green-dark); color: #fff; }

/* ---- 本文中の登録導線（会員登録について /touroku/ の末尾） ----
   一般会員（/formb/）と特別会員・賛助会員（/forma/）の 2 つを横に並べる。
   本文側は <p class="sacs-cta-row"> に .sacs-btn--lg を 2 つ置くだけ。 */
/* .sacs-btn は後読みの mega-menu.css にもあるので、クラスを重ねて詳細度で勝たせる */
.sacs-btn.sacs-btn--lg {
	padding: 17px 28px; font-size: 16px; line-height: 1.4;
	/* 会員種別の名前が長いので、狭い幅では折り返しを許す */
	white-space: normal; text-align: center;
}
.sacs-content .sacs-cta-row {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	margin: 2.2em 0 1.6em;
}
/* 2 つを同じ幅にそろえ、入りきらない幅では縦に積む */
.sacs-content .sacs-cta-row .sacs-btn { flex: 1 1 260px; max-width: 380px; }
@media screen and (max-width: 600px) {
	.sacs-content .sacs-cta-row .sacs-btn { flex-basis: 100%; max-width: none; }
	/* 「特別会員・賛助会員 登録フォームへ」が 1 行に収まるよう少し詰める */
	.sacs-btn.sacs-btn--lg { padding: 15px 16px; font-size: 15px; }
}

/* ---- アクセシビリティ ---- */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media screen and (max-width: 900px) {
	.sacs-columns { grid-template-columns: minmax(0, 1fr); gap: 44px; }
	.sacs-main { padding: 0 0 56px; }
	.sacs-pagehead { padding: 28px 0; }
	.sacs-pagehead h1 { font-size: 23px; }
	.sacs-content h2 { font-size: 20px; }
	.sacs-list a { flex-wrap: wrap; gap: 8px 12px; padding: 16px 4px; }
	.sacs-list__t { flex: 1 0 100%; order: 3; }
}


/* ---- 会員種類・年会費の表 ---- */

/*
 * 11 列あるので、狭い画面でははみ出したぶんだけ表の内側をスクロールさせる。
 * ページ全体が横に動かないようにするのが目的。
 * 右端のグラデーションは「まだ続きがある」ことを示す影。
 */
/* 表を画像で出す場合。縮めすぎると 11 列が読めないので、
   940px を下限にして狭い画面では枠内スクロールに任せる */
.sacs-plan-img {
	display: block;
	width: 100%;
	min-width: 940px;
	height: auto;
}

.sacs-plan-scroll {
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
	/*
	 * overflow-x だけでは、中の表（min-width 940px）の幅が祖先まで伝わって
	 * 文書全体を広げてしまう（スマホで 932px になっていた）。
	 * contain: paint で描画をこの枠に閉じ込め、外への伝播を止める。
	 */
	contain: paint;
	background:
		linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center,
		linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 70%) right center,
		radial-gradient(farthest-side at 0 50%, rgba(23, 35, 30, .13), rgba(0, 0, 0, 0)) left center,
		radial-gradient(farthest-side at 100% 50%, rgba(23, 35, 30, .13), rgba(0, 0, 0, 0)) right center;
	background-repeat: no-repeat;
	background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/*
 * 罫線で全セルを囲むと線が主役になってしまうので、
 * 行の区切りだけを細線で示し、会員種類の切れ目を太らせて
 * 3 グループが読み取れるようにする。
 */
.sacs-plan {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	min-width: 940px;   /* これ以下は文字が潰れるのでスクロールへ切り替える */
	font-size: 13px;
	background: #fff;
}
.sacs-plan caption {
	caption-side: top; text-align: left; padding: 0 0 10px;
	font-size: 12px; color: var(--sacs-muted);
}
.sacs-plan th,
.sacs-plan td {
	padding: 12px 10px;
	text-align: center; vertical-align: middle;
}
.sacs-plan thead th {
	background: var(--sacs-bg);
	font-size: 11.5px; font-weight: 700; line-height: 1.5;
	color: var(--sacs-green);
	border-bottom: 2px solid var(--sacs-green);
}
/* 1 段目（会員種類・対象…とサービス内容の親見出し）は細線で受ける */
.sacs-plan thead tr:first-child th {
	border-bottom: 1px solid var(--sacs-line);
}
.sacs-plan tbody th {
	background: #fcfdfb; font-weight: 700; text-align: center; white-space: nowrap;
}
.sacs-plan tbody tr + tr td,
.sacs-plan tbody tr + tr th {
	border-top: 1px solid #eef1ec;
}
.sacs-plan tbody tr:hover td {
	background: #fafbf8;
}
.sacs-plan .is-target { text-align: left; font-weight: 400; white-space: normal; }
.sacs-plan .is-fee { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sacs-plan .yes { color: var(--sacs-green); font-weight: 700; }
.sacs-plan .no { color: #c3cbc4; }
.sacs-plan .buy { font-size: 11.5px; color: var(--sacs-muted); white-space: nowrap; }
/* 会員種類ごとの区切り。3 グループが読み取れるように太らせる */
.sacs-plan tbody tr.group-start > * { border-top: 2px solid var(--sacs-line); }

/* 「○ / −」の意味を読み上げに渡すための画面外テキスト */
.sacs-plan .sr {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media screen and (max-width: 600px) {
	.sacs-plan { font-size: 12px; }
	.sacs-plan th, .sacs-plan td { padding: 8px 9px; }
}

/* 本文が空のセクション親ページに出す窓口カード */
.sacs-section-cards {
	display: grid;
	gap: 12px;
	margin-top: 24px;
}