@charset "UTF-8";
/* ============================================================
   スマステ株式会社 専用テーマ  お知らせ・記事・サイトマップ・見つからない画面
   版0.4.0（工程6-8）
   ------------------------------------------------------------
   区切りは、余白と極細の罫線だけで表す。箱で囲まない。影も付けない。
   値はすべて tokens.css の変数を参照する。生の数値は書かない。
   ============================================================ */

/* ============================================================
   お知らせ一覧・分類ごとの一覧
   ============================================================ */

/* 分類の絞り込み。行き先は分類ごとの一覧ページ。
   JavaScriptに頼らないため、どの環境でも必ず働く。 */
.p-catnav{
  border-block-start:var(--bw-hair) solid var(--c-rule);
  border-block-end:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-4);
  margin-block-end:var(--sp-7);
  display:grid;
  gap:var(--sp-3);
}
@media (min-width:768px){
  .p-catnav{ grid-template-columns:var(--sp-8) 1fr; gap:var(--sp-4); align-items:baseline; }
}
.p-catnav__label{
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  letter-spacing:var(--ls-eyebrow);
  color:var(--c-text-sub);
}
.p-catnav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1) var(--sp-2);
}
.p-catnav__link{
  display:inline-block;
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  color:var(--c-text);
  text-decoration:none;
  border:var(--bw-hair) solid var(--c-rule);
  border-radius:var(--r-1);
  padding:var(--sp-1) var(--sp-3);
}
.p-catnav__link:hover{ border-color:var(--c-primary); }
.p-catnav__link[aria-current="page"]{
  color:var(--c-bg);
  background:var(--c-primary);
  border-color:var(--c-primary);
}
.p-catnav__count{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
}
/* 選んでいるときは赤い面になるため、件数も白にする。
   補足の文字色のままだと明度差が1.63しかない。
   （工程6-8で実測して判明したため直した） */
.p-catnav__link[aria-current="page"] .p-catnav__count{ color:var(--c-bg); }

/* 一覧の本体 */
.p-list{ display:grid; }
.p-list__item{ border-block-start:var(--bw-hair) solid var(--c-rule); }
.p-list__item:last-child{ border-block-end:var(--bw-hair) solid var(--c-rule); }
.p-list__link{
  display:grid;
  gap:var(--sp-1);
  padding-block:var(--sp-4);
  text-decoration:none;
  color:var(--c-text);
}
@media (min-width:768px){
  .p-list__link{
    grid-template-columns:var(--sp-8) var(--sp-8) 1fr;
    gap:var(--sp-5);
    align-items:baseline;
    padding-block:var(--sp-5);
  }
}
.p-list__date{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
}
.p-list__cat{
  font-size:var(--fs-8);
  color:var(--c-primary);
  letter-spacing:var(--ls-head);
}
.p-list__title{
  font-size:var(--fs-6);
  line-height:var(--lh-head);
}
.p-list__link:hover .p-list__title{ text-decoration:underline; }

/* ページ送り */
.p-pager{
  margin-block-start:var(--sp-7);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-2);
}
.p-pager .page-numbers{ margin:0; }

/* ============================================================
   記事ページ
   ============================================================ */
.p-article{ max-width:var(--w-text); }
.p-article__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-1) var(--sp-4);
  margin-block-end:var(--sp-5);
}
.p-article__date{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
}
.p-article__cat{
  font-size:var(--fs-8);
  color:var(--c-primary);
  letter-spacing:var(--ls-head);
  text-decoration:none;
}
.p-article__cat:hover{ text-decoration:underline; }

/* 本文の中の写真。記事では写真を使ってよい。 */
.p-article .entry-content img{
  max-width:100%;
  height:auto;
  border-radius:var(--r-0);
}
.p-article .entry-content figure{ margin-block:var(--sp-6); }
.p-article .entry-content figcaption{
  margin-block-start:var(--sp-2);
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  line-height:var(--lh-body);
}

/* 前後の記事への案内 */
.p-nav-posts{
  max-width:var(--w-text);
  margin-block-start:var(--sp-7);
  border-block-start:var(--bw-hair) solid var(--c-rule);
  display:grid;
}
.p-nav-posts__item{
  border-block-end:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-4);
}
.p-nav-posts__label{
  display:block;
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
  margin-block-end:var(--sp-1);
}
.p-nav-posts__link{
  font-size:var(--fs-7);
  line-height:var(--lh-head);
  color:var(--c-text);
  text-decoration:none;
}
.p-nav-posts__link:hover{ color:var(--c-primary-deep); text-decoration:underline; }
.p-nav-posts__back{ margin-block-start:var(--sp-5); }

/* 記事の末尾のお問い合わせの案内 */
.p-article__cta{
  max-width:var(--w-text);
  margin-block-start:var(--sp-7);
  border-block-start:var(--bw-hair) solid var(--c-rule);
  border-block-end:var(--bw-hair) solid var(--c-rule);
  padding-block:var(--sp-6);
}
.p-article__cta-h{
  font-size:var(--fs-5);
  font-weight:var(--fw-head);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  margin-block-end:var(--sp-3);
}
.p-article__cta-p{ margin-block-end:var(--sp-5); }

/* ============================================================
   見つからない画面
   ============================================================ */
.p-404__lead{ max-width:var(--w-text); }
.p-404__lead p{ margin-block-end:var(--sp-4); }
.p-404__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
@media (min-width:768px){
  .p-404__list{ grid-template-columns:repeat(2,1fr); column-gap:var(--sp-6); }
}
.p-404__list li{ border-block-start:var(--bw-hair) solid var(--c-rule); }
.p-404__list a{
  display:block;
  padding-block:var(--sp-4);
  font-size:var(--fs-6);
  line-height:var(--lh-head);
  color:var(--c-text);
  text-decoration:none;
}
.p-404__list a:hover{ color:var(--c-primary-deep); text-decoration:underline; }

/* ============================================================
   サイトマップ
   ============================================================ */
.p-sitemap{ display:grid; gap:var(--sp-7); }
@media (min-width:768px){
  .p-sitemap{ grid-template-columns:repeat(2,1fr); gap:var(--sp-7) var(--sp-8); }
}
.p-sitemap__group{ }
.p-sitemap__h{
  font-size:var(--fs-8);
  font-weight:var(--fw-head);
  color:var(--c-text-sub);
  letter-spacing:var(--ls-eyebrow);
  padding-block-end:var(--sp-2);
  margin-block-end:var(--sp-3);
  border-block-end:var(--bw-hair) solid var(--c-rule);
}
.p-sitemap__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
}
.p-sitemap__list li{ border-block-end:var(--bw-hair) solid var(--c-rule); }
.p-sitemap__list a{
  display:block;
  padding-block:var(--sp-3);
  font-size:var(--fs-7);
  line-height:var(--lh-head);
  color:var(--c-text);
  text-decoration:none;
}
.p-sitemap__list a:hover{ color:var(--c-primary-deep); text-decoration:underline; }
.p-sitemap__sub{
  font-size:var(--fs-8);
  color:var(--c-text-sub);
  margin-inline-start:var(--sp-2);
}
.p-sitemap__none{
  font-size:var(--fs-7);
  color:var(--c-text-sub);
  padding-block:var(--sp-3);
}