/* =============================================
   About（バスターを知る）
   ============================================= */

/* MVスライダー：角丸なし・フル幅ブレイクアウト */
.c-page-hero .c-submv--slider {
  border-radius: 0;
  width: 100vw;
  margin-inline-start: calc(50% - 50vw);
}

/* Mission下のc-page-contentデフォルト下余白を削除して Philosophy と隙間なく繋げる */
.p-about .c-page-content {
  margin-block-end: 0;
}

/* =============================================
   Mission セクション
   ============================================= */
.p-about__mission {
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: flex-start;
  /* ページ先頭の開始間隔（上側）は共通CSS（customize.css の .p-page-bg padding-block-start /
     --page-content-gap）で一元管理。下側（Philosophyへの繋ぎ）はページ内部の指定として維持。 */
  padding-block-end: clamp(4rem, 6vw, 6rem);
}

/* 左：見出しラッパー（PC sticky） */
.p-about__mission-left {
  flex: 0 0 40%;
  max-width: 40%;
  /* 旧 padding-block-start:0.5rem は「ページ先頭の開始間隔」の重複指定だったため撤去。
     右カラム(.p-about__mission-heading)と同じ170px/60px基準に統合。 */
}

/* 右：代表メッセージ */
.p-about__mission-right {
  flex: 1;
  min-width: 0;
}

.p-about__mission-heading {
  font-size: 2rem;
  font-weight: 700;
  color: var(--font-color-03);
  line-height: 1.6;
  margin-block: 0 2.5rem;
}

.p-about__mission-body {
  font-size: 1rem;
  color: var(--font-color-03);
  line-height: 2;
  margin-block-end: 2.5rem;
}

.p-about__mission-body p + p {
  margin-block-start: 1.25rem;
}

/* 署名（右寄せ・横並び） */
.p-about__mission-sign {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 1rem;
}

.p-about__mission-sign-role {
  font-size: 1.125rem;
  font-weight: 500;
}

.p-about__mission-sign-name {
  font-size: 1.5rem;
  font-weight: 700;
}

/* =============================================
   ズームBG・オーバーレイ（Philosophy内で使用）
   ============================================= */
.p-about__zoom-bg {
  position: absolute;
  inset: -8%;
  z-index: 0;
  will-change: transform;
}

.p-about__zoom-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* blur はスクロール進行度に応じて customize.js(initAboutZoom) が
     インラインstyleで0px〜6px(旧固定値)を制御する。初期状態(進行度0)は0px。 */
}

/* オーバーレイ背景は「進行度1(終了時)」の見た目として維持し、
   opacity（0〜1）をスクロール進行度に連動させる（customize.js の
   initAboutZoom が背景画像のblur/scaleと同じ progress で
   インラインstyle指定。進行度0＝完全非表示、進行度1＝下記背景そのまま）。 */
.p-about__zoom-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: rgba(255, 255, 255, 0.9);
}

/* =============================================
   Philosophy セクション
   ============================================= */
.p-about-philosophy {
  position: relative;
  overflow: hidden;
  /* p-page-bg と隙間なく接続 */
  margin-block-start: 0;
  padding-block: clamp(5rem, 8vw, 9rem);
  text-align: center;
}

/* 下部フェード用の ::after は削除：画像下半分だけに残るぼかし/フェードの
   原因だったため撤去（.p-about__zoom-overlay の対称な白オーバーレイのみ残す）。 */

.p-about-philosophy__inner {
  position: relative;
  z-index: 4;
}

.p-about-philosophy .c-ttl {
  margin-block-end: 3rem;
}

.p-about-philosophy__text {
  font-size: 2rem;
  font-weight: 700;
  color: var(--font-color-03);
  line-height: 2;
  margin-block: 0;
}

/* =============================================
   Office セクション（白背景）
   ============================================= */
.p-about-office {
  padding-block: clamp(4rem, 7vw, 8rem);
  background: #fff;
}

