/* =====================================================================
   ページ: ippoについて（About）  Figma 76:17485
   front-page と同様、tokens / base / components に依存。
   ===================================================================== */

/* base.css の section{margin-block:48} を打ち消す（余白は各セクションのpaddingで管理）。
   未リセットだとdivider帯の上下に48pxのbody背景余白が出て波がflushにならない。 */
.about section { margin-block: 0; }

/* ===== MV（ページタイトル帯・Figma 76:17486）======================== */
.about-mv {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center center; /* @2x・ヒーロー比でクロップ済み */
  background-repeat: no-repeat;
  overflow: hidden;
  text-align: center;
}
/* 写真の上の色被せ（Figma: 緑20% 乗算 + 黒10%）*/
.about-mv__overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(153, 195, 188, 0.2); mix-blend-mode: multiply;
}
.about-mv__overlay::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.1); mix-blend-mode: normal;
}
.about-mv__inner {
  position: relative; z-index: 3;
  max-width: 1200px; padding-inline: var(--space-24);
  color: var(--color-white);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-24);
}
.about-mv__title {
  font-size: var(--font-size-h1);          /* 42.667px */
  font-weight: var(--font-weight-black);   /* 900 */
  letter-spacing: var(--letter-spacing-wider);
  line-height: var(--line-height-base);
  margin: 0;
}
.about-mv__sub {
  font-size: var(--font-size-h3);          /* 18.286px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  margin: 0;
}
.about-mv__sub span { display: block; }
/* 下部の白波（コンテンツ白地への橋渡し）*/
.about-mv__wave {
  position: absolute; left: 0; bottom: -1px; width: 100%; height: auto;
  z-index: 2; pointer-events: none;
}
/* 下隅のIPPO積み木イラスト */
.about-mv__ippo { position: absolute; z-index: 3; height: auto; pointer-events: none; }
.about-mv__ippo--l { left: 8.3%;  bottom: 38px; width: 264px; }   /* Figma left:120 */
.about-mv__ippo--r { right: 11.6%; bottom: 31px; width: 96px; }   /* Figma left:1177 */

@media (max-width: 768px) {
  .about-mv { min-height: 380px; }
  /* 他のMV（top-mv / c-mv）と SP フォントサイズを統一：タイトル h3-lg・サブ xs。 */
  .about-mv__title { font-size: var(--font-size-h3-lg); }   /* 42.7px → 21.3px */
  .about-mv__sub { font-size: var(--font-size-xs); }        /* 18.3px → 11.6px */
  /* SP では左右の子どもイラストは非表示 */
  .about-mv__ippo { display: none; }
}

/* ===== 導入（企業理念・Figma 76:17545）============================== */
.about-intro {
  /* 背景色_ライトイエロー地のクレヨン紙テクスチャ（346.8×327.8px タイル）を直接フィル。
     他セクションと同一素材。色を焼き込んだ画像なので multiply は使わない。 */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}
.about-intro__inner {
  max-width: 1200px; margin-inline: auto;
  padding: var(--space-64) var(--space-80) var(--space-80);
  display: flex; align-items: flex-start; gap: var(--space-40);
  position: relative;
}
.about-intro__body {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-24);
  color: var(--color-brown-text);
}
.about-intro__head { display: flex; flex-direction: column; gap: var(--space-8); }
.about-intro__eyebrow { font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); line-height: var(--line-height-base); margin: 0; }
.about-intro__title { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); line-height: var(--line-height-base); margin: 0; }
.about-intro__text {
  font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-body); margin: 0;
}
.about-intro__text p { margin: 0; }
.about-intro__text p + p { margin-top: 1.8em; } /* 段落間（空行相当）*/
/* 右の重なる2枚のブロブ写真。座標は480×346枠を基準に%で持たせ、SPで枠が
   縮んでも比率を保って追従させる（px固定だと枠より外へはみ出し横スクロールが出る）。 */
.about-intro__photos {
  position: relative; flex: 0 0 480px; width: 480px; aspect-ratio: 480 / 346;
}
.about-intro__photo { position: absolute; height: auto; }
.about-intro__photo--p2 { left: 0;      top: 24.3%; width: 71.04%; } /* 大（下・左）*/
.about-intro__photo--p1 { left: 65%;  top: -3.2%; width: 45.42%; } /* 小（上・右）*/

@media (max-width: 900px) {
  .about-intro__inner { flex-direction: column; padding: var(--space-48) var(--space-24) var(--space-56); }
  .about-intro__photos { flex-basis: auto; width: 100%; max-width: 480px; margin-inline: auto; }
}
@media (max-width: 768px) {
  .about-intro__photo--p1 {
    right: 0;
    left: auto;
  }
  .about-intro__photo--p2 {
    width: 60%;
  }
  .about-intro__inner {
    padding-top: var(--space-24);
    padding-inline: var(--space-16);
    padding-bottom: 0;
  }
  /* 見出しを SP 縮小（doudai / community と同じ h3-lg）。32px のままだと「きっかけ」が割れる。 */
  .about-intro__eyebrow { font-size: var(--font-size-h5); }
  .about-intro__title { font-size: var(--font-size-h3-lg); }
  .about-intro__text { font-size: var(--font-size-h5); }
}


/* ================= [1] divider-band-1 ================= */
/* ===== About / divider-band-1 装飾帯（Figma 76:17559・テキストなし）=====
   ライトイエロー地（紙テクスチャ）→白の橋渡し。IPPO積み木イラストを中央上寄せで
   白い丘形ディバイダーの上に重ねる。バンド高さ240px（Figma実寸）。 */
.about-divider-band-1 {
	position: relative;
	width: 100%;
	/* Figma: 背景色_ライトイエロー（紙テクスチャを 346.8×327.8px タイルで直接フィル） */
	background-color: var(--color-bg-light-yellow); /* #fffcee */
	background-image: url("../../images/common/tex-yellow.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	overflow: hidden;
}

.about-divider-band-1__inner {
	position: relative;
	width: 100%;
	height: 240px; /* Figma: Frame278 高さ */
	margin-inline: auto;
}

/* 白い丘形ディバイダー：下端いっぱい、丘の頂点が中央付近で上がる */
.about-divider-band-1__wave {
	position: absolute;
	left: 0;
	bottom: 0;
	display: block;
	width: 100%;
	height: 157px; /* Figma: Rectangle 39 高さ（バンド下端から） */
	z-index: 1;
}
/* <picture> 化に伴い内側 img を箱いっぱいに広げる（SPは <source> で _sp に差し替え）。 */
.about-divider-band-1__wave img {
	display: block;
	width: 100%;
	height: 100%;
}

/* IPPO積み木＋子どものイラスト（透過）：水平中央・上端寄せ、波の上に重ねる */
.about-divider-band-1__lettering {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	width: 44.375%; /* Figma: 639 / 1440 */
	max-width: 639px;
	height: auto;
	z-index: 2;
	pointer-events: none;
}

@media (max-width: 768px) {
	.about-divider-band-1__inner { height: 140px; }
	.about-divider-band-1__wave { height: 92px; }
	/* レタリングのサイズは top-ippo-divider__lettering の SP 指定に合わせる。 */
	.about-divider-band-1__lettering {
		width: 82.13%;
		max-width: none;
		aspect-ratio: 308 / 88;
		object-fit: contain;
	}
}

/* ================= [2] services ================= */
/* ===== About: 私たちの療育サービス（Figma 76:17562）====================
   2枚の大型イラスト風カード。写真＋下部カラーバンド（ラベル）を、
   ゴールデンレシオの手描きブロブ形状（services-blob.svg）でクリップ。
   緑＝児童発達支援 / 青＝放課後等デイサービス。
   ===================================================================== */
.about-services {
  background: var(--color-white);
  padding-block: 0 var(--space-64);
}
.about-services__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-80);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-32);
}

