@charset "UTF-8";
/*
    Template: swell
    Theme Name: tsukutto
    Theme URI: https://tsukutto.co.jp/
    Description: 株式会社つくっと。 のサイト用 SWELL 子テーマ。モノトーンで、余白とタイポグラフィで見せるデザイン。
    Version: 1.1.0
    Author: 株式会社つくっと。
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

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

   SWELL はカスタマイザーの色設定を <head> のインライン CSS で :root に出力する。
   この style.css も <head> で読み込まれるが、インライン CSS の方が後に来ることが
   あるため、:root を二重に書いて詳細度を上げ、確実にこちらを優先させている。
   ========================================================================= */
:root:root {
	/* インク（モノトーンの主軸）。純黒は硬すぎるので少し引いた黒を基準にする */
	--tk-ink:            #141414;   /* ボタン地・フッター地・見出し */
	--tk-text:           #252525;   /* 本文 */
	/* 明朝は線が細く薄く見えるので、ゴシック時（#6e6e6e）より少し濃くしている */
	--tk-muted:          #585858;   /* 補足・注記 */
	--tk-faint:          #a0a0a0;   /* ラベル・非活性 */

	/* 差し色（ロゴの青）
	   ────────────────────────────────────────────────────────────
	   モノトーンに戻すときは、この 1 行だけを
	       --tk-accent: var(--tk-ink);
	   に変えればすべての差し色が黒に戻る。
	   --tk-accent-weak は --tk-accent から作っているので追随する。
	   ──────────────────────────────────────────────────────────── */
	--tk-accent:      #0265fc;   /* ロゴの青。白背景とのコントラスト比 4.9:1（AA） */
	--tk-accent-weak: color-mix(in srgb, var(--tk-accent) 8%, transparent);

	/* 面と線 */
	--tk-paper:          #ffffff;
	/* セクションを交互に敷く地色。白にかなり近づけて洗練した印象にしている。
	   ここを濃くすると全セクションの帯が強く出る */
	--tk-surface:        #f9f9f8;

	/* ---- セクションの帯の色（お試し中）----
	   .tk-section.-alt の地色。--tk-surface とは別の変数にしてある。
	   FAQ のカテゴリバッジや summary のホバーにも --tk-surface を使っている
	   ため、そちらを巻き込まずに帯だけ試せるようにした。

	   切り替えは下の 2 行のコメントを入れ替えるだけ。
	     ・薄い水色  … ロゴの青を 4% だけ白に混ぜたもの。
	                    差し色から作っているので、青を変えれば追随する。
	                    4% は元のグレーとほぼ同じ明るさ（相対輝度 0.944 と
	                    0.948）で、帯の強さを変えずに色だけ青へ寄せた値
	     ・グレー    … 元の色（--tk-surface と同じ） */
	--tk-band: color-mix(in srgb, var(--tk-accent) 4%, var(--tk-paper));
	/* --tk-band: var(--tk-surface); */

	/* ---- 帯の背景画像（お試し中）----
	   .tk-section.-alt に敷く絵。--tk-band は画像の下の地色として残る
	   （読み込み前と、画像を切ったときにそのまま効く）。

	   切り替えは下の 2 行のコメントを入れ替えるだけ。
	   scripts/make-section-bg.php が img/bg.png から書き出している。 */
	--tk-band-image: url("assets/img/section-bg.webp");
	/* --tk-band-image: none; */
	/* 面としての存在感が必要なところ（Before 欄・画像のプレースホルダ・
	   ホバー）。--tk-surface を白に寄せた分、こちらで差をつける */
	--tk-surface-2:      #f0f0ee;
	--tk-line:           #e3e3e1;   /* 細い罫線 */

	/* 余白スケール。参考サイトに寄せてセクション間をかなり広く取る */
	--tk-space-xs:   8px;
	--tk-space-s:   16px;
	--tk-space-m:   32px;
	--tk-space-l:   64px;
	--tk-space-xl: 100px;
	--tk-space-2xl:120px;

	/* 書体
	   - 和文（本文・見出し）: 明朝体。横線が細く、縦線との強弱とうろこで
	     シャープな印象が出る。Noto Serif JP を読み、無い環境では OS の
	     明朝（游明朝・ヒラギノ明朝）に落とす
	   - 欧文（ラベル・数字・ディスプレイ）: Josefin Sans。
	     線が細く幾何学的で、明朝の細い横線と相性が良い

	   ウェイトは 400 / 700 のみ読み込んでいる（和文は 1 ウェイトが重い）。
	   和文に 500・600 を指定すると読んでいない太さになるので使わないこと。 */
	--tk-font-jp: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho",
		YuMincho, "MS PMincho", serif;
	--tk-font-en: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;

	--tk-tracking-wide: .18em;  /* 欧文ラベル用 */
	/* 明朝は字面が小さいので、ゴシックより少し字間を開けた方が締まって見える */
	--tk-tracking:      .04em;  /* 和文見出し用 */

	/* 角丸はレイアウトでは 0、ボタンだけピル型。参考サイトと同じ使い分け */
	--tk-radius-pill: 999px;

	/* SWELL 側の変数を上書き */
	--swl-radius--2: 0px;
	--swl-radius--4: 0px;
	--swl-radius--8: 0px;
	--swl-font_family: var(--tk-font-jp);
	--swl-letter_spacing: var(--tk-tracking);
	--swl-color_shadow: transparent;
	--swl-box_shadow: none;
	--swl-btn_shadow: none;
	--swl-img_shadow: none;
}

@media (max-width: 959px) {
	:root:root {
		--tk-space-xl:  64px;
		--tk-space-2xl: 80px;
	}
}

/* =========================================================================
   2. ベース
   ========================================================================= */
body {
	color: var(--tk-text);
	font-family: var(--tk-font-jp);
	line-height: 1.95;
	/* 和文の約物（「」（）など）を詰める。参考サイトの YakuHanJP と同じ狙い */
	font-feature-settings: "palt";
}

/* 角丸とドロップシャドウを落とす。ボタン類は下で改めてピル型にするので除く */
.post_content img,
.post_content table,
.wp-block-image img,
.wp-block-group,
.p-postList__item,
.c-postThumb__img,
.swell-block-box,
.swell-block-capbox,
input:not([type="submit"]), select, textarea {
	border-radius: 0 !important;
	box-shadow: none !important;
}

.post_content h2,
.post_content h3,
.post_content h4 {
	letter-spacing: var(--tk-tracking);
	line-height: 1.55;
	font-weight: 700;
}

a { text-decoration-thickness: 1px; text-underline-offset: .25em; }

/* 欧文だけ Josefin Sans にしたい箇所で使う */
.tk-en { font-family: var(--tk-font-en); }

/* =========================================================================
   3. スクロールリビール

   .tk-reveal を付けた要素を、画面に入ったタイミングで出す。
   is-revealed は assets/js/reveal.js が付ける。
   ========================================================================= */
/* 隠すのは JS が動く環境だけ（html.tk-js は wp_head のインラインスクリプトが付ける）。
   こうしておかないと、JS が失敗した環境で中身が見えなくなる。 */
.tk-js .tk-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
	            transform .7s cubic-bezier(.22, .61, .36, 1);
	will-change: opacity, transform;
}
.tk-js .tk-reveal.is-revealed { opacity: 1; transform: none; }

