/* Trauma Info — セラピスト一覧
   配色は会社サイトの子テーマ変数（--tb-navy / --tb-accent）に合わせる */
:root {
	--ti-navy: #1f3a5f;
	--ti-accent: #c9a45c;
	--ti-line: #e3e6eb;
	--ti-muted: #5b6672;
}

.ti-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1rem;
	margin: 1.5rem 0;
}

.ti-card {
	border: 1px solid var(--ti-line);
	border-left: 3px solid var(--ti-navy);
	border-radius: 2px;
	padding: 1rem 1.1rem;
	background: #fff;
}

.ti-card-name {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ti-navy);
	margin: 0 0 .3rem;
	line-height: 1.5;
}

.ti-card-org {
	font-size: .88rem;
	color: var(--ti-muted);
	margin: 0 0 .7rem;
	line-height: 1.6;
}

.ti-card-meta {
	margin: 0;
	font-size: .86rem;
	line-height: 1.7;
}

.ti-card-meta dt {
	float: left;
	width: 4.2em;
	clear: left;
	color: var(--ti-muted);
	font-weight: 400;
}

.ti-card-meta dd {
	margin: 0 0 .2rem 4.4em;
}

.ti-card-link {
	margin: .8rem 0 0;
	font-size: .86rem;
}

.ti-card-link a {
	display: inline-block;
	padding: .3rem .9rem;
	border: 1px solid var(--ti-navy);
	border-radius: 2px;
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-card-link a:hover {
	background: var(--ti-navy);
	color: #fff;
}

/* ===== セラピストの行表示（2026-09-20 UIデザイナー モック p4） =====
   716件をカードで並べると1画面に3件しか入らないので、行で並べる。
   カードの定義（.ti-card）は個別ページ・検索結果でまだ使うので残す。 */
.ti-therapist-rows {
	margin: .4rem 0 1.5rem;
}

.ti-therapist-row {
	padding: .85rem 0 .85rem .7rem;
	border-top: 1px solid var(--ti-line);
}

.ti-therapist-row:first-child {
	border-top: 0;
}

/*
 * 紺の罫は**名前の左に文字の高さ分だけ**（UIデザイナー明示）。
 * 行全体の高さに引くと縦線が並んで煩い。
 */
.ti-therapist-row .t {
	position: relative;
	margin: 0;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ti-navy);
}

.ti-therapist-row .t::before {
	content: "";
	position: absolute;
	left: -.7rem;
	top: .18em;
	bottom: .18em;
	width: 3px;
	background: var(--ti-navy);
}

.ti-therapist-row .t a {
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-therapist-row .t a:hover {
	text-decoration: underline;
}

.ti-therapist-row .o {
	margin: .1rem 0 0;
	font-size: .79rem;
	line-height: 1.5;
	color: var(--ti-muted);
}

.ti-therapist-row .m {
	margin: .22rem 0 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--ti-muted);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
}

.ti-therapist-row .ti-row-orgtype.is-limited {
	color: #8a5a2b;
}

.ti-therapist-row .ti-row-hp {
	color: #33587f;
	text-decoration: none;
}

.ti-therapist-row .ti-row-hp:hover {
	text-decoration: underline;
}

/*
 * セラピスト行のメタ情報に強弱を付ける（UIデザイナー案1 / 2026-09-21 msg 4490777）。
 * 性質の違う4つ（場所・資格・機関の種類・外部リンク）が同じ大きさ同じ色で
 * 横並びだったので、読む順序が決まらなかった。場所を紺の太字で最初に読ませ、
 * 資格と機関の種類を薄い灰に落とし、区切りに1pxの縦線を入れる。
 * **HTMLは変えていない**（既存の .ti-row-* クラスにそのまま当たる）。
 */
.ti-therapist-row .m { gap: 4px 0; }

.ti-therapist-row .m > *:not(:first-child)::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: .85em;
	background: #c3cad2;
	margin: 0 .6em;
	vertical-align: -.08em;
}

.ti-therapist-row .ti-row-loc {
	color: var(--ti-navy);
	font-weight: 600;
}

.ti-therapist-row .ti-row-cred,
.ti-therapist-row .ti-row-orgtype {
	color: #8a929c;
}
/* `.ti-row-orgtype.is-limited`（掲載範囲が限定＝茶色）はクラス3つで
   詳細度が上なので、この薄い灰には負けない（前方にあっても効く）。 */

/*
 * 折り返す幅では縦線を出さない（行頭に縦線だけが残るため）。
 * 実機の390px幅で出た分岐。
 */
@media (max-width: 720px) {
	.ti-therapist-row .m { gap: 2px 10px; }
	.ti-therapist-row .m > *:not(:first-child)::before { display: none; }
}

/* 療法はチップ。色は増やさず淡いグレーの面のみ */
.ti-row-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .22rem;
	margin: .3rem 0 0;
}

.ti-chip {
	background: #eef1f4;
	color: #44505c;
	font-size: .71rem;
	padding: .08rem .5rem;
	border-radius: 2px;
	white-space: nowrap;
	text-decoration: none;
}

a.ti-chip:hover {
	background: #e2e7ed;
	text-decoration: underline;
}

.ti-order-note {
	margin: .2rem 0 .4rem;
	font-size: .78rem;
	color: #8a939c;
}

.ti-row-note {
	margin: .28rem 0 0;
	font-size: .76rem;
	line-height: 1.6;
	color: #7a848e;
}

/* 都道府県索引：全角スペース区切りで横に流す */
.ti-pref-index {
	margin: 1.5rem 0;
	font-size: .92rem;
	line-height: 2.1;
}

.ti-pref-item {
	display: inline;
	text-decoration: none;
	color: var(--ti-navy);
	white-space: nowrap;
}

a.ti-pref-item:hover {
	text-decoration: underline;
}

.ti-pref-count {
	font-size: .8rem;
	color: var(--ti-muted);
	margin-left: .25em;
}

.ti-pref-empty {
	color: #a8b0b9;
	background: #fafbfc;
}

/* 免責 */
.ti-disclaimer {
	margin: 2.5rem 0 0;
	padding: 1.2rem 1.3rem;
	background: #f7f8fa;
	border-top: 2px solid var(--ti-accent);
	font-size: .84rem;
	line-height: 1.8;
	color: #3d4752;
}

.ti-disclaimer h2 {
	font-size: .95rem;
	font-weight: 600;
	margin: 0 0 .6rem;
	color: var(--ti-navy);
	border: none;
	padding: 0;
	background: none;
}

.ti-disclaimer ul {
	margin: 0 0 .9rem 1.2em;
	padding: 0;
}

.ti-disclaimer li {
	margin-bottom: .3rem;
}

.ti-crisis {
	margin: 0;
	padding: .7rem .9rem;
	background: #fff;
	border-left: 3px solid var(--ti-accent);
	font-size: .82rem;
}

.ti-archive-lead {
	font-size: .9rem;
	color: var(--ti-muted);
	margin-bottom: 1rem;
	line-height: 1.8;
}

.ti-empty {
	padding: 1.2rem;
	background: #f7f8fa;
	font-size: .9rem;
	color: var(--ti-muted);
}

/* 掲載申請・取り下げフォーム */
.ti-form-wrap {
	max-width: 640px;
	margin: 1.5rem 0;
}

.ti-form-lead {
	font-size: .88rem;
	line-height: 1.9;
	padding: 1rem 1.1rem;
	background: #f7f8fa;
	border-left: 3px solid var(--ti-accent);
}

.ti-form-notice {
	padding: .9rem 1.1rem;
	margin-bottom: 1.2rem;
	background: #eef4f9;
	border-left: 3px solid var(--ti-navy);
	font-size: .9rem;
	line-height: 1.8;
}

.ti-error {
	color: #a12b2b;
}

.ti-field {
	margin: 1.3rem 0;
	border: none;
	padding: 0;
}

.ti-field label,
.ti-field legend {
	display: block;
	font-size: .88rem;
	font-weight: 600;
	color: var(--ti-navy);
	margin-bottom: .35rem;
	padding: 0;
}

.ti-field fieldset label,
fieldset.ti-field label {
	font-weight: 400;
	display: inline;
	line-height: 2;
}

.ti-req {
	font-size: .72rem;
	font-weight: 400;
	color: #a12b2b;
	margin-left: .4em;
}

.ti-field input[type="text"],
.ti-field input[type="url"],
.ti-field input[type="email"],
.ti-field textarea {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid #c6ccd4;
	border-radius: 2px;
	font-size: .95rem;
	box-sizing: border-box;
}

.ti-field input:focus,
.ti-field textarea:focus {
	border-color: var(--ti-navy);
	outline: none;
}

.ti-help {
	display: block;
	font-size: .78rem;
	color: var(--ti-muted);
	line-height: 1.7;
	margin-top: .3rem;
}

