@charset "utf-8";
/* cocomachi ASUKA */
:root{
  --brand:#BBBD55;          /* ロゴ色 */
  --brand-d:#8F9140;
  --brand-l:#E8E9C4;
  --ink:#2E2C26;
  --ink-2:#6B675C;
  --line:#E2DED2;
  --bg:#FBFAF5;
  --bg-2:#F4F1E7;
  --white:#fff;
  --maxw:1120px;
  --serif:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);
  line-height:1.9;font-size:16px;letter-spacing:.02em}
img{max-width:100%;height:auto;vertical-align:bottom}
a{color:inherit;text-decoration:none}
.inner{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mincho{font-family:var(--serif)}

/* header */
.hd{position:sticky;top:0;z-index:50;background:rgba(251,250,245,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hd .inner{display:flex;align-items:center;gap:24px;height:68px}
.hd .logo{display:flex;align-items:baseline;gap:10px}
.hd .logo img{width:150px}
.hd .logo span{font-size:12px;letter-spacing:.22em;color:var(--brand-d);font-weight:700}
.hd nav{margin-left:auto}
.hd nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;font-size:14px}
.hd nav a{padding:6px 0;border-bottom:2px solid transparent;transition:.2s}
.hd nav a:hover,.hd nav a[aria-current]{border-color:var(--brand)}
.navbtn{display:none;margin-left:auto;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)}

/* MV（トップのメインビジュアル） */
.mv{position:relative;width:100%;height:min(78vh,660px);min-height:420px;overflow:hidden;background:var(--bg-2)}
.mv-slides{position:absolute;inset:0;margin:0;padding:0;list-style:none}
.mv-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.mv-slide.is-on{opacity:1}
.mv-slide img{width:100%;height:100%;object-fit:cover;display:block}
.mv::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(26,24,18,.70) 0%,rgba(26,24,18,.46) 42%,rgba(26,24,18,.10) 76%)}
.mv-copy{position:absolute;inset:0;display:flex;align-items:center;z-index:2}
.mv-copy .inner{width:100%}
.mv-copy .en{display:block;font-size:12px;letter-spacing:.32em;color:#EDEFC8;margin-bottom:16px;font-weight:700;
  text-shadow:0 1px 12px rgba(0,0,0,.5)}