/* カード行：Figma gap 56px、上揃え・中央寄せ */
.about-services__cards {
  display: flex;
  gap: var(--space-56);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}



/* カード（リンク化）：児発／放デイ詳細ページへ遷移。 */
.about-services__card {
  display: block;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.about-services__card:hover,
.about-services__card:focus-visible {
  transform: translateY(-4px);
  opacity: 0.92;
}

/* ラベル文字：Figma 25.6px / 白 / 字間2% */
.about-services__label {
  margin: 0;
  color: var(--color-white);
  font-size: var(--font-size-h2-lead);   /* 25.6px */
  font-weight: var(--font-weight-bold);   /* 児童発達支援＝Bold 700 */
  letter-spacing: var(--letter-spacing-wide);
  line-height: 1.6;
  text-align: center;
  white-space: nowrap;
}
.about-services__label--extrabold {
  font-weight: var(--font-weight-extrabold); /* 放課後等デイサービス＝ExtraBold 800 */
}

/* カード内写真は親カード幅に追従させる（幅指定がないと実寸500pxで表示され
   SPで列幅を突き破り横スクロールが出る）。 */
.about-services__photo {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 768px) {
  .about-services {
    padding-bottom: var(--space-24);
  }
  .about-services__inner { padding-inline: var(--space-16); gap: var(--space-24)}
  .about-services__cards { align-items: center; gap: var(--space-8); }
  .about-services__card { flex-basis: auto; width: 100%; max-width: 360px; }
}

/* ================= [3] divider-band-2 ================= */
.about-divider-band-2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background-color: var(--color-white);
}

.about-divider-band-2__band {
  position: relative;
  width: 100%;
  height: 74px;
  flex-shrink: 0;
}

.about-divider-band-2__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* ================= [4] hajime ================= */
.about-hajime {
	/* 背景：オフホワイトのクレヨン紙テクスチャ（色を焼き込んだ 346.8×327.8px タイルを
	   top-left 起点で直接フィル。news-list / c-cta-visit と同じ素材・同じ規約。multiply は使わない）。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-bottom: var(--space-80);
}

.about-hajime__inner {
	width: 100%;
	max-width: 1200px;
	padding-inline: var(--space-80);
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.about-hajime__head {
	display: flex;
	justify-content: center;
}

.about-hajime__title {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h2); /* 32px */
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
	text-align: center;
}

.about-hajime__title-line {
	display: block;
}

.about-hajime__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-32);
	align-items: stretch;
	justify-content: center;
	width: 100%;
}

.about-hajime__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
	background: var(--color-white);
	/* 手描きの枠を border-image で適用（top-support__card と共通の素材）。 */
	border-image: url("../../images/top/top-support-card-border.webp") 20 / 10px round;
	border-radius: var(--radius-sm); /* 8px */
	padding: var(--space-16) var(--space-16) var(--space-24);
}

.about-hajime__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 291 / 180;
}

/* 写真は斜めブロブ形状（透過PNG/webp）。左に-5pxはみ出すFigma準拠の配置 */
.about-hajime__photo-img {
	position: absolute;
	top: 0;
	left: -5px;
	width: calc(100% + 10px);
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
}

.about-hajime__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-8);
	width: 100%;
	color: var(--color-brown-text);
}

.about-hajime__card-title {
	margin: 0;
	font-size: var(--font-size-h3-lg); /* 21.33px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-align: center;
}

.about-hajime__card-title-line {
	display: block;
}

.about-hajime__card-text {
	margin: 0;
	width: 100%;
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-bold);
	line-height: 1.8;
}

@media (max-width: 1200px) {
  .about-hajime__inner {
    padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
  }
  .about-hajime__cards {
    gap: var(--space-16);
  }
}

@media (max-width: 768px) {
  .about-hajime {
    padding-bottom: 0;
  }
	.about-hajime__inner {
		padding-inline: var(--space-16);
    gap: var(--space-24);
	}
	/* 見出しを SP 縮小（doudai / community と同じ h3-lg）。
	   32px のままだと「はじめの療育」が行中で割れる。 */
	.about-hajime__title {
		font-size: var(--font-size-h3);
	}
	/* SP は .saiyo-benefits__card と同じレイアウト：1カラムで積み、写真を左に float、
	   見出しは写真の右に回り込み、本文は写真の下へ回り込む（clear）。 */
	.about-hajime__cards {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-12);
	}
	.about-hajime__card {
		display: block;          /* flex を解除＝写真を float し本文を回り込ませる */
		padding: var(--space-12);
		text-align: left;
	}
	.about-hajime__photo {
		float: left;
		width: 33%;
		margin: 0 var(--space-12) var(--space-8) 0;
		aspect-ratio: 291 / 180;
	}
	.about-hajime__body {
		display: block;          /* float を回り込ませるため block に */
	}
	/* 見出しは写真の右・左寄せ・h5（.saiyo-benefits__title と同サイズ感）。
	   各行に手描きの下線を敷くため flex 縦並びで行幅＝文字幅に詰める。 */
	.about-hajime__card-title {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-4);
		text-align: left;
		font-size: var(--font-size-h5);
		margin: var(--space-4) 0 var(--space-8);
	}
	/* 各行に手描きの下線（.saiyo-benefits__title-line と共通の素材）。SP=2px。 */
	.about-hajime__card-title-line {
		padding-bottom: var(--space-4);
		background: url("../../images/common/underline.png") left bottom / 100% 2px no-repeat;
	}
	/* 本文は写真の下へ回り込む（clear）・h6。 */
	.about-hajime__card-text {
		font-size: var(--font-size-h6);
		line-height: var(--line-height-base);
		clear: both;
	}
}

/* ================= [5] doudai ================= */
.about-doudai {
	/* 背景：about-hajime と同じオフホワイトのクレヨン紙テクスチャ（346.8×327.8px タイル・top-left・multiply なし）。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: var(--space-40);
	padding-bottom: var(--space-80);
}
.about-doudai__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-64);
	width: 100%;
	max-width: 1200px;
}

/* ---- top block ---- */
.about-doudai__top {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
	width: 100%;
}
.about-doudai__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-inline: var(--space-80);
}
/* 積み木4色クレヨン（heading-crayon.png・共通素材）。c-heading と同じ装飾。 */
.about-doudai__icons {
	width: 88px;
	height: 57px; /* heading-crayon.png 175×114 の比率 */
	margin-bottom: var(--space-16);
	background: url("../../images/common/heading-crayon.png") center / contain no-repeat;
}
.about-doudai__title {
	margin: 0;
	max-width: 640px;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-h2);
	line-height: 1.6;
	color: var(--color-brown-text);
	text-align: center;
}
.about-doudai__title span {
	display: block;
}

