/* torisetsu-core components — 説明書 × 親しみやすさ */
:root {
	--ts-primary: #e8613c;
	--ts-primary-dark: #c94a28;
	--ts-primary-soft: #fff3ee;
	--ts-ink: #1f2933;
	--ts-muted: #6b7280;
	--ts-line: #e7e5e4;
	--ts-bg: #ffffff;
	--ts-bg-soft: #faf8f6;
	--ts-warn-bg: #fff8e1;
	--ts-warn-line: #f0b429;
	--ts-ok-bg: #ebf8f0;
	--ts-ok-line: #2f9e66;
	--ts-info-bg: #eef5ff;
	--ts-info-line: #3b82f6;
	--ts-danger: #d64545;
	--ts-radius: 14px;
	--ts-radius-sm: 8px;
	--ts-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
}

.ts-sp { display: inline; }
@media (min-width: 768px) { .ts-sp { display: none; } }
.ts-center { text-align: center; }
.ts-small { font-size: .85rem; color: var(--ts-muted); }
.ts-lead { font-size: 1.05rem; }
.ts-empty { color: var(--ts-muted); padding: 24px; text-align: center; background: var(--ts-bg-soft); border-radius: var(--ts-radius); }
.ts-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.ts-h2 { font-size: 1.3rem; font-weight: 800; margin: 2em 0 .8em; line-height: 1.4; }

