/* kekka.net — 色は PiTTAQ のロゴから。紺＝字と暗い面、藍＝選ぶ（押せる物）、朱＝結果（結果を見せる所だけ）。
   灰は紺を薄めた仲間だけを使う。構成は「平らな色面のポスター」：太い字、色面どうしを突き合わせ、線や影で区切らない。 */
:root {
  --paper: #ffffff; --mist: #f2f3f7; --ink: #182438; --mute: #4a5368;
  /* 藍＝ロゴの「選ぶ」の色（ユーザーと決めたブランド色。制作画面の選択色の色相を、競合ヨミトルの青から20°ずらした物）。taste-skill-ignore */
  --ai: #4f46e5; --ai-deep: #3f37c9; --ai-lite: #8b85f0;   /* 白文字 6.3:1／紺の上は明るい版 5.0:1 taste-skill-ignore */
  --shu: #f06d45;                                           /* 朱：白地 3.0:1 なので文字には使わない。朱の面の字は紺（5.2:1） */
  --f-display: "Zen Kaku Gothic New", "BIZ UDPGothic", sans-serif;
  --f-body: "BIZ UDPGothic", sans-serif;
  /* 字の大きさは5段だけ */
  --t-mega: clamp(96px, 25vw, 400px);
  --t-poster: clamp(52px, 9vw, 140px);
  --t-state: clamp(22px, 2.5vw, 36px);
  --t-body: 18px;
  --t-small: 14px;
  --m: clamp(18px, 1.6vw, 28px);           /* 外側の余白（左右とも同じ） */
  --gap: clamp(96px, 12vw, 200px);         /* 節と節の間 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --ease: cubic-bezier(.2, 0, 0, 1);
  --d1: 150ms; --d2: 250ms; --d3: 400ms;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: var(--t-body); line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
/* 文節で改行するのは見出しだけ。本文は和文ふつうの改行で行末までそろえる */
h1, h2, h3 { word-break: auto-phrase; text-wrap: balance; }
p, li, figcaption, dd { text-wrap: pretty; }
/* 大きく組む文は見出しと同じく文節で改行する */
.intro p, .flow-field p, .cta p, .foot-invite p, .formats li b, .tile b { word-break: auto-phrase; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ai); outline-offset: 3px; }
.on-ink :focus-visible, .on-ai :focus-visible { outline-color: var(--paper); }
.skip { position: absolute; left: var(--m); top: -80px; z-index: 50; padding: var(--s2) var(--s4); background: var(--ink); color: var(--paper); }
.skip:focus { top: var(--m); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.on-ink { background: var(--ink); color: var(--paper); }
.on-ai { background: var(--ai); color: var(--paper); }
.on-shu { background: var(--shu); color: var(--ink); }
.on-mist { background: var(--mist); color: var(--ink); }

/* ボタン：角は四角、色は藍1色（藍＝押す・選ぶ） */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s6); background: var(--ai); color: var(--paper); font-weight: 700; text-decoration: none; transition: background var(--d1) var(--ease), transform var(--d1) var(--ease); }
.btn:hover { background: var(--ai-deep); }
.btn:active { transform: translateY(1px); }
.btn--paper { background: var(--paper); color: var(--ink); }
.btn--paper:hover { background: var(--mist); }
.link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color var(--d1) var(--ease); }
.link:hover { color: var(--ai); }
.on-ink .link:hover { color: var(--ai-lite); }

/* ロゴ（インラインSVG）。部品ごとに色を持つ */
.pq-logo { display: block; width: 100%; height: auto; overflow: visible; }
.pq-logo .ink { fill: currentColor; }
.pq-logo .dot { fill: var(--ai); }
.pq-logo .tail { fill: var(--shu); }
.on-ink .pq-logo .dot { fill: var(--ai-lite); }