/* 見出し：左=Officeセット（1カラム幅）、右=説明文 */
.p-about-office__head {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  margin-block-end: 3rem;
}

/* 1カラム幅に固定して説明文の左端を2列目に揃える */
.p-about-office__head-ttl {
  flex: 0 0 calc((100% - 3rem) / 3);
}

/* "Office  事業所案内" 横並び */
.p-about-office__ttl-row {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-block-end: 0.75rem;
}

.p-about-office__ttl-en {
  font-family: 'Quicksand', sans-serif;
  font-size: 4.625rem; /* 74px */
  font-weight: 700;
  color: var(--font-color);
  line-height: 1;
}

.p-about-office__ttl-ja {
  font-size: 1rem; /* 16px */
  color: var(--font-color);
}

.p-about-office__head .c-ttl__dots {
  /* 丸間隔は共通 .c-ttl__dots(0.7rem) を継承。ここは位置のみ */
  display: flex;
  margin-block: 0;
}

/* 右側説明文 */
.p-about-office__lead {
  flex: 1;
  font-size: 1rem;
  color: var(--font-color-03);
  line-height: 1.9;
  margin: 0;
  padding-block-start: 0.5rem;
}

/* カードグリッド：PC 3カラム */
.p-about-office__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* カード：背景なし */
.p-about-office__card {
  background: transparent;
}

/* Googleマップ（正方形・角丸10px） */
.p-about-office__map {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
}

.p-about-office__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* 事業所名（上下30px・下ボーダー・navy） */
.p-about-office__name-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 5rem; /* cat有無にかかわらず下ボーダー位置を揃える */
  padding-block: 0.75rem; /* 25px */
  border-bottom: 1px solid var(--font-color);
}

.p-about-office__cat {
  font-size: 1.125rem; /* 18px ／ 変更なし */
  color: var(--font-color);
  margin-block: 0 0.2rem;
}


.p-about-office__name {
  font-size: 1.375rem; /* 22px（cat有無問わず） */
  font-weight: 700;
  color: var(--font-color);
  margin: 0;
  line-height: 1.4;
}

/* 住所・連絡先（名前下25px） */
.p-about-office__detail {
  margin-block-start: 1.5625rem; /* 25px */
}

.p-about-office__addr,
.p-about-office__tel,
.p-about-office__hours {
  font-size: 0.75rem; /* 折り返し抑止のため縮小 */
  color: var(--font-color-03);
  line-height: 1.7;
  margin-block: 0 0.3rem;
}

/* 送迎エリアボックス（住所下25px） */
.p-about-office__area-box {
  margin-block-start: 1.5625rem; /* 25px */
  background: rgba(130, 190, 223, 0.2);
  border-radius: 5px;
  padding: 0.625rem 0.875rem;
  min-height: 4.5rem; /* 行数差による高さずれを吸収 */
}

.p-about-office__area-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--font-color); /* navy */
  margin-block: 0 0.2rem;
}

.p-about-office__area-cities {
  font-size: 0.8125rem;
  color: var(--font-color-03);
  margin: 0;
  line-height: 1.6;
}

/* =============================================
   Outline セクション（薄いグレー背景）
   ============================================= */
.p-about-outline {
  padding-block: clamp(4rem, 7vw, 8rem);
  background: #F9F9F9;
}

/* Outline内のb-innerを1100px幅に（widthはb-inner既定値94%/90%を維持） */
.p-about-outline .b-inner {
  max-width: 1100px;
}

.p-about-outline__head {
  margin-block-end: 3rem;
}

.p-about-outline__img {
  margin-block-end: 3rem;
  border-radius: 10px;
  overflow: hidden;
}

.p-about-outline__img img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 480px;
  object-fit: cover;
}

/* 会社情報：左ボーダー付き見出し */
.p-about-outline__subtitle {
  font-size: 1.6875rem; /* 27px */
  font-weight: 700;
  margin-block: 0 2rem;
  padding-left: 20px;
  border-left: 3px solid var(--font-color);
  color: var(--font-color-03);
}

