/* 「こんな人に使われています」（/users）だけの見た目。共通の見た目（上の帯・英字の見出し・手書きの見出し・ボタン・モック）は /lp/style.css。
   ページは scripts/users-build.py が作る。立場ごとの色は --c（塗り・文字）／--c-pale（淡い面）／--hue（青いインクの絵を回す角度）。
   ⚠ モックの中（.fx-vis）に p・h3 を足さない（.section p の指定が当たって崩れる。LP と同じ決まり） */

/* 上の帯：いま見ているページ */
header nav a[aria-current="page"]{color:var(--blue)}

/* ===== 上（タイトルと4つの立場）===== */
.u-hero{text-align:center;padding-top:64px;padding-bottom:30px}
#more .u-hero .eyebrow,#more .u-team .eyebrow,#more .u-how .eyebrow,#more .u-close .eyebrow{justify-content:center}
#more .u-hero .eyebrow .fl-line,#more .u-team .eyebrow .fl-line,#more .u-how .eyebrow .fl-line,#more .u-close .eyebrow .fl-line{justify-content:center}
/* いちばん上の英字は2行で大きく（plax for ／ every coach）。字の大きさは「every coach」がスマホの幅に収まるところで決める */
#more .eyebrow.u-big{font-size:clamp(34px,11vw,128px);line-height:1.02;letter-spacing:-.02em;margin:0 0 clamp(14px,2vw,26px)}
#more .eyebrow.u-big .fl-line{line-height:1.02;row-gap:.04em}
.fl-br{flex-basis:100%;height:0}
.u-hero h1{margin:0 auto 18px}
.u-hero .hh,.u-team .hh,.u-how .hh,.u-close .hh{margin:0 auto;object-position:center}
/* ===== 流れる写真（2026-10-10・ユーザー指示「写真だけ普通に横に流して。湾曲して回るのいらない。写真は横並びで」）=====
   同じ8枚を2回つないで左へ流し、半分（＝1組ぶん）流したら頭に戻す。並びは左の端から始まる＝最初から画面いっぱいに写真がある。
   帯は画面いっぱいに広げ、端はマスクで地へ溶かす。カーソルを乗せても止めない（LP の回るカードと同じ決まり）。
   「アニメーションを停止」「視差効果を減らす」では止める
   ⚠ 2組目（.ug-dup）は読み上げない（aria-hidden）。写真の説明は1組目の alt */
.ug{position:relative;width:100vw;max-width:100vw;margin:40px calc(50% - 50vw) 0;overflow:hidden;padding:10px 0 30px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.ug-track{--gap:18px;display:flex;gap:var(--gap);width:max-content;animation:ugFlow 70s linear infinite}
.ug-dup{display:contents}
.ug-track img{display:block;flex:none;height:clamp(190px,21vw,290px);width:auto;aspect-ratio:720/538;object-fit:cover;
  border-radius:20px;box-shadow:0 22px 36px -26px rgba(16,29,40,.55);background:#e8eef3}
@keyframes ugFlow{from{transform:translateX(0)}to{transform:translateX(calc(-50% - var(--gap) / 2))}}
body.motion-off .ug-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.ug-track{animation:none}}

/* ===== 立場ごと（文と、写真。偶数番目は左右を入れ替える）=====
   色分け（2026-10-10・ユーザー指示「かく使い方で色分けしてほしい」）：英字の見出し（TechText の青いインク）と手書きの見出しの
   青い部分を、立場の色へ回す（hue-rotate。黒い字は回しても黒のまま）。印・画面の例の差し色も立場の色。
   ⚠ 節の地の淡い色の台紙は外した（ユーザー指示「背景の薄い色の色台紙もいらない」）。白い方眼紙の地のまま
   色は plax labo の記事のカテゴリの色を借りている（--c / --c-pale / --hue・users-build.py の PERSONAS）
*/
.u-p{padding-top:96px;padding-bottom:40px;scroll-margin-top:20px}
.u-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:30px 64px;align-items:center;max-width:1240px;margin:0 auto}
.u-p .eyebrow,.u-p h2 .hh{filter:hue-rotate(var(--hue)) saturate(1.08)}

.u-p.is-flip .u-p-text{order:2}
.u-p.is-flip .u-p-vis{order:1}
.section p.u-name{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:14px;line-height:1.5}
.u-name b{display:block;font-size:17px;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.u-name small{display:block;font-size:12px;color:var(--muted);line-height:1.6}
.u-p h2{margin:4px 0 16px}
.section p.u-lead{margin:0;font-size:15.5px;line-height:2;color:var(--muted)}
.section p.u-lbl{display:flex;align-items:center;gap:7px;margin:0 0 10px;font-size:13px;font-weight:800;line-height:1.5;color:var(--ink);letter-spacing:.02em}
.u-lbl svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--c);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.u-lbl-logo{height:19px;width:auto;margin-right:-2px}
.u-worry{margin-top:26px}
.u-worry ul,.u-help ul{list-style:none;margin:0;padding:0}
.u-worry ul{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.u-worry li{background:#f2f5f8;border-radius:6px 16px 16px 16px;padding:9px 15px;font-size:14px;line-height:1.7;color:#3d4a56}
.u-help{margin-top:26px}
.u-help ul{display:grid;gap:14px}
.u-help li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:start;font-size:14px;line-height:1.85;color:var(--muted)}
.u-help strong{display:block;font-size:15px;font-weight:800;line-height:1.6;color:var(--ink)}
.u-fi{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--c-pale);color:var(--c)}
.u-fi svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* 絵：その立場の指導の様子の写真（Canva AI）＋よく使う機能の小さなモック（LP の「できること」と同じ部品）を写真の角に重ねる。
   ⚠ モックの中に p・h3 を足さない（.section p の指定が当たって崩れる。LP と同じ決まり） */