.ti-submit button {
	padding: .7rem 2.2rem;
	background: var(--ti-navy);
	color: #fff;
	border: none;
	border-radius: 2px;
	font-size: .95rem;
	letter-spacing: .05em;
	cursor: pointer;
}

.ti-submit button:hover {
	background: #16293f;
}

/* トップの入口2分割 */
.ti-gate {
	display: grid;
	/* 入口が4枚になったので2列固定（2026-09-19）。auto-fit だと広い画面で
	   4列に割れてカード1枚が細くなり、見出しが2行に折れる。 */
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	margin: 1.5rem 0 2rem;
}

@media screen and (max-width: 700px) {
	.ti-gate { grid-template-columns: 1fr; }
}

.ti-gate a {
	display: block;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--ti-line);
	border-top: 3px solid var(--ti-navy);
	border-radius: 2px;
	text-decoration: none;
	color: #3d4752;
	font-size: .86rem;
	line-height: 1.9;
	background: #fff;
}

.ti-gate a:hover {
	border-color: var(--ti-navy);
}

.ti-gate strong {
	display: block;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--ti-navy);
	margin-bottom: .5rem;
	letter-spacing: .02em;
}

/* 一覧の追加要素 */
.ti-card-name a {
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-card-name a:hover {
	text-decoration: underline;
}

.ti-card-meta dd a {
	color: #33587f;
	text-decoration: none;
	border-bottom: 1px dotted #9db2c6;
}

.ti-filter {
	margin: 2rem 0 0;
	padding: 1.1rem 1.2rem;
	background: #f7f8fa;
	border-radius: 2px;
}

.ti-filter h2 {
	font-size: .92rem;
	font-weight: 600;
	color: var(--ti-navy);
	margin: 0 0 .7rem;
	padding: 0;
	border: none;
	background: none;
}

.ti-filter-items {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.ti-filter-items a {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	padding: .35rem .8rem;
	background: #fff;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	font-size: .85rem;
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-filter-items a:hover {
	border-color: var(--ti-navy);
}

.ti-breadcrumb {
	font-size: .82rem;
	color: var(--ti-muted);
	margin-bottom: 1rem;
}

.ti-breadcrumb a {
	color: #33587f;
}

.ti-single .ti-card {
	margin-bottom: 1.5rem;
}

.ti-single-body {
	font-size: .92rem;
	line-height: 1.9;
	margin: 1.5rem 0;
}

.ti-backlink {
	margin: 1.8rem 0 0;
	font-size: .86rem;
}

.ti-pagination {
	margin: 1.5rem 0;
}

/* 地方ごとの索引 */
.ti-region-index {
	margin: 1.5rem 0;
}

.ti-region {
	margin-bottom: 1.6rem;
	padding-bottom: 1.2rem;
	border-bottom: 1px solid var(--ti-line);
}

.ti-region:last-child {
	border-bottom: none;
}

.ti-region-name {
	display: flex;
	align-items: baseline;
	gap: .6em;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ti-navy);
	margin: 0 0 .7rem;
	padding: 0 0 0 .6rem;
	border: none;
	border-left: 3px solid var(--ti-accent);
	background: none;
}

.ti-region-name a {
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-region-name a:hover {
	text-decoration: underline;
}

.ti-region-empty {
	color: #a8b0b9;
	border-left-color: var(--ti-line);
	font-weight: 400;
}

.ti-region-empty .ti-pref-count {
	font-size: .78rem;
}

.ti-region .ti-pref-index {
	margin: 0;
}

.ti-filter-empty {
	display: inline-flex;
	align-items: baseline;
	gap: .4em;
	padding: .35rem .8rem;
	border: 1px dashed var(--ti-line);
	border-radius: 2px;
	font-size: .85rem;
	color: #a8b0b9;
}

.ti-count {
	margin: .3rem 0 0;
	font-size: .86rem;
	color: var(--ti-navy);
}

/* 技法のチェックリスト（新規掲載・修正のときだけ表示） */
.ti-methods[hidden] {
	display: none;
}

.ti-method-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: .3rem .9rem;
	margin: .6rem 0 1rem;
	padding: .9rem 1rem;
	background: #f7f8fa;
	border: 1px solid var(--ti-line);
}

.ti-method-grid label {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.6;
	color: inherit;
	margin: 0;
}

.ti-method-grid input[type="checkbox"] {
	margin-top: .25rem;
	flex: 0 0 auto;
}

.ti-method-other-label {
	margin-top: .4rem;
}

/* ===========================================================
   研修一覧・研修カレンダー（2026-09-17 追加）
   =========================================================== */

.ti-training-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1rem;
	margin: 1rem 0 2rem;
}

.ti-training-card .ti-card-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ti-navy);
	margin: 0 0 .6rem;
}

.ti-training-card .ti-card-title a {
	color: inherit;
	text-decoration: none;
}

.ti-training-card .ti-card-title a:hover {
	text-decoration: underline;
}

/*
 * 【2026-09-20 衝突の解消】ここは研修カード専用の組み方（2列グリッド）。
 * セレクタが `.ti-card-meta` のままだと、41行目のセラピスト用の定義
 * （dt を float させる組み方）を後勝ちで上書きし、**セラピスト一覧にも
 * この grid が当たっていた。**まったく別の設計が同じ名前で衝突していたので、
 * 研修カードの中だけに効くよう限定する。
 */
.ti-training-card .ti-card-meta {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: .25rem .8rem;
	margin: 0;
	font-size: .86rem;
	line-height: 1.7;
}

.ti-training-card .ti-card-meta dt {
	float: none;
	width: auto;
	color: var(--ti-muted);
	font-weight: 400;
	margin: 0;
}

.ti-training-card .ti-card-meta dd {
	margin: 0;
}

.ti-training-date {
	font-weight: 600;
}

/* 終了した研修は沈ませる（消さないのは、次回告知待ちが分かるようにするため） */
.ti-card.is-past {
	border-left-color: #c3c9d1;
	background: #fafbfc;
}

.ti-card.is-past .ti-card-title {
	color: var(--ti-muted);
}

/* 受付状況のバッジ。「不明」は出力しない */
.ti-badge {
	display: inline-block;
	margin-left: .4em;
	padding: .1em .55em;
	border-radius: 2px;
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	vertical-align: .12em;
	white-space: nowrap;
}

.ti-badge-open {
	background: #1f6b46;
	color: #fff;
}

.ti-badge-closed {
	background: #f0f1f3;
	color: var(--ti-muted);
	border: 1px solid var(--ti-line);
}

.ti-badge-past {
	background: #f0f1f3;
	color: #8a929c;
	border: 1px solid var(--ti-line);
}

.ti-section-title {
	font-size: 1.15rem;
	color: var(--ti-navy);
	border-bottom: 2px solid var(--ti-line);
	padding-bottom: .4rem;
	margin: 2rem 0 .8rem;
}

.ti-section-title .ti-count {
	display: inline-block;
	margin-left: .6em;
	font-size: .8rem;
	font-weight: 400;
	color: var(--ti-muted);
}

.ti-past-title {
	color: var(--ti-muted);
	margin-top: 2.5rem;
}

.ti-past-lead {
	font-size: .85rem;
	color: var(--ti-muted);
}

.ti-btn {
	display: inline-block;
	padding: .45rem 1.1rem;
	background: var(--ti-navy);
	color: #fff;
	border-radius: 2px;
	font-size: .88rem;
	text-decoration: none;
}

.ti-btn:hover {
	background: #16293f;
	color: #fff;
}

/* 一覧カードから申込ページへ直接飛ぶ導線 */
.ti-card-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .9rem;
	margin: .9rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--ti-line);
}

.ti-btn-apply {
	padding: .38rem .95rem;
	font-size: .84rem;
}

.ti-btn-apply::after {
	content: ' ↗';
	font-size: .8em;
}

.ti-card-detail {
	font-size: .84rem;
	color: var(--ti-navy);
}

/* 主導線ではないボタン（研修一覧からフォームへ等） */
.ti-btn-sub {
	background: #fff;
	color: var(--ti-navy);
	border: 1px solid var(--ti-navy);
}

.ti-btn-sub:hover {
	background: var(--ti-navy);
	color: #fff;
}

.ti-training-switch {
	margin: 1rem 0 1.2rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .7rem;
}

/* 研修フォーム：セラピスト用フォームへの案内 */
.ti-training-form-wrap .ti-form-note {
	font-size: .88rem;
	color: #555;
}

/* 詳細ページの定義リスト */
.ti-detail {
	display: grid;
	grid-template-columns: 7em 1fr;
	gap: .5rem 1rem;
	margin: 1.2rem 0 1.5rem;
	font-size: .92rem;
	line-height: 1.8;
}