.about-doudai__container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-24);
	padding-inline: var(--space-80);
}
.about-doudai__lead {
	margin: 0;
	max-width: 640px;
	width: 100%;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-body);
	line-height: 1.8;
	color: var(--color-brown-text);
	text-align: center;
}
.about-doudai__diagram {
	margin: 0;
	width: 508.5px; /* 実寸 1017px の半分（Retina対応） */
	max-width: 100%;
}
.about-doudai__diagram img {
	display: block;
	width: 100%;
	height: auto;
}
.about-doudai__body {
	margin: 0;
	max-width: 640px;
	width: 100%;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-body);
	line-height: 1.8;
	color: var(--color-brown-text);
	text-align: left;
}

/* ---- cards ---- */
.about-doudai__cards {
	display: flex;
	gap: var(--space-32);
	justify-content: center;
	padding-inline: var(--space-80);
	width: 100%;
}
.about-doudai__card {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: var(--color-white);
	border: 1px solid var(--color-brown-sub);
	border-radius: var(--radius-md, 16px);
	border-radius: 24px;
	overflow: hidden;
	padding: var(--space-32) var(--space-40) var(--space-24);
}
.about-doudai__card-title {
	margin: 0;
	font-weight: var(--font-weight-extrabold);
	font-size: var(--font-size-h2-lead); /* 25.6px */
	line-height: 1.6;
	letter-spacing: 0.512px;
	color: var(--color-brown-sub);
	text-align: center;
	white-space: nowrap;
}
.about-doudai__card-figure {
	width: 100%;
	aspect-ratio: 424 / 360;
}
.about-doudai__card-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.about-doudai__card-body {
	width: 100%;
}
.about-doudai__card-body p {
	margin: 0;
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-body);
	line-height: 1.8;
	color: var(--color-brown-sub);
	text-align: center;
}

@media (max-width: 1200px) {
	.about-doudai__head,
	.about-doudai__container,
	.about-doudai__cards {
		padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
	}
  .about-doudai__card {
		padding: var(--space-24) var(--space-16);
  }
  .about-doudai__card-title {
    white-space: wrap;
  }
}

/* ---- responsive ---- */
@media (max-width: 768px) {
  .about-doudai {
    padding-bottom: var(--space-40);
  }
  .about-doudai__inner {
    gap: var(--space-40);
  }
  .about-doudai__lead {
    font-size: var(--font-size-h5);
  }
  .about-doudai__top {
    gap: var(--space-16);
  }
	.about-doudai__head,
	.about-doudai__container,
	.about-doudai__cards {
		padding-inline: var(--space-16);
	}
	.about-doudai__title {
		font-size: var(--font-size-h3);
	}
	.about-doudai__body {
		font-size: var(--font-size-h5);
	}
	.about-doudai__cards {
		flex-direction: column;
		align-items: center;
	}
	.about-doudai__card {
		/* 縦積み時は flex:1 1 0（基準0）が高さに効いてカードが潰れるため、内容なりの高さに戻す。 */
		flex: 0 0 auto;
		width: 100%;
		max-width: 480px;
	}
	.about-doudai__card-title {
		font-size: var(--font-size-h3);
		white-space: normal;
	}
	.about-doudai__card-body p {
		font-size: var(--font-size-h5);
	}
  .about-doudai__diagram {
    width: 80%;
  }
}

/* ================= [6] results ================= */
/* ===== About: ご利用者の実績（Figma 76:17700 追加Counter_00002）===== */
/* results 前の区切り波形（top-wave-light-yellow.webp・全幅）。 */
.about-results-wave {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px; /* 次セクションとのヘアライン隙間を防ぐ */
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-position: top left;
  background-size: 346.8px 327.8px;
  background-repeat: repeat;
}

/* strengths 上端の区切り波形（ホワイト・about/wave-white.webp）。
   section を基準に absolute で上端から上へはみ出させる（波の下端を section 上端に重ねる）。 */
.about-strengths-wave {
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px); /* 上端から上へはみ出す。-1px で白セクションと重ねヘアライン隙間を防ぐ */
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}

.about-results {
  /* Figma: 紙テクスチャ背景（346.8×327.8 を左上基準でタイル）。@2xタイルを実寸でタイル */
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/about/results-bg-texture.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 347px 328px;
  padding-block: var(--space-40) var(--space-80);
}
.about-results__inner {
  max-width: var(--layout-max);     /* 1200px */
  margin-inline: auto;
  padding-inline: var(--space-24);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);             /* Figma gap 56 */
}

/* --- 上段：見出し + 統計カード ------------------------------------- */
/* カード群は front-page S03 と同一の共通コンポーネント c-counter（components/counter.css）。
   見出しのみページ側で出力する。 */
.about-results__stats-block {
  width: 100%;
}
.about-results__heading {
  margin: 0 0 var(--space-40);           /* Figma: 見出し→カード gap 40 */
  text-align: center;
  color: var(--color-brown-text);
  font-size: var(--font-size-h2-lead);   /* 25.6px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
}

/* --- 下段：横棒グラフ ---------------------------------------------- */
.about-results__chart-block {
  width: 100%;
  max-width: var(--layout-medium);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);             /* Figma gap 24 */
}
.about-results__chart-title {
  margin: 0;
  text-align: center;
  color: var(--color-brown-text);
  font-size: var(--font-size-h2-lead);   /* 25.6px */
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-wide);
}
.about-results__chart {
  width: 100%;
  /* チャート専用に書き出した手描き風ラフ枠（about/about-results-chart-border.webp・2024×699・透過）。
     中身は白塗り（border 内側＝padding-box まで）。 */
  background: var(--color-white);
  background-clip: padding-box;               /* 枠線の外側に白がはみ出さないように */
  border: 4px solid var(--color-brown-sub);   /* border-image 非対応時の代替 */
  border-image: url("../../images/about/about-results-chart-border.webp") 20 / 10px round;
  border-radius: var(--radius-md);            /* fallback 用 */
  padding: var(--space-40) var(--space-24);
}
.about-results__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);             /* Figma 行間 40px ピッチ（24高+16）*/
}
.about-results__row {
  display: grid;
  grid-template-columns: 197px 1fr;  /* Figma: ラベル列幅 197px */
  align-items: center;
  gap: var(--space-16);
}
.about-results__bar-label {
  text-align: right;
  color: var(--color-brown-text);
  font-size: var(--font-size-h4);           /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  white-space: nowrap;
}
.about-results__bar-track {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 24px;
}
.about-results__bar {
  display: block;
  height: 24px;                    /* Figma バー高 24px */
  width: var(--w);                 /* 回答率（%）に比例＝Figmaと同比率 */
  /* テクスチャ付きの緑（手描き）。フォールバックは深い緑トークン */
  background-color: var(--color-accent-green-deep);
  background-image: url("../../images/about/results-bar-fill.webp");
  background-repeat: repeat;
  background-position: left center;
  background-size: auto 24px;
}
.about-results__bar-value {
  color: var(--color-brown-text);
  font-size: var(--font-size-h4);           /* 16px */
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-base);
  white-space: nowrap;
  padding-inline-start: var(--space-8);
}

