/* 検索結果（51-5）。見た目の正は 50_サイト全面改修\試作\S1.html（2026-10-29 確定。上部は低く、検索欄は右。利用者が見たいのは結果）。
   色の名前と html の字の大きさは css/sk-chrome.css（共通の部品）。結果の1件の札は、トップ（css/sk-top.css）の新着と同じ形。
   名前はすべて sk- で始め、古い CSS とぶつけない。寸法はすべて rem。 */

.sk-results{
  --sk-cream:#FBF8F3;--sk-cream-2:#F4EDE2;--sk-line:#E6DACA;--sk-ink:#241812;--sk-muted:#7b6a5c;--sk-link:#8A6420;
  --sk-brand:linear-gradient(135deg,#2A1A12 0%,#4A2F20 55%,#5E3E2A 100%);
  font-size:.9375rem;color:var(--sk-ink);background:var(--sk-cream)
}
.sk-results :where(h1,h2,h3,p,ul){margin:0}
/* 古い style.css の mark（黄色・斜体・太字）を打ち消す */
.sk-results mark{background:linear-gradient(transparent 60%,#F3DDAE 60%);color:inherit;padding:0;font-style:normal;font-weight:inherit}

/* 上部（題名は左、検索欄は右） */
.sk-s-head{background:var(--sk-brand);color:var(--sk-ink-dk);padding:.875rem 0 1rem}
.sk-s-head .sk-wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:.75rem 2rem;flex-wrap:wrap}
.sk-s-crumb{font-size:.75rem;color:#cdbda6;margin-bottom:.25rem}
.sk-s-crumb a:hover{text-decoration:underline}
.sk-s-kicker{font-family:var(--sk-latin);font-size:.75rem;letter-spacing:.24em;color:var(--sk-gold-text)}
.sk-s-head h1{font-family:var(--sk-serif);font-weight:600;font-size:1.5rem;line-height:1.3;color:var(--sk-champ)}
.sk-s-form{display:flex;gap:.5rem;flex:0 1 34rem;margin:0}
.sk-s-form input[type=search]{flex:1;min-width:0;height:2.75rem;padding:0 1rem;border:.0625rem solid rgba(243,221,174,.55);background:rgba(23,17,14,.55);color:var(--sk-ink-dk);font:inherit;font-size:1rem;border-radius:0;box-shadow:none;margin:0}
.sk-s-form input[type=search]::placeholder{color:#c9b9a3;opacity:1}
.sk-s-form input[type=search]:focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.125rem}
.sk-s-form .sk-btn{min-height:2.75rem;padding:0 1.5rem}

/* 明るい面のボタン */
.sk-s-body .sk-btn-solid{background:var(--sk-brown);color:var(--sk-gold-lt);border-color:var(--sk-brown)}
.sk-s-body .sk-btn-solid:hover{background:var(--sk-gold-lt);color:var(--sk-brown-dk);border-color:var(--sk-brown)}
.sk-s-body .sk-btn-line{background:#fff;color:var(--sk-brown);border-color:var(--sk-brown)}
.sk-s-body .sk-btn-line:hover{background:var(--sk-brown);color:var(--sk-gold-lt)}

.sk-s-body{padding:1.25rem 0 4rem}
.sk-s-grid{display:grid;grid-template-columns:16.5rem 1fr;gap:2.25rem;align-items:start}

/* 絞り込み */
.sk-s-side{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto;background:#fff;border:.0625rem solid var(--sk-line);padding:1rem 1.125rem 1.25rem;margin:0}
.sk-s-side h2{font-family:var(--sk-serif);font-size:1.0625rem;display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.sk-s-side h2 a{font-family:"Noto Sans JP",sans-serif;font-size:.75rem;font-weight:400;color:var(--sk-link);text-decoration:underline;text-underline-offset:.1875rem}
.sk-s-fs{border:0;border-top:.0625rem solid var(--sk-line);margin:.875rem 0 0;padding:.75rem 0 0;min-width:0}
.sk-s-fs legend{font-size:.8125rem;font-weight:700;color:var(--sk-brown);padding:0;margin-bottom:.375rem;float:left;width:100%}
.sk-s-fs legend+*{clear:both}
.sk-s-opt{display:flex;align-items:center;gap:.5rem;min-height:2rem;font-size:.875rem;cursor:pointer;margin:0;font-weight:400}
.sk-s-opt input{width:1rem;height:1rem;accent-color:var(--sk-brown);margin:0;flex:none}
.sk-s-opt input:focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.125rem}
.sk-s-opt .sk-s-n,.sk-s-big .sk-s-n{margin-left:auto;font-size:.75rem;color:var(--sk-muted);font-weight:400;font-variant-numeric:tabular-nums}
.sk-s-opt.sk-zero{color:#9a8b7d}
.sk-s-big{border-bottom:.0625rem dashed var(--sk-line)}
.sk-s-big:last-child{border-bottom:0}
.sk-s-big>button{width:100%;display:flex;align-items:center;gap:.5rem;min-height:2.25rem;background:none;border:0;padding:0;font:inherit;font-size:.875rem;font-weight:500;color:var(--sk-ink);cursor:pointer;text-align:left}
.sk-s-big>button::before{content:"";width:.4375rem;height:.4375rem;border-right:.125rem solid var(--sk-brown-md);border-bottom:.125rem solid var(--sk-brown-md);transform:rotate(-45deg);transition:transform .15s;flex:none;margin-right:.125rem}
.sk-s-big>button[aria-expanded="true"]::before{transform:rotate(45deg)}
.sk-s-big .sk-on{font-size:.6875rem;background:var(--sk-brown);color:var(--sk-gold-lt);padding:0 .375rem;line-height:1.125rem}
.sk-s-kids{padding:0 0 .5rem 1.25rem}
.sk-s-dates{display:grid;grid-template-columns:1fr auto 1fr;gap:.375rem;align-items:center;font-size:.8125rem;margin:.25rem 0 .25rem 1.5rem}
.sk-s-dates input{width:100%;min-width:0;height:2rem;border:.0625rem solid var(--sk-line);padding:0 .25rem;font:inherit;font-size:.8125rem;background:#fff;margin:0}
.sk-s-apply{display:flex;gap:.5rem;margin-top:1rem}
.sk-s-apply .sk-btn{flex:1}
.sk-s-apply .sk-s-close{display:none}
/* JS が動いていれば、広い画面では選んだらすぐ変わるので「この条件で絞り込む」は要らない */
.sk-js .sk-s-apply{display:none}

/* 結果 */
.sk-s-bar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.sk-s-count{font-size:.9375rem}
.sk-s-count b{font-family:var(--sk-latin);font-size:1.375rem;font-weight:600;color:var(--sk-brown);margin:0 .125rem}
.sk-s-count span{color:var(--sk-muted);font-size:.8125rem}
.sk-s-open{display:none}
.sk-s-sort{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;margin:0;font-weight:400}
.sk-s-sort select{height:2.375rem;border:.0625rem solid var(--sk-brown);background:#fff;color:var(--sk-ink);font:inherit;font-size:.875rem;padding:0 2rem 0 .75rem;margin:0;border-radius:0}
.sk-s-sort select:focus-visible{outline:.125rem solid var(--sk-gold);outline-offset:.125rem}
.sk-s-active{display:flex;flex-wrap:wrap;gap:.375rem;margin-bottom:.5rem}
.sk-s-active a{display:inline-flex;align-items:center;gap:.375rem;height:1.75rem;padding:0 .5rem 0 .625rem;border:.0625rem solid var(--sk-brown);background:#fff;color:var(--sk-brown);font-size:.75rem}
.sk-s-active a::after{content:"×";font-size:.875rem;line-height:1}
.sk-s-active a:hover{background:var(--sk-brown);color:var(--sk-gold-lt)}
.sk-s-list{background:#fff;border:.0625rem solid var(--sk-line);padding:0 1.25rem}
.sk-s-none{background:#fff;border:.0625rem solid var(--sk-line);padding:2rem 1.25rem;font-size:.9375rem}
.sk-s-none ul{margin:.5rem 0 0;padding-left:1.25rem;list-style:disc;font-size:.875rem;color:var(--sk-muted)}

/* 結果の1件（トップの新着と同じ形） */
.sk-results .sk-card{display:grid;grid-template-columns:5.25rem 1fr;gap:.75rem;padding:1rem 0;border-bottom:.0625rem solid var(--sk-line)}
.sk-results .sk-card:last-child{border-bottom:0}
.sk-results .sk-card .sk-im{display:block;width:5.25rem;height:5.25rem;overflow:hidden;background:var(--sk-brand)}
.sk-results .sk-card .sk-im img{width:100%;height:100%;object-fit:cover}
.sk-results .sk-ph{width:100%;height:100%;display:grid;place-items:center;text-align:center;background:var(--sk-brand);font-family:var(--sk-latin);letter-spacing:.12em;color:var(--sk-gold-text);font-size:.75rem}
.sk-results .sk-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.75rem;color:var(--sk-muted)}
.sk-s-ty{font-size:.6875rem;padding:0 .4375rem;line-height:1.125rem;border:.0625rem solid var(--sk-brown-md);color:var(--sk-brown-md)}
.sk-results .sk-mem{font-size:.6875rem;padding:0 .4375rem;line-height:1.125rem;background:var(--sk-brown);color:var(--sk-gold-lt)}
.sk-s-views{margin-left:auto;font-size:.6875rem;color:var(--sk-muted)}
.sk-results .sk-t{display:block;color:inherit}
.sk-results .sk-tt{font-size:.9375rem;font-weight:500;line-height:1.55;margin:.125rem 0 .375rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sk-results a.sk-t:hover .sk-tt{text-decoration:underline;text-underline-offset:.1875rem}
.sk-results .sk-chips{display:flex;flex-wrap:wrap;gap:.25rem .3125rem;max-height:3rem;overflow:hidden}
.sk-results .sk-chip{font-size:.6875rem;line-height:1.25rem;height:1.375rem;padding:0 .5rem;border:.0625rem solid var(--sk-line);background:var(--sk-cream-2);color:var(--sk-brown-md);white-space:nowrap;transition:background-color .2s,color .2s}
.sk-results .sk-chip:hover{background:var(--sk-brown);color:var(--sk-gold-lt);border-color:var(--sk-brown)}

/* ページ送り（paginate_links の a.page-numbers・span.current・span.dots） */
.sk-s-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.375rem;margin-top:1.75rem}
.sk-s-pager .page-numbers{min-width:2.5rem;height:2.5rem;display:inline-grid;place-items:center;padding:0 .625rem;border:.0625rem solid var(--sk-line);background:#fff;font-size:.875rem;color:var(--sk-brown)}
.sk-s-pager a.page-numbers:hover{background:var(--sk-brown);color:var(--sk-gold-lt);border-color:var(--sk-brown)}
.sk-s-pager .current{background:var(--sk-brown);color:var(--sk-gold-lt);border-color:var(--sk-brown);font-weight:700}
.sk-s-pager .dots{border:0;background:none;min-width:1.5rem}

@media (max-width:900px){
  .sk-s-head{padding:.625rem 0 .75rem}.sk-s-head h1{font-size:1.25rem}.sk-s-kicker{display:none}.sk-s-form{flex-basis:100%}
  .sk-s-body{padding-top:.875rem}
  .sk-s-grid{grid-template-columns:1fr}
  .sk-s-count{width:100%}.sk-s-bar{gap:.5rem}
  .sk-js .sk-s-open{display:inline-flex;flex:none;min-height:2.375rem}
  .sk-s-sort{flex:1;min-width:0}.sk-s-sort select{flex:1;min-width:0}
  /* JS があるときだけ、絞り込みを全面の画面にする（無ければ結果の上にそのまま出す）。
     固定のヘッダー（sk-chrome.css の .sk-head は 1000）より上に出す */
  .sk-js .sk-s-side{display:none;position:fixed;inset:0;z-index:1010;max-height:none;border:0;padding:1rem 1rem 5.5rem}
  .sk-js .sk-s-side.sk-on-sheet{display:block}
  .sk-js .sk-s-side.sk-on-sheet .sk-s-apply{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1011;margin:0;padding:.75rem 1rem;background:#fff;border-top:.0625rem solid var(--sk-line)}
  .sk-js .sk-s-side .sk-s-close{display:inline-flex}
  .sk-s-apply .sk-btn{min-height:3rem}
  .sk-s-list{padding:0 .875rem}
  .sk-results .sk-card{grid-template-columns:4rem 1fr}.sk-results .sk-card .sk-im{width:4rem;height:4rem}
  .sk-s-views{margin-left:0}
}
html.sk-s-lock,html.sk-s-lock body{overflow:hidden}