/* メディア（/staging/media/、WordPress テーマ syncs-media）。共通の site.css（sa- 接頭辞）の色・書体・部品を使い、メディア固有の部分だけを m- 接頭辞で足す */

/* ---------- 共通の小部品 ---------- */
.m-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; line-height: 1.5; color: var(--sa-mute); }
.m-meta time { font-family: var(--sa-font-en); font-size: 14px; letter-spacing: .04em; color: var(--sa-ink); }
.m-cat { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px; color: var(--sa-ink); border: 1px solid var(--sa-ink); border-radius: 30px; transition: background var(--sa-hover) var(--sa-ease), border-color var(--sa-hover) var(--sa-ease); }
a.m-cat:hover { background: var(--sa-lime); border-color: var(--sa-lime); }
.m-sample { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 11px; letter-spacing: .04em; color: var(--sa-mute); background: var(--sa-bg); border-radius: var(--sa-radius); }
.m-notice { position: relative; max-width: 760px; margin-top: 28px; padding: 14px 18px 14px 40px; font-size: 13px; line-height: 1.8; color: var(--sa-mute); background: var(--sa-white); border-left: 3px solid var(--sa-lime); border-radius: var(--sa-radius); }
.m-notice::before { content: "i"; position: absolute; left: 14px; top: 15px; width: 16px; height: 16px; border-radius: 50%; background: var(--sa-green); color: var(--sa-white); font-family: var(--sa-font-en); font-size: 11px; font-weight: 600; line-height: 16px; text-align: center; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.m-card__link { display: flex; flex-direction: column; height: 100%; }
.m-card__img { aspect-ratio: 16 / 10; }
.m-card__link:hover .m-card__title { color: var(--sa-green); }
.m-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 18px; }

.m-paging { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: var(--sa-space-2); }
.m-paging .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; font-family: var(--sa-font-en); font-size: 15px; background: var(--sa-bg); border-radius: var(--sa-radius); transition: background var(--sa-hover) var(--sa-ease); }
.m-paging a.page-numbers:hover { background: var(--sa-lime); }
.m-paging .page-numbers.current { background: var(--sa-ink); color: var(--sa-white); }
.m-paging .page-numbers.dots { background: none; }
.m-paging__prev, .m-paging__next { width: 8px; height: 8px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(-45deg); }
.m-paging__next { transform: rotate(135deg); }