/* 動きを減らす設定の人には演出しない */
@media (prefers-reduced-motion: reduce) {
	.tk-js .tk-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================================
   4. ヘッダー / フッター
   ========================================================================= */
#header { border-bottom: 1px solid var(--tk-line); }
.l-header__logo .c-catchphrase { font-size: 11px; letter-spacing: var(--tk-tracking); color: var(--tk-muted); }

.c-gnav > li > a {
	letter-spacing: var(--tk-tracking);
	font-weight: 400;
	font-size: 14px;
}
.c-gnav > li > a::after { background: var(--tk-ink) !important; height: 1px !important; }

/* ヘッダー右端の CTA。ピル型にして参考サイトの CONTACT US に合わせる。
   li は display:list-item なので、まず flex にしないと中の a を縦中央に置けない。 */
.c-gnav .tk-header-cta {
	display: flex;
	align-items: center;
}
.c-gnav .tk-header-cta > a {
	background: var(--tk-accent);
	color: #fff;
	border-radius: var(--tk-radius-pill);
	padding: 0 26px;
	margin-left: 20px;
	height: 44px;
	display: flex;
	align-items: center;
	gap: .7em;
	font-size: 13px;
	transition: opacity .25s;
}
/* SWELL は .c-gnav > li > a::after をホバー時の下線に使っている。
   矢印をそこに入れると取り合いになるので、疑似要素は消してラベル側に付ける。 */
.c-gnav .tk-header-cta > a::before,
.c-gnav .tk-header-cta > a::after { content: none !important; display: none !important; }
.c-gnav .tk-header-cta > a .ttl::after {
	content: "→";
	font-family: var(--tk-font-en);
	margin-left: .9em;
	transition: margin-left .25s;
}
.c-gnav .tk-header-cta > a:hover { opacity: .75; }
.c-gnav .tk-header-cta > a:hover .ttl::after { margin-left: 1.4em; }

#footer { border-top: none; }
.l-footer__foot { letter-spacing: var(--tk-tracking); font-size: 12px; }
#footer a:hover { opacity: .65; }

/* =========================================================================
   5. セクションの型

   .tk-section を付けた core/group が 1 セクション。
   -alt でグレー地、-ink で黒地の反転セクションになる。
   ========================================================================= */
.tk-section {
	padding-top: var(--tk-space-2xl);
	padding-bottom: var(--tk-space-2xl);
}
/* 帯を敷くセクション。
   ・-alt … 交互に敷く帯
   ・白いセクションの直後に来る CTA … 白が続いて境目が消えるため帯にする
     （トップは FAQ の帯の次なので該当せず、白のまま。
       サービス・料金・会社概要は直前が白なので帯になる）
   ページの並びを変えても自動で追随する。 */
.tk-section.-alt,
.tk-section:not(.-alt):not(.-ink) + .tk-section.-cta {
	/* 地色は画像の下に残す。読み込み前のちらつきを抑え、
	   --tk-band-image: none にしたときはこれだけが効く。 */
	background-color: var(--tk-band);
	background-image: var(--tk-band-image);
	background-repeat: no-repeat;
	/* セクションは縦に長い（実測 1000〜1600px）。絵は 3:2 なので、
	   cover だと高さ基準で拡大され、左右が切られる。 */
	background-size: cover;
	background-position: center;
}
/* 帯になるなら色で分かれるので、罫線は要らない */
.tk-section:not(.-alt):not(.-ink) + .tk-section.-cta { border-top: none; }
.tk-section.-ink  { background: var(--tk-ink); color: #fff; }
.tk-section.-ink :is(h2, h3, h4, p, li) { color: #fff; }
.tk-section.-tight { padding-top: var(--tk-space-l); padding-bottom: var(--tk-space-l); }

/* セクション同士は隙間なく積む。
   ブロックの既定の下マージン（32px）が残っていると、全幅の背景を持つ
   セクションのあいだに地の色の帯が出る。白いセクションの下では見えないが、
   FAQ（薄いグレー）→ CTA（黒）のように色が変わるところでは
   白い帯としてはっきり見えてしまう。上下の余白はセクション側の
   パディング（--tk-space-2xl）だけで決める。 */
.post_content .tk-hero,
.post_content .tk-section { margin-bottom: 0; }

/* 同じ理由で、全幅セクションで終わるページは SWELL が .l-content に付ける
   下マージン（6em = 96px）も消す。お問い合わせとプライバシーポリシーは
   CTA セクションが無く最後がセクションで終わるため、そのままだと
   セクションの背景とフッターのあいだに地の白が 96px 残る。
   本文で終わるページ（ブログ記事など）では今までどおり残す。 */
#content:has(.post_content > .tk-section:last-child) { margin-bottom: 0; }

/* SWELL は .alignfull > .wp-block-group__inner-container に
     margin: 0 auto; max-width: var(--article_size)   （= 900px）
   を当てている。これが 2 つの問題を起こすので打ち消す。

   1. 本文幅が 900px で止まり、.tk-container の max-width:1120px が効かない
   2. margin-inline が auto だと grid / flex の stretch が無効になる仕様のため、
      ヒーローの中身がコンテンツ幅まで縮んでしまう

   横幅の制御は .tk-container 側に一本化する。 */
.tk-hero > .wp-block-group__inner-container,
.tk-section > .wp-block-group__inner-container {
	max-width: none;
	margin-inline: 0;
}

/* 全幅セクションの内側で本文を中央に寄せる */
.tk-container {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
	width: 100%;
}
/* core/group は中身を .wp-block-group__inner-container で包むことがあるため、
   子セレクタ(>)ではなく最後の要素を子孫として指定する */
.tk-section .tk-container > *:last-child,
.tk-section .tk-container > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

/* --- 文節ごとの折り返し ---
   gen_content.py の phr() が見出しやキャッチを文節ごとに包む。
   inline-block の中では折り返さないので、「ありません／か？」のように
   1〜2 字だけ次の行に落ちたり、「完／成」と語の途中で切れたりしなくなる。
   text-wrap: balance は行長をそろえるだけで語の途中でも切るため使わない。 */
.tk-phr { display: inline-block; }

/* --- セクションラベル：点 + 欧文。参考サイトの「● SERVICE」に相当 --- */
.tk-eyebrow {
	display: flex;
	align-items: center;
	gap: .7em;
	font-family: var(--tk-font-en);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--tk-tracking-wide);
	text-transform: uppercase;
	/* 点だけでなくラベルの文字も差し色にする */
	color: var(--tk-accent);
	margin-bottom: var(--tk-space-m);
}
.tk-eyebrow::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
/* 黒地のセクションでは差し色を使わない。
   #0265fc と #141414 のコントラストが約 3.7:1 で文字には足りないため。 */
.tk-section.-ink .tk-eyebrow { color: #fff; }

/* --- セクション見出し：装飾なし。大きさと余白だけで見せる --- */
.post_content .tk-h2 {
	font-family: var(--tk-font-jp);
	font-size: clamp(26px, 3.6vw, 40px);
	font-weight: 700;
	color: var(--tk-ink);
	border: none;
	background: none;
	/* SWELL は .post_content h2 に margin-top:4em を当てるので打ち消す */
	margin-top: 0;
	margin-bottom: var(--tk-space-l);
	padding: 0;
	line-height: 1.5;
}
.post_content .tk-h2::before,
.post_content .tk-h2::after { content: none; }

.post_content .tk-h2.-center { text-align: center; }

/* リード文 */
.tk-lead {
	font-size: 17px;
	line-height: 2.1;
	color: var(--tk-text);
	max-width: 46em;
}
.tk-section.-ink .tk-lead { color: #d8d8d8; }

.tk-note { font-size: 13px; color: var(--tk-muted); line-height: 1.85; }

/* =========================================================================
   6. ヒーロー（ファーストビュー）
   ========================================================================= */
.tk-hero {
	position: relative;
	/* z-index:-1 / -2 の子（波紋とぼかし）を、この要素の背景より上・文字より下に置くため。
	   isolation が無いと負の z-index が祖先の背景の下に潜ってしまう */
	isolation: isolate;
	overflow: hidden;
	min-height: min(86svh, 800px);
	padding: clamp(72px, 10vw, 128px) 0;
	background: var(--tk-paper);
}

/* 中身を縦中央に置く。core/group は中身を inner-container で包むことがあるので両方に効かせる。
   flex だと子がコンテンツ幅に縮んでしまったため grid を使う。
   grid はインライン方向が既定で stretch なので、横幅は親いっぱいに伸びる。 */
.tk-hero,
.tk-hero > .wp-block-group__inner-container {
	display: grid;
	align-content: center;
}

/* --- ソナーグリッド（assets/js/sonar-grid.js が canvas を差し込む） --- */
.tk-sonar__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	pointer-events: none;
	/* JS は 2 色を読む。
	   color            … 静止しているドットの色
	   --tk-sonar-ring  … 広がる輪（波紋）に乗ったドットの色
	   輪だけを差し色にして、地のドットは目立たせないようにしている。 */
	color: var(--tk-ink);
	--tk-sonar-ring: var(--tk-accent);
}

/* 文字の下だけ背景色でぼかし、波紋が下を通っても可読性が落ちないようにする。
   コピーが左寄せなので、ぼかしの中心も左に寄せている */
.tk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(
		ellipse 58% 52% at 26% 50%,
		var(--tk-paper) 0%,
		color-mix(in srgb, var(--tk-paper) 72%, transparent) 45%,
		transparent 100%
	);
}

@media (max-width: 767px) {
	.tk-hero::before {
		background: radial-gradient(ellipse 85% 48% at 42% 46%, var(--tk-paper) 0%, transparent 100%);
	}
}

/* --- コピーの登場アニメーション ---
   巨大な欧文ディスプレイ（.tk-hero__display）は意図的に対象外。
   最大要素なので opacity:0 から始めると LCP（表示速度の指標）が遅くなる。 */
@keyframes tk-hero-in {
	from { opacity: 0; transform: translateY(12px); filter: blur(5px); }
	to   { opacity: 1; transform: none;             filter: blur(0); }
}
.tk-js .tk-hero .tk-eyebrow     { animation: tk-hero-in .55s cubic-bezier(.22, 1, .36, 1) both; }
.tk-js .tk-hero .tk-hero__title { animation: tk-hero-in .55s cubic-bezier(.22, 1, .36, 1) .06s both; }
.tk-js .tk-hero .tk-hero__sub   { animation: tk-hero-in .55s cubic-bezier(.22, 1, .36, 1) .12s both; }
.tk-js .tk-hero .wp-block-buttons,
.tk-js .tk-hero .tk-btn-note    { animation: tk-hero-in .55s cubic-bezier(.22, 1, .36, 1) .18s both; }

@media (prefers-reduced-motion: reduce) {
	.tk-js .tk-hero :is(.tk-eyebrow, .tk-hero__title, .tk-hero__sub, .wp-block-buttons, .tk-btn-note) {
		animation: none;
	}
}

/* 巨大な欧文ディスプレイ。参考サイトの「BOOST THE VALUE」に相当する主役 */
.tk-hero__display {
	font-family: var(--tk-font-en);
	font-weight: 600;
	font-size: clamp(46px, 11vw, 132px);
	line-height: .96;
	letter-spacing: -.02em;
	color: var(--tk-ink);
	margin: 0 0 var(--tk-space-l);
	text-transform: uppercase;
}

/* 和文のキャッチコピー（h1）。ディスプレイの下で、読ませる大きさに置く */
.post_content .tk-hero__title {
	font-family: var(--tk-font-jp);
	font-size: clamp(19px, 2.5vw, 29px);
	font-weight: 700;
	line-height: 1.85;
	letter-spacing: var(--tk-tracking);
	color: var(--tk-ink);
	border: none; background: none; padding: 0;
	margin: 0 0 var(--tk-space-m);
}
.post_content .tk-hero__title::before,
.post_content .tk-hero__title::after { content: none; }

/* キャッチコピー内の黒ベタ抜き（コアの「ハイライト」書式で入れた <mark>） */
/* ヒーローの「つくっと。」。塗り（マーカー）ではなく、黒字に差し色の下線。
   <mark> のままにしているのは、エディタで扱える要素に留めておくため。 */
.tk-hero__title mark {
	background: transparent;
	color: var(--tk-ink);
	padding: 0;
	text-decoration: underline;
	text-decoration-color: var(--tk-accent);
	text-decoration-thickness: .1em;
	text-underline-offset: .16em;
	text-decoration-skip-ink: none;
}

.tk-hero__sub {
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 2.1;
	color: var(--tk-muted);
	margin-bottom: var(--tk-space-l);
	max-width: 40em;
}
.tk-hero .tk-container > *:last-child,
.tk-hero .tk-container > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

/* =========================================================================
   7. ボタン / CTA

   レイアウトは直角、ボタンだけピル型。参考サイトと同じ使い分け。
   ========================================================================= */
.tk-btn .wp-block-button__link,
a.tk-btn {
	display: inline-flex;
	align-items: center;
	gap: 1em;
	/* 通常は白地に青文字・青枠。ホバーで青地・白文字に反転する */
	background: #fff;
	color: var(--tk-accent);
	border: 1px solid var(--tk-accent);
	border-radius: var(--tk-radius-pill) !important;
	padding: 20px 40px;
	/* 明朝の 400 では線が細く、ボタンの文字として弱い */
	font-weight: 700;
	font-size: 15px;
	letter-spacing: var(--tk-tracking);
	line-height: 1.5;
	text-decoration: none;
	transition: background .25s, color .25s, gap .25s;
}
.tk-btn .wp-block-button__link::after,
a.tk-btn::after {
	content: "→";
	font-family: var(--tk-font-en);
	font-weight: 400;
}
.tk-btn .wp-block-button__link:hover,
a.tk-btn:hover { background: var(--tk-accent); color: #fff; gap: 1.5em; }

/* 黒地セクション内。
   ここは背景が黒なので、白で塗った方が押せる場所として強く出る。
   最後の CTA を弱めたくないため、白地のままにしている
   （他のボタンとはホバーの向きが逆になる）。 */
.tk-section.-ink .tk-btn .wp-block-button__link {
	background: #fff; color: var(--tk-ink); border-color: #fff;
}
.tk-section.-ink .tk-btn .wp-block-button__link:hover {
	background: transparent; color: #fff;
}

/* 線だけのボタン（副次的な導線） */
.tk-btn.-ghost .wp-block-button__link {
	background: transparent;
	color: var(--tk-ink);
	border-color: var(--tk-line);
	padding: 15px 30px;
	font-size: 14px;
}
.tk-btn.-ghost .wp-block-button__link:hover {
	background: var(--tk-ink); color: #fff; border-color: var(--tk-ink);
}

/* スマホではラベル（16 文字）が 1 行に収まらず、折り返して矢印だけが
   右端に離れてしまう。余白と文字サイズを詰めて 1 行に収める。 */
@media (max-width: 599px) {
	.tk-btn .wp-block-button__link,
	a.tk-btn {
		padding: 18px 24px;
		font-size: 14px;
		gap: .7em;
	}
	.tk-btn.-ghost .wp-block-button__link {
		padding: 14px 20px;
		font-size: 13px;
	}
}

.tk-btn-note {
	font-size: 13px;
	color: var(--tk-muted);
	margin-top: var(--tk-space-s);
	letter-spacing: var(--tk-tracking);
}
.tk-section.-ink .tk-btn-note { color: #9d9d9d; }

/* =========================================================================
   8. チェックリスト（お悩みの共感）
   ========================================================================= */
.tk-checklist { list-style: none; padding: 0; margin: 0; }
.tk-checklist li {
	position: relative;
	padding: 24px 0 24px 46px;
	border-bottom: 1px solid var(--tk-line);
	font-size: 16px;
	line-height: 1.85;
	margin: 0;
}
.tk-checklist li:first-child { border-top: 1px solid var(--tk-line); }
.tk-checklist li::before {
	content: "";
	position: absolute;
	left: 8px; top: 1.75em;
	width: 14px; height: 7px;
	border-left: 1.5px solid var(--tk-accent);
	border-bottom: 1.5px solid var(--tk-accent);
	transform: rotate(-45deg);
}

/* =========================================================================
   9. カード（できること）

   アイコン → 見出し → 説明文 の順に並べたカードを、2 列のグリッドに敷く。
   参考コンポーネントは 6 枚を 3 列に置いていたが、こちらは 4 枚。
   3 列だと 1 枚だけの行が余り、日本語の説明文に必要な横幅も取れない。
   ========================================================================= */

/* グリッドは core/group の内側に当てる。
   core/group は中身を .wp-block-group__inner-container で包むため、
   外側に grid を当てると「1 個の子」を並べることになり幅が半分になる。
   包まれない環境でも動くよう :has() で両方に対応している。 */
.tk-cards > .wp-block-group__inner-container,
.tk-cards:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tk-space-m);
	align-items: stretch;
}
@media (max-width: 767px) {
	.tk-cards > .wp-block-group__inner-container,
	.tk-cards:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tk-space-s);
	}
}