/* ───────── PiTTAQ：最初の画面「名前を真ん中に」 ───────── */
.hero { position: relative; display: grid; grid-template-areas: "nav" "name" "lede" "pic"; gap: var(--s5); padding: var(--m) var(--m) 0; min-height: 100svh; overflow: clip; }
.hero-nav { grid-area: nav; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); justify-content: flex-end; font-size: var(--t-small); font-weight: 700; }
.hero-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.hero-nav a:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.hero-name { grid-area: name; margin: 8svh 0 0; color: var(--ink); }
.hero-lede { grid-area: lede; display: grid; gap: var(--s4); justify-items: start; }
.hero-lede p { margin: 0; max-width: 22em; font-size: var(--t-body); line-height: 1.6; }
.hero-lede .btn { width: 100%; }
.hero-pic { grid-area: pic; align-self: end; width: min(78%, 360px); justify-self: center; aspect-ratio: 4 / 5; overflow: hidden; transform: rotate(-3deg); margin-bottom: -12%; }
.hero-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.hero-kind, .hero-foot { display: none; }

/* ───────── 一文（紺の面） ───────── */
.intro { position: relative; display: block; min-height: 56svh; padding: var(--s8) var(--m); overflow: clip; }
.intro p { position: relative; z-index: 1; margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-state); line-height: 1.5; letter-spacing: -.01em; max-width: 30em; }
.intro .w { transition: opacity var(--d2) var(--ease); }
/* 切り抜きの画面：スマホとタブレットでは一文の下に並べる（文字に重ねない）。PCでは右側に重ねて傾ける */
.intro-chip { position: relative; display: inline-block; width: 40%; max-width: 220px; aspect-ratio: 4 / 5; margin: var(--s7) var(--s4) 0 0; overflow: hidden; vertical-align: top; }
.intro-chip img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.intro-chip--a { transform: rotate(5deg); }
.intro-chip--b { transform: rotate(-4deg); }

/* ───────── しくみ「1枚のカード、4つの色面」 ───────── */
.flow { display: grid; }
.flow-field { position: relative; display: grid; align-content: start; gap: var(--s6); min-height: 64svh; padding: var(--s6) var(--m) var(--s7); overflow: clip; }
.flow-field h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-state); line-height: 1.2; letter-spacing: -.02em; }
.flow-field p { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: var(--t-state); line-height: 1.3; letter-spacing: -.02em; }
.flow-card { position: relative; width: 200px; transition: transform var(--d1) var(--ease); }
.flow-card img { width: 100%; aspect-ratio: 780 / 1690; object-fit: cover; }
.flow-field:hover .flow-card { transform: translateY(-6px); }
.flow-pick { position: absolute; left: 9%; top: 74%; width: 40%; height: 20%; outline: 5px solid var(--ai); outline-offset: -5px; }
.on-ai .flow-pick { outline-color: var(--paper); }
.flow-tap { position: absolute; left: 29%; top: 84%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: var(--ai); }
.flow-link { position: absolute; left: 8px; right: 8px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; min-height: 40px; padding: 0 var(--s3); background: var(--shu); color: var(--ink); font-size: var(--t-small); font-weight: 700; }

/* ───────── 見本「発車標」：行を開くと、その診断で遊べる ───────── */
.samples { padding: var(--gap) 0 0; background: var(--ink); color: var(--paper); }
.samples-head { display: grid; gap: var(--s3); padding: 0 var(--m) var(--s6); }
.samples-head h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: .95; letter-spacing: -.03em; }
.samples-head p { margin: 0; max-width: 34em; color: var(--paper); }
.board { display: grid; gap: 4px; padding: 0 var(--m) var(--m); }
.row-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s4); width: 100%; min-height: 64px; padding: 0 var(--s4); border: 0; background: #222f45; color: var(--paper); font: inherit; text-align: start; cursor: pointer; transition: background var(--d1) var(--ease); }
.row-head:hover { background: #2b3952; }
.row-name { font-family: var(--f-display); font-weight: 900; font-size: var(--t-body); line-height: 1.25; }
.row-fact { display: none; font-variant-numeric: tabular-nums; }
.row-status { padding: var(--s1) var(--s3); background: var(--shu); color: var(--ink); font-size: var(--t-small); font-weight: 700; white-space: nowrap; }
.row.is-open .row-head { background: var(--ai); }
.row-body { display: grid; gap: var(--s4); padding: var(--s4) var(--s4) var(--s5); background: var(--ai); }
.row-body[hidden] { display: none; }
.row-body p { margin: 0; max-width: 40em; }
.row-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0; font-variant-numeric: tabular-nums; }
.row-facts div { display: flex; gap: var(--s2); }
.row-facts dt { opacity: .85; }
.row-facts dd { margin: 0; font-weight: 700; }
.row-embed { background: var(--paper); color: var(--ink); min-height: 620px; }

