@charset "UTF-8";
/* ==========================================================================
   pages/about.css — 私たちについて・会社情報配下（p-系）（SPD-v2）
   ========================================================================== */

/* データで見る
   ========================================================================== */
.p-numbers {
  display: grid;
  gap: 1.6rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.4rem;
  }
}

/* 1項目。数字（文字）と図（画像）を同じマスに重ねる。文字は左上・前面、図は右下・背面 */
.p-numbers-item {
  display: grid;
  padding: 2.8rem 2.4rem;
  border-block-start: 2px solid var(--cl-green-dk);
  background-color: var(--cl-offwh);

  & > * { grid-area: 1 / 1; }

  @media print, screen and (min-width: 640px) {
    grid-column: span 6;

    &._sales { grid-column: span 7; }
    &._bases { grid-column: span 5; }
    &._group { grid-column: 1 / -1; }
  }

  @media print, screen and (min-width: 1024px) {
    padding: clamp(3.2rem, 3vw, 4rem) clamp(3.2rem, 3.4vw, 4.8rem);
  }
}

.p-numbers-body {
  z-index: 1;
  display: grid;
  align-content: start;
  align-self: start;
  justify-self: start;
  gap: 0.8rem;

  & p {
    color: var(--cl-txt-sub);
    font-size: var(--fs-s);
  }

  & strong {
    color: var(--cl-green-dk);
    font-family: var(--ff-num);
    font-size: 6.4rem;
    font-weight: 500;
    line-height: 1;

    /* 図はパネル幅に比例して大きくなるので、数字も画面幅に追従させる（1440で9.6rem） */
    @media print, screen and (min-width: 1024px) { font-size: clamp(6.4rem, 6.6vw, 9.6rem); }
  }

  & small {
    margin-inline-start: 0.4rem;
    font-family: var(--ff-sans);
    font-size: 1.6rem;
    font-weight: 700;

    @media print, screen and (min-width: 1024px) { font-size: 2.2rem; }
  }

  & span {
    color: var(--cl-gr);
    font-size: var(--fs-s);
    word-break: keep-all; /* 名称の途中で折らない（区切りは <wbr>） */
  }
}

/* 説明文は図の空白（左上）に収まる幅で折る。拠点名の並びが地図の点の上に伸びないように */
.p-numbers-item._sales .p-numbers-body span { max-inline-size: 22em; }
.p-numbers-item._bases .p-numbers-body span { max-inline-size: 11em; }

.p-numbers-fig {
  align-self: end;
  justify-self: end;
  inline-size: 94%;

  & img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .p-numbers-item._bases & { inline-size: 84%; } /* 売上グラフと高さがほぼ揃う幅 */
}

/* SP：売上の横長グラフは文字と重なる面積が大きく読めなくなるので、縦に積んで数字の下へ少しだけ潜らせる */
.p-numbers-item._sales {
  & > * { grid-area: auto; }

  @media print, screen and (min-width: 640px) {
    & > * { grid-area: 1 / 1; }
  }
}

.p-numbers-item._sales .p-numbers-fig {
  inline-size: 100%;
  margin-block-start: -2.4rem;

  @media print, screen and (min-width: 640px) {
    inline-size: 94%;
    margin-block-start: 0;
  }
}

/* 図なしの帯（グループ企業数）：数字を左、社名を右に */
.p-numbers-item._group .p-numbers-body {
  @media print, screen and (min-width: 640px) {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 4.8rem;

    & p,
    & strong { grid-column: 1; }

    & strong { font-size: 6.4rem; }

    & span {
      grid-column: 2;
      grid-row: 1 / span 2;
      display: flex;
      align-items: center;
      align-self: stretch;
      max-inline-size: none;
      padding-inline-start: 4.8rem;
      border-inline-start: 1px solid var(--cl-ln-tag);
      font-size: var(--fs-m);
    }
  }
}

