/* ===================================================================
   TRYS 加工実績カタログ（trys-jisseki-catalog）
   - 全ルールを .mk-jisseki* に閉じる。THORのクラス（archive__item 等）は上書きしない
   - 色はTHORに合わせる（WordPressの扱い.md「デザイン（トンマナ）はTHORに合わせる」）
     メイン #339900（白文字の塗りは読める濃さ #2e8500）／カテゴリ9 #1e8cbe（帯は #17709a）
   - 切り替え幅はTHORと同じ 768px（2段組み）・992px
   =================================================================== */

.mk-jisseki,
.mk-jisseki-panel,
.mk-jisseki-tax,
.mk-jisseki-cta--article,
.mk-jisseki-related { color: #191919; line-height: 1.6; }

.mk-jisseki a,
.mk-jisseki-panel a,
.mk-jisseki-tax a,
.mk-jisseki-cta a,
.mk-jisseki-related a { text-decoration: none; }

/* ---------- 見出し帯 */
.mk-jisseki-head { margin: -15px -15px 0; padding: 28px 32px; background: #17709a; color: #fff; display: flex; flex-direction: column; gap: 6px; }
.mk-jisseki-head__label { font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.mk-jisseki-head__title { margin: 0; font-size: 28px; font-weight: 700; line-height: 1.35; color: #fff; }
.mk-jisseki-head__sub { margin: 0; font-size: 14px; line-height: 1.7; }

/* ---------- 導入 */
.mk-jisseki-intro { padding: 24px 17px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #eee; }
.mk-jisseki-intro__text p { margin: 0 0 8px; font-size: 14px; line-height: 1.8; color: #333; }
.mk-jisseki-intro__text p:last-child { margin-bottom: 0; }
.mk-jisseki-intro__cta { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ---------- ボタン・リンク */
.mk-jisseki-btn { min-height: 48px; box-sizing: border-box; padding: 0 28px; background: #2e8500; color: #fff !important; border-radius: 4px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mk-jisseki-btn:hover { background: #256b00; }
.mk-jisseki-link { font-size: 13px; color: #2e8500 !important; text-decoration: underline !important; }
.mk-jisseki-h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.5; color: #191919; }

/* ---------- 件数・並び替え */
.mk-jisseki-bar { padding: 20px 17px 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mk-jisseki-bar__count { font-size: 15px; }
.mk-jisseki-bar__count strong { font-size: 24px; }
.mk-jisseki-sort { display: flex; gap: 24px; font-size: 14px; }
.mk-jisseki-sort a { color: #595959; padding-bottom: 5px; }
.mk-jisseki-sort a[aria-current] { color: #191919; font-weight: 700; border-bottom: 2px solid #191919; padding-bottom: 3px; }
.mk-jisseki-open { display: none; }

/* ---------- 選択中 */
.mk-jisseki-chosen { padding: 14px 17px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mk-jisseki-chosen__label { font-size: 12px; color: #595959; }

/* ---------- チップ */
.mk-jisseki-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-jisseki-chip { min-height: 36px; box-sizing: border-box; padding: 0 14px; border: 1px solid #cfcfcf; border-radius: 18px; background: #fff; font-size: 13px; color: #191919 !important; display: inline-flex; align-items: center; gap: 6px; }
.mk-jisseki-chip.is-on { border: 2px solid #339900; background: #eef7e8; color: #1f5c00 !important; font-weight: 700; }
.mk-jisseki-chip.is-region { border-color: #339900; color: #1f5c00 !important; font-weight: 700; }
.mk-jisseki-chip__n { font-size: 12px; font-weight: 400; color: #595959; }

/* ---------- カード */
.mk-jisseki-grid { list-style: none; margin: 0; padding: 20px 17px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; }
.mk-jisseki-grid__item { margin: 0; padding: 0; list-style: none; }
.mk-jisseki-grid__item::before { content: none; }
.mk-jisseki-card { display: flex; flex-direction: column; gap: 8px; color: #191919 !important; }
.mk-jisseki-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; background: #eee; }
.mk-jisseki-card__img--none { border: 1px dashed #c4c4c4; }
.mk-jisseki-card__pref { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: #17709a; }
.mk-jisseki-card__catch { font-size: 15px; font-weight: 700; line-height: 1.5; }
.mk-jisseki-card:hover .mk-jisseki-card__catch { color: #2e8500; text-decoration: underline; }
.mk-jisseki-card__company { font-size: 12px; color: #595959; }
.mk-jisseki-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-jisseki-tag { font-size: 12px; line-height: 1; padding: 6px 8px; background: #f2f2f2; border-radius: 3px; color: #333; }

/* ---------- ページ送り */
.mk-jisseki-pager { padding: 24px 17px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.mk-jisseki-pager .page-numbers { min-width: 40px; height: 40px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d8d8d8; color: #2e8500; }
.mk-jisseki-pager .page-numbers.current { background: #2e8500; border-color: #2e8500; color: #fff; font-weight: 700; }
.mk-jisseki-pager .page-numbers.dots { border: none; color: #595959; }

.mk-jisseki-empty { padding: 40px 17px; text-align: center; }
.mk-jisseki-empty p { margin: 0 0 8px; }

/* ---------- 近隣・CTA */
.mk-jisseki-neighbors { margin: 16px 17px 0; padding: 20px 24px; border: 1px solid #e5e5e5; display: flex; flex-direction: column; gap: 12px; }
.mk-jisseki-cta { margin: 24px 17px 17px; padding: 28px 32px; background: #f7f7f7; border: 1px solid #e5e5e5; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.mk-jisseki-cta__text p { margin: 6px 0 0; font-size: 14px; color: #333; }
.mk-jisseki-cta__btns { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ---------- 絞り込みパネル（PC＝サイドバー） */
.mk-jisseki-panel { background: #fff; box-shadow: 0 1px 3px 0 rgba(0,0,0,.15); }
.mk-jisseki-form { margin: 0; }
.mk-jisseki-panel__head { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid #339900; }
.mk-jisseki-panel__title { margin: 0; padding: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; color: #191919; background: none; border: none; }
.mk-jisseki-panel__title::before, .mk-jisseki-panel__title::after { content: none; display: none; }
.mk-jisseki-panel__clear { font-size: 12px; color: #595959 !important; text-decoration: underline !important; margin-left: auto; }
.mk-jisseki-close { display: none; }
.mk-jisseki-group { margin: 0; padding: 16px 20px; border: none; border-bottom: 1px solid #eee; min-width: 0; }
.mk-jisseki-group__label { padding: 0; margin: 0 0 10px; font-size: 14px; font-weight: 700; }
/* legend は枠の上の縁に乗る特殊な配置で、グループの上の余白が効かない（線に張り付く）。
   float で通常の流れに戻し、直後の要素で回り込みを解除する（2026-10-01 松木さん指摘） */
.mk-jisseki-group > .mk-jisseki-group__label { float: left; width: 100%; }
.mk-jisseki-group > .mk-jisseki-group__label + * { clear: both; }
.mk-jisseki-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-jisseki-opt { position: relative; min-height: 36px; box-sizing: border-box; padding: 0 12px; border: 1px solid #cfcfcf; border-radius: 18px; background: #fff; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; }
.mk-jisseki-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mk-jisseki-opt__n { font-size: 12px; color: #595959; }
.mk-jisseki-opt:has(input:checked),
.mk-jisseki-opt.is-checked { border: 2px solid #339900; background: #eef7e8; color: #1f5c00; font-weight: 700; padding: 0 11px; }
.mk-jisseki-opt:has(input:checked) .mk-jisseki-opt__n,
.mk-jisseki-opt.is-checked .mk-jisseki-opt__n { color: #3d5c2e; font-weight: 400; }
/* :has() が使えない古いブラウザ向けに、JSが is-checked を付ける */
.mk-jisseki-opt:has(input:focus-visible) { outline: 2px solid #17709a; outline-offset: 2px; }
.mk-jisseki-opt.is-zero { border-style: dashed; border-color: #d8d8d8; background: #f5f5f5; color: #9a9a9a; cursor: not-allowed; }
.mk-jisseki-opt.is-zero .mk-jisseki-opt__n { color: #9a9a9a; }
.mk-jisseki-region { border-bottom: 1px dotted #d8d8d8; }
.mk-jisseki-region summary { min-height: 40px; padding: 0 4px; display: flex; align-items: center; justify-content: space-between; font-size: 14px; cursor: pointer; list-style: none; }
.mk-jisseki-region summary::-webkit-details-marker { display: none; }
.mk-jisseki-region summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid #595959; border-bottom: 2px solid #595959; transform: rotate(45deg); transition: transform .15s; }
.mk-jisseki-region[open] summary::after { transform: rotate(-135deg); }
.mk-jisseki-region summary .mk-jisseki-opt__n { margin-left: auto; }
.mk-jisseki-region .mk-jisseki-opts { padding: 4px 0 12px; }
.mk-jisseki-fixed { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mk-jisseki-panel__foot { padding: 20px; display: flex; gap: 10px; }
.mk-jisseki-panel__reset { display: none; }
.mk-jisseki-apply { flex-grow: 1; min-height: 48px; border: none; border-radius: 4px; background: #2e8500; color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.mk-jisseki-apply:hover { background: #256b00; }

@media only screen and (min-width: 768px) {
	/* THORの2段組みはサイドバーを中身の高さにするので、本文と同じ高さに伸ばして追従させる（l-sidebar自体は書き換えない） */
	.mk-jisseki-side { align-self: stretch; }
	.mk-jisseki-panel { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain; }
	/* 記事の右カラムは l-sidebar に印を付けられない（THORの sidebar.php のまま）ので :has で伸ばす。未対応のブラウザでは追従しないだけ */
	.l-sidebar:has(> .mk-jisseki-panel--inline) { align-self: stretch; }
}

/* ---------- 記事の右カラム（1.1.0）：絞り込みパネルだけ。PCは一覧と同じく追従させる
   スマホはシートにせず、THORどおり本文の下に並ぶ */
.mk-jisseki-panel--inline { margin: 0 0 40px; }

/* ---------- 記事下部（デザインC） */
.mk-jisseki-tax { margin: 32px 0 0; padding: 24px 28px; border: 1px solid #cfe0ea; background: #f4f9fc; display: flex; flex-direction: column; gap: 14px; }
.mk-jisseki-tax__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mk-jisseki-tax__title { margin: 0; font-size: 18px; font-weight: 700; color: #17709a; }
.mk-jisseki-tax__note { font-size: 12px; color: #595959; }
.mk-jisseki-tax__row { display: flex; align-items: center; gap: 16px; }
.mk-jisseki-tax__label { width: 120px; flex-shrink: 0; font-size: 13px; font-weight: 700; color: #333; }
.mk-jisseki-tax__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.mk-jisseki-tax__chip { min-height: 36px; box-sizing: border-box; padding: 0 14px; background: #fff; border: 1px solid #9cc3d6; border-radius: 18px; font-size: 13px; font-weight: 500; color: #17709a !important; display: inline-flex; align-items: center; }
.mk-jisseki-tax__chip::after { content: ""; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); }
.mk-jisseki-tax__chip:hover { background: #e7f2f8; }
.mk-jisseki-cta--article { margin: 24px 0 0; }
.mk-jisseki-related { margin: 28px 0 0; }
.mk-jisseki-related__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.mk-jisseki-grid--related { padding: 16px 0 0; }

/* ---------- 記事下部は THOR の本文（.content）の中に入るので、本文用の規則を打ち消す
   THOR 2.5.1: .content div { margin-top:2rem } ／ .content ul li { margin-top:1rem; padding-left:1.7rem } ／ .content ul>li:before { アイコン } */
.content .mk-jisseki-tax div,
.content .mk-jisseki-cta--article div,
.content .mk-jisseki-related div { margin-top: 0; }
.content .mk-jisseki-tax,
.content .mk-jisseki-cta--article,
.content .mk-jisseki-related { margin-top: 32px; }
.content .mk-jisseki-cta--article p { margin: 6px 0 0; }
.content .mk-jisseki-grid { margin: 0; padding-left: 0; }
.content .mk-jisseki-grid li { margin-top: 0; padding-left: 0; line-height: inherit; }
.content .mk-jisseki-grid li::before { content: none; display: none; }
.content .mk-jisseki-card,
.content .mk-jisseki-tax__chip { text-decoration: none; }
.content .mk-jisseki-card__img { margin: 0; max-width: 100%; }

/* ---------- 992px未満：カード2列 */
@media only screen and (max-width: 991px) {
	.mk-jisseki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 768px未満（THORが1段組みになる幅） */
@media only screen and (max-width: 767px) {
	.mk-jisseki-head { padding: 20px 16px; }
	.mk-jisseki-head__title { font-size: 22px; }
	.mk-jisseki-intro { padding: 16px 1px; flex-direction: column; align-items: stretch; }
	.mk-jisseki-intro__cta { align-items: stretch; }
	.mk-jisseki-bar { padding: 12px 1px 0; flex-wrap: wrap; }
	.mk-jisseki-bar__count { order: 2; }
	.mk-jisseki-sort { order: 3; }
	.mk-jisseki-chosen, .mk-jisseki-grid, .mk-jisseki-pager { padding-left: 1px; padding-right: 1px; }
	.mk-jisseki-neighbors, .mk-jisseki-cta { margin-left: 0; margin-right: 0; }
	.mk-jisseki-cta { flex-direction: column; align-items: stretch; padding: 20px 16px; }
	.mk-jisseki-cta__btns { align-items: stretch; }
	.mk-jisseki-tax { padding: 18px 16px; }
	.mk-jisseki-tax__row { flex-direction: column; align-items: flex-start; gap: 6px; }
	.mk-jisseki-tax__label { width: auto; font-size: 12px; }
	.mk-jisseki-tax__chip { min-height: 40px; font-size: 14px; }
	.mk-jisseki-pager .page-numbers { min-width: 44px; height: 44px; }

	/* JSが動くときだけ、パネルを下から出るシートにする（動かないときはサイドバーとして本文の下に出る） */
	.mk-jisseki-js .mk-jisseki-open { order: 1; flex-basis: 100%; min-height: 44px; border: 1px solid #339900; border-radius: 22px; background: #fff; color: #1f5c00; font-family: inherit; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) { position: fixed; z-index: 100000; left: 0; right: 0; bottom: 0; top: 40px; border-radius: 14px 14px 0 0; box-shadow: 0 -4px 24px rgba(0,0,0,.25); transform: translateY(105%); transition: transform .25s ease; visibility: hidden; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline).is-open { transform: none; visibility: visible; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-form { height: 100%; display: flex; flex-direction: column; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-panel__head { flex-shrink: 0; border-bottom: 1px solid #eee; padding: 8px 8px 8px 16px; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-panel__clear { display: none; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-close { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: none; background: none; color: #191919; cursor: pointer; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-panel__body { flex-grow: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-panel__foot { flex-shrink: 0; padding: 12px 16px 20px; border-top: 1px solid #e5e5e5; box-shadow: 0 -2px 6px rgba(0,0,0,.06); }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-panel__reset { display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border: 1px solid #cfcfcf; border-radius: 4px; color: #191919 !important; font-size: 14px; }
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) .mk-jisseki-group { padding: 14px 16px; }
	.mk-jisseki-js .mk-jisseki-backdrop { position: fixed; inset: 0; z-index: 99999; background: rgba(0,0,0,.45); }
	.mk-jisseki-scroll-lock { overflow: hidden; }
}

@media only screen and (max-width: 559px) {
	.mk-jisseki-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.mk-jisseki-grid--related { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.mk-jisseki-js .mk-jisseki-panel:not(.mk-jisseki-panel--inline) { transition: none; }
}