/* ───────── 形式「1行1項目のポスター」 ───────── */
.formats { padding: var(--gap) var(--m); }
.formats h2 { margin: 0 0 var(--s6); font-family: var(--f-display); font-weight: 900; font-size: var(--t-state); letter-spacing: -.02em; }
.formats ul { margin: 0; padding: 0; list-style: none; }
.formats li { display: grid; gap: 6px; padding-bottom: 22px; }
.formats li b { justify-self: start; font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: .95; letter-spacing: -.04em; white-space: nowrap; transition: color var(--d1) var(--ease); }
.formats li:hover b { color: var(--ai); }
.formats li span { font-size: var(--t-small); }
.formats li em { font-style: normal; font-weight: 700; color: var(--ai); }

/* ───────── できること「言葉と画面のタイル」 ───────── */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); padding: var(--m); }
.tile { position: relative; display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; }
.tile b { font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: 1; letter-spacing: -.04em; }
.tile span { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); text-align: center; font-size: var(--t-small); font-weight: 700; line-height: 1.4; }
.tile h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: 1; letter-spacing: -.04em; text-align: center; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tile--pic span { left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s3); background: var(--ink); color: var(--paper); text-align: start; }

/* ───────── 強み「色面の上の一文」 ───────── */
.claims { display: grid; }
.claim { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding: var(--s6) var(--m) var(--s7); }
.claim-pic { position: relative; margin: 0 0 var(--s5); aspect-ratio: 16 / 10; overflow: hidden; }
.claim-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.claim-pic .flow-link { left: auto; right: var(--s3); bottom: var(--s3); width: min(70%, 320px); }
.claim p { margin: 0; max-width: 24em; font-size: var(--t-body); line-height: 1.7; }
.claim h2 { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: .95; letter-spacing: -.04em; }
.claim code { display: block; margin-top: var(--s3); padding: var(--s3); background: var(--ink); color: var(--paper); font-size: var(--t-small); line-height: 1.5; overflow-x: auto; white-space: pre; }

/* ───────── 締め「一語がボタン」 ───────── */
.cta { display: block; position: relative; min-height: 46svh; padding: var(--s5) var(--m); background: var(--ai); color: var(--paper); text-decoration: none; overflow: clip; transition: background var(--d1) var(--ease), color var(--d1) var(--ease); }
.cta p { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.cta svg { position: absolute; right: var(--m); top: var(--s5); width: 32px; height: 32px; }
.cta b { position: absolute; left: var(--m); bottom: var(--s5); font-family: var(--f-display); font-weight: 900; font-size: var(--t-mega); line-height: .8; letter-spacing: -.05em; white-space: nowrap; }
.cta:hover, .cta:focus-visible { background: var(--paper); color: var(--ai); outline: none; }

/* ───────── フッター「名前が切れて戻る」 ───────── */
.foot { position: relative; display: grid; gap: var(--s6); padding: var(--s8) var(--m) 0; overflow: hidden; }
.foot-invite { display: grid; gap: var(--s5); justify-items: start; }
.foot-invite p { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: 1.05; letter-spacing: -.03em; }
.foot-invite .btn { width: 100%; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s5); margin: 0; padding: 0; list-style: none; font-size: var(--t-small); }
.foot-links a { display: inline-flex; align-items: center; min-height: 44px; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s2) var(--s5); font-size: var(--t-small); color: var(--paper); }
.foot-legal p { margin: 0; }
.foot-name { width: 112%; margin: 0 0 0 -2%; transform: translateY(28%); color: var(--paper); }