.mv-copy h1{font-family:var(--serif);font-size:clamp(29px,5vw,52px);line-height:1.42;margin:0 0 20px;
  font-weight:500;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.mv-copy h1 em{font-style:normal;color:#DDE07E}
.mv-copy h1 rt{font-size:.3em;font-weight:400;letter-spacing:.14em;
  color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.mv-copy h1 ruby{ruby-position:over}
.mv-copy p{max-width:540px;margin:0;color:rgba(255,255,255,.94);font-size:15px;
  text-shadow:0 1px 14px rgba(0,0,0,.55)}
/* MV の中の検索。写真の上に載るので、白地の箱を敷いて読めるようにする */
.mv-search{margin-top:26px;max-width:540px;background:rgba(255,255,255,.94);
  border-radius:12px;padding:14px 16px;box-shadow:0 6px 24px rgba(0,0,0,.18)}
.mv-search input,.mv-search button,.mv-search select{font-family:inherit}
@media screen and (max-width:834px){
  .mv-search{margin-top:18px;padding:12px}
}
.mv-dots{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;justify-content:center;
  gap:10px;margin:0;padding:0;list-style:none}
.mv-dots button{width:34px;height:4px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.42);transition:.25s}
.mv-dots button:hover{background:rgba(255,255,255,.7)}
.mv-dots button[aria-current]{background:#fff;width:52px}

@media(prefers-reduced-motion:reduce){
  .mv-slide{transition:none}
}

/* page head */
.phead{background:var(--bg-2);padding:52px 0 44px;border-bottom:1px solid var(--line)}
.phead h1{font-family:var(--serif);font-size:clamp(26px,4vw,40px);margin:0;font-weight:500}
.phead .en{display:block;font-size:11px;letter-spacing:.3em;color:var(--brand-d);margin-top:10px;font-weight:700}
/* パンくずは折り返さず、はみ出したら横スクロールさせる。
   スマホで 2 行になると本文の始まりが押し下げられ、先頭が「ホーム」だけ
   ぽつんと残る形になるため。スクロールバーは出さない */
.crumb{font-size:12px;color:var(--ink-2);padding:14px 0;
  white-space:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.crumb::-webkit-scrollbar{display:none}
.crumb a:hover{color:var(--brand-d)}
.crumb span{margin:0 8px;opacity:.5}
@media screen and (max-width:834px){
  /* .inner の左右パディング分だけ外へ広げ、画面の端まで送れるようにする */
  .crumb{margin:0 -24px;padding-left:24px;padding-right:24px}
}

section{padding:64px 0}
h2.ttl{font-family:var(--serif);font-size:26px;font-weight:500;margin:0 0 8px}
h2.ttl+.sub{color:var(--ink-2);font-size:13px;margin:0 0 32px;letter-spacing:.14em}

/* filter */
.filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px;padding:0;list-style:none}
.filter a{display:inline-block;font-size:13px;padding:8px 16px;border:1px solid var(--line);
  background:var(--white);border-radius:999px;transition:.18s;color:var(--ink-2)}
.filter a:hover{border-color:var(--brand);color:var(--ink)}
.filter a span{opacity:.55;margin-left:6px;font-size:12px}
.filter a[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.filter a[aria-current] span{opacity:.8}
.count{font-size:13px;color:var(--ink-2);margin:0 0 20px}

/* card grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:28px;list-style:none;margin:0;padding:0}
.card{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;transition:.2s}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(80,76,60,.10);border-color:var(--brand-l)}
.card .ph{aspect-ratio:4/3;background:var(--brand-l);display:flex;align-items:center;justify-content:center;
  color:var(--brand-d);font-family:var(--serif);font-size:30px;letter-spacing:.1em}
.card .bd{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-family:var(--serif);font-size:18px;margin:0;font-weight:500;line-height:1.5}
.card .kana{font-size:11px;color:var(--ink-2);letter-spacing:.08em;margin:-6px 0 0}
.card p.sm{font-size:13.5px;color:var(--ink-2);margin:0;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.tags li{font-size:11px;padding:3px 9px;border-radius:4px;background:var(--bg-2);color:var(--ink-2);letter-spacing:.04em}
.tags li.hl{background:var(--brand-l);color:var(--brand-d);font-weight:700}
.tags.lk li{padding:0}
.tags.lk a{display:inline-block;padding:3px 9px;border-radius:4px;background:var(--bg-2);transition:.18s}
.tags.lk a:hover{background:var(--brand-l);color:var(--brand-d)}

/* detail */
.detail{max-width:800px}
.detail .ph{aspect-ratio:16/9;background:var(--brand-l);border-radius:16px;display:flex;
  align-items:center;justify-content:center;color:var(--brand-d);font-family:var(--serif);font-size:44px;margin:0 0 34px}
.detail h1{font-family:var(--serif);font-size:clamp(25px,4vw,36px);margin:0 0 6px;font-weight:500}
.detail .kana{color:var(--ink-2);font-size:13px;margin:0 0 20px;letter-spacing:.1em}
.detail .lead{font-size:17px;color:var(--brand-d);font-family:var(--serif);margin:0 0 26px}
.detail .body{white-space:pre-wrap}
/* 見出しつきの長い本文 */
.body--sec{white-space:normal}
.body--sec h2{font-family:var(--serif);font-size:20px;font-weight:500;margin:38px 0 12px;
  padding-top:22px;border-top:1px solid var(--line);line-height:1.5}
.body--sec h2:first-child{margin-top:0;padding-top:0;border-top:0}
.body--sec p{margin:0 0 16px;line-height:2}
.body--sec p:last-child{margin-bottom:0}
.dl{border-top:1px solid var(--line);margin-top:38px;padding-top:26px}
.dl dl{display:grid;grid-template-columns:104px 1fr;gap:12px 20px;margin:0;font-size:14px}
.dl dt{color:var(--ink-2)}
.dl dd{margin:0}
/* スポットの写真。2枚以上はスライダー (build.py の photos()) */
.photos{margin:0 0 30px;position:relative}
.photos>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;
  display:block;background:var(--brand-l)}
.ph-slides{position:relative;margin:0;padding:0;list-style:none;
  aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--brand-l)}
.ph-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.ph-slide.is-on{opacity:1}
.ph-slide img{width:100%;height:100%;object-fit:cover;display:block}
/* JS が動かないときは 1 枚目だけ見えていればよい */
.ph-slide:first-child{opacity:1}
.ph-slide.is-on{z-index:1}
.ph-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.86);color:var(--base);
  display:flex;align-items:center;justify-content:center;transition:background .2s}