.p-numbers-note {
  margin-block-start: 1.2rem;
  color: var(--cl-gr);
  font-size: var(--fs-xs);
  text-align: end;
}

/* 拠点・グループ会社のカード
   ========================================================================== */
.p-bases {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;

    &._col2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

.p-base {
  display: grid;
  align-content: start;
  gap: 1.2rem;
  padding: 2.8rem 2.4rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);

  & .c-h3 { margin-block-end: 0; }
}

.p-base-tel {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-family: var(--ff-num);
  font-size: 1.8rem;
  font-weight: 500;

  & span {
    color: var(--cl-gr);
    font-size: 1.5rem;
    font-weight: 400;
  }
}

/* 拠点・アクセス（左に住所、右に Googleマップ。SPは縦積み）
   ========================================================================== */
.p-accessList {
  display: grid;
  gap: 2.4rem;
  margin-block-start: 3.2rem;
}

.p-access {
  display: grid;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);

  @media print, screen and (min-width: 640px) {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

.p-access-info {
  display: grid;
  align-content: center;
  gap: 1.6rem;
  padding: 2.8rem 2.4rem;

  @media print, screen and (min-width: 1024px) {
    gap: 2rem;
    padding: 4.8rem;
  }

  & .c-h3 { margin-block-end: 0; }
}

.p-access-addr {
  font-size: var(--fs-m);
  font-style: normal;
  line-height: 1.9;
}

.p-access-map {
  position: relative;
  aspect-ratio: 4 / 3;
  background-color: var(--cl-bggr);

  @media print, screen and (min-width: 640px) {
    aspect-ratio: auto;
    min-block-size: 40rem; /* 住所側の高さ（約39.6rem）以上にして、6拠点とも同じ高さに揃える */
  }

  & iframe {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }

  /* 所在地が未確定の拠点：地図の枠だけ置く */
  &._empty {
    display: grid;
    place-items: center;
    padding: 2rem;
    color: var(--cl-gr);
    font-size: var(--fs-s);
    text-align: center;
  }
}

.p-sign {
  margin-block-start: 3.2rem;
  color: var(--cl-green-dk);
  font-family: var(--ff-serif);
  font-size: var(--fs-l);
  font-weight: 600;
  text-align: end;
}

/* ==========================================================================
   私たちについて（/about/）
   7月の提案版（旧 style.css）の構成を blue-ptn1 のトンマナで組み直したもの
   ========================================================================== */

/* ファーストビュー：受付のロゴが見出しに重ならないよう、写真を少し拡大して右へ逃がす
   ========================================================================== */
.p-aboutKv .c-hero-bg img {
  @media print, screen and (min-width: 1024px) {
    scale: 1.35;
    transform-origin: 5% 45%;
  }
}

/* WHO WE ARE
   ========================================================================== */
.p-who {
  padding-block: var(--sp-sec);
  background-color: var(--cl-bggr);

  & .c-kicker { margin-block-end: 2.4rem; }
}

.p-who-lead {
  margin-block-end: 2.4rem;
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;
}

.p-who-text {
  max-inline-size: 112rem;
  font-size: var(--fs-m);
  letter-spacing: 0.04em;
  line-height: 1.9;

  & + .p-who-text { margin-block-start: 1.2rem; }
}

/* 立場ごとの入口
   ========================================================================== */
.p-audience {
  padding-block: var(--sp-sec);
}

.p-audience-grid {
  display: grid;
  gap: 1.6rem;
  margin-block-start: 3.2rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
  }

  @media print, screen and (min-width: 1024px) {
    margin-block-start: 4.8rem;
  }
}