.tk-card {
	height: 100%;
	padding: var(--tk-space-m);
	border: 1px solid var(--tk-line);
	/* セクションがグレー地なので、カードは白で浮かせる */
	background: var(--tk-paper);
	transition: border-color .25s;
}
.tk-card:hover { border-color: var(--tk-accent); }

/* アイコン。参考コンポーネントの size-10（40px）に合わせている */
.tk-card__icon {
	width: 40px;
	height: 40px;
	margin-bottom: var(--tk-space-m);
	color: var(--tk-accent);
}
.tk-card__icon svg { width: 100%; height: 100%; display: block; }

.post_content .tk-card__title {
	margin: 0 0 var(--tk-space-s);
	color: var(--tk-ink);
	font-size: 19px;
	font-weight: 700;
	border: none; background: none; padding: 0;
	line-height: 1.6;
}
.post_content .tk-card__title::before,
.post_content .tk-card__title::after { content: none; }

.tk-card p { font-size: 15px; line-height: 2; color: var(--tk-muted); }
.tk-card p:last-child { margin-bottom: 0; }

/* =========================================================================
   10. 実績 / 事例
   ========================================================================= */
.tk-case {
	border-top: 1px solid var(--tk-ink);
	padding-top: var(--tk-space-m);
	margin-bottom: var(--tk-space-xl);
}
/* 事例のラベルは中身が和文なので、欧文用の広い字間は使わない */
.tk-case__label {
	font-family: var(--tk-font-jp);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--tk-muted);
	display: block;
	margin-bottom: var(--tk-space-s);
}
.post_content .tk-case__title {
	font-size: clamp(21px, 2.8vw, 30px);
	color: var(--tk-ink);
	border: none; background: none; padding: 0;
	margin: 0 0 var(--tk-space-xs);
	line-height: 1.55;
}
.post_content .tk-case__title::before,
.post_content .tk-case__title::after { content: none; }
.tk-case__meta { font-size: 14px; color: var(--tk-muted); margin-bottom: var(--tk-space-l); }

/* Before / After の対比。1px の線だけで差を出す */
/* 事例の Before / After。
   PC は 2 枚を横に並べ、スマホ（767px 以下）はアコーディオンにする。
   スマホだと Before と After が縦に積まれて事例がとても長くなるため。

   中身は core/details なので、開閉・キーボード操作・支援技術への通知は
   ブラウザ標準。マークアップでは両方 open にしてあり、スマホで Before を
   閉じるのは assets/js/before-after.js（JS が無ければ両方開いたまま＝全文読める）。

   グリッドは core/group の内側に当てる
   （外側だと子 1 個＝inner-container を並べることになり、幅が半分になる）。 */