/* 画像が無い記事のアイキャッチ（抽象図形） */
.m-art { position: absolute; inset: 0; overflow: hidden; background: var(--sa-white); }
.m-art__orb { position: absolute; width: 58%; aspect-ratio: 1; right: -8%; top: -18%; border-radius: 50%; background: var(--sa-grad); }
.m-art__ring { position: absolute; width: 46%; aspect-ratio: 1; left: 10%; bottom: -26%; border-radius: 50%; border: 1.5px solid rgba(49, 149, 40, .45); }
.m-art__dots { position: absolute; left: 8%; top: 12%; width: 30%; height: 30%; background-image: radial-gradient(rgba(34, 34, 34, .25) 1.4px, transparent 1.6px); background-size: 14px 14px; }
.m-art__label { position: absolute; left: 7%; bottom: 10%; font-family: var(--sa-font-en); font-weight: 500; font-size: clamp(20px, 2.4vw, 40px); line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.m-art--1 { background: var(--sa-bg); }
.m-art--1 .m-art__orb { left: -10%; right: auto; top: auto; bottom: -30%; width: 64%; }
.m-art--1 .m-art__label { left: auto; right: 7%; }
.m-art--2 { background: var(--sa-ink); }
.m-art--2 .m-art__label { color: var(--sa-white); }
.m-art--2 .m-art__ring { border-color: rgba(188, 211, 49, .7); }
.m-art--2 .m-art__dots { background-image: radial-gradient(rgba(254, 255, 252, .45) 1.4px, transparent 1.6px); }
.m-art--3 .m-art__orb { width: 40%; right: 12%; top: 18%; }

/* 本文 */
.m-body { font-size: 16px; line-height: 2; letter-spacing: .02em; }
.m-body h2 { margin-top: 3em; padding: .75em 1em .75em 1.1em; background: var(--sa-bg); border-left: 4px solid var(--sa-green); border-radius: var(--sa-radius); font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 1.55; scroll-margin-top: calc(var(--sa-header-h) + 24px); }
.m-body h3 { position: relative; margin-top: 2.4em; padding: 0 0 .5em .1em; border-bottom: 1px solid var(--sa-line); font-size: clamp(18px, 1.4vw, 20px); font-weight: 700; line-height: 1.6; scroll-margin-top: calc(var(--sa-header-h) + 24px); }
.m-body h3::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 2px; background: var(--sa-grad); }
.m-body h4 { margin-top: 2em; padding-left: 18px; position: relative; font-size: 17px; font-weight: 700; }
.m-body h4::before { content: ""; position: absolute; left: 0; top: .65em; width: 8px; height: 8px; border-radius: 50%; background: var(--sa-grad); }
.m-body blockquote { position: relative; margin: 0; padding: 22px 24px 22px 60px; background: var(--sa-bg); border-radius: var(--sa-radius); color: var(--sa-mute); }
.m-body blockquote::before { content: "\201C"; position: absolute; left: 20px; top: 8px; font-family: var(--sa-font-en); font-size: 48px; line-height: 1; color: var(--sa-green); }
.m-body blockquote p { margin: 0; }
.m-body blockquote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; }
.m-body > * + * { margin-top: 1.6em; }
.m-body h2 + *, .m-body h3 + * { margin-top: 1.1em; }
.m-body strong { font-weight: 700; background: linear-gradient(transparent 62%, rgba(188, 211, 49, .45) 62%); }
.m-body a { color: var(--sa-green); text-decoration: underline; text-underline-offset: 3px; }
.m-body ul, .m-body ol { padding: 22px 26px; background: var(--sa-bg); border-radius: var(--sa-radius); }
.m-body li { position: relative; padding-left: 1.5em; line-height: 1.9; }
.m-body li + li { margin-top: .55em; }
.m-body ul li::before { content: ""; position: absolute; left: .2em; top: .8em; width: 7px; height: 7px; border-radius: 50%; background: var(--sa-green); }
.m-body ol { counter-reset: li; }
.m-body ol li { counter-increment: li; padding-left: 2.1em; }
.m-body ol li::before { content: counter(li); position: absolute; left: 0; top: .25em; width: 1.6em; height: 1.6em; border-radius: var(--sa-radius); background: var(--sa-ink); color: var(--sa-white); font-family: var(--sa-font-en); font-weight: 500; font-size: 13px; line-height: 1.6em; text-align: center; }
.m-box { padding: 26px 30px; background: var(--sa-white); border: 1px solid var(--sa-green); border-radius: var(--sa-radius); }
.m-box__title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; line-height: 1.6; }
.m-box__title::before { content: "POINT"; flex: none; padding: 2px 10px; background: var(--sa-green); color: var(--sa-white); font-family: var(--sa-font-en); font-size: 11px; font-weight: 600; letter-spacing: .1em; border-radius: var(--sa-radius); }
.m-box--memo { border-color: var(--sa-line); background: var(--sa-bg); }
.m-box--memo .m-box__title::before { content: "MEMO"; background: var(--sa-ink); }
.m-box--check .m-box__title::before { content: "CHECK"; background: var(--sa-lime); color: var(--sa-ink); }
.m-box > :not(.m-box__title) { margin-top: 12px; font-size: 15px; line-height: 2; }
.m-body img { max-width: 100%; height: auto; border-radius: var(--sa-radius); }
.m-body figcaption { margin-top: 8px; font-size: 13px; color: var(--sa-mute); text-align: center; }
.m-body .wp-block-table { overflow-x: auto; }
.m-body table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.8; }
.m-body th, .m-body td { padding: 10px 14px; border: 1px solid var(--sa-line); text-align: left; vertical-align: top; }
.m-body thead th, .m-body tr:first-child th { background: var(--sa-ink); color: var(--sa-white); border-color: var(--sa-ink); }
.m-body th { background: var(--sa-bg); font-weight: 700; }
.m-body tbody tr:nth-child(even) td { background: rgba(239, 240, 238, .5); }
.m-body .has-text-align-center { text-align: center; }
.m-body .aligncenter { margin-left: auto; margin-right: auto; }
.m-head__title, .m-card__title, .m-featured__title, .m-body { overflow-wrap: anywhere; }

/* 記事末の問い合わせ導線 */
.m-cta__text { font-size: 14px; line-height: 1.9; color: rgba(254, 255, 252, .75); }
.m-cta .sa-btn { margin-top: 10px; }

