/* ============================================================
次の灯研究所 ページ v1.18（top_v1.1.css の後に読み込む追加スタイル）
============================================================ */
/* ---------- hero ---------- */
.tp-labhero { position: relative; overflow: hidden; background: #fff; border-bottom: 1px solid var(--tp-line); }
.tp-labhero .tp-splash--r { right: -8vw; top: -12%; width: clamp(280px, 30vw, 560px); opacity: .75; }
.tp-labhero .tp-splash--l { left: -10vw; bottom: -30%; width: clamp(260px, 28vw, 520px); opacity: .7; }
.tp-labhero__in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 72px); align-items: center; padding-block: clamp(40px, 5vw, 72px); }
.tp-crumb { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 13px; color: var(--tp-ink-3); margin-bottom: 22px; }
.tp-crumb a { color: var(--tp-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.tp-crumb li + li::before { content: "›"; margin-right: 10px; }
.tp-labhero__en { font-family: var(--tp-font-en); font-size: 12px; letter-spacing: .32em; color: var(--tp-brown); margin-bottom: 10px; }
.tp-labhero__title { font-family: var(--tp-font-serif); font-weight: 700; font-size: clamp(36px, 4.6vw, 64px); line-height: 1.2; letter-spacing: .06em; margin-bottom: 20px; }
.tp-labhero__state { font-family: var(--tp-font-serif); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.6; letter-spacing: .06em; color: var(--tp-ink); padding-left: 16px; border-left: 3px solid var(--tp-red); margin: 20px 0 24px; }
.tp-labhero__lead { font-size: 17px; line-height: 2; color: var(--tp-ink-2); max-width: 36em; }
.tp-labhero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.tp-labhero__fig { position: relative; border-radius: var(--tp-r-img); overflow: hidden; box-shadow: 0 24px 48px -36px rgba(40, 20, 0, .45); aspect-ratio: 4 / 3; }
.tp-labhero__fig img { width: 100%; height: 100%; object-fit: cover; }
.tp-labhero__fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; font-size: 12px; color: #fff; background: linear-gradient(0deg, rgba(43, 33, 25, .7), rgba(43, 33, 25, 0)); letter-spacing: .06em; }
@media (max-width: 900px) { .tp-labhero__in { grid-template-columns: 1fr; } .tp-labhero__fig { aspect-ratio: 16 / 9; } }
/* ---------- in-page nav ---------- */
.tp-subnav { position: sticky; top: 76px; z-index: 40; background: rgba(255, 255, 255, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--tp-line); }
.tp-subnav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tp-subnav ul::-webkit-scrollbar { display: none; }
.tp-subnav a { display: inline-flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; color: var(--tp-ink-2); border-bottom: 2px solid transparent; }
.tp-subnav a b { font-family: var(--tp-font-en); font-weight: 500; color: var(--tp-brown); letter-spacing: .08em; }
.tp-subnav a:hover, .tp-subnav a.is-current { color: var(--tp-ink); border-bottom-color: var(--tp-brown); }
@media (max-width: 1180px) { .tp-subnav { top: 64px; } }
/* ---------- purpose ---------- */
.tp-purpose { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 28px); }
.tp-purpose__i { border-top: 1px solid var(--tp-ink); padding: 22px 0 0; position: relative; }
.tp-purpose__no { font-family: var(--tp-font-en); font-weight: 500; font-size: 13px; letter-spacing: .2em; color: var(--tp-brown); }
.tp-purpose__t { font-family: var(--tp-font-serif); font-weight: 700; font-size: 20px; letter-spacing: .06em; margin: 8px 0 10px; line-height: 1.5; }
.tp-purpose__d { font-size: 15.5px; line-height: 1.9; color: var(--tp-ink-2); }
.tp-purpose__src { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 40px; padding: 20px 0 0; border-top: 1px solid var(--tp-ink); font-size: 14px; color: var(--tp-ink-2); }
.tp-purpose__src b { font-family: var(--tp-font-en); font-weight: 600; font-size: 20px; color: var(--tp-ink); margin-right: 6px; }
@media (max-width: 900px) { .tp-purpose { grid-template-columns: 1fr; } }
/* ---------- method（数字の根拠）：長文に見合う余白 ---------- */
.tp-method-sec { background: var(--tp-paper-2); }
.tp-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6.5vw, 104px); align-items: start; }
.tp-method > div:first-child { max-width: 31em; padding-top: 6px; }
.tp-method__p { font-size: 16px; line-height: 2.1; letter-spacing: .02em; color: var(--tp-ink-2); }
.tp-method__p + .tp-method__p { margin-top: 1.4em; }
.tp-method__p b { color: var(--tp-ink); }
.tp-method__links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 32px; }
.tp-method__f { background: #fff; border-radius: var(--tp-r); padding: clamp(24px, 3vw, 40px) clamp(24px, 3.2vw, 44px); box-shadow: 0 18px 40px -34px rgba(40, 25, 10, .5); }
.tp-method__f dl { display: grid; grid-template-columns: 10.5em 1fr; gap: 0; font-size: 14.5px; line-height: 1.75; }
.tp-method__f dt, .tp-method__f dd { padding: 15px 0; }
.tp-method__f dt + dd { padding-left: 16px; }
.tp-method__f dt:not(:first-of-type), .tp-method__f dt:not(:first-of-type) + dd { border-top: 1px solid var(--tp-line); }
.tp-method__f dt { font-weight: 700; color: var(--tp-ink-2); font-size: 13.5px; letter-spacing: .04em; }
.tp-method__f dd { color: var(--tp-ink); }
.tp-method__f dd .tp-num { font-size: 20px; color: var(--tp-red); margin-right: 2px; }
@media (max-width: 900px) { .tp-method { grid-template-columns: 1fr; gap: 32px; } .tp-method > div:first-child { max-width: none; } .tp-method__f dl { grid-template-columns: 1fr; } .tp-method__f dt { padding-bottom: 2px; } .tp-method__f dt + dd { padding-left: 0; padding-top: 0; border-top: 0 !important; } }
/* ---------- collaboration CTA ---------- */
.tp-collab { position: relative; overflow: hidden; background: #fff; }
.tp-collab .tp-splash--l { left: -8vw; bottom: -10%; width: clamp(220px, 24vw, 440px); opacity: .5; }
.tp-collab .tp-splash--r { right: -8vw; top: -4%; width: clamp(220px, 24vw, 440px); opacity: .5; }
.tp-collab .tp-wrap { position: relative; z-index: 1; }
.tp-collab__in { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); }
.tp-collab__i { position: relative; z-index: 1; border-top: 1px solid var(--tp-ink); padding: 22px 0 0; display: flex; flex-direction: column; }
.tp-collab__i svg { width: 32px; height: 32px; color: var(--tp-brown); margin-bottom: 10px; }
.tp-collab__t { font-family: var(--tp-font-serif); font-weight: 700; font-size: 19px; letter-spacing: .04em; margin-bottom: 8px; }
.tp-collab__d { font-size: 15px; line-height: 1.8; color: var(--tp-ink-2); flex: 1; }
.tp-collab__i .tp-btn { margin-top: 18px; align-self: flex-start; }
@media (max-width: 900px) { .tp-collab__in { grid-template-columns: 1fr; } }
/* ---------- back to top page ---------- */
.tp-back { text-align: center; padding: clamp(40px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
/* ---------- library：知りたいこと（写真タイル） ---------- */
.tp-themes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.8vw, 24px); }
.tp-theme { --c: #C4512F; scroll-margin-top: 140px; }
.tp-theme--metal { --c: #B08A3A; }
.tp-theme--region { --c: #5E8A45; }
.tp-theme--eval { --c: #3A6E9E; }
.tp-theme__a { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(330px, 29vw, 420px); padding: clamp(20px, 2.2vw, 30px); border-radius: var(--tp-r); overflow: hidden; color: #fff; box-shadow: 0 24px 48px -32px rgba(30, 18, 8, .55); }
.tp-theme__bg { position: absolute; inset: 0; z-index: -2; }
.tp-theme__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s var(--tp-ease), filter .6s; }
.tp-theme__a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22, 14, 8, .5) 0%, rgba(22, 14, 8, .08) 26%, rgba(22, 14, 8, .38) 48%, rgba(22, 14, 8, .86) 78%, rgba(22, 14, 8, .94) 100%); transition: opacity .5s; }
.tp-theme__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); transform: scaleX(.18); transform-origin: left; transition: transform .7s var(--tp-ease); }
.tp-theme__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: auto; }
.tp-theme__label { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--c); font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.tp-theme__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.tp-theme__fact { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .92); white-space: nowrap; }
.tp-theme__fact b { font-family: var(--tp-font-en); font-size: 13.5px; margin: 0 2px; }
.tp-theme__q { display: block; margin-top: 28px; font-family: var(--tp-font-serif); font-weight: 700; font-size: clamp(22px, 2.15vw, 31px); line-height: 1.5; letter-spacing: .04em; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
.tp-theme__pre { display: grid; gap: 4px; margin-top: 14px; font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, .78); }
.tp-theme__pre span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-left: 16px; position: relative; }
.tp-theme__pre span::before { content: ""; position: absolute; left: 0; top: .8em; width: 9px; height: 1px; background: currentColor; }
.tp-theme__go { display: inline-flex; align-items: center; align-self: flex-start; gap: 10px; margin-top: 20px; padding: 6px 6px 6px 20px; border-radius: 999px; background: #fff; color: var(--tp-ink); font-size: 14px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.tp-theme__go b { font-family: var(--tp-font-en); font-size: 30px; line-height: 1; color: var(--c); letter-spacing: -.02em; }
.tp-theme__go i { width: 40px; height: 40px; border-radius: 50%; background: var(--c); position: relative; flex: none; transition: transform .5s var(--tp-ease); }
.tp-theme__go i::after { content: ""; position: absolute; inset: 0; background: #fff; -webkit-mask: var(--tp-i-arrow) center / 16px no-repeat; mask: var(--tp-i-arrow) center / 16px no-repeat; transform: rotate(90deg); }
.tp-theme__a:hover .tp-theme__bg img, .tp-theme__a:focus-visible .tp-theme__bg img { transform: scale(1.08); }
.tp-theme__a:hover::after, .tp-theme__a:focus-visible::after { transform: scaleX(1); }
.tp-theme__a:hover .tp-theme__go i { transform: translateY(3px); }
.tp-theme__a:hover .tp-theme__pre { color: #fff; }
@media (max-width: 760px) {
.tp-themes { grid-template-columns: 1fr; }
.tp-theme__a { min-height: 300px; padding: 18px; }
.tp-theme__q { font-size: 22px; margin-top: 20px; }
.tp-theme__pre span + span { display: none; }
.tp-theme__go { margin-top: 16px; }
}
/* ---------- finder：絞り込み＋記事 ---------- */
.tp-finder { margin-top: clamp(36px, 4vw, 56px); scroll-margin-top: 130px; }
.tp-filter { display: grid; grid-template-columns: 1fr auto; gap: 10px 24px; padding: 18px 20px; background: var(--tp-paper-2); border-radius: var(--tp-r); }
.tp-filter__row { grid-column: 1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.tp-filter__k { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--tp-ink-2); }
.tp-filter__opts { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-root .tp-filter__opts button { white-space: nowrap; padding: 8px 15px; border: 1px solid var(--tp-line-2); border-radius: 999px; background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tp-ink-2); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.tp-root .tp-filter__opts button:hover { border-color: var(--tp-brown); color: var(--tp-ink); }
.tp-root .tp-filter__opts button[aria-pressed="true"] { background: var(--tp-ink); border-color: var(--tp-ink); color: #fff; }
.tp-filter__count { grid-column: 2; grid-row: 1; align-self: center; font-size: 13px; color: var(--tp-ink-2); white-space: nowrap; }
.tp-filter__count b { font-family: var(--tp-font-en); font-size: 30px; font-weight: 700; color: var(--tp-ink); margin-right: 4px; }
@media (max-width: 760px) { .tp-filter { grid-template-columns: 1fr; padding: 16px; } .tp-filter__row { grid-template-columns: 1fr; gap: 8px; } .tp-filter__count { grid-column: 1; grid-row: auto; } .tp-filter__opts { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .tp-filter__opts button { flex: none; } }
.tp-finder { max-width: 960px; margin-inline: auto; }
.tp-arts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 48px); row-gap: clamp(48px, 5vw, 72px); margin-top: clamp(32px, 3.4vw, 48px); }
/* 画像・メタ・タイトル・わかること の4段を、同じ行のカード同士で揃える */
.tp-art { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
.tp-art[hidden] { display: none; }
.tp-art__a { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; color: var(--tp-ink); }
.tp-art__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--tp-r-img); background: var(--tp-paper-2); }
.tp-art__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--tp-ease); }
.tp-art__a:hover .tp-art__img img { transform: scale(1.05); }
.tp-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 18px; font-size: 12px; }
.tp-art__meta time { font-family: var(--tp-font-en); letter-spacing: .08em; color: var(--tp-ink-3); margin-left: auto; }
.tp-art__th { --c: var(--tp-red); display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--c); letter-spacing: .04em; }
.tp-art__th::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.tp-art__th--metal { --c: #9A7428; }
.tp-art__th--region { --c: var(--tp-green); }
.tp-art__th--eval { --c: var(--tp-blue); }
.tp-art__t { display: block; font-family: var(--tp-font-serif); font-weight: 700; font-size: 17px; line-height: 1.6; letter-spacing: .03em; margin-top: 10px; transition: color .3s; }
.tp-art__a:hover .tp-art__t { color: var(--tp-brown); text-decoration: underline; text-underline-offset: 4px; }
.tp-art__take { display: block; align-self: start; font-size: 14px; line-height: 1.85; color: var(--tp-ink-2); margin-top: 16px; }
.tp-art__take b { display: block; font-size: 11.5px; letter-spacing: .12em; color: var(--tp-ink-3); margin-bottom: 4px; }
.tp-arts__empty { margin-top: 28px; padding: 32px 20px; text-align: center; background: var(--tp-paper-2); border-radius: var(--tp-r); color: var(--tp-ink-2); }
.tp-arts__empty .tp-btn { margin-top: 14px; }
.tp-arts__all { margin-top: clamp(40px, 4vw, 56px); text-align: right; }
@media (max-width: 1000px) { .tp-arts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.tp-arts { grid-template-columns: 1fr; row-gap: 36px; }
.tp-art, .tp-art__a { grid-row: auto; grid-template-rows: none; }
.tp-art { display: block; }
.tp-art__a { grid-template-columns: 112px 1fr; column-gap: 14px; align-items: start; }
.tp-art__img { grid-row: 1 / span 2; aspect-ratio: 4 / 3; }
.tp-art__meta { margin-top: 0; }
.tp-art__t { font-size: 15.5px; margin-top: 4px; }
.tp-art__take { grid-column: 1 / -1; margin-top: 12px; }
}
/* ---------- upcoming（控えめな一覧） ---------- */
.tp-upcoming { background: var(--tp-paper-2); }
.tp-up { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.tp-up__lead { font-size: 15px; line-height: 1.9; color: var(--tp-ink-2); margin: -8px 0 20px; }
.tp-up__list { border-top: 1px solid var(--tp-ink); }
.tp-up__i { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tp-line); }
.tp-up__kind { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; color: var(--tp-brown); text-align: center; padding: 3px 0; border: 1px solid currentColor; border-radius: 3px; }
.tp-up__t { font-weight: 700; font-size: 15px; line-height: 1.5; }
.tp-up__q { font-size: 13px; line-height: 1.7; color: var(--tp-ink-3); margin-top: 2px; }
.tp-up__st { font-size: 11.5px; font-weight: 700; color: var(--tp-ink-3); white-space: nowrap; }
.tp-up__st--open { color: var(--tp-green); }
@media (max-width: 900px) { .tp-up { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .tp-up__i { grid-template-columns: 48px 1fr; } .tp-up__st { grid-column: 2; } }
/* ---------- TOPと同じ帯のリズム（白／生成り）と飛沫 ---------- */
.tp-library, .tp-purpose-sec { position: relative; overflow: hidden; }
.tp-library .tp-splash--r { right: -8vw; top: -4%; width: clamp(240px, 26vw, 460px); opacity: .55; }
.tp-purpose-sec .tp-splash--l { left: -10vw; top: 6%; width: clamp(240px, 26vw, 460px); opacity: .45; }
.tp-library .tp-wrap, .tp-purpose-sec .tp-wrap { position: relative; z-index: 1; }
/* ---------- 外部の出典（報道・公的機関） ---------- */
.tp-src { margin-top: clamp(56px, 6vw, 88px); }
.tp-src__h { display: flex; align-items: center; gap: 12px; font-family: var(--tp-font-serif); font-weight: 700; font-size: clamp(19px, 1.6vw, 22px); letter-spacing: .06em; }
.tp-src__h::before { content: ""; width: 4px; height: 20px; background: var(--tp-brown); }
.tp-src__lead { font-size: 14.5px; line-height: 1.85; color: var(--tp-ink-2); margin-top: 10px; }
.tp-src__cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3.4vw, 48px); margin-top: 24px; }
.tp-src__k { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; color: var(--tp-ink-3); margin-bottom: 8px; }
.tp-src__list { border-top: 1px solid var(--tp-line-2); }
.tp-root .tp-src__list a { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "pub ic" "t ic" "d ic"; column-gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--tp-line-2); color: var(--tp-ink); transition: padding .4s var(--tp-ease), color .3s; }
.tp-src__pub { grid-area: pub; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--tp-brown); }
.tp-src__t { grid-area: t; font-size: 14.5px; font-weight: 600; line-height: 1.6; margin-top: 2px; }
.tp-src__d { grid-area: d; font-family: var(--tp-font-en); font-size: 12px; letter-spacing: .06em; color: var(--tp-ink-3); margin-top: 2px; }
.tp-src__list i { grid-area: ic; position: relative; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tp-line-2); transition: background .3s, border-color .3s; }
.tp-src__list i::after { content: ""; position: absolute; inset: 0; background: var(--tp-ink); -webkit-mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat; mask: url("data:image/svg+xml;utf8,") center / 12px no-repeat; transition: background .3s; }
.tp-root .tp-src__list a:hover { padding-left: 4px; color: var(--tp-brown); }
.tp-src__list a:hover i { background: var(--tp-brown); border-color: var(--tp-brown); }
.tp-src__list a:hover i::after { background: #fff; }
@media (max-width: 760px) { .tp-src__cols { grid-template-columns: 1fr; } }
/* メディア掲載：3件を横並びに（SPは縦） */
.tp-src__h { margin-bottom: 20px; }
.tp-src > .tp-src__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 40px); border-top: 0; }
.tp-src > .tp-src__list li { border-top: 1px solid var(--tp-line-2); }
.tp-src > .tp-src__list a { border-bottom: 0; height: 100%; align-content: start; }
@media (max-width: 760px) { .tp-src > .tp-src__list { grid-template-columns: 1fr; } .tp-src > .tp-src__list li:last-child { border-bottom: 1px solid var(--tp-line-2); } }