.ti-detail dt {
	color: var(--ti-muted);
	font-weight: 400;
	margin: 0;
}

.ti-detail dd {
	margin: 0;
}

.ti-training-days {
	margin: 0;
	padding-left: 1.2em;
}

.ti-note-inline {
	margin: .4rem 0 0;
	font-size: .83rem;
	color: var(--ti-muted);
}

.ti-source {
	font-size: .82rem;
	color: var(--ti-muted);
}

/* ---- カレンダー ---- */

.ti-calendar-wrap {
	margin: 1.2rem 0 2rem;
}

.ti-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .8rem;
	margin-bottom: .6rem;
}

.ti-calendar-title {
	font-size: 1.2rem;
	color: var(--ti-navy);
	margin: 0;
	text-align: center;
	flex: 1 1 auto;
}

.ti-calendar-nav a {
	font-size: .86rem;
	text-decoration: none;
	white-space: nowrap;
}

.ti-calendar-nav .is-empty {
	display: inline-block;
	min-width: 1px;
}

.ti-calendar {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: .88rem;
}

.ti-calendar th {
	padding: .45rem 0;
	background: #f7f8fa;
	border: 1px solid var(--ti-line);
	font-size: .85rem;
	font-weight: 600;
	color: var(--ti-muted);
	text-align: center;
}

/*
 * セルの高さ。**カレンダーは需要が大きいので小さくしない**
 * （XXXさん 2026-09-20 msg 4479278）。5.2rem 固定だと研修が2件入る日で
 * すぐ溢れていた。min-height にして中身で伸ばす。
 */
.ti-calendar td {
	vertical-align: top;
	min-height: 7.5rem;
	height: 7.5rem;
	padding: .35rem .4rem;
	border: 1px solid var(--ti-line);
	background: #fff;
}