.tk-ba > .wp-block-group__inner-container,
.tk-ba:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--tk-line);
}
.tk-ba__item {
	/* block-size を auto へ遷移させるために必要（未対応ブラウザでは無視される） */
	interpolate-size: allow-keywords;
	/* ブロックの下マージン（16px）が残っていると、その分だけ stretch が縮んで
	   左（Before）の地色が下まで届かず 16px の隙間になる */
	margin-block: 0;
}
.tk-ba__item.-before {
	background: var(--tk-surface-2);
	border-right: 1px solid var(--tk-line);
}

.tk-ba__item > summary {
	display: block;
	list-style: none;               /* 既定の三角マーカーを消す */
	padding: var(--tk-space-m) var(--tk-space-m) 0;
	font-family: var(--tk-font-en);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--tk-tracking-wide);
}
.tk-ba__item > summary::-webkit-details-marker { display: none; }
.tk-ba__item.-before > summary { color: var(--tk-faint); }
.tk-ba__item.-after  > summary { color: var(--tk-accent); }

/* ラベルの下の横罫。summary に直接引くと左右のパディングまで伸びるので、
   内側の span に引いて字幅に合わせている */
.tk-ba__item > summary > span {
	display: block;
	padding-bottom: var(--tk-space-xs);
	border-bottom: 1px solid var(--tk-line);
}

.tk-ba__item > *:not(summary) {
	margin: 0;
	padding: var(--tk-space-s) var(--tk-space-m) var(--tk-space-m);
	font-size: 15px;
	line-height: 2;
}

@media (min-width: 768px) {
	/* PC では常に開いた状態しか出さないので、つまみとして振る舞わせない。
	   JS が動かなくてもマークアップ側で open なので、押せなくても読めなくならない */
	.tk-ba__item > summary { cursor: default; pointer-events: none; }
}

@media (max-width: 767px) {
	.tk-ba > .wp-block-group__inner-container,
	.tk-ba:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.tk-ba__item.-before {
		border-right: none;
		border-bottom: 1px solid var(--tk-line);
	}

	/* ここからアコーディオン。見た目は FAQ と揃える */
	.tk-ba__item > summary {
		position: relative;
		padding: 16px 44px 16px 20px;   /* 右はシェブロンの領域 */
		cursor: pointer;
	}
	.tk-ba__item > summary:focus-visible {
		outline: 2px solid var(--tk-accent);
		outline-offset: -2px;
	}
	/* 畳んでいる行に横罫は要らない（行そのものが区切りになる） */
	.tk-ba__item > summary > span { padding-bottom: 0; border-bottom: none; }

	/* シェブロン（CSS で描く。FAQ と同じ作り） */
	.tk-ba__item > summary::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		width: 8px;
		height: 8px;
		margin-top: -6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: rotate(45deg);
		transform-origin: center;
		transition: transform .25s ease;
	}
	.tk-ba__item[open] > summary::after {
		margin-top: -2px;
		transform: rotate(-135deg);
	}

	.tk-ba__item > *:not(summary) { padding: 0 20px 18px; }

	.tk-ba__item::details-content {
		block-size: 0;
		overflow: hidden;
	}
	.tk-ba__item[open]::details-content { block-size: auto; }

	/* 開閉をなめらかに。::details-content と interpolate-size に未対応の
	   ブラウザでは、単に瞬時に開閉するだけで壊れない。

	   遷移を .tk-ba-ready の下に置いているのは、読み込み直後の 1 回目
	   （JS が Before を閉じる）をアニメーションさせないため。そのままだと
	   開いた状態から畳まれる動きが毎回見えてしまう。
	   before-after.js が最初の同期を終えてから html にこのクラスを付ける。 */
	.tk-ba-ready .tk-ba__item::details-content {
		transition: block-size .3s ease, content-visibility .3s allow-discrete;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tk-ba-ready .tk-ba__item::details-content { transition: none; }
	.tk-ba__item > summary::after { transition: none; }
}

/* 事例の締めの一文 */
.tk-case__punch {
	font-size: clamp(18px, 2.3vw, 23px);
	font-weight: 700;
	letter-spacing: var(--tk-tracking);
	color: var(--tk-ink);
	line-height: 1.7;
	margin-top: var(--tk-space-m);
}

/* =========================================================================
   10b. 事例カルーセル

   中央のスライドが主役、左右は縮小して覗く構図。
   横スクロールと吸着はブラウザの scroll-snap に任せ、JS は操作部の生成と
   中央スライドの判定だけを行う（assets/js/carousel.js）。

   カルーセルの指定は data-tk-ready と .tk-carousel__track を条件にしている。
   どちらも JS が付けるので、JS が動かない環境ではスライドが縦に積まれ、
   全文がそのまま読める状態になる。
   ========================================================================= */
.tk-carousel { position: relative; }

.tk-carousel[data-tk-ready] {
	/* スライド幅の基準。
	   パディングの % は親の幅、flex-basis の % はトラックの内容幅を基準にするため、
	   両方を % で書くと二重に効いて意図より狭くなる。vw で一本化しておく。 */
	--tk-slide-w: min(760px, 84vw);

	/* 左右のスライドをもっと見せるため、本文コンテナ（1120px）の外へはみ出させる。
	   中央のスライドの大きさと位置は変えない。トラックが広がると
	   padding の (100% - スライド幅) / 2 も一緒に広がるので、中央はそのまま。

	   width は auto のままにして負のマージンだけで広げている。width: 100vw だと
	   縦スクロールバーの幅ぶん中央がずれ、横スクロールバーが出る環境もある。

	   はみ出し量に上限は置いていない。上限を付けると画面の端まで届かず、
	   左右のスライドが「画面外へ続いている」のではなく「途中で切れている」
	   ように見えてしまう。
	   100vw と 100% の差（スクロールバー幅ぶん）は body の
	   overflow-x: clip が左右対称に切るので、中央位置はずれない。 */
	--tk-carousel-bleed: calc((100vw - 100%) / 2);
	margin-inline: calc(-1 * var(--tk-carousel-bleed));
}
.tk-carousel[data-tk-ready] .tk-carousel__track {
	display: flex;
	gap: var(--tk-space-m);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	/* 1 枚目と最後のスライドも中央に寄せられるよう、
	   中央寄せに必要な分だけ左右に余白を取る */
	padding: 8px max(0px, calc((100% - var(--tk-slide-w)) / 2));
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}
.tk-carousel[data-tk-ready] .tk-carousel__track::-webkit-scrollbar { display: none; }
.tk-carousel[data-tk-ready] .tk-carousel__track:focus-visible {
	outline: 2px solid var(--tk-ink);
	outline-offset: 4px;
}

.tk-carousel[data-tk-ready] .tk-carousel__slide {
	flex: 0 0 var(--tk-slide-w);
	scroll-snap-align: center;
	border: 1px solid var(--tk-line);
	background: var(--tk-paper);
	padding: var(--tk-space-m);
	/* 中央以外は少し縮めて落とす。参考コンポーネントの scale / opacity と同じ狙い。
	   ループ用のクローン（[data-tk-clone]）にも同じ見た目が当たる */
	transform: scale(.94);
	opacity: .45;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease;
}
.tk-carousel[data-tk-ready] .tk-carousel__slide.is-active {
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.tk-carousel[data-tk-ready] .tk-carousel__slide {
		transition: none;
		/* 動きを減らす設定では、縮小も減光もしない（全部読める方を優先する） */
		transform: none;
		opacity: 1;
	}
}

/* --- 画面イメージの枠 --- */
.tk-case__media {
	/* 画像も 16:9 なので切れない。
	   以前はスマホだけ 4:3 にしていたが、これは画像が無く枠だけだった時期に
	   グレーの箱を間延びさせないための措置。画像が入ると縦横比が変わると
	   絵が切れるので、全幅で 16:9 に統一した。 */
	aspect-ratio: 16 / 9;
	margin-bottom: var(--tk-space-m);
	/* 読み込み前の場所取り。画像が乗れば見えない */
	background: var(--tk-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
	/* 素材が無い事例を足したとき、枠に入れた文字の見え方 */
	color: var(--tk-faint);
	font-size: 12px;
	letter-spacing: var(--tk-tracking-wide);
	overflow: hidden;
}
.tk-case__img {
	width: 100%;
	height: 100%;
	/* 縦横比は一致しているので cover でも切れない。
	   端数で 1px 足りない事故を防ぐために cover にしている */
	object-fit: cover;
	display: block;
}

@media (max-width: 767px) {
	/* 帯の絵は、特徴のある交差した曲線が左下に寄っている。
	   スマホの幅では cover で横が 1/4 ほどしか見えない（実測 375px で
	   元画像の 288px 分）。center のままだと中央の帯だけが出て、
	   階調はあっても「絵」だとは分からない。左下に寄せて曲線を見せる。
	   実測の明るさの幅は、左端の範囲で 27、中央だと 33。数字は近いが、
	   形が読めるのは左下。 */
	.tk-section.-alt,
	.tk-section:not(.-alt):not(.-ink) + .tk-section.-cta { background-position: left bottom; }

	/* PC ではスライドの高さを一番長いものにそろえている（横に並ぶので）。
	   スマホは 1 枚ずつしか見えないので、そろえると短いスライドの枠の中に
	   空白だけが残る（実測で 1 枚目に 167px）。
	   スライドは内容の高さにし、トラックの高さは carousel.js の fitHeight() が
	   「いま見えているスライド」に合わせる。縦のはみ出しは隠す
	   （overflow-x:auto だけだと overflow-y も auto になり、背の高い
	   スライドが隣にあるときトラックが縦にスクロールしてしまう）。 */
	.tk-carousel[data-tk-ready] .tk-carousel__track {
		align-items: flex-start;
		overflow-y: hidden;
		transition: height .35s ease;
	}

	/* スマホでは隣のスライドが 1px も覗いていない（実測で次のスライドの左端は
	   画面の右端より 2px 外）。84vw のままだと、覗かせるために取っている
	   左右 30px の余白とスライド間の 32px が誰にも使われないまま残る。
	   画面いっぱいまで広げて、空いた分を本文の幅に回す。 */
	.tk-carousel[data-tk-ready] { --tk-slide-w: 92vw; }

	/* スライドの内側の余白も詰める。中に Before / After のアコーディオンが
	   あり、そちらも 20px の余白を持っているので、32px のままだと片側 52px が
	   余白になって本文が 207px しか残らない（375px の画面で 1 行 13 字）。
	   縦にも 32px 短くなる。 */
	.tk-carousel[data-tk-ready] .tk-carousel__slide { padding: var(--tk-space-s); }
}
@media (prefers-reduced-motion: reduce) {
	.tk-carousel[data-tk-ready] .tk-carousel__track { transition: none; }
}

/* --- 操作部（JS が生成） --- */
.tk-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tk-space-m);
	margin-top: var(--tk-space-m);
}