/* ───────── kekka.net のトップ（親のブランド）。色はサービスに譲り、紺・白・淡い灰と、押せる物の藍だけ ───────── */
/* 「kekka.net」は字の大きさの 3.7 倍の幅。画面の幅から逆算して、必ず1行に収める */
.hero-word { font-family: var(--f-display); font-weight: 900; font-size: min(var(--t-mega), calc((100vw - 2 * var(--m)) / 3.75)); line-height: .8; letter-spacing: -.06em; white-space: nowrap; }
.hero-kind span { display: inline-flex; align-items: center; min-height: 44px; }
.svc { padding: var(--gap) var(--m); }
.svc h2 { margin: 0 0 var(--s6); font-family: var(--f-display); font-weight: 900; font-size: var(--t-poster); line-height: .95; letter-spacing: -.04em; }
.svc-item { display: grid; gap: var(--s7); padding: var(--s7) var(--m) 0; text-decoration: none; overflow: clip; transition: background var(--d1) var(--ease); }
.svc-item:hover { background: #1f2d45; } /* 紺の面のひとつ明るい段（押せる面の手ごたえ）。一か所だけなので直書き */
.svc-text { display: grid; gap: var(--s5); justify-items: start; }
.svc-logo { width: min(100%, 520px); color: var(--paper); }
.svc-text p { margin: 0; max-width: 26em; }
.svc-go { display: inline-flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s6); background: var(--ai); color: var(--paper); font-weight: 700; }
.svc-item:hover .svc-go { background: var(--ai-deep); }
.svc-shots { position: relative; height: 340px; }
.svc-shot { position: absolute; bottom: -60px; width: 44%; aspect-ratio: 780 / 1690; object-fit: cover; }
.svc-shot--a { left: 0; transform: rotate(-6deg); }
.svc-shot--b { left: 28%; bottom: -20px; z-index: 1; transform: rotate(3deg); }
.svc-shot--c { right: 0; transform: rotate(8deg); }
.foot-word { margin: 0; font-family: var(--f-display); font-weight: 900; font-size: var(--t-mega); line-height: .8; letter-spacing: -.06em; white-space: nowrap; transform: translateY(28%); }
.foot--plain { min-height: 0; padding-bottom: var(--s7); }
.doc-head nav { display: flex; gap: var(--s5); }

/* 動き。<head> の1行が、動きを減らす設定でなければ html に .js-motion を付ける。
   ロゴの部品はスクリプトが組み上げるまで隠す。3.2 秒で必ず出す（スクリプトが読めなくても消えたままにしない） */
@keyframes show { to { opacity: 1; } }
.js-motion .logo-snap .drop, .js-motion .logo-snap .t2, .js-motion .logo-snap .dot, .js-motion .logo-snap .tail { opacity: 0; animation: show 0s 3.2s forwards; }
.js-motion.logo-done .logo-snap * { animation: none; }

/* ───────── 送信される情報について（文書ページ） ───────── */
.doc-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--m); }
.doc-head a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.doc { max-width: 760px; margin: 0 auto; padding: var(--s7) var(--m) var(--gap); }
.doc h1 { margin: 0 0 var(--s5); font-family: var(--f-display); font-weight: 900; font-size: var(--t-state); line-height: 1.25; }
.doc h2 { margin: var(--s8) 0 var(--s4); font-family: var(--f-display); font-size: var(--t-state); }
.doc ul { padding-left: 1.2em; }
.doc dl { display: grid; gap: var(--s3); margin: 0; }
.doc dl div { display: grid; gap: var(--s1); padding: var(--s4); background: var(--mist); }
.doc dt { font-weight: 700; }
.doc dd { margin: 0; }
.meta { font-size: var(--t-small); color: var(--mute); }