.p-audience-item {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 1.2rem;
  padding: 2.8rem 2.4rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  color: var(--cl-txt);
  transition: border-color var(--ease-t), box-shadow var(--ease-t);

  & strong {
    color: var(--cl-key);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
    line-height: 1.5;
  }

  & p {
    color: var(--cl-txt-sub);
    font-size: var(--fs-s);
    line-height: 1.85;
  }

  &._primary {
    border-color: var(--cl-green-dk);
    background-color: var(--cl-green-dk);
    color: var(--cl-wh);

    & strong { color: var(--cl-wh); }
    & p { color: rgb(246 245 240 / 0.8); }
    & .p-audience-more { color: var(--cl-gold-lt); }
  }

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-green-dk);
      box-shadow: 0 1.2rem 2.4rem rgb(5 47 36 / 0.12);
      opacity: 1;
    }
  }

  @media print, screen and (min-width: 1024px) {
    padding: 3.6rem 3.2rem;
  }
}

.p-audience-role {
  color: var(--cl-gold);
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.p-audience-more {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  justify-self: start;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid currentColor;
  color: var(--cl-blue);
  font-size: var(--fs-s);
  font-weight: 700;

  &::after {
    content: "";
    inline-size: 1.2rem;
    block-size: 1.2rem;
    background-color: currentColor;
    mask: url(/assets/images/common/ico_arrow_dbl.svg) no-repeat center / contain;
  }
}

/* 5つの強み（章ごとに 本文=左／写真=右 のフルブリード）
   ========================================================================== */
.p-strength {
  padding-block-start: var(--sp-sec);
}

.p-strength-list {
  margin-block-start: 3.2rem;

  @media print, screen and (min-width: 1024px) {
    margin-block-start: 4.8rem;
  }
}

.p-strength-item {
  display: grid;
  color: var(--cl-offwh);
  background-color: var(--cl-green-dk);

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }

  /* 偶数章は白地 */
  &._lt {
    color: var(--cl-txt);
    background-color: var(--cl-wh);
  }
}

.p-strength-media {
  position: relative;
  aspect-ratio: 4 / 3;
  max-inline-size: 100%;
  overflow: hidden;

  /* 縦長の写真が行の高さを決めて、本文の上下に余白が余らないよう、写真は枠いっぱいに重ねる（高さは本文＋padding で決まる） */
  & img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  @media print, screen and (min-width: 1024px) {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: auto;
  }
}

.p-strength-body {
  display: grid;
  align-content: center;
  gap: 1.6rem;
  padding-block: 4.8rem 5.6rem;
  padding-inline: var(--inner-pad);

  @media print, screen and (min-width: 1024px) {
    grid-column: 1;
    grid-row: 1;
    gap: 2rem;
    padding-block: 9.6rem;
    padding-inline: max(var(--inner-pad), calc((100vw - var(--inner-max)) / 2)) 8rem;
  }
}

.p-strength-num {
  color: var(--cl-gold-lt);
  font-family: var(--ff-en);
  font-size: 8rem;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1;

  @media print, screen and (min-width: 1024px) {
    font-size: 14rem;
  }
}

.p-strength-title {
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.5;

  @media print, screen and (min-width: 1024px) {
    font-size: 3.4rem;
  }
}

.p-strength-sub {
  color: var(--cl-gold-lt);
  font-size: var(--fs-m);
  font-weight: 700;

  @media print, screen and (min-width: 1024px) {
    font-size: 1.8rem;
  }
}

.p-strength-text {
  max-inline-size: 72rem;
  color: rgb(246 245 240 / 0.85);
  font-size: var(--fs-m);
  line-height: 1.9;
}

.p-strength-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-block-start: 1.6rem;

  & .c-btn { min-inline-size: min(28rem, 100%); }
}

.p-strength-item._lt {
  & .p-strength-num { color: var(--cl-gold); }
  & .p-strength-title { color: var(--cl-key); }
  & .p-strength-sub { color: var(--cl-gold-dk); }
  & .p-strength-text { color: var(--cl-txt); }
}

/* 章の中の図解（枠つき） */
.p-fig {
  display: grid;
  gap: 1.6rem;
  max-inline-size: 72rem;
  margin-block-start: 0.8rem;
  padding: 2rem;
  border: 1px solid rgb(228 216 168 / 0.3);

  @media print, screen and (min-width: 1024px) {
    padding: 2.8rem 3.2rem;
  }
}