.tk-carousel__arrow {
	width: 46px;
	height: 46px;
	flex: none;
	border: 1px solid var(--tk-ink);
	border-radius: var(--tk-radius-pill);
	background: transparent;
	cursor: pointer;
	position: relative;
	transition: background-color .2s, opacity .2s;
}
.tk-carousel__arrow:hover { background: var(--tk-ink); }
/* 矢羽を CSS で描く */
.tk-carousel__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid var(--tk-ink);
	border-right: 1.5px solid var(--tk-ink);
	transition: border-color .2s;
}
.tk-carousel__arrow:hover::before { border-color: #fff; }
.tk-carousel__arrow.-next::before { transform: translate(-60%, -50%) rotate(45deg); }
.tk-carousel__arrow.-prev::before { transform: translate(-40%, -50%) rotate(-135deg); }

.tk-carousel__dots { display: flex; gap: 10px; }
.tk-carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid var(--tk-ink);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color .2s;
}
.tk-carousel__dot.is-active {
	background: var(--tk-accent);
	border-color: var(--tk-accent);
}

.tk-carousel__status {
	margin: var(--tk-space-s) 0 0;
	text-align: center;
	font-family: var(--tk-font-en);
	font-size: 12px;
	letter-spacing: var(--tk-tracking-wide);
	color: var(--tk-muted);
}

/* カルーセル内では事例カードの罫線を二重にしない */
.tk-carousel__slide .tk-case__punch { margin-bottom: 0; }
.tk-carousel__slide .wp-block-buttons { margin-top: var(--tk-space-m); }

/* =========================================================================
   11. メンバー
   ========================================================================= */
/* 参考にしたのは shadcn の TeamSection
   （色地のカードに丸い顔写真を載せ、名前と役職を置く形）。
   参考から変えた点は README を参照。要点は 2 つ:
   - カードの角は直角のまま（角丸はボタンだけ、というサイト全体の方針）
   - 色はキャラクターごとに 1 トークンだけ持ち、地色・枠・輪はそこから作る

   グリッドは core/group の内側に当てる
   （外側だと子 1 個＝inner-container を並べることになり、幅が 1/3 になる）。 */
.tk-members > .wp-block-group__inner-container,
.tk-members:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tk-space-m);
	align-items: stretch;
}

/* キャラクターごとの色。ロボットのイラストから、一番よく使われている
   彩度の高い色を実測して拾ったもの。
   地色・枠・顔写真の輪はすべてこの 1 色から color-mix で作っているので、
   モノトーンに戻したいときは下の 3 行を var(--tk-ink) にすればよい。 */
.tk-member.-ohara  { --tk-member-color: #fd6176; }
.tk-member.-toyota { --tk-member-color: #98f453; }
.tk-member.-ueyama { --tk-member-color: #fc6500; }

.tk-member {
	position: relative;
	overflow: hidden;
	padding: var(--tk-space-m) var(--tk-space-s);
	text-align: center;
	background: color-mix(in srgb, var(--tk-member-color) 7%, var(--tk-paper));
	border: 1px solid color-mix(in srgb, var(--tk-member-color) 26%, var(--tk-paper));
	transition: transform .45s cubic-bezier(.22, 1, .36, 1), border-color .45s ease;
}
/* ブロックの下マージンが残っていると stretch がその分だけ縮む */
.tk-members > .wp-block-group__inner-container > .tk-member { margin-block: 0; }

.tk-member:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--tk-member-color) 62%, var(--tk-paper));
}

/* 参考コンポーネントの「下から立ち上がる波」。ホバーで下半分がふわっと色づく。 */
.tk-member::before {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 58%;
	background: linear-gradient(
		to top,
		color-mix(in srgb, var(--tk-member-color) 26%, transparent),
		transparent
	);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
	pointer-events: none;
}
.tk-member:hover::before { transform: scaleY(1); }

/* 波より前に出す。あわせて役職を下端にそろえる
   （名前が 1 行の人と 2 行の人が混ざると役職の行がずれるため） */
.tk-member > .wp-block-group__inner-container {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tk-member__photo {
	width: 160px;
	height: 160px;
	margin: 0 auto var(--tk-space-s);
	border-radius: 50%;
	overflow: hidden;
	background: var(--tk-paper);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--tk-member-color) 34%, var(--tk-paper));
	transition: box-shadow .45s ease, transform .45s cubic-bezier(.22, 1, .36, 1);
}
.tk-member:hover .tk-member__photo {
	box-shadow: 0 0 0 4px var(--tk-member-color);
	transform: scale(1.04);
}
.tk-member__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post_content .tk-member__name {
	font-size: 21px;
	color: var(--tk-ink);
	border: none; background: none; padding: 0;
	margin: 0 0 6px;
}
.post_content .tk-member__name::before,
.post_content .tk-member__name::after { content: none; }
/* ふりがなは括弧の途中で折り返すと読みにくいので、ひとかたまりで改行させる */
.tk-member__yomi {
	white-space: nowrap;
	font-size: .76em;
	color: var(--tk-muted);
}
.post_content .tk-member__role {
	margin: auto 0 0;
	font-size: 13px;
	color: var(--tk-muted);
	letter-spacing: .08em;
}

@media (prefers-reduced-motion: reduce) {
	/* 動きを減らす設定では浮き上がりと波をやめ、枠の色だけで反応させる */
	.tk-member,
	.tk-member__photo,
	.tk-member::before { transition: border-color .45s ease, box-shadow .45s ease; }
	.tk-member:hover { transform: none; }
	.tk-member:hover .tk-member__photo { transform: none; }
	.tk-member:hover::before { transform: scaleY(0); }
}

@media (max-width: 899px) {
	/* 3 列だと写真と名前が窮屈になるので 1 列にして写真を少し小さくする */
	.tk-members > .wp-block-group__inner-container,
	.tk-members:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tk-space-s);
	}
	.tk-member__photo { width: 132px; height: 132px; }
	.post_content .tk-member__name { font-size: 19px; }
}

/* =========================================================================
   12. 料金プラン（カード）

   参考にしたのは ServiceCarousel。構図はそのまま採っている
   （上に通し番号とアイコン、下に本文、あいだは伸び縮みする余白）。

   トンマナは、このサイトの決め（直角・白 + 青 1 色・影なし・明朝）に寄せた。
   参考から変えた点は README にまとめてある。
   ========================================================================= */
.tk-plans > .wp-block-group__inner-container,
.tk-plans:not(:has(> .wp-block-group__inner-container)) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--tk-space-m);
	align-items: stretch;
}
/* ブロックの下マージンが残っていると stretch がその分だけ縮む */
.tk-plans > .wp-block-group__inner-container > .tk-plan { margin-block: 0; }

/* --- カード --- */
.tk-plan {
	position: relative;
	min-height: 420px;
	padding: var(--tk-space-m);
	border: 1px solid var(--tk-line);
	/* 参考はカードごとにパステルのグラデーション。色を 3 つ増やすと
	   「白 + 青 1 色」が崩れるので、差し色を薄く敷いて濃さだけ変えていた。

	   セクションの帯を水色（--tk-band）にしたので、カードは白にしている。
	   帯が 4%、カード 01 の上端が 5% で、実測の差が 1% しかなく
	   （#f5f9ff と #f2f7ff）01 だけ帯に溶けていた。色は帯に持たせて、
	   カードは「帯の上に載る紙」として白で抜くほうが分離する。
	   FAQ のカードも帯の上の白なので、その形に揃う。

	   濃さはカードごとの --tk-plan-tint で決まる。0% は「混ぜない」＝白。
	   グラデーションに戻すなら 5% / 9% / 13%（元の値）を入れる。 */
	--tk-plan-tint: 0%;
	background:
		linear-gradient(
			to bottom,
			color-mix(in srgb, var(--tk-accent) var(--tk-plan-tint), var(--tk-paper)),
			var(--tk-paper) 70%
		);
}
.tk-plan.-n2 { --tk-plan-tint: 0%; }
.tk-plan.-n3 { --tk-plan-tint: 0%; }