/* PC 2カラム・40px間隔 */
.p-about-outline__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem; /* 40px */
}

.p-about-outline__dl {
  margin: 0;
}

/* 列gap=0でdt/ddボーダーを隙間なく並べる */
.p-about-outline__row {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  padding-block-start: 1.8rem; 
}

.p-about-outline__row dt {
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-size: 1rem; /* 16px */
  font-weight: 600;
  color: var(--font-color);
  padding-right: 1rem;
  padding-bottom: 1.0rem; /* 20px */
  border-bottom: 1px solid var(--font-color);
}

.p-about-outline__row dd {
  font-family: 'Noto Sans CJK JP', 'Noto Sans JP', sans-serif;
  font-size: 1rem; /* 16px */
  color: var(--font-color-03);
  margin: 0;
  line-height: 1.6;
  padding-bottom: 1.25rem; /* 20px */
    padding-left: 1.25rem; /* 20px */
  border-bottom: 1px solid #B6C1CF;
}

/* =============================================
   History セクション（白背景）
   ============================================= */
.p-about-history {
  padding-block: clamp(4rem, 7vw, 8rem);
  background: #fff;
}

/* 見出し：History + 沿革 横並び左寄せ、丸はその下 */
.p-about-history__ttl {
  text-align: left;
}

.p-about-history__ttl-row {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-block-end: 0.75rem;
}

.p-about-history__ttl .c-ttl__en {
  display: inline;
}

/* History見出しはEN(History)とJA(沿革)が.p-about-history__ttl-row内で横並び
   （flexアイテム化により実質block表示）のため、下層ページ共通のSP用
   width:100%（customize.css）を適用すると横並びが崩れる。ID詳細度を合わせて
   このセクションのみ元のauto幅（内容に応じた幅）へ戻す。 */
@media (max-width: 768px) {
  #about .p-about-history__ttl-row .c-ttl__en {
    width: auto;
  }
}

.p-about-history__ttl .c-ttl__ja {
  display: inline;
}

.p-about-history__ttl .c-ttl__dots {
  display: flex;
  margin-block: 0;
}

.p-about-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

/*
 * 縦点線：list::before で1本だけ描画
 * dot列左端 = 4rem + 2.5rem + 3rem + 2.5rem = 12rem
 * dot中心   = 12rem + 5px
 * 2px線の中心を合わせるため left = 12rem + 4px
 */
.p-about-history__list::before {
  content: '';
  position: absolute;
  left: calc(4rem + 2.5rem + 3rem + 2.5rem + 4px);
  top: calc(1.625rem + 14px);   /* pad-top(26px) + dot-margin-top(9px) + dot-radius(5px) */
  bottom: 0;
  border-left: 2px dotted #7f8dd4;
  z-index: 0;
}

/* 最終行：dot以降の線を背景色で隠す */
.p-about-history__item:last-child::after {
  content: '';
  position: absolute;
  left: calc(4rem + 2.5rem + 3rem + 2.5rem + 4px);
  width: 4px;
  top: calc(1.625rem + 19px);  /* pad-top + dot-margin-top(9px) + dot-height(10px) */
  bottom: 0;
  background: #fff;
  z-index: 2;
}

/* 年表の1行：CSS Grid で列幅を固定 → 全行でdot位置が一致 */
.p-about-history__item {
  display: grid;
  grid-template-columns: 4rem 3rem 10px 1fr;
  column-gap: 2.5rem; /* 40px */
  align-items: start;
  padding-block: 1.625rem 1.875rem; /* 26px / 30px */
  position: relative;
}

/* 西暦年：Quicksand 紺 30px */
.p-about-history__year {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  color: var(--font-color);
  line-height: 1;
}

/* 月：数字 Quicksand 20px ／「月」ベースフォント 紺 16px */
.p-about-history__month {
  font-size: 1rem; /* 16px */
  color: var(--font-color);
  line-height: 1;
  white-space: nowrap;
  margin-top: 4px; /* テキスト1行目中心に合わせる */
}

