/* =========================================================
   お知らせの一覧(/news/)と記事(single.php)── 第30回 Z-2
   元:院長フォルダ faq/news-v1.html・news-article-v1.html(モック v2)
   分類の札(.oc-news-tag)はトップの新着でも使うので base.css
   ========================================================= */

/* 一覧:日付・札・題名の行(行ぜんたいが記事へのリンク) */
.oc-news-list{list-style:none; margin:0; padding:0; max-width:820px; border-top:1px solid rgba(27,32,135,.16)}
.oc-news-list li{border-bottom:1px solid rgba(33,33,33,.08)}
.oc-news-row{display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; gap:6px 16px; padding:18px 6px; color:var(--ink); text-decoration:none; -webkit-tap-highlight-color:transparent; transition:background-color .25s var(--ease)}
.oc-news-row time{font-size:.92rem; letter-spacing:.06em; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}
/* 題名:サイトのリンクと同じ淡い赤のマーカー(触れる・押すと文字の高さまで広がる) */
.oc-news-row__t{justify-self:start; font-weight:500; letter-spacing:.04em; line-height:1.7; background-image:linear-gradient(var(--oc-mk-c),var(--oc-mk-c)); background-repeat:no-repeat; background-position:0 100%; background-size:100% 38%; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .25s ease}
.oc-news-row:active .oc-news-row__t,.oc-news-row:focus-visible .oc-news-row__t{background-size:100% 100%}
.oc-news-row:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
@media (hover:hover){ .oc-news-row:hover .oc-news-row__t{background-size:100% 100%} }
@media (max-width:560px){
  .oc-news-row{grid-template-columns:auto minmax(0,1fr); padding:16px 4px}
  .oc-news-row .oc-news-tag{justify-self:start}
  .oc-news-row__t{grid-column:1 / -1}
}
.oc-news-empty{margin:0; font-size:.95rem; color:var(--ink-soft)}

/* ページ送り(11件目から) */
.oc-news-pages{margin-top:clamp(28px,4vw,40px)}
.oc-news-pages ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
.oc-news-pages a,.oc-news-pages span{display:inline-grid; place-items:center; min-width:44px; min-height:44px; padding:0 12px; border:1px solid rgba(27,32,135,.22); border-radius:6px; font-size:.9rem; color:var(--ink); text-decoration:none}
.oc-news-pages .page-numbers.current{background:var(--blue-pale); border-color:rgba(27,32,135,.35); color:var(--ink)} /* Arkhe の黒い地を打ち消す */
.oc-news-pages .dots{border-color:transparent}
.oc-news-pages a:hover{border-color:var(--red-soft); color:var(--red-soft)}
.oc-news-pages a:focus-visible{outline:2px solid var(--blue); outline-offset:2px}

/* 記事 */
/* 題名・本文は管理画面で書くので <wbr> が入らない → 行の頭に小さい「ャュョッ」・「ー」が来ないようにする(一覧の題名も) */
.oc-post .oc-page-title,.oc-post .oc-crumb,.oc-article__body,.oc-news-row__t{line-break:strict}
.oc-article{max-width:720px}
.oc-article__meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 24px; font-size:.92rem; letter-spacing:.06em; color:var(--ink-soft)}
.oc-article__body{font-size:1rem; line-height:1.95; letter-spacing:.03em}
.oc-article__body > *{margin:0 0 1em}
.oc-article__body > :last-child{margin-bottom:0}
.oc-article__body h2{margin:1.8em 0 .7em; font-family:var(--mincho); font-weight:500; font-size:clamp(1.2rem,1.05rem + .5vw,1.45rem); letter-spacing:.06em; line-height:1.6}
.oc-article__body h3{margin:1.6em 0 .6em; font-family:var(--mincho); font-weight:500; font-size:1.12rem; letter-spacing:.05em; line-height:1.6; color:var(--blue)}
.oc-article__body ul,.oc-article__body ol{padding-left:1.4em}
.oc-article__body li + li{margin-top:2px}
.oc-article__body ol > li::marker{color:var(--blue); font-weight:500}
.oc-article__body img{max-width:100%; height:auto; border-radius:6px}
.oc-article__body figure{margin-left:0; margin-right:0}
.oc-article__body blockquote{margin-left:0; padding:4px 0 4px 18px; border-left:2px solid rgba(27,32,135,.25); color:var(--ink-soft)}
.oc-article__body table{width:100%; border-collapse:collapse; font-size:.92rem}
.oc-article__body th,.oc-article__body td{--ark-padding--cell:10px 12px; border:0; border-bottom:1px solid rgba(33,33,33,.08); text-align:left; vertical-align:top}
.oc-article__back{margin:clamp(32px,4vw,44px) 0 0; padding-top:20px; border-top:1px solid rgba(33,33,33,.08)}
.oc-article__back .oc-link{margin-top:0}

@media (prefers-reduced-motion:reduce){
  .oc-news-row,.oc-news-row__t{transition:none}
}