/* 前後の記事 */
.m-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: var(--sa-space-2); background: var(--sa-line); border: 1px solid var(--sa-line); }
.m-pager > span { background: var(--sa-white); }
.m-pager__link { display: grid; gap: 6px; padding: 20px 22px; background: var(--sa-white); transition: background var(--sa-hover) var(--sa-ease); }
.m-pager__link:hover { background: var(--sa-bg); }
.m-pager__link--next { text-align: right; }
.m-pager__dir { font-family: var(--sa-font-en); font-size: 12px; letter-spacing: .08em; color: var(--sa-green); }
.m-pager__title { font-size: 14px; font-weight: 700; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


/* ---------- ページの骨組み（共通ヘッダーの下に、見出し → カテゴリのタブ → 本文＋サイドバー） ---------- */
.m-page { padding-top: var(--sa-header-h); padding-bottom: var(--sa-space-1); }
.m-crumb { margin-bottom: 14px; }
.m-crumb__title { display: inline-block; max-width: 32em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.m-mhead { padding: clamp(24px, 3vw, 44px) 0 clamp(20px, 2.4vw, 32px); }
.m-mhead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.m-mhead__title { margin-top: 8px; font-size: clamp(24px, 2.3vw, 34px); font-weight: 700; line-height: 1.45; letter-spacing: -.01em; overflow-wrap: anywhere; }
.m-mhead__lead { max-width: 760px; margin-top: 8px; font-size: 14px; line-height: 1.9; color: var(--sa-mute); }
.m-count { flex: none; font-size: 14px; color: var(--sa-mute); }
.m-count b { margin-right: 4px; font-family: var(--sa-font-en); font-size: 32px; font-weight: 500; line-height: 1; color: var(--sa-ink); }
.m-posthead { padding-top: 22px; padding-bottom: 14px; }
.m-posthead .m-crumb { margin-bottom: 0; }

/* メディア専用のタイトル帯（名前のロゴ＋運営元＋カテゴリのタブ） */
.m-brand { background: var(--sa-white); border-bottom: 1px solid var(--sa-line); }
.m-brand__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding: clamp(18px, 2vw, 26px) 0; }
.m-brand__home { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; }
.m-brand__by { padding: 0 0 4px 18px; border-left: 1px solid var(--sa-line); font-family: var(--sa-font-en); font-size: 12px; font-weight: 500; letter-spacing: .12em; line-height: 1.4; color: var(--sa-mute); }
.m-brand__desc { max-width: 34em; font-size: 13px; line-height: 1.8; color: var(--sa-mute); }
.m-wordmark { display: inline-flex; align-items: center; gap: 14px; margin: 0; color: var(--sa-ink); font-weight: 700; }
.m-wordmark__mark { position: relative; flex: none; width: 44px; height: 44px; border-radius: var(--sa-radius); background: var(--sa-grad); }
.m-wordmark__mark::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--sa-white); border-radius: 50%; }
.m-wordmark__mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--sa-white); }
.m-wordmark__text { display: grid; gap: 2px; padding-left: 14px; border-left: 1px solid var(--sa-ink); }
.m-wordmark__ax { font-size: 13px; font-weight: 500; letter-spacing: .14em; line-height: 1.3; }
.m-wordmark__lab { font-size: clamp(22px, 1.9vw, 27px); font-weight: 700; letter-spacing: .24em; line-height: 1.25; }
.m-wordmark--sm .m-wordmark__mark { width: 34px; height: 34px; }
.m-wordmark--sm .m-wordmark__mark::before { inset: 7px; }
.m-wordmark--sm .m-wordmark__text { padding-left: 11px; }
.m-wordmark--sm .m-wordmark__ax { font-size: 11px; }
.m-wordmark--sm .m-wordmark__lab { font-size: 19px; }
.m-profile__org { font-size: 12px; color: var(--sa-mute); }
.m-subnav { border-top: 1px solid var(--sa-line); }
.m-subnav__list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--sa-offset)); padding: 0 var(--sa-offset); }
.m-subnav__list::-webkit-scrollbar { display: none; }
.m-subnav__list li { flex: none; }
.m-subnav__link { position: relative; display: block; padding: 15px 18px 14px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--sa-mute); white-space: nowrap; transition: color var(--sa-hover) var(--sa-ease); }
.m-subnav__link::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--sa-grad); transform: scaleX(0); transition: transform var(--sa-hover) var(--sa-ease); }
.m-subnav__link:hover { color: var(--sa-ink); }
.m-subnav__link:hover::after { transform: scaleX(.5); }
.m-subnav__link[aria-current] { color: var(--sa-ink); font-weight: 700; }
.m-subnav__link[aria-current]::after { transform: none; }

