@charset "UTF-8";
/**
 * Twenty Twenty Corporate Suite — 共通土台
 *
 * 目次
 *   1. デザイントークン
 *   2. 和文タイポグラフィと見出しの行数制御
 *   3. レイアウト（セクション / コンテナ / グリッド）
 *   4. UI コンポーネント
 *   5. 親テーマ(Twenty Twenty)との調停
 *   6. ユーティリティ
 */

/* =========================================================================
 * 1. デザイントークン
 * ====================================================================== */

:root {
	/* 色（既定値。プリセットCSSが上書きする） */
	--ttcs-bg: #ffffff;
	--ttcs-bg-sub: #f5f4f1;
	--ttcs-bg-tint: #eef2f7;
	--ttcs-ink: #16191d;
	--ttcs-ink-2: #4a5158;
	--ttcs-ink-3: #7b838c;
	--ttcs-line: #e2e2de;
	--ttcs-line-strong: #c9cac5;
	--ttcs-accent: #1b3f78;
	--ttcs-accent-ink: #ffffff;
	--ttcs-accent-soft: #e8eef8;
	--ttcs-invert-bg: #16191d;
	--ttcs-invert-ink: #ffffff;
	--ttcs-invert-ink-2: rgba(255, 255, 255, 0.72);
	--ttcs-invert-line: rgba(255, 255, 255, 0.18);
	--ttcs-focus: #ffb400;

	/* 書体 */
	--ttcs-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, system-ui, -apple-system, sans-serif;
	--ttcs-font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
	--ttcs-font-en: "Inter", "Helvetica Neue", Arial, sans-serif;
	--ttcs-font-hd: var(--ttcs-font-sans);

	/* 文字サイズ（可変） */
	--ttcs-fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.2rem);
	--ttcs-fs-h1: clamp(2rem, 1.25rem + 3.1vw, 3.6rem);
	--ttcs-fs-h2: clamp(1.6rem, 1.16rem + 1.85vw, 2.6rem);
	--ttcs-fs-h3: clamp(1.26rem, 1.1rem + 0.7vw, 1.68rem);
	--ttcs-fs-h4: clamp(1.12rem, 1.04rem + 0.34vw, 1.32rem);
	--ttcs-fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.12rem);
	--ttcs-fs-lead: clamp(1.06rem, 1rem + 0.34vw, 1.28rem);
	--ttcs-fs-small: 0.9rem;
	--ttcs-fs-eyebrow: 0.81rem;

	/* 行間（和文は欧文より広く取る） */
	--ttcs-lh-display: 1.18;
	--ttcs-lh-hd: 1.42;
	--ttcs-lh-body: 1.95;
	--ttcs-lh-tight: 1.6;

	/* 字間 */
	--ttcs-ls-hd: 0.01em;
	--ttcs-ls-body: 0.02em;
	--ttcs-ls-eyebrow: 0.18em;

	/* 余白 */
	--ttcs-sp-1: 0.5rem;
	--ttcs-sp-2: 1rem;
	--ttcs-sp-3: 1.5rem;
	--ttcs-sp-4: 2rem;
	--ttcs-sp-5: 3rem;
	--ttcs-sp-6: 4rem;
	--ttcs-sp-7: 6rem;
	--ttcs-section-y: clamp(4rem, 2rem + 7vw, 8.5rem);
	--ttcs-gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);

	/* 幅 */
	--ttcs-w-content: 1200px;
	--ttcs-w-wide: 1440px;
	--ttcs-w-narrow: 780px;

	/* 形 */
	--ttcs-radius: 4px;
	--ttcs-radius-lg: 8px;
	--ttcs-radius-pill: 999px;
	--ttcs-border: 1px solid var(--ttcs-line);
	--ttcs-shadow-sm: 0 1px 2px rgba(16, 20, 26, 0.04), 0 6px 20px -12px rgba(16, 20, 26, 0.16);
	--ttcs-shadow: 0 2px 6px rgba(16, 20, 26, 0.05), 0 22px 48px -24px rgba(16, 20, 26, 0.22);

	/* モーション */
	--ttcs-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ttcs-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ttcs-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
	--ttcs-dur: 0.6s;
	--ttcs-dur-slow: 1s;
}

/* =========================================================================
 * 2. 和文タイポグラフィと見出しの行数制御
 * ====================================================================== */

/*
 * 親テーマも border-box を指定しているが、
 * 子テーマの部品が親のリセットに依存しないよう明示しておく。
 * （プラグインのCSSが後勝ちで content-box に戻すケースへの保険）
 */
.ttcs,
.ttcs *,
.ttcs *::before,
.ttcs *::after {
	box-sizing: border-box;
}