/* ビュー侵入で各バーが左から伸びる（chart-block の .is-inview をトリガ）。
   width をアニメーション＝背景テクスチャを歪めず、左端から塗りが現れる。
   初期幅0は .js-inview 配下でだけ適用＝JS無効/reduced-motion では従来どおり最初から表示。
   行ごとに遅延を付けて上から順に伸ばす。*/
.js-inview .about-results__bar {
  width: 0;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-inview .about-results__chart-block.is-inview .about-results__bar {
  width: var(--w);
}
.js-inview .about-results__row:nth-child(1) .about-results__bar { transition-delay: 0s; }
.js-inview .about-results__row:nth-child(2) .about-results__bar { transition-delay: 0.08s; }
.js-inview .about-results__row:nth-child(3) .about-results__bar { transition-delay: 0.16s; }
.js-inview .about-results__row:nth-child(4) .about-results__bar { transition-delay: 0.24s; }
.js-inview .about-results__row:nth-child(5) .about-results__bar { transition-delay: 0.32s; }
.js-inview .about-results__row:nth-child(6) .about-results__bar { transition-delay: 0.4s; }
.js-inview .about-results__row:nth-child(7) .about-results__bar { transition-delay: 0.48s; }

/* 数値はバーが伸びた後（全行のバーアニメ完了後）に、全部同時にふわっとフェードイン。*/
.js-inview .about-results__bar-value {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.js-inview .about-results__chart-block.is-inview .about-results__bar-value {
  opacity: 1;
  transition-delay: 0.7s;
}

@media (prefers-reduced-motion: reduce) {
  .js-inview .about-results__bar { width: var(--w); transition: none; }
  .js-inview .about-results__bar-value { opacity: 1; transition: none; }
}

/* --- レスポンシブ --------------------------------------------------- */
@media (max-width: 900px) {
  .about-results {
    padding-top: var(--space-24);
  }
  .about-results__row { grid-template-columns: 1fr; gap: 0; }
  .about-results__bar-label { text-align: left; white-space: normal; }
}
@media (max-width: 768px) {
  .about-results__heading { font-size: var(--font-size-h3); }
  .about-results__chart-title { font-size: var(--font-size-h3); }
  .about-results { padding-bottom: var(--space-40); }
  .about-results__inner { padding-inline: var(--space-16); }
  .about-results__chart { padding: var(--space-16) var(--space-16); }
  .about-results__bar-label { font-size: var(--font-size-h6); }
  .about-results__bar-value { font-size: var(--font-size-h6); }
  .about-results__bars {
    gap: var(--space-8);
  }
  .about-results__bar {
    height: 16px;
  }

  /* カウンターはトップ S03（front-page）と同じ SP デザイン：3カラムのまま枠付きで小型化。
     値は top.css の .top .c-counter__* 上書きと同一。 */
  .about .c-counter__grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
  .about .c-counter__card { padding: var(--space-16) var(--space-4) var(--space-8); }
  /* アイコンは43×43pxに正規化（各カードのインラインstyleを上書きするため !important）。 */
  .about .c-counter__icon {
    width: 43px !important;
    height: 43px !important;
    top: -6px !important;
    object-fit: contain;
  }
  .about .c-counter__num {
    min-height: 0;
    margin-bottom: var(--space-4);
    font-size: var(--font-size-h2-lead);
  }
  .about .c-counter__num small { font-size: var(--font-size-h5); }
  .about .c-counter__num small.c-counter__unit--sm { font-size: var(--font-size-h6); }
  .about .c-counter__label { margin-top: 0; font-size: var(--font-size-xs); }
  .about .c-counter__note { font-size: var(--font-size-2xs); text-align: center; margin-top: var(--space-8); }
}

/* ================= [7] divider-band-3 ================= */
.about-divider-band-3 {
	width: 100%;
	line-height: 0;
}

.about-divider-band-3__band {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ================= [8] episode ================= */
/* ===== About: はじめの療育エピソード（お子さまの変化・嬉しかったエピソード）===== */
.about-episode {
	/* 背景：about-hajime / about-doudai と同じオフホワイトのクレヨン紙テクスチャ（346.8×327.8px タイル・top-left・multiply なし）。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	padding-block: var(--space-40) var(--space-200);
}

/* 見出し下余白：このセクションはブロック組み（gap なし）のため c-heading に付与
   （共通 .c-heading は余白を持たない方針）。 */
.about-episode__inner > .c-heading { margin-bottom: var(--space-32); }

.about-episode__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
}

/* 見出し下のガタ（component の既定マージン）を 40px に合わせる */
.about-episode .c-heading {
	margin-block: 0 var(--space-40);
}

.about-episode__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

/* テクスチャ付き（薄黄）のカード */
.about-episode__card {
	display: flex;
	align-items: center;
	gap: var(--space-56);
	padding: var(--space-32) var(--space-40);
	border-radius: var(--radius-md);
	/* 手描き（クレヨン）の枠を border-image で適用（about/about-episode-card-border.png）。 */
	border-image: url("../../images/about/about-episode-card-border.png") 20 / 10px round;
	background-color: #f7eebe;
	background-image: url("../../images/about/episode-card-texture.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
}

.about-episode__card--reverse {
	flex-direction: row;
}

.about-episode__body {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	color: var(--color-brown-text);
}

.about-episode__title {
	margin: 0;
	font-size: var(--font-size-h3-lg); /* 21.33px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.about-episode__quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.about-episode__name {
	margin: 0;
	font-size: var(--font-size-h3); /* 18.29px */
	font-weight: var(--font-weight-bold);
	line-height: 1.6;
}

.about-episode__text {
	margin: 0;
	font-size: var(--font-size-body); /* 16px */
	font-weight: var(--font-weight-medium);
	line-height: 1.8;
}

.about-episode__figure {
	flex: 0 0 auto;
	width: 254px;
}

.about-episode__figure img {
	display: block;
	width: 254px;
	height: 180px;
	object-fit: contain;
}

@media (max-width: 1200px) {
  .about-episode__figure {
    width: 120px;
  }
  .about-episode__figure img {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .about-episode {
    padding-top: var(--space-24);
    padding-bottom: var(--space-40);
  }
  .about-episode .c-heading {
    margin-bottom: var(--space-24);
  }
	.about-episode__inner {
		padding-inline: var(--space-16);
	}
  .about-episode__list {
    gap: var(--space-16);
  }
	.about-episode__card,
	.about-episode__card--reverse {
		flex-direction: column;
		gap: var(--space-8);
		text-align: left;
    padding: var(--space-16) var(--space-16) var(--space-8);
	}
	.about-episode__card--reverse {
    flex-direction: column-reverse;
  }
	.about-episode__figure {
		width: 100%;
		max-width: 100px;
		align-self: flex-end;
	}
	.about-episode__figure img {
    max-width: 100%;
    height: auto;
  }
	/* SP フォント縮小（タイトル h3 / 名前 h4 / 本文 h5）。 */
	.about-episode__title { font-size: var(--font-size-h6); }
	.about-episode__name { font-size: var(--font-size-h6); }
	.about-episode__text { font-size: var(--font-size-h6); }
}

/* ================= [9] strengths ================= */
/* ===== About: ippoが選ばれている理由（Figma 76:17870）===================== */
.about-strengths {
  position: relative;                       /* 上端の波形（absolute）の基準 */
  background: var(--color-white);
  padding-bottom: var(--space-80);          /* Figma: pb 80 */
}
.about-strengths__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-80);           /* Figma: px 80 */
  display: flex;
  flex-direction: column;
  gap: var(--space-48);                      /* Figma: 見出し→本文 gap 48 */
}
.about-strengths__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-32);                      /* Figma: card gap 32 */
}
.about-strengths__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);                      /* Figma: 写真→テキスト gap 24 */
  padding: var(--space-16) var(--space-16) var(--space-24); /* Figma: pt16 / px16 / pb24 */
  border-radius: var(--radius-sm);           /* 8px */
  background-color: var(--color-bg-light-yellow);
  background-image: url('../../images/about/strengths-card-texture.webp'); /* Figma: テクスチャ付き背景 */
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;          /* Figma: bg-size */
}
.about-strengths__photo-wrap {
  width: 100%;
  aspect-ratio: 420 / 302;                   /* Figma: Golden Ratio 写真枠 */
  border-radius: var(--radius-sm);           /* 8px */
  overflow: hidden;
  margin-bottom: var(--space-16);
}
.about-strengths__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-strengths__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);                      /* Figma: タイトル→引用 gap 16 */
  width: 100%;
}
.about-strengths__title {
  margin: 0;
  font-size: var(--font-size-h3-lg);         /* 21.33px */
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);      /* 1.6 */
  letter-spacing: 0.1em;                      /* Figma: tracking 2.133px ≒ 0.1em */
  color: var(--color-brown-text);
  text-align: center;
  white-space: nowrap;
}
.about-strengths__quote {
  width: 100%;
  color: var(--color-brown-text);
}
.about-strengths__quote p {
  margin: 0;
  font-size: var(--font-size-body);          /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1.8;                          /* Figma: 引用 line-height 1.8 */
}
/* PC（1200px超）はカルーセルのラッパーを素通し（中身は3列グリッドのまま）。ドットは 1200px以下のみ。 */
.about-strengths__viewport { width: 100%; }
.about-strengths__dots { display: none; }
@media (max-width: 1200px) {
  .about-strengths {
    overflow-x: clip; /* フルブリードのトラックがページ横スクロールを生まないよう抑止 */
  }
  .about-strengths__inner {
    padding-inline: var(--space-40);
    gap: var(--space-32);
  }

  /* 1200px以下は saiyo-voice と同じ共通カルーセル（rooms-carousel.js＝Swiper）。スワイプ・慣性・
     ループ・中央寄せは Swiper に一任する。トラックは画面幅いっぱい（フルブリード）。 */
  .about-strengths__carousel {
    position: relative;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .about-strengths__viewport { position: relative; }
  /* リスト＝Swiperの wrapper。横並び（flex）だけ指定。間隔は Swiper の spaceBetween。 */
  .about-strengths__list {
    display: flex;
    gap: 0;
  }
  /* カード＝Swiperスライド。幅は slidesPerView:'auto' が参照。 */
  .about-strengths__card {
    flex: 0 0 76vw;
    width: 76vw;
    max-width: 18rem; /* 288px・saiyo-voice カードと同上限 */
    height: auto;
    gap: var(--space-8);
  }
  .about-strengths__title { white-space: normal; }
  .about-strengths__body {
    gap: var(--space-8);
  }

  /* ページネーションドット（PHP出力の<button>。JS が is-active を同期。c-rooms__dots と同仕様）。 */
  .about-strengths__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-8);
    margin-top: var(--space-24);
  }
  .about-strengths__dots button {
    width: var(--space-8);
    height: var(--space-8);
    padding: 0;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--color-gray-pale); /* 不活性ドット */
    transition: background-color 0.2s ease;
  }
  .about-strengths__dots .is-active {
    background: var(--color-brown-sub); /* 活性ドット */
  }
}
@media (max-width: 768px) {
  .about-strengths__inner {
    padding: var(--space-24) var(--space-16);
    gap: var(--space-24);
  }

  /* SP フォントは saiyo-voice カルーセルに合わせる（タイトル＝name h5・引用本文＝comment xs）。 */
  .about-strengths__title { font-size: var(--font-size-h5); }
  .about-strengths__quote p { font-size: var(--font-size-xs); }
}

