@charset "UTF-8";
/* news.css — お知らせ一覧・記事 */

/* =========================================================================
   お知らせ一覧（design/06_お知らせ_03.psd 準拠）
   PSDは@2xなので実装値＝実測÷2。以下はすべて@1x換算の実測値。

     見出し     36px Bold #004A8E（= --navy）字間.05em
                セクションの地色（ミント）上端から ink上端まで 126px
     リスト     幅1100 ／ 罫線は各行の**下だけ**（1行目の上には線が無い）
                罫線 1px #BDC0BD ／ 行ピッチ 68.4
                （PSD実測は2pxだが、パンくず等と同じくユーザー指示で1pxにしている）
     日付       Noto Sans JP Regular 16px #1B1C1C 字間.025em（Robotoではない）
     本文       Noto Sans JP Regular 16px #1B1C1C 字間0
     日付カラム 130.5（トップページ index.css と揃えて131.5にしてある）
     カテゴリ   80×18.5 の枠線ピル。塗り無し／線1px #12458C（= --navy）
                文字 Noto Sans JP Medium 12px #004A8E 字間.05em
                ※PSDでは非表示レイヤーだが「バッジ付きの行」として作られている。
                  文字の前後どちらに置くかはPSDから読み取れないため、
                  既存マークアップどおり本文の後ろに置いている。

   見出しの位置は「セクションの地色の上端から126px」を基準にしている。
   PSDのパンくず〜見出し216pxは、この126pxと下の margin-top 86px の合計で満たす。
   セクションの padding-top(116px, common.css) を増やして満たそうとすると
   セクション自体が高くなり、リスト下端〜フッターの余白まで崩れる。
   セクション高は PSD 771 / 実装 777 で収まっている。
   ========================================================================= */
/* パンくず〜セクション地色の余白。PSD実測: パンくずのink下端→地色上端 89.5px。
   他ページはここにページ内リンクが入り、その padding-top(65px) が余白を作っている
   （common.css の .breadcrumb は margin-bottom:0 で、自分では余白を持たない）。
   お知らせはページ内リンクが無いため、どこも余白を持たず密着してしまう。
   共通側を触らずに済ませるため、このページのセクションにだけ margin-top を持たせる。
   実装のパンくずink下端はセクション上端の 4.1px 上なので 89.5 - 4.1 ≒ 86px。
   地色に margin を付けると、その隙間には main の白地が出る（PSDもここは白）。 */
/* 施設基準の個別ページ（single/standard.php）も同じ条件。
   こちらは data-page が "visit"（ナビの現在地をご来院の方へに出すため）なので、
   body_class の .single-standard で拾う。ご来院の方へ本体はページ内リンクを
   持っているので、この余白を [data-page="visit"] で当ててはいけない。 */
[data-page="news"] main>.section,
.single-standard main>.section {
   margin-top: calc(86 * var(--s));
}
/* ページ内リンクの padding-top は幅に応じて 65→48→32 と詰まる（common.css）。
   お知らせだけ余白が残ると浮くので、同じ比率（74% / 49%）で詰める。 */
@media (max-width: 768px) {
   [data-page="news"] main>.section,
   .single-standard main>.section {
      margin-top: 42px;
   }
}
/* FVの写真は元画像の中央だと見せたい部分が入らないので、下寄りを見せる */
[data-page="news"] .page-hero__img img {
   object-position: center 70%;
}
/* margin だと .page-h2 の margin-bottom:32px と相殺されて効かないので padding にする。
   PSD実測は「見出しのink下端→1本目の罫線 95px」。*/
.news-index__list {
   padding-top: calc(16 * var(--s));
}
.news-index__item {
   display: grid;
   grid-template-columns: calc(131.5 * var(--s)) 1fr;
   padding-bottom: calc(19.5 * var(--s));
   border-bottom: 1px solid #BDC0BD;
}
.news-index__item+.news-index__item {
   padding-top: calc(25 * var(--s));
}
/* 押せることが分かるように。トップページの a.news-list__item:hover と揃えている。 */
a.news-index__item {
   /* ホバーは opacity で薄くしていたが分かりにくいので、文字色を変える。
      日付と本文は #1B1C1C を自分で持っていて a の色を継がないので、
      下の :hover で子にも当てている（片方だけだと日付が黒のまま残る）。 */
   transition: color .2s;
}
a.news-index__item:hover {
   color: var(--teal);
}
a.news-index__item:hover .news-index__date,
a.news-index__item:hover .news-index__text {
  color: var(--teal);
}
.news-index__date {
   padding-left: calc(3.5 * var(--s));
   font-size: calc(17 * var(--s));
   line-height: 1.4;
   letter-spacing: .025em;
   color: #1B1C1C;
   transition: color .2s;
   white-space: nowrap;
}
.news-index__text {
   line-height: 1.4;
   color: #1B1C1C;
   transition: color .2s;
}

