/* ============================================================
   chat2-ihin.css — 遺品整理LP（index / index_b / index_d）だけの見た目（2026-10-28）
   ★chat2.css（マンションLPと共用の本体）の「あと」に読み込む。マンション用の薄い青・紺の行をここで遺品の色に戻す★
   色＝LP-D と同じ：温かいアイボリー地・紺の文字・オレンジのアクセント・緑の「次へ」・オレンジの送信
   見本＝lp_project/チャット見本_遺品/遺品チャット見本.html（10/28 確定：①トラック ②ボタンA ③パネル ④完了画面 ⑧写真帯）
   ============================================================ */

/* ── 全体の地と吹き出し ── */
.c2-backdrop { background: rgba(40, 30, 15, 0.45); }
.c2-frame { background: rgba(251, 248, 242, 0.92); }
.c2.is-deep .c2-frame { background: #f7f3ea; }
.c2 .c2-bubble { background: #fff; border-color: #e3d9c6; color: #2b2b2b; box-shadow: 0 2px 6px rgba(80, 60, 20, 0.07); }
.c2 .c2-bubble strong, .c2 .c2-bubble b { color: #e0661a; }
.c2-card, .c2-memo { box-shadow: 0 2px 10px rgba(80, 60, 20, 0.08); }
.c2-input:focus, .c2-select:focus, .c2-input.is-active { box-shadow: 0 0 0 4px rgba(240, 135, 42, 0.18); }
.c2-spin { border-color: #f1e3cf; border-top-color: #e0661a; }

/* 「次へ」：緑のぷっくりボタン（LPのCTAと同じ緑） */
.c2 .c2-next:not(.c2-submit) {
  background: linear-gradient(180deg, #7fdc89 0%, #3cb84a 42%, #2a9a3a 100%);
  box-shadow: 0 5px 0 #1f7a2c, 0 8px 16px rgba(42, 154, 58, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.45);
  text-shadow: 0 1px 2px rgba(15, 70, 25, 0.45);
}
.c2 .c2-next:not(.c2-submit):not([disabled]):active { box-shadow: 0 1px 0 #1f7a2c, 0 2px 4px rgba(42, 154, 58, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.35); }
.c2 .c2-next:not(.c2-submit)[disabled] { background: #ddd6ca; box-shadow: 0 4px 0 #c4baa9; text-shadow: none; }

/* 数字パッド（温かいベージュ） */
.c2-kb { background: #efe8da; border-top-color: #e0d6c3; }
.c2-kb-top { border-bottom-color: #e6dccb; }
.c2-kb-grid button:not(.c2-kb-sub) { background: linear-gradient(180deg, #fff 0%, #fff 50%, #f7f2e8 100%); box-shadow: 0 4px 0 #cbbfa8, 0 5px 8px rgba(80, 60, 20, 0.12), inset 0 2px 0 #fff; }
.c2-kb-grid button:not(.c2-kb-sub):active { background: #f3e7d4; box-shadow: 0 1px 0 #cbbfa8, inset 0 2px 0 #fff; }
.c2-kb-chips button { background: linear-gradient(180deg, #fff 0%, #fff6ec 100%); box-shadow: 0 3px 0 #e8b98a, 0 4px 8px rgba(240, 135, 42, 0.15), inset 0 2px 0 #fff; }
.c2-kb-chips button:not([disabled]):active { box-shadow: 0 0 0 #e8b98a, inset 0 2px 0 #fff; }
.c2-kb-done { box-shadow: 0 3px 0 #1f7a2c, 0 4px 8px rgba(42, 154, 58, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.4); text-shadow: 0 1px 1px rgba(15, 70, 25, 0.3); }
.c2-kb-done:active { box-shadow: 0 0 0 #1f7a2c, inset 0 2px 0 rgba(255, 255, 255, 0.3); }

/* ── ② 建物の種類：横長ボタン2×2（オレンジの丸アイコン＋紺の文字・選ぶと薄いオレンジ） ── */
.c2 .c2-tiles { grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 2px; }
.c2 .c2-tile {
  flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px;
  min-height: 0; height: 54px; padding: 0 10px;
  border: 2px solid #e3d9c6; border-radius: 12px; background: #fff;
  color: #1f3a6e; font-size: 16px; font-weight: 800; box-shadow: 0 3px 0 #d9ceb8;
}
.c2 .c2-tile:hover { border-color: #f0872a; }
.c2 .c2-tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #d9ceb8; }
.c2 .c2-tile .c2-tile-icon { flex: none; width: 34px; height: 34px; margin: 0; border-radius: 50%; background: #f0872a; box-shadow: none; display: grid; place-items: center; }
.c2 .c2-tile .c2-tile-icon svg { width: 22px; height: 22px; fill: #fff; }
.c2 .c2-tile.is-on { border-color: #f0872a; background: #fff4e8; color: #1f3a6e; box-shadow: 0 3px 0 #e8b98a; transform: none; }
.c2 .c2-tile.is-on .c2-tile-icon { background: #f0872a; box-shadow: none; }
.c2 .c2-tile.is-on .c2-tile-icon svg { fill: #fff; }

/* ── ③ 住所のあとのパネル（クラッカー型）：オレンジの帯・紺のエリア名・赤字に黄色マーカー ── */
.c2 .c2-cr-head { background: #f0872a; }
.c2 .c2-cr-area, .c2 .c2-cr-area b { color: #1f3a6e; }
.c2 .c2-cr-area svg { fill: #e0661a; }
.c2-cr-note { margin: 6px 14px 0; font-size: 11px; line-height: 1.5; color: #6e675c; font-weight: 600; }

/* ── ⑧ 写真帯（hero.band・アイコン列なし）── */
.c2-fvband-photo { border-radius: 0; }

/* ── ① 一番上の行：トラックくん（config progress:"truck"）──
   アイボリー地にオレンジの線（LPの上の帯と同じ作り）。道は薄いベージュ＋白い破線 */
.c2-top--run { background: #fbf8f2; border-top: 3px solid #f0872a; border-bottom: 3px solid #f0872a; }
.c2-top--run .c2-remain { color: #1f3a6e; font-size: 14px; font-weight: 800; }
.c2-top--run .c2-remain b { color: #e0661a; font-size: 22px; margin: 0 2px; vertical-align: -2px; }
.c2-top--run .c2-remain em { color: #2a9a3a; font-style: normal; }
.c2-top--run .c2-close { background: #ece5d8; color: #6e675c !important; }
.c2-tk .c2-rroad .c2-rp { stroke: #d9d0c0; stroke-width: 14; }
.c2-tk .c2-tk-line { fill: none; stroke: #fff; stroke-width: 1.6; stroke-dasharray: 6 6; }
.c2-tk .c2-rtrail { fill: none; }
.c2-tk-tread { fill: none; stroke: #6e5a3e; stroke-width: 3; stroke-dasharray: 2.2 1.6; stroke-linecap: butt; opacity: 0.75; }
/* 家財・段ボールの山（停留所）：着くと積み込まれて薄くなり、緑のチェック */
.c2-tk .c2-run-cp.c2-tk-pile { width: 40px; height: 38px; margin: -36px 0 0 -20px; transition: opacity 0.4s; }
.c2-tk-pile svg { display: block; width: 100%; height: 100%; overflow: visible; transition: opacity 0.4s, transform 0.4s; }
.c2-tk-ok { position: absolute; left: 50%; top: -16px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #3cb84a; color: #fff; font-size: 12px; font-weight: 900; line-height: 18px; text-align: center; transform: scale(0); transition: transform 0.35s cubic-bezier(0.3, 1.7, 0.5, 1); }
.c2-tk-pile.is-on .c2-tk-ok { transform: scale(1); }
.c2-tk-pile.is-on svg { opacity: 0.35; transform: scale(0.85); transform-origin: 50% 100%; }
/* 信号：電話まで答えたら赤で止まる → 送信で青 */
.c2-tk-signal { position: absolute; left: 244px; top: 62px; width: 18px; height: 62px; z-index: 4; }
.c2-tk-signal svg { display: block; width: 100%; height: 100%; overflow: visible; }
.c2-tk-red { fill: #5a1d1d; } .c2-tk-green { fill: #1d4a28; }
.c2-top--run.is-red .c2-tk-red { fill: #ff3b30; filter: drop-shadow(0 0 4px #ff3b30); }
.c2-top--run.is-green .c2-tk-green { fill: #34e15a; filter: drop-shadow(0 0 4px #34e15a); }
/* お家（道の奥＝少し上に置いて、着いたトラックで隠れないように） */
.c2-tk-house { position: absolute; left: 290px; top: 42px; width: 66px; height: 62px; z-index: 1; }
.c2-tk-house svg { position: relative; display: block; width: 100%; height: 100%; overflow: visible; transition: filter 0.6s; }
.c2-tk-win { fill: #bfe3f7; transition: fill 0.5s; }
.c2-tk-kira { opacity: 0.5; }
/* トラックくん */
.c2-rr.c2-tk-truck { width: 58px; height: 40px; margin: -36px 0 0 -29px; }
.c2-top--run.is-moving .c2-tk-truck svg { animation: c2-tk-bump 0.25s ease-in-out infinite alternate; }
.c2-top--run.is-moving .c2-tk-wheel { animation: c2-tk-spin 0.4s linear infinite; }
.c2-tk-wheel { transform-box: fill-box; transform-origin: center; }
@keyframes c2-tk-bump { from { transform: translateY(0); } to { transform: translateY(-1.5px); } }
@keyframes c2-tk-spin { to { transform: rotate(360deg); } }
.c2-top--run.is-fin .c2-rr.c2-tk-truck { animation: c2-tk-hop 0.45s ease-in-out infinite alternate; }
.c2-top--run.is-fin .c2-rr.c2-tk-truck svg { transform: none; }
@keyframes c2-tk-hop { to { transform: translateY(-5px); } }

/* ── 到着をぴかぴかに：後光・回る光の筋・窓に明かり・金色のふち・キラキラ・光の粒・「到着！」が金色に光る ── */
.c2-tk .c2-run2-in::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 323px 76px, #fff1b3 0, #ffe9a0 40px, rgba(255, 233, 160, 0) 150px); opacity: 0; transition: opacity 0.9s; pointer-events: none; }
.c2-top--run.is-fin .c2-tk .c2-run2-in::before { opacity: 1; }
.c2-tk-halo, .c2-tk-rays { position: absolute; left: 50%; top: 52%; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.3); transition: opacity 0.6s, transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.c2-tk-halo { width: 130px; height: 130px; margin: -65px 0 0 -65px; background: radial-gradient(circle, #fffbe0 0, #ffe066 30%, rgba(255, 211, 77, 0.45) 50%, rgba(255, 211, 77, 0) 70%); }
.c2-tk-rays { width: 170px; height: 170px; margin: -85px 0 0 -85px; background: repeating-conic-gradient(rgba(255, 206, 60, 0.55) 0 9deg, rgba(255, 206, 60, 0) 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 25%, transparent 68%); mask: radial-gradient(circle, #000 25%, transparent 68%); }
.c2-top--run.is-fin .c2-tk-halo { opacity: 1; transform: scale(1); animation: c2-tk-halo 1.1s ease-in-out 0.6s infinite alternate; }
.c2-top--run.is-fin .c2-tk-rays { opacity: 1; transform: scale(1); animation: c2-tk-rays 9s linear infinite; }
@keyframes c2-tk-halo { to { transform: scale(1.12); } }
@keyframes c2-tk-rays { to { transform: rotate(360deg); } }
.c2-top--run.is-fin .c2-tk-house svg { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px #ffc93a); }
.c2-top--run.is-fin .c2-tk-win { fill: #ffe46b; }
.c2-top--run.is-fin .c2-tk-kira { animation: c2-tk-kira 0.8s ease-in-out infinite alternate; }
@keyframes c2-tk-kira { from { opacity: 0.3; } to { opacity: 1; } }
.c2-tk-sp { position: absolute; z-index: 6; pointer-events: none; transform: scale(0); animation: c2-tk-tw 1.3s ease-in-out infinite; }
.c2-tk-sp svg { display: block; width: 100%; height: 100%; fill: #ffd23f; filter: drop-shadow(0 0 3px #fff6c0); }
.c2-tk-sp.is-w svg { fill: #fff; filter: drop-shadow(0 0 3px #ffd23f); }
@keyframes c2-tk-tw { 0%, 100% { transform: scale(0) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(0.6) rotate(70deg); opacity: 0.8; } }
.c2-tk-gl { position: absolute; z-index: 6; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none; animation: c2-tk-gl 0.9s cubic-bezier(0.2, 0.7, 0.4, 1) forwards; }
@keyframes c2-tk-gl { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; } }
.c2-top--run.is-fin .c2-remain em { background: linear-gradient(100deg, #c98a00 20%, #fff3a0 45%, #c98a00 70%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: c2-tk-shine 1.6s linear infinite; font-size: 18px; }
@keyframes c2-tk-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .c2-top--run.is-moving .c2-tk-truck svg, .c2-top--run.is-moving .c2-tk-wheel, .c2-top--run.is-fin .c2-rr.c2-tk-truck,
  .c2-tk-rays, .c2-tk-halo, .c2-tk-sp, .c2-tk-gl, .c2-top--run.is-fin .c2-remain em { animation: none !important; }
}

/* ── ④ 送信後の完了画面（LP の中に全画面で出す・alert の代わり）── */
.v2-ty { position: fixed; inset: 0; z-index: 2147483000; overflow-y: auto; background: #f7f3ea; font-family: inherit; color: #2b2b2b; -webkit-overflow-scrolling: touch; }
.v2-ty[hidden] { display: none; }
.v2-ty-in { max-width: 480px; margin: 0 auto; padding: 0 0 28px; }
.v2-ty-top { padding: 34px 16px 20px; background: #fff; text-align: center; border-bottom: 1px solid #e3d9c6; }
.v2-ty-chk { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: #3cb84a; box-shadow: 0 0 0 8px rgba(60, 184, 74, 0.18); display: grid; place-items: center; animation: v2-ty-pop 0.5s cubic-bezier(0.3, 1.7, 0.5, 1) both; }
.v2-ty-chk svg { width: 36px; height: 36px; fill: #fff; }
@keyframes v2-ty-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
.v2-ty h2 { margin: 0; font-size: 22px; font-weight: 900; line-height: 1.45; color: #1f3a6e; }
.v2-ty-ld { margin: 10px 0 0; font-size: 15px; font-weight: 700; line-height: 1.7; }
.v2-ty-tl { margin: 16px 14px 0; padding: 14px 14px 4px; border-radius: 12px; background: #fff; box-shadow: 0 2px 10px rgba(80, 60, 20, 0.08); }
.v2-ty-tl h3 { margin: 0 0 12px; font-size: 15px; color: #1f3a6e; }
.v2-ty-tr { position: relative; display: flex; gap: 10px; padding: 0 0 16px; font-size: 14.5px; line-height: 1.45; }
.v2-ty-tr::before { content: ""; position: absolute; left: 16px; top: 32px; bottom: 0; width: 2px; background: #e3d9c6; }
.v2-ty-tr:last-child::before { display: none; }
.v2-ty-dot { flex: none; position: relative; z-index: 1; width: 34px; height: 34px; border-radius: 50%; background: #fff4e8; box-shadow: 0 0 0 2px #f0872a; display: grid; place-items: center; }
.v2-ty-dot svg { width: 18px; height: 18px; fill: #e0661a; }
.v2-ty-tr.is-done .v2-ty-dot { background: #3cb84a; box-shadow: 0 0 0 2px #3cb84a; }
.v2-ty-tr.is-done .v2-ty-dot svg { fill: #fff; }
.v2-ty-tr b { display: block; font-weight: 900; }
.v2-ty-tr small { display: block; color: #6e675c; font-weight: 600; font-size: 12.5px; }
.v2-ty-tr.is-done small { color: #2a9a3a; font-weight: 800; }
.v2-ty-co { margin: 12px 14px 0; font-size: 11px; color: #6e675c; text-align: center; }
.v2-ty-close { display: block; margin: 14px auto 0; padding: 11px 30px; border-radius: 999px; background: #fff; border: 1.5px solid #d6cfc2; font: inherit; font-size: 14px; font-weight: 700; color: #6e675c; cursor: pointer; }

/* 10/28 横を画面いっぱいに（座標を横1.25倍）＝信号・お家・到着の光の位置も合わせる */
.c2-tk-signal { left: 307px; }
.c2-tk-house { left: 371px; }
.c2-tk .c2-run2-in::before { background: radial-gradient(circle at var(--c2-hx, 404px) 76px, #fff1b3 0, #ffe9a0 40px, rgba(255, 233, 160, 0) 150px); }