@charset "UTF-8";

/*
 * seo.css
 *
 * inc/seo.php とセットのCSS。デザインを変えるためのものではなく、
 * 「見出しタグを正しい階層に組み替えたのに、見た目は1pxも変えない」ためだけのファイル。
 *
 * 既存の add.css が `.o-page_title__content h2 { … }` のようにタグ名で指定しているので、
 * h2 → h1 に組み替えると素の状態に戻ってしまう。add.css / renewal.css は
 * 他担当の管轄なので触らず、あとから同じ値を当て直している。
 *
 * ⚠️ add.css の該当ルールを直すときは、このファイルも合わせて直すこと。
 *    （将来的には add.css 側をクラス指定にして、このファイルを消すのが理想）
 */

/* --------------------------------------------------------------
 * 1. 下層ページのページタイトル帯（.o-page_title）
 *    変更前: <h3>Company</h3> → <h2>私たちについて</h2>  ← h3 が h2 より先に来ていた
 *    変更後: <p class="is-eyebrow">Company</p> → <h1>私たちについて</h1>
 * -------------------------------------------------------------- */

/* 英字ラベル。add.css の `.o-page_title__content h3` と同じ見た目にする。
   `.o-page_title__content p { line-height: 2.1 }` を受けてしまうので line-height も戻す。 */
.o-page_title__content .is-eyebrow {
  font-size: 1.6rem;
  font-weight: bold !important;
  line-height: 1;
  margin: 0;
}

/* ページ名。add.css の `.o-page_title__content h2` と同じ見た目。 */
.o-page_title__content h1 {
  font-size: 2.35rem;
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 1.2rem;
}

@media (min-width: 768px) {
  .o-page_title__content .is-eyebrow {
    font-size: 2.2rem;
  }

  .o-page_title__content h1 {
    font-size: 4.7rem;
    margin-top: 1.8rem;
    margin-bottom: 2.4rem;
  }
}

/* --------------------------------------------------------------
 * 2. お知らせ一覧（.p-info__list）
 *    ページ名を h1 にしたことで、記事タイトルとサイドの見出しが h1 → h3 の飛び級になっていた。
 *    どちらも h2 に上げたぶん、add.css の h3 用ルールをここで当て直す。
 * -------------------------------------------------------------- */

.p-info__list__main > ul > li dl dt h2 {
  -webkit-box-orient: vertical;
  display: -webkit-box;
  font-size: 1.6rem;
  -webkit-line-clamp: 2;
  line-height: 1.8;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-info__list__side h2 {
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 4rem;
  margin-bottom: 1rem;
}

.p-info__list__side h2:first-child {
  margin-top: 0;
}

/* お知らせ詳細の SHARE 見出し（h3 → h2） */
.p-info__sns h2 {
  font-weight: bold;
  margin-bottom: 1rem;
}

@media (min-width: 768px) {
  .p-info__list__main > ul > li dl dt h2 {
    font-size: 2rem;
  }

  .p-info__list__side h2 {
    font-size: 1.8rem;
  }
}

/* --------------------------------------------------------------
 * 3. パンくず（reakiya_breadcrumb）
 *    既存CSSに .o-breadcrumb の定義が無く、素のリストのまま出ていたので最低限だけ。
 *    デザイン確定後は renewal.css 側に引き取ってもらってよい。
 * -------------------------------------------------------------- */

.o-breadcrumb ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.6em;
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0.7;
}

.o-breadcrumb li {
  display: flex;
  align-items: center;
}

.o-breadcrumb li:not(:first-child)::before {
  content: "›";
  display: inline-block;
  margin-right: 0.6em;
  opacity: 0.6;
}

.o-breadcrumb a {
  text-decoration: none;
}

.o-breadcrumb a:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .o-breadcrumb ul {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------
 * 3. 視覚的には隠すが読み上げ・クローラには残す見出し
 *    コラム一覧のように、ページ名が画像でしか表現されていない箇所に h1 を補うため。
 * -------------------------------------------------------------- */

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}