/* ================= [10] divider-band-4 ================= */
.about-divider-band-4 {
	display: block;
	width: 100%;
	background-color: var(--color-white);
	line-height: 0;
}

.about-divider-band-4__band {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* ================= [11] jirei-uketsuke ================= */
/* ===== About 実例紹介（Figma 76:17900）===================================== */
.about-jirei-uketsuke {
  padding-block-end: var(--space-80);
  /* Figma: 背景色_オフホワイト（紙テクスチャを 346.8×327.8px タイルで直接フィル） */
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}
.about-jirei-uketsuke__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.about-jirei-uketsuke .c-heading { align-items: center; text-align: center; }

.about-jirei-uketsuke__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

/* テスティモニアルカード */
.about-jirei-uketsuke__card {
  display: flex;
  align-items: center;
  gap: var(--space-56);
  padding: var(--space-32);
  /* 手描き（クレヨン）の枠を border-image で適用（about/about-jirei-uketsuke-card-border.webp）。 */
  border-image: url("../../images/about/about-jirei-uketsuke-card-border.webp") 20 / 10px round;
  border-radius: var(--radius-md);                        /* 16px */
  /* Figma: 背景色_ライトイエロー（紙テクスチャを 346.8×327.8px タイルで直接フィル） */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}

.about-jirei-uketsuke__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  max-width: 560px;
  width: 560px;
  color: var(--color-brown-text);
}
.about-jirei-uketsuke__title {
  margin: 0;
  font-size: var(--font-size-h3-lg);                      /* 21.33px */
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);                   /* 1.6 */
}
.about-jirei-uketsuke__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
}
.about-jirei-uketsuke__name {
  margin: 0;
  font-size: var(--font-size-h3);                         /* 18.29px */
  font-weight: var(--font-weight-extrabold);
  line-height: var(--line-height-base);                   /* 1.6 */
}
.about-jirei-uketsuke__text {
  margin: 0;
  font-size: var(--font-size-body);                       /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);                   /* 1.8 */
}