/* 番号とアイコンを上、本文を下に寄せる（参考の justify-between と同じ狙い） */
.tk-plan > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.tk-plan__body {
	margin-top: auto;
	padding-top: var(--tk-space-m);   /* 上段と詰まりすぎないための最低幅 */
}
.tk-plan__body > .wp-block-group__inner-container > *:last-child { margin-bottom: 0; }

/* --- 上段：通し番号とアイコン --- */
.tk-plan__head { margin-bottom: 0; }
.tk-plan__num {
	font-family: var(--tk-font-en);
	font-size: 13px;
	letter-spacing: var(--tk-tracking-wide);
	color: var(--tk-faint);
	margin-bottom: var(--tk-space-m);
	font-variant-numeric: tabular-nums;
}
.tk-plan__icon {
	width: 44px;
	height: 44px;
	color: var(--tk-accent);
}
.tk-plan__icon svg { width: 100%; height: 100%; display: block; }

/* --- 下段：本文 --- */
.tk-plan__scale {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--tk-tracking-wide);
	color: var(--tk-accent);
	margin-bottom: 6px;
}
.post_content .tk-plan__name {
	/* 20px は「オーダーメイド業務システム」（13 字）がカードの内寸 269px に
	   収まる上限。21px だと最後の 1 字だけが 2 行目に落ちる */
	font-size: 20px;
	color: var(--tk-ink);
	border: none; background: none; padding: 0;
	margin: 0 0 var(--tk-space-s);
	line-height: 1.5;
}
.post_content .tk-plan__name::before,
.post_content .tk-plan__name::after { content: none; }

.tk-plan__lead {
	font-size: 15px;
	line-height: 1.9;
	color: var(--tk-text);
	margin-bottom: 6px;
}
.tk-plan__examples {
	font-size: 13px;
	line-height: 1.9;
	color: var(--tk-muted);
	margin-bottom: 0;
}

/* --- 期間と費用。金額をカードの締めに置く --- */
.tk-plan__facts {
	margin-top: var(--tk-space-m);
	padding-top: var(--tk-space-s);
	border-top: 1px solid var(--tk-line);
}
.tk-plan__row > .wp-block-group__inner-container,
.tk-plan__row:not(:has(> .wp-block-group__inner-container)) {
	display: flex;
	align-items: baseline;
	gap: var(--tk-space-s);
}
.tk-plan__label {
	flex: none;
	font-family: var(--tk-font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--tk-tracking-wide);
	color: var(--tk-faint);
	margin-bottom: 0;
}
.tk-plan__period {
	font-size: 15px;
	color: var(--tk-text);
	margin-bottom: 0;
}
.tk-plan__estimate {
	font-size: 11px;
	letter-spacing: var(--tk-tracking-wide);
	color: var(--tk-muted);
	margin: var(--tk-space-s) 0 2px;
}
.tk-plan__price { margin: 6px 0 0; }
.tk-plan__amount {
	font-family: var(--tk-font-en);
	font-size: clamp(30px, 3.4vw, 40px);
	font-weight: 300;
	letter-spacing: -.01em;
	line-height: 1.1;
	color: var(--tk-ink);
	font-variant-numeric: tabular-nums;
}
.tk-plan__unit {
	font-family: var(--tk-font-jp);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: var(--tk-tracking);
	color: var(--tk-text);
	margin-left: .15em;
}

/* --- 共通オプション。01〜03 の列から外れることを見た目でも示す --- */
.tk-plan.-option {
	min-height: 0;
	/* 01〜03 が白になったので、ここは色を敷いて「番号の外の 1 枚」だと
	   分かるようにしている。--tk-surface-2（#f0f0ee）は暖色のグレーで、
	   水色の帯（#f5f9ff）の上では濁って見えたため、差し色から作った青に
	   置き換えた。帯より濃くしてあるので、帯にも白いカードにも溶けない。 */
	background: color-mix(in srgb, var(--tk-accent) 8%, var(--tk-paper));
	border-color: transparent;
}
.tk-plan.-option .tk-plan__head {
	margin-bottom: var(--tk-space-m);
}
/* 横に長い 1 枚なので、番号・アイコンと本文を横に並べる */
.tk-plan.-option > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: var(--tk-space-m);
	align-items: start;
}
.tk-plan.-option .tk-plan__body { margin-top: 0; padding-top: 0; }
.tk-plan.-option .tk-plan__icon { width: 36px; height: 36px; }

/* 横に長い 1 枚なので、金額は本文の右に置く。
   下に置くと金額の右側が大きく空いて、間の抜けた見た目になる。 */
.tk-plan.-option .tk-plan__body > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: var(--tk-space-l);
	align-items: center;
}
.tk-plan.-option .tk-plan__scale,
.tk-plan.-option .tk-plan__name,
.tk-plan.-option .tk-plan__lead,
.tk-plan.-option .tk-plan__examples { grid-column: 1; }
.tk-plan.-option .tk-plan__facts {
	grid-column: 2;
	grid-row: 1 / -1;          /* 左の 4 行ぶんをまたいで縦中央に */
	margin-top: 0;
	padding-top: 0;
	border-top: none;
	text-align: right;
}

/* リビールを 1 枚ずつずらす（参考の staggerChildren に相当）。
   .tk-reveal の transition は .tk-js .tk-reveal 側で決まっているので、
   ここでは遅延だけを足す。 */
.tk-js .tk-plan.-n2 { transition-delay: .08s; }
.tk-js .tk-plan.-n3 { transition-delay: .16s; }
@media (prefers-reduced-motion: reduce) {
	.tk-js .tk-plan.-n2,
	.tk-js .tk-plan.-n3 { transition-delay: 0s; }
}

@media (max-width: 959px) {
	/* 3 列だと 1 枚が狭くなり、金額も説明文も詰まる。2 列にする */
	.tk-plans > .wp-block-group__inner-container,
	.tk-plans:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 599px) {
	.tk-plans > .wp-block-group__inner-container,
	.tk-plans:not(:has(> .wp-block-group__inner-container)) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tk-space-s);
	}
	/* 縦に積むので、カードの丈を固定する意味がなくなる */
	.tk-plan { min-height: 0; padding: var(--tk-space-s) var(--tk-space-s) var(--tk-space-m); }
	.tk-plan__head { margin-bottom: 0; }
	.tk-plan__icon { width: 36px; height: 36px; }
	.post_content .tk-plan__name { font-size: 19px; }

	/* オプションも縦積みに戻す（88px の列を残すと本文が細くなる） */
	.tk-plan.-option > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}
	/* 金額も本文の下へ。横に並べる幅が無い */
	.tk-plan.-option .tk-plan__body > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
		column-gap: 0;
	}
	.tk-plan.-option .tk-plan__facts {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--tk-space-s);
		padding-top: var(--tk-space-s);
		border-top: 1px solid var(--tk-line);
		text-align: left;
	}
}

/* =========================================================================
   13. ご相談から完成までの流れ（タイムライン）

   本体は SWELL の STEP ブロック（loos/step）。
   もともと「番号バッジ + 破線の縦線 + タイトル + 本文」という構造を持っているので、
   参考にしたコンポーネント（縦の背骨線に番号の丸が載り、各項目がカード）へは
   CSS だけで寄せられる。マークアップは触っていない。

   寸法は連動しているので、変えるときはまとめて直す:
     背骨の中心   = --tk-flow-spine-x
     番号の直径   = --tk-flow-dot
     リストの左余白 = --tk-flow-indent
   番号の left は「背骨の中心 - 直径/2 - 左余白」で決まる。
   ========================================================================= */
.tk-flow {
	--tk-flow-indent: 56px;
	--tk-flow-spine-x: 20px;
	--tk-flow-dot: 40px;
	align-items: center;   /* 参考コンポーネントと同じ。左の見出しを縦中央に置く */
}
.tk-flow > .wp-block-column:first-child  { flex-basis: 40%; }
.tk-flow > .wp-block-column:last-child   { flex-basis: 60%; }
.tk-flow .tk-h2 { margin-bottom: var(--tk-space-m); }

.tk-flow .swell-block-step {
	position: relative;
	padding-left: var(--tk-flow-indent);
}

/* 背骨の線。SWELL は項目ごとに破線を引くので、それを消してコンテナ側に 1 本引く */
.tk-flow .swell-block-step::before {
	content: "";
	position: absolute;
	left: calc(var(--tk-flow-spine-x) - 1px);
	top: 20px;
	bottom: 20px;
	width: 2px;
	background: var(--tk-ink);
}
.tk-flow .swell-block-step__item::before { content: none !important; }