.m-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(24px, 2.8vw, 40px); padding-top: clamp(20px, 2.4vw, 32px); }
.m-main { min-width: 0; display: grid; gap: clamp(20px, 2vw, 28px); align-content: start; }
.m-block { min-width: 0; padding: clamp(20px, 2.4vw, 36px); background: var(--sa-white); border-radius: var(--sa-radius); }
.m-block__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; margin-bottom: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--sa-ink); }
.m-block__title { display: grid; gap: 2px; font-size: clamp(19px, 1.5vw, 22px); font-weight: 700; line-height: 1.5; }
.m-block__en { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sa-font-en); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sa-green); }
.m-block__en::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sa-grad); }
.m-block__note { font-size: 13px; color: var(--sa-mute); }
.m-block__more { font-size: 14px; gap: 10px; }
.m-block__more .sa-arrow { width: 30px; height: 30px; }
.m-notice { margin: 0 0 24px; }

/* ---------- トップのファーストビュー ---------- */
.m-fvwrap { padding-top: clamp(20px, 2.4vw, 32px); }
.m-fv { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); }
.m-fv__main, .m-fv__sub { position: relative; display: block; overflow: hidden; border-radius: var(--sa-radius); color: var(--sa-white); }
.m-fv__img { aspect-ratio: 16 / 9; }
.m-fv__body, .m-fv__subbody { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(20px, 2.6vw, 40px); background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, .62) 38%, rgba(34, 34, 34, .9) 100%); }
.m-fv__subbody { padding: 48px 20px 18px; }
.m-fv__label { display: inline-flex; margin-bottom: 12px; padding: 3px 12px; background: var(--sa-lime); color: var(--sa-ink); font-family: var(--sa-font-en); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--sa-radius); }
.m-fv .m-meta, .m-fv .m-meta time { color: rgba(254, 255, 252, .85); }
.m-fv .m-cat { color: var(--sa-white); border-color: rgba(254, 255, 252, .7); }
.m-fv .m-sample { background: rgba(254, 255, 252, .9); }
.m-fv__title { margin-top: 12px; max-width: 30em; font-size: clamp(20px, 2vw, 30px); font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.m-fv__excerpt { max-width: 46em; margin-top: 10px; font-size: 14px; line-height: 1.85; color: rgba(254, 255, 252, .82); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-fv__subs { display: grid; grid-template-rows: 1fr 1fr; gap: clamp(12px, 1.4vw, 20px); }
.m-fv__subs li { position: relative; min-height: 0; }
.m-fv__sub { height: 100%; }
.m-fv__subimg { position: absolute; inset: 0; }
.m-fv__subtitle { margin-top: 8px; font-size: 15px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-fv__main .sa-img img, .m-fv__sub .sa-img img { transition: transform 1.6s var(--sa-ease-out); }
.m-fv__main:hover .m-fv__title, .m-fv__sub:hover .m-fv__subtitle { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 記事カード（一覧） ---------- */
.m-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(14px, 1.6vw, 24px); }
.m-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.m-card__body { display: flex; flex-direction: column; flex: 1; padding: 14px 2px 0; }
.m-card__title { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--sa-hover) var(--sa-ease); }
.m-card__excerpt { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--sa-mute); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-card__foot { padding-top: 12px; }
.m-card__foot:not(:has(.m-sample)) { display: none; }
.m-card__foot .sa-arrow { display: none; }
.m-card .m-meta { gap: 6px 10px; font-size: 12px; }
.m-card .m-meta time { font-size: 13px; }
.m-paging { margin-top: 40px; }

/* 横長の小さいカード */
.m-row__link { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; align-items: start; }
.m-row__img { aspect-ratio: 16 / 10; }
.m-row__title { font-size: 15px; font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--sa-hover) var(--sa-ease); }
.m-row__link:hover .m-row__title, .m-card__link:hover .m-card__title { color: var(--sa-green); }
.m-row .m-meta { margin-top: 6px; }
.m-row .m-meta time { font-size: 13px; }
.m-catblocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2vw, 28px); }
.m-catblocks:empty { display: none; }
.m-catblock__list { display: grid; gap: 16px; }
.m-catblock__list .m-row__link { grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }

/* 記事がないとき */
.m-empty { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; text-align: center; background: var(--sa-bg); border-radius: var(--sa-radius); }
.m-empty__title { font-size: 18px; font-weight: 700; }
.m-empty__text { max-width: 36em; font-size: 14px; line-height: 1.9; color: var(--sa-mute); }
.m-empty__search { width: 100%; max-width: 440px; margin: 8px 0; }
.m-searchbar { margin-bottom: 28px; }

/* ---------- 検索フォーム ---------- */
.m-search { display: flex; }
.m-search__input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; font: inherit; font-size: 14px; color: var(--sa-ink); background: var(--sa-white); border: 1px solid var(--sa-line); border-right: 0; border-radius: var(--sa-radius) 0 0 var(--sa-radius); -webkit-appearance: none; appearance: none; }
.m-search__input:focus { outline: none; border-color: var(--sa-green); }
.m-search__btn { flex: none; display: grid; place-items: center; width: 48px; height: 48px; background: var(--sa-ink); color: var(--sa-white); border-radius: 0 var(--sa-radius) var(--sa-radius) 0; transition: background var(--sa-hover) var(--sa-ease); }
.m-search__btn:hover { background: var(--sa-green); }
.m-search__icon { position: relative; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; transform: translate(-1px, -1px); }
.m-search__icon::after { content: ""; position: absolute; right: -6px; bottom: -4px; width: 7px; height: 2px; background: currentColor; transform: rotate(45deg); }

/* ---------- サイドバー ---------- */
.m-sidebar { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.m-sidebar__main, .m-sidebar__follow { display: grid; gap: 20px; align-content: start; }
.m-sidebar__follow { position: sticky; top: calc(var(--sa-header-h) + 16px); }
.m-sidebar__follow:empty { display: none; }
.m-widget { min-width: 0; padding: 24px; background: var(--sa-white); border-radius: var(--sa-radius); font-size: 14px; line-height: 1.8; }
.m-widget__title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--sa-ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.m-widget__title::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sa-grad); }
.m-widget--search { padding: 16px; }
.m-widget--search .m-search__input { background: var(--sa-bg); border-color: var(--sa-bg); }
.m-widget--contact { padding: 0; background: none; }
.m-widget ul, .m-widget ol { margin: 0; padding: 0; list-style: none; }
.m-widget.widget_categories li, .m-widget.widget_archive li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--sa-line); color: var(--sa-mute); font-family: var(--sa-font-en); font-size: 13px; }
.m-widget.widget_categories li a, .m-widget.widget_archive li a { position: relative; flex: 1; padding-left: 16px; font-family: var(--sa-font); font-size: 14px; color: var(--sa-ink); transition: color var(--sa-hover) var(--sa-ease); }
.m-widget.widget_categories li a::before, .m-widget.widget_archive li a::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 6px; border-top: 1.5px solid var(--sa-green); border-right: 1.5px solid var(--sa-green); transform: rotate(45deg); }
.m-widget.widget_categories li a:hover { color: var(--sa-green); }
.m-widget .children { display: none; }
.m-widget .tagcloud, .m-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.m-widget .tagcloud a, .m-tag { display: inline-flex; align-items: center; padding: 4px 12px; font-size: 13px !important; line-height: 1.6; background: var(--sa-bg); border-radius: 30px; transition: background var(--sa-hover) var(--sa-ease); }
.m-widget .tagcloud a::before, .m-tag::before { content: "#"; margin-right: 2px; color: var(--sa-green); }
.m-widget .tagcloud a:hover, .m-tag:hover { background: var(--sa-lime); }
.m-rank { display: grid; gap: 16px; counter-reset: rank; }
.m-rank > li { counter-increment: rank; }
.m-row--side .m-row__link { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
.m-row--side .m-row__img::before { content: counter(rank); position: absolute; left: 0; top: 0; z-index: 3; width: 22px; height: 22px; background: var(--sa-ink); color: var(--sa-white); font-family: var(--sa-font-en); font-size: 12px; line-height: 22px; text-align: center; }
.m-row--side .m-row__title { font-size: 13px; line-height: 1.6; }
.m-row--side .m-meta { margin-top: 4px; }
.m-row--side .m-meta time { font-size: 12px; }
.m-profile { display: grid; gap: 10px; }
.m-profile__logo { width: 170px; height: auto; }
.m-profile__name { margin-top: 4px; font-weight: 700; }
.m-profile__text { font-size: 13px; line-height: 1.9; color: var(--sa-mute); }
.m-profile__links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 4px; }
.m-profile__links .sa-link { gap: 8px; font-size: 13px; }
.m-profile__links .sa-arrow { width: 26px; height: 26px; }
.m-banner { display: grid; gap: 10px; padding: 26px 24px; border-radius: var(--sa-radius); }
.m-banner__title { font-size: 18px; font-weight: 700; line-height: 1.5; }
.m-banner__text { font-size: 13px; line-height: 1.85; color: rgba(254, 255, 252, .75); }
.m-banner__btn { justify-content: space-between; width: 100%; margin-top: 6px; min-height: 52px; }
.m-widget--toc .m-toc__list { margin-top: 0; max-height: calc(100vh - var(--sa-header-h) - 300px); overflow-y: auto; }