/*
 * 横スクロールの保険
 *
 * 実サイトではプラグインの埋め込み、貼り付けた表、cols 付きの textarea など、
 * こちらの想定外の要素が1つ混ざるだけでページ全体が横に動くようになる。
 * そうなるとヘッダーもメニューも一緒にずれて「文字が左に切れる」状態になり、
 * 原因の特定も難しい。縦だけスクロールする状態を土台として保証しておく。
 *
 * clip は「はみ出しを切るがスクロール領域は作らない」ので、
 * 追従ヘッダー（position:sticky）やドロワー（position:fixed）に影響しない。
 * 非対応ブラウザ向けに hidden も先に置いている。
 */
body.ttcs {
	overflow-x: hidden;
	overflow-x: clip;
}

.ttcs {
	background-color: var(--ttcs-bg);
	color: var(--ttcs-ink);
	font-family: var(--ttcs-font-sans);
	font-size: var(--ttcs-fs-body);
	line-height: var(--ttcs-lh-body);
	letter-spacing: var(--ttcs-ls-body);
	font-feature-settings: "palt" 1; /* 和文プロポーショナル詰め */
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* 和文の禁則・ぶら下げ・行末処理 */
.ttcs-ja,
.ttcs-ja p,
.ttcs-ja li,
.ttcs-ja dd {
	line-break: strict;
	overflow-wrap: anywhere;
	word-break: normal;
	hanging-punctuation: allow-end;
}

/**
 * 見出し（ttcs_heading() が出力）
 *
 * 和文はブラウザ既定では「どの文字間でも」改行できてしまうため、
 * 放っておくと「ご相談を受/け付けています」のように文節の途中で折れる。
 * text-wrap:balance が行長を揃えようとすると、これがさらに起きやすい。
 *
 * そこで keep-all で既定の改行を止め、
 * PHP 側（ttcs_wbr）が文節境界に入れた <wbr> だけを改行機会にする。
 * ブラウザや lang 属性の状態に依存せず、意図した位置で必ず折り返す。
 *
 * word-break:auto-phrase は lang="ja" が無い環境では既定動作に
 * フォールバックしてしまうため、見出しでは採用していない。
 */
.ttcs-hd {
	font-family: var(--ttcs-font-hd);
	font-weight: 700;
	line-height: var(--ttcs-lh-hd);
	letter-spacing: var(--ttcs-ls-hd);
	margin: 0;
	text-wrap: balance;
	word-break: keep-all;
	line-break: strict;
	font-feature-settings: "palt" 1;
	/* <wbr> だけでは1行に収まらない場合の最終手段 */
	overflow-wrap: break-word;
}

/* 5行以上になりうる長文見出しは balance ではなく pretty（孤立行の回避） */
.ttcs-hd.is-len-xl {
	text-wrap: pretty;
}

/**
 * 文字数に応じた自動サイズ調整
 * ttcs_heading() が文字数を数えて is-len-* を付与する。
 * 実コンテンツの長短でセクションの高さが暴れるのを防ぐ。
 */
.ttcs-sechead__title.is-len-s {
	font-size: calc(var(--ttcs-fs-h2) * 1.06);
}
.ttcs-sechead__title.is-len-m {
	font-size: var(--ttcs-fs-h2);
}
.ttcs-sechead__title.is-len-l {
	font-size: calc(var(--ttcs-fs-h2) * 0.88);
	line-height: 1.5;
}
.ttcs-sechead__title.is-len-xl {
	font-size: calc(var(--ttcs-fs-h2) * 0.76);
	line-height: 1.6;
	letter-spacing: 0;
}

/* 行数クランプ（--ttcs-clamp 行で省略） */
.ttcs-hd.is-clamped,
.ttcs-clamp {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ttcs-clamp, 2);
	line-clamp: var(--ttcs-clamp, 2);
	overflow: hidden;
	text-wrap: initial;
}

/*
 * スマホではクランプを2行ぶん緩める。
 *
 * クランプの目的は「横並びカードの高さを揃えること」で、
 * 1カラムに落ちたスマホではその必要がない。
 * PCと同じ行数で切ると、和文は1行に入る文字数が減るぶん
 * 内容が余計に削られてしまう。
 */
@media (max-width: 700px) {
	.ttcs-hd.is-clamped,
	.ttcs-clamp {
		-webkit-line-clamp: calc(var(--ttcs-clamp, 2) + 2);
		line-clamp: calc(var(--ttcs-clamp, 2) + 2);
	}
}

/* JS による行数フィット（data-fit）。JS が font-size を微調整する */
.ttcs-hd[data-fit] {
	transition: font-size 0.2s var(--ttcs-ease);
}

/* 単位が泣き別れないように */
.ttcs-nowrap {
	white-space: nowrap;
}

.ttcs p {
	margin: 0 0 1.4em;
}
.ttcs p:last-child {
	margin-bottom: 0;
}

