/* ============================================================
   blog.sun-shien.com｜トップ（記事一覧）専用スタイル
   style.css の変数・トーンをそのまま使う。記事ページには影響しない。
   ============================================================ */
.wrap.wide{max-width:1080px}
/* 折り返しの基本は style.css（body で継承）。ここは要素ごとの上書きだけ。 */
.card-title,.pick b,.sec-h{text-wrap:balance}
/* ボタン・チップ・日付は語の途中で割らない */
.chip,.areabtn,.more,.reset,.sec-more,.card-foot,.flabel,.citylabel,.sum-note{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

header.site nav a{min-height:38px;display:inline-flex;align-items:center}
.hero-top .stat{margin:14px 0 0;font-size:13px;color:var(--muted);letter-spacing:.06em}

.sec{margin:44px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-h{font-size:21px;color:var(--navy);font-weight:800;letter-spacing:.04em;margin:0 0 4px;padding-left:14px;border-left:4px solid var(--sun);line-height:1.5}
.sec-more{font-size:13.5px;font-weight:700;color:var(--sun-ink);text-decoration:none}
.sec-more:hover{text-decoration:underline}

/* まず読む3本 */
.picks{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.pick{display:flex;flex-direction:column;gap:7px;background:var(--navy);color:#fff;border-radius:12px;padding:20px;text-decoration:none;box-shadow:var(--shadow-s);transition:transform .16s,box-shadow .16s}
.pick:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.pick-k{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--sun-soft)}
.pick b{font-size:16px;line-height:1.6;color:#fff;font-weight:800}
.pick-ex{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.72);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* カード */
.cards{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{display:flex}
.card-link{display:flex;flex-direction:column;gap:8px;width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 18px 15px;box-shadow:var(--shadow-s);text-decoration:none;transition:transform .16s,box-shadow .16s,border-color .16s}
.card-link:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:#EBD9B4;text-decoration:none}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chips span{font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:999px;line-height:1.6}
.c-cat{background:var(--soft2);color:var(--sun-ink)}
.c-area{background:#EEF2F6;color:var(--navy)}
.c-new{background:var(--sun);color:#fff}
.card-title{margin:0;font-size:15.5px;line-height:1.65;font-weight:800;color:var(--navy);letter-spacing:.02em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-link:hover .card-title{color:var(--sun-deep)}
.card-ex{margin:0;font-size:12.8px;line-height:1.85;color:var(--sub);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-foot{margin-top:auto;padding-top:10px;display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted);letter-spacing:.06em}
.card-foot .go{color:var(--sun-ink);font-weight:800}
.card-foot .go::after{content:" ▸"}

/* さがす */
.finder{scroll-margin-top:76px}
.searchbox{position:relative;margin:16px 0 14px}
.searchbox input{width:100%;font:inherit;font-size:15.5px;padding:14px 44px 14px 46px;border:1px solid var(--line);border-radius:10px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2359626E' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") 15px center/18px no-repeat;box-shadow:var(--shadow-s);color:var(--ink)}
.searchbox input::placeholder{color:#98A0A9}
.searchbox input:focus{outline:3px solid var(--sun);outline-offset:1px;border-color:var(--sun)}
.qclear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;border:0;border-radius:50%;background:#EDEAE4;color:var(--sub);font-size:16px;line-height:1;cursor:pointer}
.qclear:hover{background:#E2DED6}

.filterrow{display:flex;gap:12px;align-items:flex-start;margin:14px 0}
.flabel{flex:none;font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--sun-ink);padding-top:8px}
.chips-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:13px;font-weight:700;color:var(--sub);background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 15px;cursor:pointer;line-height:1.5;transition:background .14s,color .14s,border-color .14s}
.chip i{font-style:normal;font-size:11px;color:var(--muted);margin-left:6px}
.chip:hover{border-color:var(--sun-soft);color:var(--navy)}
.chip.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
.chip.is-on i{color:rgba(255,255,255,.6)}

.areapanel{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:var(--shadow-s);margin:14px 0}
.areapanel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px}
.areapanel>summary::-webkit-details-marker{display:none}
.areapanel>summary::after{content:"＋";margin-left:auto;color:var(--sun-ink);font-weight:800}
.areapanel[open]>summary::after{content:"−"}
.areapanel>summary .flabel{padding-top:0}
.sum-note{font-size:12.5px;color:var(--muted)}
.areainner{padding:2px 18px 18px}
.regionblock{margin-top:14px}
.regionblock h3{margin:0 0 8px;font-size:12.5px;font-weight:800;color:var(--navy);letter-spacing:.1em;padding-bottom:6px;border-bottom:1px solid var(--line)}
.areagrid{display:flex;flex-wrap:wrap;gap:7px}
.areabtn{font:inherit;font-size:13px;font-weight:700;color:var(--navy);background:var(--soft);border:1px solid transparent;border-radius:7px;padding:7px 12px;cursor:pointer;line-height:1.5;transition:background .14s,color .14s}
.areabtn i{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:5px}
.areabtn.is-on i{color:rgba(255,255,255,.72)}
.areabtn:hover{background:var(--sky-l);color:var(--sun-deep)}
.areabtn.is-on{background:var(--sun);border-color:var(--sun);color:#fff}
.areabtn-all{background:#fff;border:1px solid var(--line)}
.areabtn.is-city{background:#fff;border:1px dashed #D9D3C6}
.citywrap{margin-top:9px;display:flex;gap:10px;align-items:flex-start}
.citylabel{flex:none;font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.1em;padding-top:8px}

.resultbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:20px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.rcount{margin:0;font-size:14px;color:var(--sub)}
.rcount b{font-size:19px;color:var(--navy);margin-right:3px}
.rright{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.activefilters{font-size:12.5px;color:var(--sun-ink);font-weight:700}
.reset{font:inherit;font-size:12.5px;font-weight:700;color:var(--sub);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer}
.reset:hover{border-color:var(--sun-soft);color:var(--navy)}
#sort{font:inherit;font-size:13px;font-weight:700;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:7px;padding:7px 10px;cursor:pointer}

.empty{background:#fff;border:1px dashed var(--line);border-radius:10px;padding:26px 20px;text-align:center;color:var(--sub);font-size:14.5px}
.morewrap{text-align:center;margin-top:20px}
.more{font:inherit;font-size:14px;font-weight:800;color:var(--navy);background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 34px;cursor:pointer;box-shadow:var(--shadow-s)}
.more:hover{border-color:var(--sun);color:var(--sun-deep)}
.card[hidden]{display:none}

@media(max-width:900px){
  .picks{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .sec{margin:34px 0}
  .cards{grid-template-columns:1fr;gap:11px}
  .card-title{font-size:15px;-webkit-line-clamp:4}
  .card-ex{-webkit-line-clamp:2}
  .filterrow{flex-direction:column;gap:7px}
  .flabel{padding-top:0}
  .filterrow{overflow:hidden}
  .chips-row{width:100%;max-width:100%;min-width:0;flex:0 1 auto;gap:7px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .chips-row::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .citywrap{flex-direction:column;gap:4px}
  .citylabel{padding-top:0}
  .resultbar{align-items:flex-start}
  .searchbox input{font-size:16px} /* iOSの自動ズーム防止 */
  /* トップだけは「記事をさがす」を残す */
  header.site nav a[href="#find"]{display:inline-block;margin-left:0}
}
@media (prefers-reduced-motion: reduce){
  .pick:hover,.card-link:hover{transform:none}
}