/* 各ステップをカードにする */
.tk-flow .swell-block-step__item {
	padding: 26px 28px !important;
	margin-bottom: 14px !important;
	border: 1px solid var(--tk-line);
	background: var(--tk-paper);
}
.tk-flow .swell-block-step__item:last-child { margin-bottom: 0 !important; }

/* 番号を背骨の上に載せる。SWELL の counter(step) がそのまま数字になる */
.tk-flow .swell-block-step__number {
	left: calc(var(--tk-flow-spine-x) - var(--tk-flow-dot) / 2 - var(--tk-flow-indent));
	top: 26px;
	box-sizing: border-box;
	width: var(--tk-flow-dot);
	height: var(--tk-flow-dot);
	border-radius: 50% !important;
	background: var(--tk-accent) !important;
	color: #fff !important;
	/* 背骨の線を丸のまわりで抜く（参考コンポーネントの ring-4 相当）。
	   セクション地色で塗るので、-alt / 白地のどちらでも成立する */
	box-shadow: 0 0 0 5px var(--tk-section-bg, var(--tk-paper));
}
.tk-flow .swell-block-step__number .__label { display: none; }
.tk-flow .swell-block-step__number::after {
	font-family: var(--tk-font-en);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
}

/* タイトル。頭にチェックアイコンを CSS で描く（アイコンライブラリは使わない） */
.tk-flow .swell-block-step__title {
	position: relative;
	padding-left: 30px !important;
	font-size: 18px !important;
	letter-spacing: var(--tk-tracking);
	font-weight: 700;
	color: var(--tk-ink);
	margin-bottom: 10px !important;
}
.tk-flow .swell-block-step__title::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--tk-accent);
	border-radius: 50%;
}
.tk-flow .swell-block-step__title::after {
	content: "";
	position: absolute;
	left: 5px;
	top: .52em;
	width: 8px;
	height: 4px;
	border-left: 1.5px solid var(--tk-accent);
	border-bottom: 1.5px solid var(--tk-accent);
	transform: rotate(-45deg);
}

.tk-flow .swell-block-step__body {
	font-size: 15px;
	line-height: 2;
	color: var(--tk-muted);
	padding-left: 30px;
	/* SWELL は 599px 以下で本文を 48px 左へ引き出す
	   （blocks.css の @media not all and (min-width:600px) の中、
	   .swell-block-step:not(.is-style-big):not(.is-style-small)
	   > __item > __body { margin-left: -48px }）。
	   番号の下へ回り込ませるための指定だが、こちらは各ステップを
	   カードにしているので、引き出すとカードの外へ出てしまう。
	   実測で 375px のとき本文の箱がカードの左端より 27px 外に出ており、
	   文字がカードの縁から 3px の位置に来ていた。 */
	margin-left: 0 !important;
}
.tk-flow .swell-block-step__body p:last-child { margin-bottom: 0; }

/* カラムが縦積みになる幅では、見出しと本文の間に余白を入れる */
@media (max-width: 781px) {
	.tk-flow { align-items: stretch; }
	.tk-flow > .wp-block-column:first-child { margin-bottom: var(--tk-space-m); }
}
@media (max-width: 599px) {
	.tk-flow {
		--tk-flow-indent: 44px;
		--tk-flow-spine-x: 16px;
		--tk-flow-dot: 32px;
	}
	.tk-flow .swell-block-step__item { padding: 22px 20px !important; }
	.tk-flow .swell-block-step__number { top: 22px; }
	.tk-flow .swell-block-step__number::after { font-size: 13px; }
}

/* セクション地色を変数に出しておく。番号まわりの抜きに使う */
.tk-section        { --tk-section-bg: var(--tk-paper); }
.tk-section.-alt,
.tk-section:not(.-alt):not(.-ink) + .tk-section.-cta { --tk-section-bg: var(--tk-band); }
.tk-section.-ink   { --tk-section-bg: var(--tk-ink); }

/* SWELL の FAQ ブロックはもう使っていないが、エディタから手で挿入されたときに
   角丸だけ浮かないようにしておく（FAQ 本体は下の .tk-faq） */
.swell-block-faq .faq_q::before,
.swell-block-faq .faq_a::before { border-radius: 0 !important; }

/* =========================================================================
   13b. FAQ アコーディオン

   WordPress コアの core/details（<details>/<summary>）で組んでいる。
   開閉・キーボード操作・支援技術への対応はブラウザ標準なので JS は無い。
   全項目で name 属性を揃えているため、対応ブラウザでは 1 つ開くと他が閉じる。

   角丸にしたい場合は --tk-faq-radius だけ変えればよい。
   サイト全体が「角丸はボタンだけ」の方針なので、既定は 0。
   ========================================================================= */
.tk-faq {
	--tk-faq-radius: 0px;
	max-width: 780px;
	margin-inline: auto;
}

.tk-faq__item {
	border: 1px solid var(--tk-line);
	border-radius: var(--tk-faq-radius) !important;
	background: var(--tk-paper);
	margin-bottom: 12px;
	/* block-size を auto へ遷移させるために必要（未対応ブラウザでは無視される） */
	interpolate-size: allow-keywords;
}
.tk-faq__item:last-child { margin-bottom: 0; }

/* --- 質問（トリガー） ---
   flex は使わない。バッジを「自分の幅だけのピル」かつ「独立した行」にしたいが、
   flex では行を分けるための flex-basis:100% が width:fit-content に勝ってしまい、
   バッジが全幅の帯になる。block レイアウト + 絶対配置のシェブロンが素直。 */
.tk-faq__item > summary {
	display: block;
	position: relative;
	padding: 22px 60px 22px 26px;   /* 右はシェブロンの領域 */
	cursor: pointer;
	list-style: none;               /* 既定の三角マーカーを消す */
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: var(--tk-tracking);
	color: var(--tk-ink);
	transition: background-color .2s;
}
.tk-faq__item > summary::-webkit-details-marker { display: none; }
.tk-faq__item > summary:hover { background: var(--tk-surface); }
.tk-faq__item > summary:hover > strong:first-child { background: var(--tk-surface-2); }
.tk-faq__item > summary:focus-visible {
	outline: 2px solid var(--tk-ink);
	outline-offset: -2px;
}
.tk-faq__item[open] > summary { border-bottom: 1px solid var(--tk-line); }

/* カテゴリバッジ。summary の先頭に置いた <strong> をピルに見せている。
   display:block なので自然に 1 行を占め、width:fit-content で中身の幅に収まる。 */
.tk-faq__item > summary > strong:first-child {
	display: block;
	width: fit-content;
	margin-bottom: 10px;
	padding: 3px 12px;
	border-radius: var(--tk-radius-pill);
	background: var(--tk-surface);
	color: var(--tk-muted);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .08em;
	line-height: 1.7;
}


/* --- シェブロン（CSS で描く。アイコン画像もライブラリも使わない） --- */
.tk-faq__item > summary::after {
	content: "";
	position: absolute;
	right: 26px;
	top: 28px;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid var(--tk-muted);
	border-bottom: 1.5px solid var(--tk-muted);
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .25s ease, border-color .25s;
}
.tk-faq__item[open] > summary::after {
	transform: rotate(-135deg);
	border-color: var(--tk-accent);
}

/* --- 回答 --- */
.tk-faq__item > *:not(summary) {
	padding: 22px 26px 26px;
	margin: 0;
	font-size: 15px;
	line-height: 2.05;
	color: var(--tk-muted);
}

/* 開閉をなめらかに。::details-content と interpolate-size に未対応の
   ブラウザでは、単に瞬時に開閉するだけで壊れない */
.tk-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size .3s ease, content-visibility .3s allow-discrete;
}
.tk-faq__item[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
	.tk-faq__item::details-content { transition: none; }
	.tk-faq__item > summary::after { transition: none; }
}

@media (max-width: 599px) {
	.tk-faq__item > summary { padding: 18px 48px 18px 20px; font-size: 16px; }
	.tk-faq__item > summary::after { right: 20px; top: 24px; }
	.tk-faq__item > *:not(summary) { padding: 18px 20px 22px; }
}

/* --- 末尾の問い合わせ誘導（参考コンポーネントの contactInfo 相当）。
       直後に黒い CTA が来るページでは付けていない --- */
.tk-faq__contact { margin-top: var(--tk-space-l); text-align: center; }
.tk-faq__outro { font-size: 15px; color: var(--tk-muted); margin-bottom: var(--tk-space-s); }
.tk-faq__contact .wp-block-buttons { justify-content: center; }

/* 中央寄せのリード文 */
.tk-lead.-center { text-align: center; margin-inline: auto; }

/* =========================================================================
   14. 表（会社概要）
   ========================================================================= */
.post_content .tk-table table {
	border-collapse: collapse;
	width: 100%;
	border: none;
}
.post_content .tk-table th,
.post_content .tk-table td {
	border: none;
	border-bottom: 1px solid var(--tk-line);
	padding: 22px 0;
	font-size: 15px;
	line-height: 1.95;
	text-align: left;
	vertical-align: top;
	background: transparent;
}
.post_content .tk-table tr:first-child th,
.post_content .tk-table tr:first-child td { border-top: 1px solid var(--tk-line); }
.post_content .tk-table th {
	font-weight: 700;
	white-space: nowrap;
	width: 11em;
	color: var(--tk-ink);
}
.post_content .tk-table td { color: var(--tk-muted); }
@media (max-width: 599px) {
	.post_content .tk-table th { width: auto; white-space: normal; padding-bottom: 0; border-bottom: none; }
	.post_content .tk-table td { padding-top: 4px; }
	.post_content .tk-table tr:first-child td { border-top: none; }
}