.ti-calendar .ti-dow-0 { color: #b04a4a; }
.ti-calendar .ti-dow-6 { color: #3a5f8f; }

.ti-cal-empty {
	background: #fbfbfc;
}

.ti-cal-date {
	display: block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ti-muted);
	margin-bottom: .15rem;
}

.ti-cal-day.is-today {
	background: #fffdf5;
	box-shadow: inset 0 0 0 2px var(--ti-accent);
}

.ti-cal-day.has-events .ti-cal-date {
	color: var(--ti-navy);
}

.ti-cal-events {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ti-cal-events li {
	margin: 0 0 .2rem;
}

.ti-cal-events a {
	/* 長い研修名はセル内で4行に収める（-webkit-box が必要） */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: .25rem .4rem;
	background: var(--ti-navy);
	color: #fff;
	border-radius: 2px;
	font-size: .82rem;
	line-height: 1.45;
	text-decoration: none;
}

.ti-cal-events a:hover {
	background: #16293f;
	color: #fff;
}

.ti-cal-pos {
	display: block;
	font-size: .74rem;
	opacity: .85;
}

.ti-calendar-note,
.ti-calendar-back {
	font-size: .83rem;
	color: var(--ti-muted);
	margin: .6rem 0 0;
}

/* 空の月。カレンダー直下に一文と前後月への移動を置いて行き止まりを防ぐ
   （2026-09-20。カレンダー既定化にともなう手当て） */
.ti-cal-empty-month {
	margin: 1rem 0 0;
	padding: 1rem 1.1rem;
	background: #faf8f4;
	border: 1px solid var(--ti-line);
	border-radius: 4px;
	text-align: center;
}

.ti-cal-empty-msg {
	margin: 0;
	font-size: .92rem;
	color: #444;
}

.ti-cal-empty-nav {
	margin: .8rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .7rem;
	justify-content: center;
}

/* 総数と一覧への入口。**常に出す**（少ない月に当たった人が
   「研修が無い」と誤解するのを防ぐ唯一の手当て） */
.ti-calendar-all {
	margin: .9rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid var(--ti-line);
	font-size: .95rem;
}

.ti-calendar-all a {
	color: var(--ti-navy);
	font-weight: 600;
	text-decoration: none;
}

.ti-calendar-all a:hover {
	text-decoration: underline;
}

/* 研修一覧のツールバーは書籍と同じ部品。カレンダーとの隙間だけ調整 */
.ti-training-toolbar {
	margin-bottom: 1rem;
}

/* スマホ：カレンダーは日付の縦並びに切り替える。
   7列のままだとセルが狭すぎて研修名が読めない。 */
@media screen and (max-width: 620px) {
	.ti-calendar,
	.ti-calendar tbody,
	.ti-calendar tr,
	.ti-calendar td {
		display: block;
		width: auto;
	}

	.ti-calendar thead {
		display: none;
	}

	.ti-calendar td {
		height: auto;
		border: none;
		border-bottom: 1px solid var(--ti-line);
		padding: .4rem .2rem;
	}

	/* 研修のない日は出さない（スクロールが長くなるだけ） */
	.ti-calendar td.ti-cal-empty,
	.ti-calendar td.ti-cal-day:not(.has-events) {
		display: none;
	}

	.ti-cal-date::after {
		content: '日';
	}

	.ti-card-meta,
	.ti-detail {
		grid-template-columns: 1fr;
		gap: .1rem;
	}

	.ti-card-meta dt,
	.ti-detail dt {
		font-size: .78rem;
		margin-top: .35rem;
	}
}

.ti-day-count {
	display: inline-block;
	margin-left: .5em;
	padding: .05em .45em;
	background: #f0f2f5;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	font-size: .72rem;
	font-weight: 400;
	color: var(--ti-muted);
	white-space: nowrap;
}

/* 開催月のセレクタ（研修のない月をまたぐため、前後リンクだけに頼らない） */
.ti-month-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: .3rem .5rem;
	margin: 0 0 .8rem;
	padding: .6rem .7rem;
	background: #f7f8fa;
	border: 1px solid var(--ti-line);
}

.ti-month-picker ul {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ti-month-picker a {
	display: inline-flex;
	align-items: baseline;
	gap: .3em;
	padding: .2rem .55rem;
	background: #fff;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	font-size: .8rem;
	text-decoration: none;
	white-space: nowrap;
}

.ti-month-picker a:hover {
	border-color: var(--ti-navy);
}

.ti-month-picker .is-current a {
	background: var(--ti-navy);
	border-color: var(--ti-navy);
	color: #fff;
}

.ti-month-picker .ti-count {
	margin: 0;
	font-size: .7rem;
	opacity: .75;
	color: inherit;
}

/* 複数日研修の「全日程参加が必要」表示（一覧・個別のみ。カレンダーには出さない） */
.ti-all-days {
	display: block;
	margin-top: .25rem;
	font-size: .78rem;
	font-weight: 600;
	color: #9a5b12;
}

.ti-all-days::before {
	content: '※ ';
}

.ti-all-days-note {
	color: #9a5b12;
}

.ti-per-session {
	display: block;
	margin-top: .25rem;
	font-size: .78rem;
	color: var(--ti-muted);
}

.ti-per-session::before {
	content: '※ ';
}

/*
 * 「回ごとに参加可」の研修は初日を過ぎても最後の回まで一覧に残る
 * （2026-09-18 指示）。開催日の原文は過ぎた回も含むので、まだ参加できる
 * 回をここで強調する。過去分が混ざって見えるのを防ぐための行。
 */
.ti-remaining-days {
	display: block;
	margin-top: .25rem;
	font-size: .8rem;
	font-weight: 600;
	color: #1f6f43;
}

.ti-remaining-days::before {
	content: '▶ ';
	font-weight: 400;
}

/* 技法ページ（セラピスト側）→ 研修一覧への相互リンク。0件の技法には出さない */
.ti-method-training {
	margin: 2rem 0 0;
	padding: 1rem 1.15rem;
	background: #f6f8fb;
	border-left: 4px solid var(--ti-accent, #c9a45c);
	border-radius: 3px;
}

.ti-method-training h2 {
	margin: 0 0 .4rem;
	font-size: 1.02rem;
}

.ti-method-training p {
	margin: 0;
	font-size: .92rem;
	line-height: 1.7;
}


/* ------------------------------------------------------------------
   研修一覧の絞り込みパネル（縦置き / 2026-09-18）

   上に横並びで項目を足すと膨らんで見づらくなるため、行を縦に積む。
   並びは 開催形式 → 地域 → 受付状況 → セラピー（依頼元指示）。
   各行の中はチップの折り返しにして、項目が増えても高さだけが伸びる。
   ------------------------------------------------------------------ */
.ti-filter-panel {
	margin: 2rem 0 0;
	padding: 1rem 1.1rem .85rem;
	background: #f7f8fa;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
}

.ti-filter-row {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: .2rem .8rem;
	align-items: baseline;
	padding: .5rem 0;
	border-bottom: 1px solid #e6e9ee;
}

.ti-filter-row:last-of-type {
	border-bottom: none;
}

.ti-filter-row > .ti-filter-label {
	font-size: .85rem;
	font-weight: 600;
	color: var(--ti-navy);
	padding-top: .35rem;
}

/*
 * 【重要・2026-09-21】`margin: 0` は **Cocoon の `.article ul { margin-bottom: 1.8em }`
 * に負ける**（詳細度が同じでテーマが後勝ち）。行ごとに 32px の空きが出て、
 * 絞り込みパネル全体が1.4倍に膨らんでいた。`.ti-filter-panel` を足して詳細度を上げる。
 */
.ti-filter-panel .ti-filter-row > ul {
	display: flex;
	flex-wrap: wrap;
	/* 縦は詰め、横は少し空ける（モック .3rem .55rem） */
	gap: .28rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * 【重要・2026-09-21 comet_message_id=4485420】
 * **Cocoon の `.article ul li { margin: .2em }` に負けていた。**
 * 詳細度が同じ（クラス1つ）で、テーマのCSSが後から読み込まれるため。
 * ボタン1つあたり上下左右 .2em（約3.6px）の余白が gap に上乗せされ、
 * 絞り込みが縦にも横にも間延びしていた（XXXさん指摘 4485339）。
 * **`.ti-filter-panel` を前に足して詳細度を上げてある。短くしないこと。**
 */
.ti-filter-panel .ti-filter-row > ul > li {
	margin: 0;
	padding: 0;
	list-style: none;
	/*
	 * `display: flex` と `line-height: 1` は**見た目の指定ではなく高さの事故対策**。
	 * li のままだと Cocoon の本文行間（18px × 1.8 = 32.4px）が li の高さになり、
	 * ボタン（27px）より 5px 高い箱ができて、行ごとに縦の空きが増える。
	 */
	display: flex;
	line-height: 1;
}

.ti-filter-row > ul > li > a {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	/* 指で押せる下限（高さ28px前後）を保った値 */
	padding: .16rem .55rem;
	background: #fff;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-filter-row > ul > li > a:hover {
	border-color: var(--ti-navy);
}

.ti-filter-row > ul > li.is-current > a {
	background: var(--ti-navy);
	border-color: var(--ti-navy);
	color: #fff;
	font-weight: 600;
}

.ti-filter-row > ul > li > a .ti-count {
	margin: 0;
	font-size: .74rem;
	font-weight: 400;
	color: var(--ti-muted);
}

.ti-filter-row > ul > li.is-current > a .ti-count {
	color: rgba(255, 255, 255, .85);
}

/* 地域: 地方を少し強く、配下の都道府県を弱く見せて階層を伝える */
.ti-filter-area > ul > li.ti-filter-region > a {
	font-weight: 600;
}

.ti-filter-area > ul > li.ti-filter-pref > a {
	background: #fbfcfd;
	font-size: .8rem;
	color: #33587f;
}

.ti-filter-note {
	grid-column: 2;
	margin: .45rem 0 0;
	font-size: .76rem;
	line-height: 1.6;
	color: var(--ti-muted);
}

/*
 * パネルの下の1行だけは、上のリード文と同じ大きさにする
 * （XXXさん指示 2026-09-21 msg 4508202）。本文と同じ文章として読ませたいので、
 * 注記の小さい字ではなく Cocoon の本文サイズ・本文色に戻す。
 */
.ti-index-hint {
	grid-column: auto;
	margin: .9rem 0 0;
	font-size: 1em;
	line-height: 1.8;
	color: inherit;
}

.ti-filter-clear {
	margin: .8rem 0 0;
	font-size: .8rem;
}

.ti-filter-clear a {
	color: #33587f;
}

@media (max-width: 600px) {
	.ti-filter-panel {
		padding: .8rem .85rem .7rem;
	}

	/* スマホは1列に落として、ラベルを見出し行にする */
	.ti-filter-row {
		grid-template-columns: 1fr;
		gap: .4rem;
	}

	.ti-filter-row > .ti-filter-label {
		padding-top: 0;
	}

	.ti-filter-note {
		grid-column: 1;
	}
}

/* 絞り込みで0件になった技法。リンクにせず、存在だけ残す */
.ti-filter-row > ul > li.is-empty > span {
	display: inline-flex;
	align-items: baseline;
	gap: .35em;
	padding: .16rem .55rem;
	border: 1px dashed #dfe3e9;
	border-radius: 2px;
	font-size: .84rem;
	line-height: 1.5;
	color: #a7b0bb;
}

.ti-filter-row > ul > li.is-empty .ti-count {
	margin: 0;
	font-size: .74rem;
	color: #bcc4ce;
}

/* 療法の記載が所属機関サイト由来である旨の注記（98件） */
.ti-card-level {
	margin: .5rem 0 0;
	font-size: .74rem;
	line-height: 1.6;
	color: var(--ti-muted);
}

/*
 * セラピストだけ詰める個別指定は廃止（2026-09-21）。
 * 共通の値が同じ詰まり方になったので、ここだけ別値にすると
 * 4ページで揃わない。
 */

/* ---------------------------------------------------------------------
 * 2026-09-18 検索まわりの改修（承認 comet_message_id=4342645）
 * ------------------------------------------------------------------ */

/* 索引ページの「療法から探す」。地方ブロックと同じ見え方に揃える */
.ti-method-index {
	margin: 1.6rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--ti-line);
}

.ti-method-index .ti-filter-note {
	grid-column: auto;
	margin: 0 0 .7rem;
}

.ti-method-index .ti-pref-index {
	margin: 0;
}

/* 市区町村ページから県の一覧に戻る導線 */
.ti-filter-up {
	margin: .8rem 0 0;
	font-size: .82rem;
}

.ti-filter-up a {
	color: #33587f;
	text-decoration: none;
}

.ti-filter-up a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * 2026-09-18 第2弾（検索・機関種別・総数）
 * ------------------------------------------------------------------ */

/* カードの機関種別。個人開業・医療機関は控えめ、相談範囲が限られる
 * 大学附属・公的機関は目に入る色にする */
.ti-card-orgtype {
	display: inline-block;
	margin: -.2rem 0 .5rem;
	padding: .1rem .5rem;
	font-size: .72rem;
	line-height: 1.7;
	color: var(--ti-muted);
	background: #f2f5f8;
	border-radius: 3px;
}

.ti-card-orgtype.is-limited {
	color: #7a5a12;
	background: #fdf4e0;
}

.ti-card-limited {
	margin: .35rem 0 0;
	font-size: .78rem;
	line-height: 1.7;
	color: #7a5a12;
}

/* 索引ページの総数 */
.ti-total-count {
	margin: 0 0 1rem;
	font-size: .9rem;
}

/* 検索結果 */
.ti-search-posts {
	margin: .5rem 0 0;
}

.ti-search-post {
	padding: .75rem 0;
	border-bottom: 1px solid var(--ti-line);
}

.ti-search-post:last-child {
	border-bottom: none;
}

.ti-search-post h3 {
	margin: 0 0 .3rem;
	font-size: .95rem;
	font-weight: 600;
	border: none;
	padding: 0;
	background: none;
}

.ti-search-post h3 a {
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-search-post h3 a:hover {
	text-decoration: underline;
}

.ti-search-post p {
	margin: 0;
	font-size: .82rem;
	line-height: 1.75;
	color: var(--ti-muted);
}

.ti-search-hint {
	margin: 1.2rem 0 0;
	padding: .9rem 1rem;
	background: #f7f9fb;
	border-left: 3px solid var(--ti-accent);
	font-size: .84rem;
	line-height: 1.8;
}

.ti-search-hint p {
	margin: 0 0 .4rem;
}

.ti-search-hint ul {
	margin: 0;
	padding-left: 1.2em;
}

/* ------------------------------------------------------------------
   技法の公式・関連サイト リンク集（2026-09-18）

   サムネイルは全件 1200x750（16:10）で撮ってあるので、カード幅だけ
   決めれば高さは揃う。aspect-ratio を効かせて、画像が未読込のうちも
   枠が動かないようにしている（レイアウトシフト防止）。
   ------------------------------------------------------------------ */
.ti-method-sites {
	margin: 0 0 2.5rem;
}

.ti-ms-lead {
	margin: 0 0 1.75rem;
	line-height: 1.85;
}

.ti-ms-section {
	margin: 0 0 2.5rem;
}

.ti-ms-heading {
	margin: 0 0 .5rem;
	padding-bottom: .4rem;
	font-size: 1.15rem;
	border-bottom: 2px solid var(--ti-accent, #c9a45c);
}

.ti-ms-note {
	margin: 0 0 1.1rem;
	font-size: .88rem;
	line-height: 1.75;
	color: var(--ti-muted, #555);
}

/* 同上。負けるとカードの下に 32px の空きが出る */
.ti-ms-grid {
	display: grid;
	/* 2026-09-20: 画像が主役のカードは300px（600x375を2倍等倍で置ける。
	   260pxだと余白かぼやけが出て撮り直しが要る） */
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 1.3rem 1.1rem;
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

/* Cocoon の `.article ul li { margin:.2em }` 対策（詳細度を上げる） */
.ti-method-sites .ti-ms-grid > li,
.ti-ms-grid > li {
	margin: 0 !important;
}

.ti-ms-grid > li::before { content: none; }

.ti-ms-card {
	margin: 0;
	padding: 0;
}

.ti-ms-shot {
	display: block;
	border: 1px solid #dfe3ea;
	border-radius: 4px;
	overflow: hidden;
	background: #f4f6f9;
	line-height: 0;
	transition: box-shadow .15s ease, border-color .15s ease;
}

.ti-ms-shot:hover,
.ti-ms-shot:focus-visible {
	border-color: var(--ti-accent, #c9a45c);
	box-shadow: 0 2px 10px rgba(31, 58, 95, .18);
}

.ti-ms-shot img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1200 / 750;
	object-fit: cover;
	/* トップページの上部（ロゴ・見出しがある側）を優先して見せる */
	object-position: top center;
}

/* 4つの入口。1行1リンクで縦に積む（横に並べると折り返しで読みにくい） */
.ti-ms-links {
	margin: .5rem 0 0;
	font-size: .84rem;
	line-height: 1.9;
}

.ti-ms-links a {
	display: block;
	color: var(--ti-navy, #1f3a5f);
	text-decoration: none;
}

.ti-ms-links a:hover,
.ti-ms-links a:focus-visible {
	text-decoration: underline;
}

/* 最終更新日。一覧の直前に右寄せで1行（4ページ共通） */
.ti-updated {
	margin: 0 0 .5rem;
	font-size: .78rem;
	color: #9aa3ac;
	text-align: right;
}

/* 技法名はカードの先頭（画像の上）。依頼元指示 msg 4367591 で
   「技法名 → 画像 → セラピストを探す」の3要素だけに絞った。 */
.ti-ms-name {
	margin: 0 0 .45rem;
	font-size: 1rem;
	line-height: 1.5;
}

.ti-ms-inner {
	margin: .5rem 0 0;
	font-size: .84rem;
	line-height: 1.6;
}

.ti-ms-foot {
	margin: 2rem 0 0;
	padding-top: .9rem;
	font-size: .82rem;
	line-height: 1.8;
	color: var(--ti-muted, #555);
	border-top: 1px solid #e3e7ee;
}

@media screen and (max-width: 480px) {
	.ti-ms-grid {
		grid-template-columns: 1fr;
		gap: 1.35rem;
	}
}

/* ===== 書籍一覧 /trauma-info/books/ （TI_VER 1.11.0） ===== */

/*
 * カードの格子。書影の縦横比は本ごとにばらばらなので、画像の高さを
 * 固定枠に収めて object-fit: contain で中に置く。切り抜くと装丁が変わり、
 * 提供元の「改変しない」条件に触れる。
 */
.ti-book-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	/* モック .bookgrid と同値（2026-09-21） */
	gap: 1.1rem .9rem;
	margin: 1.4rem 0 0;
}

.ti-book-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	padding: .9rem .85rem 1rem;
}

/* 書影の枠。表紙風カードも同じ枠に重ねるので position: relative */
.ti-book-cover {
	position: relative;
	width: 100%;
	height: 230px;
	margin: 0 0 .6rem;
	background: #f7f8fa;
	border: 1px solid #edf0f4;
	overflow: hidden;
}

.ti-book-cover img {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #fff;
}

/*
 * 表紙風カード（書影が無い47冊、および提供元が画像を落としたとき）。
 * 画像の下に敷いておき、img が無い／読み込めないときだけ見える。
 */
.ti-book-ph {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .5rem;
	padding: 1rem .9rem;
	background: linear-gradient(160deg, #23405f 0%, #1f3a5f 60%, #1a3252 100%);
	color: #fff;
	text-align: center;
}

.ti-book-ph::before {
	content: "";
	position: absolute;
	inset: .45rem;
	border: 1px solid rgba(201, 164, 92, .55);
	pointer-events: none;
}

.ti-book-ph-title {
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.5;
	word-break: break-word;
}

.ti-book-ph-author {
	font-size: .72rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .8);
}

.ti-book-ph-pub {
	font-size: .7rem;
	color: var(--ti-accent);
}

.ti-book-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.ti-book-title {
	margin: 0 0 .3rem;
	font-size: .9rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--ti-navy);
	word-break: break-word;
}

.ti-book-author {
	margin: 0 0 .1rem;
	font-size: .76rem;
	line-height: 1.45;
	color: #4a5668;
}

.ti-book-date {
	margin: 0 0 .35rem;
	font-size: .74rem;
	line-height: 1.4;
	color: var(--ti-muted);
}

/*
 * 技法・内容のタグ。**切らずに全部出す**（XXXさん 2026-09-20）。
 * 3つに切っていた頃の名残で「ほかN件」用の .is-more があるが、
 * 出力は止めた。タグが多い本（最多10個）でカードが縦に伸びるので、
 * margin-top:auto で本文の下端に寄せ、上の書名・著者の位置を揃える。
 */
/* 下マージンは Cocoon の `.article ul` に負けるので `!important`。
   負けると書影カードの下に 32px の空きが出る（2026-09-21） */
.ti-book-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .22rem;
	margin: auto 0 .35rem !important;
	padding: 0;
	list-style: none;
}

/* Cocoon の `.article ul li { margin:.2em }` 対策（詳細度を上げる） */
.ti-book-tags > li,
.ti-book-tags li {
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

.ti-book-tags a,
.ti-book-tags .is-more,
.ti-book-tags li.is-more {
	display: inline-block;
	padding: .12rem .45rem;
	border-radius: 2px;
	font-size: .7rem;
	line-height: 1.6;
	text-decoration: none;
}

.ti-book-tags .is-method a {
	background: #eef2f7;
	border: 1px solid #dde4ed;
	color: #2b4d74;
}

.ti-book-tags .is-topic a {
	background: #fbf7ef;
	border: 1px solid #ece0c9;
	color: #6b5526;
}

.ti-book-tags a:hover {
	border-color: var(--ti-navy);
}

.ti-book-tags li.is-more {
	color: var(--ti-muted);
	font-size: .68rem;
	padding: .12rem .2rem;
}

/* Amazonリンクはカードの最下部に揃える */
.ti-book-buy {
	margin: auto 0 0;
	padding-top: .25rem;
	font-size: .74rem;
}

.ti-book-buy a {
	color: #33587f;
}

/* 書影全体がAmazonへのリンク。枠いっぱいに重ねる */
.ti-book-coverlink {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: block;
	text-decoration: none;
}

.ti-book-coverlink:hover {
	outline: 2px solid var(--ti-accent);
	outline-offset: -2px;
}

/* 技法で絞ったときのリンク帯 */
.ti-book-methodlinks {
	margin: 1.2rem 0 0;
	padding: .85rem 1rem;
	background: #fbf7ef;
	border: 1px solid #ece0c9;
	border-radius: 2px;
}

.ti-book-methodlinks-label {
	display: block;
	margin-bottom: .5rem;
	font-size: .82rem;
	font-weight: 600;
	color: var(--ti-navy);
}

.ti-book-methodlinks ul {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ti-book-methodlinks li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ti-book-methodlinks a {
	display: inline-block;
	padding: .3rem .75rem;
	background: #fff;
	border: 1px solid #e0d3b8;
	border-radius: 2px;
	font-size: .8rem;
	color: #6b5526;
	text-decoration: none;
}

.ti-book-methodlinks a:hover {
	border-color: var(--ti-accent);
}

@media (max-width: 600px) {
	.ti-book-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 1.1rem .7rem;
	}

	.ti-book-cover {
		height: 175px;
	}
}

/* 技法ページ（セラピスト一覧）から同じ技法の書籍ページへ。
   絞り込みパネルの直後に1行。書籍側のリンク帯と同じ見え方に寄せる */
.ti-method-books {
	margin: .6rem 0 1rem;
	padding: .5rem .8rem;
	background: #f4f7fa;
	border-left: 3px solid var(--ti-navy, #1f3a5f);
	border-radius: 3px;
	font-size: .9rem;
}

.ti-method-books a {
	color: #33587f;
	font-weight: 600;
	text-decoration: none;
}

.ti-method-books a:hover {
	text-decoration: underline;
}

/*
 * セラピスト一覧から技法の集約ページへ戻る1行（2026-09-21 msg 4508202）。
 * 「セラピストを探す」から技法を押した人はセラピストの一覧に着くので、
 * 技法そのものの説明への出口をここに置く。書籍への1行と同じ見え方。
 */
.ti-method-hublink {
	margin: .6rem 0 1rem;
	font-size: .88rem;
}

.ti-method-hublink a { color: #33587f; text-decoration: none; }
.ti-method-hublink a:hover { text-decoration: underline; }

/* 件数の母数「（716件中）」。本のページの「26冊（318冊中）」と揃える */
.ti-count__of { font-size: .86em; color: var(--ti-muted); }

/* フォームのプライバシーポリシー案内（2026-09-19） */
.ti-form-privacy {
	margin: 1.2em 0 0;
	padding: .8em 1em;
	background: #f7f7f5;
	border-left: 3px solid #cfcfc6;
	font-size: .88em;
	line-height: 1.7;
	color: #555;
}
.ti-form-privacy a { text-decoration: underline; }

/* 書籍一覧の免責の末尾の申し出リンク（XXXさん指示 2026-09-19 msg 4406249）。
   フォームを埋め込むと目立ちすぎるので1行のリンクにする。免責と同じ文字サイズで、
   区切り線だけ入れて「ここから先は連絡先」と分かるようにする。 */
.ti-book-formlink {
	margin: .9rem 0 0;
	padding-top: .8rem;
	border-top: 1px solid #dfe3e8;
	font-size: .84rem;
}

/* ===========================================================
   件数・表示切替の行／ページ送り／「一覧で見る」
   （2026-09-20 XXXさん指示 msg 4479278・4479369）
   =========================================================== */

/*
 * 見出しの下、一覧の直前。件数は見出しにも title にも入れない
 * （毎月変わる数字が検索結果の文字列を書き換えるため）。
 */
.ti-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .4rem 1rem;
	margin: 1.1rem 0 .2rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--ti-line);
}

.ti-toolbar .ti-range {
	margin: 0;
	font-size: .86rem;
	color: var(--ti-muted);
}

.ti-toolbar-controls {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem 1.1rem;
	font-size: .84rem;
}

.ti-toolbar-group {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
}

.ti-toolbar-label {
	color: var(--ti-muted);
	font-size: .8rem;
}

.ti-toolbar-group a {
	color: #33587f;
	text-decoration: none;
}

.ti-toolbar-group a:hover {
	text-decoration: underline;
}

/* 選択中。色ではなく太さで示す（新しい色を増やさない方針） */
.ti-toolbar-cur {
	font-weight: 600;
	color: var(--ti-navy);
}

/* ---- ツールバーのプルダウン（2026-09-21 モックに戻した） ---- */
.ti-toolbar-form {
	display: inline-flex;
	align-items: baseline;
	gap: .45rem;
	margin: 0;
}

/* ラベルが「並び／替え」と2行に割れるのを防ぐ */
.ti-toolbar-form > .ti-toolbar-label {
	white-space: nowrap;
}

.ti-toolbar-select {
	font-family: inherit;
	font-size: .83rem;
	line-height: 1.5;
	padding: .18rem .35rem;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	background: #fff;
	color: var(--ti-navy);
	max-width: 14em;
}

/*
 * JSが動く環境ではJS側で hidden にする。
 * ここで display:none にはしない（JSなしでは押せる必要がある）。
 */
.ti-toolbar-go {
	font-family: inherit;
	font-size: .78rem;
	padding: .18rem .6rem;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	background: #f2f4f7;
	color: var(--ti-navy);
	cursor: pointer;
}

.ti-toolbar-go[hidden] { display: none; }

/* ---- ページ送り ---- */
.ti-book-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	margin: 1.6rem 0 .5rem;
	font-size: .88rem;
}

.ti-book-pagination a,
.ti-book-pagination .ti-page-cur {
	display: inline-block;
	min-width: 2.2rem;
	padding: .35rem .55rem;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	text-align: center;
	text-decoration: none;
	color: var(--ti-navy);
	background: #fff;
}

.ti-book-pagination a:hover {
	border-color: var(--ti-navy);
}

.ti-book-pagination .ti-page-cur {
	background: var(--ti-navy);
	border-color: var(--ti-navy);
	color: #fff;
	font-weight: 600;
}

.ti-book-pagination .ti-page-prev,
.ti-book-pagination .ti-page-next {
	min-width: 0;
}

/* ---- 「一覧で見る」 ---- */
/*
 * 書影を出さない行の形。中身はカードと同じで、URLは分けない
 * （同じ318冊が2セット索引されるのを防ぐ）。
 */
.ti-book-rows {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.ti-book-rows > li::before { content: none; }

.ti-book-row {
	margin: 0;
	padding: .8rem 0 .75rem;
	border-bottom: 1px solid var(--ti-line);
}

.ti-book-row:first-child {
	border-top: 1px solid var(--ti-line);
}

.ti-book-row-title {
	margin: 0 0 .2rem;
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ti-navy);
}

.ti-book-row-title a {
	color: inherit;
	text-decoration: none;
}

.ti-book-row-title a:hover {
	text-decoration: underline;
}

.ti-book-row-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .2rem .9rem;
	margin: 0 0 .35rem;
	font-size: .82rem;
	color: var(--ti-muted);
}

/* 行の中ではタグを下端に寄せる必要がない（カード用の auto を打ち消す） */
.ti-book-row .ti-book-tags {
	margin: 0;
}

@media screen and (max-width: 600px) {
	.ti-toolbar {
		flex-direction: column;
		align-items: flex-start;
	}

	/* プルダウンは1行に1組。横に並べると折り返して読みにくい */
	.ti-toolbar-controls {
		flex-direction: column;
		align-items: stretch;
		gap: .4rem;
		width: 100%;
	}

	.ti-toolbar-form {
		justify-content: space-between;
		width: 100%;
	}

	.ti-toolbar-select {
		flex: 1 1 auto;
		max-width: none;
	}
}

/* =========================================================================
 * 技法の集約ページ（提案B第5案 / 2026-09-21）
 * 4種類（セラピスト・本・研修・論文）を上位3件ずつ同じ形で並べる。
 * 枠ごとの見た目を変えないのが要点——どれかが特別に見えると、
 * 「なぜこれが上なのか」という問いが生まれる。
 * ====================================================================== */

.ti-method-hub {
	margin: 1rem 0 0;
}

/* 公式サイトへの1行。技法の説明は書かない（当サイトの方針） */
.ti-hub-official {
	margin: 0 0 1.4rem;
	padding: .6rem .9rem;
	background: #f7f8fa;
	border-left: 3px solid var(--ti-navy);
	font-size: .88rem;
	line-height: 1.7;
}

.ti-hub-official__label {
	color: var(--ti-muted);
	font-size: .8rem;
	margin-right: .3rem;
}

.ti-hub-counts {
	margin: 0;
	font-size: .88rem;
	color: var(--ti-muted);
}

.ti-hub-sec {
	margin: 0 0 1.6rem;
	padding: 0 0 1.2rem;
	border-bottom: 1px solid var(--ti-line);
}

.ti-hub-sec:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.ti-hub-sec__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .3rem .8rem;
	margin: 0 0 .5rem;
}

.ti-hub-sec__title {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--ti-navy);
}

.ti-hub-sec__count {
	font-size: .85rem;
	font-weight: normal;
	color: var(--ti-muted);
}

.ti-hub-sec__all {
	margin: 0;
	font-size: .84rem;
}

.ti-hub-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ti-hub-item {
	margin: 0;
	padding: .45rem 0;
	border-top: 1px solid var(--ti-line);
}

.ti-hub-item:first-child {
	border-top: 0;
}

.ti-hub-item__title {
	font-size: .92rem;
	line-height: 1.6;
	font-weight: 600;
	color: var(--ti-navy);
	text-decoration: none;
}

.ti-hub-item__title:hover {
	text-decoration: underline;
}

/* 抜粋の1行。詳細は下位ページ側にだけ置く（同じ中身を2枚に作らない） */
.ti-hub-item__meta {
	margin: .12rem 0 0;
	font-size: .8rem;
	line-height: 1.6;
	color: var(--ti-muted);
}

@media (max-width: 600px) {
	.ti-hub-sec__head {
		display: block;
	}
	.ti-hub-sec__all {
		margin-top: .15rem;
	}
}

/* =========================================================================
 * トラウマ療法の一覧 /trauma-info/method/（2026-09-21 新設）
 *
 * **提案B第4案・第2章のモックの値をそのまま移してある**
 * （XXXさん「元のモック案を尊重してくれ」msg 4492859）。
 * 画像240px、件数は押せるタイル（auto-fit minmax 138px）、索引は追従。
 * 数値を変えるときはモックと突き合わせること。
 * ====================================================================== */

.ti-mx-lead {
	margin: 0 0 .8rem;
	font-size: .88rem;
	line-height: 1.8;
	color: var(--ti-muted);
}

/*
 * 技法名の索引。**ページの一番上に置いたままにする**
 * （XXXさん指示 2026-09-21 msg 4508202＝スクロールに追従すると見づらい）。
 * モックは sticky だったが、実機では本文の上に居座って読みにくかった。
 */
.ti-mx-nav {
	margin: 0 0 .6rem;
	padding: .55rem 0;
	background: #fff;
	border-bottom: 1px solid var(--ti-line);
}

/* 自前のスクロールも外す＝23技法を全部見せる */
.ti-mx-nav__row {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
}

.ti-mx-nav a {
	padding: .14rem .5rem;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	background: #fbfcfd;
	font-size: .78rem;
	color: #2f4a6e;
	text-decoration: none;
}

.ti-mx-nav a:hover { border-color: var(--ti-navy); background: #fff; }

/* 区分の見出し（実施機関のサイトを案内している技法） */
.ti-mx-grp {
	margin: 2rem 0 .4rem;
	padding: 0 0 .25rem;
	border-bottom: 2px solid var(--ti-accent);
	font-size: .92rem;
	font-weight: 600;
	color: var(--ti-navy);
}

.ti-mx-grp-sub {
	display: block;
	margin-top: .2rem;
	font-size: .78rem;
	font-weight: 400;
	line-height: 1.7;
	color: var(--ti-muted);
}

.ti-mx-stack { list-style: none; margin: 0; padding: 0; }

.ti-mx-row {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.1rem;
	padding: 1.15rem 0;
	border-top: 1px solid var(--ti-line);
}

.ti-mx-row:first-child { border-top: 0; padding-top: .2rem; }

.ti-mx-shot {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	border: 1px solid #dfe3ea;
	background: #f4f6f9;
	text-decoration: none;
	overflow: hidden;
}

.ti-mx-shot:hover { border-color: var(--ti-navy); }

.ti-mx-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 公式サイトを出さない技法。枠は残して斜線を敷く */
.ti-mx-shot.is-none {
	background: repeating-linear-gradient(45deg, #f6f7f9, #f6f7f9 7px, #f1f3f6 7px, #f1f3f6 14px);
	color: #aab3bd;
	font-size: .72rem;
	text-align: center;
	line-height: 1.5;
}

.ti-mx-body { min-width: 0; }

.ti-mx-name {
	margin: 0;
	font-size: 1.06rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--ti-navy);
}

.ti-mx-name a { color: var(--ti-navy); text-decoration: none; }
.ti-mx-name a:hover { text-decoration: underline; }

.ti-mx-alias {
	margin: .1rem 0;
	font-size: .77rem;
	line-height: 1.55;
	color: var(--ti-muted);
}

.ti-mx-ofc { margin: .35rem 0 .6rem; font-size: .8rem; }

.ti-mx-ofc a {
	color: #33587f;
	text-decoration: none;
	border-bottom: 1px solid #cddced;
}

.ti-mx-ofc.is-none { color: #9aa4ae; }

/*
 * 件数は押せるタイル。**4列固定**（モック msg 4493594）。
 * `auto-fit` だと本文幅が広いほどタイルが太って1行に3枠しか入らず、
 * 4枠目が改行していた（本文782px / モック606px の差）。
 */
.ti-mx-links {
	display: grid;
	grid-template-columns: repeat(4, minmax(138px, 1fr));
	gap: .4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ti-mx-links li { margin: 0; }

.ti-mx-links a {
	display: block;
	padding: .4rem .6rem;
	border: 1px solid var(--ti-line);
	border-radius: 2px;
	background: #fbfcfd;
	text-decoration: none;
}

.ti-mx-links a:hover { border-color: var(--ti-navy); background: #fff; }

.ti-mx-links .ti-mx-k {
	display: block;
	font-size: .74rem;
	color: var(--ti-muted);
}

.ti-mx-links .ti-mx-v {
	display: block;
	font-size: .93rem;
	font-weight: 600;
	color: var(--ti-navy);
}

/* method-sites からの相互リンク1行 */
.ti-mx-crosslink {
	margin: .2rem 0 1rem;
	font-size: .85rem;
	color: var(--ti-muted);
}

/*
 * 狭い幅（スマホ）。**PCとは別の組み方にする**
 * （XXXさん承認 msg 4493542 / モック msg 4493594）。
 *
 *  - 索引は1行に固定して横スクロール。縦に14行積むと、いくらスクロール
 *    しても本文に届かない。
 *  - カードは画像96pxの正方形にし、件数タイルを画像の下まで使って全幅4列。
 *    130pxの横並びだと名前の右に216pxしか残らず、件数が縦1列に積まれて
 *    1技法で画面の大半を使っていた。縦の総量が4割弱短くなる。
 *  - 390px未満は件数を2列に落とす。
 */
@media (max-width: 720px) {
	.ti-mx-nav { padding: .5rem 0 .45rem; }

	.ti-mx-nav__row {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-bottom: .3rem;
		scrollbar-width: thin;
		max-height: none;
	}

	.ti-mx-nav a { flex: 0 0 auto; scroll-snap-align: start; }

	.ti-mx-nav::after {
		content: "→ 横にスクロールできます";
		display: block;
		margin-top: .1rem;
		font-size: .68rem;
		color: var(--ti-muted);
	}

	.ti-mx-row {
		grid-template-columns: 96px 1fr;
		gap: .7rem .8rem;
		padding: .95rem 0;
	}

	.ti-mx-shotwrap { grid-column: 1; grid-row: 1; }
	.ti-mx-body { grid-column: 2; grid-row: 1; }

	.ti-mx-shot { aspect-ratio: 1 / 1; }
	.ti-mx-shot img { object-fit: cover; }

	.ti-mx-name { font-size: .99rem; }
	.ti-mx-alias { font-size: .74rem; margin: .1rem 0 0; }
	.ti-mx-ofc { margin: .3rem 0 0; font-size: .77rem; }

	.ti-mx-links {
		grid-column: 1 / -1;
		grid-row: 2;
		grid-template-columns: repeat(4, 1fr);
		gap: .3rem;
		margin-top: .55rem;
	}

	.ti-mx-links a { padding: .3rem .2rem; text-align: center; }
	.ti-mx-links .ti-mx-k { font-size: .66rem; }
	.ti-mx-links .ti-mx-v { font-size: .86rem; }
}

@media (max-width: 390px) {
	.ti-mx-links { grid-template-columns: repeat(2, 1fr); }
}

/* 件数の意味の但し書き（免責の箱の上に1行） */
.ti-mx-note {
	margin: 2rem 0 -1.2rem;
	font-size: .8rem;
	line-height: 1.8;
	color: var(--ti-muted);
}

/*
 * 一覧ページへの入口カード。
 * **既存の4枚の `.ti-gate` の中の1枚目**として入る（XXXさん msg 4493286）。
 * 2列の grid なので、1枚目だけ横いっぱいに広げて頭に据える
 * ——半端に片側だけ埋まるより据わりがよく、「一番上」であることも伝わる。
 */
.ti-gate__method {
	grid-column: 1 / -1;
}

/* 単独で出すとき（本文に .ti-gate が無いページ）の器 */
.ti-gate--method {
	grid-template-columns: 1fr;
	margin-top: -1rem;
}

/* ======================================================================
 * 本のページ（/trauma-info/books/）— 第3案第4章の形
 * 2026-09-21 / モック msg 4498540。**値はモックのとおり。**
 *
 * 絞り込みを左の縦の列にして画面に貼り付ける。HTMLでは本体が先で、
 * 列は後ろにある——`order` で左へ回している（順序を入れ替えないこと）。
 * ====================================================================== */

.ti-book-cols {
	display: grid;
	grid-template-columns: 212px 1fr;
	align-items: start;
	border: 1px solid var(--ti-line);
}

/* HTML の順番と逆に並べる。列が左、本体が右 */
.ti-book-sidewrap { order: 1; }
.ti-book-main     { order: 2; }

/*
 * **貼り付け（sticky）と自前のスクロールはやめた**
 * （XXXさん指示 2026-09-21 msg 4508202）。
 * 92vh で切って中をスクロールさせると、技法27件で高さを使い切り、
 * **内容・年代で絞り込めること自体が画面に出ない**。
 * 列は全部そのまま出して、ページのスクロールで読む。
 */
.ti-book-sidewrap {
	align-self: start;
	border-right: 1px solid var(--ti-line);
	background: #fbfcfd;
}

/* PCでは開閉のボタンを使わない（常に開いた状態） */
.ti-book-fbtn { display: none; }
.ti-book-fchk { display: none; }

.ti-book-side { padding: .9rem .85rem; }

/*
 * 見出し。**Cocoon の `.article h2`（25px・左に金の太罫）に負けるので
 * `.ti-book-side` を前に足して詳細度を上げる。**短くしないこと
 * ——このプラグインのCSSが `.article` 配下で詳細度負けするのは既知。
 */
.ti-book-side .ti-book-side__h {
	margin: 0 0 .35rem;
	padding: 0;
	border: 0;
	background: none;
	font-size: .76rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ti-muted);
}

.ti-book-side .ti-book-side__h::before,
.ti-book-side .ti-book-side__h::after { content: none; }

.ti-book-side .ti-book-side__grp + .ti-book-side__grp .ti-book-side__h {
	margin-top: 1.1rem;
	padding-top: .9rem;
	border-top: 1px solid #eef1f4;
}

.ti-book-side ul { list-style: none; margin: 0; padding: 0; }
.ti-book-side li { margin: 0; padding: 0; }
.ti-book-side li::before { content: none; }

.ti-book-side li a {
	display: flex;
	justify-content: space-between;
	gap: .5em;
	align-items: baseline;
	padding: .17rem .35rem;
	font-size: .82rem;
	color: #2f3d4c;
	text-decoration: none;
	border-radius: 2px;
}

.ti-book-side li a:hover { background: #eef2f7; }
.ti-book-side__c { font-size: .72rem; color: #9aa4ae; }

.ti-book-side li a.is-on { background: var(--ti-navy); color: #fff; font-weight: 600; }
.ti-book-side li a.is-on .ti-book-side__c { color: #c3d3e4; }

.ti-book-main { padding: .9rem 1.1rem 1.2rem; min-width: 0; }

/* 「絞り込み中」の帯 */
.ti-book-active {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
	padding: 0 0 .6rem;
}

.ti-book-active__lb { font-size: .76rem; color: var(--ti-muted); }

.ti-book-active__tag {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .13rem .3rem .13rem .6rem;
	border: 1px solid #cddced;
	border-radius: 99px;
	background: #eaf0f7;
	color: var(--ti-navy);
	font-size: .78rem;
	text-decoration: none;
}

.ti-book-active__tag:hover { background: #dde8f3; }
.ti-book-active__x { color: #7f93a8; padding: 0 .25rem; font-style: normal; }

.ti-book-active__clear {
	font-size: .77rem;
	color: #718396;
	text-decoration: underline;
}

/* 件数（母数つき） */
.ti-book-toolbar .ti-range b { color: var(--ti-navy); font-size: 1rem; }
.ti-book-toolbar .ti-range__sub { color: var(--ti-muted); margin-left: .5em; font-size: .78rem; }

/*
 * スマホ。**左の列を畳んで下から出るシートにする**（第3案第4章の指定）。
 * 畳まないという決まりはPCの話。details/summary なのでJSは要らない。
 */
@media (max-width: 720px) {
	.ti-book-cols { grid-template-columns: 1fr; border: 0; }

	.ti-book-sidewrap {
		order: 0;
		position: static;
		max-height: none;
		overflow: visible;
		border: 0;
		background: none;
		margin: 0 0 .6rem;
	}

	.ti-book-fbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5em;
		width: 100%;
		padding: .5rem;
		border: 1px solid var(--ti-navy);
		border-radius: 3px;
		background: #fff;
		color: var(--ti-navy);
		font-size: .88rem;
		cursor: pointer;
		list-style: none;
	}

	.ti-book-fbtn::-webkit-details-marker { display: none; }

	.ti-book-fbtn__n {
		min-width: 1.5em;
		padding: 0 .35em;
		border-radius: 99px;
		background: var(--ti-navy);
		color: #fff;
		font-size: .74rem;
		line-height: 1.5;
		text-align: center;
	}

	/* 閉じているときは隠し、開いたら下から出るシートとして重ねる */
	.ti-book-side { display: none; }

	.ti-book-fchk:checked ~ .ti-book-side {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 30;
		max-height: 76vh;
		overflow: auto;
		padding: .9rem 1rem 1.4rem;
		border-top: 3px solid var(--ti-navy);
		border-radius: 10px 10px 0 0;
		background: #fff;
		box-shadow: 0 -6px 24px rgba(20, 32, 48, .18);
	}

	.ti-book-fchk:checked ~ .ti-book-side::before {
		content: "絞り込み";
		display: block;
		margin-bottom: .7rem;
		padding: 0 0 .5rem;
		border-bottom: 1px solid #eef1f4;
		font-size: .95rem;
		font-weight: 600;
		color: var(--ti-navy);
	}

	/* 指で押せる高さに */
	.ti-book-side li a { padding: .4rem .35rem; }

	.ti-book-main { padding: 0; }
}

/* ----------------------------------------------------------------------
 * 本の並び（モックの `.res`）。2026-09-21 / msg 4506490。
 * **既定の並びは行**。書影は小さなサムネイル。
 * 左に絞り込みの列が入ると格子は1行2枚しか置けず、1冊で画面の大半を
 * 使っていた（作り直しの初回で格子のまま残していた誤り）。
 * -------------------------------------------------------------------- */

.ti-book-reslist { list-style: none; margin: 0; padding: 0; }
.ti-book-reslist > li::before { content: none; }

.ti-book-res {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: .75rem;
	margin: 0;
	padding: .7rem 0;
	border-bottom: 1px solid #eef1f4;
}

.ti-book-res.is-nocover { grid-template-columns: 1fr; }

/* サムネイル。格子のときの 230px 高の枠を上書きする */
.ti-book-res .ti-book-cover {
	width: 44px;
	height: 62px;
	margin: 0;
	border: 1px solid #e2e6eb;
	background: #eef1f5;
}

.ti-book-res .ti-book-cover img { object-fit: cover; }

/*
 * 書影の無い本（47冊）。**「書影」という文字は出さない**
 * （XXXさん指摘 2026-09-21 msg 4507033＝文字が出ると本のカードに見えない）。
 * 44pxの枠でも本と分かるよう、**小さな表紙の形**にする＝紺の面＋金の細い罫＋
 * 左端の背表紙。文字は入れない（この大きさでは読めないため）。
 * 画像が取れるようになれば bk_cover_url が入って自動的に実物に替わる。
 */
.ti-book-res .ti-book-ph {
	display: block;
	gap: 0;
	padding: 0;
	background: linear-gradient(160deg, #23405f 0%, #1f3a5f 60%, #1a3252 100%);
	color: transparent;
	font-size: 0;
}

.ti-book-res .ti-book-ph > * { display: none; }

/* 金の内枠は残す（本の表紙に見える最小限の手がかり） */
.ti-book-res .ti-book-ph::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px solid rgba(201, 164, 92, .55);
}

/* 左端の背表紙 */
.ti-book-res .ti-book-ph::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: rgba(0, 0, 0, .28);
	border-right: 1px solid rgba(201, 164, 92, .35);
}

.ti-book-res__body { min-width: 0; }

.ti-book-res .ti-book-res__t {
	margin: 0;
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.5;
	color: var(--ti-navy);
}

.ti-book-res .ti-book-res__t a { color: var(--ti-navy); text-decoration: none; }
.ti-book-res .ti-book-res__t a:hover { text-decoration: underline; }

.ti-book-res .ti-book-res__m {
	margin: .12rem 0 0;
	font-size: .78rem;
	line-height: 1.6;
	color: var(--ti-muted);
}

.ti-book-res .ti-book-tags { margin-top: .28rem; gap: .22rem; }

/* 表示形式の2択ボタン（モックの `.seg`） */
.ti-book-seg {
	display: inline-flex;
	border: 1px solid var(--ti-line);
	border-radius: 3px;
	overflow: hidden;
}

.ti-book-seg > a,
.ti-book-seg > span {
	padding: .2rem .6rem;
	font-size: .78rem;
	color: #5c6b7a;
	background: #fff;
	text-decoration: none;
}

.ti-book-seg > a:hover { background: #eef2f7; }
.ti-book-seg > .is-on { background: var(--ti-navy); color: #fff; }

@media (max-width: 720px) {
	.ti-book-res { grid-template-columns: 52px 1fr; }
	.ti-book-res .ti-book-cover { width: 52px; height: 73px; }
}

/*
 * 論文セクションへの入口カード（XXXさん 4566031）。
 * 既存の並び（4枚＋技法1枚）の**6枚目**として入り、2×3にそろう
 * ＝5枚目で空いていた右下の枠が埋まる（2026-09-20 に決めた形）。
 * **見た目・厚さは `.ti-gate a` のまま**＝独自の枠を作らない。
 * 位置の指定も要らない（並びの最後に来る）。
 */