.ph-nav:hover{background:#fff}
.ph-nav--prev{left:12px}
.ph-nav--next{right:12px}
.ph-count{position:absolute;right:12px;bottom:12px;z-index:3;margin:0;
  padding:3px 10px;border-radius:99px;font-size:12px;letter-spacing:.08em;
  background:rgba(0,0,0,.5);color:#fff}
.ph-dots{display:flex;justify-content:center;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.ph-dots button{width:26px;height:4px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:var(--line);transition:.25s}
.ph-dots button:hover{background:var(--ink-2)}
.ph-dots button[aria-current]{background:var(--brand-d);width:40px}
/* 一覧カードのサムネイル。写真が無いスポットは従来の頭文字 (.ph) のまま */
.ph.pic{padding:0;font-size:0}
.ph.pic img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
/* 埋め込みのサイト内検索。外部スクリプトが挿入するので囲みだけ用意する */
.searchwrap{margin:30px 0 8px}
.searchwrap input,.searchwrap button,.searchwrap select{font-family:inherit}
/* 埋め込みフォーム。外部のスクリプトが挿入するので、囲みだけ用意しておく */
.formwrap{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.formwrap input,.formwrap textarea,.formwrap select,.formwrap button{font-family:inherit}
/* 一覧内の区切り (明日香村外) */
.listsep{margin:52px 0 26px;padding-top:30px;border-top:1px solid var(--line)}
.listsep .ttl{font-size:22px;margin-bottom:6px}
.listsep .sub{margin:0;color:var(--ink-2);font-size:13px;letter-spacing:.04em}
/* 詳細ページ下部の回遊 */
.nearby{padding-top:8px;padding-bottom:0}
.nearby .ttl{font-size:22px}
/* トップの「地図から探す」 */
/* 見出しは大きく。英字の「MAP」は置かない代わりに、これ自体で目を引かせる */
.mapttl{font-size:38px;margin:0 0 24px;line-height:1.35}
.spotmap{width:100%;height:680px;background:var(--brand-l);border-radius:16px}
/* 種類のしぼり込み。凡例を兼ねる */
.mapfil{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.mapfil__b{display:flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 14px;border:1px solid var(--line);border-radius:999px;
  background:var(--white);font-size:13px;color:var(--ink-2);line-height:1}
.mapfil__b:hover{border-color:var(--brand-d);color:var(--ink)}
.mapfil__b.is-on{background:var(--ink);border-color:var(--ink);color:var(--white)}
/* 色見本は地図のパネルと同じ角丸 */
.mapfil__sw{display:block;flex:none;width:16px;height:11px;border-radius:3px}
.mapnote{margin:14px 0 0;font-size:13px;color:var(--ink-2);line-height:1.9}
/* ピンを押したときのカード。Google の InfoWindow は
   サイトの CSS リセットで崩れるので自前で出す */
.spotmapwrap{position:relative;margin-top:4px}
/* カードは右上に固定する。左下だと明日香村の中心部 (ピンが密集する場所) に
   ちょうど重なってしまい、見たいものが隠れる (2026-09-07) */
.spotcard{position:absolute;right:24px;top:24px;z-index:2;width:270px;
  background:#fff;border-radius:14px;padding:18px 20px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.18)}
.spotcard__img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;margin:0 0 12px;background:var(--brand-l)}
/* ⚠ display:block を書いた時点で、ブラウザ既定の [hidden]{display:none} が
   負ける。写真のないスポット (酒船石など) に切り替えても前の写真が
   残ったままになっていた (2026-09-07 指摘) */
.spotcard__img[hidden]{display:none}
/* grip のポップアップバナーと同じ閉じるボタン
   (黒丸・白い×・角から少しはみ出す)。白地に薄い×だと気づかれない */
.spotcard__x{position:absolute;top:0;right:0;z-index:3;
  transform:translate(45%,-45%);
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;padding:0;border:0;border-radius:50%;
  background:#000;color:#fff;font-size:16px;line-height:1;cursor:pointer;
  box-shadow:rgba(0,0,0,.3) 2px 2px 5px}
.spotcard__x:hover{opacity:.8}
.spotcard__g{margin:0 0 5px;font-size:11px;font-weight:700;letter-spacing:.1em}
.spotcard__n{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5}
.spotcard__k{margin:3px 0 10px;font-size:11px;color:var(--ink-2);letter-spacing:.08em}
.spotcard__s{margin:0 0 14px;font-size:13px;line-height:1.85;color:var(--ink-2)}
/* サイト共通のボタン (.btn) に合わせる。カード幅いっぱいで押しやすく */
.spotcard__a{display:block;text-align:center;background:var(--brand);color:#fff;
  font-size:13.5px;font-weight:700;letter-spacing:.06em;
  padding:12px 16px;border-radius:999px;transition:.2s}
.spotcard__a:hover{background:var(--brand-d)}
@media screen and (max-width:834px){
  .mapttl{font-size:28px;margin-bottom:18px}
  .spotmap{height:520px}
  /* 画面が狭いときはカードを地図の上いっぱいに */
  .spotcard{left:10px;right:10px;top:10px;width:auto}
}
/* Google マップ */
.gmap{margin-top:56px}
.gmap iframe{width:100%;height:360px;border:0;border-radius:16px;display:block;background:var(--brand-l)}
.gmap .note{margin:12px 0 0;font-size:14px}
.gmap .note a{color:var(--brand-d);border-bottom:1px solid var(--brand-l);padding-bottom:2px}
.gmap .note a:hover{border-color:var(--brand-d)}
.chrono dl{display:grid;grid-template-columns:78px 1fr;gap:0 20px;margin:0;font-size:14px;
  border-top:1px solid var(--line)}
.chrono dt{color:var(--brand-d);font-family:var(--serif);padding:13px 0 0;white-space:nowrap}
.chrono dd{margin:0;padding:13px 0;line-height:1.85;border-bottom:1px solid var(--line)}
.chrono dt{border-bottom:1px solid var(--line);padding-bottom:13px}
.chrono strong{font-weight:600}
.backlink{display:inline-block;margin-top:44px;font-size:14px;color:var(--brand-d);border-bottom:1px solid var(--brand-l);padding-bottom:2px}
.backlink:hover{border-color:var(--brand-d)}

/* feature blocks */
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;list-style:none;padding:0;margin:0}
.feat li{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:28px 24px}
.feat h3{font-family:var(--serif);font-size:18px;margin:0 0 10px;font-weight:500}
.feat p{margin:0;font-size:14px;color:var(--ink-2)}
.feat .no{display:block;font-size:11px;letter-spacing:.2em;color:var(--brand);font-weight:700;margin-bottom:10px}
.bg2{background:var(--bg-2)}
.cta{text-align:center}
.btn{display:inline-block;background:var(--brand);color:#fff;font-weight:700;font-size:14px;
  padding:15px 44px;border-radius:999px;transition:.2s;letter-spacing:.06em}
.btn:hover{background:var(--brand-d)}


/* コラム */
.lbl{display:inline-block;font-size:11px;letter-spacing:.22em;font-weight:700;color:var(--brand-d);
  background:var(--brand-l);padding:5px 12px;border-radius:4px;margin:0 0 16px}
.clist{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.ccard{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.2s}
.ccard:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(80,76,60,.10);border-color:var(--brand-l)}
.ccard a{display:block;padding:0}
.ccard .bd{padding:30px 32px}
.ccard .lbl{margin-bottom:12px}
/* サムネイルがある記事は、写真を左に置いた横並びにする。
   コラム用の写真は無いので、関連スポットの 1 枚目を借りている */
.ccard--pic a{display:grid;grid-template-columns:300px 1fr;align-items:stretch}
/* ⚠ 横並びのときに aspect-ratio を付けない。grid で高さいっぱいに伸びるので、
   aspect-ratio があると「高さ × 4/3」で幅が決まり、300px の列をはみ出して
   本文側の余白を食う (左の余白がほぼ無くなっていた / 2026-09-12) */
/* ⚠ 写真を絶対配置にして、行の高さを決めさせない。
   ふつうに置くと、縦位置の写真 (幅300px なら高さ400px) がカードを
   押し広げて、その 1 枚だけ背の高いカードになる (2026-09-12) */
.ccard--pic .ph{position:relative;min-height:210px;background:var(--brand-l)}
.ccard--pic .ph.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.ccard .tags{margin-top:16px}
.ccard h3{font-family:var(--serif);font-size:23px;font-weight:500;margin:0 0 10px;line-height:1.55}
.ccard p{margin:0;font-size:14px;color:var(--ink-2)}

.article h2{font-family:var(--serif);font-size:21px;font-weight:500;margin:44px 0 14px;
  padding-left:15px;border-left:3px solid var(--brand);line-height:1.6}
.article p{margin:0 0 20px}
.article .lead{font-size:17px;color:var(--brand-d);font-family:var(--serif);margin:0 0 8px}
.article h1{margin-bottom:14px}

/* スポット詳細からコラムへの導線 */
.colref{margin-top:40px;padding:26px 28px;background:var(--bg-2);border-radius:14px}
.colref .lbl{margin:0 0 12px}
.colref ul{list-style:none;margin:0;padding:0}
.colref li+li{margin-top:14px}
/* サムネイル + タイトル + 抜粋。タイトルだけだと何の記事か分からない */
.colref a{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;transition:.2s}
.colref .th{display:block;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:var(--brand-l)}
.colref .th img{width:100%;height:100%;object-fit:cover;display:block}
.colref .bd{display:block;min-width:0}
.colref .t{display:block;font-family:var(--serif);font-size:16.5px;line-height:1.5}
.colref .ex{display:block;margin-top:5px;font-size:12.5px;color:var(--ink-2);line-height:1.7}
.colref a:hover .t{color:var(--brand-d)}

@media(max-width:820px){
  .ccard .bd{padding:24px 22px}
  .ccard--pic a{grid-template-columns:1fr}
  .ccard--pic .ph{aspect-ratio:16/9;min-height:0}
  .ccard h3{font-size:19px}
  .article h2{font-size:19px;margin-top:36px}
  .colref{padding:22px 20px}
  .colref a{grid-template-columns:80px 1fr;gap:12px}
  .colref .t{font-size:15px}
}

/* footer */
.ft{border-top:1px solid var(--line);background:var(--bg-2);padding:52px 0 34px;margin-top:20px}
.ft .row{display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between}
.ft img{width:150px;margin-bottom:12px}
.ft p{margin:0;font-size:13px;color:var(--ink-2)}
.ft ul{list-style:none;margin:0;padding:0;display:flex;gap:24px;font-size:13px;flex-wrap:wrap}
.ft a:hover{color:var(--brand-d)}
.copy{margin-top:34px;font-size:12px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:18px}

@media(max-width:820px){
  .mv{height:min(74vh,125vw);min-height:340px}
  .mv-copy p{font-size:14px}
  .mv-dots{bottom:18px}

  .hd .inner{height:60px}
  .hd .logo img{width:124px}
  .hd nav{position:fixed;inset:60px 0 auto;background:var(--bg);border-bottom:1px solid var(--line);
    display:none;padding:10px 24px 20px}
  .hd nav.on{display:block}
  .hd nav ul{flex-direction:column;gap:0}
  .hd nav li{border-bottom:1px solid var(--line)}
  .hd nav a{display:block;padding:14px 0;border:0}
  .navbtn{display:block}
  section{padding:48px 0}
  .ph-nav{width:36px;height:36px}
  .gmap iframe{height:300px}
  .dl dl{grid-template-columns:1fr;gap:4px 0}
  .dl dt{margin-top:12px}
}

/* コラム詳細のタグ。リード文のすぐ下に置く */
.coltags{margin:0 0 34px}
/* コラム詳細の写真。関連スポットから借りている場合は、どこの写真かを添える */
.colhero{margin:0 0 34px}
.colhero img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px}
.colhero figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
/* 本文中の写真。縦横は元の比率のまま出す (花の接写は縦位置が多い) */
.colfig{margin:26px 0 30px}
.colfig img{display:block;width:100%;height:auto;max-height:76vh;object-fit:contain;
  border-radius:14px;background:var(--bg-2)}
.colfig figcaption{margin-top:10px;font-size:12.5px;color:var(--ink-2);letter-spacing:.04em}
/* 一覧のページ送り */
.pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:48px 0 0}
.pager__n,.pager__a{display:inline-block;font-size:13px;padding:8px 14px;border:1px solid var(--line);
  background:var(--white);border-radius:8px;color:var(--ink-2);transition:.18s;line-height:1}
.pager__n{min-width:40px;text-align:center}
.pager a:hover{border-color:var(--brand);color:var(--ink)}
.pager .is-on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.pager .is-off{opacity:.35}
@media screen and (max-width:834px){
  .pager{gap:6px;margin-top:36px}
  .pager__n,.pager__a{padding:7px 11px;font-size:12.5px}
  .pager__n{min-width:34px}
}
/* コラムの公開日 */
.cdate{margin:0 0 10px;font-size:12px;color:var(--ink-2);letter-spacing:.08em}
.cdate--d{margin:-2px 0 20px;font-size:13px}
.ccard .cdate{margin:0 0 8px}
.cdate__s{margin:0 7px;opacity:.45}
/* スポット詳細は本文のあと、所在地の前に置く */
.cdate--f{margin:30px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:12.5px}

/* フッターの運営元サービス。サイト内ナビと同じ列に見えないよう行を分ける */
.ftsv{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.ftsv ul{gap:10px 24px}
.ftsv a{color:var(--ink-2)}
.ftsv a span{color:var(--ink-2);opacity:.8}

/* スポット詳細の下に置く広告枠 (ワプラボ)。
   ここまちのキーカラーには染めない。村の情報と地続きに見えると記事の一部に
   受け取られるため、ワプラボのダークチェリー (--ad-key) で固定する。 */
.adbox{--ad-key:#9b2242;margin:44px 0 0;border:2px solid var(--ad-key);border-radius:12px;overflow:hidden;
  background:var(--white)}
.adbox__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--ad-key);color:#fff;
  padding:14px 22px}
.adbox__badge{flex:none;font-size:11px;font-weight:700;letter-spacing:.08em;
  background:rgba(255,255,255,.22);padding:4px 10px;border-radius:10px}
.adbox__ttl{margin:0;font-family:var(--sans);font-size:16px;font-weight:700;color:#fff;line-height:1.5}
.adbox__ad{flex:none;margin-left:auto;font-size:11px;font-weight:700;letter-spacing:.1em;color:#fff;
  background:rgba(0,0,0,.18);padding:3px 10px;border-radius:4px}
.adbox__body{display:flex;align-items:center;gap:22px;background:#fdf4f6;padding:20px 22px}
.adbox__logo{flex:0 0 200px}
.adbox__logo img{width:100%;height:auto;display:block}
.adbox__main{flex:1;min-width:0}
.adbox__lead{margin:0 0 12px;font-size:14px;line-height:1.85;color:var(--ink)}
.adbox__lead strong{color:var(--ad-key)}
.adbox__chips{list-style:none;margin:0 0 16px;padding:0;display:flex;gap:10px;flex-wrap:wrap}
.adbox__chips li{background:rgba(155,34,66,.1);color:var(--ad-key);font-weight:700;font-size:14px;
  line-height:1.5;padding:7px 16px;border-radius:8px}
.adbox__chips b{font-size:1.3em;margin:0 .08em}
.adbox__btn{display:inline-flex;align-items:center;gap:8px;background:var(--ad-key);color:#fff;
  font-weight:700;font-size:13px;padding:9px 20px;border-radius:30px;transition:.2s}
.adbox__btn:hover{opacity:.88;color:#fff}
@media(max-width:640px){
  .adbox__head{padding:12px 16px}
  .adbox__ad{margin-left:0}
  .adbox__body{display:block;padding:18px 16px}
  .adbox__logo{width:160px;margin:0 0 14px}
  .adbox__chips li{font-size:13px;padding:6px 12px}
}