/* ============================================================
 * text-flow.css ─ 固定ページ・一覧ページの段落幅ポリシー
 *
 * ページ別CSSの後に読み込み、p / lead / header系の過剰な max-width を解除する。
 * 読み物本文の行長制限は single-post.css 側で個別に管理する。
 * ============================================================ */

:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) p {
	max-width: none;
	text-wrap: normal;
}

:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) p[class*="__lead"],
:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) p[class*="-lead"] {
	max-width: none;
	text-wrap: normal;
}

:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) :is(
	[class*="__header"]:not(.container):not([class*="__header-"]),
	[class*="__body"]:not(.container):not([class*="__body-"]),
	[class*="__copy"]:not(.container):not([class*="__copy-"]),
	[class*="__text"]:not(.container):not([class*="__text-"]),
	[class*="__intro"]:not(.container):not([class*="__intro-"])
) {
	max-width: none;
}

:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) .container {
	max-width: var(--container-default);
}

:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) .container--wide {
	max-width: var(--container-wide);
}

:is(body.home, body.page, body.archive, body.search, body.error404, body.single-cpt_lp) .container--narrow {
	max-width: var(--container-narrow);
}

/* SP/タブレット最終ガード：
   ページ別CSSの小さなラベル類を、タッチ端末で読める 14px 以上へ寄せる。 */
