/* =============================================================================
   sub.css — 下層ページ共通の部品
   TOP（index.html）は読まない。下層ページは土台（tokens / base / components / header /
   footer / motion）のあとにこのファイルを読み、最後に type.css を読む。
   文字の大きさ・太さ・書体はここに書かない（HTML の役割クラスで決める）。
   ============================================================================= */

/* ----- 文書全体 ------------------------------------------------------------------ */
html {
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  scrollbar-gutter: stable;
}

body.sub-page {
  overflow-x: clip;
  margin: 0;
  background: #fff;
  color: var(--text);
  line-height: 1.95;
  -webkit-font-smoothing: antialiased;
}

@media (min-width:761px) {
  body.sub-page {
    --gutter: 3.6vw;
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}

.skip {
  position: fixed;
  left: 20px;
  top: -100px;
  background: #fff;
  padding: 12px;
  z-index: 100;
}

.skip:focus {
  top: 20px;
}

/* 下層の h2 は base.css の --enter 連動の不透明度を使わない（sub.js は h2 に --enter を書かない） */
.sub-page h2 {
  opacity: 1 !important;
}

/* ----- 青の面：テーマ色を白系へ反転 ----------------------------------------------- */
.on-blue {
  --accent: #fff;
  --accent-deep: #fff;
  --text: #fff;
  --text-muted: #d8ecfb;
  --rule: rgb(255 255 255 / .28);
  color: var(--text);
}

/* ----- ページヒーロー -------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 168px 0 96px;
  background: var(--g-field-light);
}

/* TOP の About の光を引き継ぐ、右上のぼかした弧 */
.page-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 70vw;
  aspect-ratio: 1;
  right: -26vw;
  top: -38vw;
  border: 48px solid rgb(245 155 113 / .32);
  border-radius: 50%;
  filter: blur(36px);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
}

.breadcrumb li + li::before {
  content: '>';
  margin-right: 14px;
  opacity: .7;
}

.breadcrumb a:hover {
  color: var(--text);
}

.page-hero__title {
  margin-top: 48px;
}

.page-hero__title > p:first-child {
  font-size: calc(var(--t-display) * 1.2);
  line-height: 1;
  letter-spacing: -.045em;
}

/* 下層ページのヒーロー見出しすべての下に付く、共通の日本語サブタイトル。 */
.page-hero__title h1 {
  font-family: var(--f-serif);
  font-size: var(--t-body);
  font-weight: var(--w-head);
  font-style: normal;
  margin-top: 17px;
  line-height: 1.7;
  letter-spacing: .08em;
}
@media (max-width: 760px) {
  .page-hero__title h1 { margin-top: 13px; }
}

.page-hero__lead {
  max-width: 54em;
  margin-top: 30px;
  display: grid;
  gap: 1em;
}

.page-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 56px;
}

/* ページ内リンク（特徴 / サービス / 案件事例 など） */
.anchor-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.anchor-nav a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  transition: background-color .25s, border-color .25s;
}

.anchor-nav a:hover {
  background: rgb(255 255 255 / .14);
  border-color: var(--text);
}

@media (max-width:760px) {
  .page-hero {
    padding: 120px 0 64px;
  }

  .page-hero__title {
    margin-top: 32px;
  }

  .page-hero__foot {
    margin-top: 40px;
  }
}

/* ----- セクション ------------------------------------------------------------------- */
.sub-section {
  padding: 120px 0;
}

.sub-section + .sub-section {
  border-top: 1px solid var(--rule);
}

.sub-section--pale {
  background: var(--c-pale);
}

.sub-section--pale + .sub-section,
.sub-section + .sub-section--pale {
  border-top: 0;
}

.sub-section--blue {
  background: var(--g-field-light);
}

.sub-heading {
  display: grid;
  gap: 14px;
  margin-bottom: 64px;
}

/* 共通の階層：ヒーロー（display の 1.2 倍）、H2 セクション（display）、H3 グループ（statement）。 */
.sub-heading > .title-section {
  font-size: var(--t-display);
  color: var(--accent);
  line-height: 1.05;
  letter-spacing: -.045em;
}
.sub-page h3.title-group {
  line-height: 1.1;
}
.sub-heading:has(> .title-section) { gap: 17px; }
.sub-heading > .title-section + p {
  font-family: var(--f-serif);
  font-size: var(--t-body);
  font-weight: var(--w-head);
  line-height: 1.7;
  letter-spacing: .08em;
}
@media (max-width: 760px) {
  .sub-heading:has(> .title-section) { gap: 13px; }
}