.ttcs-lead {
	font-size: var(--ttcs-fs-lead);
	line-height: 2;
	color: var(--ttcs-ink-2);
	max-width: 62ch;
}

/**
 * リード文の改行位置
 *
 * リード文は見出しに次いで目に入る短文なので、
 * 「…月額表記で / す。」のように語の途中で折れると一気に素人っぽくなる。
 * 見出しと同じ方針で、keep-all にして PHP 側（ttcs_wbr）が
 * 文節境界に入れた <wbr> だけを改行機会にする。
 *
 * 対象はいずれも ttcs_text( $text, true ) 経由で <wbr> が入る要素に限る。
 * <wbr> の無い本文にこれを掛けると1行に収まらず溢れるため、広げないこと。
 * pretty は最終行が1〜2文字だけ残るのをさらに抑える。
 */
.ttcs-ja :is(
	.ttcs-lead,
	.ttcs-sechead__lead,
	.ttcs-hero__lead,
	.ttcs-pagehead__lead,
	.ttcs-cta__lead,
	.ttcs-ctaband__lead,
	.ttcs-bizblock__lead,
	.ttcs-postcta__lead,
	.ttcs-recruit__lead
),
:is(
	.ttcs-lead,
	.ttcs-sechead__lead,
	.ttcs-hero__lead,
	.ttcs-pagehead__lead,
	.ttcs-cta__lead,
	.ttcs-ctaband__lead,
	.ttcs-bizblock__lead,
	.ttcs-postcta__lead,
	.ttcs-recruit__lead
) {
	word-break: keep-all;
	line-break: strict;
	/* <wbr> 区切りでも1行に収まらないときの最終手段 */
	overflow-wrap: break-word;
	text-wrap: pretty;
}

.ttcs-eyebrow {
	display: block;
	font-family: var(--ttcs-font-en);
	font-size: var(--ttcs-fs-eyebrow);
	font-weight: 600;
	letter-spacing: var(--ttcs-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ttcs-accent);
	margin: 0 0 var(--ttcs-sp-2);
	line-height: 1.4;
}

.ttcs-eyebrow span {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
}

.ttcs-eyebrow span::before {
	content: "";
	width: 1.8em;
	height: 1px;
	background: currentColor;
	flex: none;
	transform-origin: left center;
}

.is-center .ttcs-eyebrow span::before {
	display: none;
}

/* =========================================================================
 * 3. レイアウト
 * ====================================================================== */

.ttcs-section {
	position: relative;
	padding-block: var(--ttcs-section-y);
	background-color: var(--ttcs-bg);
	color: var(--ttcs-ink);
}

.ttcs-section.is-tone-sub {
	background-color: var(--ttcs-bg-sub);
}
.ttcs-section.is-tone-tint {
	background-color: var(--ttcs-bg-tint);
}
.ttcs-section.is-tone-invert {
	background-color: var(--ttcs-invert-bg);
	color: var(--ttcs-invert-ink);
	--ttcs-ink: var(--ttcs-invert-ink);
	--ttcs-ink-2: var(--ttcs-invert-ink-2);
	--ttcs-ink-3: var(--ttcs-invert-ink-2);
	--ttcs-line: var(--ttcs-invert-line);
	--ttcs-line-strong: rgba(255, 255, 255, 0.34);
	--ttcs-bg: var(--ttcs-invert-bg);
	--ttcs-bg-sub: rgba(255, 255, 255, 0.05);
}
.ttcs-section.is-tone-accent {
	background-color: var(--ttcs-accent);
	color: var(--ttcs-accent-ink);
	--ttcs-ink: var(--ttcs-accent-ink);
	--ttcs-ink-2: rgba(255, 255, 255, 0.8);
	--ttcs-ink-3: rgba(255, 255, 255, 0.66);
	--ttcs-line: rgba(255, 255, 255, 0.22);
	--ttcs-bg: var(--ttcs-accent);
}
.ttcs-section.is-tone-invert .ttcs-eyebrow,
.ttcs-section.is-tone-accent .ttcs-eyebrow {
	color: inherit;
	opacity: 0.72;
}

.ttcs-section.is-flush {
	padding-block: 0;
}
.ttcs-section.is-tight {
	padding-block: calc(var(--ttcs-section-y) * 0.55);
}