/* 写真（クレヨン風マスクで角が波打つ透過PNG/WebP） */
.about-jirei-uketsuke__photo {
  flex-shrink: 0;
  width: 360px;
}
.about-jirei-uketsuke__photo img {
  display: block;
  width: 360px;
  height: 255px;
  object-fit: contain;
}

/* 2行目は写真を左に */
.about-jirei-uketsuke__card--reverse .about-jirei-uketsuke__body { margin-left: auto; }

.about-jirei-uketsuke__note {
  margin: 0;
  text-align: right;
  color: var(--color-brown-text);
  font-size: var(--font-size-body);                       /* 16px */
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-body);                   /* 1.8 */
}

/* DOMは写真先頭で統一済み。PC（>900px）の左右はここで制御：
   通常カード＝本文左・写真右（row-reverse）／--reverse＝写真左・本文右（row）。 */
@media (min-width: 901px) {
  .about-jirei-uketsuke__card { flex-direction: row-reverse; justify-content: flex-end; }
  .about-jirei-uketsuke__card--reverse { flex-direction: row; justify-content: flex-start; }
}
@media (max-width: 900px) {
  .about-jirei-uketsuke__inner { padding-inline: var(--space-24); gap: var(--space-32); }
  .about-jirei-uketsuke__card,
  .about-jirei-uketsuke__card--reverse {
    flex-direction: column;
    gap: var(--space-24);
    text-align: center;
  }
  .about-jirei-uketsuke__card--reverse .about-jirei-uketsuke__body { margin-left: 0; }
  .about-jirei-uketsuke__body { width: 100%; max-width: 100%; text-align: left; }
  .about-jirei-uketsuke__photo,
  .about-jirei-uketsuke__photo img { width: 100%; height: auto; aspect-ratio: 360 / 255; }
}
@media (max-width: 768px) {
  .about-jirei-uketsuke {
    padding-top: var(--space-24);
    padding-bottom: 0;
  }
  .about-jirei-uketsuke__inner { padding-inline: var(--space-16); gap: var(--space-24); }
  .about-jirei-uketsuke__list {
    gap: var(--space-16);
  }

  /* SP は .about-hajime__card と同じフロート型レイアウト：写真を左に float、
     見出し・本文が右〜下へ回り込む。フォントも about-hajime に合わせる（見出し h5 / 本文 h6）。 */
  .about-jirei-uketsuke__card,
  .about-jirei-uketsuke__card--reverse {
    display: block;          /* flex を解除＝写真を float し本文を回り込ませる */
    padding: var(--space-12);
    text-align: left;
  }
  .about-jirei-uketsuke__photo {
    float: left;
    width: 33%;
    margin: 0 var(--space-12) var(--space-8) 0;
  }
  .about-jirei-uketsuke__photo img {
    width: 100%;
    height: auto;
    aspect-ratio: 360 / 255;
  }
  .about-jirei-uketsuke__body {
    display: block;          /* float を回り込ませるため block に */
    width: auto;
    max-width: none;
    text-align: left;
  }
  /* 見出し＝about-hajime__card-title と同サイズ感（h5）。 */
  .about-jirei-uketsuke__title {
    font-size: var(--font-size-h5);
    margin: 0 0 var(--space-8);
  }
  /* quote を block にして本文の clear を効かせる。 */
  .about-jirei-uketsuke__quote {
    display: block;
  }
  .about-jirei-uketsuke__name {
    font-size: var(--font-size-h6);
    margin: 0 0 var(--space-4);
  }
  /* 本文＝about-hajime__card-text と同サイズ感（h6）。写真の下へ回り込む（clear）。 */
  .about-jirei-uketsuke__text {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-base);
    clear: both;
  }
  .about-jirei-uketsuke__note {
    font-size: var(--font-size-3xs);
    text-align: center;
  }
}

/* ================= [12] divider-band-5 ================= */
/* ===== 装飾バンド5（Figma Frame 293 / 76:17925）======================
   高さ160pxの白い波形バンド。境界付近に親子＋新芽イラストが浮かぶ。 */
.about-divider-band-5 {
  position: relative;
  width: 100%;
  height: 160px;
  pointer-events: none;
  overflow: visible;
  /* 背景：about-jirei-uketsuke と同じオフホワイトのクレヨン紙テクスチャ（346.8×327.8px タイル・top-left）。 */
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}
/* 白い波形バンド（Rectangle 39）下部全幅 */
.about-divider-band-5__band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}
/* 親子＋新芽の色鉛筆イラスト（Frame 1807）。
   Figma: 1440px幅フレーム内 left=564(=39.17%) / 表示幅332px(=23.06%)。
   バンド上端の境界をまたいで上にはみ出す。 */
.about-divider-band-5__illust {
  position: absolute;
  left: 39.17%;
  bottom: 12px;
  width: 23.06%;
  max-width: 332px;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .about-divider-band-5 {
    height: 110px;
  }
  .about-divider-band-5__illust {
    left: 34%;
    width: 32%;
    bottom: 8px;
  }
}

/* ================= [13] shien ================= */
/* ===== About: 支援内容 (order 13) ===== */
.about-shien {
  background: var(--color-white);
  padding-bottom: var(--space-80);
}
.about-shien__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  width: 100%;
}
.about-shien__heading {
  display: flex;
  justify-content: center;
}
.about-shien__title {
  margin: 0;
  color: var(--color-brown-text);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  text-align: center;
}
/* カードグリッドは共通コンポーネント components/support.css（.c-support）へ移設。
   トップ（支援内容）をマスターとして front-page / about で共用。 */
@media (max-width: 900px) {
  .about-shien__inner { padding-inline: var(--space-40); }
}
@media (max-width: 600px) {
  .about-shien__inner { padding-inline: var(--space-16); gap: var(--space-24); }
}
@media (max-width: 768px) {
  .about-shien {
    padding-bottom: var(--space-40);
  }
  /* 見出しを SP 縮小（他セクションと同じ h3-lg）。 */
  .about-shien__title { font-size: var(--font-size-h3-lg); }
  /* 支援内容カードは トップ S08 と同じ SP レイアウト：2カラム維持＋文字小型化
     （component 既定の 600px→1カラムを上書き）。値は top.css と同一。 */
  .about .c-support { grid-template-columns: repeat(2, 1fr); gap: var(--space-12); }
  .about .c-support__title { font-size: var(--font-size-h5); }
  .about .c-support__text { font-size: var(--font-size-h6); }
}

/* ================= [15] senmon ================= */
/* ===== About: 専門職によるippoの療育（senmon / 76:18057） ===== */
.about-senmon {
	/* 背景：オフホワイトのクレヨン紙テクスチャ（346.8×327.8px タイル・top-left・multiply なし）。 */
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-repeat: repeat;
	background-position: top left;
	background-size: 346.8px 327.8px;
	padding-block: var(--space-40) var(--space-80);
}
.about-senmon__inner {
	box-sizing: content-box;
	max-width: var(--layout-medium);
	margin-inline: auto;
	padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-40);
}

/* リード文 */
.about-senmon__lead {
	width: 100%;
	margin: 0;
	text-align: center;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-medium);
	line-height: 1.8;
}