/* カテゴリバッジ。一覧と記事ページで同じ見た目にする。 */
.news-index__cat,
.article__cat {
   display: inline-block;
   padding: 0 calc(14 * var(--s));
   border: 1px solid var(--navy);
   border-radius: var(--radius-pill);
   background: none;
   color: var(--navy);
   font-size: calc(12 * var(--s));
   font-weight: 500;
   line-height: 1.4;
   letter-spacing: .05em;
   white-space: nowrap;
}
/* いまは出さない（ユーザー指示。PSDでも非表示レイヤーだった）。
   あとで使う可能性があるので、マークアップ（archive/post.php・single/post.php）と
   上の見た目の指定は残したまま、ここで隠すだけにしている。
   復活させるときはこの1ブロックを消せばよい。 */
.news-index__cat,
.article__cat {
   display: none;
}
.news-index__cat {
   margin-left: calc(16 * var(--s));
   vertical-align: 1px;
}

/* 記事ページ */
.article {
   max-width: calc(820 * var(--s));
   margin-inline: auto;
}
.article__head {
   border-bottom: 2px solid var(--teal);
   padding-bottom: calc(18 * var(--s));
   margin-bottom: calc(32 * var(--s));
}
.article__meta {
   display: flex;
   align-items: center;
   gap: calc(14 * var(--s));
   margin-bottom: calc(12 * var(--s));
}
/* 記事ページはPSDが無い。日付とカテゴリは一覧（PSD準拠）と同じ扱いにしている。 */
.article__date {
   font-size: calc(17 * var(--s));
   line-height: 1.4;
   letter-spacing: .025em;
   color: #1B1C1C;
}
.article__title {
   font-size: calc(30 * var(--s));
   color: var(--navy);
   font-weight: 700;
   line-height: 1.5;
}
/* 記事「本文」のスタイル（p / h2 / img）は assets/wp/posts/post/common.css に置く。
   ここ（.article__body 配下）に書くと親テーマのスコープCSSと詳細度が並び、
   @scope のスコープ近接性で親側に負ける。エディタにも効かせたいので向こうが正しい置き場。 */
/* 「お知らせ一覧へ」を中央に固定したまま、左右に前後記事を置く。
   1fr auto 1fr にすることで、前後どちらかが無くても中央のボタンは中央のまま。 */
.article__back {
   display: grid;
   grid-template-columns: 1fr auto 1fr;
   align-items: center;
   gap: calc(16 * var(--s));
   margin-top: calc(48 * var(--s));
}
.article__back .btn {
   font-size: calc(16 * var(--s));
}
.article__back-side {
   display: flex;
}
.article__back-side--next {
   justify-content: flex-end;
}
.article__nav-link {
   padding-inline: calc(20 * var(--s));
}

/* 前の記事は矢印を反転させて左向きにする（アイコンを増やさない）。
   .btn--teal の矢印は btn_arrow.png（白丸＋ティール矢印）の1枚画像なので、
   丸ごと左右反転させれば左向きになる。丸は左右対称なので崩れない。
   ホバーで動く向きも「前」に合わせて左にする。scaleX(-1) で座標系ごと
   反転しているので、translateX(+4px) が見た目には左へ4px動く。
   common.css の .btn--teal:hover .btn__arrow（右へ4px）と同じ詳細度なので、
   後から読まれるこのファイルで上書きしている（news.css は common.css より後）。 */
.btn__arrow--back {
   transform: scaleX(-1);
}
.btn--teal:hover .btn__arrow--back {
   transform: scaleX(-1) translateX(4px);
}

/* =========================================================================
   ページャー（the_posts_pagination の出力を装飾）
   ========================================================================= */