.ttcs-container {
	width: 100%;
	max-width: calc(var(--ttcs-w-content) + var(--ttcs-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--ttcs-gutter);
}
.ttcs-container.is-w-wide {
	max-width: calc(var(--ttcs-w-wide) + var(--ttcs-gutter) * 2);
}
.ttcs-container.is-w-narrow {
	max-width: calc(var(--ttcs-w-narrow) + var(--ttcs-gutter) * 2);
}
.ttcs-container.is-w-full {
	max-width: none;
	padding-inline: 0;
}

/* セクション見出しブロック */
.ttcs-sechead {
	margin-bottom: clamp(2rem, 1rem + 3vw, 3.75rem);
	max-width: 46rem;
}
.ttcs-sechead.is-center {
	margin-inline: auto;
	text-align: center;
}
.ttcs-sechead__title {
	font-size: var(--ttcs-fs-h2);
}
.ttcs-sechead__lead {
	margin: var(--ttcs-sp-3) 0 0;
	font-size: var(--ttcs-fs-lead);
	line-height: 2;
	color: var(--ttcs-ink-2);
	max-width: 60ch;
}
.ttcs-sechead.is-center .ttcs-sechead__lead {
	margin-inline: auto;
}

/* グリッド */
.ttcs-grid {
	display: grid;
	gap: clamp(1.25rem, 0.6rem + 2vw, 2.25rem);
}
.ttcs-grid.is-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ttcs-grid.is-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ttcs-grid.is-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ttcs-grid.is-auto {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

@media (max-width: 900px) {
	.ttcs-grid.is-3,
	.ttcs-grid.is-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.ttcs-grid.is-2,
	.ttcs-grid.is-3,
	.ttcs-grid.is-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* 2カラム（見出し固定 + 本文スクロール） */
.ttcs-split {
	display: grid;
	grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.ttcs-split > .ttcs-sechead {
	margin-bottom: 0;
}
@media (min-width: 1025px) {
	.ttcs-split.is-sticky > :first-child {
		position: sticky;
		top: calc(var(--ttcs-sp-6));
	}
}
@media (max-width: 1024px) {
	.ttcs-split {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* =========================================================================
 * 4. UI コンポーネント
 * ====================================================================== */

/* --- ボタン --- */
.ttcs-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	padding: 1.05em 2.1em;
	font-family: var(--ttcs-font-sans);
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--ttcs-radius);
	cursor: pointer;
	overflow: hidden;
	isolation: isolate;
	transition: color 0.35s var(--ttcs-ease), background-color 0.35s var(--ttcs-ease),
		border-color 0.35s var(--ttcs-ease), transform 0.35s var(--ttcs-ease-out),
		box-shadow 0.35s var(--ttcs-ease);
	will-change: transform;
}

.ttcs-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: currentColor;
	opacity: 0;
	transform: translateY(101%);
	transition: transform 0.5s var(--ttcs-ease-out), opacity 0.3s var(--ttcs-ease);
}

.ttcs-btn__label {
	position: relative;
}

.ttcs-btn__icon {
	display: inline-flex;
	width: 1.15em;
	height: 1.15em;
	flex: none;
	transition: transform 0.4s var(--ttcs-ease-out);
}
.ttcs-btn__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ttcs-btn:hover .ttcs-btn__icon {
	transform: translateX(0.25em);
}

.ttcs-btn.is-primary {
	background-color: var(--ttcs-accent);
	color: var(--ttcs-accent-ink);
	border-color: var(--ttcs-accent);
}
.ttcs-btn.is-primary:hover {
	background-color: color-mix(in srgb, var(--ttcs-accent) 84%, #000);
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ttcs-accent) 70%, transparent);
}

.ttcs-btn.is-ghost {
	background-color: transparent;
	color: var(--ttcs-ink);
	border-color: var(--ttcs-line-strong);
}
.ttcs-btn.is-ghost:hover {
	border-color: var(--ttcs-accent);
	color: var(--ttcs-accent);
	transform: translateY(-2px);
}

.ttcs-btn.is-invert {
	background-color: var(--ttcs-invert-ink);
	color: var(--ttcs-invert-bg);
	border-color: var(--ttcs-invert-ink);
}
.ttcs-btn.is-invert:hover {
	opacity: 0.86;
	transform: translateY(-2px);
}

.ttcs-btn.is-text {
	padding: 0.4em 0;
	background: none;
	color: var(--ttcs-accent);
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
}
.ttcs-btn.is-text:hover {
	opacity: 0.7;
}

.ttcs-btn.is-lg {
	padding: 1.25em 2.6em;
	font-size: 1.12rem;
}

.ttcs-btn-wrap {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6em;
}
.ttcs-btn__note {
	font-size: var(--ttcs-fs-small);
	color: var(--ttcs-ink-3);
	line-height: 1.6;
}

.ttcs-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ttcs-sp-2) var(--ttcs-sp-3);
	align-items: center;
}
.is-center .ttcs-actions {
	justify-content: center;
}