/* 行（カードの段組み） */
.about-senmon__rows {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}
.about-senmon__row {
	display: flex;
	align-items: center;
}
/* カードを左右にずらす千鳥配置（Figma: pl-80 / pr-80） */
.about-senmon__row--right { padding-left: var(--space-80); }
.about-senmon__row--left  { padding-right: var(--space-80); }

/* カード本体 */
.about-senmon__card {
	flex: 1 0 0;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: var(--space-56);
	padding: var(--space-24) var(--space-32);
	background: var(--color-white);
	/* 手描き（クレヨン）の枠を border-image で適用（about/about-senmon-card-border.webp）。 */
	border-image: url("../../images/about/about-senmon-card-border.webp") 20 / 10px round;
	border-radius: var(--radius-md);
}

/* 写真ブロブ（260×420表示・装飾は外側へオーバーフロー） */
.about-senmon__photo {
	position: relative;
	flex-shrink: 0;
	width: 420px;
	height: 260px;
	overflow: visible;
}
.about-senmon__photo img {
	position: absolute;
	top: 0;
	left: 0;
	width: 420px;
	height: auto;
	max-width: none;
}
/* 写真が右側に来る行は装飾が右端から飛び出すため右寄せ基準に */
.about-senmon__photo--right img {
	left: auto;
	right: 0;
}

/* 積み木のナンバリングバッジ（写真の下角に重ねる／svc-features__badge と同方式） */
.about-senmon__photo .about-senmon__badge {
	position: absolute;
	/* .about-senmon__photo img の top:0 を打ち消し、bottom 基準にする */
	top: auto;
	bottom: -18px;
	left: -16px;
	width: 126px;
	height: auto;
	max-width: none;
	pointer-events: none;
	z-index: 1;
}
.about-senmon__photo .about-senmon__badge--right {
	left: auto;
	right: -16px;
}
/* 3つ目（保育士）のバッジのみ実寸が一回り大きい */
.about-senmon__row:nth-of-type(3) .about-senmon__badge--left {
	width: 128px;
}

/* テキスト側 */
.about-senmon__body {
	flex: 1 0 0;
	min-width: 0;
	max-width: 560px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
	padding-block: var(--space-8);
}
.about-senmon__title {
	width: 100%;
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-h2-lead); /* 25.6px */
	font-weight: var(--font-weight-extrabold);
	line-height: 1.6;
	letter-spacing: 0.032em; /* 0.512px @16px相当（2%） */
}
.about-senmon__desc {
	width: 100%;
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	line-height: 1.8;
}

/* 「このようなお子さまに」ボックス（紙テクスチャ背景） */
.about-senmon__note {
	width: 100%;
	box-sizing: border-box;
	padding: var(--space-8);
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-light-yellow);
	background-image: url( "../images/about/strengths-card-texture.webp" );
	background-repeat: repeat;
	background-position: top left;
	background-size: 347px auto;
}
.about-senmon__note p {
	margin: 0;
	color: var(--color-brown-text);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-bold);
	line-height: 1.8;
}

/* レスポンシブ */
@media (max-width: 900px) {
	.about-senmon__row--right,
	.about-senmon__row--left { padding-inline: 0; }
	.about-senmon__card {
		flex-direction: column;
		gap: var(--space-24);
		padding: var(--space-24);
	}
	/* 写真が右に来る行はモバイルでは写真を上に */
	.about-senmon__row--left .about-senmon__card { flex-direction: column-reverse; }
	.about-senmon__photo {
		width: 75%;
		max-width: 420px;
		height: auto;
		aspect-ratio: 420 / 260;
		margin-inline: auto;
	}
	.about-senmon__photo img {
		position: static;
		width: 100%;
		height: auto;
	}
	.about-senmon__body { max-width: none; }
}
@media (max-width: 768px) {
  .about-senmon {
    padding-top: 0;
    padding-bottom: var(--space-40);
  }
  .about-senmon__inner {
    gap: var(--space-16);
  }
  .about-senmon__rows {
    gap: var(--space-24);
  }
  .about-senmon__photo .about-senmon__badge,
  .about-senmon__row:nth-of-type(3) .about-senmon__badge--left {
    width: 80px;
  }
	/* SP フォント縮小（リード・本文 h5 / カード見出し h3）。 */
	.about-senmon__lead { font-size: var(--font-size-h6); }
	.about-senmon__title { font-size: var(--font-size-h5); }
	.about-senmon__desc { font-size: var(--font-size-h6); }
	.about-senmon__note p { font-size: var(--font-size-h6); }

  .about-senmon__card {
    gap: var(--space-16);
    padding: var(--space-16) var(--space-16);
  }
  .about-senmon__body {
    padding-top: 0;
    gap: var(--space-8);
  }
}

/* ================= [16] divider-band-7 ================= */
/* About > 装飾バンド7（divider-band-7） */
.about-divider-band-7 {
	position: relative;
	width: 100%;
	/* 背景：他セクションと同じオフホワイトのクレヨン紙テクスチャ（346.8×327.8px タイル・top-left・multiply なし）。 */
	background-color: var(--color-white);
}

.about-divider-band-7__inner {
	position: relative;
	width: 100%;
	/* Figma: セクション全高 225px / 帯 194px。max 1440px 基準で比率維持 */
	height: clamp(160px, 15.625vw, 225px);
}

/* テクスチャ付きの帯（上端が波打つシェイプ）。下端揃えで全幅配置 */
.about-divider-band-7__band {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: auto;
	display: block;
	/* Figma: 帯は w1440 / h194 = 全幅 */
}

/* 中央のパラシュート遊びイラスト。帯の波上端に重ねて配置 */
.about-divider-band-7__illust {
	position: absolute;
	left: 50%;
	top: -12px; /* Figma: group top 18.92px / 225px */
	transform: translateX(-50%);
	/* Figma: 表示幅 約221px（trim後 883/4） */
	width: clamp(150px, 15.35vw, 221px);
	height: auto;
	display: block;
}

/* ================= [17] community ================= */
.about-community {
  background-color: var(--color-bg-offwhite);
  background-image: url("../../images/common/tex-offwhite.webp");
  background-position: top left;
  background-size: 346.8px 327.8px;
  background-repeat: repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
  padding-block: 0 var(--space-80);
}

.about-community__head,
.about-community__container {
  box-sizing: content-box; /* 1200px はコンテンツ幅、paddingは外側に加算 */
  max-width: var(--layout-medium);
  padding-inline: clamp(var(--space-16), 5vw, var(--space-80));
}

.about-community__title {
  margin: 0;
  color: var(--color-brown-text);
  font-size: var(--font-size-h2); /* 32px */
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  text-align: center;
}

.about-community__title-line {
  display: block;
}

.about-community__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-40);
}

.about-community__body {
  flex: 1 0 0;
  min-width: 0;
}

.about-community__text {
  margin: 0;
  color: var(--color-brown-text);
  font-size: var(--font-size-body); /* 16px */
  font-weight: var(--font-weight-bold);
  line-height: 1.8;
}