@media (max-width: 1023px) {
	:root {
		--fs-xs: 0.875rem;
	}

	:is(
		.case-card__metric-label,
		.contact-form__required,
		.contact-form__optional,
		.column-card__category,
		.ailab-card__video-badge,
		.ailab-card__category-pill,
		.shelf-card__video-badge,
		.shelf-card__category-pill,
		.search-tabs__count,
		.search-result__type,
		.contact-form__submit-note code,
		.contact-thanks-next__card-meta
	) {
		font-size: 0.875rem;
		line-height: 1.35;
	}

	.case-card__metric-label {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}


/* ============================================================
 * 全ページ共通：SP / タブレットの体裁統一レイヤー
 *
 * 目的（2026-05-28 でぐ指示）：
 *  - ページごとにバラついていた SP / タブレットの
 *    トラストバー余白・フォント・寄せを統一する
 *  - セクション見出し（h2 / h3）のサイズ・寄せを統一する
 *  - セクション縦余白を SP / タブレットで揃える
 *  - 句点孤立防止の nowrap は維持しつつ、fontを下げてはみ出しを避ける
 *
 * 配置：
 *  - 本ファイル（text-flow.css）は CSS 読み込みチェーン最後段。
 *    page-specific CSS や components.css より後に評価されるため、
 *    ページごとの個別 SP 規定を後勝ちで上書きできる。
 *
 * 例外：
 *  - .hero--implementation-map .hero__title（トップKV）はでぐ確定値のため触らない
 *  - 他ページの *-hero__title は既存 SP 規定（clamp(1.875rem, 8.5vw, 2.5rem)）を維持
 * ============================================================ */

/* ─── Trust Bar：SP / タブレット統一 ─────────────
   各ページ（home / about / works / contact / services / LP×6）で
   ローカル定義されている .trust-bar を、SP・タブレットで同じ仕様に揃える。
   余白：SP 12px / TB 16px、内側 gap：8px、フォント：xs(SP)/sm(TB)、中央寄せ。
*/
@media (max-width: 767px) {
	.trust-bar {
		padding-block: var(--space-3) !important;          /* 12px */
	}

	.trust-bar__inner {
		flex-direction: column !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: center;
		gap: var(--space-2) !important;                      /* 8px */
		text-align: center;
	}

	.trust-bar__label {
		font-size: var(--fs-xs);                              /* 12→14px（text-flowで14pxへ昇格済み） */
		text-align: center;
	}

	.trust-bar__metrics {
		flex-direction: column !important;
		flex-wrap: wrap;
		align-items: center !important;
		justify-content: center;
		gap: var(--space-1) var(--space-2) !important;       /* 4px / 8px */
		font-size: var(--fs-xs);                              /* 14px */
		line-height: 1.55;
		text-align: center;
	}

	.trust-bar__divider {
		display: none !important;                             /* 縦積み時はパイプを消す */
	}

	.trust-bar__partners {
		font-size: var(--fs-xs);
		text-align: center;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.trust-bar {
		padding-block: var(--space-4);                        /* 16px */
	}

	.trust-bar__inner {
		gap: var(--space-3);
	}

	.trust-bar__metrics {
		gap: var(--space-2) var(--space-4);
		font-size: var(--fs-sm);                              /* 14px */
	}
}


/* ─── セクション見出し（h2）：SP / タブレット統一 ─────────────
   ページ別 CSS で個別に SP サイズが指定されているが、26〜34px のレンジで
   バラついていたため、24〜32px のレンジに統一する。
   *-hero__title（h1）は除外。各ヒーローは既存 SP 規定を維持。 */

/* 対象セレクタ：固定ページ / LP / ラボ系の主要セクションタイトル */
@media (max-width: 767px) {
	:is(
		.bento__title,
		.strengths__title,
		.case-study__title,
		.ai-lab__title,
		.purpose-router__title,
		.news-column__title,
		.about-manifesto__title,
		.about-message__title,
		.about-info__title,
		.about-business__title,
		.about-clients__title,
		.about-access__title,
		.about-vision__title,
		.services-bento__title,
		.services-detail__title,
		.services-strengths__title,
		.services-faq__title,
		.works-confidentiality__title,
		.works-summary__title,
		.works-challenges__title,
		.works-coverage__title,
		.works-process__title,
		.works-final__title,
		.works-impact__title,
		.contact-form-section__title,
		.contact-faq__title,
		.contact-tel__title,
		.contact-access__title,
		.contact-privacy__title,
		.contact-thanks-hero__title,
		.contact-thanks-info__title,
		.contact-thanks-next__title,
		.privacy-section__title,
		.lp-geo-shift__title,
		.lp-geo-vs__title,
		.lp-geo-service__title,
		.lp-geo-consult__title,
		.lp-geo-flow__title,
		.lp-geo-faq__title,
		.lp-geo-form-section__title,
		.lp-geo-privacy__title,
		.lp-geo-promise__title,
		.lp-geo-thanks-hero__title,
		.lp-geo-thanks-info__title,
		.lp-ig-shift__title,
		.lp-ig-vs__title,
		.lp-ig-service__title,
		.lp-ig-consult__title,
		.lp-ig-flow__title,
		.lp-ig-faq__title,
		.lp-ig-form-section__title,
		.lp-ig-privacy__title,
		.lp-ig-promise__title,
		.lp-ig-thanks-hero__title,
		.lp-ig-thanks-info__title,
		.lp-meo-shift__title,
		.lp-meo-vs__title,
		.lp-meo-service__title,
		.lp-meo-consult__title,
		.lp-meo-flow__title,
		.lp-meo-faq__title,
		.lp-meo-form-section__title,
		.lp-meo-privacy__title,
		.lp-meo-promise__title,
		.lp-meo-thanks-hero__title,
		.lp-meo-thanks-info__title,
		.lp-web-shift__title,
		.lp-web-vs__title,
		.lp-web-issue__title,
		.lp-web-service__title,
		.lp-web-consult__title,
		.lp-web-flow__title,
		.lp-web-faq__title,
		.lp-web-form-section__title,
		.lp-web-privacy__title,
		.lp-web-promise__title,
		.lp-web-thanks-hero__title,
		.lp-web-thanks-info__title,
		.lp-mc-shift__title,
		.lp-mc-vs__title,
		.lp-mc-service__title,
		.lp-mc-consult__title,
		.lp-mc-flow__title,
		.lp-mc-faq__title,
		.lp-mc-form-section__title,
		.lp-mc-privacy__title,
		.lp-mc-promise__title,
		.lp-mc-thanks-hero__title,
		.lp-mc-thanks-info__title,
		.ailit-section__title,
		.shelf-bento__title,
		.shelf-concept__title,
		.shelf-list__title
	) {
		font-size: clamp(1.5rem, 6.5vw, 2rem);       /* 24〜32px：統一 */
		line-height: 1.3;
		letter-spacing: -0.005em;
	}

	/* h3 / 小見出し相当：SP 統一（18〜22px） */
	:is(
		.strength-card__title,
		.services-strength__title,
		.about-business__card-title-ja,
		.about-clients__category-title,
		.bento-cell__title,
		.purpose-card__title,
		.owned-service-banner__title,
		.contact-thanks-next__card-title,
		.shelf-card__title,
		.ailab-card__title,
		.column-card__title,
		.column-item__title,
		.info-list__title,
		.news-list__title
	) {
		font-size: clamp(1.125rem, 4.5vw, 1.375rem); /* 18〜22px：統一 */
		line-height: 1.4;
	}

	/* リード文：SP 統一（16px / line-height 1.7）
	   既存に !important がない限り後勝ちで効く。 */
	:is(
		.about-manifesto__lead,
		.about-message__lead,
		.about-info__lead,
		.about-business__lead,
		.about-clients__lead,
		.about-access__lead,
		.about-vision__lead,
		.services-bento__lead,
		.services-detail__lead,
		.services-strengths__lead,
		.services-faq__lead,
		.works-confidentiality__lead,
		.works-summary__lead,
		.works-challenges__lead,
		.works-coverage__lead,
		.works-process__lead,
		.contact-form-section__lead,
		.contact-faq__lead,
		.purpose-router__lead,
		.lp-geo-shift__lead,
		.lp-geo-vs__lead,
		.lp-geo-service__lead,
		.lp-geo-faq__lead,
		.lp-ig-shift__lead,
		.lp-ig-vs__lead,
		.lp-ig-service__lead,
		.lp-ig-faq__lead,
		.lp-meo-shift__lead,
		.lp-meo-vs__lead,
		.lp-meo-service__lead,
		.lp-meo-faq__lead,
		.lp-web-shift__lead,
		.lp-web-vs__lead,
		.lp-web-issue__lead,
		.lp-web-service__lead,
		.lp-web-faq__lead,
		.lp-mc-shift__lead,
		.lp-mc-vs__lead,
		.lp-mc-service__lead,
		.lp-mc-faq__lead
	) {
		font-size: var(--fs-base);                  /* 16px */
		line-height: 1.7;
	}
}

/* タブレット（768〜1023px）：SP より一段大きく、PC より小さい中間サイズ */
@media (min-width: 768px) and (max-width: 1023px) {
	:is(
		.bento__title,
		.strengths__title,
		.case-study__title,
		.ai-lab__title,
		.purpose-router__title,
		.news-column__title,
		.about-manifesto__title,
		.about-message__title,
		.about-info__title,
		.about-business__title,
		.about-clients__title,
		.about-access__title,
		.about-vision__title,
		.services-bento__title,
		.services-detail__title,
		.services-strengths__title,
		.services-faq__title,
		.works-confidentiality__title,
		.works-summary__title,
		.works-challenges__title,
		.works-coverage__title,
		.works-process__title,
		.works-final__title,
		.works-impact__title,
		.contact-form-section__title,
		.contact-faq__title,
		.contact-tel__title,
		.contact-access__title,
		.contact-privacy__title,
		.privacy-section__title,
		.lp-geo-shift__title,
		.lp-geo-vs__title,
		.lp-geo-service__title,
		.lp-geo-consult__title,
		.lp-geo-flow__title,
		.lp-geo-faq__title,
		.lp-geo-form-section__title,
		.lp-geo-privacy__title,
		.lp-geo-promise__title,
		.lp-ig-shift__title,
		.lp-ig-vs__title,
		.lp-ig-service__title,
		.lp-ig-consult__title,
		.lp-ig-flow__title,
		.lp-ig-faq__title,
		.lp-ig-form-section__title,
		.lp-ig-privacy__title,
		.lp-ig-promise__title,
		.lp-meo-shift__title,
		.lp-meo-vs__title,
		.lp-meo-service__title,
		.lp-meo-consult__title,
		.lp-meo-flow__title,
		.lp-meo-faq__title,
		.lp-meo-form-section__title,
		.lp-meo-privacy__title,
		.lp-meo-promise__title,
		.lp-web-shift__title,
		.lp-web-vs__title,
		.lp-web-issue__title,
		.lp-web-service__title,
		.lp-web-consult__title,
		.lp-web-flow__title,
		.lp-web-faq__title,
		.lp-web-form-section__title,
		.lp-web-privacy__title,
		.lp-web-promise__title,
		.lp-mc-shift__title,
		.lp-mc-vs__title,
		.lp-mc-service__title,
		.lp-mc-consult__title,
		.lp-mc-flow__title,
		.lp-mc-faq__title,
		.lp-mc-form-section__title,
		.lp-mc-privacy__title,
		.lp-mc-promise__title,
		.shelf-bento__title,
		.shelf-concept__title,
		.shelf-list__title
	) {
		font-size: clamp(1.875rem, 4.8vw, 2.5rem);   /* 30〜40px */
		line-height: 1.25;
	}
}


/* ─── nowrap で SP はみ出しを起こさないための最終ガード ─────────────
   句点孤立防止やPC版の見え方のために nowrap を使う箇所は残す。
   ただしSPでは、見出し行・パンくず・ボタン・ピル・タブ・ラベル類を
   画面幅の内側で自然に折り返せるようにする。 */
@media (max-width: 767px) {
	:is(
		.btn,
		.breadcrumb__list > *,
		.breadcrumb__list a,
		.works-nav__link,
		.search-tabs__item,
		.column-archive__category-pill,
		.single-ailab__breadcrumb > *,
		[class*="__title"],
		[class*="__title-line"],
		[class*="__lead-line"],
		[class*="__copy-line"],
		[class*="__audience"],
		[class*="__cta"],
		[class*="__eyebrow"],
		[class*="__overline"],
		[class*="__badge"],
		[class*="__pill"],
		[class*="__tag"],
		[class*="__label"],
		[class*="__meta"],
		[class*="__category"],
		[class*="__item"],
		[class*="__tab"]
	) {
		max-width: 100%;
		min-width: 0;
		white-space: normal !important;
		overflow-wrap: anywhere;
		word-break: normal !important;
	}

	.breadcrumb__sep {
		white-space: nowrap !important;
		overflow-wrap: normal;
	}
}


/* ─── セクション縦余白：SP / タブレット統一 ─────────────
   PC（≥1024px）の余白は触らず、SP は space-7（48px）、TB は space-8（64px）に揃える。
   ページ別 CSS で .section が空いている主要セクションを対象にする。 */
@media (max-width: 767px) {
	:is(
		.bento,
		.strengths,
		.case-study,
		.ai-lab,
		.news-column,
		.purpose-router,
		.owned-service-banner-section,
		.about-manifesto,
		.about-message,
		.about-info,
		.about-business,
		.about-clients,
		.about-access,
		.about-vision,
		.services-bento,
		.services-detail,
		.services-strengths,
		.services-faq,
		.works-confidentiality,
		.works-summary,
		.works-challenges,
		.works-coverage,
		.works-process,
		.works-final,
		.works-impact,
		.contact-form-section,
		.contact-faq,
		.contact-tel,
		.contact-access,
		.contact-privacy,
		.privacy-section,
		.lp-geo-shift,
		.lp-geo-vs,
		.lp-geo-service,
		.lp-geo-consult,
		.lp-geo-flow,
		.lp-geo-faq,
		.lp-geo-form-section,
		.lp-geo-privacy,
		.lp-geo-promise,
		.lp-ig-shift,
		.lp-ig-vs,
		.lp-ig-service,
		.lp-ig-consult,
		.lp-ig-flow,
		.lp-ig-faq,
		.lp-ig-form-section,
		.lp-ig-privacy,
		.lp-ig-promise,
		.lp-meo-shift,
		.lp-meo-vs,
		.lp-meo-service,
		.lp-meo-consult,
		.lp-meo-flow,
		.lp-meo-faq,
		.lp-meo-form-section,
		.lp-meo-privacy,
		.lp-meo-promise,
		.lp-web-shift,
		.lp-web-vs,
		.lp-web-issue,
		.lp-web-service,
		.lp-web-consult,
		.lp-web-flow,
		.lp-web-faq,
		.lp-web-form-section,
		.lp-web-privacy,
		.lp-web-promise,
		.lp-mc-shift,
		.lp-mc-vs,
		.lp-mc-service,
		.lp-mc-consult,
		.lp-mc-flow,
		.lp-mc-faq,
		.lp-mc-form-section,
		.lp-mc-privacy,
		.lp-mc-promise,
		.ailit-section,
		.shelf-bento,
		.shelf-concept,
		.shelf-list
	) {
		padding-block: var(--space-7);               /* 48px：統一 */
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	:is(
		.bento,
		.strengths,
		.case-study,
		.ai-lab,
		.news-column,
		.purpose-router,
		.owned-service-banner-section,
		.about-manifesto,
		.about-message,
		.about-info,
		.about-business,
		.about-clients,
		.about-access,
		.about-vision,
		.services-bento,
		.services-detail,
		.services-strengths,
		.services-faq,
		.works-confidentiality,
		.works-summary,
		.works-challenges,
		.works-coverage,
		.works-process,
		.works-final,
		.works-impact,
		.contact-form-section,
		.contact-faq,
		.contact-tel,
		.contact-access,
		.contact-privacy,
		.privacy-section,
		.lp-geo-shift,
		.lp-geo-vs,
		.lp-geo-service,
		.lp-geo-consult,
		.lp-geo-flow,
		.lp-geo-faq,
		.lp-geo-form-section,
		.lp-geo-privacy,
		.lp-geo-promise,
		.lp-ig-shift,
		.lp-ig-vs,
		.lp-ig-service,
		.lp-ig-consult,
		.lp-ig-flow,
		.lp-ig-faq,
		.lp-ig-form-section,
		.lp-ig-privacy,
		.lp-ig-promise,
		.lp-meo-shift,
		.lp-meo-vs,
		.lp-meo-service,
		.lp-meo-consult,
		.lp-meo-flow,
		.lp-meo-faq,
		.lp-meo-form-section,
		.lp-meo-privacy,
		.lp-meo-promise,
		.lp-web-shift,
		.lp-web-vs,
		.lp-web-issue,
		.lp-web-service,
		.lp-web-consult,
		.lp-web-flow,
		.lp-web-faq,
		.lp-web-form-section,
		.lp-web-privacy,
		.lp-web-promise,
		.lp-mc-shift,
		.lp-mc-vs,
		.lp-mc-service,
		.lp-mc-consult,
		.lp-mc-flow,
		.lp-mc-faq,
		.lp-mc-form-section,
		.lp-mc-privacy,
		.lp-mc-promise,
		.ailit-section,
		.shelf-bento,
		.shelf-concept,
		.shelf-list
	) {
		padding-block: var(--space-8);               /* 64px：統一 */
	}
}


/* ─── テキストの寄せ：SP 統一 ─────────────
   セクション見出しは原則「左寄せ」。
   中央寄せが必要なのは Trust Bar / Final CTA / Hero(必要に応じて) / Form-section の補助文程度。
   ページ別 CSS で text-align: center が部分指定されているケースはそのまま残し、
   ここでは「左寄せの原則」を SP で再確認するための補助規定だけ置く。
   __header / __title / __lead / __body のラッパーは触らず、誤った中央寄せが
   入っている既知の場所だけを補正する。 */
@media (max-width: 767px) {
	/* 主要セクションの header 直下の見出し・リードは左寄せが原則
	   （Final CTA / Trust Bar など中央寄せが意図された箇所はラップ要素で個別に維持される） */
	:is(
		.about-manifesto__header,
		.about-message__header,
		.about-info__header,
		.about-business__header,
		.about-clients__header,
		.about-access__header,
		.about-vision__header,
		.services-bento__header,
		.services-detail__header,
		.services-strengths__header,
		.services-faq__header,
		.works-confidentiality__header,
		.works-summary__header,
		.works-challenges__header,
		.works-coverage__header,
		.works-process__header,
		.contact-form-section__header,
		.contact-faq__header,
		.privacy-section__header,
		.purpose-router__header
	) {
		text-align: left;
		margin-inline: 0;                              /* services-strengths のような中央寄せの auto をリセット */
		max-width: none;
	}
}

/* タブレットも同じく左寄せに統一 */
@media (min-width: 768px) and (max-width: 1023px) {
	:is(
		.about-manifesto__header,
		.about-message__header,
		.about-info__header,
		.about-business__header,
		.about-clients__header,
		.about-access__header,
		.about-vision__header,
		.services-bento__header,
		.services-detail__header,
		.services-strengths__header,
		.services-faq__header,
		.works-confidentiality__header,
		.works-summary__header,
		.works-challenges__header,
		.works-coverage__header,
		.works-process__header,
		.contact-form-section__header,
		.contact-faq__header,
		.privacy-section__header,
		.purpose-router__header
	) {
		text-align: left;
		margin-inline: 0;
	}
}