/* ======================================================================
   パターン⑫ 縦書き新聞型（2026-11-10 作り直し）
   生成りの新聞紙・墨色の文字・差し色1色（テーマの強調色）。書体は明朝（Noto Serif JP）だけ。
   縦書き：題字・大見出し・一面の本文（段組み）。下の章は横書きの新聞の面。
   写真は白黒。写真の上に文字はのせない。
   ====================================================================== */
body[data-pattern="12"]{
  --paper:#f4f0e6;--ink:#1f1d1a;--ink2:#4a4640;--line:#2b2824;
  --hi:color-mix(in srgb,var(--red) 78%,#000);
  background:var(--paper);color:var(--ink);
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
}
body[data-pattern="12"] h1,body[data-pattern="12"] h2,body[data-pattern="12"] h3{font-family:inherit}
body[data-pattern="12"] .sample-notice{background:#fff;border:1px solid var(--line);color:var(--ink);border-radius:0}

/* ---- ヘッダー ---- */
.p12n-header{background:rgba(244,240,230,.97);box-shadow:0 1px 0 var(--line),0 4px 0 var(--paper),0 5px 0 var(--line)}
.p12n-logo{font-weight:900;font-size:20px;letter-spacing:.08em;color:var(--ink)}
.p12n-nav{gap:20px}
.p12n-nav a{font-size:15px;font-weight:700;color:var(--ink)}
.p12n-nav a small{display:inline-block;font-size:12px;color:var(--hi);margin-right:6px;font-weight:900}
.p12n-nav a.p12n-nav__cta{background:var(--hi);color:#fff;padding:8px 18px;border-radius:0}
.p12n-nav a:hover{color:var(--hi)}
.p12n-nav a.p12n-nav__cta:hover{color:#fff;filter:brightness(1.1)}
body[data-pattern="12"] .menu-btn span{background:var(--ink)}

/* ---- 一面 ---- */
.p12n-front{padding:100px 0 40px}
.p12n-front .sample-notice{margin-bottom:12px}
.p12n-dateline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 16px;font-size:14px;font-weight:700;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:6px}
.p12n-page{
  --fh:540px;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"col head dai";
  border-bottom:1px solid var(--line);margin-top:4px
}
.p12n-dai{grid-area:dai;writing-mode:vertical-rl;background:var(--hi);color:#fff;display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 18px;margin:18px 0;height:calc(var(--fh) - 36px);box-sizing:border-box}
.p12n-dai small{font-size:15px;font-weight:700;letter-spacing:.2em}
.p12n-dai b{font-size:52px;font-weight:900;letter-spacing:.12em;line-height:1.1}
.p12n-dai span{font-size:20px;font-weight:900;letter-spacing:.4em;border:2px solid #fff;padding:12px 6px;align-self:flex-end}
.p12n-head{grid-area:head;writing-mode:vertical-rl;font-weight:900;font-size:42px;line-height:1.4;letter-spacing:.06em;color:var(--ink);height:var(--fh);padding:22px 24px;box-sizing:border-box;border-left:1px solid var(--line)}
.p12n-head span{display:block}
.p12n-head span:nth-child(2){padding-top:.6em}
.p12n-col{grid-area:col;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:20px 24px 20px 0;align-items:start}
.p12n-photo{margin:0;grid-column:2;grid-row:1;width:min(400px,100%)}
.p12n-img{display:block;width:100%;height:calc(var(--fh) - 72px);object-fit:cover;object-position:center 15%;filter:grayscale(1) contrast(1.08)}
.p12n-photo figcaption{font-size:13px;color:var(--ink2);margin-top:6px;line-height:1.6}
.p12n-side{grid-column:1;grid-row:1;border-top:3px solid var(--ink)}
.p12n-sub{font-weight:900;font-size:24px;line-height:1.5;color:var(--hi);padding:12px 0;border-bottom:1px solid var(--line)}
.p12n-side__title{font-weight:900;font-size:14px;letter-spacing:.15em;margin-top:16px;padding-bottom:4px;border-bottom:1px solid var(--line)}
.p12n-side__list{list-style:none;counter-reset:pl}
.p12n-side__list li{counter-increment:pl;border-bottom:1px dotted var(--ink2)}
.p12n-side__list a{display:flex;gap:10px;padding:8px 0;font-weight:700;font-size:16px}
.p12n-side__list a::before{content:counter(pl);color:var(--hi);font-weight:900;min-width:1em}
.p12n-side__news{font-size:16px;font-weight:700;line-height:1.6;padding-top:8px}
.p12n-side a:hover{color:var(--hi)}

/* 一面の本文：縦書き（右から左へ読む）。長いときは、この枠の中だけ横に動かせる */
.p12n-leadwrap{overflow-x:auto;direction:rtl;border-bottom:4px double var(--line)}
.p12n-lead{direction:ltr;writing-mode:vertical-rl;height:27em;padding:22px 4px;font-size:16px;line-height:2;letter-spacing:.05em;width:max-content;max-width:none;margin-left:auto}
.p12n-lead p{margin:0 0 0 .6em;text-indent:1em;text-align:justify}
.p12n-lead__title{font-weight:900;font-size:28px;line-height:1.45;margin-left:1em;color:var(--ink)}
.p12n-lead__title br.sp{display:none}
.p12n-pull{font-weight:900;font-size:20px;color:var(--hi);text-indent:0 !important;border-right:3px solid var(--hi);padding:0 8px 0 0;margin:0 .6em 0 1em !important}
.p12n-sign{text-align:end;font-weight:700;text-indent:0 !important;margin-right:1em !important}

/* きょうの紙面 */
.p12n-index{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line)}
.p12n-index__title{font-weight:900;font-size:15px;background:var(--ink);color:var(--paper);padding:4px 12px}
.p12n-index ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px}
.p12n-index a{font-size:15px;font-weight:700}
.p12n-index a b{color:var(--hi);margin-right:6px}

/* ---- 面ごとの頭 ---- */
.p12n-sec{padding:56px 0 24px;background:none}
.p12n-folio{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:4px double var(--line);border-bottom:1px solid var(--line);padding:6px 0;font-size:14px;font-weight:700;color:var(--ink2)}
.p12n-folio__men{background:var(--hi);color:#fff;font-weight:900;padding:2px 12px;font-size:15px}
.p12n-folio__date{margin-left:auto}
body[data-pattern="12"] .p12n-h2{font-weight:900;font-size:clamp(28px,3.4vw,40px);text-align:left;margin:18px 0 22px;color:var(--ink);letter-spacing:.06em}
body[data-pattern="12"] .p12n-h2::after{display:none}

/* 社説（取り組み）：縦書きの見出し＋横書きの本文 */
.p12n-editorial{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.p12n-ed{display:flex;flex-direction:row-reverse;gap:16px;padding:20px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:220px}
.p12n-ed h3{writing-mode:vertical-rl;font-weight:900;font-size:24px;letter-spacing:.1em;line-height:1.3;border-left:2px solid var(--ink);padding-left:12px;flex:none}
.p12n-ed p{font-size:15px;line-height:1.95;text-align:justify}
.p12n-ed.is-hot{background:#fff}
.p12n-ed.is-hot h3{color:var(--hi);border-left-color:var(--hi)}
.p12n-ed__mark{display:inline-block;background:var(--hi);color:#fff;font-size:13px;padding:0 8px;margin-right:8px}

/* 議会面（問／答） */
.p12n-gikai__lead{font-size:16px;line-height:1.9;margin-bottom:20px;max-width:760px}
.p12n-qa{columns:2 340px;column-gap:40px;column-rule:1px solid var(--line)}
.p12n-qa__item{break-inside:avoid;padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.p12n-kicker{font-size:13px;font-weight:700;color:var(--ink2);display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}
.p12n-kicker span{border:1px solid var(--ink2);padding:0 6px}
.p12n-kicker span.is-hot{border-color:var(--hi);color:var(--hi)}
.p12n-qa__item h3{font-weight:900;font-size:21px;line-height:1.5;margin-bottom:8px}
.p12n-qa__item p:not(.p12n-kicker){font-size:15px;line-height:1.9;margin-top:6px;padding-left:2.2em;text-indent:-2.2em}
.p12n-q,.p12n-a{display:inline-block;width:1.7em;text-align:center;font-weight:900;margin-right:.5em;text-indent:0;color:#fff;background:var(--ink)}
.p12n-a{background:var(--hi)}
.p12n-table{width:100%;border-collapse:collapse;font-size:15px}
.p12n-table caption{text-align:left;font-weight:900;margin-bottom:6px}
.p12n-table th,.p12n-table td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.p12n-table th{width:12em;background:#fff}
.p12n-table small{display:block;font-weight:500;color:var(--ink2)}
body[data-pattern="12"] .cv,body[data-pattern="12"] .shorts{margin-top:28px}

/* 地域面（活動報告）：トップ記事＋段組みの記事 */
.p12n-news{columns:3 260px;column-gap:32px;column-rule:1px solid var(--line)}
.p12n-art{break-inside:avoid;padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.p12n-art a{display:block}
.p12n-art a:hover h3{color:var(--hi)}
.p12n-art img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;filter:grayscale(1);margin-bottom:10px;border:1px solid var(--line)}
.p12n-art h3{font-weight:900;font-size:18px;line-height:1.5;margin-bottom:6px}
.p12n-art.is-top h3{font-size:24px}
.p12n-art p:not(.p12n-kicker){font-size:15px;line-height:1.85;text-align:justify}
.p12n-more{margin-top:12px;font-weight:700}

/* ひと（プロフィール） */
.p12n-hito{display:grid;grid-template-columns:auto 220px 1fr;gap:28px;align-items:start;border:1px solid var(--line);background:#fff;padding:26px}
.p12n-hito__label{writing-mode:vertical-rl;font-weight:900;font-size:44px;letter-spacing:.3em;color:var(--paper);background:var(--ink);padding:16px 10px}
.p12n-hito__photo{margin:0}
.p12n-hito__photo img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 18%;filter:grayscale(1)}
.p12n-hito__name{font-weight:900;font-size:30px;line-height:1.3}
.p12n-hito__name small{display:block;font-size:14px;font-weight:500;color:var(--ink2);letter-spacing:.2em;margin-top:4px}
.p12n-hito__lines{margin:10px 0 14px;font-weight:700;line-height:1.8}
.p12n-hito__table div{display:grid;grid-template-columns:7em 1fr;gap:12px;padding:10px 0;border-top:1px dotted var(--ink2);font-size:15px}
.p12n-hito__table dt{font-weight:900}
.p12n-hito__motto{margin-top:14px;font-weight:700}
.p12n-hito__motto b{display:inline-block;background:var(--hi);color:#fff;font-size:13px;padding:0 8px;margin-right:10px}

/* 読者の声（相談）：切り取り線の応募欄 */
.p12n-voice{padding:56px 0 72px}
.p12n-coupon{position:relative;border:2px dashed var(--ink);background:#fff;padding:40px 32px 34px;text-align:center;max-width:820px;margin:0 auto}
.p12n-coupon::before{content:"✂";position:absolute;top:-15px;left:28px;font-size:22px;line-height:1;background:var(--paper);padding:0 6px;color:var(--ink)}
.p12n-coupon__label{display:inline-block;font-weight:900;font-size:15px;color:#fff;background:var(--hi);padding:4px 16px;letter-spacing:.2em}
body[data-pattern="12"] .p12n-coupon__title{font-weight:900;font-size:clamp(24px,3vw,34px);line-height:1.5;margin:14px 0 10px;color:var(--ink)}
body[data-pattern="12"] .p12n-coupon__title::after{display:none}
.p12n-coupon__lead{font-size:16px;line-height:1.9;margin-bottom:22px}
.p12n-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 40px;background:var(--ink);color:var(--paper) !important;font-weight:900;font-size:17px;letter-spacing:.1em}
.p12n-btn:hover{background:var(--hi)}
.p12n-coupon__info{margin-top:16px;font-size:15px}
.p12n-sns{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.p12n-sns__link{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);padding:6px 16px;font-size:14px}
.p12n-sns__link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}

/* フッター（奥付） */
.p12n-footer{background:var(--ink);color:var(--paper);border-top:0}
.p12n-footer__name{font-weight:900;font-size:20px;letter-spacing:.1em;margin-bottom:6px}
.p12n-footer__office{font-size:14px;line-height:1.9}
.p12n-footer a{color:var(--paper);text-decoration:underline}
body[data-pattern="12"] .float-cta{background:var(--hi);color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.25);border-radius:0;font-family:inherit}

/* ---- タブレット・スマホ ---- */
@media (max-width:1000px){
  .p12n-col{grid-template-columns:1fr}
  .p12n-photo{grid-column:1;width:100%}
  .p12n-side{grid-row:2}
  .p12n-img{height:auto;aspect-ratio:4/5}
  .p12n-page{--fh:480px}
}
@media (max-width:768px){
  .p12n-front{padding:84px 0 28px}
  .p12n-nav a small{display:none}
  body[data-pattern="12"] .p12n-nav{background:var(--paper)}
  .p12n-page{--fh:auto;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"head dai" "col col"}
  .p12n-dai{height:auto;margin:12px 0;padding:18px 12px;gap:10px}
  .p12n-dai b{font-size:36px}
  .p12n-dai span{font-size:17px;padding:8px 4px}
  .p12n-dai small{font-size:13px}
  .p12n-head{height:330px;font-size:28px;border-left:0;padding:14px 10px;justify-self:end}
  .p12n-col{padding:14px 0;border-top:1px solid var(--line)}
  .p12n-photo{max-width:420px;margin:0 auto}
  /* スマホでは本文は横書き（読みやすさ優先） */
  .p12n-leadwrap{overflow:visible;direction:ltr}
  .p12n-lead{writing-mode:horizontal-tb;height:auto;width:auto;padding:20px 0}
  .p12n-lead p{margin:0 0 1em}
  .p12n-lead__title{margin:0 0 .6em;font-size:24px}
  .p12n-pull{border-right:0;border-left:3px solid var(--hi);padding:0 0 0 10px;margin:0 0 1em !important}
  .p12n-sign{margin:0 !important}
  .p12n-ed{min-height:0}
  .p12n-hito{grid-template-columns:1fr;padding:20px}
  .p12n-hito__label{writing-mode:horizontal-tb;font-size:22px;padding:4px 14px;justify-self:start;letter-spacing:.3em}
  .p12n-hito__photo{max-width:240px}
  .p12n-hito__table div{grid-template-columns:6em 1fr}
  .p12n-coupon{padding:34px 18px 26px}
  .p12n-folio__date{margin-left:0}
}

/* 議会動画・質問一覧への案内も、新聞の見た目に */
body[data-pattern="12"] .cv{--cv-bg:#fff;--cv-ink:var(--ink);--cv-line:var(--line);--cv-thumb:var(--ink);--cv-radius:0;max-width:none}
body[data-pattern="12"] .cv__title{font-weight:900;border-top:2px solid var(--ink);padding-top:8px}
body[data-pattern="12"] .cv__go{color:var(--hi)}
body[data-pattern="12"] .cv__date,body[data-pattern="12"] .cv__lead,body[data-pattern="12"] .cv__note{color:var(--ink2)}
body[data-pattern="12"] .cv__topics span{border-radius:0;background:none;border:1px solid var(--ink2);color:var(--ink)}
body[data-pattern="12"] .q-entry{justify-content:flex-start}
body[data-pattern="12"] .q-entry__btn{background:var(--ink);color:var(--paper);border-radius:0;box-shadow:none}
body[data-pattern="12"] .q-entry__n{background:var(--paper);color:var(--ink);border-radius:0}