@charset "UTF-8";
/* =========================================================
   会社概要（PC版）
   1rem = デザイン上の10px（XD 1440px幅基準）。共通パーツは style.css
   ========================================================= */

/* ---------- KV・導入 ---------- */
.co-hero { height: 87rem; }
.co-hero__img { position: absolute; left: 0; top: 7.7rem; width: 144rem; height: 36rem; overflow: hidden; }
.co-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.co-hero__ttl { position: absolute; left: 0; top: 23.92rem; width: 144rem; text-align: center; font-size: 3.4rem; line-height: 3.4rem; font-weight: 700; }
.co-hero__txt { position: absolute; left: 0; width: 144rem; text-align: center; font-size: 2.4rem; line-height: 3.5rem; font-weight: 400; }
.co-hero__txt--1 { top: 48.5rem; }
.co-hero__txt--2 { top: 57.2rem; }
.co-hero__band { position: absolute; left: 18.5rem; top: 70.6rem; width: 107rem; height: 6.5rem; }
.co-hero__band img { width: 100%; height: 100%; }

/* ---------- なぜ、中小企業なのか ---------- */
.co-why { height: 47.9rem; background: #f6f4ed; overflow: hidden; }
/* 上辺は中央がへこんだカーブ（白の楕円を重ねる） */
.co-why::before { content: ""; position: absolute; left: -14.4rem; top: -10.8rem; width: 172.8rem; height: 14rem; border-radius: 50%; background: var(--white); }
.co-why__ttl, .co-why__txt { position: absolute; left: 1.1rem; width: 144rem; text-align: center; white-space: nowrap; }
.co-why__ttl { top: 10.2rem; font-size: 4rem; line-height: 5.6rem; font-weight: 700; }
.co-why__txt { font-size: 2.4rem; line-height: 3.5rem; font-weight: 500; }
.co-why__txt--1 { top: 18.4rem; }
.co-why__txt--2 { top: 27.1rem; }
.co-people { position: absolute; left: 25.4rem; top: 33.4rem; width: 93.2rem; height: 14.5rem; display: flex; }
.co-people i { flex: 1; height: calc(100% + .4rem); background: url(../img/company/people.webp) no-repeat 0 0 / 93.2rem 14.5rem; }
.co-people i:nth-child(1) { background-position: 0 0; }
.co-people i:nth-child(2) { background-position: -9.32rem 0; }
.co-people i:nth-child(3) { background-position: -18.64rem 0; }
.co-people i:nth-child(4) { background-position: -27.96rem 0; }
.co-people i:nth-child(5) { background-position: -37.28rem 0; }
.co-people i:nth-child(6) { background-position: -46.6rem 0; }
.co-people i:nth-child(7) { background-position: -55.92rem 0; }
.co-people i:nth-child(8) { background-position: -65.24rem 0; }
.co-people i:nth-child(9) { background-position: -74.56rem 0; }
.co-people i:nth-child(10) { background-position: -83.88rem 0; }

/* ---------- 大事にしていること ---------- */
.co-value { height: 46.3rem; overflow: hidden; }
.co-value__bg { position: absolute; left: 0; top: -3rem; width: 144rem; height: 52.3rem; }
.co-value__bg img { width: 100%; height: 100%; object-fit: cover; }
.co-value__box {
  position: absolute; left: 17.5rem; top: 10rem; width: 109rem; height: 26.3rem;
  border-radius: 2.5rem; background: rgba(255, 255, 255, .19);
  -webkit-backdrop-filter: blur(4px) brightness(1.01); backdrop-filter: blur(4px) brightness(1.01);
  text-align: center;
}
.co-value__ttl {
  position: absolute; left: 30.1rem; top: 5rem; width: 48.8rem; height: 5.8rem;
  background: var(--ink); color: #f6f4ed; font-size: 4rem; line-height: 5.8rem; font-weight: 700; white-space: nowrap;
}
.co-value__txt { position: absolute; left: 0; right: 0; top: 14.2rem; font-size: 3rem; line-height: 3.5rem; font-weight: 700; white-space: nowrap; }

/* ---------- 会社概要 ---------- */
.co-info { height: 112.4rem; }
.co-info__ttl { position: absolute; left: 17.5rem; top: 15.1rem; font-size: 4rem; line-height: 5.6rem; font-weight: 700; white-space: nowrap; }
.co-table { position: absolute; left: 17.5rem; top: 20.9rem; width: 110.9rem; }
.co-table__row { position: relative; display: flex; align-items: center; height: 7.9rem; font-size: 2.4rem; line-height: 3.5rem; font-weight: 500; }
.co-table__row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #e1d4d4; transform-origin: 0 50%; transform: scaleX(var(--ln, 1)); }
.co-table__row--tall { height: 13.1rem; }
.co-table__row:nth-child(n + 7) { height: 7.7rem; }
.co-table dt { flex: none; width: 24rem; }
.co-table dd { flex: 1; }
.co-table small { margin-left: .4rem; font-size: 2rem; font-weight: 400; }
.co-table a { text-decoration: none; }
.co-table .nw { display: inline-block; }

/* ---------- 代表メッセージ ---------- */
.co-msg { height: 106.3rem; overflow: hidden; }
.co-msg__bg { position: absolute; left: 0; top: -3rem; width: 144rem; height: 112.3rem; opacity: .64; }
.co-msg__bg img { width: 100%; height: 100%; object-fit: cover; }
.co-msg__ttl { position: absolute; left: 17.5rem; top: 10rem; width: 29.8rem; height: 5.8rem; font-size: 4rem; line-height: 5.8rem; font-weight: 700; text-align: center; white-space: nowrap; }
.co-msg__ttl::before { content: ""; position: absolute; inset: 0; border: .3rem solid var(--ink); }
.co-msg__ttl span { position: relative; }
.co-msg__body { position: absolute; left: 17.5rem; top: 18.8rem; font-size: 2.4rem; line-height: 3.5rem; font-weight: 500; white-space: nowrap; }
.co-msg__body p + p { margin-top: 3.5rem; }
.co-msg__sign { position: absolute; right: 15.6rem; top: 89.5rem; font-size: 2.4rem; line-height: 3.5rem; font-weight: 500; text-align: right; white-space: nowrap; }

/* ---------- CTA ---------- */
.co-cta { height: 36.4rem; }
.co-cta .cta { left: 47rem; top: 15rem; }

/* =========================================================
   会社概要（スマホ版・767px以下）
   PC版をもとに望月チームで組んだレイアウト（375px幅基準）
   ========================================================= */
@media (max-width: 767px) {
  .co-hero, .co-why, .co-value, .co-info, .co-msg, .co-cta { height: auto; }
  /* ---- KV・導入 ---- */
  .co-hero { padding: 21.6rem 2rem 5rem; }
  .co-hero__img { top: 6rem; width: 37.5rem; height: 12rem; }
  .co-hero__img img { object-position: 18% 50%; }
  .co-hero__ttl { top: 10.4rem; width: 37.5rem; font-size: 2.2rem; line-height: 2.2rem; }
  .co-hero__txt { position: relative; top: auto; width: auto; font-size: 1.35rem; line-height: 2.4rem; }
  .co-hero__txt--2 { margin-top: 1.4rem; }
  .co-hero__band { position: relative; left: auto; top: auto; width: 33.5rem; height: 2.04rem; margin: 3.2rem auto 0; }

  /* ---- なぜ、中小企業なのか ---- */
  .co-why { padding: 6rem 2rem 0; }
  .co-why::before { left: -5rem; top: -4.2rem; width: 47.5rem; height: 6rem; }
  .co-why__ttl, .co-why__txt { position: relative; left: auto; top: auto; width: auto; white-space: normal; }
  .co-why__ttl { font-size: 1.9rem; line-height: 2.8rem; }
  .co-why__txt { margin-top: 1.4rem; font-size: 1.35rem; line-height: 2.4rem; text-align: left; }
  .co-why__txt .line { display: inline; overflow: visible; }
  .co-why__txt .line > span { display: inline; }
  .co-people { position: relative; left: auto; top: auto; width: 35.5rem; height: auto; margin: 2.4rem -1rem 0; flex-wrap: wrap; }
  /* スマホは5人×2段（後列の前に前列が少し重なる集合写真風） */
  .co-people i { flex: none; width: 7.1rem; height: 11.05rem; background-size: 71rem 11.05rem; }
  .co-people i:nth-child(n + 6) { margin-top: -3.4rem; }
  .co-people i:nth-child(1) { background-position: 0 0; }
  .co-people i:nth-child(2) { background-position: -7.1rem 0; }
  .co-people i:nth-child(3) { background-position: -14.2rem 0; }
  .co-people i:nth-child(4) { background-position: -21.3rem 0; }
  .co-people i:nth-child(5) { background-position: -28.4rem 0; }
  .co-people i:nth-child(6) { background-position: -35.5rem 0; }
  .co-people i:nth-child(7) { background-position: -42.6rem 0; }
  .co-people i:nth-child(8) { background-position: -49.7rem 0; }
  .co-people i:nth-child(9) { background-position: -56.8rem 0; }
  .co-people i:nth-child(10) { background-position: -63.9rem 0; }

  /* ---- 大事にしていること ---- */
  .co-value { padding: 5rem 2rem; }
  .co-value__bg { top: -2rem; width: 37.5rem; height: calc(100% + 4rem); }
  .co-value__bg img { object-position: 60% 50%; }
  .co-value__box { position: relative; left: auto; top: auto; width: auto; height: auto; padding: 2.4rem 1.6rem 2.8rem; border-radius: 1.6rem; }
  .co-value__ttl { position: relative; left: auto; top: auto; width: fit-content; height: auto; margin: 0 auto; padding: 0 1rem; font-size: 1.9rem; line-height: 3.2rem; }
  .co-value__txt { position: relative; top: auto; margin-top: 1.6rem; font-size: 1.5rem; line-height: 2.5rem; white-space: normal; }

  /* ---- 会社概要 ---- */
  .co-info { padding: 5.6rem 2rem 5rem; }
  .co-info__ttl { position: relative; left: auto; top: auto; font-size: 1.9rem; line-height: 2.8rem; }
  .co-table { position: relative; left: auto; top: auto; width: auto; margin-top: 1.6rem; }
  .co-table__row, .co-table__row--tall, .co-table__row:nth-child(n + 7) { display: block; height: auto; padding: 1.2rem 0; font-size: 1.35rem; line-height: 2.2rem; }
  .co-table dt { width: auto; font-size: 1.2rem; font-weight: 700; color: #7a716a; }
  .co-table dd { margin-top: .2rem; }
  .co-table small { display: block; margin: .2rem 0 0; font-size: 1.1rem; }

  /* ---- 代表メッセージ ---- */
  /* PCと同じく、人物は右下に小さく。上は画像の空と同じ色で埋め、画像の上端は溶かす（2026-09-27 画像差し替え） */
  .co-msg { padding: 5rem 2rem 8rem; }
  .co-msg__bg { top: 0; bottom: 0; width: 37.5rem; height: auto; background: rgb(166, 205, 228); }
  .co-msg__bg img { position: absolute; left: -18.5rem; bottom: -1.6rem; width: 62rem; height: auto; object-fit: fill;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%); mask-image: linear-gradient(to bottom, transparent 0, #000 22%); }
  .co-msg__ttl { position: relative; left: auto; top: auto; width: 17rem; height: 4.2rem; font-size: 2.1rem; line-height: 4.2rem; }
  .co-msg__ttl::before { border-width: .2rem; }
  .co-msg__body { position: relative; left: auto; top: auto; margin-top: 2.4rem; font-size: 1.35rem; line-height: 2.4rem; white-space: normal; }
  .co-msg__body br.pc { display: none; }
  .co-msg__body p + p { margin-top: 1.6rem; }
  .co-msg__sign { position: relative; right: auto; top: auto; margin-top: 6rem; /* 人物と木が、本文と署名のあいだに来るように */ font-size: 1.35rem; line-height: 2.2rem; }

  /* ---- CTA ---- */
  .co-cta { padding: 5rem 0; }
  .co-cta .cta { left: auto; top: auto; }
}

/* 本文は細字で統一 2026-09-28 */
.co-why__txt, .co-msg__body, .co-msg__sign, .co-table__row { font-weight: 400; }
/* 提案A：「会社概要」の右に袋文字（下の位置を見出しの文字にそろえる） */
.co-info::before { content: "COMPANY"; position: absolute; right: 15.6rem; top: 6.3rem; /* 下端を「会社概要」の下にそろえる */ font-family: "Barlow", sans-serif; font-weight: 600; font-size: 15rem; line-height: 1; white-space: nowrap; letter-spacing: .04em; color: transparent; -webkit-text-stroke: .25rem #e0d2b8; pointer-events: none; }
@media (max-width: 767px) { .co-info::before { right: auto; left: 2rem; top: 3.2rem; font-size: 6.4rem; -webkit-text-stroke-width: .12rem; } .co-info__ttl { position: relative; z-index: 1; margin-top: 1.3rem; } } /* 英字と見出しは左下をそろえて重ねる */