.sub-heading > p:first-child {
  color: var(--accent);
  line-height: 1.05;
  letter-spacing: -.045em;
}

/* headline サイズの日本語見出しの上に置く英語ラベル（募集要項の職種）。
   書体は .title-group を借りるが、ここでは見出しの中段ではなくラベルなので、
   小さめの段階を保ち、導く見出しの上に立つのではなくその下に従う。
   それ以外の sub-heading 内の .title-group はセクションタイトルで、TOP と同じ格。 */
.sub-heading > .title-group:first-child:has(+ .t-headline) {
  font-size: var(--t-subhead);
}

.sub-heading h2 {
  color: var(--accent-deep);
  line-height: 1.55;
}

.sub-heading .sub-heading__lead {
  max-width: 48em;
  margin-top: 10px;
  display: grid;
  gap: 1em;
}

@media (max-width:760px) {
  .sub-section {
    padding: 80px 0;
  }

  .sub-heading {
    margin-bottom: 44px;
  }
}

/* ----- 本文の組み（法務・記事） ------------------------------------------------------ */
.prose {
  max-width: 820px;
  margin-inline: auto;
}

.prose > * + * {
  margin-top: 1.4em;
}

.prose :is(h2, h3) {
  color: var(--accent-deep);
  line-height: 1.6;
}

.prose h2 {
  margin-top: 2.6em;
  padding-bottom: .6em;
  border-bottom: 1px solid var(--rule);
}

.prose h3 {
  margin-top: 2em;
}

.prose :is(ul, ol) {
  padding-left: 1.4em;
}

.prose li + li {
  margin-top: .4em;
}

.prose a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.prose figure img {
  width: 100%;
  height: auto;
  border-radius: var(--photo-radius);
}

.prose figcaption {
  margin-top: 10px;
  color: var(--text-muted);
}

.prose .signature {
  text-align: right;
}

/* ----- 定義リスト（会社概要・募集要項） --------------------------------------------- */
.info-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.info-list > div {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.info-list dt {
  color: var(--accent-deep);
}

.info-list dd {
  margin: 0;
}

.info-list dd > * + *,
.info-list dd > address > * + * {
  margin-top: .4em;
}

.info-list .note {
  color: var(--text-muted);
}

@media (max-width:760px) {
  .info-list > div {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 20px 0;
  }
}

/* ----- Features：番号付きのタブ（01 / 02 / 03） -------------------------------------- */
.feature-tabs__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

.feature-tabs__tab {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding: 26px 24px 26px 0;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.7;
  position: relative;
  transition: color .25s;
}

.feature-tabs__tab + .feature-tabs__tab {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}

.feature-tabs__tab::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--c-orange);
  transition: width .5s var(--motion-ease);
}

.feature-tabs__tab[aria-selected="true"] {
  color: var(--accent-deep);
}

.feature-tabs__tab[aria-selected="true"]::before {
  width: 100%;
}

.feature-tabs__tab:hover {
  color: var(--accent-deep);
}

.feature-tabs__tab > span:first-child {
  color: var(--c-orange);
  line-height: 1.3;
}

.feature-tabs__panel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  margin-top: 56px;
}

.feature-tabs__panel[hidden] {
  display: none;
}

.feature-tabs__panel h3 {
  color: var(--accent-deep);
  line-height: 1.6;
}

.feature-tabs__panel h3 + p {
  margin-top: 22px;
}

.feature-points {
  padding: 32px 36px;
  border-radius: var(--photo-radius);
  background: #fff;
  border: 1px solid var(--rule);
}

.feature-points > p {
  color: var(--c-orange);
  letter-spacing: .1em;
}

.feature-points ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.feature-points li {
  position: relative;
  padding-left: 22px;
  line-height: 1.8;
}

.feature-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .78em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-blue-mid);
}

