/* ========================================================================
   会社紹介（about-us）
   - フォント: Noto Sans JP（_head.php で全ページ読込）
   - 色: 青 #0c4da2 / シアン #30a1d2 / 本文 黒
   - 構成: ヒーロー → 波線 → 水色背景に白い角丸カード4枚
   ======================================================================== */
.p-about-us {
  --au-blue: #0c4da2;
  --au-cyan: #30a1d2;
  --au-pill: linear-gradient(90deg, #d3edf0 0%, #e8fcff 21%, #f0fcfc 50%, #c8efff 81%, #8ce6f2 100%);
  --au-bg: #c4e7fb;
  --au-content: 856px; /* 本文・画像列の幅 */
  --au-figgap: 86px;   /* 横並び画像の内側余白 */
  --au-col: calc((var(--au-content) - var(--au-figgap)) / 2); /* 画像/ラベル/列の幅 */
  font-size: 18px; /* 最小本文サイズ（基準） */
}

/* ========================
   ヒーロー
   ======================== */
.p-about-us-hero {
  display: flex;
  align-items: flex-end; /* 写真は底辺を inner と揃え、上方向に拡大 */
  justify-content: center;
  gap: 72px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 43px 40px 101px;
}
.p-about-us-hero-main {
  flex: 2 1 0; /* main(タイトル+本文) : visual = 2 : 3 */
  min-width: 0;
  transform: translateY(-60px); /* main（ロゴ・文章）を上へ */
}
.p-about-us-hero-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 20px;
}
.p-about-us-hero-title-en {
  display: block;
  width: 280px;
  max-width: 80%;
  height: auto;
}
.p-about-us-hero-title-jp {
  color: var(--au-cyan);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.p-about-us-hero-heading {
  margin: 0 0 16px;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}
.p-about-us-hero-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: #4a4a4a;
}
/* ヒーロー本文の改行（縦積み=900px以下では解除して自然折返し） */
.p-about-us-br {
  display: inline;
}
/* 本文の改行：765–900px 帯だけ改行（他は自然折返し） */
.p-about-us-br-tab {
  display: none;
}

/* 指定改行：指定幅以上で有効、未満は自然折返し（行数が増える手前で解除） */
.p-about-us-br-a,
.p-about-us-br-b,
.p-about-us-br-c,
.p-about-us-br-d,
.p-about-us-br-e,
.p-about-us-br-f,
.p-about-us-br-sp {
  display: none;
}
@media (min-width: 925px) { .p-about-us-br-a { display: inline; } } /* 水道:取水 */
@media (min-width: 700px) { .p-about-us-br-b { display: inline; } } /* 下水道lead1:「365日…」の前で改行 */
@media (min-width: 800px) { .p-about-us-br-c { display: inline; } } /* 下水道lead2:「都市そのもの…」の前で改行 */
@media (min-width: 745px) { .p-about-us-br-d { display: inline; } } /* 広域:「市内の現場…」の前で改行 */
@media (min-width: 810px) { .p-about-us-br-e { display: inline; } } /* 海外detail1:「KOWBAは…」の前で改行 */
@media (min-width: 835px) { .p-about-us-br-f { display: inline; } } /* 海外detail2:「世界の水…」の前で改行 */
@media (max-width: 600px) { .p-about-us-br-sp { display: inline; } } /* ヒーロー（スマホで強制改行） */
.p-about-us-hero-visual {
  position: relative; /* water-object の配置基準 */
  flex: 3 1 0; /* inner : visual = 2 : 3 */
  min-width: 0;
}
.p-about-us-hero-photo {
  display: block;
  width: 100%;
  height: auto;
}
/* water-object（写真の右下に重ねる・半透明） */
.p-about-us-hero-object {
  position: absolute;
  left: 70%;
  top: 90%;
  transform: translate(-50%, -50%);
  width: 48%;
  height: auto;
  opacity: 0.95;
  pointer-events: none;
}

