/* ═══════════════════════════ Kikitori（/kikitori/）═══════════════════════════
   このページだけで使う部品。色・書体は site.css のトークンに合わせる。 */

/* ── ヒーローの要点 ── */
.kk-facts {
  list-style: none; margin: clamp(22px, 3vw, 32px) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line);
  max-width: 640px;
}
.kk-facts li {
  flex: 1 1 160px; padding: 14px 18px 0 0; margin-right: 18px;
  border-right: 1px solid var(--line);
}
.kk-facts li:last-child { border-right: 0; margin-right: 0; }
.kk-facts strong {
  display: block; font-family: var(--ff-mono); font-size: 1.05rem; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.kk-facts span { font-size: .78rem; color: var(--muted); }

/* ── 画面のイメージ ── */
.kk-screens {
  display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px);
  align-items: flex-start; justify-content: center;
}
.kk-shot { margin: 0; flex: 0 1 340px; max-width: 100%; }
.kk-shot figcaption { margin-top: 12px; font-size: .75rem; color: var(--faint); text-align: center; }

.kk-panel, .kk-captions {
  border-radius: 12px; color: #e9ebf0;
  background: linear-gradient(160deg, #3a3f4b 0%, #2a2e38 55%, #232730 100%);
  box-shadow: 0 18px 40px rgba(20, 22, 30, .22), inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-size: .8rem; line-height: 1.5;
}
.kk-panel { padding: 14px 16px 12px; }
.kk-panel-head { display: flex; align-items: center; gap: 8px; font-weight: 700; margin-bottom: 12px; }
.kk-wave { display: inline-flex; align-items: center; gap: 2px; height: 14px; }
.kk-wave i { width: 2px; background: #c9ced8; border-radius: 1px; }
.kk-wave i:nth-child(1) { height: 6px; } .kk-wave i:nth-child(2) { height: 12px; }
.kk-wave i:nth-child(3) { height: 9px; } .kk-wave i:nth-child(4) { height: 5px; }
.kk-panel-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 7px; border-radius: 7px; background: rgba(255, 255, 255, .16);
  font-weight: 700; margin-bottom: 12px;
}
.kk-rec { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #e9ebf0; }
.kk-panel-rows { margin: 0 0 10px; display: grid; gap: 6px; }
.kk-panel-rows > div { display: flex; align-items: center; gap: 10px; }
.kk-panel-rows dt { width: 4.4em; flex: none; color: #b8bdc8; }
.kk-panel-rows dd {
  margin: 0; flex: 1; min-width: 0; padding: 3px 8px; border-radius: 5px;
  background: rgba(255, 255, 255, .1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kk-panel-check dd, .kk-panel-checks li { background: none; padding: 0; }
.kk-panel-check dd::before, .kk-panel-checks li::before {
  content: "✓"; display: inline-grid; place-items: center; width: 14px; height: 14px;
  margin-right: 7px; border-radius: 3px; background: #2f7cf6; color: #fff; font-size: .62rem;
}
.kk-panel-checks {
  list-style: none; margin: 0; padding: 10px 0; display: grid; gap: 5px;
  border-top: 1px solid rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.kk-panel-foot { display: flex; gap: 8px; margin-top: 10px; }
.kk-panel-foot span { padding: 3px 10px; border-radius: 6px; background: rgba(255, 255, 255, .12); font-size: .74rem; }

.kk-captions { padding: 12px 16px 16px; }
.kk-captions-head {
  font-size: .72rem; color: #b8bdc8; text-align: center; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.kk-captions p { margin: 0 0 10px; font-size: .88rem; line-height: 1.7; }
.kk-captions p:last-child { margin-bottom: 0; }
.kk-live { opacity: .72; }
.kk-who {
  display: inline-block; margin-right: 8px; padding: 0 7px; border-radius: 4px;
  font-size: .68rem; font-weight: 700; vertical-align: .12em;
}
.kk-who--them { background: #f0630f; color: #fff; }
.kk-who--me { background: rgba(255, 255, 255, .22); color: #fff; }

/* ── 仕組みの図 ── */
.kk-flow {
  display: grid; gap: 0; max-width: 880px; margin: 0 auto clamp(32px, 4vw, 48px);
}
.kk-flow-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0;
}
.kk-node {
  border: 1px solid var(--line-strong); background: var(--panel);
  padding: 14px 16px; font-weight: 800; color: var(--ink); font-size: .92rem;
}
.kk-node small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); margin-top: 4px; }
.kk-node--app { border: 2px solid var(--accent); background: var(--accent-wash); }
.kk-arrow {
  display: flex; align-items: center; justify-content: center; position: relative;
  min-width: 120px; padding: 0 10px;
}
.kk-arrow::before {
  content: ""; position: absolute; left: 8px; right: 14px; top: 50%;
  border-top: 2px solid var(--ink);
}
.kk-arrow::after {
  content: ""; position: absolute; right: 8px; top: calc(50% - 5px);
  border-left: 8px solid var(--ink); border-top: 5px solid transparent; border-bottom: 5px solid transparent;
}
.kk-arrow span {
  position: relative; background: var(--bg-soft); padding: 0 6px;
  font-family: var(--ff-mono); font-size: .66rem; color: var(--muted); transform: translateY(-14px);
}
.kk-flow-tap {
  display: grid; grid-template-columns: 1fr auto 1fr; height: 52px;
}
.kk-flow-tap span {
  grid-column: 1; justify-self: center; position: relative; height: 100%;
  border-left: 2px dashed var(--accent); padding-left: 10px;
  display: flex; align-items: center; font-family: var(--ff-mono); font-size: .68rem; color: var(--accent-deep);
}

@media (max-width: 640px) {
  .kk-flow-row { grid-template-columns: 1fr; }
  .kk-arrow { min-height: 44px; min-width: 0; }
  .kk-arrow::before { left: 50%; right: auto; top: 6px; bottom: 12px; border-top: 0; border-left: 2px solid var(--ink); }
  .kk-arrow::after {
    right: auto; left: calc(50% - 4px); top: auto; bottom: 4px;
    border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--ink); border-bottom: 0;
  }
  .kk-arrow span { transform: translateX(46px); }
  .kk-flow-tap { grid-template-columns: 1fr; }
}

.kk-table-wrap { overflow-x: auto; }
.kk-compare { min-width: 560px; }
.kk-compare tbody th { text-align: left; font-weight: 700; white-space: nowrap; }

/* ── 使う前に ── */
.kk-quote {
  margin: 12px 0 8px; padding: 12px 16px; border-left: 3px solid var(--line-strong);
  background: var(--panel); font-size: .85rem; line-height: 1.9; color: var(--text);
}
.kk-small { font-size: .75rem; color: var(--faint); }

/* ── FAQ ── */
.kk-faq { max-width: 820px; border-top: 1px solid var(--line); }
.kk-faq details { border-bottom: 1px solid var(--line); }
.kk-faq summary {
  cursor: pointer; list-style: none; padding: 18px 32px 18px 0; position: relative;
  font-weight: 700; color: var(--ink); font-size: .95rem;
}
.kk-faq summary::-webkit-details-marker { display: none; }
.kk-faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--ff-mono); font-size: 1.1rem; color: var(--faint);
}
.kk-faq details[open] summary::after { content: "−"; }
.kk-faq p { margin: 0 0 18px; font-size: .88rem; line-height: 1.9; color: var(--muted); }