/* jun-koukoku — 純広告の枠（管轄ガイド 10 サイト共通・2026-10-17）
 * 色と書体はサイトの変数を借り、枠だけを赤で囲う。原本は 05_scripts/_shared/jun-koukoku/jun-ad.css */
:root { --jad-red: #C62828; --jad-ink: var(--sumi, #1A1614); --jad-sub: var(--color-brown, #6B5A48); --jad-paper: var(--bg-craft-light, #F8F0E5); }
/* 赤は枠とラベルだけ。中身はサイトの墨と紙の色で組む（2026-10-17 ユーザー指示） */
/* 広告の中は広告主の文字が入るので、サイトのサブセット書体ではなく端末の書体で組む（字の欠けで書体が混ざらないように） */
.jad, .jad-side { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif; letter-spacing: 0.02em; }

.jad { position: relative; margin: 2rem 0 1.75rem; padding: 1.5rem 1.1rem 1.1rem;
  border: 3px solid var(--jad-red); border-radius: var(--radius, 10px);
  background: var(--bg-white-card, #fff); }
.jad__label { position: absolute; top: -0.85em; left: 1rem; margin: 0; padding: 0.05em 0.75em;
  background: var(--jad-red); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1.6;
  letter-spacing: 0.14em; border-radius: 3px; }
.jad a, .jad-side a { border: none; text-decoration: none; }

.jad-card { display: grid; gap: 1rem; }
@media (min-width: 640px) { .jad-card { grid-template-columns: minmax(0, 45%) minmax(0, 1fr); align-items: center; } }
.jad-card__img img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 6px; }
.jad-card__name { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.45; color: var(--jad-ink); }
.jad-card__catch { margin: 0.3rem 0 0.4rem; font-size: 0.9rem; font-weight: 700; line-height: 1.6; color: var(--jad-sub); }
.jad-card__desc { margin: 0 0 0.85rem; font-size: 0.86rem; line-height: 1.75; }
.jad-card__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0; }
/* ボタンは PC・スマホとも中央にそろえる。募集の枠も通常の広告も同じ（2026-10-17 ユーザー指示） */
.jad .jad-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 0.45rem 1.15rem; border: 2px solid var(--jad-ink); border-radius: 999px;
  font-size: 0.88rem; font-weight: 700; line-height: 1.4; }