.feature-tabs__count {
  margin-top: 40px;
  color: var(--text-muted);
}

@media (max-width:900px) {
  .feature-tabs__panel {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width:760px) {
  .feature-tabs__list {
    grid-template-columns: 1fr;
  }

  .feature-tabs__tab,
  .feature-tabs__tab + .feature-tabs__tab {
    padding: 18px 0;
    border-left: 0;
    border-bottom: 1px solid var(--rule);
  }

  .feature-tabs__panel {
    margin-top: 36px;
  }

  .feature-points {
    padding: 24px 22px;
  }
}

/* ----- サービス行 ------------------------------------------------------------------- */
.service-rows {
  border-top: 1px solid var(--rule);
}

.service-row {
  display: grid;
  grid-template-columns: 80px minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  padding: 44px 0;
  border-bottom: 1px solid var(--rule);
}

.service-row > span {
  color: var(--c-orange);
  line-height: 1.3;
}

.service-row h3 {
  display: grid;
  gap: 10px;
  align-content: start;   /* 背の高い行（量子）でも、名前は英語名の直下に置き、中ほどへ落とさない */
  color: var(--accent-deep);
}

.service-row h3 > span:first-child {
  color: var(--accent);
  line-height: 1.2;
}

/* 英語名と担当するフェーズ（構想 / 設計 / 実行 …）を 1 行に並べる。 */
.service-row__en {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.service-phase {
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  line-height: 1.5;
  letter-spacing: .08em;
}

.service-row h3 + p,
.service-row > div > p {
  margin-top: 14px;
}

/* 語ることの多いサービス（量子）：本文の上にキャッチコピー、小さなラベルの下に
   対象分野のタグを置く。 */
.service-row__catch {
  color: var(--accent-deep);
  line-height: 1.6;
}

.service-row > div > .t-body + .t-body {
  margin-top: 10px;
}

.service-row__targets-label {
  margin-top: 22px;
  color: var(--text-muted);
  letter-spacing: .08em;
}

.service-row__targets-label + .service-tags {
  margin-top: 10px;
}

/* 1 つの職種に複数のポストがぶら下がる場合（バックオフィス）：各ポスト名をその条件の上に置く。 */
.job-subroles {
  display: grid;
}

.job-subroles > .info-list + .job-subrole {
  margin-top: 56px;
}

.job-subrole {
  margin-bottom: 18px;
  padding-left: 14px;
  border-left: 3px solid var(--c-orange);
  color: var(--accent-deep);
  line-height: 1.5;
}

/* お問い合わせの前に置くページのメッセージ：日本語見出しと本文、そのあとに締めの一文。 */
.sub-message {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px 64px;
  align-items: start;
}

.sub-message h2 {
  color: var(--accent-deep);
  line-height: 1.5;
}

.sub-message > div {
  display: grid;
  gap: 1em;
  line-height: 2;
}

.sub-closing {
  display: grid;
  gap: 20px;
  justify-items: center;
  margin-top: 96px;
  text-align: center;
  color: var(--accent-deep);
}

.sub-closing .t-statement {
  line-height: 1.5;
}

.sub-closing .btn {
  margin-top: 12px;
}

@media (max-width:900px) {
  .sub-message {
    grid-template-columns: 1fr;
  }

  .sub-closing {
    margin-top: 64px;
  }
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.service-tags li {
  padding: 4px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--accent-deep);
  line-height: 1.7;
}

/* サービスカード内の項目はそのサービスが扱う範囲であって選択肢ではない：細い罫線だけの
   素のリストにして、ボタンに見えないようにする。 */
.service-card .service-tags {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
}

.service-card .service-tags li {
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}

@media (max-width:900px) {
  .service-row {
    grid-template-columns: 56px 1fr;
  }

  .service-row > :last-child {
    grid-column: 2;
  }
}

@media (max-width:760px) {
  .service-row {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 32px 0;
  }

  .service-row > :last-child {
    grid-column: 1;
  }
}

/* ----- 領域のセクション（Servicesトップ） ------------------------------------------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.service-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

/* 6 つのコンサルティングサービスを、サービスマップと同じく横 3 列に並べる。 */
.service-grid--three {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width:1100px) {
  .service-grid--three { grid-template-columns: repeat(2, 1fr); }
}

.service-card__en {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: var(--accent);
}

/* セクションのリード文。タイトルとカードの間に置く。 */
.sub-lead {
  margin: -32px 0 40px;
  color: var(--accent-deep);
  line-height: 2;
}

.service-card {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 36px 34px;
  border-radius: var(--photo-radius);
  background: #fff;
  border: 1px solid var(--rule);
}

.service-card .title-feature {
  color: var(--accent);
  line-height: 1.25;
}

.service-card h3 {
  color: var(--accent-deep);
}

.service-card .service-tags {
  margin-top: 8px;
}

.service-card .service-icon {
  width: 48px;
  height: 48px;
}

.section-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 40px;
}

@media (max-width:760px) {
  .service-grid,
  .service-grid--two,
  .service-grid--three {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 28px 24px;
  }

  .section-more {
    justify-content: flex-start;
  }
}

/* ----- 案件事例 --------------------------------------------------------------------- */
.case-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 36px;
  padding: 0;
  list-style: none;
}

