/* ============================================================
   base.css — トークン＋リセット＋共通部品
   色を変えるときはここの :root だけ触る。
   ============================================================ */
:root{
  --teal:#389FAF;          /* メイン */
  --teal-ink:#2B7D8B;      /* 小さい文字のリンク */
  --teal-deep:#1F6E7C;
  --mint:#EAF5F6;          /* セクション帯 */
  --ice:#F7FBFB;           /* 薄い面 */
  --cream1:#FBF4EA; --cream2:#FDFAF6;
  --ink:#3C4C52;           /* 本文 */
  --sub:#7B8C93;           /* 補助 */
  --mute:#9AAAB0;          /* 日付など */
  --line:#E3EEEF;
  --paper:#fff;
  --pink:#EE6B86; --cyan:#1BA3CE; --moss:#5FA87F; --star:#F0A030;
  --r-s:10px; --r-m:16px; --r-l:18px;
  --shadow:0 1px 8px rgba(80,120,130,.09);
  --shadow-md:0 2px 12px rgba(80,120,130,.13);
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --round:"Zen Maru Gothic","Noto Sans JP",sans-serif;
  --wrap:1140px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.95;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--teal-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--round);font-weight:700;line-height:1.6;margin:0}
ul,ol{margin:0;padding:0}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:40px}
.center{text-align:center}
.mb-l{margin-bottom:44px}
.n{font-size:11px;color:var(--mute);font-variant-numeric:tabular-nums}
.ico{flex:none}

.skip{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:999}
.skip:focus{left:0}

/* ---- ピル ---- */
.pill{font-family:var(--round);font-size:11px;font-weight:500;padding:4px 13px;border-radius:999px;color:#fff;display:inline-block;text-decoration:none;line-height:1.6}
a.pill:hover{text-decoration:none;opacity:.88}
.p1{background:var(--teal)} .p2{background:var(--pink)} .p3{background:var(--cyan)} .p4{background:var(--moss)}

/* ---- ボタン ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--teal);color:#fff;border:0;border-radius:999px;padding:14px 32px;font-size:14.5px;font-weight:700;font-family:var(--round);cursor:pointer;text-decoration:none}
.btn:hover{background:var(--teal-deep);text-decoration:none;color:#fff}
.btn--ghost{background:#fff;color:var(--teal-ink);border:1px solid #B3D8DE;padding:11px 22px;font-size:13px}
.btn--ghost:hover{background:var(--ice);color:var(--teal-deep)}

/* ---- 見出し ---- */
.sec__head{display:flex;align-items:center;gap:22px;margin-bottom:10px}
.sec__line{flex:1;height:1px;background:#DFEBEC}
.sec__h{font-size:23px;letter-spacing:.05em;display:flex;align-items:center;gap:12px}
.sec__h--c{justify-content:center}
.bar{width:4px;height:20px;background:var(--teal);border-radius:2px;flex:none}
.sec__lead{margin:9px 0 26px;font-size:13px;color:var(--sub);line-height:1.9}
.sec__lead--c{text-align:center}
.more{font-size:12.5px;white-space:nowrap;color:var(--teal)}

/* ---- カード ---- */
.card{border-radius:var(--r-m);overflow:hidden;background:#fff;box-shadow:var(--shadow);display:block}
.card__link{color:inherit;text-decoration:none;display:block;height:100%}
.card__link:hover{text-decoration:none}
.card:hover{box-shadow:var(--shadow-md)}
.card__media{position:relative;aspect-ratio:16/9;background:var(--mint);overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover}
.card__media .pill{position:absolute;top:10px;left:10px;z-index:2}
.card__body{padding:16px}
.card__title{font-size:13.5px;line-height:1.8;font-weight:500}
.card__title--lg{font-size:15.5px}
.card__ex{margin:8px 0 0;font-size:12.5px;color:var(--sub);line-height:1.9}
.card--cream{background:linear-gradient(140deg,var(--cream1),var(--cream2))}
.is-fallback{object-fit:contain;background:var(--mint);padding:14%}

.meta{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mute);font-variant-numeric:tabular-nums;margin:10px 0 0}

/* ---- グリッド ---- */
.grid{display:grid;gap:22px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}

/* ---- チップ ---- */
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.chips a,.chip{display:inline-block;font-size:12px;border:1px solid #D5E6E9;border-radius:999px;padding:7px 14px;color:var(--ink);text-decoration:none;background:#fff}
.chips a:hover,.chip:hover{border-color:var(--teal);color:var(--teal-ink);text-decoration:none}
.chip.is-on{background:var(--teal);border-color:var(--teal);color:#fff}
.chip.is-on .n{color:#D8EFF3}
.chips--nav{margin:0 0 28px}

/* ---- 順位バッジ ---- */
.rank{position:absolute;top:10px;left:10px;z-index:2;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:var(--round);color:#fff;background:var(--teal)}
.rank--2{background:#6ABAC7} .rank--3{background:#8FC8D1} .rank--4{background:#AED7DD} .rank--5{background:#C7E4E8;color:#2B6873}

/* ---- ページ共通 ---- */
.main{display:block}
.crumb{font-size:11.5px;color:var(--mute);margin:18px 0}
.crumb a{color:var(--teal-ink)}
.pg{padding-bottom:64px}
.pg--narrow{max-width:860px}
.pg__title{font-size:28px;line-height:1.55;margin:6px 0 0}
.pg__lead{margin:12px 0 0;font-size:14px;color:var(--sub);line-height:1.95}
.pg__count{margin:8px 0 0;font-size:12px;color:var(--mute)}
.arch{margin-bottom:30px}
.box-search{margin:22px 0 30px}

/* ---- 検索フォーム ---- */
.sform{display:flex;align-items:center;background:var(--ice);border:1px solid var(--line);border-radius:999px;padding:4px 4px 4px 18px;max-width:460px}
.sform__label{position:absolute;left:-9999px}
.sform__input{flex:1;height:38px;border:0;background:transparent;font-size:13.5px;font-family:inherit;color:var(--ink);outline:none;min-width:0}
.sform__btn{width:38px;height:38px;border:0;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.sform__btn:hover{background:var(--teal-deep)}

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

@media (max-width:900px){
  .wrap{padding-inline:20px}
  .grid--3,.grid--4,.grid--5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg__title{font-size:22px}
  .sec__h{font-size:19px}
}
@media (max-width:560px){
  .grid--3,.grid--4,.grid--5{grid-template-columns:1fr}
}