/*
  お知らせ記事(/information/news/)はMarkdownで書く前提のため、Goldmarkが出力する
  素のタグ(class無しのh3/h4/h5/ul/img/figure等)に対して、legacyのh3.ttl/h4.ttl/
  ul.list_d相当の見た目を直接あてる。記述する側がクラス名や属性リストを覚える
  必要が無いようにするため、意図的に「タグ名だけ」で見た目が決まる設計にしている。
  他セクションの既存ページ(class指定に依存したraw HTML)に影響しないよう、
  .information .news_article配下に厳密にスコープしている。
*/

.information .news_article h3 {
  color: #fff;
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.3;
  background: #1a99d0 url(../images/icon/icon-circle-s-w.svg) no-repeat left 25px center;
  border-radius: 50px 0 0 50px;
  padding: 10px 20px 10px 70px;
  margin: 80px -45px 30px 0;
  box-shadow: -5px 5px 0px 0px #b7e0ef;
}

.information .news_article h4 {
  color: #1a99d0;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 10px 0 10px 0;
  margin: 30px 0 10px 0;
  border-bottom: 2px dotted #b7e0ef;
}

.information .news_article h5 {
  display: inline-block;
  font-size: 1.6rem;
  letter-spacing: 0.1em;
  padding: 10px 0 10px 0;
  margin: 30px 0 10px 0;
}

.information .news_article ul {
  list-style: disc;
  padding-left: 1.2em;
  margin: 1em 0;
}

.information .news_article ul ul {
  margin: 0.3em 0;
}

.information .news_article li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.information .news_article p {
  line-height: 1.8;
  margin: 1em 0;
}

/* 単独の画像は中央寄せ(legacyのdiv.tx_center相当) */
.information .news_article p > img:only-child {
  display: block;
  margin: 1.5em auto;
}

/* 連続して画像を並べた段落は自動でギャラリー状にグリッド表示する
   (画像を続けて書くだけでギャラリーになり、専用の書き方を覚える必要が無い) */
.information .news_article p:has(img + img) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 1.5em 0;
}
.information .news_article p:has(img + img) img {
  width: calc(33.333% - 8px);
  margin: 0;
}
@media (max-width: 767px) {
  .information .news_article p:has(img + img) img {
    width: calc(50% - 6px);
  }
}

/*
  項目/値の対応表(GFMのMarkdownテーブル)。
  legacyのテーブルは全て「各行が項目名+値の1組」という定義リスト的な構造で、
  GFMテーブルが要求する横方向のヘッダ行が無いため、著者には見出しが空の
  テーブル(| | |\n|---|---|\n| **項目**|値|...)を書いてもらい、見出し行自体は
  非表示にした上で、1列目(項目名)・2列目(値)をlegacyのth/td相当の見た目に
  CSSで直接あてている。
*/
.information .news_article table thead {
  display: none;
}
.information .news_article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  border-bottom: 3px solid #1a99d0;
  font-size: 1.5rem;
}
.information .news_article table td {
  padding: 20px 30px;
  vertical-align: top;
  word-break: break-all;
  border-top: 1px solid #e2e8f3;
  border-right: 1px solid #e2e8f3;
}
.information .news_article table td:first-child {
  border-left: 1px solid #e2e8f3;
  /* <th>と違いブラウザ標準の太字が無いため明示的に指定する。このサイトは
     Webフォント(Noto Sans JP)を400/700のウェイトのみ読み込んでいるため、
     中間の値(500/600等)を指定しても正しく太字化されない点に注意 */
  font-weight: 700;
}
/* 幅・文字折り返しの指定はPC表示専用にする(SPは1列目/2列目とも縦積みで
   横幅いっぱいに表示するため、下のメディアクエリで上書きするのではなく
   そもそも適用しない。td:first-childはtdより詳細度が高いため、SP側で
   単にwidth:100%を書いてもこちらが優先されてしまう点に注意) */
@media (min-width: 768px) {
  .information .news_article table td:first-child {
    background: #f8f9fb;
    color: #1a99d0;
    width: 20%;
    white-space: nowrap;
  }
  .information .news_article table td:last-child {
    background: #fff;
  }
}
@media (max-width: 767px) {
  .information .news_article table,
  .information .news_article table tbody,
  .information .news_article table tr {
    display: block;
    width: 100%;
  }
  .information .news_article table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #e2e8f3;
  }
  .information .news_article table td:first-child {
    background: #f8f9fb;
    color: #1a99d0;
    border-bottom: none;
  }
  .information .news_article table td:last-child {
    background: #fff;
  }
  .information .news_article table tr {
    display: block;
    margin-bottom: 15px;
  }
  .information .news_article table tr:last-child {
    margin-bottom: 0;
  }
}

/* 画像+文章の2カラムレイアウト({{< side-image >}}、layouts/shortcodes/side-image.html) */
.information .news_article .side_image {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  margin: 1.5em 0;
}
.information .news_article .side_image--right {
  flex-direction: row-reverse;
}
.information .news_article .side_image__photo {
  flex: 0 0 35%;
  max-width: 35%;
  text-align: center;
}
.information .news_article .side_image__photo img {
  display: block;
  width: 100%;
  /* contents.cssの.information .news_article img{margin:2em 0;}を打ち消す。
     天地を揃えるずれは画像自身のmarginではなく.side_image__photoの
     padding-topで作るため、画像自体のmarginは常にゼロにする
     (legacyのimg.mb0.my0相当) */
  margin: 0;
  border-radius: 10px;
}
.information .news_article .side_image__caption {
  margin-top: 0.5em;
  font-size: 1.3rem;
  color: #666;
}
.information .news_article .side_image__text {
  flex: 1;
  min-width: 0;
}
.information .news_article .side_image__text > :first-child {
  margin-top: 0;
}
@media (min-width: 768px) {
  /* 画像をわずかに下にずらし、右側の文章の1行目と天地を揃える
     (legacyのbody:not(.home) .image_wrap { padding-top: 0.5em; }相当) */
  .information .news_article .side_image__photo {
    padding-top: 0.5em;
  }
  /* キャプションを画像のすぐ下に近づける(legacyのimg.mb0相当) */
  .information .news_article .side_image__caption {
    margin-top: 0.3em;
  }
}
@media (max-width: 767px) {
  .information .news_article .side_image,
  .information .news_article .side_image--right {
    flex-direction: column;
  }
  .information .news_article .side_image__photo {
    flex: none;
    max-width: 100%;
    padding-top: 0;
  }
}

/* キャプション付き画像({{< figure >}}) */
.information .news_article figure {
  margin: 1.5em auto;
  text-align: center;
}
.information .news_article figure img {
  display: block;
  margin: 0 auto;
}
.information .news_article figcaption {
  margin-top: 0.5em;
  font-size: 1.3rem;
  color: #666;
}
.information .news_article figcaption p {
  margin: 0;
}