.case-filter button {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--accent-deep);
  transition: background-color .25s, color .25s, border-color .25s;
}

.case-filter button[aria-pressed="true"] {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.case-card {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: #fff;
  border: 1px solid var(--rule);
}

.case-card[hidden] {
  display: none;
}

.case-card figure {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-pale);
}

.case-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-card__body {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 26px 26px 30px;
}

.case-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  color: var(--text-muted);
}

.case-card__meta span:first-child {
  color: var(--c-orange);
}

.case-card h3 {
  color: var(--accent-deep);
  line-height: 1.6;
}

.case-card ul {
  margin: 4px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
  display: grid;
  gap: 6px;
}

.case-card li {
  position: relative;
  padding-left: 16px;
  line-height: 1.75;
}

.case-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .8em;
  width: 6px;
  height: 1px;
  background: currentColor;
}

@media (max-width:1100px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:760px) {
  .case-grid {
    grid-template-columns: 1fr;
  }

  .case-card__body {
    padding: 22px 22px 26px;
  }
}

/* ----- カードの一覧（Journal） ------------------------------------------------------ */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 28px;
}

.entry-card {
  display: grid;
  gap: 14px;
  align-content: start;
}

.entry-card figure {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--c-pale);
}

.entry-card figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry-card__meta {
  display: flex;
  gap: 12px;
  color: var(--text-muted);
}

.entry-card__meta span {
  color: var(--c-orange);
}

.entry-card :is(h2, h3) {
  color: var(--accent-deep);
  line-height: 1.7;
}

@media (max-width:1100px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:760px) {
  .card-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* ----- お知らせの行 ----------------------------------------------------------------- */
.news-lines {
  border-top: 1px solid var(--rule);
}

.news-line {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--accent-deep);
}

.news-line time {
  color: var(--text-muted);
}

.news-line .arrow {
  color: var(--accent);
}

.news-line:hover .arrow {
  transform: translate(3px, -3px);
}

@media (max-width:760px) {
  .news-line {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 22px 0;
  }

  .news-line time {
    grid-column: 1 / -1;
  }
}

/* ----- 記事ページの頭 --------------------------------------------------------------- */
.article-head {
  display: grid;
  gap: 18px;
  max-width: 820px;
  margin: 0 auto 56px;
}

.article-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--text-muted);
}

.article-head__meta span {
  color: var(--c-orange);
}

.article-head h1 {
  color: var(--accent-deep);
  line-height: 1.6;
}

.article-head figure {
  margin-top: 18px;
  overflow: hidden;
  border-radius: var(--photo-radius);
}

.article-head figure img {
  width: 100%;
  height: auto;
}

.article-foot {
  max-width: 820px;
  margin: 72px auto 0;
  padding-top: 36px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: center;
  gap: 20px;
}

/* ----- フォーム --------------------------------------------------------------------- */
.form {
  max-width: 880px;
  margin-inline: auto;
}

.form-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}

.form-row:first-child {
  border-top: 1px solid var(--rule);
}

.form-row > :first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: start;
  gap: 4px 10px;
  padding-top: 12px;
  color: var(--accent-deep);
}

.form-row .note {
  width: 100%;
  color: var(--text-muted);
}