/* --- カード --- */
.ttcs-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ttcs-sp-2);
	padding: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
	background-color: var(--ttcs-bg);
	border: var(--ttcs-border);
	border-radius: var(--ttcs-radius);
	transition: transform 0.5s var(--ttcs-ease-out), box-shadow 0.5s var(--ttcs-ease),
		border-color 0.4s var(--ttcs-ease);
	height: 100%;
}
.ttcs-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ttcs-shadow);
	border-color: var(--ttcs-line-strong);
}
.ttcs-card__no {
	font-family: var(--ttcs-font-en);
	font-size: var(--ttcs-fs-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--ttcs-accent);
}
.ttcs-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--ttcs-accent);
}
.ttcs-card__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ttcs-card__title {
	font-size: var(--ttcs-fs-h3);
	font-weight: 700;
	line-height: 1.5;
	margin: 0;
}
.ttcs-card__text {
	color: var(--ttcs-ink-2);
	font-size: 1.01rem;
	line-height: 1.9;
	margin: 0;
	flex: 1;
}
.ttcs-card__foot {
	margin-top: auto;
	padding-top: var(--ttcs-sp-2);
}

/* タグ */
.ttcs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ttcs-tags li {
	font-size: 0.85rem;
	line-height: 1;
	padding: 0.55em 0.85em;
	border: 1px solid var(--ttcs-line);
	border-radius: var(--ttcs-radius-pill);
	color: var(--ttcs-ink-3);
	white-space: nowrap;
}

/* --- 数値 --- */
.ttcs-stat {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}
.ttcs-stat__figure {
	display: flex;
	align-items: baseline;
	gap: 0.12em;
	margin: 0;
	font-family: var(--ttcs-font-en);
	font-weight: 700;
	line-height: 1;
	color: var(--ttcs-accent);
	letter-spacing: -0.02em;
}
.ttcs-stat__value {
	font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4rem);
	font-variant-numeric: tabular-nums;
}
.ttcs-stat__prefix {
	font-size: 1.07rem;
	font-family: var(--ttcs-font-sans);
	align-self: center;
}
.ttcs-stat__unit {
	font-size: 1.13rem;
	font-family: var(--ttcs-font-sans);
	font-weight: 700;
}
.ttcs-stat__label {
	margin: 0;
	font-size: 0.97rem;
	color: var(--ttcs-ink-2);
	line-height: 1.7;
}
.ttcs-stat__note {
	margin: 0;
	font-size: 0.82rem;
	color: var(--ttcs-ink-3);
}

/* --- FAQ --- */
.ttcs-faq {
	border-top: var(--ttcs-border);
}
.ttcs-faq__item {
	border-bottom: var(--ttcs-border);
}
.ttcs-faq__q {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}
.ttcs-faq__btn {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: start;
	gap: var(--ttcs-sp-2);
	width: 100%;
	padding: 1.5rem 0.25rem;
	background: none;
	border: 0;
	text-align: left;
	cursor: pointer;
	color: inherit;
	font-family: inherit;
	transition: color 0.3s var(--ttcs-ease);
}
.ttcs-faq__btn:hover {
	color: var(--ttcs-accent);
}
.ttcs-faq__mark {
	font-family: var(--ttcs-font-en);
	font-size: 1.13rem;
	font-weight: 700;
	line-height: 1.5;
	color: var(--ttcs-accent);
	flex: none;
}
.ttcs-faq__mark.is-a {
	color: var(--ttcs-ink-3);
}
.ttcs-faq__qtext {
	font-size: clamp(1rem, 0.95rem + 0.24vw, 1.14rem);
	font-weight: 700;
	line-height: 1.7;
}
.ttcs-faq__icon {
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.35em;
	color: var(--ttcs-ink-3);
	transition: transform 0.45s var(--ttcs-ease-out), color 0.3s var(--ttcs-ease);
}
.ttcs-faq__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
.ttcs-faq__btn[aria-expanded="true"] .ttcs-faq__icon {
	transform: rotate(135deg);
	color: var(--ttcs-accent);
}
.ttcs-faq__a[hidden] {
	display: none;
}
.ttcs-faq__ainner {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ttcs-sp-2);
	padding: 0 0.25rem 1.75rem;
}
.ttcs-faq__atext {
	color: var(--ttcs-ink-2);
	font-size: 1.02rem;
	line-height: 2;
}
.ttcs-faq__atext p:last-child {
	margin-bottom: 0;
}

/* --- テーブル（比較表・会社概要） --- */
.ttcs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1.01rem;
	line-height: 1.8;
}
.ttcs-table th,
.ttcs-table td {
	padding: 1.1rem 1.25rem;
	border-bottom: var(--ttcs-border);
	text-align: left;
	vertical-align: top;
}
.ttcs-table thead th {
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--ttcs-ink-3);
	border-bottom: 2px solid var(--ttcs-line-strong);
	white-space: nowrap;
}
.ttcs-table tbody th {
	width: 12rem;
	font-weight: 700;
	color: var(--ttcs-ink);
	background-color: var(--ttcs-bg-sub);
}
.ttcs-table .is-own {
	background-color: var(--ttcs-accent-soft);
	font-weight: 700;
}
.ttcs-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
	.ttcs-table tbody th {
		width: auto;
	}
	.ttcs-table.is-stack,
	.ttcs-table.is-stack tbody,
	.ttcs-table.is-stack tr,
	.ttcs-table.is-stack th,
	.ttcs-table.is-stack td {
		display: block;
		width: 100%;
	}
	.ttcs-table.is-stack tbody th {
		border-bottom: 0;
		padding-bottom: 0.5rem;
	}
	.ttcs-table.is-stack td {
		padding-top: 0.5rem;
	}
}