.u-p-vis{position:relative;margin:0 0 34px;min-width:0}
.u-photo{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 30px 60px -36px rgba(16,29,40,.55);background:var(--c-pale)}
.u-photo img{display:block;width:100%;height:auto;aspect-ratio:1200/897;object-fit:cover}
.u-float{position:absolute;right:-22px;bottom:-34px;zoom:1.35;filter:drop-shadow(0 18px 28px rgba(16,29,40,.28))}
.u-p.is-flip .u-float{right:auto;left:-22px}
.u-float .fx-paper,.u-float .fx-mlist,.u-float .fx-run,.u-float .fx-rev,.u-float .fx-link{box-shadow:0 0 0 1px rgba(16,29,40,.06)}
.u-float.is-menu .fx-mlist{width:236px}
.u-float.is-share .fx-share{position:relative}
/* モックの差し色を立場の色に（LP のモックは水色 #13b4e4 で決め打ち） */
.u-float .fx-mrow i,.u-float .fx-pl i,.u-float .fx-step i,.u-float .fx-seg i.d,.u-float .fx-ctl .on,.u-float .fx-send{background:var(--c);border-color:var(--c)}
.u-float .fx-seg i.n{background:linear-gradient(90deg,var(--c) 42%,#dfe9ef 42%)}
.u-float .fx-ring .pg{stroke:var(--c)}
.u-float .fx-ring .tr{stroke:var(--c-pale)}
.u-float .fx-ring b,.u-float .fx-ring small,.u-float .fx-run-hd b,.u-float .fx-mlist-ft b{color:var(--c)}
.u-float .fx-url svg{stroke:var(--c)}
.u-float .u-th{background:var(--c-pale);color:var(--c)}

/* ===== 4つの立場：縦のスクロールで斜めに進む（users.js・2026-10-10・ユーザー指示「各立場、lpみたいに右下左下ってジグザグで進むようにして」）=====
   LP の「使い方の3ステップ」（/lp/style.css の .hw-*）と同じ作り。舞台（.uz-stage）を画面に貼り付け、世界（.uz-world＝2列×4段）をずらす。
   1は左上・2は右下・3は左下・4は右下。方眼（.uz-grid）も同じだけ動かす＝紙の上をカメラが動いて見える。
   .is-on が無いとき（動きを減らす設定・アニメーション停止・収まらない画面）は、4つが縦に並ぶだけ（上の .u-p の指定がその見た目） */
.uz{position:relative}
.uz-grid,.uz-path,.uz-dots{display:none}
.uz.is-on .uz-stage{position:sticky;top:0;height:var(--hw-h);overflow:hidden;overflow:clip;background:#fff}
.uz.is-on .uz-grid{display:block;position:absolute;left:calc(var(--paper-square) * -1);top:calc(var(--paper-square) * -1);
  width:calc(100% + var(--paper-square) * 2);height:calc(100% + var(--paper-square) * 2);background-image:var(--paper-grid);background-size:var(--paper-square) var(--paper-square)}
.uz.is-on .uz-world{position:absolute;left:0;top:0;width:200%;height:400%}
.uz.is-on .uz-path{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.uz-path path{fill:none;stroke:#9cc9f5;stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round;vector-effect:non-scaling-stroke}
.uz.is-on .u-p{position:absolute;width:50%;height:25%;max-width:none;margin:0;padding:0;display:flex;align-items:center}
.uz.is-on .uz-p1{left:0;top:0}
.uz.is-on .uz-p2{left:50%;top:25%}
.uz.is-on .uz-p3{left:0;top:50%}
.uz.is-on .uz-p4{left:50%;top:75%}
.uz.is-on .u-in{width:100%;padding:40px 6% 86px;transform-origin:50% 50%}   /* 縮めるときは上下に同じだけ（45% だと上の英字が欠ける） */
.uz.is-on .u-p-vis{margin-bottom:0}
/* 舞台の中は画面の高さに収めるので、英字の見出しは一段小さく（LP の STEP の見出しと同じ大きさ）・すき間も詰める */
#more .uz.is-on .eyebrow{font-size:clamp(24px,2.6vw,38px);margin-bottom:10px}
.uz.is-on .u-worry,.uz.is-on .u-help{margin-top:18px}
.uz.is-on .u-worry ul{gap:6px}
.uz.is-on .u-help ul{gap:10px}
/* 下の切り替え（どの立場を見ているか・押すとその立場へ）。いま見ている立場はその色 */
.uz.is-on .uz-dots{display:flex;position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:5;gap:4px;padding:5px;
  background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 30px -20px rgba(16,29,40,.5)}
.uz-dots button{display:flex;align-items:center;gap:7px;border:0;background:transparent;border-radius:999px;padding:6px 14px 6px 6px;font:inherit;
  font-size:12px;font-weight:800;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .25s,color .25s}
.uz-dots b{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;border-radius:50%;background:#eef2f6;color:var(--ink);font-size:11px;transition:background .25s,color .25s}
.uz-dots button.is-on{background:var(--ink);color:#fff}
.uz-dots button.is-on b{background:var(--c);color:#fff}

/* ===== チームボード ===== */
.u-team{max-width:1240px;padding-top:110px;padding-bottom:40px;--c:#087bfa;--c-pale:#e8f3ff}
.u-team-head{max-width:780px;margin:0 auto;text-align:center}
.u-team-head h2{margin:0 0 16px}
.u-team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:42px}
.u-team-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px 24px 26px;box-shadow:0 22px 44px -34px rgba(16,29,40,.5)}
.u-team-card h3{margin:14px 0 6px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.section .u-team-card p{margin:0;font-size:14px;line-height:1.85}
.section p.u-team-note{margin:26px auto 0;text-align:center;font-size:13.5px;color:var(--muted)}

/* ===== 使い方の3ステップ（LP と同じ絵）===== */
.u-how{text-align:center;padding-top:110px;padding-bottom:20px}
.u-how .hw-flow{margin:34px auto 0}
.section p.u-how-more{margin:26px 0 0;font-size:14px}
.u-how-more a{font-weight:800;color:var(--blue);text-decoration:none}
.u-how-more a:hover{text-decoration:underline;text-underline-offset:4px}

/* ===== いちばん下の「はじめる」：紺の帯（LP・plax labo の終わりと同じ。手書きのコピーの絵は白い字なので、暗い地にしか置けない）===== */
.u-close{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:90px 12px 0;border-radius:28px;background:#0b1724;color:#fff;
  text-align:center;padding:90px 6% 96px;--tt-accent:#ffffff}
#more .u-close .eyebrow{color:#fff;--tt-tint:rgba(150,214,255,.62)}
.u-close .ink{mix-blend-mode:screen;opacity:.42}
.u-close h2{margin:0 auto;font-size:clamp(34px,4.4vw,60px)}
.u-close .hh{filter:brightness(0) invert(1)}
.u-close .cta-row{margin-top:34px}
.section.u-close .cta-row .cta-note{color:rgba(255,255,255,.72)}

/* ===== 幅ごと ===== */
@media(max-width:1080px){
}
@media(max-width:900px){
  .u-p{padding-top:80px}
  .u-in{grid-template-columns:minmax(0,1fr);gap:34px}
  .u-p.is-flip .u-p-text,.u-p .u-p-text{order:1}
  .u-p.is-flip .u-p-vis,.u-p .u-p-vis{order:2}
  .u-team-grid{grid-template-columns:minmax(0,1fr);gap:12px}
}
@media(max-width:720px){
  /* 斜めに進むときは、画面の高さに収めるため、説明文と「こんなとき」は出さない（LP の3ステップと同じ考え方） */
  .uz.is-on .u-lead,.uz.is-on .u-worry{display:none}
  .uz.is-on .u-in{padding:24px 6% 74px;gap:18px}
  .uz.is-on .u-help{margin-top:16px}
  .uz.is-on .u-help ul{gap:8px}
  .uz.is-on .uz-dots{bottom:14px;max-width:calc(100% - 16px)}
  .uz-dots button{padding:5px 10px 5px 5px;font-size:11px;gap:5px}

  .u-hero{padding-top:40px}
  .u-p{padding-top:64px;padding-bottom:20px}
  .ug{margin-top:26px;padding-bottom:24px}
  .ug-track{--gap:12px;animation-duration:55s}
  .ug-track img{height:clamp(150px,44vw,200px);border-radius:16px}
  .u-photo{border-radius:20px}
  /* スマホは写真に大きく重ねない（写真の顔が隠れる・2026-10-10 ユーザー指摘「スマホだと被っちゃってる」）。
     写真の下に置いて、上の端だけ少し写真にかける */
  .u-p-vis{margin-bottom:0}
  .u-float,.u-p.is-flip .u-float{position:relative;inset:auto;zoom:1;width:max-content;max-width:100%;margin:-36px 10px 0 auto}
  .u-p.is-flip .u-float{margin:-36px auto 0 10px}
  .section p.u-lead{font-size:14.5px}
  .u-close{margin:60px 8px 0;border-radius:22px;padding:70px 6% 76px}
  .u-team{padding-top:80px}
  .u-team-card{padding:20px}
  .u-how{padding-top:80px}
}