/* ---------- 字体 ----------
 * サイト全体で、丸くてPOPな「Rounded M+ 1c」を使う。
 * 端末まかせだと、iPhoneは丸ゴ、Androidは角ゴと形が変わってしまうため、
 * ファイルをサイトの中に置いて、どの端末でも同じ形にしている。
 * 外のどこにも取りに行かない。
 *
 * 太さは、字体のもつ太さを一段ずつ軽いほうにずらしてある。
 *   ページで 400 と書いたところ → Regular
 *   ページで 700 と書いたところ → Medium
 *   ページで 800・900 と書いたところ → ExtraBold
 * いちばん太い Black は使わない。重たく見えるため。
 *
 * ライセンスと作り直し方は assets/font/README.txt を見ること。
 * swap にしてあるので、読み込みが終わるまでは端末の字で表示され、
 * 終わったら差し替わる。文字が消える時間は作らない。 */
@font-face {
  font-family: "KokoRounded";
  src: url("font/mplus-rounded-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KokoRounded";
  src: url("font/mplus-rounded-medium.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "KokoRounded";
  src: url("font/mplus-rounded-extrabold.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* POPな見た目は3Ver共通。差分は versions.js 側の文言だけ。 */
:root {
  --ki-ink: #2b2b2b;
  --ki-paper: #FFFBF2;
  --ki-card: #ffffff;
  --ki-mustard: #F2B231;
  --ki-line: #2b2b2b;
  --ki-muted: #6f6a63;
  --ki-accent: #F2B231;
  --ki-koko: #FFD84A;   /* ロゴの「KOKO」の黄色 */
  --ki-round: 20px;
  /* 読み込みが終わるまでと、字体に無い文字のときは、うしろの端末の字を使う */
  --ki-font: "KokoRounded", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN",
             "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 16px 64px;
  /* 写真を画面いっぱいに出すために 100vw を使う。
   * パソコンではスクロールバーのぶんだけはみ出すので、そこを切る。 */
  overflow-x: clip;
  background:
    radial-gradient(circle at 12% 8%, rgba(242,178,49,.16), transparent 42%),
    radial-gradient(circle at 88% 22%, rgba(127,204,227,.20), transparent 40%),
    var(--ki-paper);
  color: var(--ki-ink);
  font-family: var(--ki-font);
  line-height: 1.75;
  -webkit-text-size-adjust: 100%;
}

/* ---------- ヘッダー ---------- */
.ki-header { max-width: 980px; margin: 0 auto; padding: 20px 0 8px; text-align: center; }

.ki-nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.ki-nav-link {
  padding: 6px 16px; border: 2px solid var(--ki-line); border-radius: 999px;
  background: #fff; color: var(--ki-ink); text-decoration: none;
  font-size: 14px; font-weight: 700;
}
.ki-nav-link:hover { background: #fff3d8; }
.ki-nav-link.is-current { background: var(--ki-ink); color: #fff; }

/* 「きょうのKOKOいろ」は10文字あるので、狭い画面では字を小さくして1行に収める。
 * 途中で折り返すとロゴとして読めなくなるため、折り返しは禁止する。 */
/* ロゴも本文と同じ字体にそろえる。
 * 以前はロゴだけ角ゴシックにしていたが、ページの中で2種類の字体が混ざるので、
 * 本文のまるいゴシックに統一した。「KOKO」の英字も同じ字体から出る。
 * 字体の指定は body 側にあるので、ここでは何も指定しない（受け継がせる）。 */
.ki-logo {
  margin: 0; font-size: clamp(24px, 7.8vw, 60px);
  line-height: 1.25; letter-spacing: .02em; white-space: nowrap;
  font-weight: 900;
}
.ki-logo-char { display: inline-block; }
/* 「KOKO」だけ黄色にして、黒いふちで囲む。
 * ふちは線で描く。影を八方向に置く方法だと角がギザギザに見えるため。
 * paint-order で線を文字の下に回し、文字が細らないようにしている。
 * 太さは em なので、ロゴが縮んでも見た目の比率が変わらない。 */
.ki-logo-char.is-koko {
  color: var(--ki-koko);
  -webkit-text-stroke: .07em var(--ki-line);
  paint-order: stroke fill;
}

.ki-tagline { margin: 10px 0 0; color: var(--ki-muted); font-size: 14px; }


/* ---------- ホームページに埋めこんだとき ----------
 * embed.js が html に ki-embed を付ける。単独で開いたときは付かない。 */

/* 枠が中身より高くなった場合でも、下が白く抜けて見えないようにする。
 * 色をつけているのは body だけなので、その下は何も塗られていなかった。 */
html { background: var(--ki-paper); }

/* 題はホームページ側がすでに出しているので、こちらでは出さない。
 * 読み上げと検索のためだけに残す。そのぶん中身が上に来る。 */
.ki-embed .ki-header .ki-logo,
.ki-embed .ki-header .ki-tagline {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ki-embed .ki-header { padding: 14px 0 4px; }

/* ---------- 本体 ---------- */
.ki-main {
  max-width: 980px; margin: 24px auto 0;
  display: grid; gap: 28px; grid-template-columns: minmax(260px, 390px) 1fr;
  align-items: start;
}
@media (max-width: 760px) {
  .ki-main { grid-template-columns: 1fr; }
}
/* 結果を読んでいる間もキャラクターが見えているようにする */
@media (min-width: 761px) {
  .ki-stage { position: sticky; top: 20px; }
}

/* ---------- 吹き出しとキャラクター ---------- */
.ki-stage { text-align: center; }

.ki-bubble {
  position: relative; display: inline-block; max-width: 100%;
  margin: 0 auto 22px; padding: 14px 22px;
  background: var(--ki-mustard); border: 3px solid var(--ki-line); border-radius: var(--ki-round);
  font-weight: 700; font-size: clamp(15px, 3.6vw, 19px);
}
.ki-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%);
  border: 9px solid transparent; border-top-color: var(--ki-line);
}
.ki-bubble::before {
  content: ""; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: var(--ki-mustard); z-index: 1;
}

.ki-figure { display: block; }
.ki-character { width: 100%; max-width: 390px; height: auto; display: block; margin: 0 auto; }
.ki-character path,
.ki-character rect,
.ki-character circle,
.ki-character polygon { transition: fill .35s ease, stroke .35s ease; }
.ki-deco { opacity: 0; animation: ki-pop .45s ease forwards; }
.ki-deco:nth-of-type(2n) { animation-delay: .06s; }
.ki-deco:nth-of-type(3n) { animation-delay: .12s; }
@keyframes ki-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .ki-deco { opacity: 1; animation: none; }
  .ki-character * { transition: none; }
}

/* ---------- チップ ---------- */
.ki-chip-area { transition: opacity .2s ease; }
.ki-chip-area.is-busy { opacity: .5; }
.ki-chip-label { margin: 0 0 12px; font-size: 14px; color: var(--ki-muted); }

.ki-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ki-chip {
  padding: 11px 20px; border: 2px solid var(--ki-line); border-radius: 999px;
  background: #fff; color: var(--ki-ink); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 700;
  transition: transform .12s ease, background .15s ease;
}
.ki-chip:hover:not(:disabled) { background: #fff3d8; transform: translateY(-2px); }
.ki-chip:active:not(:disabled) { transform: translateY(0); }
.ki-chip:disabled { cursor: default; }

/* ---------- 結果 ---------- */
.ki-result {
  background: var(--ki-card); border: 3px solid var(--ki-line);
  border-radius: var(--ki-round); padding: 22px;
  box-shadow: 6px 6px 0 rgba(43,43,43,.12);
}

.ki-color-head { display: flex; align-items: center; gap: 14px; }
.ki-swatch { width: 58px; height: 58px; border-radius: 16px; border: 3px solid var(--ki-line); flex: none; }
.ki-color-names { min-width: 0; }
.ki-color-name { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; }
.ki-color-hex { margin: 0; font-size: 13px; color: var(--ki-muted); font-family: ui-monospace, "SFMono-Regular", monospace; }

.ki-echo { margin: 16px 0 4px; font-size: 13px; color: var(--ki-muted); }
.ki-message {
  margin: 0 0 20px; padding: 14px 16px; font-size: 16px; font-weight: 700;
  background: #fff6e2; border-left: 6px solid var(--ki-accent); border-radius: 0 12px 12px 0;
}

/* 取り入れ方は1枠にまとめる。結果カードの主役なので少し大きめに扱う。 */
.ki-howto { border: 2px solid #e6ded0; border-radius: 16px; padding: 18px 20px; background: #fffdf8; }
.ki-howto-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.ki-howto-icon { font-size: 22px; line-height: 1; }
.ki-howto-label { margin: 0; font-size: 15px; font-weight: 800; }
.ki-howto-body { margin: 0; font-size: 15.5px; line-height: 1.85; }

.ki-again {
  margin-top: 22px; width: 100%; padding: 13px; cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 800;
  background: var(--ki-ink); color: #fff; border: none; border-radius: 999px;
}
.ki-again:hover { background: #444; }

/* ---------- 播本さんの声 ----------
 * 吹き出しの中身は再生ボタンだけ。締めの一文は本文のほうに残してある。
 * 音が出せない場所で開く人がいるので、文字を声に置きかえてしまわない。 */
.ki-say { display: flex; align-items: flex-start; gap: 11px; margin-top: 14px; }
.ki-say-face {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  border: 3px solid var(--ki-line); overflow: hidden;
}
.ki-say-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.ki-say-bubble {
  position: relative; flex: 1; min-width: 0;
  padding: 11px 14px;
  background: #FFF6E2; border: 2px solid var(--ki-line); border-radius: 14px;
}
/* 吹き出しのしっぽ。顔のほうを向かせる */
.ki-say-bubble::before,
.ki-say-bubble::after {
  content: ""; position: absolute; top: 18px; width: 0; height: 0;
  border: 8px solid transparent;
}
.ki-say-bubble::before { left: -17px; border-right-color: var(--ki-line); }
.ki-say-bubble::after  { left: -13px; border-right-color: #FFF6E2; }

.voice {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0; padding: 0; cursor: pointer; font: inherit; text-align: left;
  background: none; border: none; color: inherit;
}
.voice:focus-visible { outline: 3px solid #0068B7; outline-offset: 4px; border-radius: 10px; }
.voice-btn {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  border: 2px solid var(--ki-line); background: var(--ki-mustard);
  display: flex; align-items: center; justify-content: center;
}
.voice-btn svg { width: 14px; height: 14px; display: block; }
.voice-wave { display: flex; align-items: center; gap: 2.5px; flex: 1; min-width: 0; height: 26px; }
.voice-wave i {
  display: block; flex: 1; min-width: 0; max-width: 4px; border-radius: 2px;
  background: #D8CDB4; height: 30%;
}
.voice-wave i.is-on { background: var(--ki-line); }
.voice.is-playing .voice-wave i.is-on { animation: ki-bounce .5s ease-in-out infinite alternate; }
@keyframes ki-bounce { to { transform: scaleY(1.45); } }
.voice-time {
  flex: none; font-size: 12.5px; font-weight: 800; color: var(--ki-muted);
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .voice.is-playing .voice-wave i.is-on { animation: none; }
}

/* ---------- おまけの声 ----------
 * 3回に1回くらい、文章を読み終わったころに箱が飛び出す。
 * 押すとふたが開いて、中から顔が出て声が鳴る。 */
.ki-omake {
  /* 画面の外に出ているときに動かすので、ふちにぴったり付かないよう余白をとる */
  scroll-margin: 16px 0 26px;
  position: relative; overflow: hidden;
  margin-top: 18px; padding: 16px 18px 15px; text-align: center;
  background: linear-gradient(135deg, #FFF6DF 0%, #FFE6A6 100%);
  border: 3px solid var(--ki-line); border-radius: 18px;
  box-shadow: 4px 4px 0 rgba(43,43,43,.16);
}
.ki-omake.is-in { animation: ki-omake-in .55s cubic-bezier(.18, 1.5, .5, 1) both; }
@keyframes ki-omake-in {
  from { opacity: 0; transform: scale(.88) translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.ki-omake-head {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 0 0 12px; font-size: 16px; font-weight: 900;
}
.ki-omake-spark { font-size: 18px; line-height: 1; animation: ki-spark 1.6s ease-in-out infinite; }
@keyframes ki-spark {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.22) rotate(12deg); }
}

/* ---- 箱 ---- */
.ki-gift-stage { display: flex; justify-content: center; }
.ki-gift {
  position: relative; width: 136px; height: 172px;
  padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; color: inherit;
}
.ki-gift:disabled { cursor: default; }
.ki-gift:focus-visible { outline: 3px solid #0068B7; outline-offset: 4px; border-radius: 14px; }

/* 箱は下に寄せて置き、上に顔が出る場所をあけておく */
.ki-gift-art {
  position: absolute; left: 50%; bottom: 0; z-index: 2;
  transform: translateX(-50%);
  width: 124px; display: block;
}
.ki-gift-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* ふただけを飛ばす */
.ki-gift-lid {
  transform-box: fill-box; transform-origin: 50% 100%;
  transition: transform .55s cubic-bezier(.2, 1.35, .4, 1);
}
.is-open .ki-gift-lid { transform: translate(56px, -6px) rotate(-22deg); }

/* 開くまでは箱が小さく跳ねて、押せることを伝える */
.ki-omake:not(.is-open) .ki-gift-art { animation: ki-gift-hop 1.5s ease-in-out infinite; }
@keyframes ki-gift-hop {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  30%      { transform: translateX(-50%) translateY(-7px) rotate(-3deg); }
  60%      { transform: translateX(-50%) translateY(0) rotate(3deg); }
}
.ki-gift:hover:not(:disabled) .ki-gift-art { animation-play-state: paused; transform: translateX(-50%) scale(1.05); }

/* 顔は箱の中から上に出てくる。箱の後ろ側に置いてある */
.ki-gift-face {
  display: block;
  position: absolute; left: 50%; bottom: 30px; z-index: 1;
  width: 72px; height: 72px; border-radius: 50%;
  border: 3px solid var(--ki-line); overflow: hidden; background: #fff;
  transform: translate(-50%, 10px) scale(.4); opacity: 0;
  transition: transform .6s cubic-bezier(.2, 1.6, .4, 1), opacity .3s ease;
}
.ki-gift-face img { width: 100%; height: 100%; display: block; object-fit: cover; }
.is-open .ki-gift-face { transform: translate(-50%, -70px) scale(1); opacity: 1; }

/* 開いたときに散る光 */
.ki-gift-star {
  position: absolute; z-index: 3; font-size: 17px; color: #E8A317;
  opacity: 0; pointer-events: none;
}
.ki-gift-star.s1 { left: 6px;  top: 44px; }
.ki-gift-star.s2 { right: 2px; top: 30px; font-size: 21px; }
.ki-gift-star.s3 { right: 22px; top: 76px; font-size: 14px; }
.is-open .ki-gift-star { animation: ki-gift-star .9s ease-out both; }
.is-open .ki-gift-star.s2 { animation-delay: .08s; }
.is-open .ki-gift-star.s3 { animation-delay: .16s; }
@keyframes ki-gift-star {
  0%   { opacity: 0; transform: scale(.3); }
  40%  { opacity: 1; transform: scale(1.25); }
  100% { opacity: 0; transform: scale(1) translateY(-14px); }
}

.ki-gift-hint {
  margin: 10px 0 0; font-size: 13.5px; font-weight: 800; color: #7A6A3A;
}

/* ---- 開いたあと ---- */
.ki-omake-open { margin-top: 12px; }
.ki-omake .ki-say { margin-top: 0; }
.ki-omake .ki-say-face { display: none; }
.ki-omake .ki-say-bubble { background: #fff; }
.ki-omake .ki-say-bubble::before,
.ki-omake .ki-say-bubble::after { display: none; }
.ki-omake .voice-wave i { background: #D8C58A; }
.ki-omake .voice-wave i.is-on { background: var(--ki-line); }
/* 声を出さないVerで、再生バーの代わりに出す言葉。
 * 箱を開けた手ごたえになるので、大きく、ぽんと出す。 */
.ki-omake-word {
  margin: 6px 0 0; line-height: 1.2;
  font-size: clamp(34px, 11vw, 54px); font-weight: 900; color: var(--ki-line);
  animation: ki-word-pop .5s cubic-bezier(.18, 1.6, .5, 1) both;
}
@keyframes ki-word-pop {
  from { opacity: 0; transform: scale(.5) rotate(-8deg); }
  to   { opacity: 1; transform: none; }
}
.ki-omake-by {
  margin: 10px 0 0; text-align: right;
  font-size: 12.5px; font-weight: 700; color: #7A6A3A;
}

/* ---- 紙吹雪 ---- */
.ki-confetti {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
}
.ki-confetti i {
  position: absolute; top: -18px; display: block; border-radius: 1px;
  animation-name: ki-fall; animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}
@keyframes ki-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(420px) rotate(620deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ki-omake.is-in { animation: none; }
  .ki-omake-word { animation: none; }
  .ki-omake-spark { animation: none; }
  .ki-omake:not(.is-open) .ki-gift-art { animation: none; }
  .ki-gift-lid, .ki-gift-face { transition: none; }
  .is-open .ki-gift-star { animation: none; opacity: 0; }
}

/* ---------- トップページの写真 ----------
 * 写真は名前の入っていない1枚だけ。
 *   狭い画面 … 写真の下に、名前・リード文・「まずは〜」を順に置く
 *   広い画面 … 同じ文字を、写真の左のあいたところに重ねる */
/* 枠なしの帯。本文の幅からはみ出して、画面の端から端まで届かせる。 */
.ki-hero {
  position: relative; overflow: hidden; margin-bottom: 26px;
  width: 100vw; margin-inline: calc(50% - 50vw);
}
/* 狭い画面では縦長に切って、人が真ん中に来るようにする。
 * 人は写真の右寄りにいるので、右端をそろえると真ん中に見える。
 * この切り方なら「心」も「色」も欠けない。 */
.ki-hero-img {
  display: block; width: 100%; max-width: 100%; background: #EDEAE4;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: right center;
}
/* 帯なので、文字の下じきは敷かずに紙の色のまま続ける。
 * 左右のあきは、名前を大きく出すぶん狭くしてある。 */
.ki-hero-text {
  padding: 18px 10px 4px; text-align: center;
}
/* 古いページが残っていても見出しが露出しないように、この名前でも隠しておく */
.ki-only-read {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* 狭い画面では、名前は写真のすぐ下。ここがページの題になる。
 * ページの顔なので、1行に収まるぎりぎりまで大きくする。
 * 10文字を折り返さずに並べるので、これ以上は上げられない。 */
.ki-hero .ki-logo { text-align: center; font-size: clamp(27px, 9vw, 60px); }
.ki-hero-copy { margin-top: 14px; }
.ki-hero .ki-lead {
  margin: 0 auto; max-width: 24em;
  font-size: clamp(14.5px, 4.6vw, 18px); line-height: 1.8;
}
.ki-hero .ki-pick { margin: 12px 0 0; font-size: clamp(15px, 4.1vw, 17px); }

/* 横に余裕があるときだけ、写真の空いたところに文字を重ねる。
 * 名前は上の帯、リード文と「まずは〜」は左下のあき。
 * 人物にかからない範囲なので、下のほうの字は大きくできる。 */
@media (min-width: 761px) {
  /* 画面が広いと 16:9 では縦に伸びすぎるので、高さを止めて切り抜く。
   * 顔が真ん中より上に来るよう、見せる位置を上げている。 */
  .ki-hero-img { aspect-ratio: 16 / 9; max-height: 620px; object-position: 50% 28%; }
  .ki-hero-text {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: flex-start;
    /* 上下の % は幅を基準に計算されるので、見た目より小さく効く。
     * 下は 3% で、写真の下のふちのすぐ上に「まずは〜」が来る。 */
    padding: 5% 0 3% clamp(20px, 6vw, 110px);
    /* 壁がもともと白いので、うすくかけるだけで字は読める。
     * 濃くすると「心」の文字が消えてしまう。 */
    text-align: left; background: linear-gradient(96deg,
      rgba(255,251,242,.86) 0%, rgba(255,251,242,.66) 34%, rgba(255,251,242,0) 54%);
  }
  .ki-hero .ki-logo {
    position: static; width: auto; height: auto; margin: 0;
    overflow: visible; clip-path: none;
    text-align: left; font-size: clamp(28px, 5.6vw, 66px);
  }
  .ki-hero-copy { margin: auto 0 0; width: min(46%, 480px); }
  .ki-hero .ki-lead {
    margin: 0; max-width: none; text-align: left;
    font-size: clamp(17px, 2.1vw, 21px); line-height: 1.95;
  }
  .ki-hero .ki-pick {
    margin: 14px 0 0; text-align: left;
    font-size: clamp(15px, 1.9vw, 19px);
  }
}

/* ---------- トップページ ---------- */
.ki-index { max-width: 900px; margin: 0 auto; }
.ki-lead {
  text-align: center; font-size: 17px; font-weight: 700;
  margin: 0 auto 26px; max-width: 30em;
}
.ki-pick {
  text-align: center; margin: 0 0 20px;
  font-size: 15px; font-weight: 700; color: var(--ki-muted);
}

.ki-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.ki-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 22px 20px; text-decoration: none; color: var(--ki-ink);
  background: #fff; border: 3px solid var(--ki-line); border-radius: var(--ki-round);
  box-shadow: 6px 6px 0 rgba(43,43,43,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
/* 動きだけだと選べているか分かりにくいので、背景も変える。
 * 指で触る端末には hover が無いので、押している間（:active）も同じ色にする。 */
.ki-card:hover,
.ki-card:active,
.ki-card:focus-visible {
  background: #FFF3D8;
  transform: translate(-3px, -5px);
  box-shadow: 9px 11px 0 rgba(43,43,43,.14);
}
.ki-card:focus-visible { outline: 3px solid #0068B7; outline-offset: 3px; }

/* 気持ちのボタンは出さず、キャラクターの顔だけを見せる */
.ki-card-face {
  width: 84px; height: 84px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: #FFF6E2; border: 3px solid var(--ki-line); border-radius: 50%;
  overflow: hidden;
}
.ki-card-face .ki-face { width: 74%; height: 74%; display: block; }
.ki-card:hover .ki-card-face { transform: scale(1.06); }
.ki-card-face { transition: transform .15s ease; }

.ki-card h2 { margin: 0 0 10px; font-size: 25px; }
/* 説明文は薄いと読みにくいので、本文の色に近づけて少し大きくする */
.ki-card p { margin: 0; font-size: 17px; line-height: 1.85; color: #4F4A42; text-align: left; }

.ki-card-go {
  margin-top: auto; padding-top: 18px;
  font-size: 16px; font-weight: 800; color: var(--ki-ink);
}
.ki-card:hover .ki-card-go { text-decoration: underline; }

/* ---------- スマホ ----------
 * 縦積みになるので、イラストと結果の頭が1画面に収まるように詰める。
 * あとから打ち消されないように、ファイルの最後にまとめて置く。 */
@media (max-width: 760px) {
  .ki-header { padding-top: 12px; }
  .ki-nav { margin-bottom: 14px; }
  .ki-main { gap: 18px; margin-top: 18px; }
  .ki-bubble { margin-bottom: 14px; padding: 11px 18px; }
  .ki-character { max-width: 260px; }
  .ki-result { padding: 18px; }
}

/* ---------- キッズVerの折り返し ----------
 * ひらがなを分かち書きしているので、語の途中で改行させない。
 * こうすると「はなまる」のような塊が2行に割れず、空白の位置だけで折り返す。 */
body.ki-ver-kids .ki-howto-body,
body.ki-ver-kids .ki-message,
body.ki-ver-kids .ki-chip { word-break: keep-all; }