.news-index .pagination {
   margin-top: calc(48 * var(--s));
}
.news-index .nav-links {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: calc(8 * var(--s));
   flex-wrap: wrap;
}
.news-index .page-numbers {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: calc(40 * var(--s));
   height: calc(40 * var(--s));
   padding: 0 1px;
   border-radius: 50%;
   border: 1.5px solid var(--line);
   background: #fff;
   color: var(--navy);
   font-family: var(--num);
   font-weight: 700;
   font-size: calc(15 * var(--s));
   line-height: 1;
   transition: background .2s, color .2s, border-color .2s;
}
.news-index a.page-numbers:hover {
   border-color: var(--teal);
   color: var(--teal);
}
.news-index .page-numbers.current {
   background: var(--teal);
   border-color: var(--teal);
   color: #fff;
}
/* 「…」は枠を付けない */
.news-index .page-numbers.dots {
   border-color: transparent;
   background: none;
}

/* 前後ページの矢印。.btn__arrow と同じマスク画像を使う */
.page-numbers__arrow {
   width: calc(11 * var(--s));
   height: calc(9 * var(--s));
   display: block;
   background-color: currentColor;
   -webkit-mask: url("../img/common/icon-arrow-mask.png") no-repeat center / contain;
   mask: url("../img/common/icon-arrow-mask.png") no-repeat center / contain;
   -webkit-mask-mode: alpha;
   mask-mode: alpha;
}
.page-numbers__arrow--prev {
   transform: scaleX(-1);
}

@media (max-width: 768px) {
   /* 日付と本文を縦積みにする。トップページの .news-list__item と同じ扱い。 */
   .news-index__item {
      grid-template-columns: 1fr;
      gap: 4px;
   }

   /* PC値は var(--s) で縮むが、SPはSP用の値を明示する（未指定だと
     375pxでカテゴリ12px→3.7px まで落ちる）。本文は body 継承なので出さない。
     日付は本文と同じサイズだが、独立して調整できるよう明示指定を残す。 */
   .news-index__date,
   .article__date {
      font-size: 16px;
   }

   /* 以下は font-size 以外もPC値を継承すると375pxで一桁pxになる箇所 */
   .news-index__list {
      padding-top: 8px;
   }
   .news-index__item {
      padding-bottom: 12px;
   }
   .news-index__item+.news-index__item {
      padding-top: 14px;
   }
   .news-index__cat {
      margin-left: 8px;
   }
   .news-index .pagination {
      margin-top: 32px;
   }
   /* 前後ページの矢印。共通の .btn__arrow::after と同じ 11×9px にする
     （未指定だと 375px で 3.4×2.8px になり、34pxの丸の中でほぼ見えない）*/
   .page-numbers__arrow {
      width: 11px;
      height: 9px;
   }
   .article {
      max-width: 100%;
   }
   .article__head {
      padding-bottom: 12px;
      margin-bottom: 20px;
   }
   .article__meta {
      gap: 10px;
   }
   .article__back {
      margin-top: 32px;
   }

   /* 変換前は clamp(1.4rem, 3vw, 1.9rem) で下限22.4pxが効いていた箇所。
     --s に統一したので下限が無くなり、SP値を明示する */
   .article__title {
      font-size: 20px;
   }
   .news-index__cat,
   .article__cat {
      font-size: 11px;
   }

   /* 最大構成（前矢印＋数字5＋省略記号2＋次矢印＝9個）でも1行に収める。
     .container が左右24pxずつ持つため、375px 端末で使える幅は 327px しかない。
     34px × 7 + 22px × 2 + 4px × 8 = 314px */
   .news-index .nav-links {
      gap: 6px;
   }
   .news-index .page-numbers {
      min-width: 36px;
      height: 36px;
      padding: 0 6px;
      font-size: 13.6px;
      border-width: 1px;
   }
   .news-index .page-numbers.dots {
      min-width: 22px;
      padding: 0;
   }

   /* 3カラムだと横に収まらないので、一覧ボタンを上段に、前後を下段に並べる。
     DOM順が「前・一覧・次」なので自動配置に任せると階段状になる。位置を明示すること。 */
   .article__back {
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
         "list list"
         "prev next";
      gap: 16px;
   }
   .article__back>.btn {
      grid-area: list;
      justify-self: center;
   }
   .article__back-side {
      grid-area: prev;
   }
   .article__back-side--next {
      grid-area: next;
   }
   /* 素の .article__back .btn（詳細度0,2,0）を打ち消すため、SP側も同じ詳細度で書く。
     .article__nav-link 単独（0,1,0）では負けて calc(15 * var(--s))＝4.7px になる */
   .article__back .btn {
      font-size: 15px;
   }
   .article__back .article__nav-link {
      padding-inline: 14px;
      font-size: 15px;
   }
}