.req {
  display: inline-block;
  padding: 0 10px;
  border-radius: 4px;
  background: var(--c-orange);
  color: #fff;
  line-height: 1.8;
}

.form-field {
  display: grid;
  gap: 10px;
}

.form-field .note {
  color: var(--text-muted);
}

.form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: 8px;
  background: #fff;
  color: var(--c-ink);
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
}

.form textarea {
  min-height: 220px;
  resize: vertical;
}

.form :is(input, select, textarea):focus-visible {
  outline: 0;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgb(22 68 175 / .16);
}

.form input[type="file"] {
  padding: 10px 0;
}

/* 迷惑送信（ボット）対策の隠し項目。人には見えず、ボットだけが埋める（js/form.js・api/） */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* 送信中・失敗の表示（js/form.js が書き込む） */
.form-status {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 8px;
  background: var(--c-pale);
  color: var(--c-ink);
}

.form-status.is-error {
  background: #fff3ec;
  color: #b4420e;
}

.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

/* 生年月日（年・月・日）は1行に並べる。
   .form の共通指定（width:100%）より強くするため .form から書く */
.form .form-inline {
  flex-wrap: nowrap;
}

.form .form-inline select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  max-width: 200px;
}

.form .form-inline span {
  flex: none;
}

.form-check {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
  cursor: pointer;
}

.form-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--c-blue);
}

/* 同意欄と注記（応募職種の「募集要項」）のリンク */
.form-check a,
.form .note a {
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.form-actions {
  display: flex;
  justify-content: center;
  margin-top: 56px;
}

.form-notice {
  max-width: 880px;
  margin: 0 auto 48px;
  display: grid;
  gap: .8em;
}

@media (max-width:760px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 22px 0;
  }

  .form-row > :first-child {
    padding-top: 0;
  }
}

/* ----- 完了ページ ------------------------------------------------------------------- */
.thanks {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}

.thanks h2 {
  color: var(--accent-deep);
  margin-bottom: 10px;
}

.thanks .btn {
  margin-top: 30px;
}

/* ----- 小さな見出し付きの段（Philosophy・募集要項） ---------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 56px;
}

.split > :first-child {
  align-self: start;
  position: sticky;
  top: 170px;  /* ヘッダー＋ページ内ナビの帯の下 */
}

@media (max-width:900px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .split > :first-child {
    position: static;
  }
}

/* ----- フッターの帯 ----------------------------------------------------------------- */
/* footer.css の .footer は白文字（TOP では青の面の上）。下層では青い帯を敷く。 */
.sub-foot {
  background: linear-gradient(180deg, #1644af, #247fca);
}

.footer-nav {
  display: grid;
  gap: 14px;
  padding: 56px 0 8px;
  border-bottom: 1px solid rgb(255 255 255 / .24);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 0;
  padding: 0 0 22px;
  list-style: none;
}

.footer-nav ul + ul {
  gap: 8px 22px;
  color: #d8ecfb;
}

.footer-nav a {
  color: #fff;
}

.footer-nav ul + ul a {
  color: #d8ecfb;
}

.footer-nav a:hover {
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* CTA の帯が1枚だけのページ（Contact / Entry など） */
.closing-actions[data-count="1"] {
  grid-template-columns: 1fr;
}

/* 新規事業カードの「詳細を見る」ボタン：カードの右端に寄せる */
.service-card > .btn {
  margin-top: 14px;
  justify-self: end;
}

@media (max-width:760px) {
  .service-card > .btn {
    justify-self: stretch;
  }
}

/* 「具体的には」を持たない特徴（AI・量子） */
.feature-tabs__panel--single {
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}

.feature-tabs__tab:is(:hover, :focus-visible) {
  box-shadow: none;
  filter: none;
}

.split .sub-heading .btn {
  justify-self: start;
  margin-top: 18px;
}

.split .info-list > div {
  grid-template-columns: 160px 1fr;
}

@media (max-width:760px) {
  .split .info-list > div {
    grid-template-columns: 1fr;
  }
}

/* 記事ページなど、ヒーローを低くするページ */
.page-hero--compact {
  padding-bottom: 56px;
}

.page-hero--compact .page-hero__title {
  margin-top: 28px;
}

/* 記事本文：WordPress から移した段落・見出し・画像 */
.article-body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--photo-radius);
}