.p-fig-label {
  color: var(--cl-gold-lt);
  font-size: var(--fs-m);
  font-weight: 700;
}

.p-fig-note {
  color: rgb(246 245 240 / 0.75);
  font-size: var(--fs-s);
  line-height: 1.8;
}

.p-strength-item._lt .p-fig {
  border-color: var(--cl-ln-card);
  background-color: var(--cl-offwh);

  & .p-fig-label { color: var(--cl-gold-dk); }
  & .p-fig-note { color: var(--cl-txt-sub); }
}

/* 工法選定の考え方（3条件→提案） */
.p-logic {
  display: grid;
  gap: 1.2rem;
}

.p-logic-inputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;

  & li {
    display: grid;
    justify-items: center;
    gap: 0.8rem;
    padding: 1.6rem 0.8rem;
    border: 1px solid rgb(228 216 168 / 0.3);
    font-size: var(--fs-s);
    font-weight: 700;
  }

  & img { inline-size: 5.6rem; }
}

.p-logic-arrow {
  justify-self: center;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  background-color: var(--cl-gold-lt);
  mask: url(/assets/images/common/ico_chevron.svg) no-repeat center / contain;
}

.p-logic-result {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 1.2rem 2rem;
  background-color: var(--cl-gold-lt);
  color: var(--cl-green-dk);
  font-size: var(--fs-s);
  font-weight: 700;

  & img { inline-size: 4.8rem; }
}

/* 3段の流れ図 */
.p-flow3 {
  display: grid;
  gap: 0.8rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
  }
}

.p-flow3-node {
  display: grid;
  align-content: start;
  gap: 0.4rem;
  padding: 1.4rem 1.6rem;
  border: 1px solid rgb(228 216 168 / 0.3);
  line-height: 1.6;

  & span {
    color: var(--cl-gold-lt);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  & strong { font-size: var(--fs-m); }

  & small {
    color: rgb(246 245 240 / 0.75);
    font-size: var(--fs-xs);
  }

  &._core {
    border-color: var(--cl-gold-lt);
    background-color: rgb(228 216 168 / 0.12);
  }
}

.p-flow3-arrow {
  justify-self: center;
  align-self: center;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  background-color: var(--cl-gold);
  mask: url(/assets/images/common/ico_chevron.svg) no-repeat center / contain;

  @media print, screen and (min-width: 640px) {
    rotate: -90deg;
  }
}

.p-strength-item._lt .p-flow3-node {
  border-color: var(--cl-ln-card);
  background-color: var(--cl-wh);

  & span { color: var(--cl-gold-dk); }
  & strong { color: var(--cl-green-dk); }
  & small { color: var(--cl-txt-sub); }
}

.p-strength-item._lt .p-flow3-node._core {
  border-color: var(--cl-gold);
  background-color: var(--cl-offwh);
}

/* グループ体制 */
.p-group {
  display: grid;
  gap: 1rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  & li {
    display: grid;
    gap: 0.4rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--cl-ln-card);
    background-color: var(--cl-wh);
    font-size: var(--fs-s);
    line-height: 1.7;
  }

  & strong { color: var(--cl-green-dk); }
  & span { color: var(--cl-txt-sub); }

  & ._core {
    grid-column: 1 / -1;
    border-color: var(--cl-gold);
    background-color: var(--cl-offwh);
  }
}

/* 品質管理の3領域 */
.p-quality {
  display: grid;
  gap: 1rem;
  counter-reset: quality;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  & li {
    display: grid;
    align-content: start;
    gap: 0.4rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid rgb(228 216 168 / 0.3);
    line-height: 1.6;
    counter-increment: quality;

    &::before {
      content: counter(quality, decimal-leading-zero);
      color: var(--cl-gold-lt);
      font-family: var(--ff-en);
      font-size: var(--fs-s);
    }
  }

  & strong { font-size: var(--fs-m); }

  & small {
    color: rgb(246 245 240 / 0.75);
    font-size: var(--fs-xs);
  }
}