/* =========================================================================
   15. お問い合わせフォーム（Contact Form 7）
   ========================================================================= */
.tk-form .wpcf7-form label {
	display: block;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: var(--tk-tracking);
	margin-bottom: 10px;
	color: var(--tk-ink);
}
.tk-form .wpcf7-form p { margin-bottom: var(--tk-space-m); }
.tk-form .wpcf7-form-control:not(.wpcf7-submit):not(.wpcf7-radio) {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--tk-line);
	border-radius: 0;
	padding: 14px 2px;
	font-size: 16px;
	font-family: inherit;
	background: transparent;
	transition: border-color .25s;
}
.tk-form .wpcf7-form-control:not(.wpcf7-submit):focus {
	outline: none;
	border-bottom-color: var(--tk-accent);
}
.tk-form .wpcf7-list-item { margin: 0 28px 0 0; }
.tk-form .wpcf7-list-item-label { font-weight: 400; }
/* 送信ボタンも主要ボタンと同じ見え方に揃える
   （通常＝白地・青文字・青枠 / ホバー＝青地・白文字） */
.tk-form .wpcf7-submit {
	/* CF7 は [submit] を <p> で包まないため、そのままだと直前の行と
	   隙間なく並ぶ（実測 0px）。入力欄は余白 0 で積んでいるので、
	   ボタンだけは離して「ここで送る」と分かるようにする。 */
	margin-top: var(--tk-space-m);
	background: #fff;
	color: var(--tk-accent);
	border: 1px solid var(--tk-accent);
	border-radius: var(--tk-radius-pill);
	padding: 19px 56px;
	font-size: 15px;
	/* ボタンと同じ理由で 700 */
	font-weight: 700;
	font-family: inherit;
	letter-spacing: var(--tk-tracking);
	cursor: pointer;
	transition: background .25s, color .25s;
}
.tk-form .wpcf7-submit:hover { background: var(--tk-accent); color: #fff; }
.tk-form .tk-required {
	display: inline-block;
	font-family: var(--tk-font-en);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: var(--tk-tracking-wide);
	color: var(--tk-muted);
	margin-left: .7em;
	vertical-align: 1px;
}

/* =========================================================================
   16. フッターの会社情報

   セットアップスクリプトが footer_box1 にカスタムHTMLウィジェットを置く。
   タイトルは冪等判定用の目印なので画面には出さない。
   ========================================================================= */
#footer .widget_custom_html .c-widget__title { display: none; }
.tk-footer__name {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: var(--tk-tracking);
	margin-bottom: 6px;
}
.tk-footer__addr { font-size: 13px; margin-bottom: var(--tk-space-s); }
.tk-footer__tag  { font-size: 13px; color: #9d9d9d; margin-bottom: 0; }

/* =========================================================================
   17. レイアウト補助
   ========================================================================= */
/* 1カラム時、SWELL の記事エリアの左右余白を打ち消して全幅セクションを成立させる */
.page .l-mainContent__inner > .post_content { padding-left: 0; padding-right: 0; }
.page .post_content > .tk-section:last-child { margin-bottom: 0; }
/* コンテンツ下の余白は SWELL のページ設定 swell_meta_no_mb で消している
   （scripts/setup-site.php が設定する）。CSS では触らない。 */

/* フロントページでは SWELL のページタイトルを出さない（ヒーローの h1 を使う） */
.home .p-articleHead,
.home .c-pageTitle,
.home .l-articleTitle { display: none; }

/* カラムの間隔 */
.tk-container .wp-block-columns { gap: var(--tk-space-l); margin-bottom: var(--tk-space-l); }

/* 反転セクション（CTA）は中央揃え */
.tk-section.-ink .tk-container { text-align: center; }
.tk-section.-ink .tk-container .tk-lead { margin-left: auto; margin-right: auto; }
.tk-section.-ink .tk-container .tk-eyebrow { justify-content: center; }
.tk-section.-ink .wp-block-buttons { justify-content: center; }

/* 最後の CTA。白地・中央ぞろえ・上に細い罫線。
   以前は -ink（黒地）だったが、フッターも黒地のため 2 つが繋がって
   1 つの黒い塊に見えていた。白地にしてフッターと分けている。
   見出し・ボタン・ラベルの色は、指定を外したことで他のセクションと
   同じもの（白地に青文字・青枠のボタン）に戻る。

   上に罫線を引いているのは、直前のセクションが白のページがあるため。
   トップは FAQ（帯）の次なので色で分かれるが、サービス・料金・会社概要は
   白いセクションの次に来るので、罫線が無いと境目が消える。

   中央ぞろえの 4 行は -ink と同じ内容。黒地に戻すときは
   gen_content.py の CONTACT_CTA の mod を "-ink" にするだけでよい。 */
.tk-section.-cta { border-top: 1px solid var(--tk-line); }
.tk-section.-cta .tk-container { text-align: center; }
.tk-section.-cta .tk-container .tk-lead { margin-left: auto; margin-right: auto; }
.tk-section.-cta .tk-container .tk-eyebrow { justify-content: center; }
.tk-section.-cta .wp-block-buttons { justify-content: center; }

/* 中央寄せ見出しのセクションでは、点付きラベルも中央に揃える */
.tk-container:has(.tk-h2.-center) .tk-eyebrow { justify-content: center; }

/* =========================================================================
   19. 差し色のまとめ（リンク・フォーカス）

   差し色の指定はすべて var(--tk-accent) 経由。
   モノトーンに戻すときはトークン 1 行を var(--tk-ink) に変えるだけでよい。

   差し色を当てている場所:
     セクションラベルの点 / ヒーローの「つくっと。」の抜き / 主要 CTA ボタン
     ヘッダー右上の CTA / お悩みリストのチェック / できることカードのアイコン
     Before・After の AFTER ラベル / タイムラインの番号とチェック
     FAQ の開いているシェブロン / カルーセルの現在位置
     本文リンク / フォーカス表示
   ========================================================================= */

/* 本文中のリンク。ナビやボタンは別に指定しているので、記事本文だけに当てる */
.post_content a:not(.wp-block-button__link):not(.tk-btn) {
	color: var(--tk-accent);
	text-decoration-color: color-mix(in srgb, var(--tk-accent) 45%, transparent);
}
.post_content a:not(.wp-block-button__link):not(.tk-btn):hover {
	text-decoration-color: var(--tk-accent);
}

/* キーボード操作時のフォーカス表示。差し色にすると位置が分かりやすい */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--tk-accent);
	outline-offset: 2px;
}
/* 既に個別指定していた箇所も差し色に揃える */
.tk-faq__item > summary:focus-visible,
.tk-carousel[data-tk-ready] .tk-carousel__track:focus-visible {
	outline-color: var(--tk-accent);
}

/* 黒地のセクションでは差し色のコントラストが足りない（#0265fc 対 #141414 で
   約 3.7:1）。白のままにして可読性を優先する。 */
.tk-section.-ink .tk-btn .wp-block-button__link {
	background: #fff;
	color: var(--tk-ink);
	border-color: #fff;
}
.tk-section.-ink .tk-btn .wp-block-button__link:hover {
	background: transparent;
	color: #fff;
}
.tk-section.-ink .tk-eyebrow::before { background: #fff; }

/* =========================================================================
   19. パンくずリストを出さない

   6 ページの平らな構成（すべてトップの直下）なので、「ホーム > サービス」
   と出しても案内の役に立たない。シンプルさを優先して消している。

   SWELL には「表示しない」設定が無く、位置が「ページ上部」「ページ下部」の
   2 択しかない（pos_breadcrumb）。そのため CSS で消す。

   あわせて構造化データの BreadcrumbList も外している（inc/seo.php）。
   構造化データは「ページに実際に見えている内容」と一致していることが条件で、
   見えないものを申告したままにしない。
   ========================================================================= */
.p-breadcrumb { display: none; }

/* =========================================================================
   20. スマホの開閉メニューの「MENU」見出し

   SWELL は `.c-widget__title.-spmenu` に `--color_main`（#111111）を敷いて
   白文字にする。メニューを白地にすると、この黒い帯だけが浮いて重く見える。
   セクションの帯と同じ薄い青にして、文字は本文の黒にする。

   色は --tk-band を使っているので、差し色を変えれば追随する。
   （SWELL の設定欄はカラーコードしか受け取らないが、ここは CSS なので
     変数が使える）

   詳細度は `.p-spMenu` を足して 0,3,0 にしてある。SWELL 側は 0,2,0 なので、
   読み込み順に関係なくこちらが勝つ。
   ========================================================================= */
.p-spMenu .c-widget__title.-spmenu {
	background: var(--tk-band);
	color: var(--tk-ink);
}