@charset "utf-8";

/*----------------------------------------------------------
  WordPress 化に伴う追加スタイル
  コーディングデータ（style.css）に無い要素だけをここに書きます。
----------------------------------------------------------*/

/*----------------------------------------------------------
  本文（ブロックエディター）
  ニュース詳細・汎用テンプレートの .post__content
  段落の余白・リンクは style.css（.page-news）の指定を使います。
----------------------------------------------------------*/
.page-news {
  /* 見出し（h2〜h4） */
  .post__content :is(h2, h3, h4) {
    font-weight: 700;
    line-height: 1.5;
  }
  .post__content h2 {
    padding-bottom: 0.4em;
    border-bottom: solid 1px var(--c_gray);
    font-size: 2.0rem;
  }
  .post__content h3 {
    font-size: 1.8rem;
  }
  .post__content h4 {
    font-size: 1.6rem;
  }
  .post__content > :is(h2, h3, h4):not(:first-child) {
    margin-top: 2.2em;
  }

  /* リスト（リセットで消えたマーカーを戻す） */
  .post__content :is(ul, ol) {
    padding-left: 1.6em;
  }
  .post__content ul > li {
    list-style: disc;
  }
  .post__content ul ul > li {
    list-style: circle;
  }
  .post__content ol > li {
    list-style: decimal;
  }
  .post__content li + li,
  .post__content li > :is(ul, ol) {
    margin-top: 0.5em;
  }

  /* 画像（本文幅を超えない・元の大きさより拡大しない） */
  .post__content .wp-block-image img {
    width: auto;
    max-width: 100%;
    height: auto;
  }
  .post__content figcaption {
    margin-top: 0.6em;
    color: var(--c_gray);
    font-size: 1.3rem;
    line-height: 1.6;
  }

  /* 表（スマートフォンでは横スクロール） */
  .post__content .wp-block-table {
    overflow-x: auto;
  }
  /* border-collapse: collapse だと外枠が半分はみ出し、PC でも横スクロールバーが出るため separate で罫線を引く */
  .post__content table {
    box-sizing: border-box; /* .inner が content-box のため、罫線の分だけ幅を超えないようにする */
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-top: solid 1px #ccc;
    border-left: solid 1px #ccc;
  }
  .post__content :is(th, td) {
    padding: 0.6em 0.8em;
    border: none;
    border-right: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    text-align: left;
    vertical-align: top;
  }
  .post__content th,
  .post__content thead td {
    background-color: #f2f2f2;
    font-weight: 700;
  }
  @media (width < 768px) {
    /* 列を押し縮めず、表の幅が足りない分は横スクロールにする */
    .post__content .wp-block-table table {
      table-layout: auto;
    }
    .post__content .wp-block-table :is(th, td) {
      min-width: 10em;
    }
  }

  /* 引用 */
  .post__content blockquote {
    padding: 0.2em 0 0.2em 1.2em;
    border-left: solid 4px #ddd;
    color: #555;
  }
  .post__content blockquote > * + * {
    margin-top: 1em;
  }
  .post__content blockquote cite {
    display: block;
    color: var(--c_gray);
    font-size: 1.3rem;
    font-style: normal;
  }

  /* 区切り線 */
  .post__content > .wp-block-separator {
    height: 0;
    margin-block: 2.5em;
    border: none;
    border-top: solid 1px var(--c_gray);
  }

  /* ボタン（日付・分類のラベルと同じ枠線のデザインに合わせる） */
  .post__content .wp-block-button__link {
    display: inline-block;
    padding: 0.8em 2.4em;
    border: solid 1px var(--c_black);
    border-radius: 100vh;
    background: var(--c_white);
    color: var(--c_black);
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.4;
  }
  .post__content .wp-block-button__link:focus-visible {
    border-color: var(--c_link_hover);
    color: var(--c_link_hover);
  }
  @media (any-hover: hover) {
    .post__content .wp-block-button__link:hover {
      border-color: var(--c_link_hover);
      color: var(--c_link_hover);
    }
  }

  /* 埋め込み（YouTube。16:9 は WordPress の responsive-embeds で維持） */
  .post__content .wp-block-embed iframe {
    max-width: 100%;
  }
}

/* 汎用テンプレート：本文の上の区切り線は使わない（タイトルの下に置く前提の指定のため） */
.page-default .post__content {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/*----------------------------------------------------------
  Management
  部門を1階層で運用する場合（大分類の見出しの直後にカード一覧）
----------------------------------------------------------*/
.page-management {
  .management-cat__title + .card__list {
    margin-top: 3.6rem;
  }

  /* 大分類の並びを入れ替えて Rhythmedia が2番目以降になったときも、セクション間の余白を保つ
     （style.css の #rhythmedia の margin-top は、先頭に置かれる前提の指定のため） */
  @media (width >= 890px) {
    .management__cat + #rhythmedia {
      margin-top: min(calc(150 / var(--w_full) * 100vw), 15.0rem);
    }
  }
}

/*----------------------------------------------------------
  ログイン中（管理バー表示時）
  固定配置の要素が管理バーに隠れないよう、管理バーの高さだけ下げる。
  600px 以下では管理バーが固定表示ではなくなるため対象外。
----------------------------------------------------------*/
@media (width > 600px) {
  .admin-bar :is(.page__title, .main__logo, #l-header .header__logo, #header__btn, #header__wrap) {
    margin-top: var(--wp-admin--admin-bar--height, 0px);
  }
}