.p-about-history__month-num {
  font-family: 'Quicksand', sans-serif;
  font-size: 1.25rem; /* 20px */
  font-weight: 700;
}

/* 青い丸 */
.p-about-history__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #7f8dd4;
  margin-top: 9px; /* テキスト1行目中心に合わせる（9 + 5 = 14px） */
  position: relative;
  z-index: 1;
}

/* テキスト：ベースフォント ベースカラー 16px */
.p-about-history__text {
  font-size: 1rem; /* 16px */
  color: var(--font-color-03);
  line-height: 1.7;
}

/* =============================================
   PC のみ
   ============================================= */
@media (min-width: 769px) {

  /* Mission 左：sticky */
  .p-about__mission-left {
    position: sticky;
    top: calc(var(--header-h, 5rem) + 100px);
    height: fit-content;
  }

  /* Mission 2カラムの横幅バランス調整：右カラム(.p-about__mission-right)を70px広げ、
     左右カラム間隔(gap)を70px狭める（全体幅・左右カラム比率の基準(40%)自体は不変）。
     right は flex:1 のため、gap または left の flex-basis を詰めた分がそのまま
     right の増分になる。gap(clamp(2rem,5vw,5rem)=32〜80px)を優先して70px分を詰め、
     gapが70pxに満たない画面幅（およそ769〜1390px）のみ、不足分だけ left の
     flex-basis/max-width を最小限縮小して補う。どちらの経路でも right の増分は
     常に70pxで一定（実測確認済み）。 */
  .p-about__mission {
    gap: max(0px, calc(clamp(2rem, 5vw, 5rem) - 70px));
  }

  .p-about__mission-left {
    flex-basis: calc(40% - max(0px, calc(70px - clamp(2rem, 5vw, 5rem))));
    max-width: calc(40% - max(0px, calc(70px - clamp(2rem, 5vw, 5rem))));
  }

  /* Mission 左見出し（Mission / ミッション×想い）の文字上端を、右カラム見出し
     「子どもも...」の文字上端と揃える。
     原因①: style.css のグローバル指定 `p{text-box-trim:trim-both;text-box-edge:text}`
     （@supports(text-box-trim:trim-both) 内）が .c-side-heading__en（<p>要素）に適用され、
     line-height:1.1 の指定が box の高さに反映されず、フォント本来の広い行送り分の
     余白がそのまま残っていた（対応ブラウザのみ発生。line-height の値自体は変更しない）。
     原因②: text-box-trim を打ち消しても、Quicksand とかな/漢字フォントの字面
     （キャップハイト基準の高さ）に差があるため、わずかな残差が生じる。
     見出しブロック全体（.c-side-heading＝Mission＋ミッション×想い行）を
     transformでまとめて上へシフトすることで、見出し内部の相対位置関係
     （margin/line-height/デザイン）を一切変えずに解消。シフト量は
     .c-side-heading__en と同じ clamp(3rem,5vw,5.25rem) を参照するため、
     PCのどの幅でも同じ比率で追従する（769〜1920px実測で誤差1.6px以内）。 */
  .c-side-heading__en {
    text-box-trim: none;
  }

  .c-side-heading {
    transform: translateY(calc(-0.13 * clamp(3rem, 5vw, 5.25rem)));
  }

  /* Office 見出し（Office / 事業所案内）を、他の共通見出し(.c-ttl.--inline)と
     同じ縦位置・間隔に揃える。
     原因①: Office見出しは共通クラス .c-ttl__en ではなく専用クラス
     .p-about-office__ttl-en を使っており、.c-ttl__en が持つ
     text-box-edge:cap alphabetic（style.css）が付与されていなかった。
     そのためフォント本来の広い行送り分の余白が残り、EN側の見た目上の
     縦中心が下寄りにズレていた。
     原因②: .p-about-office__ttl-row の align-items:baseline は、
     文字サイズが大きく異なるEN(74px)とJA(16px)のベースラインを揃えるため、
     大きさに比例してJAの見た目中心がベースライン寄り＝EN中心より下にズレる。
     共通見出しは align-items:center + text-box-edge によるボックストリムで
     文字サイズに依らず中心を揃えている。
     原因③: 3つの丸との間隔(.p-about-office__ttl-row の margin-block-end)が
     0.75rem(12px)のみで、共通見出しの実測間隔(約40〜47px)より大幅に狭かった。
     対応：共通見出しと同じ align-items:center・text-box-edge・JAのtranslateY(0.3em)
     （.c-ttl.--inline .c-ttl__ja と同じ値）を適用し、margin-block-end を
     40px（2.5rem。本ファイル内 .p-about__mission-heading 等と同じ単位）に調整。
     丸自体のサイズ・色・横間隔（共通 .c-ttl__dots）は無変更。
     History見出し（.p-about-history__ttl-row）も同一原因（align-items:baseline、
     margin-block-end:0.75rem）で同じズレが発生していたため、align-items と
     margin-block-end は同一値をグループセレクタで一元管理する（重複定義を避ける）。
     EN-JA間の横gapはセクションごとに既存値（Office:0.75rem／History:1rem）が異なり、
     今回の対象外（横位置は変更しない）のためグループ化せず個別のまま維持。
     History の英語見出しは共通クラス .c-ttl__en を使用しており、style.css の
     text-box-edge:cap alphabetic を既に継承済み（実測で確認済み）のため、
     Office用の .p-about-office__ttl-en のような個別追加は不要。 */
  .p-about-office__ttl-row,
  .p-about-history__ttl-row {
    align-items: center;
    margin-block-end: 2.5rem; /* 40px */
  }

  .p-about-office__ttl-en {
    text-box-edge: cap alphabetic;
  }

  .p-about-office__ttl-ja,
  .p-about-history__ttl .c-ttl__ja {
    transform: translateY(0.3em);
  }

  /* History の JA (.c-ttl__ja) は共通クラスのため base の margin-block-start:1.2em
     （style.css）をそのまま継承しており、align-items:center 適用後もこの上余白の分だけ
     JAがEN中心より下にズレて残る原因になっていた。共通の .c-ttl.--inline .c-ttl__ja と
     同じく margin-block-start:0 を明示し、フォントサイズに依存する余白を除去する。 */
  .p-about-history__ttl .c-ttl__ja {
    margin-block-start: 0;
  }

  /* 沿革年表の丸印を直径15pxに変更（PCのみ）。
     原因：.p-about-history__dot は width/height:10px 固定のハードコード値で、
     ご指定の15pxとは異なっていた。
     対応：グリッド列幅(3列目 10px)・縦点線の left 位置は変更せず、丸印のみを
     transform:translateX(-2.5px) で列の中心（変更前の中心と同じ位置）に
     視覚的に再センタリング。縦方向は margin-top を 9px→6.5px に変更することで、
     「margin-top + 半径」の合計（＝丸印の中心位置）を 14px のまま維持
     （旧: 9+5=14 / 新: 6.5+7.5=14）。これにより .p-about-history__list::before
     （点線開始位置＝1個目の丸印の中心）は計算結果が変わらないため無修正。
     ただし .p-about-history__item:last-child::after（最終行で点線を隠す境界＝
     丸印の下端）は下端位置が19px→21.5pxへ移動するため、この1箇所のみ値を更新。
     年・月・本文（グリッドの他列）の位置・幅は一切変更していない。 */
  .p-about-history__dot {
    width: 15px;
    height: 15px;
    margin-top: 6.5px;
    transform: translateX(-2.5px);
  }

  .p-about-history__item:last-child::after {
    top: calc(1.625rem + 21.5px);
  }

  /* History：左右振り分け（左40% 見出し／右60% 年表） */
  .p-about-history__inner {
    display: flex;
    align-items: flex-start;
    gap: 0;
  }

  .p-about-history__head {
    flex: 0 0 40%;
    margin-block-end: 0;
  }

  .p-about-history__list {
    flex: 1;
  }

}