.jad .jad-btn--web { background: var(--jad-ink); color: #fff; }
.jad .jad-btn--web:hover { opacity: 0.85; }
.jad .jad-btn--tel { background: #fff; color: var(--jad-ink); font-variant-numeric: tabular-nums; }
.jad .jad-btn--tel:hover { background: var(--jad-paper); }

/* 空き枠：画像の代わりに紙色の面を置き、通常の広告と同じ組み方にする */
.jad-wanted__img { display: block; }
.jad-wanted__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  aspect-ratio: 1200 / 630; border: 1px dashed rgba(0,0,0,0.25); border-radius: 6px; background: var(--jad-paper); color: var(--jad-sub); text-align: center; padding: 0.5rem; }
.jad-wanted__ph-main { font-size: 1.15rem; font-weight: 700; color: var(--jad-ink); letter-spacing: 0.12em; }
.jad-wanted__ph-sub { font-size: 0.74rem; }

/* サイドバー：PC（1200px 以上）でだけ、本文の列の外側に足す。トップページなど都道府県の無いページには出ない
 * 2026-10-17 是正：本文の列は元の幅（--maxw・既定 48rem＝768px）のまま。列を細くすると本文の部品が中間の幅で崩れたため。
 * ヘッダーとパンくずは、サイドバーのあるページでだけ同じ幅に広げて端をそろえる */
.jad-side { display: none; }
@media (min-width: 1200px) {
  .jad-layout--side { --jad-w: calc(var(--maxw, 48rem) + 2rem + 318px + 1.25rem);
    display: grid; grid-template-columns: minmax(0, var(--maxw, 48rem)) 318px; column-gap: 2rem;
    max-width: var(--jad-w); margin: 0 auto; padding-right: 1.25rem; }
  .jad-layout--side > main, .jad-layout--side > .container { max-width: none; width: auto; margin: 0; min-width: 0; }
  body:has(.jad-layout--side) .site-header__inner,
  body:has(.jad-layout--side) .breadcrumb { max-width: calc(var(--maxw, 48rem) + 2rem + 318px + 1.25rem); }
  .jad-side { display: block; position: relative; z-index: 1; padding-top: 2.5rem; }
}
.jad-side__box { position: relative; padding: 1.4rem 6px 6px; border: 3px solid var(--jad-red);
  border-radius: var(--radius, 10px); background: var(--bg-white-card, #fff); }
.jad-side__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.jad-side__list img { display: block; width: 300px; height: 100px; margin: 0 auto; }
.jad-side a.jad-side__wanted { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; width: 300px; height: 250px; margin: 0 auto; padding: 1rem; border: 1px dashed rgba(0,0,0,0.25); border-radius: 6px;
  background: var(--jad-paper); color: var(--jad-ink); text-align: center; line-height: 1.45; }
.jad-side a.jad-side__wanted:hover { background: #fff; }
.jad-side__wanted-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.2em; color: var(--jad-sub); }
.jad-side__wanted-title { font-size: 1.02rem; font-weight: 700; }
.jad-side__wanted-price { font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.jad-side__wanted-note { font-size: 0.7rem; color: var(--jad-sub); }
.jad-side__wanted-price small { font-size: 0.68rem; font-weight: 500; margin-left: 0.15em; color: var(--jad-sub); }
.jad-side__wanted-cta { margin-top: 0.3rem; padding: 0.3rem 1.1rem; border-radius: 999px; background: var(--jad-ink);
  color: #fff; font-size: 0.8rem; font-weight: 700; }
/* サイドバーの広告枠の下の AdSense（赤枠なし・サイドバーが出るときだけ配信を求める） */
.jad-side .jad-side__adsense { margin: 1.5rem 0 0; }

/* 広告募集ページ */
.jad-page__sec { margin: 2.5rem 0; }
.jad-page__sec h2 { margin: 0 0 1rem; }
.jad-page__sec h3 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.jad-table-wrap { margin: 0 0 0.75rem; }
.jad-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; line-height: 1.6; background: var(--bg-white-card, #fff); }
.jad-table th, .jad-table td { padding: 0.6rem 0.7rem; border: 1px solid rgba(0,0,0,0.12); text-align: left; vertical-align: top; }
.jad-table thead th { background: var(--jad-ink); color: #fff; font-weight: 700; }
.jad-table tbody th { font-weight: 700; }
.jad-num { white-space: nowrap; font-weight: 700; color: var(--jad-ink); }
.jad-num small { font-weight: 400; color: inherit; }
@media (max-width: 640px) {
  .jad-table thead { display: none; }
  .jad-table, .jad-table tbody, .jad-table tr, .jad-table th, .jad-table td { display: block; width: 100%; }
  /* スマホでは表の白い地を外し、白は各カード（行）の中だけにする。カードの間はページの地の色 */
  .jad-table { background: transparent; }
  .jad-table tr { margin: 0 0 0.75rem; border: 1px solid rgba(0,0,0,0.18); border-radius: 8px; overflow: hidden; background: var(--bg-white-card, #fff); }
  .jad-table th, .jad-table td { border: none; border-top: 1px solid rgba(0,0,0,0.08); }
  .jad-table tbody th { border-top: none; background: var(--jad-paper); }
  .jad-table td:nth-of-type(1)::before { content: "掲載するページ："; font-weight: 700; }
  .jad-table td:nth-of-type(2)::before { content: "枠数："; font-weight: 700; }
  .jad-table td:nth-of-type(3)::before { content: "表示："; font-weight: 700; }
  .jad-table td:nth-of-type(4)::before { content: "料金："; font-weight: 700; }
  .jad-num { white-space: normal; }
  .jad-num br { display: none; }
}
.jad-note { font-size: 0.82rem; color: var(--color-brown, #6b5a48); line-height: 1.75; }
.jad-dl { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 0.5rem 1rem; margin: 0; font-size: 0.92rem; }
.jad-dl dt { font-weight: 700; }
.jad-dl dd { margin: 0; }
@media (max-width: 480px) { .jad-dl { grid-template-columns: 1fr; gap: 0.1rem; } .jad-dl dd { margin-bottom: 0.6rem; } }
.jad-flow { padding-left: 1.4em; }
.jad-flow li { margin: 0.35rem 0; }
.jad-apply { padding: 1.5rem 1.1rem; border: 3px solid var(--jad-red); border-radius: var(--radius, 10px); background: var(--bg-white-card, #fff); }
.jad-apply__target { margin: 0 0 0.75rem; padding: 0.6rem 0.8rem; background: var(--jad-paper); border-radius: 6px; font-weight: 700; }
.jad-apply__taken { margin: 0 0 0.75rem; color: var(--jad-red); font-weight: 700; }
.jad-apply__iframe { display: block; width: 100%; height: 2500px; border: 0; background: #fff; }
@media (max-width: 640px) { .jad-apply__iframe { height: 3100px; } }

/* 広告掲載のご案内の「表示例」 */
.jad-ph { display: flex; align-items: center; justify-content: center; text-align: center; color: var(--jad-sub);
  font-size: 0.78rem; line-height: 1.5; border-radius: 6px;
  background: repeating-linear-gradient(45deg, #EFE7DA, #EFE7DA 8px, #E7DDCD 8px, #E7DDCD 16px); }
.jad-ph--top { aspect-ratio: 1200 / 630; width: 100%; }
.jad-ph--side { width: 300px; height: 100px; margin: 0 auto; }
.jad-ph--wanted { width: 300px; height: 250px; margin: 0 auto; border: 1px dashed rgba(0,0,0,0.25); background: var(--jad-paper); }
.jad--example .jad-btn { cursor: default; }
.jad-side.jad-side--example { display: block; width: 318px; max-width: 100%; margin: 0 auto; padding: 0; }
@media (max-width: 360px) { .jad-side--example .jad-ph--side, .jad-side--example .jad-ph--wanted { width: 100%; } }
.jad-wires { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; align-items: flex-end; margin: 0 0 1rem; }
.jad-wire-fig { margin: 0; text-align: center; }
.jad-wire-fig figcaption { margin-top: 0.4rem; font-size: 0.78rem; color: var(--jad-sub); }
.jad-wire { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(0,0,0,0.2); border-radius: 8px; background: var(--bg-white-card, #fff); }
.jad-wire--pc { grid-template-columns: 1fr 86px; width: 300px; }
.jad-wire--sp { width: 130px; }
.jad-wire__main, .jad-wire__side { display: flex; flex-direction: column; gap: 6px; }
.jad-wire__blk { display: block; border-radius: 3px; background: #E9E1D3; font-size: 0.62rem; color: var(--jad-sub); line-height: 1.2; }
.jad-wire__blk--img { height: 40px; }
.jad-wire__blk--title { height: 10px; width: 70%; }
.jad-wire__blk--line { height: 6px; }
.jad-wire__blk--card { padding: 8px 4px; }
.jad-wire__blk--small { height: 30px; }
.jad-wire__ad { display: block; padding: 8px 4px; border: 2px solid var(--jad-red); border-radius: 4px; color: var(--jad-red); font-size: 0.62rem; font-weight: 700; line-height: 1.3; }
.jad-wire__ad--side { padding: 14px 4px; }

@media print { .jad, .jad-side { display: none !important; } }

/* 2026-10-20 ユーザー指示：AdSense の見出し「スポンサーリンク」は、サイドバーの 3 連では最初の 1 枠だけに。
   下部のインフィード広告（.ad-unit--infeed・adsense-infeed.njk）には付けない */
.jad-side__adsense ~ .jad-side__adsense::before,
.ad-unit--infeed::before { content: none; }

/* 2026-10-20 ユーザー指示「余白はむしろいらない」：下部のインフィード広告 5 連は間を空けずに続ける（5 連の外側の余白はそのまま） */
.ad-unit--infeed:has(+ .ad-unit--infeed) { margin-bottom: 0; }
.ad-unit--infeed + .ad-unit--infeed { margin-top: 0; }

/* 2026-10-20 ユーザー指示「詰めておいて」：サイドバーの AdSense 3 連は間を空けずに続ける（純広告の枠との間の 1.5rem は残す） */
.jad-side .jad-side__adsense + .jad-side__adsense { margin-top: 0; }