/* =========================================================
   トップの本文（ファーストビューの下）2026-10-30
   templates/sections/what.html・features.html・learn.html・who.html。動きは js/top-story.js（2026-11-02 特徴の帯、らせん、東西の弧の図は外した）
   色：黒地は短く（夜間飛行の続き）→ 白・グレーへ。アクセントは青1色、暖色（#ffd9a8 / #ffb266）は夜の灯りにだけ使う
   動きを減らす設定・JSが無いときは、HTMLのままの完成した図が出る（.is-armed が付かない）
   ========================================================= */

.ts-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- 共通 ---------- */
.ts-title {
  margin: 0;
  font-family: var(--font-mincho);
  font-weight: 700;
  font-size: clamp(30px, 3.9vw, 54px);
  line-height: 1.38;
  letter-spacing: .04em;
}
.ts-title em { font-style: normal; background: none; color: var(--accent); }
.ts-lead { margin: 24px 0 0; max-width: 34em; font-size: var(--fs-lead); line-height: 1.95; color: var(--ink-sub); }
.ts-more { margin-top: 36px; }
.ts-more--row { display: flex; flex-wrap: wrap; gap: 12px; }
.ts-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--gray); }

/* ---------- 何をするの？（黒地。夜間飛行の続き） ---------- */
.ts-what { padding: clamp(48px, 5.4vw, 76px) 0; background: #03040a; color: var(--on-dark); }
.ts-what .ts-title em { background: none; color: var(--accent-light); }
.ts-what .ts-lead { color: #c3c6d4; }
.ts-what__head { display: grid; grid-template-columns: minmax(max-content, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.ts-what__head .ts-lead { margin-top: 6px; }
/* 見出しはサイトの太いゴシック（2026-11-02。文字の大きさは style.css の段階だけを使う） */
.ts-what__title, .ts-nbs__title { margin: 0; font-size: var(--fs-h2); font-weight: 900; line-height: 1.4; letter-spacing: .02em; }
.ts-what__will { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.9; }
.ts-what__facts { margin: 20px 0 0; line-height: 2; color: #c3c6d4; }
/* 2026-11-02 ユーザー：改行に気をつける。広い画面は意味の切れ目で1行ずつ。右の列を広げて1行に収める（狭い画面は .nowrap のかたまりで流す） */
@media (min-width: 1200px) {
  .ts-what .ts-what__head { grid-template-columns: max-content minmax(0, 1fr); gap: 56px; }
  .ts-what__will { font-feature-settings: "palt"; }
  .ts-what__line { display: block; }
}
/* 新規事業の営業とは（白地） */
.ts-nbs { padding: clamp(48px, 5.4vw, 76px) 0 0; background: var(--paper); }
.ts-nbs__text p { margin: 0; line-height: 2; color: var(--ink-sub); }
.ts-nbs__text p + p { margin-top: 14px; }
.ts-nbs__link { margin-top: 24px !important; }
/* 見出しと出だしの1文が1行目、図と本文が2行目。列の幅は上の黒地のブロックと同じ。スマホは 見出し→1文→図→本文 */
.ts-nbs__grid { display: grid; grid-template-columns: minmax(max-content, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 6vw, 96px); row-gap: 16px; align-items: start; }
.ts-nbs__hook { margin: 0; font-size: var(--fs-h3); font-weight: 700; line-height: 1.6; color: var(--ink); word-break: auto-phrase; text-wrap: balance; }
/* 図：上の行は最初から埋まっている（黒）。新規事業の行は「？」の空欄で始まり、話を聞く点が1つつくたびに埋まる（青）。完成形が基本で、動きは下の is-armed から */
.ts-nbs-fig { margin: 0; contain: inline-size; display: grid; gap: 14px; }
.ts-nbs-fig__name { margin: 0 0 6px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.ts-nbs-fig__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.ts-nbs-fig__cell { position: relative; overflow: hidden; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: #fff; }
.ts-nbs-fig__row--new .ts-nbs-fig__cell { background: var(--accent); }
.ts-nbs-fig__cell dt, .ts-nbs-fig__cell dd { position: relative; z-index: 1; margin: 0; }
.ts-nbs-fig__cell dt { font-size: var(--fs-small); line-height: 1.5; }
.ts-nbs-fig__cell dd { display: grid; font-weight: 700; line-height: 1.5; }
.ts-nbs-fig__cell dd span { grid-area: 1 / 1; }
.ts-nbs-fig__q { opacity: 0; }
.ts-nbs-fig__note { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-small); line-height: 1.5; color: var(--ink-sub); }
.ts-nbs-fig__dots { display: inline-flex; flex: none; gap: 5px; }
.ts-nbs-fig__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .ts-nbs-fig.is-armed .ts-nbs-fig__row--new .ts-nbs-fig__cell { background: none; color: var(--ink); }
  .ts-nbs-fig.is-armed .ts-nbs-fig__row--new .ts-nbs-fig__cell::before { content: ""; position: absolute; inset: 0; background: rgba(61, 99, 255, .16); transform: scaleX(0); transform-origin: left; }
  .ts-nbs-fig.is-armed .ts-nbs-fig__row--new .ts-nbs-fig__cell::after { content: ""; position: absolute; inset: 0; border: 1.5px dashed var(--accent); border-radius: 8px; }
  .ts-nbs-fig.is-armed .ts-nbs-fig__a { opacity: 0; }
  .ts-nbs-fig.is-armed .ts-nbs-fig__q { opacity: 1; }
  .ts-nbs-fig.is-armed .ts-nbs-fig__dots i { background: var(--line); }
  .ts-nbs-fig.is-on .ts-nbs-fig__dots i { animation: ts-nbs-dot .3s ease .4s both; }
  .ts-nbs-fig.is-on .ts-nbs-fig__dots i:nth-child(2) { animation-delay: 1.4s; }
  .ts-nbs-fig.is-on .ts-nbs-fig__dots i:nth-child(3) { animation-delay: 2.4s; }
  .ts-nbs-fig.is-on .ts-nbs-fig__row--new .ts-nbs-fig__cell { animation: ts-nbs-solid .35s ease 2.9s both; }
  .ts-nbs-fig.is-on .ts-nbs-fig__row--new .ts-nbs-fig__cell::before { animation: ts-nbs-fill 2.8s linear both; }
  .ts-nbs-fig.is-on .ts-nbs-fig__row--new .ts-nbs-fig__cell::after { animation: ts-nbs-hide .35s ease 2.9s both; }
  .ts-nbs-fig.is-on .ts-nbs-fig__a { animation: ts-nbs-show .35s ease 2.9s both; }
  .ts-nbs-fig.is-on .ts-nbs-fig__q { animation: ts-nbs-hide .2s ease 2.9s both; }
}
@keyframes ts-nbs-dot { from { background: var(--line); } to { background: var(--accent); } }
@keyframes ts-nbs-fill { 0%, 14% { transform: scaleX(0); } 25%, 50% { transform: scaleX(.33); } 61%, 86% { transform: scaleX(.66); } 97%, 100% { transform: scaleX(1); } }
@keyframes ts-nbs-solid { from { background: transparent; color: var(--ink); } to { background: var(--accent); color: #fff; } }
@keyframes ts-nbs-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-nbs-hide { from { opacity: 1; } to { opacity: 0; } }
.ts-what__methods { margin-top: 22px; padding-top: 20px; border-top: 1px solid #23263a; }
.ts-what__methods-label { margin: 0 0 10px; font-size: var(--fs-small); font-weight: 700; color: #9da2b8; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ts-chips li { padding: 6px 14px; border: 1px solid #3a3f5c; border-radius: 999px; font-size: var(--fs-small); line-height: 1.5; color: #e3e6f2; }
.ts-what__methods-note { margin: 12px 0 0; font-size: var(--fs-small); color: #9da2b8; }

.ts-climb { margin: clamp(28px, 3.4vw, 44px) 0 0; }
.ts-climb__art { position: relative; overflow: hidden; }
.ts-climb__svg { display: block; width: 100%; height: auto; }
.ts-climb__svg--tall { display: none; max-width: 420px; margin: 0 auto; }
.ts-climb__cap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 6vw, 96px); margin-top: clamp(28px, 3vw, 40px); padding-top: 28px; border-top: 1px solid #23263a; }
.ts-climb__title { margin: 0; font-family: var(--font-mincho); font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.ts-climb__text { margin: 0; max-width: 36em; font-size: var(--fs-body); line-height: 2; color: #c3c6d4; }
/* 流れ（矢印でつなぐ） */
.ts-steps { display: flex; flex-wrap: wrap; gap: 6px 0; margin: 16px 0 0; padding: 0; list-style: none; font-size: var(--fs-small); color: #9da2b8; }
.ts-steps li { display: inline-flex; align-items: center; white-space: nowrap; }
.ts-steps li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px 0 8px; border-top: 1.5px solid #59607e; border-right: 1.5px solid #59607e; transform: rotate(45deg); }
.ts-steps li:nth-child(6) { color: #ffd9a8; font-weight: 700; }

/* 図の中 */
.ts-horizon { fill: url(#ts-hz); }
.ts-roads path { fill: none; stroke: #ffb266; stroke-opacity: .07; stroke-width: 1; }
.ts-ground circle { fill: #ffd9a8; }
.ts-edge { pointer-events: none; }
.ts-plan { fill: none; stroke: #8ea6ff; stroke-opacity: .25; stroke-width: 1; stroke-dasharray: 2 7; }
.ts-route .ts-seq { fill: none; stroke: #8ea6ff; stroke-width: 2.2; stroke-linecap: round; }
.ts-zone { fill: #8ea6ff; fill-opacity: .07; stroke: #8ea6ff; stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 5; }
.ts-link { stroke: #ffd9a8; stroke-opacity: .4; stroke-width: 1; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.ts-stage--hypo .ts-link { stroke: #8ea6ff; }
.ts-light__halo { fill: url(#ts-glow); transform-box: fill-box; transform-origin: center; }
.ts-light__core { fill: #fff3e0; transform-box: fill-box; transform-origin: center; }
.ts-light--try .ts-light__halo { opacity: .4; transform: scale(.6); }
.ts-light--try .ts-light__core { opacity: .55; }
.ts-light--out .ts-light__halo { opacity: 0; }
.ts-light--out .ts-light__core { fill: none; stroke: #5d6178; stroke-width: 1.2; }
.ts-light--first .ts-light__halo { transform: scale(2.3); }
.ts-light--first .ts-light__core { transform: scale(1.5); }
.ts-node { fill: #03040a; stroke: #8ea6ff; stroke-width: 2; }
.ts-stage--first .ts-node { fill: #ffd9a8; stroke: #ffd9a8; }
.ts-stage--fail .ts-node { stroke: #6b7090; }
.ts-label { fill: #e9ecf8; font-family: var(--font-ja); font-size: 15px; font-weight: 700; letter-spacing: .04em; }
.ts-stage--fail .ts-label { fill: #8a8fa6; }
.ts-stage--first .ts-label { fill: #ffd9a8; }
.ts-axis { fill: #6d7290; font-family: var(--font-ja); font-size: 12px; letter-spacing: .06em; }

/* ---------- 特徴・教育サポート・メンバーの見出し（サイトの太いゴシック。.head__title と同じ） ---------- */
.ts-feat .ts-title, .ts-learn .ts-title, .ts-who .ts-title { font-family: var(--font-ja); font-size: var(--fs-h2); font-weight: 900; letter-spacing: .02em; line-height: 1.4; }

/* ---------- 特徴（白地。左に見出し、右に文章） ---------- */
.ts-feat { padding: clamp(40px, 4.6vw, 68px) 0; background: var(--paper); }
.ts-feat__text { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ts-prose { max-width: 38em; }
/* 語の途中で折れないように（文節で折り返す） */
.ts-prose__item p, .ts-learn .ts-lead, .ts-quote p, .ts-list span, .ts-who .ts-lead, .ts-who__count, .ts-who__body { word-break: auto-phrase; }
.ts-prose__item { padding: 26px 0; border-top: 1px solid var(--line); }
.ts-prose__item:first-child { padding-top: 0; border-top: 0; }
.ts-prose__item:last-child { padding-bottom: 0; }
.ts-prose__item p { margin: 0; line-height: 2; color: var(--ink-sub); }
.ts-prose__item strong { display: block; margin-bottom: 6px; font-size: var(--fs-h3); line-height: 1.6; color: var(--ink); }
.ts-prose__link { margin-top: 14px !important; }
.ts-bars__row { fill: var(--ink-sub); font-family: var(--font-ja); font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.ts-bars__seg--sub { fill: #dfe1e8; }
.ts-bars__seg--key { fill: var(--accent); }
.ts-bars__seg--4.ts-bars__seg--key { fill: #6f8bff; }
.ts-bars__name { font-family: var(--font-ja); font-size: 13px; font-weight: 700; }
.ts-bars__name--sub { fill: var(--ink); }
.ts-bars__name--key { fill: #fff; }
.ts-bars__flow--key { fill: var(--accent); fill-opacity: .1; }
.ts-bars__flow--sub { fill: #c9ccd6; fill-opacity: .22; }
.ts-bars__arrow { fill: none; stroke: var(--ink-sub); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 教育・サポート（グレー地。左に写真、右に文章） ---------- */
.ts-learn { padding: clamp(40px, 4.6vw, 68px) 0; background: var(--gray); }
.ts-learn__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.ts-learn__photo { display: block; aspect-ratio: 3 / 2; }
.ts-learn .ts-lead { margin-top: 16px; }
.ts-learn .ts-more { margin-top: 28px; }
.ts-quote { margin: 20px 0 0; padding-left: 18px; border-left: 2px solid var(--accent); }
.ts-quote blockquote { margin: 0; }
.ts-quote p { font-weight: 700; line-height: 1.8; color: var(--ink); }
.ts-quote figcaption { margin-top: 4px; font-size: var(--fs-small); color: var(--ink-sub); }
.ts-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }
.ts-list li { padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.7; color: var(--ink-sub); }
.ts-list b, .ts-list span { display: block; }
.ts-list b { color: var(--ink); }

/* ---------- 社員・メンバー（白地。左に文章、右に写真と大学の一覧） ---------- */
.ts-who { padding: clamp(40px, 4.6vw, 68px) 0 clamp(24px, 2.8vw, 36px); background: var(--paper); }
.ts-who__inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.ts-who__count { margin: 24px 0 0; font-weight: 700; line-height: 1.8; }
.ts-who__count .num { margin: 0 2px; font-size: 1.7em; color: var(--accent); }
.ts-who__body { margin: 18px 0 0; max-width: 34em; line-height: 2; color: var(--ink-sub); }
.ts-who__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ts-who__photos figure { margin: 0; }
.ts-who__photos figcaption { margin-top: 8px; font-size: var(--fs-small); color: var(--ink-sub); }
.ts-schools { margin-top: 28px; }
.ts-schools__title { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; }
.ts-schools__list { margin: 10px 0 0; }
.ts-schools__list > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); line-height: 1.7; }
.ts-schools__list dt { font-weight: 700; color: var(--ink); }
.ts-schools__list dd { margin: 0; color: var(--ink-sub); }
.ts-schools__list dd span { display: inline-block; margin-right: 1em; }

/* ---------- 動き（.is-armed は js/top-story.js が付ける。付いていなければ完成形のまま） ---------- */
.is-armed .ts-stage .ts-label,
.is-armed .ts-stage .ts-node,
.is-armed .ts-stage .ts-link,
.is-armed .ts-stage .ts-zone { opacity: 0; transition: opacity .7s ease; }
.is-armed .ts-stage.is-on .ts-label,
.is-armed .ts-stage.is-on .ts-node,
.is-armed .ts-stage.is-on .ts-link,
.is-armed .ts-stage.is-on .ts-zone { opacity: 1; }
.is-armed .ts-light__halo { transform: scale(0); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1), opacity .6s ease; }
.is-armed .ts-light__core { opacity: .2; transition: opacity .5s ease, transform .8s ease; }
.is-armed .is-on .ts-light__halo { transform: scale(1); }
.is-armed .is-on .ts-light__core { opacity: 1; }
.is-armed .is-on .ts-light--try .ts-light__halo { transform: scale(.6); }
.is-armed .is-on .ts-light--try .ts-light__core { opacity: .55; }
.is-armed .is-on .ts-light--first .ts-light__halo { transform: scale(2.3); }
.is-armed .is-on .ts-light--first .ts-light__core { transform: scale(1.5); }
/* 断られる：一度ついて、ちらついて、消える */
.is-armed .is-on .ts-light--out .ts-light__halo { animation: ts-out 1.8s ease forwards; }
.is-armed .is-on .ts-light--out .ts-light__core { animation: ts-out-core 1.8s ease forwards; }
@keyframes ts-out { 0% { transform: scale(0); opacity: 1; } 30% { transform: scale(1); opacity: 1; } 42% { opacity: .25; } 52% { opacity: .9; } 64% { opacity: .15; } 100% { transform: scale(.7); opacity: 0; } }
@keyframes ts-out-core { 0%, 40% { fill: #fff3e0; stroke-opacity: 0; } 100% { fill: transparent; stroke-opacity: 1; } }
/* 何件もつくところは、少しずつずらす */
.ts-d1 { transition-delay: .12s !important; } .ts-d2 { transition-delay: .24s !important; } .ts-d3 { transition-delay: .36s !important; }
.ts-d4 { transition-delay: .48s !important; } .ts-d5 { transition-delay: .6s !important; } .ts-d6 { transition-delay: .72s !important; } .ts-d7 { transition-delay: .84s !important; }
.ts-d1 *, .ts-d2 *, .ts-d3 *, .ts-d4 *, .ts-d5 *, .ts-d6 *, .ts-d7 * { transition-delay: inherit !important; }


/* 描き終わったあと：灯りがゆっくり息をする（見ている人の邪魔にならない小さな動き） */
@media (prefers-reduced-motion: no-preference) {
  .is-done .ts-ground .tw1 { animation: ts-tw 4.8s ease-in-out infinite alternate; }
  .is-done .ts-ground .tw3 { animation: ts-tw 6.4s ease-in-out 1.2s infinite alternate; }
  .is-done .ts-light--first .ts-light__halo { animation: ts-breathe 3.6s ease-in-out infinite alternate; }
}
@keyframes ts-tw { from { opacity: .15; } to { opacity: .8; } }
@keyframes ts-breathe { from { transform: scale(2.1); } to { transform: scale(2.6); } }

/* ---------- 画面の幅 ---------- */
@media (max-width: 900px) {
  .ts-what__head, .ts-climb__cap, .ts-feat__text, .ts-learn__inner, .ts-who__inner { grid-template-columns: minmax(0, 1fr); }
  .ts-feat__text { gap: 40px; }
  .ts-what__head { gap: 20px; }
  .ts-nbs__grid { grid-template-columns: minmax(0, 1fr); }
  .ts-learn__art { order: 2; }
}
@media (max-width: 700px) {
  .ts-climb__svg--wide { display: none; }
  .ts-climb__svg--tall { display: block; }
  .ts-climb { margin-top: 32px; }
  .ts-title { font-size: clamp(27px, 7.4vw, 34px); }
  .ts-list { grid-template-columns: minmax(0, 1fr); }
  .ts-list li { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 12px; }
}