/* Buttons */
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .7em 1.2em; border-radius: 999px; border: 1.5px solid var(--ts-line); background: #fff; color: var(--ts-ink); font-weight: 700; font-size: .95rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, transform .05s; font-family: inherit; }
.ts-btn:hover { border-color: var(--ts-ink); color: var(--ts-ink); }
.ts-btn:active { transform: translateY(1px); }
.ts-btn--primary { background: var(--ts-primary); border-color: var(--ts-primary); color: #fff; }
.ts-btn--primary:hover { background: var(--ts-primary-dark); border-color: var(--ts-primary-dark); color: #fff; }
.ts-btn--danger { color: var(--ts-danger); border-color: #f3c4c4; }
.ts-btn--danger:hover { background: #fdeaea; border-color: var(--ts-danger); color: var(--ts-danger); }
.ts-btn--small { padding: .45em .9em; font-size: .85rem; }
.ts-btn--lg { padding: .9em 1.6em; font-size: 1.05rem; }
.ts-btn--block { display: flex; width: 100%; }
.ts-icon-btn { border: 1px solid var(--ts-line); background: #fff; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: .9rem; color: var(--ts-muted); }
.ts-icon-btn:hover { color: var(--ts-ink); border-color: var(--ts-ink); }

/* Chips & tags */
.ts-chip { display: inline-flex; align-items: center; gap: .3em; padding: .25em .7em; border-radius: 999px; background: var(--ts-bg-soft); border: 1px solid var(--ts-line); font-size: .78rem; color: var(--ts-ink); text-decoration: none; font-weight: 600; line-height: 1.4; }
a.ts-chip:hover { border-color: var(--ts-ink); }
.ts-chip--type { background: var(--ts-primary-soft); border-color: #fbd5c7; color: var(--ts-primary-dark); }
.ts-chip--vis { background: #f3f4f6; color: var(--ts-muted); }
.ts-chip.is-active { background: var(--ts-ink); color: #fff; border-color: var(--ts-ink); }
.ts-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.5em 0; }
.ts-tag { color: var(--ts-primary-dark); text-decoration: none; font-size: .9rem; background: var(--ts-primary-soft); padding: .2em .7em; border-radius: 6px; }
.ts-tag:hover { text-decoration: underline; }

/* Notices */
.ts-notice { padding: 14px 16px; border-radius: var(--ts-radius-sm); margin: 0 0 1.2em; background: var(--ts-info-bg); border-left: 4px solid var(--ts-info-line); }
.ts-notice ul { margin: 0; padding-left: 1.2em; }
.ts-notice--ok { background: var(--ts-ok-bg); border-color: var(--ts-ok-line); }
.ts-notice--error { background: #fdeaea; border-color: var(--ts-danger); }
.ts-alert { padding: 14px 16px; border-radius: var(--ts-radius-sm); margin: 1em 0; font-size: .95rem; }
.ts-alert--stale { background: var(--ts-warn-bg); border: 1px solid var(--ts-warn-line); }
.ts-alert--info { background: var(--ts-info-bg); border: 1px solid #bfd6fb; }
.ts-box { padding: 24px; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); margin: 1.5em 0; background: #fff; }

/* Grid & cards */
.ts-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .ts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .ts-grid { grid-template-columns: repeat(3, 1fr); } }
.ts-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.ts-card:hover { box-shadow: var(--ts-shadow); transform: translateY(-2px); }
.ts-card__link { color: inherit; text-decoration: none; flex: 1; }
.ts-card__cover { aspect-ratio: 16 / 9; background: var(--ts-bg-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ts-card__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-card__cover img.ts-card__ph { width: auto; height: 62%; object-fit: contain; opacity: .95; }
.ts-type-person .ts-card__cover { background: #fff1f2; }
.ts-type-work .ts-card__cover { background: #eff6ff; }
.ts-type-life .ts-card__cover { background: #f0fdf4; }
.ts-type-system .ts-card__cover { background: #fefce8; }
.ts-type-place .ts-card__cover { background: #f5f3ff; }
.ts-type-product .ts-card__cover { background: #fff7ed; }
.ts-card__body { padding: 14px 16px 6px; }
.ts-card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ts-card__title { font-size: 1.05rem; font-weight: 800; line-height: 1.45; margin: 0 0 6px; }
.ts-card__excerpt { font-size: .88rem; color: var(--ts-muted); margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 16px 0; font-size: .8rem; }
.ts-card__author { display: inline-flex; align-items: center; gap: 6px; color: var(--ts-ink); text-decoration: none; min-width: 0; }
.ts-card__author span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-card__author img { border-radius: 50%; flex-shrink: 0; }
.ts-card__stats { display: inline-flex; gap: 8px; color: var(--ts-muted); white-space: nowrap; }
.ts-card__date { padding: 4px 16px 12px; font-size: .75rem; color: var(--ts-muted); }

/* スマホ：横並びのコンパクトなカード */
@media (max-width: 599px) {
	.ts-grid { gap: 10px; }
	.ts-card:hover { transform: none; }
	.ts-card__link { display: flex; gap: 12px; padding: 12px 12px 0; }
	.ts-card__cover { flex: none; width: 84px; height: 84px; aspect-ratio: auto; border-radius: 10px; }
	.ts-card__cover img.ts-card__ph { height: 66%; }
	.ts-card__body { flex: 1; min-width: 0; padding: 0; }
	.ts-card__meta { margin-bottom: 4px; gap: 4px; }
	.ts-card__meta .ts-chip { font-size: .7rem; padding: .1em .55em; }
	.ts-card__title { font-size: .98rem; margin-bottom: 2px; }
	.ts-card__excerpt { font-size: .8rem; line-height: 1.5; }
	.ts-card__foot { padding: 8px 12px 0; }
	.ts-card__date { padding: 2px 12px 10px; }
}
.ts-avatar { border-radius: 50%; object-fit: cover; }

/* Filter bar */
.ts-filter { background: var(--ts-bg-soft); border-radius: var(--ts-radius); padding: 14px; margin: 0 0 1.5em; }
.ts-filter__search { display: flex; gap: 8px; margin-bottom: 10px; }
.ts-filter__search input { flex: 1; min-width: 0; }
.ts-filter__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-filter__row select { flex: 1 1 140px; }
.ts-filter input[type="search"], .ts-filter select { padding: .6em .8em; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); background: #fff; font-size: 16px; font-family: inherit; color: var(--ts-ink); }
.ts-subfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 1em; }

/* Pagination */
.ts-pagination { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 2em 0; }
.ts-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--ts-line); border-radius: 999px; text-decoration: none; color: var(--ts-ink); }
.ts-pagination .current { background: var(--ts-ink); color: #fff; border-color: var(--ts-ink); }

/* Hero */
.ts-hero { text-align: center; padding: 40px 0 28px; }
.ts-hero__logo { margin: 0 auto 1.2em; }
.ts-hero__logo img { display: block; width: 480px; max-width: 82%; height: auto; margin: 0 auto; }
.ts-hero__title { font-size: clamp(1.8rem, 6vw, 3rem); font-weight: 900; line-height: 1.3; margin: 0 0 .5em; letter-spacing: -.01em; }
.ts-hero__lead { color: var(--ts-muted); font-size: 1.02rem; line-height: 1.9; margin: 0 0 1.5em; }
.ts-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 1.5em; }
.ts-hero__search { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; }
.ts-hero__search input { flex: 1; min-width: 0; padding: .8em 1em; border: 1.5px solid var(--ts-line); border-radius: 999px; font-size: 16px; font-family: inherit; }
.ts-hero__search input:focus { border-color: var(--ts-primary); outline: none; }

.ts-section { margin: 2.5em 0; }
.ts-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ts-section__head .ts-h2 { margin: 0 0 .8em; }
.ts-more-link { font-size: .9rem; color: var(--ts-primary-dark); text-decoration: none; white-space: nowrap; font-weight: 700; }

.ts-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 768px) { .ts-types { grid-template-columns: repeat(7, 1fr); } }
.ts-types__item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); text-decoration: none; color: var(--ts-ink); background: #fff; text-align: center; }
.ts-types__item:hover { border-color: var(--ts-primary); background: var(--ts-primary-soft); }
.ts-types__icon { font-size: 1.7rem; }
.ts-types__label { font-size: .8rem; font-weight: 700; line-height: 1.3; }
.ts-types__count { font-size: .72rem; color: var(--ts-muted); }

.ts-catchips { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-catchip { padding: .5em 1em; border: 1px solid var(--ts-line); border-radius: 999px; text-decoration: none; color: var(--ts-ink); font-size: .9rem; background: #fff; }
.ts-catchip span { color: var(--ts-muted); font-size: .8em; }
.ts-catchip:hover { border-color: var(--ts-primary); color: var(--ts-primary-dark); }

.ts-concept { background: var(--ts-bg-soft); border-radius: var(--ts-radius); padding: 28px 20px; }
.ts-concept .ts-h2 { margin-top: 0; }
.ts-concept__grid { display: grid; gap: 14px; margin: 1.5em 0; }
@media (min-width: 768px) { .ts-concept__grid { grid-template-columns: repeat(3, 1fr); } }
.ts-concept__item { background: #fff; border-radius: var(--ts-radius); padding: 18px; }
.ts-concept__item > span { font-size: 1.6rem; }
.ts-concept__item h3 { font-size: 1rem; margin: .4em 0; }
.ts-concept__item p { font-size: .9rem; color: var(--ts-muted); margin: 0; }

/* Manual detail */
.ts-manual { max-width: 760px; margin: 0 auto; }
.ts-preview-banner { background: var(--ts-ink); color: #fff; padding: 10px 14px; border-radius: var(--ts-radius-sm); margin-bottom: 1em; font-weight: 700; text-align: center; }
.ts-manual__cover { margin: 0 -16px 1.2em; }
@media (min-width: 768px) { .ts-manual__cover { margin: 0 0 1.2em; border-radius: var(--ts-radius); overflow: hidden; } }
.ts-manual__cover-img { width: 100%; height: auto; display: block; aspect-ratio: 1200 / 630; object-fit: cover; }
.ts-manual__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: .8em; }
.ts-manual__title { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 900; line-height: 1.35; margin: 0 0 .5em; letter-spacing: -.01em; }
.ts-manual__lead { font-size: 1.05rem; color: #374151; line-height: 1.85; margin: 0 0 1.2em; }
.ts-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ts-line); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); overflow: hidden; margin: 0 0 1.2em; }
@media (min-width: 768px) { .ts-facts { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.ts-facts__item { background: #fff; padding: 10px 14px; }
@media (max-width: 767px) { .ts-facts__item:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.ts-facts dt { font-size: .75rem; color: var(--ts-muted); display: flex; gap: 4px; align-items: center; }
.ts-facts dd { margin: 2px 0 0; font-weight: 700; font-size: .95rem; }
.ts-manual__author { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ts-line); margin-bottom: 1.5em; }
.ts-author { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ts-ink); min-width: 0; }
.ts-author > span { display: flex; flex-direction: column; min-width: 0; }
.ts-author__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-author__sub { font-size: .78rem; color: var(--ts-muted); }

.ts-toc { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 12px 14px; background: var(--ts-bg-soft); border-radius: var(--ts-radius-sm); margin: 0 0 2em; font-size: .88rem; }
.ts-toc__label { font-weight: 800; margin-right: 4px; }
.ts-toc a { color: var(--ts-ink); text-decoration: none; border-bottom: 1px dashed #c8c3be; }
.ts-toc a:hover { color: var(--ts-primary-dark); }

.ts-sec { margin: 0 0 2.2em; scroll-margin-top: 80px; }
.ts-sec__title { display: flex; align-items: center; gap: .45em; font-size: 1.3rem; font-weight: 800; margin: 0 0 .7em; padding-bottom: .35em; border-bottom: 2px solid var(--ts-ink); line-height: 1.4; }
.ts-sec p { margin: 0 0 1em; line-height: 1.95; }
.ts-list { margin: 0 0 1em; padding-left: 1.3em; line-height: 1.9; }
.ts-list li { margin-bottom: .2em; }
.ts-list li::marker { color: var(--ts-primary); }

.ts-sec--cautions { background: var(--ts-warn-bg); border: 1px solid var(--ts-warn-line); border-radius: var(--ts-radius); padding: 18px 18px 6px; }
.ts-sec--cautions .ts-sec__title { border-bottom-color: var(--ts-warn-line); }
.ts-sec--tips { background: var(--ts-ok-bg); border: 1px solid #b7e2c8; border-radius: var(--ts-radius); padding: 18px 18px 6px; }
.ts-sec--tips .ts-sec__title { border-bottom-color: var(--ts-ok-line); }
.ts-sec--summary { background: var(--ts-primary-soft); border-radius: var(--ts-radius); padding: 18px 18px 6px; }
.ts-sec--summary .ts-sec__title { border-bottom-color: var(--ts-primary); }
.ts-sec--prereq, .ts-sec--needed { background: var(--ts-bg-soft); border-radius: var(--ts-radius); padding: 18px 18px 6px; }
.ts-sec--prereq .ts-sec__title, .ts-sec--needed .ts-sec__title { border-bottom-color: var(--ts-line); }

.ts-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.ts-step { display: flex; gap: 14px; position: relative; padding-bottom: 1.4em; }
.ts-step:not(:last-child)::before { content: ""; position: absolute; left: 25px; top: 56px; bottom: 4px; width: 2px; background: var(--ts-line); }
.ts-step__num { flex-shrink: 0; width: 52px; height: 52px; border-radius: 50%; background: var(--ts-primary); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 900; font-size: 1.25rem; line-height: 1; }
.ts-step__num span { font-size: .55rem; letter-spacing: .08em; margin-bottom: 2px; font-weight: 700; }
.ts-step__body { flex: 1; min-width: 0; padding-top: 4px; }
.ts-step__title { font-size: 1.1rem; font-weight: 800; margin: .3em 0 .5em; line-height: 1.5; }

.ts-faq { border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); margin-bottom: 10px; background: #fff; }
.ts-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; display: flex; gap: 10px; align-items: flex-start; list-style: none; line-height: 1.6; }
.ts-faq summary::-webkit-details-marker { display: none; }
.ts-faq summary::after { content: "＋"; margin-left: auto; color: var(--ts-muted); }
.ts-faq[open] summary::after { content: "－"; }
.ts-faq__q, .ts-faq__alabel { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; font-weight: 900; }
.ts-faq__q { background: var(--ts-ink); color: #fff; }
.ts-faq__a { display: flex; gap: 10px; padding: 0 16px 6px; }
.ts-faq__alabel { background: var(--ts-primary); color: #fff; margin-top: 2px; }
.ts-faq__a > div { flex: 1; min-width: 0; }

.ts-person { display: grid; gap: 14px; }
@media (min-width: 768px) { .ts-person { grid-template-columns: repeat(2, 1fr); } .ts-person .ts-sec--about, .ts-person .ts-sec--message, .ts-person .ts-sec--request { grid-column: 1 / -1; } }
.ts-sec--person { background: #fff; border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 16px 16px 4px; margin: 0; }
.ts-sec--person .ts-sec__title { font-size: 1.05rem; border-bottom: 1px dashed var(--ts-line); }
.ts-sec--about { background: var(--ts-primary-soft); border-color: #fbd5c7; }
.ts-sec--ng { background: #fff5f5; border-color: #f3c4c4; }
.ts-sec--message { background: var(--ts-ok-bg); border-color: #b7e2c8; }

.ts-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 2em 0 1em; }
.ts-toggle { display: inline-flex; align-items: center; gap: .4em; padding: .75em 1.4em; border-radius: 999px; border: 1.5px solid var(--ts-line); background: #fff; font-weight: 800; cursor: pointer; font-size: 1rem; color: var(--ts-ink); font-family: inherit; }
.ts-toggle:hover { border-color: var(--ts-ink); }
.ts-toggle.is-on { background: var(--ts-primary-soft); border-color: var(--ts-primary); color: var(--ts-primary-dark); }
.ts-toggle--fav.is-on { background: #fff8e1; border-color: var(--ts-warn-line); color: #8a5a00; }
.ts-toggle__count { font-variant-numeric: tabular-nums; color: var(--ts-muted); font-weight: 700; }
.ts-follow { padding: .45em 1em; border-radius: 999px; border: 1.5px solid var(--ts-primary); background: #fff; color: var(--ts-primary-dark); font-weight: 800; cursor: pointer; font-size: .85rem; white-space: nowrap; font-family: inherit; }
.ts-follow.is-on { background: var(--ts-primary); color: #fff; }
.ts-follow [data-ts-label-on] { display: none; }
.ts-follow.is-on [data-ts-label-on] { display: inline; }
.ts-follow.is-on [data-ts-label-off] { display: none; }

.ts-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin: 0 0 2em; }
.ts-share__label { font-size: .85rem; color: var(--ts-muted); }
.ts-share__btn { padding: .4em .9em; border: 1px solid var(--ts-line); border-radius: 999px; background: #fff; font-size: .85rem; color: var(--ts-ink); text-decoration: none; cursor: pointer; font-family: inherit; }
.ts-share__btn:hover { border-color: var(--ts-ink); }

.ts-history { border-top: 1px solid var(--ts-line); padding-top: 1.5em; margin-top: 1em; }
.ts-history .ts-sec__title { font-size: 1rem; border: 0; padding: 0; }
.ts-history ul { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.ts-history li { padding: 4px 0; }
.ts-history time { font-weight: 700; margin-right: .5em; font-variant-numeric: tabular-nums; }
.ts-owner { margin: 1.5em 0; text-align: center; }
.ts-report { margin: 2em 0; font-size: .9rem; }
.ts-report summary { cursor: pointer; color: var(--ts-muted); }
.ts-report .ts-form { margin-top: 1em; padding: 16px; background: var(--ts-bg-soft); border-radius: var(--ts-radius); }

.ts-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0 0 1em; font-size: .8rem; color: var(--ts-muted); }
.ts-breadcrumb li + li::before { content: "›"; margin-right: 4px; }
.ts-breadcrumb a { color: var(--ts-muted); text-decoration: none; }
.ts-breadcrumb a:hover { color: var(--ts-ink); text-decoration: underline; }

/* Forms */
.ts-form { max-width: 760px; margin: 0 auto; }
.ts-form--narrow { max-width: 460px; }
.ts-form__type { font-weight: 800; font-size: 1.1rem; margin-bottom: 1em; padding: 12px 16px; background: var(--ts-primary-soft); border-radius: var(--ts-radius-sm); }
.ts-form__type .ts-small { font-weight: 400; margin-left: .5em; }
.ts-fieldset { border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 16px; margin: 0 0 1.2em; background: #fff; min-width: 0; }
.ts-fieldset legend { font-weight: 800; padding: 0 6px; font-size: 1rem; }
details.ts-fieldset > summary { font-weight: 800; cursor: pointer; }
details.ts-fieldset[open] > summary { margin-bottom: 1em; }
.ts-field { margin-bottom: 1.1em; }
.ts-field > label { display: block; font-weight: 700; margin-bottom: 4px; font-size: .95rem; }
.ts-field input[type="text"], .ts-field input[type="email"], .ts-field input[type="url"], .ts-field input[type="password"], .ts-field input[type="date"], .ts-field input[type="search"], .ts-field select, .ts-field textarea, .ts-repeater input[type="text"], .ts-repeater textarea {
	display: block; width: 100%; box-sizing: border-box; padding: .7em .85em; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius-sm); font-size: 16px; font-family: inherit; color: var(--ts-ink); background: #fff; line-height: 1.6;
}
.ts-field textarea, .ts-repeater textarea { resize: vertical; min-height: 4.5em; }
.ts-field ::placeholder, .ts-repeater ::placeholder, .ts-filter ::placeholder, .ts-hero__search ::placeholder { color: #a8adb4; opacity: 1; }
.ts-field input:focus, .ts-field select:focus, .ts-field textarea:focus, .ts-repeater input:focus, .ts-repeater textarea:focus { border-color: var(--ts-primary); outline: none; box-shadow: 0 0 0 3px rgba(232,97,60,.15); }
.ts-field input[type="file"] { font-size: .9rem; max-width: 100%; }
.ts-field-row { display: grid; gap: 0 12px; }
@media (min-width: 600px) { .ts-field-row { grid-template-columns: 1fr 1fr; } }
.ts-hint { font-size: .8rem; color: var(--ts-muted); margin: 0 0 6px; line-height: 1.6; display: block; font-weight: 400; }
.ts-req { display: inline-block; font-size: .68rem; background: var(--ts-primary); color: #fff; padding: 1px 6px; border-radius: 4px; vertical-align: middle; font-weight: 700; }
.ts-check { display: flex; gap: 8px; align-items: flex-start; margin: .5em 0 1em; font-size: .92rem; cursor: pointer; line-height: 1.6; }
.ts-check input { margin-top: .35em; width: 18px; height: 18px; flex-shrink: 0; }
.ts-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.ts-radio-group--stack { flex-direction: column; }
.ts-radio { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 10px 12px; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius-sm); cursor: pointer; font-size: .92rem; }
.ts-radio:has(input:checked) { border-color: var(--ts-primary); background: var(--ts-primary-soft); }
.ts-radio input { width: 18px; height: 18px; margin: 0; }
.ts-radio .ts-hint { flex-basis: 100%; margin: 0 0 0 26px; }
.ts-consent { margin-top: 10px; padding: 12px; background: var(--ts-warn-bg); border-radius: var(--ts-radius-sm); }
.ts-repeater__row { border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); padding: 10px; margin-bottom: 10px; background: var(--ts-bg-soft); display: grid; gap: 8px; }
.ts-repeater__head { display: flex; align-items: center; justify-content: space-between; }
.ts-repeater__tools { display: inline-flex; gap: 4px; }
.ts-step-badge { display: inline-block; background: var(--ts-primary); color: #fff; font-weight: 800; font-size: .8rem; padding: 2px 10px; border-radius: 999px; }
.ts-form__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 1.5em 0 .8em; position: sticky; bottom: 0; background: rgba(255,255,255,.95); padding: 12px 0; z-index: 5; }
.ts-form__actions .ts-btn { flex: 1 1 auto; }
@media (min-width: 600px) { .ts-form__actions .ts-btn { flex: 0 0 auto; min-width: 140px; } }
.ts-cover-current { margin-bottom: 8px; }
.ts-cover-current img { max-width: 320px; width: 100%; height: auto; border-radius: var(--ts-radius-sm); display: block; }
.ts-avatar-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ts-avatar-edit input[type="file"] { flex: 1 1 180px; min-width: 0; max-width: 100%; }
.ts-delete-form { text-align: center; margin: 2em 0; }
.ts-inline { display: inline; margin: 0; }
.ts-preview-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; position: sticky; bottom: 0; background: rgba(255,255,255,.97); padding: 14px 0; border-top: 1px solid var(--ts-line); margin-top: 2em; z-index: 5; }

.ts-chooser__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.2em 0; }
@media (min-width: 768px) { .ts-chooser__grid { grid-template-columns: repeat(4, 1fr); } }
.ts-chooser__item { display: flex; flex-direction: column; gap: 4px; padding: 16px 14px; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius); text-decoration: none; color: var(--ts-ink); background: #fff; }
.ts-chooser__item:hover { border-color: var(--ts-primary); background: var(--ts-primary-soft); }
.ts-chooser__icon { font-size: 2rem; }
.ts-chooser__label { font-weight: 800; }
.ts-chooser__desc { font-size: .8rem; color: var(--ts-muted); line-height: 1.5; }

/* Mypage & profile */
.ts-mypage__head { display: flex; align-items: center; gap: 12px; margin-bottom: 1em; }
.ts-mypage__name { font-weight: 800; font-size: 1.15rem; }
.ts-tabs { display: flex; border-bottom: 2px solid var(--ts-line); margin: 1.5em 0 1em; overflow-x: auto; }
.ts-tabs__item { padding: 10px 16px; text-decoration: none; color: var(--ts-muted); font-weight: 700; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.ts-tabs__item.is-active { color: var(--ts-ink); border-color: var(--ts-primary); }
.ts-mylist { list-style: none; padding: 0; margin: 0; }
.ts-mylist__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--ts-line); }
.ts-mylist__main { flex: 1 1 300px; min-width: 0; }
.ts-mylist__title { font-weight: 800; color: var(--ts-ink); text-decoration: none; }
.ts-mylist__actions { display: flex; gap: 6px; align-items: center; }
.ts-status { display: inline-block; font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 4px; background: #e5f6ec; color: #1f7a4c; }
.ts-status--unlisted { background: var(--ts-info-bg); color: #1d4ed8; }
.ts-status--private { background: #f3f4f6; color: #4b5563; }
.ts-status--draft { background: var(--ts-warn-bg); color: #8a5a00; }
.ts-userlist { list-style: none; padding: 0; }
.ts-userlist li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ts-line); }

.ts-profile__head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.ts-profile__info { flex: 1; min-width: 200px; }
.ts-profile__name { font-size: 1.5rem; font-weight: 900; margin: 0 0 .3em; }
.ts-profile__counts { display: flex; gap: 14px; font-size: .9rem; color: var(--ts-muted); margin-bottom: .6em; }
.ts-profile__counts strong { color: var(--ts-ink); font-size: 1.05rem; }
.ts-profile__bio { margin: 1.2em 0; line-height: 1.9; }
.ts-profile__links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1em; }
.ts-profile__links a { display: inline-block; padding: .3em .9em; border: 1px solid var(--ts-line); border-radius: 999px; font-size: .85rem; color: var(--ts-ink); text-decoration: none; }

/* スパム対策の質問 */
.ts-captcha__q { display: inline-block; margin: 2px 0 8px; padding: 8px 16px; background: var(--ts-primary-soft); border: 1px dashed #fbd5c7; border-radius: var(--ts-radius-sm); font-size: 1.25rem; font-weight: 800; letter-spacing: .05em; }
.ts-captcha input { max-width: 140px; }

/* トップのイラスト */
.ts-hero__art { margin: 0 auto 1.4em; max-width: 420px; }
.ts-hero__art img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
	.ts-hero { display: grid; grid-template-columns: 1.05fr 1fr; grid-template-areas: "text art" "cta art"; column-gap: 32px; align-items: center; text-align: left; padding: 48px 0 32px; }
	.ts-hero__text { grid-area: text; align-self: end; }
	.ts-hero__art { grid-area: art; max-width: 560px; margin: 0; }
	.ts-hero__cta { grid-area: cta; align-self: start; }
	.ts-hero__logo img { margin: 0; }
	.ts-hero__actions { justify-content: flex-start; }
	.ts-hero__search { margin: 0; }
}
.ts-concept__art { max-width: 600px; margin: 0 auto 1.2em; }
.ts-concept__art img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) { .ts-hero__title { font-size: clamp(2rem, 3.2vw, 2.7rem); } }

/* 評価ボタン */
.ts-feedback { margin: 2.2em 0 1em; padding: 18px 14px 12px; background: var(--ts-bg-soft); border-radius: var(--ts-radius); text-align: center; }
.ts-feedback__q { font-weight: 800; margin: 0 0 12px; }
.ts-feedback .ts-actions { margin: 0 0 8px; gap: 8px; }
.ts-feedback .ts-toggle { font-size: .9rem; padding: .6em 1em; background: #fff; }
.ts-toggle--outdated.is-on { background: #fff8e1; border-color: var(--ts-warn-line); color: #8a5a00; }
.ts-toggle--done.is-on, .ts-toggle--clear.is-on { background: var(--ts-ok-bg); border-color: var(--ts-ok-line); color: #1f7a4c; }
.ts-actions--sub { margin-top: 4px; }
.ts-warn-text { color: #8a5a00; font-weight: 700; }

/* 評価ボタン：スマホでは2列にそろえる */
@media (max-width: 599px) {
	.ts-feedback .ts-actions:not(.ts-actions--sub) { display: grid; grid-template-columns: 1fr 1fr; }
	.ts-feedback .ts-actions:not(.ts-actions--sub) .ts-toggle { justify-content: center; padding: .65em .4em; font-size: .85rem; }
}

/* 印刷・QR */
.ts-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: -1em 0 2em; }
.ts-print-only { display: none; }
.ts-pdfbar { margin: 0 0 1.2em; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ts-pdfbar__to { font-size: .85rem; color: var(--ts-muted); }
.ts-pdfbar__to input { padding: .45em .7em; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius-sm); font-size: 16px; font-family: inherit; width: 11em; }
.ts-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(17, 24, 39, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.ts-modal__box { position: relative; background: #fff; border-radius: var(--ts-radius); padding: 24px 20px 18px; width: 100%; max-width: 340px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,.2); }
.ts-modal__close { position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: var(--ts-muted); }
.ts-modal__title { font-weight: 800; margin: 0 24px 12px; line-height: 1.5; }
.ts-modal__qr { display: block; width: 240px; height: 240px; margin: 0 auto 8px; image-rendering: pixelated; }
.ts-modal__url { font-size: .75rem; color: var(--ts-muted); word-break: break-all; margin: 0 0 12px; }
.ts-modal__actions { display: flex; gap: 8px; justify-content: center; margin-bottom: 10px; }

/* PDF・印刷（A4） */
@page { size: A4; margin: 16mm 14mm 18mm; @bottom-center { content: "みんなの取説 torisetsu.jp　" counter(page) " / " counter(pages); font-size: 8pt; color: #777; } }
@media print {
	html, body { background: #fff !important; }
	body { font-size: 10.5pt; line-height: 1.7; color: #1f2933; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	.ts-feedback, .ts-share, .ts-tools, .ts-report, .ts-owner, .ts-follow, .ts-breadcrumb, .ts-preview-actions, .ts-preview-banner, .ts-modal, .ts-toc, .ts-pdfbar, .ts-sim-cta, .ts-manual__author, .ts-qa, .ts-history, .ts-tags, .ts-alert--stale { display: none !important; }
	.ts-print-only { display: block !important; }
	.ts-print-mast { display: flex !important; justify-content: space-between; margin: 0 0 10px; padding: 0 0 6px; border-bottom: 2px solid #e8613c; font-size: 10pt; color: #555; }
	.ts-print-to { margin: 0 0 8px; font-size: 13pt; font-weight: 800; color: #e8613c; }
	.ts-print-to:empty { display: none !important; }
	.ts-print-mast b { color: #e8613c; font-size: 12pt; margin-right: .5em; }
	.ts-print-url { display: flex !important; align-items: center; gap: 12px; margin-top: 1.6em; padding-top: 8px; border-top: 1px solid #ccc; font-size: 8.5pt; color: #555; break-inside: avoid; }
	.ts-print-url p { margin: 0; }
	.ts-print-qr img { display: block; }
	.ts-manual { max-width: none; }
	.ts-manual__cover { margin: 0 0 8px; max-height: 60mm; overflow: hidden; border-radius: 6px; }
	.ts-manual__title { font-size: 20pt; margin: .2em 0 .3em; }
	.ts-sec__title { break-after: avoid; }
	.ts-faq summary::after { display: none; }
	.ts-faq { border-color: #ccc; }
	.ts-step, .ts-faq, .ts-sec--person, .ts-facts { break-inside: avoid; }
	a { color: inherit; text-decoration: none; }
}

/* 質問（Q&A） */
.ts-qa { margin: 2.5em 0 1.5em; scroll-margin-top: 80px; }
.ts-qa__list { list-style: none; margin: 0 0 1.2em; padding: 0; }
.ts-qa__item { border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: 14px; margin-bottom: 12px; background: #fff; scroll-margin-top: 80px; }
.ts-qa__q, .ts-qa__a { display: flex; gap: 10px; align-items: flex-start; }
.ts-qa__a { margin-top: 12px; padding: 12px; background: var(--ts-primary-soft); border-radius: var(--ts-radius-sm); }
.ts-qa__badge { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 900; font-size: .85rem; color: #fff; }
.ts-qa__badge--q { background: var(--ts-ink); }
.ts-qa__badge--a { background: var(--ts-primary); }
.ts-qa__body { flex: 1; min-width: 0; }
.ts-qa__body p { margin: 0 0 .5em; line-height: 1.8; }
.ts-qa__meta { font-size: .75rem; color: var(--ts-muted); }
.ts-qa__meta a { color: var(--ts-muted); }
.ts-qa__waiting { margin: 8px 0 0 38px; }
.ts-qa__answer-form { margin: 10px 0 0 38px; }
.ts-qa__answer-form summary { cursor: pointer; font-size: .85rem; color: var(--ts-primary-dark); font-weight: 700; }
.ts-qa__answer-form .ts-form { margin-top: 8px; display: grid; gap: 8px; justify-items: start; }
.ts-qa__answer-form textarea, .ts-qa__ask textarea { width: 100%; box-sizing: border-box; padding: .7em .85em; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius-sm); font-size: 16px; font-family: inherit; }
.ts-qa__ask { max-width: none; padding: 14px; background: var(--ts-bg-soft); border-radius: var(--ts-radius); }
.ts-linkbtn { border: 0; background: none; padding: 0; color: var(--ts-muted); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; }
@media print { .ts-qa__ask, .ts-qa__answer-form, .ts-qa .ts-inline { display: none !important; } }

/* Googleログイン */
.ts-auth-sns { margin: 0 auto 1em; }
.ts-google__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: .8em 1em; border: 1.5px solid #dadce0; border-radius: 999px; background: #fff; color: #3c4043; font-weight: 700; text-decoration: none; font-size: .95rem; }
.ts-google__btn:hover { background: #f8f9fa; border-color: #c6c9cc; color: #3c4043; }
.ts-google .ts-hint { margin: 8px 4px 0; }
.ts-google__or { display: flex; align-items: center; gap: 10px; margin: 18px 0 6px; color: var(--ts-muted); font-size: .8rem; }
.ts-google__or::before, .ts-google__or::after { content: ""; flex: 1; height: 1px; background: var(--ts-line); }

/* AIたたき台 */
.ts-ai { border: 1.5px dashed #c7b8f5; background: #f7f4ff; border-radius: var(--ts-radius); padding: 14px 16px; margin: 0 0 1.2em; }
.ts-ai__title { font-weight: 800; margin: 0 0 4px; }
.ts-ai__row { display: flex; gap: 8px; }
.ts-ai__row input { flex: 1; min-width: 0; padding: .65em .85em; border: 1.5px solid var(--ts-line); border-radius: var(--ts-radius-sm); font-size: 16px; font-family: inherit; }
.ts-ai__status { margin: 8px 0 0; }
.ts-ai-inline { margin: 0 0 1em; }

/* イラスト（本文中の図） */
.ts-fig { margin: 1.2em 0; }
.ts-fig img { display: block; width: 100%; height: auto; border-radius: 14px; }
.ts-step__body .ts-fig { margin: .9em 0 .2em; max-width: 520px; }
.ts-person__fig { grid-column: 1 / -1; }
@media print { .ts-fig { break-inside: avoid; } }

/* 申し送りの取説：書かない情報の注意・音声入力の紹介 */
.ts-alert--warn { background: #fff7e0; border: 1px solid #f0d58a; }
.ts-voice { margin: 0 0 1.2em; padding: 14px 16px; background: var(--ts-primary-soft); border: 1px solid #f9d4c6; border-radius: var(--ts-radius); }
.ts-voice__title { margin: 0 0 .5em; }
.ts-voice .ts-list { margin: .4em 0 .8em; }

/* 画面には出さず、検索エンジン・読み上げにだけ伝える文字 */
.ts-hero__title .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* トップ：ジャンル一覧（ポータル型） */
.ts-portal { margin: 12px 0 8px; }
.ts-portal__title { font-size: 1.15rem; font-weight: 800; margin: 0 0 10px; line-height: 1.4; }
.ts-portal__title small { display: block; font-size: .78rem; font-weight: 400; color: var(--ts-muted); }
.ts-portal__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px; background: #dbe6f5; border: 1px solid #b7c8e2; border-radius: 6px; }
.ts-portal__search { flex: 1 1 320px; display: flex; min-width: 0; }
.ts-portal__search input { flex: 1; min-width: 0; padding: .65em .9em; border: 1px solid #8fa6c6; border-right: 0; border-radius: 4px 0 0 4px; font-size: 16px; font-family: inherit; }
.ts-portal__search button { padding: 0 1.6em; border: 0; border-radius: 0 4px 4px 0; background: #2b5aa8; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
.ts-portal__search button:hover { background: #1f4688; }
.ts-portal__kw, .ts-portal__make { padding: .6em 1em; border-radius: 4px; background: #fff; border: 1px solid #8fa6c6; color: #2b5aa8; font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.ts-portal__make { background: var(--ts-primary); border-color: var(--ts-primary); color: #fff; }
.ts-portal__main { display: grid; gap: 16px; margin-top: 14px; }
.ts-genres { display: grid; grid-template-columns: 1fr; border: 1px solid #c9ced6; border-radius: 6px; overflow: hidden; background: #fff; }
.ts-genre { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid #e3e6ea; min-width: 0; }
.ts-genre__icon { flex: 0 0 52px; display: block; line-height: 0; }
.ts-genre__body { min-width: 0; }
.ts-genre__name { display: block; font-size: 1.05rem; font-weight: 800; color: #1a5bb8; text-decoration: none; line-height: 1.35; }
.ts-genre__name:hover { text-decoration: underline; }
.ts-genre__sub { margin: 2px 0 0; font-size: .74rem; line-height: 1.55; color: var(--ts-muted); }
.ts-genre__sub a { color: #6b7280; text-decoration: none; margin-right: .35em; display: inline-block; }
.ts-genre__sub a:hover { color: #1a5bb8; text-decoration: underline; }
.ts-side { border: 1px solid #c9ced6; border-radius: 6px; background: #fff; padding: 0 12px 10px; margin-bottom: 14px; }
.ts-side__head { margin: 0 -12px 6px; padding: 8px 12px; font-size: .95rem; background: #eef2f8; border-bottom: 1px solid #c9ced6; border-radius: 6px 6px 0 0; }
.ts-side__list { list-style: none; margin: 0 0 6px; padding: 0; }
.ts-side__list li { padding: 7px 0; border-bottom: 1px dotted #d5d9df; font-size: .86rem; line-height: 1.5; }
.ts-side__list a { color: #1a5bb8; text-decoration: none; }
.ts-side__list a:hover { text-decoration: underline; }
@media (min-width: 600px) { .ts-genres { grid-template-columns: repeat(2, 1fr); } .ts-genre:nth-child(odd) { border-right: 1px solid #e3e6ea; } }
@media (min-width: 1000px) {
	.ts-portal__main { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
	.ts-genres { grid-template-columns: repeat(3, 1fr); }
	.ts-genre:nth-child(odd) { border-right: 0; }
	.ts-genre:not(:nth-child(3n)) { border-right: 1px solid #e3e6ea; }
}