/* --- タブ --- */
.ttcs-tabs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 var(--ttcs-sp-4);
	padding: 0;
	border-bottom: var(--ttcs-border);
}
.ttcs-tabs__tab {
	position: relative;
	padding: 0.9em 1.4em;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--ttcs-ink-3);
	cursor: pointer;
	transition: color 0.3s var(--ttcs-ease);
}
.ttcs-tabs__tab::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 2px;
	background: var(--ttcs-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.45s var(--ttcs-ease-out);
}
.ttcs-tabs__tab[aria-selected="true"] {
	color: var(--ttcs-accent);
}
.ttcs-tabs__tab[aria-selected="true"]::after {
	transform: scaleX(1);
}
.ttcs-tabs__panel[hidden] {
	display: none;
}

/* --- 追従CTA --- */
.ttcs-stickycta {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background-color: var(--ttcs-invert-bg);
	color: var(--ttcs-invert-ink);
	border-top: 1px solid var(--ttcs-invert-line);
	transform: translateY(100%);
	transition: transform 0.55s var(--ttcs-ease-out);
	padding: 0.85rem var(--ttcs-gutter);
	box-shadow: 0 -12px 40px -20px rgba(0, 0, 0, 0.5);
}
.ttcs-stickycta[hidden] {
	display: block;
}
.ttcs-stickycta.is-visible {
	transform: translateY(0);
}
.ttcs-stickycta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ttcs-sp-3);
	max-width: var(--ttcs-w-wide);
	margin-inline: auto;
}
.ttcs-stickycta__text {
	margin: 0;
	font-size: 0.99rem;
	font-weight: 700;
	line-height: 1.6;
}
.ttcs-stickycta__actions {
	display: flex;
	gap: 0.6rem;
	flex: none;
}
.ttcs-stickycta .ttcs-btn {
	padding: 0.85em 1.5em;
	font-size: 0.95rem;
}
.ttcs-stickycta .ttcs-btn.is-ghost {
	color: var(--ttcs-invert-ink);
	border-color: var(--ttcs-invert-line);
}
@media (max-width: 768px) {
	.ttcs-stickycta__text {
		display: none;
	}
	.ttcs-stickycta__inner {
		justify-content: stretch;
	}
	.ttcs-stickycta__actions {
		flex: 1;
		min-width: 0;
	}
	.ttcs-stickycta .ttcs-btn {
		flex: 1;
		min-width: 0;
		/*
		 * 追従バーのボタンは1行で読ませる。
		 * 「無料見積も／り」のように2行に割れると、
		 * 高さが変わってバー全体がガタつくうえ、押しづらい。
		 */
		white-space: nowrap;
		padding-inline: 0.9em;
		font-size: 0.92rem;
	}
	/* それでも入らない狭い端末では、文字だけ少し縮める */
	@media (max-width: 380px) {
		.ttcs-stickycta .ttcs-btn {
			font-size: 0.86rem;
			padding-inline: 0.7em;
		}
	}
}

/* --- パンくず --- */
.ttcs-breadcrumb {
	font-size: 0.84rem;
	color: var(--ttcs-ink-3);
	padding-block: 1rem;
}
.ttcs-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35em 0.7em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ttcs-breadcrumb li + li::before {
	content: "/";
	margin-right: 0.7em;
	color: var(--ttcs-line-strong);
}
.ttcs-breadcrumb a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--ttcs-ease);
}
.ttcs-breadcrumb a:hover {
	border-bottom-color: currentColor;
}

/* --- ロゴ列（導入企業） --- */
.ttcs-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(1.5rem, 1rem + 2vw, 3rem);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ttcs-logos li {
	font-family: var(--ttcs-font-en);
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--ttcs-ink-3);
	opacity: 0.7;
	transition: opacity 0.3s var(--ttcs-ease);
}
.ttcs-logos li:hover {
	opacity: 1;
}

/* --- マーキー --- */
.ttcs-marquee {
	overflow: hidden;
	white-space: nowrap;
	user-select: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ttcs-marquee__track {
	display: inline-flex;
	gap: 3rem;
	will-change: transform;
}
.ttcs-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 3rem;
	font-family: var(--ttcs-font-en);
	font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ttcs-ink-3);
}
.ttcs-marquee__item::after {
	content: "";
	width: 0.4em;
	height: 0.4em;
	border-radius: 50%;
	background: var(--ttcs-accent);
	flex: none;
}

