/* ==========================================================================
   事業所案内 /about/
   出典: docs/design-spec/04_about.md（Zeplin 実測 1920×3751 / 375×3767）
         docs/design-spec/99_buttons.md B4（CTAボタン）

   画像は images/about/ にコピー済み。コピー元は page-about.php の冒頭 docblock を参照。
   波形 SVG（wave-band / wave-white / wave-cream）は
   design/screens の実測プロファイルから生成したもの。理由は
   docs/design-spec/REQUESTS_about.md「波形ディバイダ」を参照。

   座標の読み方: PC は 1920 アートボード基準（x380 = コンテンツ左端）。
   縦位置は「グリフ上端」で採寸されているため、CSS では
   box_top = glyph_top − (line-height − font-size) / 2 に読み替えている。
   ========================================================================== */

/* --------------------------------------------------------------------
   波形ディバイダ（共通処理）
   波そのものは components.css の [data-wave="up"] が描く（画像なし・マスク）。
   このページは「セクションの内側上端に、**ひとつ前のセクションの色**で
   曲線より上を塗る」作り。地色はセクションのボックス全体に敷く。
   -------------------------------------------------------------------- */
/* 🚨 2026-09-16 改訂で「代表あいさつ」が会社概要ページへ抜け、
      事業所概要がページヘッダーの直下に来た。ひとつ前の色も変わる。 */
.p-about__profile  { --wave-fill: var(--c-page-band); }  /* 前 = ページヘッダーの緑帯 */
.p-about__access   { --wave-fill: var(--c-cream); }      /* 前 = 事業所概要（クリーム） */

/* セクション見出し（事業所概要 / アクセス 共通） */
.p-about__heading {
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
  text-align: center;
}

/* --------------------------------------------------------------------
   セクション2 事業所概要（仕様書 §4）— 背景 #FBF7E9
   ページヘッダー帯（高さ380px）の下端 y500 から波形起点 y409 まで
   引き上げ、帯の緑を波形で描き戻す。
   -------------------------------------------------------------------- */
.p-about__profile {
  position: relative;
  margin-top: -91px;      /* 帯下端 500 → 波形起点 409 */
  padding-top: 159px;     /* 波形起点 409 → 見出し 568 */
  padding-bottom: 122px;  /* 写真下端 1651 → 次の波形起点 1773 */
  background: var(--c-cream);
}

/* 事業所概要の定義リスト。罫線なし・行の交互塗り分け。 */
.p-about__dl {
  margin-top: 59px;       /* 見出し下端 608 → 1行目上端 667 */
}
.p-about__dl-row {
  display: flex;
  align-items: center;
  height: 66px;           /* PC は全行 66px 固定 */
  padding-inline: 24px;   /* 行左端 380 → dt 404 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
  color: var(--c-text);
}
.p-about__dl-row:nth-child(odd)  { background: var(--c-white); }
.p-about__dl-row:nth-child(even) { background: var(--c-cream); }

.p-about__dl-term {
  flex: none;
  width: 210px;           /* dt 404 → dd 614 */
}
.p-about__dl-desc { flex: 1 1 auto; min-width: 0; margin: 0; }
/* 「定休日」の ※注記だけ PC で 16px */
.p-about__dl-note { font-size: 16px; }

/* 行の中身が折り返す幅では高さを可変にしてはみ出しを防ぐ */
@media (min-width: 1080px) and (max-width: 1259px) {
  .p-about__dl-row { height: auto; min-height: 66px; padding-block: 13px; }
}

/* 施設写真 3枚 */
.p-about__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-top: 80px;       /* dl 下端 1261 → 写真上端 1341 */
}
.p-about__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 370 / 310;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* --------------------------------------------------------------------
   セクション3 アクセス（仕様書 §5）— 背景 #FFFFFF
   🚨 #access はヘッダー/フッター/トップの「アクセス」の着地点。
      固定ヘッダー（PC 120px / SP 60px）に隠れないよう scroll-margin-top を明示する。
      base.css の :target 既定より確実に効かせるため id + class で指定している。
   -------------------------------------------------------------------- */
.p-about__access {
  position: relative;
  padding-top: 160px;     /* 波形起点 1773 → 見出し 1933 */
  padding-bottom: 120px;  /* マップ下端 2843 → CTA帯 2963 */
  background: var(--c-white);
}
#access.p-about__access { scroll-margin-top: var(--header-h); }