/* チップ列 */
.p-chips {
  display: grid;
  gap: 1rem;
  max-inline-size: 72rem;

  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  & li {
    padding: 0.6rem 1.2rem;
    border: 1px solid rgb(228 216 168 / 0.35);
    font-size: var(--fs-s);
    line-height: 1.6;
  }
}

.p-chips-label {
  color: var(--cl-gold-lt);
  font-size: var(--fs-m);
  font-weight: 700;
}

.p-strength-item._lt .p-chips {
  & li {
    border-color: var(--cl-ln-tag);
    background-color: var(--cl-wh);
  }

  & .p-chips-label { color: var(--cl-gold-dk); }
}

/* 計画から品質管理まで
   ========================================================================== */
.p-process {
  padding-block: var(--sp-sec);
  background-color: var(--cl-bggr);
}

.p-process-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: 3.2rem;
  background-color: var(--cl-green-dk);

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  @media print, screen and (min-width: 1024px) {
    margin-block-start: 4.8rem;
  }

  & li {
    position: relative;
    display: grid;
    border: 1px solid rgb(228 216 168 / 0.15);
  }
}

.p-process-num {
  position: absolute;
  z-index: 1;
  inset-block-start: 1.2rem;
  inset-inline-start: 1.4rem;
  color: var(--cl-gold);
  font-family: var(--ff-en);
  font-size: 2.4rem;
  font-weight: 300;
  line-height: 1;
}

.p-process-img {
  display: block;
  background-color: var(--cl-green-dk);

  /* 線画は緑地で描かれているため、明度だけ使って紺地に馴染ませる */
  & img {
    inline-size: 100%;
    mix-blend-mode: luminosity;
  }
}

.p-process-name {
  padding: 1.4rem 1rem 1.8rem;
  border-block-start: 1px solid var(--cl-gold);
  color: var(--cl-wh);
  font-family: var(--ff-serif);
  font-size: var(--fs-m);
  font-weight: 600;
  text-align: center;
}

.p-process-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-block-start: 2.4rem;
  font-size: var(--fs-s);
  line-height: 1.8;

  & strong {
    padding: 0.6rem 1.2rem;
    background-color: var(--cl-green-dk);
    color: var(--cl-wh);
  }

  & span { flex: 1 1 32rem; }
}

/* GLOCAL
   ========================================================================== */
.p-glocal {
  padding-block: var(--sp-sec);

  & .u-inner {
    display: grid;
    gap: 4rem;
    align-items: center;

    @media print, screen and (min-width: 1024px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
      gap: 8rem;
    }
  }
}

.p-glocal-copy {
  display: grid;
  gap: 2.4rem;
}

.p-glocal-text {
  max-inline-size: 82rem;
  font-size: var(--fs-m);
  line-height: 1.9;
}

.p-glocal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;

  & .c-btn { min-inline-size: min(28rem, 100%); }
}

.p-glocal-map {
  position: relative;
  justify-self: center;
  inline-size: min(100%, 64rem);
  aspect-ratio: 757 / 560;

  & img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: top;
  }
}

/* 拠点数のバッジ（提案版の「拠点数5」を6拠点で再現） */
.p-glocal-badge {
  position: absolute;
  inset-block-end: 4%;
  inset-inline-start: 2%;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 0 1.2rem;
  padding: 1.6rem 2.4rem;
  border: 1px solid var(--cl-gold);
  background-color: rgb(255 255 255 / 0.9);
  color: var(--cl-green-dk);

  & b {
    grid-row: span 2;
    color: var(--cl-gold);
    font-family: var(--ff-num);
    font-size: 6.4rem;
    font-weight: 400;
    line-height: 1;
  }

  & span {
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
  }

  & small {
    color: var(--cl-txt-sub);
    font-size: var(--fs-xs);
  }
}