/* --- メディア --- */
.ttcs-media {
	position: relative;
	overflow: hidden;
	border-radius: var(--ttcs-radius);
	background-color: var(--ttcs-bg-sub);
}
.ttcs-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ttcs-media.is-16-9 {
	aspect-ratio: 16 / 9;
}
.ttcs-media.is-4-3 {
	aspect-ratio: 4 / 3;
}
.ttcs-media.is-3-4 {
	aspect-ratio: 3 / 4;
}
.ttcs-media.is-1-1 {
	aspect-ratio: 1 / 1;
}
.ttcs-media.is-9-16 {
	aspect-ratio: 9 / 16;
}
.ttcs-media.is-16-10 {
	aspect-ratio: 16 / 10;
}
.ttcs-media__caption {
	margin: 0.75rem 0 0;
	font-size: 0.82rem;
	color: var(--ttcs-ink-3);
}

/* 画像が未設定でも構図が崩れないプレースホルダ */
.ttcs-media.is-placeholder {
	background-image: linear-gradient(135deg, var(--ttcs-bg-sub) 0%, var(--ttcs-accent-soft) 100%);
	display: grid;
	place-items: center;
}
.ttcs-media.is-placeholder::after {
	content: attr(data-label);
	font-family: var(--ttcs-font-en);
	font-size: 0.77rem;
	letter-spacing: 0.2em;
	color: var(--ttcs-ink-3);
	text-transform: uppercase;
}

/* --- リスト（チェック） --- */
.ttcs-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.7rem;
}
.ttcs-checklist li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.65em;
	align-items: start;
	font-size: 0.99rem;
	line-height: 1.8;
	color: var(--ttcs-ink-2);
}
.ttcs-checklist li::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.35em;
	border-radius: 50%;
	background: var(--ttcs-accent);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 74% no-repeat,
		linear-gradient(#000, #000);
	-webkit-mask-composite: xor;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 74% no-repeat,
		linear-gradient(#000, #000);
	mask-composite: exclude;
	flex: none;
}

/* --- 価格カード --- */
.ttcs-plans {
	display: grid;
	gap: clamp(1rem, 0.5rem + 1.6vw, 1.75rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
@media (max-width: 900px) {
	.ttcs-plans {
		grid-template-columns: minmax(0, 1fr);
		max-width: 30rem;
		margin-inline: auto;
	}
}
.ttcs-plan {
	display: flex;
	flex-direction: column;
	gap: var(--ttcs-sp-2);
	padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem);
	border: var(--ttcs-border);
	border-radius: var(--ttcs-radius-lg);
	background-color: var(--ttcs-bg);
	position: relative;
	transition: transform 0.5s var(--ttcs-ease-out), box-shadow 0.5s var(--ttcs-ease);
}
.ttcs-plan:hover {
	transform: translateY(-4px);
	box-shadow: var(--ttcs-shadow);
}
.ttcs-plan.is-recommend {
	border-color: var(--ttcs-accent);
	border-width: 2px;
	box-shadow: var(--ttcs-shadow);
}
.ttcs-plan__badge {
	position: absolute;
	top: -0.85rem;
	left: 50%;
	transform: translateX(-50%);
	padding: 0.45em 1.2em;
	font-size: 0.77rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
	background: var(--ttcs-accent);
	color: var(--ttcs-accent-ink);
	border-radius: var(--ttcs-radius-pill);
}
.ttcs-plan__name {
	margin: 0;
	font-size: 1.13rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.ttcs-plan__desc {
	margin: 0;
	font-size: 0.88rem;
	color: var(--ttcs-ink-3);
}
.ttcs-plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.15em;
	margin: 0.5rem 0 0;
	font-family: var(--ttcs-font-en);
	font-weight: 700;
	line-height: 1;
	color: var(--ttcs-ink);
}
.ttcs-plan__num {
	font-size: clamp(2.4rem, 1.8rem + 2vw, 3.2rem);
	letter-spacing: -0.02em;
}
.ttcs-plan__unit,
.ttcs-plan__term {
	font-family: var(--ttcs-font-sans);
	font-size: 1.02rem;
	font-weight: 700;
}
.ttcs-plan__term {
	color: var(--ttcs-ink-3);
	font-weight: 500;
}
.ttcs-plan__hours {
	margin: 0;
	padding: 0.5em 0.9em;
	font-size: 0.86rem;
	background: var(--ttcs-bg-sub);
	border-radius: var(--ttcs-radius);
	color: var(--ttcs-ink-2);
	align-self: flex-start;
}
.ttcs-plan__feats {
	margin: 0.5rem 0 0;
	flex: 1;
}
.ttcs-plan__cta {
	margin-top: auto;
	padding-top: var(--ttcs-sp-2);
}
.ttcs-plan__cta .ttcs-btn {
	width: 100%;
}

/* --- 引用 --- */
.ttcs-quote {
	position: relative;
	padding-left: 2.5rem;
	font-size: 1.07rem;
	line-height: 1.95;
	color: var(--ttcs-ink);
}
.ttcs-quote::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.6rem;
	height: 1.6rem;
	background: var(--ttcs-accent);
	opacity: 0.28;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6c-3 1.5-4.5 4-4.5 7.5V18H10v-5.5H6.8C7 10.4 7.9 9 9.7 8L9 6Zm10 0c-3 1.5-4.5 4-4.5 7.5V18H20v-5.5h-3.2c.2-2.1 1.1-3.5 2.9-4.5L19 6Z' fill='black'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 6c-3 1.5-4.5 4-4.5 7.5V18H10v-5.5H6.8C7 10.4 7.9 9 9.7 8L9 6Zm10 0c-3 1.5-4.5 4-4.5 7.5V18H20v-5.5h-3.2c.2-2.1 1.1-3.5 2.9-4.5L19 6Z' fill='black'/></svg>") center / contain no-repeat;
}
.ttcs-quote__who {
	display: block;
	margin-top: 0.9em;
	font-size: 0.88rem;
	color: var(--ttcs-ink-3);
	font-style: normal;
}

/* =========================================================================
 * 5. 親テーマ(Twenty Twenty)との調停
 *    ── 親の機能は残しつつ、LPページでは全幅レイアウトを許可する
 * ====================================================================== */

/* LP テンプレートでは親の狭いカラム制約を解除 */
.ttcs-lp #site-content .entry-content,
.ttcs-lp #site-content .post-inner {
	max-width: none;
	padding: 0;
}
.ttcs-lp #site-content > .ttcs-lp-body > * {
	max-width: none;
}
.ttcs-lp .entry-header {
	display: none;
}