.p-about__office {
  margin-top: 49px;       /* 見出し下端 1973 → 事業所名 2022 */
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-align: center;
}
.p-about__office-sm { font-size: 20px; }
.p-about__office-lg { font-size: 26px; }
/* PC は半角スペース区切りの1行、SP は2行（仕様書 §5-1） */
.p-about__office-sep { white-space: pre; }

.p-about__address {
  margin-top: 15px;       /* 事業所名下端 2058 → 住所 2073 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.4;
  text-align: center;
}

/* 交通手段。ブロック左端は x681 固定（最も長い行の幅 558px を中央寄せ） */
.p-about__ways {
  display: flex;
  flex-direction: column;
  gap: 35px;              /* 車ブロック 2146 → バスブロック 2256 */
  width: 558px;
  max-width: 100%;
  margin: 45px auto 0;    /* 住所下端 2101 → 車ブロック 2146 */
}
.p-about__way {
  display: flex;
  align-items: flex-start;
  gap: 24px;              /* 円右端 751 → テキスト 775 */
}
.p-about__way-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--c-green);
}
.p-about__way-icon img { display: block; }
/* base.css の `img { height: auto }` に原寸(@3x)で表示されないよう実寸を指定する */
.p-about__way:nth-child(1) .p-about__way-icon img { width: 47px; height: 40px; }
.p-about__way:nth-child(2) .p-about__way-icon img { width: 40px; height: 47px; }
.p-about__way-body { min-width: 0; }
.p-about__way-label {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 24px;
}
.p-about__way-text {
  margin-top: 4px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 24px;
}
.p-about__way-note { font-size: 16px; }

/* Googleマップ（デザインの map.png を iframe に置き換え。仕様書 §5-4） */
.p-about__map {
  margin-top: 69px;       /* バス本文下端 2306 → マップ上端 2375 */
  aspect-ratio: 1160 / 468;
  overflow: hidden;
  border-radius: var(--radius-l);
  background: var(--c-border);   /* 読み込み前の下地（長方形 69 の fill） */
}
.p-about__map-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --------------------------------------------------------------------
   セクション4 CTA 施設見学・体験（仕様書 §6 / ボタン B4）— 背景 #FCD68C
   -------------------------------------------------------------------- */
.p-about__cta {
  padding-bottom: 90px;   /* ボタン下端 3381 → 帯下端 3471 */
  background: var(--c-orange-light);
}
.p-about__cta-inner {
  position: relative;
  display: flex;          /* flex にしてマージン相殺を止める */
  flex-direction: column;
}

/* PC は見出しの右横（x1098, y3041）。SP は見出しの上に中央配置。 */
.p-about__cta-staff {
  position: absolute;
  top: 78px;
  left: 718px;            /* 1098 − 380 */
  width: 271px;
  height: 196px;
}

/* 見出し・本文はスタッフ画像とのバランスで中心が x845 に寄っている */
.p-about__cta-heading,
.p-about__cta-text { margin-right: 230px; text-align: center; }

.p-about__cta-heading {
  margin-top: 80px;       /* 帯上端 2963 → 見出し 3043 */
  font-size: 40px;
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--c-text);
}
.p-about__cta-text {
  margin-top: 44px;       /* 見出し下端 3083 → 本文 3127 */
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 40px;
}

.p-about__cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 560px;
  max-width: 100%;
  height: 90px;
  margin: 44px auto 0;    /* 本文下端 3247 → ボタン 3291 */
  padding-left: 90px;     /* イラストぶん。ラベル中心を x1005 に寄せる */
  border: 2px solid var(--c-orange);
  border-radius: var(--radius-l);
  background: var(--c-white);
  color: var(--c-text);
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
/* hover: 白地＋橙枠 → 橙ベタ＋白文字（2026-09-16 市川様のご指定 / #F7B52C） */
.p-about__cta-btn:hover {
  border-color: var(--c-cta-hover);
  background: var(--c-cta-hover);
  color: var(--c-white);
}

/* イラストはボタン枠の上へはみ出す（枠上端より 14px 上） */
.p-about__cta-illust {
  position: absolute;
  left: 23px;
  bottom: 0;
  width: 71px;
  height: 104px;
}
.p-about__cta-btn-label {
  font-weight: var(--fw-bold);
  line-height: 1;
  text-align: center;
}
.p-about__cta-btn-lg { font-size: 30px; }
.p-about__cta-btn-sm { font-size: 20px; }

/* PC では改行しない（SP のみ2行） */
.p-about__br-sp { display: none; }

