/*
 * 下層ページ：事業内容、会社情報、お問い合わせ、お知らせ、社員インタビュー、404。
 */

/* 事業内容（page-business.php）：左に技術、右に写真 */
.tech-section {
  display: grid;
  align-items: center;
  gap: 3rem;
}

.tech-list {
  margin-top: 2.5rem;
}

.tech-list > div {
  border-top: 1px solid var(--color-line);
  padding-top: 1rem;
}

.tech-list > div + div {
  margin-top: 1.5rem;
}

.tech-list dt {
  color: var(--color-navy-900);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4286;
}

.tech-list dd {
  margin-top: 0.75rem;
}

@media (min-width: 1024px) {
  .tech-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 事業領域のページ（templates/business-detail.php） */
/* 本文：上に「概要＋写真」、その下に「主な開発システム」（パターン「事業分野の本文」） */
/* 色を分野の色にそろえる：英字の小見出しとその前の線、写真の影（淡くした分野の色） */
.area-body {
  --accent-shadow: color-mix(in oklab, var(--area-color) 45%, white);
}

.area-body p.is-style-rcs-eyebrow {
  color: var(--area-text);
}

.area-body p.is-style-rcs-eyebrow::before {
  background: var(--area-color);
}

.area-body .rcs-blocks > .wp-block-columns + * {
  margin-top: 6rem;
}

.area-body .rcs-blocks > h2 + * {
  margin-top: 2.5rem;
}

.area-others__title {
  color: var(--color-navy-900);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4286;
  letter-spacing: 0.05em;
}

.section--area-others {
  padding-block: 5rem;
}

@media (min-width: 640px) {
  .section--area-others {
    padding-block: 6rem;
  }
}

/* 文章ページの左カラム：注意書き、日付、リンク（お問い合わせ、お知らせ、ポリシーのページ） */
.side-notes {
  font-size: 0.875rem;
  line-height: 1.625;
}

.side-notes > * + * {
  margin-top: 2rem;
}

.side-notes p + p,
.side-notes p + address,
.side-notes address + p,
.side-notes .side-label + * {
  margin-top: 0.75rem;
}

.side-notes__divider {
  border-top: 1px solid var(--color-line);
  padding-top: 2rem;
}

.side-notes address {
  font-style: normal;
}

.side-notes a:not(.text-link) {
  margin-inline: 0.25rem;
  color: var(--color-accent-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ポリシーのページ（page.php）：ほかのポリシーへのリンク */
.side-menu ul {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4286;
}

.side-menu li + li {
  margin-top: 0.75rem;
}

.side-menu a {
  color: var(--color-navy-900);
}

.side-menu a:hover,
.side-menu a[aria-current="page"] {
  color: var(--color-accent-600);
}

/* お知らせの個別ページ（single.php） */
.article {
  padding-block: 3.5rem;
}

.article__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.875rem;
  line-height: 1.4286;
}

.article__date {
  color: var(--color-muted);
  font-family: var(--font-en);
}

.article__meta .text-link {
  display: none;
}

.article__image {
  width: 100%;
  border-radius: var(--radius-large);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.article__body {
  margin-top: 3rem;
}

.article__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 4rem;
  border-top: 1px solid var(--color-line);
  padding-top: 2rem;
}

@media (min-width: 640px) {
  .article {
    padding-block: 5rem;
  }
}

@media (min-width: 1024px) {
  .article__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .article__meta .text-link {
    display: inline-block;
    margin-top: 1.5rem;
  }
}

/*
 * 社員インタビュー（templates/interview.php）：部署と入社年を添えた小さな縦長の写真1枚と、
 * 読みやすい狭めの幅に収めた質問と回答。
 * スマホ：写真は名前の横に置く。1024px 以上：スクロール中もプロフィールが左に残る。
 */
.interview__profile {
  display: flex;
  align-items: flex-end;
  gap: 1.25rem;
  border-bottom: 1px solid var(--color-line);
  padding-bottom: 2rem;
}

.interview__portrait {
  flex-shrink: 0;
  width: 7.5rem;
  border-radius: var(--radius-large);
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.interview__name {
  margin-top: 0.25rem;
  color: var(--color-navy-900);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}

.interview__body {
  max-width: 44rem;
  margin-top: 2.5rem;
}

/* 質問は紺色 */
.interview__body h2 {
  color: var(--color-navy-900);
}

.interview__body h2 + p {
  margin-top: 1em;
}

@media (min-width: 1024px) {
  .interview {
    display: grid;
    grid-template-columns: 15rem minmax(0, 44rem);
    gap: 5rem;
    align-items: start;
  }

  .interview__profile {
    position: sticky;
    top: 7rem;
    display: block;
    border-bottom: 0;
    padding-bottom: 0;
  }

  .interview__portrait {
    width: 100%;
    margin-bottom: 1.25rem;
  }

  .interview__body {
    margin-top: 0;
  }
}

.interview-others .people-grid {
  margin-top: 3rem;
}

.interview-others .text-link {
  display: inline-block;
  margin-top: 3rem;
}

/* お知らせ一覧（home.php）：左にカテゴリの絞り込み */
.news-filter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

@media (min-width: 1024px) {
  .news-filter ul {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 検索結果やその他の一覧（index.php） */
.narrow {
  max-width: 48rem;
}

/* ページが見つからないとき（404.php） */
.not-found {
  display: flex;
  align-items: center;
  min-height: 70vh;
  padding-top: 8rem;
  padding-bottom: 5rem;
  text-align: center;
}

.not-found__number {
  color: var(--color-accent-50);
  font-family: var(--font-en);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  -webkit-text-stroke: 1px var(--color-accent-500);
}

.not-found__title {
  margin-top: 1.5rem;
  color: var(--color-navy-900);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3333;
}

.not-found__text {
  margin-top: 1rem;
  color: var(--color-muted);
}

.not-found__action {
  margin-top: 2.5rem;
}

@media (min-width: 640px) {
  .not-found__number {
    font-size: 8rem;
  }
}

/* お問い合わせの注意書きの下のイラスト（tech-pic）。スマホでは出さない */
.side-notes__illustration {
  display: none;
}

@media (min-width: 1024px) {
  .side-notes__illustration {
    display: block;
    width: 100%;
    max-width: 16rem;
    margin-top: 2rem;
  }
}

/* 404 のイラスト（tech-pic） */
.not-found__illustration {
  display: block;
  width: 10rem;
  margin: 0 auto 1rem;
}