.about-community__text + .about-community__text {
  margin-top: 1.8em; /* Figma の空行ぶんの段落間 */
}

.about-community__media {
  flex: 0 0 auto;
  max-width: 492px;
}

.about-community__illust {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 492 / 369;
  object-fit: contain;
}

@media (max-width: 1200px) {
  .about-community__media {
    width: 40%;
  }
}

@media (max-width: 900px) {
  .about-community__head,
  .about-community__container {
    /* content-box のままだと width:100% + padding が画面幅を超える。
       SP では border-box にして padding を内側に収める。 */
    box-sizing: border-box;
    padding-inline: var(--space-32);
  }
  .about-community__row {
    flex-direction: column;
    gap: var(--space-24);
  }
  .about-community__media {
    width: 100%;
    max-width: 492px;
  }
}

@media (max-width: 768px) {
  .about-divider-band-7__inner {
    height: 100px;
  }
  .about-divider-band-7__illust {
    top: 16px;
    width: 100px;
  }
  .about-community {
    gap: var(--space-16);
    padding-bottom: var(--space-40)
  }
  .about-community__head,
  .about-community__container {
    padding-inline: var(--space-16);
  }

  /* 見出し h3-lg・本文 h5 に SP 縮小（他セクションと統一）。 */
  .about-community__title { font-size: var(--font-size-h3); }
  .about-community__text { font-size: var(--font-size-h6); }
  .about-community__text + .about-community__text {
    margin-top: 1em;
  }
  .about-community__illust {
    width: 60%;
    margin-inline: auto;

  }
}

/* ================= [18] divider-band-8 ================= */
.about-divider-band-8 {
	width: 100%;
	background-color: var(--color-bg-offwhite);
	background-image: url("../../images/common/tex-offwhite.webp");
	background-position: top left;
	background-size: 346.8px 327.8px;
	background-repeat: repeat;
	line-height: 0;
}

.about-divider-band-8__band {
	display: block;
	width: 100%;
	height: auto;
	/* Native aspect ratio 1440 x 95 preserved (no distortion). */
	aspect-ratio: 1440 / 95;
	object-fit: cover;
}

/* ================= [19] message ================= */
/* =====================================================================
   About: 代表メッセージ（Figma 76:18179）
   tokens / base / components（c-heading）に依存。
   ===================================================================== */
.about-message {
  /* Figma 76:18179: 背景色_ライトイエロー（紙テクスチャを 346.8×327.8px タイルで直接フィル） */
  background-color: var(--color-bg-light-yellow);
  background-image: url("../../images/common/tex-yellow.webp");
  background-repeat: repeat;
  background-position: top left;
  background-size: 346.8px 327.8px;
}
.about-message__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--space-80) clamp(var(--space-16), 5vw, var(--space-80)) 160px; /* Figma pt80 / px80 / pb160 */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-56);
}

/* ===== 本文＋写真（Figma 76:18183）=====
   Figma: 写真は絶対配置（left 660 / top 237.85 / 380×380）。
   本文＋署名は全幅を占め、署名は全幅の右端に揃う。 */
.about-message__body {
  position: relative;
  width: 100%;
}

/* 手紙（本文＋署名）。全幅。Figma: 内部 gap 80 */
.about-message__letter {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-80);
  color: var(--color-brown-text);
}
.about-message__text {
  width: 100%;
  font-size: var(--font-size-h3);          /* 18.286px */
  font-weight: var(--font-weight-semibold); /* 600 */
  line-height: 1.8;
}
/* 括弧で括った語句は SP で行末に来たとき語中で割らず、空白位置で改行させる
   （Figma の折り返しに合わせる。語句長は1行幅未満なのではみ出さない）。 */
.about-message__nb { white-space: nowrap; }
/* 段落間は Figma の「空行2行ぶん」の余白（行ベースのため em で指定）。
   Figma 76:18185: 本文ブロック全高 594px（実テキスト11行＋空行7行）。 */
.about-message__text p {
  margin: 0 0 3.6em; /* 空行2行ぶん */
}
.about-message__text p:nth-child(4) {
  margin-bottom: 1.8em; /* 第4段落→ippo段落のみ空行1行 */
}
.about-message__text p:last-child {
  margin-bottom: 0;
}

/* 署名（Figma: 右寄せ・line-height 2.1）*/
.about-message__signature {
  width: 100%;
  text-align: right;
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-semibold);
  line-height: 2.1;
}
.about-message__signature p {
  margin: 0;
}

/* 右：代表写真（ゴールデンレシオ blob クリップ・380×380 @2x）。
   Figma 76:18189: 絶対配置で本文右側に浮かせる（top 237.85 / right 0）。 */
.about-message__photo {
  position: absolute;
  top: 237.85px;
  right: 0;
  width: 380px;
  height: 380px;
}
.about-message__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* blob は webp 内でベイク済み・正方形なので歪まない */
}


@media (max-width: 1100px) {

  .about-message__photo {
    position: static;
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
    max-width: 100%;
    width: 280px;
    height: auto;
  }
  .about-message__photo img {
    height: auto;
  }
}

/* ===== レスポンシブ（Figma SP 76:18345）=====
   写真は letter 内に in-flow 化済み。本文＝左揃え、写真＝右寄せ（本文と署名の間）、署名＝右寄せ。 */
@media (max-width: 900px) {
  .about-message__inner {
    padding: var(--space-56) var(--space-24) var(--space-80);
    gap: var(--space-40);
  }
  .about-message__body {
    /* 写真の絶対配置基準を解除（写真は letter 内で in-flow）。 */
    position: static;
  }
  .about-message__letter {
    gap: var(--space-40);
  }
  /* 写真：絶対配置を解除し、本文と署名の間に右寄せ（flex列内は margin-left:auto で確実に右へ）。 */
}
@media (max-width: 768px) {
  .about-message__inner { padding: var(--space-24) var(--space-16); gap: var(--space-24); }
  .about-message__letter {
    gap: var(--space-24);
  }
  /* 本文：左揃え・h5・行間1.6（text-align は既定の左揃え）。改行は <br>＋語句 nowrap で踏襲。 */
  .about-message__text { font-size: var(--font-size-h5); line-height: 1.6; }
  .about-message__text p { margin-bottom: 3.2em; }              /* 空行2行ぶん（1.6×2） */
  .about-message__text p:nth-child(4) { margin-bottom: 1.6em; } /* 空行1行ぶん */
  /* 写真：右寄せ・幅は 182/375 の比率（375px画面で182px）。 */
  .about-message__photo { width: 48.53vw; }
  /* 署名：右寄せ・h5。 */
  .about-message__signature { font-size: var(--font-size-h5); line-height: 1.6; }
}

/* ================= [20] divider-band-9 ================= */
.about-divider-band-9 {
	width: 100%;
}

.about-divider-band-9__band {
	width: 100%;
	height: 78px;
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

@media (max-width: 768px) {
	.about-divider-band-9__band {
		height: 48px;
	}
}

/* ================= [21] cta ================= */
/* 見学・体験CTA（.about-cta 系）は components/cta-visit.css の .c-cta-visit へ移管。 */