/* ---------- 記事 ---------- */
.m-article { min-width: 0; padding: clamp(20px, 3.6vw, 52px); background: var(--sa-white); border-radius: var(--sa-radius); }
.m-article__head { display: grid; gap: 14px; }
.m-article__title { font-size: clamp(23px, 2.2vw, 32px); font-weight: 700; line-height: 1.5; letter-spacing: -.01em; overflow-wrap: anywhere; }
.m-article__dates { gap: 6px 18px; }
.m-date { display: inline-flex; align-items: center; gap: 6px; }
.m-date__label { font-size: 12px; color: var(--sa-mute); }
.m-date--mod time { color: var(--sa-mute); }
.m-read { font-size: 12px; }
.m-eyecatch { margin-top: 28px; aspect-ratio: 16 / 9; }
.m-notice--post { margin: 24px 0 0; max-width: none; background: var(--sa-bg); }
.m-article__lead { margin-top: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--sa-line); font-size: 15px; font-weight: 500; line-height: 2; }
.m-article .m-body { margin-top: 28px; }

/* 目次（本文の最初の見出しの前・PCのサイドバー） */
.m-toc__list { counter-reset: toc; }
.m-toc__list > li { counter-increment: toc; }
.m-toc__list a { position: relative; display: block; padding: 6px 0 6px 30px; font-size: 14px; line-height: 1.7; color: var(--sa-mute); transition: color var(--sa-hover) var(--sa-ease); }
.m-toc__list > li > a::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; top: 7px; font-family: var(--sa-font-en); font-weight: 500; font-size: 12px; color: var(--sa-green); }
.m-toc__list ol { padding: 0 0 4px 30px; }
.m-toc__list ol a { padding: 3px 0 3px 14px; font-size: 13px; }
.m-toc__list ol a::before { content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 1px; background: var(--sa-mute); }
.m-toc__list a:hover, .m-toc__list a.is-active { color: var(--sa-ink); }
.m-toc__list a.is-active { font-weight: 700; }
.m-widget--toc .m-toc__list a { font-size: 13px; }
.m-widget--toc .m-toc__list ol a { font-size: 12px; }
.m-body .m-toc { margin: 2.4em 0; padding: 22px clamp(18px, 2.4vw, 32px) 18px; background: var(--sa-white); border: 1px solid var(--sa-line); border-top: 3px solid var(--sa-ink); border-radius: var(--sa-radius); }
.m-toc__title { font-size: 16px; font-weight: 700; text-align: center; }
.m-body .m-toc ol { margin: 0; padding: 0; background: none; border-radius: 0; }
.m-body .m-toc li { padding-left: 0; line-height: 1.7; }
.m-body .m-toc li + li { margin-top: 0; }
.m-body .m-toc li::before { content: none; }
.m-body .m-toc a { color: var(--sa-mute); text-decoration: none; }
.m-body .m-toc ol ol { padding: 0 0 4px 30px; }
.m-body .m-toc a:hover { color: var(--sa-ink); }
.m-body .m-toc .m-toc__list { margin-top: 12px; }