/* ==========================================================================
   SP（デザイン 375×3767）
   ========================================================================== */
@media (max-width: 1079px) {

  /* 波の深さ（30px）と地色の起点は components.css の --wave-h が面倒を見る。 */

  .p-about__heading { font-size: 26px; }

  /* --- 事業所概要 --- */
  .p-about__profile {
    margin-top: -144px;   /* 帯下端 440 → 波形起点 296 */
    padding-top: 77px;    /* 波形起点 296 → 見出し 373 */
    padding-bottom: 40px; /* 写真下端 2004 → 次の波形起点 2044 */
  }

  .p-about__dl { margin-top: 40px; }
  .p-about__dl-row {
    align-items: flex-start;
    height: auto;
    min-height: 52px;     /* 1行 = 14 + 24 + 14 */
    padding: 14px 20px;
    font-size: 16px;
    line-height: 24px;
  }
  .p-about__dl-term { width: 110px; }  /* dt 43 → dd 153 */
  /* SP では ※注記も 16px（PC のような縮小差分なし） */
  .p-about__dl-note { font-size: inherit; }

  /* 🚨 レスポンシブでは PC 表示時より画像を大きくしない（2026-09-16 市川様の方針）。
     1fr のままだと 1079px 幅で 1 枚 1033px まで伸び、PC の 370px を大きく超える。 */
  .p-about__photos {
    grid-template-columns: minmax(0, 370px);   /* 370 = PC の実寸 */
    justify-content: center;
    gap: 30px;
    margin-top: 40px;
  }
  .p-about__photo img { aspect-ratio: 330 / 276; }

  /* --- アクセス --- */
  .p-about__access {
    padding-top: 79px;    /* 波形起点 2044 → 見出し 2123 */
    padding-bottom: 73px; /* マップ下端 2876 → CTA帯 2949 */
  }
  #access.p-about__access { scroll-margin-top: var(--header-h-sp); }

  .p-about__office { margin-top: 27px; line-height: 26px; }
  .p-about__office-sm { font-size: 16px; }
  .p-about__office-lg { font-size: 22px; }
  /* 事業所名は2行に分ける（仕様書 §5-1） */
  .p-about__office-sep { display: block; font-size: 0; line-height: 0; }

  .p-about__address { margin-top: 11px; font-size: 16px; line-height: 24px; }

  .p-about__ways {
    width: auto;
    gap: 30px;
    margin: 25px 0 0;
  }
  .p-about__way { gap: 15px; }
  .p-about__way-icon { width: 49px; height: 49px; margin-top: 0; }
  .p-about__way-text { font-size: 20px; }

  .p-about__map {
    margin-top: 39px;
    aspect-ratio: 1 / 1;
  }

  /* --- CTA --- */
  .p-about__cta { padding-bottom: 39px; }
  .p-about__cta-staff {
    position: static;
    width: 271px;
    max-width: 100%;
    height: auto;
    margin: -13px auto 0;  /* 帯上端より 13px 上にはみ出す */
  }
  .p-about__cta-heading,
  .p-about__cta-text { margin-right: 0; }

  .p-about__cta-heading { margin-top: 30px; font-size: 26px; }
  .p-about__cta-text { margin-top: 21px; font-size: 16px; line-height: 24px; }

  /* 🚨 /work/ /flow/ の CTA と同じ寸法にそろえる。
     ここだけ padding-left が 122px で、文字が右にずれていた（2026-09-16 市川様のご指摘）。
     幅も 330px 固定だと 1079px まで伸びる SP レイアウトで他ページと食い違うので
     「PC の 560px を上限に伸びる」形に合わせる。 */
  .p-about__cta-btn {
    width: 100%;
    max-width: 560px;
    height: 80px;
    margin-top: 53px;
    padding-left: 87px;   /* SP のイラストは x=23..87 */
  }
  .p-about__cta-illust { width: 64px; height: 94px; }
  .p-about__cta-btn-label { line-height: 1.2; }
  .p-about__cta-btn-lg { font-size: 26px; }
  .p-about__cta-btn-sm { font-size: 16px; }

  .p-about__br-sp { display: inline; }
}

/* SP 版のアイコン実寸（仕様書 §5-5） */
@media (max-width: 1079px) {
  .p-about__way:nth-child(1) .p-about__way-icon img { width: 33px; height: 28px; }
  .p-about__way:nth-child(2) .p-about__way-icon img { width: 28px; height: 33px; }
}