/* =============================================
   SP
   ============================================= */
@media (max-width: 768px) {

  /* Philosophyサブ見出し：SP限定でWelfare/Aboutのサブ見出しと同じ文字サイズへ統一。
     Welfare(.p-welfare__lead)・About(.p-about__sub)は共通クラス .c-sec-lead
     （top.css）の font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem) をそのまま
     使用しているため、Welfareの実測値は固定pxではなくこのclamp式そのもの。
     複数の画面幅(768/430/390/375/320px)すべてで一致させるには同じ式が必要なため、
     推測のpx値ではなくこの式をそのまま採用（PCは元の2rem固定のまま変更なし）。 */
  .p-about-philosophy__text {
    font-size: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  }

  .p-about__mission {
    flex-direction: column;
    gap: 2rem;
    padding-block-end: 4rem;
  }

  .p-about__mission-left {
    flex: none;
    max-width: 100%;
  }

  .p-about__mission-right {
    flex: none;
    max-width: 100%;
  }

  .p-about__mission-heading {
    font-size: 1.375rem;
    margin-block-end: 1.75rem;
  }

  .p-about__mission-sign {
    gap: 0.5rem;
  }

  .p-about__mission-sign-role {
    font-size: 1.06rem;
  }

  .p-about__mission-sign-name {
    font-size: 1.3rem;
  }

  /* Office head: SP 縦並び・見出しサイズ縮小 */
  .p-about-office__head {
    flex-direction: column;
    gap: 1.25rem;
  }

  .p-about-office__ttl-en {
    font-size: 3rem; /* Mission の c-side-heading__en に合わせる */
  }

  .p-about-office__ttl-ja {
    font-size: 0.875rem;
  }

  /* Office grid: SP 2カラム維持 */
  .p-about-office__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  /* SP 事業所名: 17px */
  .p-about-office__name {
    font-size: 1.0625rem; /* 17px */
  }
    .p-about-office__cat {
      font-size: 0.8125rem;
    }

  /* SP 事業所名ラップ min-height 調整 */
  .p-about-office__name-wrap {
    min-height: 6rem;
  }

  /* History: SP 縦並び・コンパクト化 */
  .p-about-history__inner {
    display: block;
  }

  .p-about-history__head {
    margin-block-end: 2rem;
  }

  /* History SP: グリッド列幅を縮小、gap を半分に */
  .p-about-history__item {
    grid-template-columns: 3rem 2.75rem 10px 1fr;
    column-gap: 0.625rem; /* 10px */
    padding-block: 1rem 1.25rem;
  }

  .p-about-history__year {
    font-size: 1.375rem; /* 22px */
  }

  .p-about-history__month {
    margin-top: 3px;
  }

  /*
   * SP 縦点線：1px
   * dot列左端 = 3rem + 0.625rem + 2.75rem + 0.625rem = 7rem
   * dot中心   = 7rem + 5px、1px線なので left = 7rem + 4px
   */
  .p-about-history__list::before {
    left: calc(3rem + 0.625rem + 2.75rem + 0.625rem + 4px);
    top: calc(1rem + 14px);   /* SP pad-top(16px) + dot-margin-top(9px) + dot-radius(5px) */
    border-left-width: 1px;
  }

  .p-about-history__item:last-child::after {
    left: calc(3rem + 0.625rem + 2.75rem + 0.625rem + 3px);
    width: 3px;
    top: calc(1rem + 19px);  /* SP pad-top + dot-margin-top(9px) + dot-height(10px) */
  }

  /* Outline: SP 1カラム */
  .p-about-outline__cols {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .p-about-outline__subtitle {
    font-size: 1.25rem;
  }

  .p-about-outline__row {
    grid-template-columns: 6rem 1fr;
    padding-block: 0.875rem;
  }

}