.article-body img {
  height: auto;
  border-radius: var(--photo-radius);
}

.article-body table {
  width: 100%;
  border-collapse: collapse;
}

.article-body :is(td, th) {
  padding: 12px 14px;
  border: 1px solid var(--rule);
  text-align: left;
}

/* ----- ページ内ナビの追随（sub.js がヒーローのナビを複製して出す） ------------------- */
.anchor-bar {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h, 68px);
  z-index: 40;
  padding: 10px var(--gutter);
  background: rgb(246 249 252 / .9);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  translate: 0 -12px;
  pointer-events: none;
  transition: opacity .25s, translate .25s var(--motion-ease);
}

.anchor-bar.is-shown {
  opacity: 1;
  translate: 0 0;
  pointer-events: auto;
}

.anchor-bar .anchor-nav {
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  scrollbar-width: none;
}

.anchor-bar .anchor-nav a {
  min-height: 40px;
  white-space: nowrap;
  color: var(--c-deep);
  border-color: var(--c-line);
  background: #fff;
}

.anchor-bar .anchor-nav a:hover {
  border-color: var(--c-blue);
}

.anchor-bar .anchor-nav a[aria-current="true"] {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

/* 帯の分だけ、ページ内リンクの着地点を下げる */
html:has(.anchor-bar) {
  scroll-padding-top: 150px;
}

@media (max-width:760px) {
  .anchor-bar .anchor-nav {
    justify-content: flex-start;
  }
}

/* ----- Journal：4列とページ送り ------------------------------------------------------ */
.card-grid--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 24px;
}

@media (max-width:1100px) {
  .card-grid--4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width:900px) {
  .card-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:760px) {
  .card-grid--4 {
    grid-template-columns: 1fr;
  }
}

.pager {
  margin-top: 72px;
}

.pager ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pager :is(a, span) {
  display: grid;
  place-items: center;
  min-width: 48px;
  height: 48px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  color: var(--accent-deep);
  transition: background-color .25s, border-color .25s, color .25s;
}

.pager a:hover {
  border-color: var(--c-blue);
}

.pager [aria-current="page"] {
  background: var(--c-blue);
  border-color: var(--c-blue);
  color: #fff;
}

/* 第 2 階層のランディングページは、タイトルだけのヒーローのリズムを共有する。 */
.page-hero--index::before,
:is([data-page="consulting"], [data-page="ai"], [data-page="quantum"]) .page-hero::before {
  content: none;
}

.page-hero--index {
  box-sizing: border-box;
  min-height: 480px;
  padding: 168px 0 96px;
}
.page-hero--index .page-hero__title { margin-top: 48px; }
.page-hero--index .page-hero__title > .title-section { line-height: 1; margin-bottom: 0; }
.page-hero--index .page-hero__title h1 { margin-top: 17px; margin-bottom: 0; line-height: 1.7; }
@media (max-width: 760px) {
  .page-hero--index { min-height: 360px; padding: 120px 0 64px; }
  .page-hero--index .page-hero__title { margin-top: 32px; }
  .page-hero--index .page-hero__title h1 { margin-top: 13px; }
}

.business-hero-statement {
  margin-top: clamp(36px, 4vw, 64px);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
  line-height: 1.6;
  letter-spacing: .02em;
  text-wrap: pretty;
}

/* 3 つの事業詳細ページのヒーローで共有する縦のリズム。 */
.page-hero--business { padding: 168px 0 96px; }
.page-hero--business .page-hero__title { margin-top: 48px; }
.page-hero--business .page-hero__title > .title-section { margin: 0; line-height: 1; }
.page-hero--business .page-hero__title h1 { margin: 17px 0 0; line-height: 1.7; }
.page-hero--business .business-hero-statement { margin: 56px 0 0; padding-bottom: 28px; }
.page-hero--business .page-hero__lead { margin: 30px 0 0; }
/* リード文はヒーローの全幅に広げ、上の罫線と揃える：54em では 1 行目が 1〜2 文字だけ
   足りず、その文字だけが次の行に落ちていた。最後の行が 1 語だけにならないようにもする。 */