/*
 * ヘッダー／フッターは子テーマ側で完全に作り直しているため
 *（header.php / footer.php / assets/css/chrome.css）、
 * 親テーマ向けの調整はここには置かない。
 *
 * 注意：#site-header / #site-footer は ID セレクタなので、
 * ここで背景色などを指定すると chrome.css のクラス指定に勝ってしまう。
 * 過去にフッターが親テーマ色のまま白文字になる不具合の原因になった。
 */

/* フォーカスリング（アクセシビリティ） */
.ttcs :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ttcs-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =========================================================================
 * 6. ユーティリティ
 * ====================================================================== */

.ttcs-hr {
	border: 0;
	border-top: var(--ttcs-border);
	margin: var(--ttcs-sp-5) 0;
}
.ttcs-vstack {
	display: grid;
	gap: var(--ttcs-sp-3);
}
.ttcs-vstack.is-lg {
	gap: var(--ttcs-sp-5);
}
.ttcs-center {
	text-align: center;
}
.ttcs-mt-4 {
	margin-top: var(--ttcs-sp-4);
}
.ttcs-mt-5 {
	margin-top: var(--ttcs-sp-5);
}
.ttcs-mt-6 {
	margin-top: var(--ttcs-sp-6);
}
.ttcs-note {
	font-size: 0.86rem;
	color: var(--ttcs-ink-3);
	line-height: 1.8;
}
.ttcs-en {
	font-family: var(--ttcs-font-en);
	letter-spacing: 0.02em;
}
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* 印刷 */
@media print {
	.ttcs-stickycta,
	.ttcs-marquee {
		display: none !important;
	}
	.ttcs-section {
		padding-block: 1.5rem;
		break-inside: avoid;
	}
}

/* 画像スロット（ttcs_image_slot が出力）
   画像が未設定でも「どんな画像を入れる枠か」「推奨サイズ」が
   枠の中に表示されるため、そのまま素材依頼に使える。 */
.ttcs-media.is-slot::after {
	display: none;
}
.ttcs-slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1.25rem;
	text-align: center;
	color: var(--ttcs-ink-3);
	/* 視差用の .ttcs-media__inner（position:absolute）に隠されないように */
	position: relative;
	z-index: 1;
}
.ttcs-slot__icon {
	width: 2.1rem;
	height: 2.1rem;
	opacity: 0.65;
}
.ttcs-slot__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ttcs-slot__label {
	font-size: 0.84rem;
	font-weight: 700;
	line-height: 1.6;
	max-width: 18em;
	word-break: auto-phrase;
}
.ttcs-slot__size {
	font-size: 0.74rem;
	letter-spacing: 0.04em;
	opacity: 0.8;
	padding: 0.3em 0.7em;
	border: 1px dashed currentColor;
	border-radius: var(--ttcs-radius-pill);
}