@media (min-width: 640px) {
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  .tile span { bottom: 18px; }
  .tile--pic span { bottom: 0; }
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; grid-template-areas: "kind nav" "name name" "lede foot"; gap: 0; padding: var(--m); }
  .hero-nav { align-self: start; gap: var(--s5); }
  .hero-name { align-self: center; margin: 0; }
  .hero-lede { align-self: end; }
  .hero-lede p { max-width: 24em; }
  .hero-lede .btn { width: auto; }
  .hero-pic { display: none; }
  .hero-kind, .hero-foot { display: flex; gap: var(--s5); font-size: var(--t-small); }
  .hero-kind { align-items: start; }
  .hero-foot { align-items: end; }
  .hero-kind { grid-area: kind; }
  .hero-foot { grid-area: foot; justify-content: flex-end; }
  .hero-kind a, .hero-foot a { display: inline-flex; align-items: center; min-height: 44px; }
  .intro { display: grid; align-content: center; padding: var(--s8) var(--m); }
  .intro-chip { position: absolute; z-index: 0; width: 11vw; max-width: none; margin: 0; }
  .intro-chip--a { right: 14%; top: 12%; }
  .intro-chip--b { right: 4%; bottom: 14%; width: 8vw; }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .flow-field { min-height: 84svh; grid-template-rows: auto 1fr auto; padding: var(--s6) var(--s5) 28px; }
  .flow-field .flow-card { grid-row: 2; align-self: center; justify-self: center; }
  .flow-field p { grid-row: 3; }
  .flow-field:not(:first-child) h2 { display: none; }
  .samples-head { grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: var(--s7); }
  .row-head { grid-template-columns: 5fr 2fr 1fr 1fr 2fr; min-height: 72px; padding: 0 var(--s5); }
  .row-name { font-size: var(--t-state); }
  .row-fact { display: block; }
  .row-status { justify-self: end; }
  .row-body { grid-template-columns: 2fr 3fr; align-items: start; padding: var(--s5); }
  .formats { padding: var(--gap) var(--m); }
  .formats li { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s5); padding-bottom: var(--s5); }
  .formats li span { font-size: var(--t-body); text-align: right; }
  .claims { grid-template-columns: 1fr; }
  .claim { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--s5); row-gap: var(--s7); padding: var(--s8) var(--m) var(--m); }
  .claim-pic { grid-column: 6 / span 7; grid-row: 1; margin: 0; }
  .claim h2 { grid-column: 1 / span 8; grid-row: 2; align-self: end; }
  .claim p { grid-column: 9 / span 4; grid-row: 2; align-self: end; }
  .claim:nth-child(even) .claim-pic { grid-column: 1 / span 7; }
  .claim:nth-child(even) h2 { grid-column: 5 / span 8; text-align: right; }
  .claim:nth-child(even) p { grid-column: 1 / span 4; grid-row: 2; }
  .flow-field p, .cta p { max-width: 16em; }
  .cta { min-height: 60svh; padding: 20px var(--m); }
  .cta svg { width: 48px; height: 48px; top: 20px; }
  .foot { grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 100svh; align-content: start; padding-top: var(--s8); }
  .foot-invite { grid-column: 1 / span 9; }
  .foot-invite .btn { width: auto; }
  .foot-links { grid-column: 10 / span 3; flex-direction: column; gap: 0; }
  .foot-legal { grid-column: 1 / -1; align-self: end; margin-top: auto; }
  .foot-name { grid-column: 1 / -1; width: 104%; margin-left: -1%; }
  .foot-word { grid-column: 1 / -1; }
  .svc-item { grid-template-columns: 5fr 7fr; align-items: center; padding: var(--s8) var(--s7) 0; }
  .svc-shots { height: 560px; align-self: end; }
}