.page-hero--business .page-hero__lead { max-width: none; text-wrap: pretty; }
@media (max-width: 760px) {
  .page-hero--business { padding: 120px 0 64px; }
  .page-hero--business .page-hero__title { margin-top: 32px; }
  .page-hero--business .page-hero__title h1 { margin-top: 13px; }
  .page-hero--business .business-hero-statement { margin-top: 36px; padding-bottom: 24px; }
  .page-hero--business .page-hero__lead { margin-top: 24px; }
  /* iPhone の Safari は text-wrap: pretty で段落全体の行の長さをそろえるため、各行が短くなり右側が
     大きく空いていた（2026-10-30 実機）。スマホは通常の折り返しに戻す。PC は pretty のまま。 */
  .page-hero--business .page-hero__lead { text-wrap: wrap; }
}

/* ----- スマホだけの調整（PC の見た目は変えない。2026-10-29 のスマホ点検より） ------------ */
/* Features（AI・量子）：.feature-tabs__panel--single の 2 カラム指定が 900px 以下の 1 カラム指定より後に
   あるため、スマホでも本文が左 6 割に収まっていた。タブレット以下は 1 カラムにする */
@media (max-width:900px) {
  .feature-tabs__panel--single {
    grid-template-columns: 1fr;
  }
}

@media (max-width:760px) {
  /* Features：タブの切り替え方が分かりにくいので、スマホでは 01〜03 を縦に並べて全部見せる */
  .feature-tabs {
    counter-reset: feature;
  }

  .feature-tabs__list,
  .feature-tabs__count {
    display: none;
  }

  .feature-tabs__panel,
  .feature-tabs__panel[hidden] {
    display: grid;
    margin-top: 0;
    padding: 28px 0;
    border-top: 1px solid var(--rule);
  }

  .feature-tabs__panel:last-of-type {
    border-bottom: 1px solid var(--rule);
  }

  .feature-tabs__panel h3::before {
    counter-increment: feature;
    content: counter(feature, decimal-leading-zero);
    display: block;
    margin-bottom: 10px;
    font: var(--w-body) var(--t-subhead)/1.3 var(--f-serif);
    color: var(--c-orange);
  }

  /* パンくず：長い記事名は末尾を「…」で省略 */
  .breadcrumb li:last-child {
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 「〜の詳細を見る」ボタン：長いラベルが画面からはみ出さないように余白を詰める */
  .section-more .btn {
    --btn-pad: 18px;
    --btn-gap: 12px;
    max-width: 100%;
    font-size: 14px;
  }

  /* ページ上部の職種チップ：途中で折れて太くならないように */
  .anchor-nav a {
    white-space: nowrap;
    padding: 0 14px;
    gap: 8px;
  }

  /* 完了ページ：本文は左揃え（中央揃えだと語の途中で折り返して行頭がそろわない） */
  .thanks .t-body {
    text-align: left;
  }

  /* エントリーのファイル選択：他の入力欄と同じ見た目のボタンにする */
  .form input[type="file"] {
    width: 100%;
  }

  .form input[type="file"]::file-selector-button {
    font: inherit;
    margin-right: 12px;
    padding: 10px 16px;
    border: 1px solid var(--c-line);
    border-radius: 8px;
    background: #fff;
    color: var(--c-ink);
  }

  /* 利用規約：各条の「項」（<br> 区切り）の間を少し空けて区切りを分かりやすく */
  .prose--terms .clause {
    display: block;
  }

  .prose--terms .clause + br {
    display: none;
  }

  .prose--terms .clause + br + .clause {
    margin-top: .6em;
  }
}

/* スマホの追随するページ内ナビ：帯の左右の余白の内側で横スクロールさせると、チップが余白の位置で
   切れて見えた。スクロールする列を画面の端から端まで（横幅 100%）にし、余白は列の内側の最初と
   最後に取る（2026-10-30 実機レビュー）。 */
@media (max-width: 760px) {
  .anchor-bar {
    padding-inline: 0;
  }

  .anchor-bar .anchor-nav {
    width: 100%;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }

  .anchor-bar .anchor-nav::-webkit-scrollbar {
    display: none;
  }

}