/* 関連情報
   ========================================================================== */
.p-next {
  padding-block-end: var(--sp-sec);
}

.p-next-grid {
  display: grid;
  gap: 1.6rem;

  @media print, screen and (min-width: 640px) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.4rem;
  }
}

.p-next-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.2rem;
  padding: 2.8rem 2.4rem;
  border: 1px solid var(--cl-ln-card);
  background-color: var(--cl-wh);
  transition: border-color var(--ease-t);

  & strong {
    color: var(--cl-key);
    font-family: var(--ff-serif);
    font-size: var(--fs-l);
    font-weight: 600;
    line-height: 1.6;
  }

  @media (any-hover: hover) {
    &:hover {
      border-color: var(--cl-green-dk);
      opacity: 1;
    }
  }
}

.p-next-label {
  color: var(--cl-gold);
  font-size: var(--fs-s);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.p-next-more {
  justify-self: start;
  padding-block-end: 0.6rem;
  border-block-end: 1px solid currentColor;
  color: var(--cl-blue);
  font-size: var(--fs-s);
  font-weight: 700;
}

/* 会社概要の沿革（表のセルの中の年表）
   ========================================================================== */
.p-history {
  display: grid;
  gap: 0.6rem;

  & li {
    display: grid;
    gap: 0 1.6rem;

    @media print, screen and (min-width: 640px) {
      grid-template-columns: 10rem minmax(0, 1fr);
    }
  }

  & span {
    color: var(--cl-green-dk);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
}

/* グループ会社（現行サイト /company/group/ と同じ並び：左に社名・URL・所在地・電話・説明、右にロゴ）
   ========================================================================== */
.p-groupCos {
  border-block-start: 1px solid var(--cl-ln);
}

.p-groupCo {
  display: grid;
  gap: 2.4rem;
  padding-block: 4rem;
  border-block-end: 1px solid var(--cl-ln);

  @media print, screen and (min-width: 1024px) {
    grid-template-columns: minmax(0, 1fr) 32rem;
    align-items: center;
    gap: 6.4rem;
    padding-block: 5.6rem;
  }
}

.p-groupCo-info {
  display: grid;
  gap: 1.2rem;
  font-size: var(--fs-m);
  line-height: 1.9;

  & a:not(.p-groupCo-name a) {
    color: var(--cl-blue);
    text-decoration: underline;
    overflow-wrap: anywhere;
  }
}

.p-groupCo-name {
  color: var(--cl-key);
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  font-weight: 600;
  line-height: 1.5;

  & a {
    transition: color var(--ease-t);

    &::after {
      content: "";
      display: inline-block;
      inline-size: 0.6em;
      block-size: 0.6em;
      margin-inline-start: 0.4em;
      background-color: currentColor;
      mask: url(/assets/images/common/ico_blank.svg) no-repeat center / contain;
      vertical-align: 0.1em;
    }
  }
}

@media (any-hover: hover) {
  .p-groupCo-name a:hover {
    color: var(--cl-blue);
    opacity: 1;
  }
}

.p-groupCo-url {
  font-size: var(--fs-s);
}

.p-groupCo-addr {
  font-style: normal;
}

.p-groupCo-text {
  margin-block-start: 0.4rem;
  color: var(--cl-txt-sub);
}

.p-groupCo-logo {
  display: grid;
  place-items: center;
  block-size: 14rem;
  padding: 2rem 2.4rem;
  border: 1px solid var(--cl-ln);
  background-color: var(--cl-wh);

  & a {
    display: block;
    inline-size: 100%;
  }

  /* ロゴの縦横比はまちまち（幅・高さの指定がないSVGもある）ので、枠に収まる大きさで中央に置く */
  & img {
    display: block;
    inline-size: 100%;
    block-size: 10rem;
    object-fit: contain;
  }
}