/* ヒーロー下の波線（白→水色） */
.p-about-us-wave {
  width: 100%;
  height: clamp(72px, 8vw, 150px);
  background-image:
    url("../../images/common/footer-wave.webp"),
    linear-gradient(180deg, #ffffff 0%, #ffffff 44%, var(--au-bg) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: 100% 100%, 100% 100%;
}

/* ========================
   本文ボディ（水色背景に白カード）
   ======================== */
.p-about-us-body {
  background: linear-gradient(180deg, var(--au-bg) 0%, #d4eefb 55%, #eaf6fe 88%, #ffffff 100%);
  padding: 76px 20px 96px; /* 先頭カードのピル迫り出し分 + 下余白 */
}

/* 事業部カード */
.p-about-us-section {
  position: relative;
  max-width: 1072px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  padding: 60px 56px 56px;
  box-shadow: 0 8px 30px rgba(12, 77, 162, 0.06);
}
.p-about-us-section + .p-about-us-section {
  margin-top: 76px; /* カード間 + ピル迫り出し分 */
}

/* 事業部タイトル（グラデのピル・カード上端に跨る） */
.p-about-us-dept {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(512px, 86%);
  height: 64px;
  margin: 0;
  background: var(--au-pill);
  border: 3px solid #fff;
  border-radius: 12px;
  color: var(--au-blue);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* キャッチ（青・中央） */
.p-about-us-catch {
  max-width: var(--au-content);
  margin: 10px auto 19px;
  color: var(--au-blue);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  line-height: 1.5;
}

/* リード/本文（18px・左揃え・幅＝画像の外端に揃える） */
.p-about-us-lead {
  max-width: var(--au-content);
  margin: 0 auto 47px; /* 箱は中央 */
  font-size: 18px;
  line-height: 1.8;
  text-align: left; /* 文章自体は左揃え */
  color: #4a4a4a;
}
.p-about-us-lead:last-child {
  margin-bottom: 0;
}

/* 小見出しピル（枠線・角丸フル）— ページ内で共通サイズ */
.p-about-us-detail-label {
  display: block;
  width: 100%;
  max-width: var(--au-col);
  margin: 0 auto;
  padding: 12px 20px;
  border: 1.5px solid #a4d8ed;
  border-radius: 9999px;
  color: var(--au-blue);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}
.p-about-us-detail-label--center {
  margin: 0 auto 32px;
}

/* 小見出し下の本文（箱は列中央・文章は左揃え） */
.p-about-us-detail-text {
  margin: 0 0 32px;
  font-size: 18px;
  line-height: 1.8;
  text-align: left;
  color: #4a4a4a;
}

/* 直後に同種の段落が続く場合は下マージン0で連続表示（1行分の空きを消す） */
.p-about-us-lead:has(+ .p-about-us-lead),
.p-about-us-detail-text:has(+ .p-about-us-detail-text) {
  margin-bottom: 0;
}

/* 画像（角丸10px）。2枚並びは列いっぱい / 単独は356pxで中央 */
.p-about-us-figure {
  margin: 0;
}
.p-about-us-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 356 / 249;
  object-fit: cover;
  border-radius: 10px;
}
.p-about-us-figure--center {
  max-width: 356px;
  margin: 0 auto;
}

/* 2カラム（水道事業部）— 列を等高にして画像を底辺で揃える */
.p-about-us-cols {
  display: flex;
  gap: var(--au-figgap);
  align-items: stretch;
  justify-content: center;
  max-width: var(--au-content);
  margin: 10px auto 47px;
}
.p-about-us-cols .p-about-us-detail {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.p-about-us-cols .p-about-us-detail-label {
  /* ピルは列幅より padding+border 分だけ広いため、margin:auto では中央化できない。
     translateX で列＝画像の中央に対し左右対称にはみ出させて中央を一致させる。 */
  margin: 0 0 32px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.p-about-us-cols .p-about-us-figure {
  width: 100%;
  max-width: var(--au-col); /* 見出しと同じ幅 */
  margin: auto auto 0; /* 底辺揃え＋横中央 */
}

/* 横並び画像（下水道事業部の2枚） */
.p-about-us-imgrow {
  display: flex;
  gap: var(--au-figgap);
  align-items: flex-start;
  justify-content: center;
  max-width: var(--au-content);
  margin: 0 auto 47px;
}
.p-about-us-imgrow .p-about-us-figure {
  flex: 1 1 0;
}

/* 下水道：画像と本文（PCは画像2枚を上段に並べ、本文を下段にフル幅で） */
.p-about-us-waste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "img1 img2"
    "lead1 lead1"
    "lead2 lead2";
  align-items: start;
  column-gap: var(--au-figgap);
  row-gap: 47px;
  max-width: var(--au-content);
  margin: 0 auto;
}
.p-about-us-waste .p-about-us-figure {
  max-width: var(--au-col);
  margin: 0 auto;
}
.p-about-us-waste .p-about-us-figure:first-of-type { grid-area: img1; } /* waste-water-1 */
.p-about-us-waste .p-about-us-figure:last-of-type  { grid-area: img2; } /* waste-water-2 */
.p-about-us-waste .p-about-us-lead {
  margin: 0; /* 余白は grid の row-gap で */
}
.p-about-us-waste .p-about-us-lead:first-of-type { grid-area: lead1; } /* 1つ目の本文 */
.p-about-us-waste .p-about-us-lead:last-of-type  { grid-area: lead2; } /* 2つ目の本文 */

/* 中央寄せの詳細グループ（広域・海外） */
.p-about-us-detail--center {
  max-width: var(--au-content);
  margin: 0 auto 63px;
}
.p-about-us-detail--center:last-child {
  margin-bottom: 0;
}

/* ========================
   PC（901px以上）：水道2カラムの微調整
   ======================== */
@media (min-width: 901px) {
  /* 本文を、上の見出しピルと下の画像の縦軸中央へ
     （figure の margin-top:auto と合わせ、2つの auto で余白を上下均等配分）。 */
  .p-about-us-cols .p-about-us-detail-text {
    margin-top: auto;
  }
  /* ピル見出しを1行に固定。狭PC帯では外枠サイズを保ったまま文字を自動縮小して1行に収める。 */
  .p-about-us-cols .p-about-us-detail-label {
    white-space: nowrap;
    font-size: min(18px, calc((100vw - 256px) / 38));
  }
}

/* ========================
   レスポンシブ：タブレット〜スマホ
   ======================== */
@media (max-width: 900px) {
  .p-about-us-hero {
    flex-direction: column;
    align-items: center; /* flex-end をリセット */
    gap: 24px;
    padding: 48px 24px 56px;
    text-align: center;
  }
  .p-about-us-hero-inner {
    flex: 0 1 auto; /* 2:3 をリセット（縦積み） */
    max-width: 560px;
    width: 100%;
    transform: none; /* 60px上げをリセット */
    margin-top: 76px; /* visual↔inner の余白 */
  }
  .p-about-us-hero-visual {
    order: -1; /* スマホは画像を上（文章の前）に */
    flex: 0 1 auto; /* 2:3 をリセット（縦積み） */
    width: fit-content; /* 写真サイズに合わせ water-object を写真基準に */
    max-width: 100%;
    margin-inline: auto;
  }
  .p-about-us-hero-title {
    order: -2; /* タイトルを一番上に */
    align-items: flex-start; /* JPタイトルを about-us-title の左端に揃える */
    margin-bottom: 0;
  }
  /* main を解体して title / inner を hero 直下のフレックス子に（並び：title → 画像 → 本文） */
  .p-about-us-hero-main {
    display: contents;
  }
  .p-about-us-hero-heading,
  .p-about-us-hero-text {
    text-align: left; /* スマホでは本文pを左揃え */
  }
  .p-about-us-hero-photo {
    width: 528px; /* transformではなく実寸で拡大しシャープに保つ */
  }
  /* 縦積みでは本文の改行を解除（自然折返し） */
  .p-about-us-br {
    display: none;
  }

  /* 2カラム → 縦積み */
  .p-about-us-cols {
    flex-direction: column;
    gap: 32px;
    align-items: center;
  }
  .p-about-us-cols .p-about-us-detail {
    width: 100%; /* 縦積み時、本文の箱を他のリードと同じ全幅・左端に揃える */
  }
  .p-about-us-cols .p-about-us-figure {
    margin: 0 auto; /* 縦積みでは底辺揃え不要・横は中央維持 */
  }
  /* 縦積み時の画像は中庸サイズで中央に */
  .p-about-us-figure {
    max-width: 480px;
    margin-inline: auto;
  }
  /* 下水道：スマホは waste-water-1 → 本文1 → waste-water-2 → 本文2 の縦積み（DOM順／gridを解除） */
  .p-about-us-waste {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 31px;
  }
  .p-about-us-waste .p-about-us-figure {
    max-width: 385px;
    width: 100%;
  }
  .p-about-us-waste .p-about-us-lead {
    width: 100%;
  }
}

/* 765–900px：水道の本文を「…プロセスを／管理しています。」で改行（764px以下は自然折返し） */
@media (min-width: 765px) and (max-width: 900px) {
  .p-about-us-br-tab {
    display: inline;
  }
}

@media (max-width: 600px) {
  .p-about-us-body {
    padding: 64px 16px 72px;
  }
  .p-about-us-section {
    padding: 52px 22px 40px;
    border-radius: 16px;
  }
  .p-about-us-dept {
    height: 56px;
    font-size: 20px;
    top: -28px;
    width: min(420px, 90%);
  }
  .p-about-us-catch {
    font-size: 18px;
    text-align: left; /* 箱は中央のまま、折り返しは左揃えに */
  }
  /* 本文を両端1文字分（1em）内側へ（窓の両端に近すぎるのを緩和） */
  .p-about-us-lead,
  .p-about-us-detail-text {
    padding-inline: 1em;
    font-size: 15px;
  }
  /* ピル見出し（水道2カラム＋下水道/広域/海外の--center）：箱を中央に＋1行に自動フィット */
  .p-about-us-detail-label--center,
  .p-about-us-cols .p-about-us-detail-label {
    box-sizing: border-box; /* width:100%＋padding が右へはみ出すのを解消＝中央に収まる */
    white-space: nowrap;    /* 1行に固定 */
    /* 文字数(--label-chars)に応じ枠内に収まる最大サイズへ。18pxで頭打ち。 */
    font-size: min(18px, calc(340px / var(--label-chars, 22)), calc((100vw - 122px) / var(--label-chars, 22)));
  }
  /* 横並び画像 → 縦積み */
  .p-about-us-imgrow {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  /* ヒーローは 600px を基準に親ごと比例縮小（--u: 1px → 100vw/600）。
     写真・余白・文字をまとめて同率スケールし、≤600px で写真だけが縮むのを防ぐ。 */
  .p-about-us-hero {
    --u: calc(100vw / 600);
    gap: calc(24 * var(--u));
    padding: calc(48 * var(--u)) calc(24 * var(--u)) calc(56 * var(--u));
  }
  .p-about-us-hero-inner {
    margin-top: calc(76 * var(--u));
  }
  .p-about-us-hero-photo {
    width: calc(528 * var(--u));
  }
  .p-about-us-hero-title-en {
    width: calc(280 * var(--u));
  }
  .p-about-us-hero-title-jp {
    font-size: calc(24 * var(--u));
  }
  .p-about-us-hero-heading {
    font-size: calc(24 * var(--u));
  }
  .p-about-us-hero-text {
    font-size: calc(18 * var(--u));
  }
}

/* ========================
   ヒーロー：PC 狭め（901–1200px）— 親ごと比例縮小
   --u を 1px→100vw/1200 に切替え、文字・余白・ロゴ等を同率スケール。
   写真と water-object は flex / % で自動追従。
   ======================== */
@media (min-width: 901px) and (max-width: 1200px) {
  .p-about-us-hero {
    --u: calc(100vw / 1200);
    gap: calc(72 * var(--u));
    padding: calc(43 * var(--u)) calc(40 * var(--u)) calc(101 * var(--u));
  }
  .p-about-us-hero-main {
    transform: translateY(calc(-60 * var(--u)));
  }
  .p-about-us-hero-title {
    gap: calc(6 * var(--u));
    margin-bottom: calc(20 * var(--u));
  }
  .p-about-us-hero-title-en {
    width: calc(280 * var(--u));
  }
  .p-about-us-hero-title-jp {
    font-size: calc(24 * var(--u));
  }
  .p-about-us-hero-heading {
    margin-bottom: calc(16 * var(--u));
    font-size: calc(24 * var(--u));
  }
  .p-about-us-hero-text {
    font-size: calc(18 * var(--u));
  }
}