/* トップの最初の画面。デザイナー案（2026-10-23）の大きさ・色・書体・並びのまま（斉藤さん「元のデザインにあわせて」「元のデザインの大きさがMAX」）。
   public/js/top-hero.js。変えたのは中身だけ：見出しの下の文は5つの相談のささやき、吹き出しは本人の言葉と事実、たとえばは短い名前。 */
/* 見出し・「について、」・欄の書体：しっぽり明朝 ExtraBold を、この画面の字だけに切り出したもの（scripts/top-hero-font.py） */
@font-face {
  font-family: 'Top Hero Mincho';
  src: url('/fonts/top-hero-mincho.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* 欄に書いた字：しっぽり明朝 ExtraBold の日本語の全体（上の切り出しにない字が出たときだけ読み込まれる） */
@font-face {
  font-family: 'Top Hero Mincho Full';
  src: url('/fonts/shippori-mincho-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
.pch {
  --pch-offset: 64px;
  --pch-navy: #16233f;
  --pch-ink: #1b2a4a;
  --pch-sub: #5b6475;
  --pch-gold: #f2c14e;
  --pch-line: #e9b23c;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  /* 高さは top-hero.js fitWall：カードと上下の余白を、顔の行がちょうど収まる高さに（一行の途中で切らない） */
  height: var(--pch-h, auto);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: normal;
  font-feature-settings: normal;
  font-kerning: auto;
  color: var(--pch-ink);
  background: #fff;
}
.pch *, .pch *::before, .pch *::after { box-sizing: border-box; }
.pch .mincho { font-family: 'Top Hero Mincho', 'Top Hero Mincho Full', 'Hiragino Mincho ProN', 'Yu Mincho', serif; }

/* 壁：3,000人全員が画面に入る（斉藤さん 2026-10-23）。列の数・幅・上の余白は top-hero.js fitWall が画面の大きさから決める */
.pch-wall {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--pch-wall-w, 100%);
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(var(--pch-cols, 75), 1fr);
  /* 3,000人の壁は別の層に一度だけ描く。吹き出しやつぶやきが動くたびに壁まで描き直すと、画面が1秒に2〜3回しか描けなかった */
  will-change: transform;
}
.pch-wall i { display: block; position: relative; aspect-ratio: 1; }
.pch-wall i > * { position: absolute; inset: 4.5%; width: 91%; height: 91%; border-radius: 2px; }
.pch-wall i .fw-sprite { background-size: 1000% 1000%; }
.pch-wall i img { object-fit: cover; }
.pch-wall i b { display: grid; place-items: center; font-size: 8px; font-weight: 500; color: var(--pch-sub); background: #eef0f4; }
.pch-ring { position: absolute; z-index: 3; border: 3px solid var(--pch-gold); border-radius: 50%; pointer-events: none; display: none; box-shadow: 0 0 0 4px rgba(242, 193, 78, .3); }
.pch-ring.on { display: block; }

/* 吹き出し：本人の言葉（lines.json の say、3つに2つは本人のデータの種類を言う pitch。greetings.js bubbleOf）と、本人の事実（名前・年齢・都道府県）。いくつかずつ、入れ替わりに出る */
.pch-spots { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.pch-spot { position: absolute; display: none; align-items: center; gap: 10px; pointer-events: auto; font: inherit; color: inherit; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; }
.pch-deep { margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--pch-navy); text-decoration: underline; text-underline-offset: 3px; }
.pch-spot:hover .pch-say { box-shadow: 0 0 0 2px var(--pch-gold), 0 6px 20px rgba(0, 0, 0, .18); }
.pch-spot.on { display: flex; animation: pch-pop .5s cubic-bezier(.2, .7, .2, 1) both; }
.pch-spot:nth-child(n + 4) { flex-direction: row-reverse; }
.pch-spot img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; border: 4px solid var(--pch-gold); box-shadow: 0 6px 20px rgba(0, 0, 0, .25); flex: none; }
.pch-say { display: flex; flex-direction: column; gap: 2px; background: #fff; padding: 12px 16px; border-radius: 18px 18px 18px 4px; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); max-width: 270px; width: max-content; }
.pch-spot:nth-child(n + 4) .pch-say { border-radius: 18px 18px 4px 18px; }
.pch-say b { font-size: 15px; line-height: 1.5; word-break: auto-phrase; }
.pch-say small { font-size: 12px; line-height: 1.4; color: var(--pch-sub); font-weight: 500; }
.pch-say small span { display: block; white-space: nowrap; }
/* 名前の下に、その人の暮らしの札（data/top-greetings/facts.json。どの人も同じ段・同じ数） */
/* 列の数（--pch-fcols）は top-hero.js fitSpot が、札の数を割り切る数から、置き場所に入るものを測って選ぶ（どの段も同じ数。1つだけ残る段を作らない） */
.pch-facts { display: grid; grid-template-columns: repeat(var(--pch-fcols, 2), max-content); gap: 4px; margin-top: 6px; }
/* 2つずつの格子：8つ（カードの上下に置く幅は4つ）が、最後の段に1つだけ残らない */
.pch-facts i { font-style: normal; font-size: 12px; line-height: 1.5; color: var(--pch-ink); background: #f1f3f7; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.pch .s0 { left: 1.5%; top: 18%; }
.pch .s1 { left: 2.5%; top: 45%; }
.pch .s2 { left: 1%; bottom: 3%; }
.pch .s3 { right: 1.5%; top: 22%; }
.pch .s4 { right: 2.5%; top: 50%; }
.pch .s5 { right: 1%; bottom: 2%; }

/* カード */
.pch-card { position: relative; z-index: 2; width: min(660px, 100%); background: var(--pch-navy); color: #fff; border-radius: 26px; padding: 34px 36px 30px; box-shadow: 0 24px 64px rgba(10, 18, 36, .35); display: flex; flex-direction: column; align-items: center; text-align: center; }
/* 何をする所か：金の札と一文（斉藤さん 2026-10-24）。カードを上から、何の所か → 何をするか → 何が起きるか → 始める、と読む */
.pch-eye { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; row-gap: 6px; margin: 0 0 16px; font-size: 15px; font-weight: 700; line-height: 1.6; letter-spacing: .03em; color: #e6ebf3; }
.pch-eye b { color: var(--pch-gold); border: 1.5px solid var(--pch-gold); border-radius: 980px; padding: 1px 12px; margin-right: 10px; font-size: 13px; letter-spacing: .12em; }
.pch-eye span { display: inline-block; }
.pch-card h1 { margin: 0; font-weight: 800; font-size: 27px; line-height: 1.4; letter-spacing: .03em; }
.pch-card h1 > span { display: inline-block; }
.pch-num { color: var(--pch-gold); display: inline-block; min-width: 2.7em; font-variant-numeric: tabular-nums; }

/* 欄（Gemini 案の形、斉藤さん 2026-10-24）：左に虫めがね、中に薄い字、右に資料の添付。Enter で送る。欄は textarea：
   PDF・URLから読み込んだ長い企画は、字に合わせて下に伸びて全部見える（home.js fitBox） */
.pch-fill { width: 100%; max-width: 600px; margin: 22px 0 0; background: #fff; color: var(--pch-ink); border-radius: 30px; padding: 6px 8px 6px 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pch-fill.has-text, .pch-fill:focus-within { box-shadow: 0 0 0 3px var(--pch-gold); }
.pch-glass { flex: none; color: #9aa3b5; }
.pch-blank { flex: 1 1 0; min-width: 0; position: relative; }
.pch-blank textarea { display: block; width: 100%; resize: none; overflow: hidden; line-height: 1.5; letter-spacing: normal; font: inherit; font-weight: 700; font-size: 17px; text-align: left; color: var(--pch-ink); border: none; outline: none; padding: 9px 0; margin: 0; background: transparent; box-shadow: none; min-height: 2.75rem; height: auto; }
.pch-blank textarea:placeholder-shown { white-space: nowrap; text-overflow: clip; }
.pch-blank textarea::placeholder { color: #9aa3b5; font-weight: 500; }
.pch-clip { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: #7c869a; cursor: pointer; }
.pch-clip:hover { background: #f1f3f7; color: var(--pch-ink); }
.pch-go { flex: none; min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px; font: inherit; font-size: 15px; font-weight: 700; color: #16233f; background: var(--pch-gold); cursor: pointer; }
.pch-go:hover { background: #f5cd6a; }
.pch-import-note { margin: 10px 0 0; font-size: 13px; color: #c9d0dc; }
.pch-fill .search-hint { flex-basis: 100%; margin: 0 0 4px 32px; font-size: 14px; color: #b3261e; text-align: left; }
/* 箱の下の一文は、どの幅でも次の行に（スマホの幅は欄を1行に並べる nowrap のため、一文が欄を幅0まで押しつぶし、箱が消えていた） */
.pch-fill:has(.search-hint) { flex-wrap: wrap; }
.pch-fill .search-hint.is-quiet { color: #5b6478; }

/* たとえば：例の商品（欄に書くと、書いた字）と、できること（data/top-examples/examples.json hero）。できることの要の言葉だけ金の太字
   （斉藤さん 2026-10-24「言葉をピンポイントに」）。入れると何ができるかを、ここで見せる（斉藤さん 2026-10-26「機能は大切」） */
.pch-ex { width: 100%; margin: 22px 0 0; }
.pch-ex-say { margin: 0 0 12px; text-align: left; font-size: 13px; font-weight: 700; color: #c9d0dc; }
.pch-ex-say b { color: var(--pch-gold); }
.pch-ex-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pch-ex-card { display: flex; align-items: center; gap: 12px; font: inherit; text-align: left; color: #fff; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; padding: 16px 18px; min-height: 44px; cursor: pointer; transition: background .2s ease, border-color .2s ease; }
.pch-ex-card:hover { background: rgba(255, 255, 255, .1); border-color: var(--pch-gold); }
.pch-ex-text { flex: 1; min-width: 0; }
.pch-ex-name { display: block; margin-bottom: 3px; font-size: 14.5px; font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.pch-ex-gain { font-size: 12.5px; line-height: 1.5; color: #dfe4ec; }
.pch-ex-card i { font-style: normal; font-size: 18px; color: #8e98ad; }
.pch-ex-card { padding: 13px 15px; }
.pch-ex-name { font-size: 15px; }
.pch-ex-gain { font-size: 12.5px; }
.pch-ex-card .pch-ex-gain em { font-style: normal; font-weight: 800; color: #fff; }
/* 企画を書いたら、札はできることだけ（名前の行に task が入る。top-hero.js watchBox） */
.pch.has-text .pch-ex-gain { display: none; }
.pch-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 顔の上：その人のプロフィール */
.pch-prof { position: absolute; z-index: 7; display: none; gap: 14px; align-items: flex-start; width: 310px; background: #fff; border-radius: 18px; padding: 14px 16px; box-shadow: 0 12px 36px rgba(10, 18, 36, .25); pointer-events: none; text-align: left; }
.pch-prof.on { display: flex; }
.pch-prof img { flex: none; width: 78px; height: 78px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pch-gold); }
.pch-prof p { margin: 0; }
.pch-pname { font-size: 17px; font-weight: 700; line-height: 1.4; }
.pch-pmeta { font-size: 13px; color: var(--pch-sub); line-height: 1.5; }
.pch-pjob { font-size: 13px; line-height: 1.5; margin-top: 4px !important; }
.pch-pjob + .pch-pjob { margin-top: 0 !important; }

/* はじまり：虫眼鏡が壁を渡って、最初に話す人のところへ（約1.5秒）。カードはその終わりに上がる */
.pch-lens { position: absolute; z-index: 5; display: none; pointer-events: none; transform: translate(-50%, -50%); border-radius: 50%; border: 6px solid #fff; background: rgba(255, 255, 255, .14); box-shadow: 0 12px 40px rgba(10, 18, 36, .35), inset 0 0 0 2px rgba(255, 255, 255, .6); }
.pch-lens img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; opacity: 0; }
.pch-handle { position: absolute; left: 86%; top: 86%; width: 40%; height: 9%; min-height: 8px; border-radius: 9px; background: var(--pch-navy); transform-origin: left center; transform: rotate(45deg); }
.pch-skip { position: absolute; right: 24px; bottom: 20px; z-index: 6; display: none; font: inherit; font-size: 14px; color: var(--pch-ink); background: rgba(255, 255, 255, .92); border: 1px solid #c9cdd5; border-radius: 980px; padding: 10px 18px; min-height: 44px; cursor: pointer; }
.pch.is-intro .pch-skip { display: block; }
.pch.is-intro .pch-card { opacity: 0; }
.pch.is-intro .pch-spots, .pch:not(.is-talking) .pch-spots { visibility: hidden; }
.pch.is-done .pch-card { animation: pch-rise .55s cubic-bezier(.2, .7, .2, 1) both; }
/* 出るときは浮かび上がるだけで、位置は動かさない（下から 24px せり上がると、出た直後に押した指の下で例のカードが動き、
   押しが取りこぼされた。#477 browser-c・E 2026-10-28「開いた直後に 13〜14px 動く」） */
@keyframes pch-rise { from { opacity: 0; } to { opacity: 1; } }
@keyframes pch-pop { 0% { opacity: 0; transform: scale(.5); } 70% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .pch-spot.on, .pch.is-done .pch-card { animation: none; }
}

/* ノートPC・タブレット横（〜1439px。カードの横に吹き出しと顔が、カードに重ならずに並ぶのは 1440px から）：吹き出しはカードの上下 */
@media (max-width: 1439px) {
  .pch { padding: 140px 24px; }
  .pch .s0 { left: 3%; top: 22px; }
  .pch .s3 { right: 3%; top: 22px; left: auto; }
  .pch .s1 { left: 4%; top: auto; bottom: 40px; }
  .pch .s4 { right: 4%; top: auto; bottom: 22px; }
  .pch .s2, .pch .s5 { display: none !important; }
  /* 吹き出しはカードの上下。札はどの窓でも全部（斉藤さん 2026-10-29「2行しか出ていない」）。吹き出しの幅は札の列に合わせた幅だけ
     （列の数は top-hero.js fitSpot が置き場所の高さと幅を測って選ぶ）。上限は画面から顔と両端の分を引いた幅。ほかの吹き出しと
     重なる置き場所には出さない（placeFits）。言葉は読みやすい長さで折る */
  .pch-say { max-width: calc(100vw - 140px); }
  .pch-say b { max-width: 17em; }
}
/* タブレット縦（〜1023px） */
@media (max-width: 1023px) {
  .pch-card { padding: 36px 32px 26px; border-radius: 28px; }
}
/* スマホの形（.is-phone：幅の狭い窓と、欄が縦に入らない背の低い窓。top-hero.js fitForm）：上に顔の帯と吹き出し1つ、その下から紺の面が画面の幅いっぱい。字は読める大きさのまま、
   4枚は1列にして、下へ読んでいく（斉藤さん 2026-10-24「スマホはひどい。よくかんがえてくれ」） */
.pch:where(.is-phone) { padding: 164px 0 0; justify-content: flex-start; align-items: stretch; }
:where(.pch.is-phone) .pch-card { width: 100%; padding: 28px 20px; border-radius: 26px 26px 0 0; box-shadow: 0 -10px 30px rgba(10, 18, 36, .25); }
:where(.pch.is-phone) .pch-card h1 { font-size: min(24px, 6.2vw); }
:where(.pch.is-phone) .pch-go { padding: 0 14px; font-size: 14px; }
:where(.pch.is-phone) .pch-glass { display: none; }
:where(.pch.is-phone) .pch-blank textarea::placeholder { font-size: 14px; }
:where(.pch.is-phone) .pch-fill { margin-top: 22px; padding: 4px 8px 4px 16px; }
:where(.pch.is-phone) .pch-blank textarea { font-size: 17px; padding: 10px 0; }
:where(.pch.is-phone) .pch-spot img { width: 50px; height: 50px; border-width: 3px; }
:where(.pch.is-phone) .pch-say { padding: 8px 12px; max-width: min(230px, 62vw); }
:where(.pch.is-phone) .pch-say b { font-size: 13px; }
.pch:where(.is-phone) .s0 { left: 14px; top: 62px; }
.pch:where(.is-phone) .s1, .pch:where(.is-phone) .s2, .pch:where(.is-phone) .s3, .pch:where(.is-phone) .s4, .pch:where(.is-phone) .s5 { display: none !important; }
:where(.pch.is-phone) .pch-skip { right: 14px; bottom: 14px; }


/* 3,000人の顔は画面のいちばん上から。ロゴとメニューは、白い板にして顔の上に浮かせる（斉藤さん 2026-10-24「顔を一番上まで
   上げて、白背景で浮いた感じ」）。顔の背景がある画面（トップと、相手を選ぶ画面 find.css find-new）だけの形で、ほかの画面の
   ヘッダーは今までどおり */
html[data-top='new'] main:has(> section > .pch), html[data-top='new'] main:has(> .find-new) { padding-top: 0; }
/* トップは、顔の壁のすぐ下に足元（斉藤さん 2026-10-26「フッターは間があいてる」）。壁の終わりが区切りなので、足元の線も引かない */
html[data-top='new'] main:has(> section > .pch) { padding-bottom: 0; }
html[data-top='new'] body:has(.pch) > footer { border-top: 0; }
html[data-top='new'] body:has(.pch, .find-new) > .header { position: absolute; top: 14px; left: 24px; right: 24px; z-index: 20; margin: 0; padding: 4px 22px; min-height: 0; background: rgba(255, 255, 255, .96); border: 1px solid rgba(22, 35, 63, .08); border-radius: 14px; box-shadow: none; }
html[data-top='new'] .pch { --pch-head: 72px; padding-top: calc(56px + var(--pch-head)); }
html[data-top='new'] .pch-spots { top: var(--pch-head); }
@media (max-width: 1439px) {
  html[data-top='new'] .pch { padding-top: calc(210px + var(--pch-head)); padding-bottom: 230px; }
}

/* スマホ（〜759px）：パソコンとは別に組む（斉藤さん 2026-10-24「スマホはPCと切り離してゼロから」）。紺のカードは3,000人の
   上に乗せたまま（「このブルーは、3000人の上に乗るから意味がある」）、上下左右に顔が見える。最初の画面に、何の所か・見出し・
   入力欄と「相手を探す」まで。たとえばは縦に小さく4つ（横にめくると端で切れる） */
html[data-top='new'] body:has(.pch:where(.is-phone)) > .header { top: 10px; left: 12px; right: 12px; padding: 0 12px; border-radius: 14px; flex-wrap: nowrap; }
html[data-top='new'] body:has(.pch:where(.is-phone)) > .header nav { gap: 10px; }
html[data-top='new'] .pch:where(.is-phone) { --pch-head: 58px; padding: calc(112px + var(--pch-head)) 16px 40px; align-items: center; justify-content: center; }
.pch:where(.is-phone) .s0 { top: 10px; left: 14px; }
:where(.pch.is-phone) .pch-card { width: 100%; padding: 22px 16px 18px; border-radius: 24px; box-shadow: 0 14px 40px rgba(10, 18, 36, .35); }
:where(.pch.is-phone) .pch-eye { display: block; margin-bottom: 10px; font-size: 13.5px; line-height: 1.7; }
:where(.pch.is-phone) .pch-eye b { display: inline-block; margin: 0 0 4px; font-size: 12px; }
:where(.pch.is-phone) .pch-eye span { display: block; }
:where(.pch.is-phone) .pch-card h1 { font-size: 22px; line-height: 1.45; }
:where(.pch.is-phone) .pch-fill { margin-top: 16px; padding: 4px 4px 4px 14px; gap: 2px; flex-wrap: nowrap; }
:where(.pch.is-phone) .pch-blank textarea { font-size: 16px; }
:where(.pch.is-phone) .pch-blank textarea::placeholder { font-size: 14.5px; }
:where(.pch.is-phone) .pch-clip { width: 36px; height: 40px; }
:where(.pch.is-phone) .pch-go { padding: 0 14px; min-height: 42px; font-size: 14px; }
/* 相手を選ぶ画面（find-new）のヘッダーは、幅で決める */
@media (max-width: 759px) {
  html[data-top='new'] body:has(.find-new) > .header { top: 10px; left: 12px; right: 12px; padding: 0 12px; border-radius: 14px; flex-wrap: nowrap; }
  html[data-top='new'] body:has(.find-new) > .header nav { gap: 10px; }
}
@media (max-width: 380px) {
  .pch-go { padding: 0 12px; }
  .pch-blank textarea::placeholder { font-size: 13.5px; }
}
@media (max-width: 340px) {
  .pch-blank textarea::placeholder { font-size: 12.5px; }
}

/* スマホ：上の一文は数字で切らない。たとえばは商品の名前だけを2つずつ（斉藤さん 2026-10-26「スマホはカットしてよさそう」）。
   欄に字を書くと退く。吹き出しの札は4つまで（紺の箱にかぶらない） */
:where(.pch.is-phone) .pch-eye span .pch-num { display: inline; min-width: 0; }
:where(.pch.is-phone) .pch-ex { margin-top: 16px; }
:where(.pch.is-phone) .pch-ex-say { margin: 0 0 8px; text-align: center; font-size: 12.5px; }
:where(.pch.is-phone) .pch-ex-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
/* 押せる高さは 2.75rem（44px）以上（saito-review 2026-10-28：40px だった） */
:where(.pch.is-phone) .pch-ex-card { justify-content: center; min-height: 2.75rem; padding: 0 8px; border-radius: 980px; background: transparent; border-color: rgba(255, 255, 255, .28); }
:where(.pch.is-phone) .pch-ex-text { flex: none; }
:where(.pch.is-phone) .pch-ex-name { margin: 0; font-size: 13px; color: #fff; white-space: nowrap; }
:where(.pch.is-phone) .pch-ex-gain, :where(.pch.is-phone) .pch-ex-card i { display: none; }
/* 欄に字を書くと、例は「書いた字＋できること」の1列に（斉藤さん 2026-10-26「下の例のところが書き換わっていく機能」） */
.pch.has-text:where(.is-phone) .pch-ex-grid { grid-template-columns: 1fr; }
.pch.has-text:where(.is-phone) .pch-ex-card { justify-content: space-between; padding: 10px 12px; }
.pch.has-text:where(.is-phone) .pch-ex-text { flex: 1; text-align: left; }
.pch.has-text:where(.is-phone) .pch-ex-name { color: #fff; white-space: normal; margin-bottom: 2px; }
.pch.has-text:where(.is-phone) .pch-ex-card i { display: inline; }
:where(.pch.is-phone) .pch-facts i:nth-child(n + 5) { display: none; }

/* 四角基調（斉藤さん 2026-10-26「すっきり」）：角はすべて立て、例は箱で囲まずに線で区切る。顔の壁は色のまま（「賑わい感がある方がよさそう」） */
html[data-top='new'] body:has(.pch, .find-new) > .header { border-radius: 0; }
.pch-card, .pch-eye b, .pch-say, .pch-spot img, .pch-facts i, .pch-ex-card { border-radius: 0; }
.pch-say, .pch-spot:nth-child(n + 4) .pch-say { border-radius: 0; }
.pch-fill { border-radius: 0; padding: 0 0 0 20px; overflow: hidden; }
.pch-go { border-radius: 0; min-height: 56px; padding: 0 26px; }
.pch-ex-grid { gap: 0 24px; }
.pch-ex-card { background: transparent; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); padding: 14px 4px; }
.pch-ex-card:hover { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .18); }
/* スマホ：吹き出しは細く横長に。顔・一言・名前と年齢の1行・札3つ。プロフィールへは吹き出しを押す（斉藤さん 2026-10-26「窮屈」） */
html[data-top='new'] .pch:where(.is-phone) { padding-top: calc(96px + var(--pch-head)); }
.pch:where(.is-phone) .s0 { left: 12px; right: 12px; top: 8px; }
:where(.pch.is-phone) .pch-spot img { width: 44px; height: 44px; }
:where(.pch.is-phone) .pch-say { max-width: none; width: auto; flex: 1; padding: 8px 12px; }
:where(.pch.is-phone) .pch-say b { font-size: 13px; }
:where(.pch.is-phone) .pch-say small { display: flex; gap: 6px; }
:where(.pch.is-phone) .pch-say small span { display: inline; }
:where(.pch.is-phone) .pch-facts { display: flex; flex-wrap: nowrap; overflow: hidden; margin-top: 4px; }
:where(.pch.is-phone) .pch-facts i:nth-child(n + 4) { display: none; }
:where(.pch.is-phone) .pch-deep { display: none; }
:where(.pch.is-phone) .pch-fill { padding-left: 14px; }
:where(.pch.is-phone) .pch-go { min-height: 48px; padding: 0 16px; }
:where(.pch.is-phone) .pch-ex-grid { gap: 8px; }
:where(.pch.is-phone) .pch-ex-card { border: 1px solid rgba(255, 255, 255, .28); padding: 0 8px; }

/* 欄の字は、言い回しで区切らずに行の端まで詰める（貼った箇条書きの「・」だけが1行目に残っていた。2026-10-27） */
.pch-blank textarea { word-break: normal; line-break: strict; }