/* 記事末 */
.m-article__foot { display: grid; gap: 28px; margin-top: 48px; }
.m-article__footlabel, .m-share__label, .m-author__label { margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.m-share { padding: 20px 22px; background: var(--sa-bg); border-radius: var(--sa-radius); }
.m-share__list { display: flex; flex-wrap: wrap; gap: 8px; }
.m-share__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 96px; min-height: 42px; padding: 0 16px; font-size: 13px; font-weight: 500; background: var(--sa-white); border: 1px solid var(--sa-line); border-radius: var(--sa-radius); transition: background var(--sa-hover) var(--sa-ease), border-color var(--sa-hover) var(--sa-ease); }
.m-share__btn:hover { background: var(--sa-lime); border-color: var(--sa-lime); }
.m-share__btn.is-copied { background: var(--sa-ink); border-color: var(--sa-ink); color: var(--sa-white); }
.m-author { padding: 22px 24px; border: 1px solid var(--sa-line); border-radius: var(--sa-radius); }
.m-author__inner { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; align-items: start; }
.m-author__icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--sa-grad); color: var(--sa-white); font-family: var(--sa-font-en); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.m-author__name { font-size: 17px; font-weight: 700; line-height: 1.5; }
.m-author__org { font-size: 12px; color: var(--sa-mute); }
.m-author__text { margin-top: 8px; font-size: 13px; line-height: 1.9; color: var(--sa-mute); }
.m-author__links { margin-top: 10px; }
.m-author__links .sa-link { gap: 8px; font-size: 13px; }
.m-author__links .sa-arrow { width: 26px; height: 26px; }
.m-cta { display: grid; gap: 12px; justify-items: start; padding: clamp(26px, 3.4vw, 44px); border-radius: var(--sa-radius); }
.m-pager { margin-top: 0; }

/* ---------- 幅ごとの調整 ---------- */
@media (max-width: 1180px) {
  .m-columns { grid-template-columns: minmax(0, 1fr) 280px; }
  .m-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .m-columns { grid-template-columns: minmax(0, 1fr); }
  .m-sidebar__follow { position: static; }
  .m-widget--toc { display: none; }
  .m-fv { grid-template-columns: minmax(0, 1fr); }
  .m-fv__subs { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .m-fv__sub { aspect-ratio: 4 / 3; }
  .m-crumb__title { max-width: 14em; }
  .m-body { font-size: 15px; }
  .m-body ul, .m-body ol { padding: 18px; }
  .m-box { padding: 22px 20px; }
  .m-box__title { font-size: 15px; align-items: flex-start; }
  .m-pager { grid-template-columns: 1fr; }
  .m-pager__link--next { text-align: left; }
}
@media (max-width: 600px) {
  .m-grid, .m-grid--2, .m-catblocks { grid-template-columns: minmax(0, 1fr); }
  .m-grid { gap: 24px; }
  .m-grid .m-card__link { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .m-grid .m-card__body { padding: 0; }
  .m-grid .m-card__title { margin-top: 6px; font-size: 15px; }
  .m-grid .m-card__excerpt { display: none; }
  .m-catblock__list .m-row__link { grid-template-columns: 124px minmax(0, 1fr); gap: 14px; }
  .m-fv__subs { grid-template-columns: minmax(0, 1fr); }
  .m-fv__sub { aspect-ratio: 16 / 9; }
  .m-fv__img { aspect-ratio: 4 / 3; }
  .m-fv__excerpt { display: none; }
  .m-mhead__lead { font-size: 13px; }
  .m-brand__desc { display: none; }
  .m-brand__row { padding: 14px 0; }
  .m-wordmark { gap: 10px; }
  .m-wordmark__mark { width: 36px; height: 36px; }
  .m-wordmark__mark::before { inset: 7px; }
  .m-wordmark__text { padding-left: 10px; }
  .m-wordmark__ax { font-size: 11px; }
  .m-wordmark__lab { font-size: 20px; letter-spacing: .2em; }
  .m-brand__by { padding: 0; border: 0; font-size: 11px; }
  .m-count b { font-size: 26px; }
  .m-author__inner { grid-template-columns: 1fr; }
  .m-share__btn { min-width: 0; flex: 1 1 calc(50% - 8px); }
  .m-share__list li { display: flex; flex: 1 1 calc(50% - 8px); }
  .m-share__list li .m-share__btn { flex: 1; }
}