/* ---- テーマ（2026-09-24）---- ブラック（標準。アイコンの黒に合わせた）／ピンク（前の見た目。端末の明るい・暗いに合わせる）／ホワイト。 。選んだものは端末に覚え、index.html の頭で先に当てる（開いた瞬間に別の色が見えない）。 ⚠ 色は名前で書かず、ここの変数を使う。アクセント色の上に置く文字は --on-accent（ブラックは白いボタンに黒い文字になる） */ :root, :root[data-theme="black"] { /* 09-28 Yuji「ダークモードは白の要素が多い・zeta は青っぽい紫のボタン」→ 強調色を白から紫へ（zeta #6728ff より少し明るく） */ --accent: #7045ff; --accent-2: #8e6bff; --accent-soft: #231b3a; --on-accent: #ffffff; --accent-glow: rgba(112, 69, 255, 0.35); --accent-text: #b8a4ff; /* 文字に使う薄い紫（値段など・09-28 Yuji「同じ色だとギラギラ・zeta のように薄い紫に」）。強い紫はボタンの地だけ */ /* 09-28 Yuji「真っ黒すぎる・zeta はもう少し薄い」→ zeta（地 #151516・カード #212122）に合わせて一段明るく */ --bg: #161518; --bg-2: #252428; --card: #212024; --ink: #f3f1f5; --muted: #9d99a3; --line: #323036; --bubble-ai: #2a292e; --ok: #2fae5b; --danger: #e5484d; --radius: 18px; --shadow: 0 6px 24px rgba(0, 0, 0, 0.4); --grad: linear-gradient(135deg, #7c52ff 0%, #5b2cf0 100%); --cover: linear-gradient(160deg, #36323c 0%, #141217 100%); --avatar-bg: linear-gradient(135deg, #3b3742, #1e1c22); --glass: rgba(33, 32, 36, 0.68); --glass-strong: rgba(33, 32, 36, 0.86); --glass-line: rgba(255, 255, 255, 0.08); --stage-1: #1b1a1e; --stage-2: #1f1e23; --stage-3: #19181c; --blob-1: #3b2f3e; --blob-2: #2b2a3f; --blob-3: #3a322c; --blob-op: .45; --head-bg: var(--glass); --head-btn: rgba(0, 0, 0, .28); --head-btn-ink: #fff; color-scheme: dark; } :root[data-theme="white"] { --accent: #111014; --accent-2: #3a383f; --accent-soft: #efeef1; --on-accent: #ffffff; --accent-glow: rgba(0, 0, 0, 0.18); --bg: #ffffff; --bg-2: #f5f5f7; --card: #ffffff; --ink: #151417; --muted: #85828a; --line: #ebeaee; --bubble-ai: #f2f2f4; --shadow: 0 6px 24px rgba(0, 0, 0, 0.08); --grad: linear-gradient(135deg, #34313a 0%, #0f0e11 100%); --cover: linear-gradient(160deg, #3a3740 0%, #111014 100%); --avatar-bg: linear-gradient(135deg, #3a3740, #111014); --glass: rgba(255, 255, 255, 0.72); --glass-strong: rgba(255, 255, 255, 0.88); --glass-line: rgba(0, 0, 0, 0.06); --stage-1: #fafafb; --stage-2: #f1f1f4; --stage-3: #f7f6f5; --blob-1: #e6e5ec; --blob-2: #dedde8; --blob-3: #eeebe6; --blob-op: .7; --head-bg: #ffffff; --head-btn: #f2f2f4; --head-btn-ink: #151417; /* ⚠ 2026-09-26 Yuji「トークの上の帯がネズミ色。普通に白で」（すりガラスが壁紙の色を拾っていた） */ color-scheme: light; } :root[data-theme="pink"] { /* ⚠ 2026-09-26 Yuji「ピンクは女性が使う。背景は白系・ピンク寄りに」。端末が暗い設定でも暗くしない（前は暗い設定だと全体が黒く、文字だけピンクになった） */ --accent: #e85a8a; --accent-2: #ff9ec4; --accent-soft: #fde1ec; --on-accent: #ffffff; --accent-glow: rgba(232, 90, 138, 0.3); --bg: #fff6f9; --bg-2: #fdecf2; --card: #ffffff; --ink: #2a1d25; --muted: #93798a; --line: #f7d9e5; --bubble-ai: #ffffff; --shadow: 0 6px 24px rgba(232, 90, 138, 0.12); --grad: linear-gradient(135deg, #ff8fb8 0%, #e85a8a 48%, #a07cff 100%); --cover: linear-gradient(135deg, #ff8fb8 0%, #e85a8a 48%, #a07cff 100%); --avatar-bg: linear-gradient(135deg, #ff9ec4, #e85a8a); --glass: rgba(255, 246, 249, 0.8); --glass-strong: rgba(255, 246, 249, 0.92); --glass-line: rgba(232, 90, 138, 0.12); --head-bg: #fff6f9; --head-btn: #fde1ec; --head-btn-ink: #e85a8a; --stage-1: #ffe3ee; --stage-2: #fdeaf3; --stage-3: #fff1f5; --blob-1: #ffb3cf; --blob-2: #ffc9dc; --blob-3: #ffd9e6; --blob-op: .7; color-scheme: light; } /* 英数字だけ端末の Roboto を使う（Xperia は日本語のとき英数字まで等幅の UD ゴシックになるため）。 端末に無ければこの指定は飛ばされ、下の字体へ落ちる。ダウンロードはしない */ @font-face { font-family: "HinataLatin"; src: local("Roboto"), local("Roboto-Regular"), local("RobotoStatic-Regular"); font-weight: 100 600; unicode-range: U+0000-024F, U+2000-206F, U+20A9, U+20AC, U+2122; } @font-face { font-family: "HinataLatin"; src: local("Roboto Bold"), local("Roboto-Bold"), local("Roboto"), local("Roboto-Regular"); font-weight: 700 900; unicode-range: U+0000-024F, U+2000-206F, U+20A9, U+20AC, U+2122; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { /* 英数字は Roboto（Android）/ システム字体（iPhone）。日本語・韓国語はそれぞれの字体へ落ちる（html の lang で選ばれる） */ font-family: -apple-system, BlinkMacSystemFont, "HinataLatin", Roboto, "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } button { font: inherit; color: inherit; cursor: pointer; } input, textarea, select { font: inherit; } #app { max-width: 600px; margin: 0 auto; height: 100dvh; display: flex; flex-direction: column; background: var(--bg); } .screen { flex: 1; min-height: 0; display: flex; flex-direction: column; } .scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* 一番下までスクロールしたとき、最後のカードが下のタブにくっつかないように（2026-09-26 Yuji・ひなた／あなたのタブ）。トークは入力欄があるので除く */ .screen:not(.talk) > .scroll::after { content: ""; display: block; height: 32px; } .muted { color: var(--muted); } .small { font-size: 13px; line-height: 1.6; } .icon { width: 22px; height: 22px; display: block; flex: none; } /* iPhone の Safari はボタンに既定の余白を付け、丸いボタンの中のアイコンが押しつぶされる */ .call-btn, .send, .attach { padding: 0; } /* ---- 顔 ---- */ .avatar { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--avatar-bg); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; box-shadow: var(--shadow); } .avatar.online::after { content: ""; position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--bg); } /* 深夜（0〜4時）は緑の丸の代わりに月（おやすみ中） */ .avatar.asleep::after { content: "🌙"; position: absolute; right: -3px; bottom: -3px; font-size: 13px; line-height: 1; } .avatar.big { width: 112px; height: 112px; font-size: 44px; } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* ---- トーク ---- */ .talk-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--bg); } .talk-head .name { font-weight: 700; font-size: 17px; } .talk-head .sub { font-size: 12px; color: var(--muted); margin-top: 1px; } .call-btn { margin-left: auto; width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); transition: transform .12s; } .call-btn:active { transform: scale(.94); } .call-btn:disabled { opacity: .5; } .call-btn.live { background: #d93a3a; color: #fff; } .log { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 8px; } /* 話す人が替わるところは、さらにあける（2026-09-26 Yuji「吹き出しがかなり詰まっている」）。同じ人が続くときは 8px */ .log .row.ai + .row.user, .log .row.user + .row.ai { margin-top: 10px; } .log .row.ai + .row.ai { margin-top: 6px; } /* ひなたの吹き出しが続くときは 14px（09-27 Yuji「上下の間隔が狭い」） */ .log .older-loading { align-self: center; margin: 4px 0 10px; } /* 前のメッセージを読んでいる印（上までスクロールしたら自動で読む） */ .day { align-self: center; font-size: 11px; color: var(--muted); background: var(--bg-2); padding: 3px 10px; border-radius: 99px; margin: 12px 0 6px; } .row { display: flex; align-items: flex-end; gap: 8px; } .row.user { justify-content: flex-end; } .row .avatar { width: 36px; height: 36px; font-size: 14px; box-shadow: none; } /* 28→36px（09-27 Yuji「アイコンが小さすぎる」） */ .row .avatar.hidden { visibility: hidden; } .bubble { max-width: 76%; padding: 9px 13px; border-radius: 18px; line-height: 1.55; font-size: 15px; white-space: pre-wrap; word-break: break-word; animation: pop .18s ease-out; } .row.ai .bubble { background: var(--bubble-ai); border-bottom-left-radius: 6px; } .row.user .bubble { background: var(--grad); color: var(--on-accent); border-bottom-right-radius: 6px; } .bubble .via { display: flex; align-items: center; gap: 4px; font-size: 11px; opacity: .75; margin-bottom: 2px; } .bubble .via svg { width: 12px; height: 12px; } .time { font-size: 10px; color: var(--muted); margin: 0 2px 2px; flex: none; } @keyframes pop { from { transform: translateY(4px); opacity: 0; } to { transform: none; opacity: 1; } } .typing .bubble { display: flex; gap: 4px; padding: 13px 14px; } .typing .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; } .typing .dot:nth-child(2) { animation-delay: .2s; } .typing .dot:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } .hint { align-self: center; margin: 10px 0; border: none; background: var(--accent-soft); color: var(--accent-text); font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 99px; text-decoration: none; } .composer { display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg); } .composer textarea { flex: 1; resize: none; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 15px; line-height: 1.4; max-height: 120px; outline: none; } .composer textarea:focus { border-color: var(--accent-2); } .send { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; transition: opacity .15s; } .send:disabled { opacity: .35; } /* ---- プロフィール ---- */ .hero { display: flex; flex-direction: column; align-items: center; padding: 36px 20px 20px; padding-top: calc(36px + env(safe-area-inset-top)); background: linear-gradient(180deg, var(--accent-soft), var(--bg)); } .hero h2 { margin: 14px 0 6px; font-size: 24px; } .badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--accent-text); background: var(--bg); border: 1px solid var(--accent-2); padding: 2px 10px; border-radius: 99px; } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .chip { background: var(--card); border: 1px solid var(--line); border-radius: 99px; padding: 6px 12px; font-size: 13px; } .chip b { color: var(--accent-text); } .hearts { letter-spacing: 1px; color: var(--accent-text); } .section { padding: 8px 16px 4px; } .section h3 { font-size: 13px; color: var(--muted); font-weight: 600; margin: 18px 4px 8px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; } .card p { margin: 0; line-height: 1.7; font-size: 14px; } .card + .card { margin-top: 10px; } .note { display: flex; gap: 10px; align-items: flex-start; } .note svg { flex: none; color: var(--accent-text); margin-top: 2px; } /* ---- 設定 ---- */ .settings-title { padding: 16px 16px 0; padding-top: calc(16px + env(safe-area-inset-top)); font-size: 22px; margin: 0; } .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .plan { border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 6px; background: var(--card); display: flex; flex-direction: column; align-items: center; gap: 4px; transition: border-color .15s, transform .12s; } .plan:active { transform: scale(.97); } .plan .pname { font-size: 13px; font-weight: 700; } .plan .price { color: var(--accent-text); font-weight: 800; font-size: 16px; } .plan .per { font-size: 11px; color: var(--muted); } .plan .tag { font-size: 11px; color: var(--muted); text-align: center; } .plan.current { border-color: var(--accent); background: var(--accent-soft); } .current-plan { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; } .item + .item { border-top: 1px solid var(--line); } .item .label { font-size: 15px; } .item .desc { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; } .item select { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 10px; padding: 6px 8px; font: inherit; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-weight: 600; } .google-btn .icon { width: 20px; height: 20px; } .google-btn:disabled { opacity: .6; } .link-btn { flex: none; border: none; background: none; color: var(--accent-text); font-weight: 600; padding: 6px 2px; } button.item { width: 100%; border: none; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; } .item.danger .label { color: var(--danger); } .switch { position: relative; flex: none; width: 50px; height: 30px; } .switch input { opacity: 0; width: 0; height: 0; } .switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 99px; transition: background .2s; } .switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; } .switch input:checked + .track { background: var(--accent); } .switch input:checked + .track::after { transform: translateX(20px); background: var(--on-accent); } .switch input:disabled + .track { opacity: .5; } .invite { display: flex; gap: 8px; } .invite input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 15px; outline: none; } .invite button { border: none; background: var(--accent); color: var(--on-accent); border-radius: 12px; padding: 0 16px; font-weight: 600; } .msg { margin: 8px 2px 0; min-height: 1em; } .version { text-align: center; padding: 20px 0 28px; } /* ---- タブ ---- */ .tabbar { display: flex; border-top: 1px solid var(--line); background: var(--bg); padding-bottom: env(safe-area-inset-bottom); } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 9px; color: var(--muted); text-decoration: none; font-size: 11px; } .tabbar a.on { color: var(--accent-text); font-weight: 700; } .tabbar a span { max-width: 100%; padding: 0 4px; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 相手の名前（12字まで）が長くてもはみ出さない */ /* ---- はじめての案内 ---- */ .onboard { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 28px; text-align: center; animation: fade .25s; } .onboard h1 { font-size: 24px; margin: 22px 0 10px; } .onboard p { color: var(--muted); line-height: 1.8; margin: 0; font-size: 15px; white-space: pre-line; } .onboard .points { text-align: left; margin: 18px auto 0; max-width: 320px; display: flex; flex-direction: column; gap: 10px; } .onboard .points div { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; } .onboard .points svg { flex: none; color: var(--accent-text); margin-top: 2px; } .onboard .next { margin-top: 32px; width: 100%; max-width: 320px; border: none; border-radius: 99px; padding: 15px; background: var(--grad); color: var(--on-accent); font-weight: 700; font-size: 16px; box-shadow: var(--shadow); } .onboard .dots { display: flex; gap: 6px; margin-top: 20px; } .onboard .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); transition: width .2s; } .onboard .dots i.on { background: var(--accent); width: 18px; border-radius: 99px; } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } .onboard.instant { animation: none; } /* 起動のときの案内はすぐ出す（下の画面が透けないように） */ /* 確認のシート（データを消す） */ .sheet-backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(20, 12, 18, .45); display: flex; align-items: flex-end; justify-content: center; padding: 16px; animation: fade .15s ease-out; } .sheet { width: 100%; max-width: 440px; background: var(--card); color: var(--ink); border-radius: 22px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 10px 40px rgba(0,0,0,.25); } .sheet h2 { margin: 0 0 8px; font-size: 19px; } .sheet p { margin: 0 0 8px; line-height: 1.7; font-size: 14px; color: var(--muted); } .sheet p.warn { color: var(--danger); } .sheet-actions { display: flex; gap: 10px; margin-top: 14px; } /* 権利表記（設定の「このアプリについて」から開く） */ .sheet.credits { max-height: 80dvh; overflow-y: auto; } .sheet.credits h3 { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); } .sheet.credits ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; } .sheet-actions button { flex: 1; border-radius: 14px; padding: 13px; font-weight: 600; border: 1px solid var(--line); } .sheet-actions .ghost { background: var(--bg-2); } .sheet-actions .danger-btn { background: var(--danger); border-color: var(--danger); color: #fff; } .sheet-actions button:disabled { opacity: .5; } .sheet .msg:empty { display: none; } /* 設定: 寝ている時間・サブスクの管理 */ .quiet { display: flex; align-items: center; gap: 6px; flex: none; } .quiet select { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 10px; padding: 6px 8px; font: inherit; } .manage { display: inline-block; margin: 10px 2px 0; color: var(--accent-text); font-weight: 600; font-size: 14px; text-decoration: none; } /* プロフィール: 覚えていること */ .memory { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 0; transition: opacity .2s; } .memory + .memory { border-top: 1px solid var(--line); } .memory .mtext { font-size: 14px; line-height: 1.6; } .memory .mdate { font-size: 12px; color: var(--muted); margin-top: 2px; } .memory .forget { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-size: 16px; line-height: 1; } .memory.leaving { opacity: .4; } .typing-inline { display: flex; gap: 4px; padding: 8px 0; } .typing-inline .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: blink 1.2s infinite; } .typing-inline .dot:nth-child(2) { animation-delay: .2s; } .typing-inline .dot:nth-child(3) { animation-delay: .4s; } .onboard .ob-name { margin-top: 18px; width: 100%; max-width: 320px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 14px; padding: 13px 14px; font: inherit; font-size: 16px; text-align: center; } /* 写真を送る */ .attach { flex: none; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--bg-2); color: var(--muted); display: flex; align-items: center; justify-content: center; } .attach .icon { width: 22px; height: 22px; } .pending { display: flex; align-items: flex-start; gap: 6px; padding: 8px 16px 0; } .pending[hidden] { display: none; } .pending img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } .pending button { border: none; background: var(--bg-2); color: var(--muted); width: 26px; height: 26px; border-radius: 50%; font-size: 15px; line-height: 1; } .row.user .stack { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; max-width: 78%; } .row.user .stack .bubble { max-width: 100%; } img.photo { display: block; max-width: 220px; max-height: 260px; min-width: 80px; min-height: 60px; border-radius: 16px; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line); } /* 覚えていること: 書き足す・固定・直す */ .mem-add { margin: 4px 0 2px; } .memory .mbody { flex: 1; min-width: 0; } .memory .mbtns { display: flex; gap: 6px; flex: none; } .memory .mbtns button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); display: flex; align-items: center; justify-content: center; padding: 0; font-size: 16px; line-height: 1; } .memory .mbtns .icon { width: 15px; height: 15px; } .memory .pin[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .memory.pinned .mtext { font-weight: 600; } .pin-label { display: inline-block; font-size: 11px; color: var(--accent-text); border: 1px solid var(--accent); border-radius: 99px; padding: 0 6px; margin-right: 6px; } .mem-edit { margin: 0; } /* ひなたの日記 */ .diary { padding: 10px 0; } .diary + .diary { border-top: 1px solid var(--line); } .diary .ddate { font-size: 12px; color: var(--accent-text); font-weight: 600; margin-bottom: 4px; } .diary .dtext { font-size: 14px; line-height: 1.8; white-space: pre-wrap; } /* 場面 */ .scene-bar { padding: 6px 16px 0; display: flex; gap: 8px; } .scene-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); border-radius: 99px; padding: 4px 12px 4px 8px; font-size: 12.5px; } .scene-chip .icon { width: 14px; height: 14px; color: var(--accent-text); } .scene-chip.on { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); } .scene-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; } .scene-list button { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 14px; padding: 12px 10px; font-size: 14px; } .scene-list button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; } /* ================================================================ 2026-09-24 デザインの作り直し（競合の Replika・SynClub・Bloomi・Cotomo を参考） - トーク: 背景いっぱいにひなた（絵が決まるまでは淡いグラデーション）。見出し・吹き出し・入力欄はすりガラス - プロフィール: 大きな表紙と、仲良し度の進み具合 - タブ: すりガラスで、選んでいるものを丸く目立たせる ================================================================ */ :root { --violet: #9b7bff; } /* トーク: 舞台（背景） */ .talk { position: relative; overflow: hidden; } .talk .stage { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(160deg, var(--stage-1), var(--stage-2) 60%, var(--stage-3)); } .talk .stage i { position: absolute; border-radius: 50%; filter: blur(40px); opacity: var(--blob-op); } .talk .stage i:nth-child(1) { width: 60vw; height: 60vw; max-width: 380px; max-height: 380px; background: var(--blob-1); top: -10%; left: -15%; } .talk .stage i:nth-child(2) { width: 50vw; height: 50vw; max-width: 320px; max-height: 320px; background: var(--blob-2); top: 30%; right: -20%; } .talk .stage i:nth-child(3) { width: 45vw; height: 45vw; max-width: 280px; max-height: 280px; background: var(--blob-3); bottom: -10%; left: 10%; } /* ⚠ 壁紙は描けてから（.ready）膜ごとふわっと出す。先に膜だけ出ると、読み込みの間だけ灰色の画面に見えた（2026-09-26 Yuji） */ .talk.has-art .stage img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: 0; transition: opacity .25s ease; } .talk.has-art .stage.ready img { opacity: 1; } .talk.has-art .stage:not(.ready)::after { opacity: 0; } .talk.has-art .stage::after { transition: opacity .25s ease; content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 12, 24, .10) 0%, rgba(20, 12, 24, .05) 35%, rgba(20, 12, 24, .55) 100%); } .talk > :not(.stage) { position: relative; z-index: 1; } .talk .scroll { background: transparent; } .talk-head.glass { background: var(--head-bg); border-bottom: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } .talk-head .avatar { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--card), 0 4px 14px var(--accent-glow); } .call-btn { background: var(--grad); box-shadow: 0 6px 18px var(--accent-glow); } .talk .day { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .talk .row.ai .bubble { background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 10px rgba(60, 20, 50, .06); } .talk .row.user .bubble { background: var(--grad); box-shadow: 0 4px 14px var(--accent-glow); } .talk.has-art .time { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0,0,0,.4); } /* 話しかけの候補 */ .suggest { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px 0; scrollbar-width: none; } .suggest::-webkit-scrollbar { display: none; } .suggest[hidden], .suggest:empty { display: none; } .suggest .sg { flex: none; border: 1px solid var(--glass-line); background: var(--glass); color: var(--ink); border-radius: 99px; padding: 7px 14px; font-size: 13px; white-space: nowrap; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 2px 8px rgba(60, 20, 50, .06); } .suggest .sg:active { transform: scale(.97); } /* 場面のボタン・写真のプレビューもすりガラスに */ .talk .scene-chip { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .talk .scene-chip.on { background: var(--glass-strong); } /* 入力欄: すりガラスの丸い帯の中に 写真・文字・送信 */ .composer { border-top: none; background: transparent; padding: 8px 12px calc(8px); } .composer .pill { flex: 1; display: flex; align-items: flex-end; gap: 6px; padding: 5px; border-radius: 26px; background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 6px 20px rgba(60, 20, 50, .10); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } .composer textarea { border: none; background: transparent; padding: 9px 4px; } .composer textarea:focus { border: none; } .composer .attach { width: 38px; height: 38px; background: transparent; } .composer .send { width: 38px; height: 38px; background: var(--grad); } /* タブ: すりガラス・選んでいるものを丸く */ .tabbar { background: var(--glass-strong); border-top: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); } .tabbar a { position: relative; } .tabbar a .icon { padding: 3px 16px; box-sizing: content-box; border-radius: 99px; transition: background .2s; } .tabbar a.on .icon { background: var(--accent-soft); } /* ひなたのタブの印: 読める章・番外編がまだ読まれていない（app.js storyNew） */ .tabbar a.has-new::after { content: ''; position: absolute; top: 8px; left: calc(50% + 10px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--bg); } /* プロフィール: 表紙 */ .cover { position: relative; height: 300px; margin: 0 0 -28px; overflow: hidden; border-radius: 0 0 28px 28px; background: var(--cover); display: flex; align-items: center; justify-content: center; } .cover.has-art { height: 420px; } .cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } /* 上を切らない（PC の幅だと頭のてっぺんが切れていた・09-28 Yuji） */ .cover img.mouth { opacity: 0; pointer-events: none; } .cover img.mouth.on { opacity: 1; } .cover.tappable { cursor: pointer; -webkit-tap-highlight-color: transparent; } .tap-line { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2; max-width: 86%; padding: 8px 14px; border-radius: 16px; background: rgba(255,255,255,.92); color: #222; font-size: 14px; line-height: 1.5; box-shadow: 0 4px 14px rgba(0,0,0,.2); } .cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(20,10,24,.55) 100%); } .cover-initial { font-size: 96px; font-weight: 700; color: rgba(255,255,255,.9); margin-top: -20px; } .cover-text { position: absolute; left: 20px; right: 20px; bottom: 40px; z-index: 1; color: #fff; } .cover-text h2 { margin: 0 0 6px; font-size: 30px; display: flex; align-items: center; gap: 8px; text-shadow: 0 2px 8px rgba(0,0,0,.3); } .cover-text .badge { background: rgba(255,255,255,.22); color: #fff; border-color: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .online-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 2px #fff; } .asleep-dot::before { content: "🌙"; font-size: 14px; } /* 仲良し度の進み具合 */ .bond { position: relative; z-index: 2; box-shadow: 0 10px 30px rgba(60, 20, 50, .12); } .bond-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; margin-bottom: 8px; } .bond-top b { color: var(--accent-text); font-size: 16px; } .bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; margin-bottom: 6px; } .bar i { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .4s; } .bond .chips { justify-content: flex-start; margin-top: 10px; } /* カードを少し浮かせる・見出しを落ち着かせる */ .card { box-shadow: 0 2px 12px rgba(60, 20, 50, .04); } .section h3 { letter-spacing: .02em; } /* はじめての案内: 背景を淡いグラデーションに */ .onboard { background: linear-gradient(160deg, var(--stage-1), var(--stage-2) 60%, var(--stage-3)); } .onboard .next { background: var(--grad); } /* はじめの案内の「すでに使っていた方は Google でログイン」 */ .onboard .relogin { margin-top: 22px; background: none; border: 0; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .onboard .relogin:disabled { opacity: .5; } .onboard .relogin-msg { min-height: 20px; font-size: 13px; color: var(--muted); margin-top: 4px; } /* Web の通話画面（アプリの通話画面と同じ作り）。⚠ どのテーマでも暗い地（キャラクターの絵を引き立てる・競合も同じ） */ .call-screen { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; color: #fff; overflow: hidden; background: linear-gradient(180deg, #2e2934, #0f0e11); padding: calc(env(safe-area-inset-top) + 24px) 24px calc(env(safe-area-inset-bottom) + 40px); } .call-screen .cs-art { position: absolute; inset: 0; background-size: cover; background-position: center 18%; } /* 話す動画（looks/talk/）。読み込めたら静止画の上に重なる。話しているあいだだけ再生（app.js の showCallScreen） */ .call-screen .cs-talk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; pointer-events: none; opacity: 0; transition: opacity .08s linear; } .call-screen.mouth .cs-talk { opacity: 1; } /* 声が出ているあいだだけ（息つぎ・文の切れ目は下の口を閉じた絵） */ .call-screen .cs-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 48%, rgba(24,12,22,.7) 76%, rgba(24,12,22,.92) 100%); } .call-screen .cs-body { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .call-screen.has-art .cs-body { justify-content: flex-end; padding-bottom: 36px; } .cs-orb { position: relative; width: 148px; height: 148px; margin-bottom: 20px; } .cs-orb .avatar { position: relative; width: 148px; height: 148px; font-size: 56px; background: rgba(255,255,255,.3); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.5); } .cs-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.28); opacity: 0; } .call-screen.speaking .cs-ring { animation: csPulse 1.1s ease-out infinite; } @keyframes csPulse { from { transform: scale(1); opacity: 1; } to { transform: scale(1.4); opacity: 0; } } .cs-name { font-size: 30px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 12px rgba(0,0,0,.2); } .cs-status { margin-top: 6px; font-size: 15px; opacity: .92; font-variant-numeric: tabular-nums; white-space: pre; } .cs-wave { display: flex; gap: 4px; height: 24px; align-items: center; margin-top: 14px; opacity: 0; transition: opacity .2s; } .call-screen.speaking .cs-wave { opacity: 1; } .cs-wave i { width: 4px; height: 6px; border-radius: 2px; background: #fff; animation: csWave .9s ease-in-out infinite; } .cs-wave i:nth-child(2) { animation-delay: .12s; } .cs-wave i:nth-child(3) { animation-delay: .24s; } .cs-wave i:nth-child(4) { animation-delay: .36s; } .cs-wave i:nth-child(5) { animation-delay: .48s; } @keyframes csWave { 0%, 100% { height: 6px; } 50% { height: 22px; } } .cs-controls { position: relative; display: flex; justify-content: center; gap: 64px; } .cs-btn { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; opacity: .95; } .cs-btn button { width: 68px; height: 68px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .cs-btn button .icon { width: 28px; height: 28px; } .cs-btn button.on { background: #fff; color: #111014; } .cs-btn button.end { width: 76px; height: 76px; background: #e5484d; } .cs-btn button:disabled { opacity: .5; cursor: default; } /* 音声通話（男性アプリの音声通話と同じ作り・2026-09-26）: ぼかした絵・上に時間・呼び出し中は波紋と点滅 */ .call-screen .cs-blur { position: absolute; inset: -40px; background-size: cover; background-position: center 20%; filter: blur(28px) saturate(1.1); transform: scale(1.1); } .call-screen .cs-dim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,14,.45), rgba(10,8,14,.7)); } .call-screen .cs-top { position: relative; text-align: center; font-size: 17px; font-weight: 600; min-height: 24px; letter-spacing: .04em; font-variant-numeric: tabular-nums; text-shadow: 0 1px 8px rgba(0,0,0,.3); } .cs-ripple { position: absolute; inset: 0; pointer-events: none; } .cs-ripple i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); opacity: 0; } .call-screen.ringing .cs-ripple i { animation: csRipple 2.4s ease-out infinite; } .call-screen.ringing .cs-ripple i:nth-child(2) { animation-delay: .8s; } .call-screen.ringing .cs-ripple i:nth-child(3) { animation-delay: 1.6s; } @keyframes csRipple { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } } .call-screen.ringing .cs-status { animation: csBlink 1.2s ease-in-out infinite; } @keyframes csBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .call-screen.speaking .cs-ring, .cs-wave i, .call-screen.ringing .cs-ripple i, .call-screen.ringing .cs-status { animation: none; } } /* 設定: テーマを選ぶ（見本の丸は、どのテーマのときも同じ色で見せる） */ .themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-opt { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--bg-2); color: var(--ink); font-size: 13px; font-weight: 600; } .theme-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .theme-opt .sw { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .3); } .theme-opt .sw i { position: absolute; right: 5px; bottom: 5px; width: 14px; height: 14px; border-radius: 50%; } .sw-black { background: #161518; } .sw-black i { background: #7045ff; } .sw-pink { background: linear-gradient(135deg, #ff8fb8, #e85a8a 55%, #a07cff); } .sw-pink i { background: #ffffff; } .sw-white { background: #ffffff; } .sw-white i { background: #111014; } /* 話し相手を選ぶ（はじめの案内・設定） */ .partners { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 340px; margin: 22px auto 0; } .partners.small { margin: 0; max-width: none; } .partner-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px 14px; border-radius: 20px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); text-align: center; } .partner-opt .avatar.big { width: 84px; height: 84px; font-size: 32px; margin-bottom: 6px; } .partners.small .partner-opt .avatar.big { width: 64px; height: 64px; font-size: 26px; } .partner-opt b { font-size: 15px; } .partner-opt small { font-size: 12px; color: var(--muted); line-height: 1.5; } .partner-opt.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } .onboard .next:disabled { opacity: .4; } /* 中国語（簡体字）は中国語の字体で出す（日本語の字体だと、同じ漢字でも形が違う） */ html:lang(zh-CN) body { font-family: -apple-system, BlinkMacSystemFont, "HinataLatin", Roboto, "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif; } html:lang(zh-TW) body { font-family: -apple-system, BlinkMacSystemFont, "HinataLatin", Roboto, "PingFang TC", "Noto Sans TC", "Noto Sans CJK TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif; } /* 折り返しを言葉の途中で切らない（「変えられま／す。」「あ／とから」になっていた・2026-09-25）。 日本語は文節で折り返す（Chrome・Android の WebView で効く。iPhone の Safari は無視して今までどおり）。韓国語は語の途中で切らない。 ⚠ 会話の吹き出しは自前の word-break（長い URL を折る）が勝つので変わらない */ html:lang(ja) body { word-break: auto-phrase; } html:lang(ko) body { word-break: keep-all; overflow-wrap: break-word; } p { text-wrap: pretty; } /* 設定の行を隠すとき（.item は flex なので hidden 属性だけでは消えない） */ .item[hidden] { display: none; } /* 見た目と声を選ぶ（はじめの案内・設定） */ .lv { margin-top: 14px; } .onboard .lv { width: 100%; max-width: 360px; margin: 18px auto 0; text-align: left; } .lv-label { font-size: 13px; color: var(--muted); font-weight: 600; margin: 10px 2px 8px; } /* 選んだ見た目を大きく（2026-09-25）。下の小さな絵で選ぶと、ふわっと差し替わる */ .look-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 46vh; margin: 4px auto 6px; border-radius: 24px; overflow: hidden; background: var(--bg-2); box-shadow: 0 18px 40px rgba(0, 0, 0, .28); } .onboard .look-stage { max-height: 40vh; max-width: 320px; } .look-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.28)); } .look-hero { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .28s ease, transform .42s cubic-bezier(.2, .8, .2, 1); } .look-hero.swap { opacity: 0; transform: scale(.94); } .looks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .look-kind { font-size: 12px; color: var(--muted, #8a8a99); margin: 10px 2px 10px; } /* ⚠ 選んだ絵は少し浮くので、見出しとの間を空ける（2026-09-25 Yuji「アニメの字が絵と被る」） */ .look-kind + .looks, .look-kind + .voices { margin-bottom: 8px; } .look-opt { padding: 0; border: 2px solid transparent; border-radius: 16px; overflow: hidden; background: var(--bg-2); aspect-ratio: 1; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; cursor: pointer; } .look-opt img { width: 100%; height: 100%; object-fit: cover; display: block; } .look-opt.on { border-color: var(--accent); transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 18px rgba(0, 0, 0, .25); } @media (prefers-reduced-motion: reduce) { .look-hero, .look-opt { transition: none; } .look-opt.on { transform: none; } } .voices { display: flex; flex-wrap: wrap; gap: 8px; } .voice-opt { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 99px; padding: 6px 12px 6px 8px; font-size: 13px; } .voice-opt .icon { width: 16px; height: 16px; } .voice-opt.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } /* ひなたから届いた自撮り */ .row.ai .stack { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 78%; } .row.ai .stack .bubble { max-width: 100%; } .row.ai img.photo { max-width: 240px; max-height: 240px; } /* 誕生日・記念日 */ .occasion { align-self: center; margin: 10px 0 4px; padding: 7px 16px; border-radius: 99px; font-size: 13px; font-weight: 600; background: var(--glass-strong); border: 1px solid var(--glass-line); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .bday { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .bday .label { flex: 1; font-size: 15px; } .bday select { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 10px; padding: 6px 8px; font: inherit; } /* 今日の気分（会話の画面）・気分の記録（プロフィール） */ .mood-card { align-self: stretch; margin: 10px 4px 2px; padding: 12px; border-radius: 18px; text-align: center; background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .mood-q { font-size: 14px; font-weight: 600; margin-bottom: 8px; } .mood-opts { display: flex; justify-content: space-between; gap: 4px; } .mood-opts button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; color: var(--muted); padding: 4px 0; border-radius: 12px; } .mood-opts button:active { background: var(--accent-soft); } .mood-opts .emo { font-size: 26px; line-height: 1.2; } .mood-opts small { font-size: 11px; } .mood-week { display: flex; justify-content: space-between; } .mw-day { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1; } .mw-day .emo { font-size: 22px; line-height: 1.3; color: var(--muted); } .mw-day small { font-size: 11px; color: var(--muted); } /* ひなたからの手紙 */ .letter { padding: 10px 0; } .letter + .letter { border-top: 1px solid var(--line); } .letter .ddate { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--accent-text); font-weight: 600; margin-bottom: 4px; } .letter-play { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 99px; padding: 4px 12px 4px 8px; font-size: 12px; font-weight: 600; } .letter-play .icon { width: 14px; height: 14px; } .letter .dtext { font-size: 14px; line-height: 1.8; white-space: pre-wrap; } /* 無料の人: 残りが少ないときの一言／使い切ったときの案内（2026-09-24） */ .free-left { align-self: center; margin: 8px 0 2px; font-size: 12px; color: var(--muted); } .free-left.tap { font: inherit; font-size: 12px; background: none; border: 0; padding: 4px 10px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* web: 押すとアプリ・プランの案内 */ .store-btns { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; } .store-btn { flex: 1; min-width: 120px; text-align: center; padding: 11px; border-radius: 12px; border: 1px solid var(--line); color: inherit; text-decoration: none; font-weight: 600; } .ad-link { align-self: center; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px 8px; margin: 4px 0 2px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--glass-strong); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; } .ad-link span { color: var(--muted); } .ad-link:disabled { opacity: .5; } .free-card { align-self: stretch; margin: 10px 4px 4px; padding: 14px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: center; display: grid; gap: 8px; justify-items: center; } .free-card b { font-size: 15px; } .free-card p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; } .free-actions { display: grid; gap: 8px; justify-items: center; width: 100%; } .free-card .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; } .free-card .btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .free-card .btn:disabled { opacity: 0.5; } /* 関係の段階・好感度・ひなたの気持ち（2026-09-24） */ .bond .stage-name { font-size: 18px; font-weight: 700; color: var(--accent-text); } .bond .bond-emo { font-size: 14px; } .bond-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-top: 8px; } .bond-hint { margin-top: 8px; font-size: 13px; line-height: 1.6; padding: 8px 10px; border-radius: 12px; background: var(--accent-soft); } .occasion.stage-up { font-size: 14px; } /* ふたりの関係と思い出（2026-09-24） */ .story-card textarea { width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 14px; line-height: 1.6; resize: vertical; } .story-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .story-actions button { flex: 1; min-height: 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .story-actions button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .story-actions button:disabled { opacity: .5; } /* 返事を声で聞く（2026-09-24） */ .row.ai .aside { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; } .speak { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; } .speak .icon { width: 14px; height: 14px; } .speak .eq { display: none; align-items: flex-end; gap: 2px; width: 12px; height: 12px; } .speak .eq i { display: block; width: 2.5px; height: 40%; border-radius: 2px; background: currentColor; animation: vo-eq .8s ease-in-out infinite; } .speak .eq i:nth-child(2) { animation-delay: -.3s; } .speak .eq i:nth-child(3) { animation-delay: -.55s; } .speak .pi { display: inline-flex; } /* 「声がおかしい」は右の列の幅に入れない（幅が広がると吹き出しの折り返しが変わった・09-27 Yuji）。列の下に重ねて置く */ .row.ai .aside { position: relative; } .vrep { position: absolute; right: 0; top: 100%; margin-top: 2px; border: 0; background: none; padding: 2px 0; font-size: 11px; color: var(--muted); text-decoration: underline; cursor: pointer; white-space: nowrap; } .row.ai:has(.vrep:not([hidden])) { margin-bottom: 16px; } .vrep:disabled { text-decoration: none; cursor: default; } /* 声を作っている間: ふわっと点滅 ／ 流れている間: 声の見本（.voice-opt.playing）と同じイコライザーと光の輪 ／ 止めたら小さく弾む */ .speak.loading { color: var(--accent-text); border-color: var(--accent); animation: sp-wait 1s ease-in-out infinite; } .speak.playing { background: var(--accent); color: var(--on-accent); border-color: var(--accent); animation: vo-ring 1.4s ease-out infinite; } .speak.playing .pi { display: none; } .speak.playing .eq { display: inline-flex; } .speak.stopped { animation: vo-pop .35s ease-out; } @keyframes sp-wait { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } @media (prefers-reduced-motion: reduce) { .speak.loading, .speak.playing, .speak.stopped, .speak .eq i { animation: none; } } /* 話し方（2026-09-25） */ .speech { display: grid; gap: 8px; margin-bottom: 8px; } .sp-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); align-items: center; gap: 8px; font-size: 14px; } .sp-row select { width: 100%; min-height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; padding: 0 8px; } /* 見た目を大きくしたので、はじめの案内は縦に収まらなければ流せるように（上が切れない safe center） */ .onboard { overflow-y: auto; justify-content: safe center; } .onboard .ob-rels { justify-content: center; max-width: 360px; margin: 18px auto 0; } /* あなた（自分のページ）の頭 */ .you-head { text-align: center; padding: 28px 16px 4px; } .you-head .avatar { margin: 0 auto 10px; display: grid; place-items: center; font-size: 30px; font-weight: 700; } .you-head .avatar .icon { width: 40px; height: 40px; } .you-head h2 { margin: 0 0 4px; } /* 声のボタン: 再生中はイコライザーが動き、周りがふわっと光る。止めたら小さく弾む（2026-09-25 Yuji「再生中・停止が分かるように」） */ .voice-opt .eq { display: none; align-items: flex-end; gap: 2px; width: 16px; height: 14px; } .voice-opt .eq i { display: block; width: 3px; height: 40%; border-radius: 2px; background: currentColor; animation: vo-eq .8s ease-in-out infinite; } .voice-opt .eq i:nth-child(2) { animation-delay: -.3s; } .voice-opt .eq i:nth-child(3) { animation-delay: -.55s; } .voice-opt.playing .pi { display: none; } .voice-opt.playing .eq { display: inline-flex; } .voice-opt.playing { border-color: var(--accent); color: var(--accent-text); animation: vo-ring 1.4s ease-out infinite; } .voice-opt.stopped { animation: vo-pop .35s ease-out; } @keyframes vo-eq { 0%, 100% { height: 30%; } 50% { height: 100%; } } @keyframes vo-ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } } @keyframes vo-pop { 0% { transform: scale(.92); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } } /* 見た目: 声の見本が流れている間は「話している」動画を重ねる */ .look-talk { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; /* ⚠ 静止画（.look-hero）と同じ切り取り。動画は元の正方形の絵から作っているので、ずれない（2026-09-25 Yuji「動画になるとクローズアップする」） */ opacity: 0; transition: opacity .3s ease; pointer-events: none; } .look-stage.talking .look-talk { transition: opacity .08s linear; } .look-stage.talking.mouth .look-talk { opacity: 1; } /* 声が出ているあいだだけ（息つぎ・文の切れ目は口を閉じた絵・09-27） */ @media (prefers-reduced-motion: reduce) { .voice-opt.playing, .voice-opt.stopped, .voice-opt .eq i { animation: none; } .look-talk { transition: none; } } /* 毎日のごほうび（会話の画面・backend/checkin.py） */ .ck-card { align-self: stretch; margin: 10px 4px 2px; padding: 12px 14px; border-radius: 18px; display: flex; align-items: center; gap: 12px; background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .ck-text { flex: 1; min-width: 0; } .ck-q { font-size: 14px; font-weight: 600; } .ck-sub { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.5; } .ck-btn { flex: none; min-height: 38px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; } .ck-btn:disabled { opacity: .5; } .occasion-link { align-self: center; margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } /* ふたりの物語（プロフィールの一覧と、読む画面・backend/chapters.py） */ .chapter { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; width: 100%; text-align: left; padding: 10px 2px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; } .chapter + .chapter { border-top: 1px solid var(--line); } .chapter .ch-no { grid-row: 1 / 3; align-self: center; font-size: 12px; color: var(--accent-text); font-weight: 600; min-width: 3.5em; } .chapter .ch-title { font-size: 15px; font-weight: 600; } .chapter .ch-state { font-size: 12px; color: var(--muted); } .chapter.fresh .ch-state { color: var(--accent-text); font-weight: 600; } .chapter.locked { cursor: default; } .chapter.locked .ch-title, .chapter.locked .ch-no { color: var(--muted); } .chapter:disabled { opacity: 1; } .sheet.chapter-sheet { max-height: 86dvh; overflow-y: auto; } .ch-decide { width: 100%; min-height: 44px; margin-top: 4px; border-radius: 99px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; } .ch-decide:disabled { opacity: .5; } /* 結末（エンディング）の実績（backend/chapters.py ENDINGS） */ .endings { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; } .endings-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--accent-text); font-weight: 600; margin-bottom: 6px; } .endings-list { display: flex; flex-wrap: wrap; gap: 6px; } .ending-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); } .ending-chip.got { border-style: solid; border-color: var(--accent); color: var(--accent-text); font-weight: 600; } .ch-ending { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 14px 0 6px; padding: 12px; border: 1px solid var(--accent); border-radius: 14px; text-align: center; } .ch-ending-label { font-size: 12px; color: var(--muted); } .ch-ending b { font-size: 17px; color: var(--accent-text); } .ch-ending-new { font-size: 11px; font-weight: 700; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 1px 8px; } .chapter-sheet .ch-no { font-size: 12px; color: var(--accent-text); font-weight: 600; margin-bottom: 2px; } .ch-body { font-size: 15px; line-height: 1.95; white-space: pre-wrap; color: var(--ink); margin: 6px 0 14px; overflow-wrap: anywhere; } /* ⚠ 長い文章（物語・日記・手紙）を文節で折り返すと、行の長さがばらばらになる（2026-09-25）。日本語だけ普通の折り返しにする */ html:lang(ja) .ch-body, html:lang(ja) .diary .dtext, html:lang(ja) .letter .dtext { word-break: normal; } .ch-q { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0; } .ch-q .avatar { width: 32px; height: 32px; font-size: 14px; flex: none; } .ch-q .bubble { background: var(--bubble-ai); color: var(--ink); border-radius: 18px 18px 18px 6px; padding: 9px 13px; font-size: 14px; line-height: 1.6; max-width: 85%; overflow-wrap: anywhere; } .ch-choices { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .ch-choice { text-align: left; min-height: 44px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.5; cursor: pointer; } .ch-choice.on { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; } .ch-choice:disabled:not(.on) { opacity: .45; } .ch-mine { cursor: default; white-space: pre-wrap; overflow-wrap: anywhere; } .ch-free { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; } .ch-free-label { font-size: 12px; color: var(--muted); font-weight: 600; } .ch-free textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-size: 14px; line-height: 1.6; padding: 10px 12px; } .ch-free-send { align-self: flex-end; min-height: 38px; min-width: 88px; padding: 0 18px; border-radius: 99px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 3px; } .ch-free-send:disabled { opacity: .6; } .ch-free-send .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; } .ch-points { text-align: center; font-size: 13px; font-weight: 600; color: var(--accent-text); margin: 6px 0; } .chapter-sheet .story-actions { flex-direction: column; } .chapter-sheet .story-actions button { flex: none; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .chapter-sheet .story-actions .icon { width: 16px; height: 16px; } /* モーニングコール（設定の電話の欄） */ .wake-opts { display: flex; flex-direction: column; gap: 10px; padding: 0 0 12px; } .wake-opts[hidden] { display: none; } .wake-opts select { align-self: flex-start; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 10px; padding: 6px 8px; font: inherit; } .wake-days { gap: 6px; } .wake-days .voice-opt { min-width: 40px; justify-content: center; } /* 引き継ぎの番号（設定のアカウント・backend/transfer.py） */ .transfer-code { padding: 4px 0 12px; } .transfer-code .code { font-size: 28px; font-weight: 700; letter-spacing: .12em; text-align: center; padding: 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; user-select: all; } .transfer-code p { margin: 8px 2px 0; } .transfer-in { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; } .transfer-in .label { font-size: 15px; margin-bottom: 8px; } .transfer-in .row { display: flex; gap: 8px; } .transfer-in input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; } .transfer-in button { border-radius: 12px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 600; padding: 0 16px; } /* 年齢の確認（大人向けモード・backend/adult.py） */ .sheet.adult-sheet { max-height: 88dvh; overflow-y: auto; } .adult-sheet .ad-row { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; font-size: 14px; } .adult-sheet .ad-row input { border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); border-radius: 12px; padding: 10px 12px; font: inherit; } .adult-sheet #adPreview { display: block; max-width: 100%; max-height: 220px; margin: 6px auto; border-radius: 12px; border: 1px solid var(--line); } .adult-sheet #adPreview[hidden] { display: none; } .adult-sheet .msg { color: var(--ink); font-size: 13px; min-height: 1em; } .sheet-actions .primary-btn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .sheet-actions .primary-btn:disabled { opacity: .6; } /* 贈り物（トークの「贈る」・backend/gifts.py） */ .gift-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; } .gift { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; cursor: pointer; } .gift:disabled { cursor: default; opacity: .6; } .gift-emoji { grid-row: 1 / 3; font-size: 28px; } .gift-name { font-weight: 600; font-size: 15px; } .gift-desc { grid-column: 2; font-size: 12px; color: var(--muted); } .gift-price { grid-row: 1 / 3; grid-column: 3; font-weight: 700; font-variant-numeric: tabular-nums; } /* キャラの性格・攻略の難しさ・好きなもの／苦手なもの（backend/characters.py） */ .look-char { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin: 8px 0 2px; font-size: 14px; } .look-char span { font-size: 12px; color: var(--muted); letter-spacing: .04em; } .bond .char-line { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; } .bond .likes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; } .bond .likes .lk { font-size: 12px; color: var(--muted); min-width: 5.5em; } .bond .likes .chip { padding: 3px 10px; font-size: 12px; } .bond .likes .chip.unknown { color: var(--muted); letter-spacing: .1em; } .occasion.found { font-size: 13px; white-space: pre-line; text-align: center; } /* キャラを変えるときの関係（backend/characters.py の swap_plan） */ .carry-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .carry-list button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; cursor: pointer; } .carry-list button b { font-size: 15px; } .carry-list button small { font-size: 12px; color: var(--muted); } /* 設定の中のリンクの行（特定商取引法に基づく表記） */ a.item.link-item { color: var(--ink); text-decoration: none; } /* ---- トーク画面の壁紙（2026-09-25・app.js の wallSectionHtml / stageHtml）---- */ .walls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .wall-opt { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; } .wall-opt .wall-sw { position: relative; display: block; width: 100%; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line, rgba(128,128,128,.3)); background: var(--card); } .wall-opt .wall-sw img, .wall-opt .wall-sw .wall-color { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .wall-opt .wall-sw img.wall-art { object-position: center 20%; } /* トークの背景（.talk.has-art .stage img）と同じ位置合わせ（09-28） */ /* 選んでいる印の枠は絵の内側に描く（外に描くと下の名前にくっついて詰まって見えた・09-27 Yuji） */ .wall-opt.on .wall-sw::before { content: ""; position: absolute; inset: 0; z-index: 1; border: 3px solid var(--accent); border-radius: 12px; pointer-events: none; } .wall-opt.on .wall-sw::after { content: "✓"; position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; } .wall-opt .wall-name { font-size: 11px; line-height: 1.3; text-align: center; color: var(--muted); } .wall-opt.on .wall-name { color: var(--ink); font-weight: 600; } .wall-opt.locked .wall-sw img { filter: grayscale(.6) brightness(.55) blur(1px); } .wall-opt .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; color: #fff; } .wall-opt .wall-plus { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-style: normal; color: var(--muted); } .wall-color.wall-plain { background: linear-gradient(160deg, var(--stage-1), var(--stage-2) 60%, var(--stage-3)); } .wall-color.wall-night { background: linear-gradient(170deg, #1b1f3a 0%, #2a1e3f 55%, #0e0c16 100%); } .wall-color.wall-blush { background: linear-gradient(170deg, #ffe8ef 0%, #f9cfdc 55%, #f1b6c9 100%); } .talk .stage .wall-color { position: absolute; inset: 0; } .talk.wall-dark .time { color: rgba(255, 255, 255, .8); } .sheet-backdrop.photo-view { align-items: center; } /* 届いた写真を大きく見る画面は真ん中に（09-28 Yuji「下の方に出るので真ん中に」） */ .sheet-backdrop.photo-view .photo-sheet { padding-bottom: 18px; } .photo-sheet .photo-big { display: block; width: 100%; max-height: 60vh; object-fit: contain; border-radius: 16px; margin-bottom: 12px; } .row.ai img.photo:not([data-img]) { cursor: zoom-in; } /* ---- 話し相手の一覧（複数の相手・2026-09-25・app.js の showPartners）---- */ .talk-head .head-avatar { padding: 0; border: 0; cursor: pointer; font: inherit; } .partners-sheet .pt-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; } .partners-sheet .pt-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .partners-sheet .pt-row.now { border-color: var(--accent); cursor: default; } .partners-sheet .pt-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; } .partners-sheet .pt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .partners-sheet .pt-text small { color: var(--muted); font-size: 12px; } .partners-sheet .pt-now { font-size: 12px; color: var(--accent-text); flex: none; } .partners-sheet .pt-add { width: 100%; padding: 12px; border-radius: 14px; border: 1px dashed var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; } .carry-sheet button.locked { opacity: .75; } /* ---- 壁紙: トークの上のボタン・選ぶ画面・ひなたの画面の「もらえる壁紙」（2026-09-26）---- */ .talk-head .head-btn { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: none; padding: 0; display: flex; align-items: center; justify-content: center; background: var(--glass, rgba(255,255,255,.14)); color: var(--ink); cursor: pointer; } .talk-head .head-btn + .call-btn { margin-left: 8px; } .talk.has-art .talk-head .head-btn { color: var(--head-btn-ink); background: var(--head-btn); } .wall-sheet { max-height: 86vh; overflow-y: auto; } .wall-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .wall-mini { position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--bg-2); } .wall-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wall-mini.locked img { filter: grayscale(.35) brightness(.6); } .wall-mini .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; } /* まだ先の壁紙（伏せる・09-29）: 絵は出さず「？」だけ */ .wall-mini.secret, .wall-opt.secret .wall-sw, .wall-lock-img.secret { background: linear-gradient(160deg, var(--bg-2), color-mix(in srgb, var(--accent) 18%, var(--bg-2))); } .wall-mini.secret .q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 700; color: var(--muted); } .wall-opt .wall-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; font-style: normal; color: var(--muted); } .wall-lock-img.secret { position: relative; aspect-ratio: 9 / 16; max-height: 40vh; margin: 0 auto 10px; border-radius: 14px; } .wall-lock-img.secret .wall-q { position: absolute; inset: 0; display: grid; place-items: center; font-size: 40px; font-weight: 700; font-style: normal; color: var(--muted); } .ghost-btn { width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } /* ごほうびの絵にキャラが入ったので、鍵つきでも誰かは見えるように（ぼかさない） */ .wall-opt.locked .wall-sw img { filter: grayscale(.35) brightness(.6); } /* ---- 設定のたたみ（アコーディオン・2026-09-26）---- */ details.acc { margin: 0 0 10px; border-radius: 16px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; } details.acc > summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; } details.acc > summary::-webkit-details-marker { display: none; } details.acc > summary::after { content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; } details.acc[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; } details.acc > summary h3 { margin: 0; font-size: 15px; color: var(--ink); } details.acc > summary .acc-peek { display: block; margin-top: 3px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } details.acc[open] > summary .acc-peek { display: none; } details.acc > .card { margin: 0; border-radius: 0; box-shadow: none; background: transparent; padding-top: 16px; } /* 見出しの下の線と中身の間をあける（2026-09-26 Yuji「ぴったり引っ付いている」） */ /* 鍵つきの壁紙: 絵の下の短い条件と、押したときの詳しい画面・トークのメニュー（2026-09-26）*/ .wall-opt .wall-cond { font-size: 10px; line-height: 1.25; text-align: center; color: var(--muted); margin-top: -3px; } .wall-lock-sheet .wall-lock-img { position: relative; width: 44%; max-width: 180px; aspect-ratio: 9 / 16; margin: 0 auto 12px; border-radius: 14px; overflow: hidden; } .wall-lock-sheet .wall-lock-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.35) brightness(.6); } .wall-lock-sheet .lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; } .wall-lock-sheet h2 { text-align: center; } .talk-menu .menu-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; } .talk-menu .menu-row .menu-go { margin-left: auto; color: var(--muted); font-size: 20px; } /* あなたの写真（2026-09-26）: 丸に写真・右下にカメラの印 */ .you-head .you-avatar { position: relative; border: 0; padding: 0; cursor: pointer; overflow: visible; } .you-head .you-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .you-head .you-avatar .me-cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); box-shadow: 0 0 0 2px var(--bg), 0 2px 8px rgba(0,0,0,.25); } .you-head .you-avatar .me-cam .icon { width: 18px; height: 18px; } .you-head .me-photo-links { margin-top: 2px; line-height: 1.6; } .you-head .me-photo-links .link-btn { font-size: 13px; padding: 2px; } /* 話し相手: ボタンと説明の間をあける・相手を選ぶ画面（2026-09-26）*/ .partners-sheet .pt-add + p { margin-top: 12px; } .pick-sheet { max-height: 86vh; overflow-y: auto; } .pick-sheet h3 { margin: 12px 0 8px; font-size: 14px; color: var(--muted); } .pick-sheet .pk-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pick-sheet .pk-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; } .pick-sheet .pk-opt img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line); } .pick-sheet .pk-opt span { font-size: 11px; line-height: 1.3; text-align: center; color: var(--muted); } .me-show-img { width: 120px; height: 120px; margin: 0 auto 12px; border-radius: 50%; overflow: hidden; } .me-show-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* プランの中身（通話の分・1日の通数・2026-09-26）*/ .plan .amt { display: block; margin-top: 6px; font-size: 11px; line-height: 1.45; color: var(--ink); text-align: center; font-weight: 600; } /* 都度課金のパック（2026-09-26）*/ .packs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .packs .pack-title { font-size: 13px; font-weight: 700; margin: 0 2px 8px; } .packs .pack-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .packs .pack { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; cursor: pointer; } .packs .pack:disabled { opacity: .55; cursor: default; } .packs .pk-name { font-size: 13px; font-weight: 600; } .packs .pk-price { font-size: 15px; font-weight: 700; } .pack-btn { display: inline-flex; align-items: center; gap: 8px; } /* 使い切りのカードの「+ チャット 45通 ★490」 */ .pack-btn .pk-price { font-size: 13px; font-weight: 700; opacity: .9; } /* 電話のかけ方を選ぶ（音声通話／ビデオ通話・2026-09-26）*/ .call-choose .cc-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; margin: 0 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; text-align: left; cursor: pointer; } .call-choose .cc-ic { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); } .call-choose .cc-t { display: flex; flex-direction: column; gap: 2px; } .call-choose .cc-t small { color: var(--muted); font-size: 12px; } /* プランの使った分: ゲージ（数字は出さない・2026-09-26）。空から使うほど伸びる（Claude の使用量と同じ）。8割を超えると色を変える */ .gauges { display: grid; gap: 10px; margin: 10px 2px 0; } .gauge { display: grid; grid-template-columns: 9em 1fr; align-items: center; gap: 10px; font-size: 13px; } .gauge .g-label { color: var(--muted); } .gauge .g-track { position: relative; height: 8px; border-radius: 99px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; } .gauge .g-track i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--grad); transition: width .4s ease; } .gauge.high .g-track i { background: var(--danger); } /* トークの「ひなたからのメッセージを受け取る？」（2026-09-26） */ .notif-ask-btns { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; } .notif-ask-btns .link-btn { font-size: 12px; color: var(--muted); background: none; border: 0; padding: 2px 6px; cursor: pointer; } /* ひなたのページを軽く（2026-09-27 Yuji「情報量が多い」） */ .char-about { margin: 2px 0 8px; font-size: 13px; color: var(--muted); line-height: 1.6; } .ch-more { width: 100%; min-height: 40px; margin-top: 6px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; } .ai-foot { display: flex; gap: 6px; align-items: flex-start; margin: 22px 4px 8px; font-size: 11.5px; color: var(--muted); line-height: 1.6; } .ai-foot .icon { width: 14px; height: 14px; flex: none; margin-top: 2px; } /* 物語のノベルの形（2026-09-27）。挿絵の上に文字。明るい画面でも、この中だけは暗い色で読む */ .novel { position: fixed; inset: 0; z-index: 1000; background: #0b0a0d; color: #fff; overflow: hidden; user-select: none; -webkit-tap-highlight-color: transparent; --ink: #fff; --muted: rgba(255,255,255,.7); --line: rgba(255,255,255,.28); --bg-2: rgba(255,255,255,.08); --card: rgba(255,255,255,.06); --accent: #fff; --on-accent: #111; --accent-soft: rgba(255,255,255,.16); --bubble-ai: rgba(255,255,255,.12); color-scheme: dark; } .novel .nv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* 挿絵が届くまでの仮の絵（キャラの一枚絵）。ぼかして暗くし、別の絵に見えないようにする（09-27 Yuji「ひなたの画面が全部出て、2秒後に差し替わった」） */ .novel .nv-bg.placeholder { filter: blur(16px) brightness(.45); transform: scale(1.15); } .novel .nv-bg.fade { opacity: 0; transition: opacity .9s ease; } .novel .nv-bg.fade.in { opacity: 1; animation: nv-zoom 24s ease-out both; } @keyframes nv-zoom { from { transform: scale(1.0); } to { transform: scale(1.06); } } .novel .nv-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,6,10,.9) 0%, rgba(8,6,10,.55) 30%, rgba(8,6,10,0) 55%); pointer-events: none; } .novel .nv-title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: rgba(0,0,0,.28); text-align: center; } .novel .nv-title b { font-size: 13px; letter-spacing: .25em; font-weight: 600; opacity: .9; } .novel .nv-title span { font-size: 26px; font-weight: 700; text-shadow: 0 2px 10px rgba(0,0,0,.5); } .novel .nv-wait { margin-top: 18px; min-height: 22px; } .novel .nv-wait small { font-size: 12px; opacity: .8; animation: nv-blink 1.6s infinite; } .novel .nv-wait .dot { display: inline-block; width: 6px; height: 6px; margin: 0 3px; border-radius: 50%; background: #fff; animation: nv-blink 1.2s infinite; } .novel .nv-wait .dot:nth-child(2) { animation-delay: .2s; } .novel .nv-wait .dot:nth-child(3) { animation-delay: .4s; } @keyframes nv-blink { 50% { opacity: .3; } } .novel .nv-box { position: absolute; left: 0; right: 0; bottom: 0; min-height: 30%; padding: 22px 20px calc(30px + env(safe-area-inset-bottom, 0px)); } .novel .nv-text { margin: 0; font-size: 16px; line-height: 1.9; text-shadow: 0 1px 3px rgba(0,0,0,.8); } .novel .nv-next { position: absolute; right: 18px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 12px; opacity: .8; animation: nv-blink 1.2s infinite; } .novel .nv-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; padding: 18px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(10,8,12,.96) 70%, rgba(10,8,12,.75)); border-radius: 22px 22px 0 0; } .novel .nv-close, .novel .nv-skip { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; z-index: 2; } .novel .nv-close { right: 12px; } .novel .nv-skip { right: 58px; width: auto; padding: 0 14px; border-radius: 99px; font-size: 13px; font-weight: 600; } .novel .nv-confirm { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 3; width: min(320px, calc(100% - 48px)); padding: 18px 16px 14px; border-radius: 18px; background: rgba(20,16,22,.94); color: #fff; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); } .novel .nv-confirm p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; } .novel .nv-confirm div { display: flex; gap: 10px; justify-content: center; } .novel .nv-confirm button { flex: 1; padding: 10px 0; border-radius: 12px; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font: inherit; font-weight: 600; } .novel .nv-confirm button.primary { background: #fff; color: #222; border-color: #fff; } .novel [hidden] { display: none !important; } /* アルバム（物語の挿絵） */ .album-open { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; } .album-open .icon { width: 16px; height: 16px; } .album-open em { margin-left: auto; font-style: normal; color: var(--muted); font-weight: 500; font-size: 13px; } .sheet.album-sheet { max-height: 86dvh; overflow-y: auto; } .album-look + .album-look { margin-top: 16px; } .album-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; color: var(--muted); } .album-head img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .album-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } /* 用意した挿絵のあるキャラ: 章ごとの行（左に章の番号・09-29） */ .album-row { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 6px; margin-bottom: 6px; } .album-rl { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.2; } .album-grid.ends { grid-template-columns: repeat(5, 1fr); } .album-grid.slots .album-cell { aspect-ratio: 3 / 4; } /* 29枠を一覧しやすく低めに（絵は切り抜いて見せる・開くと全体） */ .album-cell { aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; border: 0; padding: 0; background: var(--bg-2); cursor: pointer; } .album-cell.photo { aspect-ratio: 1; } /* アルバムの画面（下タブ・09-28）: 物語／写真を上のタブと横めくりで切り替える */ .album-screen { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0; display: flex; flex-direction: column; overflow: hidden; } .screen:not(.talk) > .scroll.album-screen::after { display: none; } .album-title { margin: 4px 2px 12px; font-size: 20px; } .album-tabs { display: flex; gap: 6px; margin-bottom: 14px; padding: 4px; border-radius: 999px; background: var(--bg-2); } .album-tabs button { flex: 1; padding: 8px 0; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; } .album-tabs button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); } .album-tabs button[aria-selected="true"] em { color: inherit; opacity: .7; } .album-tabs em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); } /* 下タブの上まで伸ばして、どこを触っても横にめくれるように（09-28 Yuji「下の黒い部分を触ってもスワイプしない」）。縦のスクロールは各ページの中 */ .album-pager { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .album-pager::-webkit-scrollbar { display: none; } .album-page { flex: 0 0 100%; min-width: 0; height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 32px; box-sizing: border-box; scroll-snap-align: start; scroll-snap-stop: always; } .album-grid.photos { grid-template-columns: repeat(3, 1fr); } .album-empty { margin: 24px 4px; text-align: center; } .album-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .album-cell.empty { display: grid; place-items: center; border: 1px dashed var(--line); color: var(--muted); font-size: 13px; cursor: default; } .album-view .album-cap { position: absolute; left: 20px; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 2px; } .album-view .album-cap b { font-size: 12px; letter-spacing: .2em; opacity: .85; } .album-view .album-cap span { font-size: 22px; font-weight: 700; } .tap-dots { display: inline-flex; gap: 4px; } .tap-dots i { width: 6px; height: 6px; border-radius: 50%; background: #888; animation: nv-blink 1.2s infinite; } .tap-dots i:nth-child(2) { animation-delay: .2s; } .tap-dots i:nth-child(3) { animation-delay: .4s; } .ck-card.fade-out, .occasion.fade-out, .occasion-link.fade-out { opacity: 0; transition: opacity .35s ease; } .occasion.ck-done { animation: ck-in .35s ease both; } @keyframes ck-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* 「＋」の中（写真・場面・遊ぶ・贈る）。2026-09-27 Yuji ② */ .more-btn span { font-size: 22px; line-height: 1; font-weight: 400; display: inline-block; transition: transform .2s ease; } .more-btn.open span { transform: rotate(45deg); } .more-panel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px 16px 2px; } .more-panel button { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; } .more-panel button { min-height: 58px; } /* 文字は出さずアイコンだけ大きく（09-27 Yuji） */ .more-panel button .icon { width: 30px; height: 30px; color: var(--accent-text); } .more-panel button b { font-size: 28px; line-height: 30px; font-weight: 400; } .talk .more-panel button { background: var(--glass); border-color: var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .more-panel[hidden] { display: none; } /* 動き（2026-09-27 Yuji）。⚠ 動きを減らす設定の人には出さない */ @media (prefers-reduced-motion: no-preference) { .log .row.user.enter { animation: msg-user .34s cubic-bezier(.2,.9,.3,1.2) both; transform-origin: 100% 100%; } .log .row.ai.enter { animation: msg-ai .38s cubic-bezier(.2,.9,.3,1.15) both; transform-origin: 0 100%; } @keyframes msg-user { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } } @keyframes msg-ai { from { opacity: 0; transform: translateX(-10px) scale(.94); } to { opacity: 1; transform: none; } } .more-panel.opening button { animation: more-in .28s cubic-bezier(.2,.9,.3,1.25) both; } .more-panel.opening button:nth-child(2) { animation-delay: .04s; } .more-panel.opening button:nth-child(3) { animation-delay: .08s; } .more-panel.opening button:nth-child(4) { animation-delay: .12s; } .more-panel.closing button { animation: more-out .18s ease both; } @keyframes more-in { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } } @keyframes more-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.95); } } .composer .send:not(:disabled):active { transform: scale(.88); transition: transform .08s; } } .vol-row { display: flex; align-items: center; gap: 10px; padding: 4px 2px 8px; } .vol-row input[type=range] { flex: 1; accent-color: var(--accent); } /* ▶ を押したあとの一言（待っている・失敗した） */ .speak-note { position: fixed; left: 50%; bottom: calc(158px + env(safe-area-inset-bottom, 0px)); width: max-content; transform: translateX(-50%); z-index: 2100; max-width: calc(100% - 48px); padding: 8px 14px; border-radius: 16px; background: var(--ink); color: var(--bg); font-size: 13px; line-height: 1.5; text-align: center; box-shadow: var(--shadow); animation: fade .2s ease-out; } .speak-note[hidden] { display: none; } /* ひみつの一枚（好き・苦手を全部見つけると開く） */ .secret-open { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); background: transparent; color: var(--muted); font: inherit; font-weight: 600; cursor: pointer; } .secret-open .icon { width: 16px; height: 16px; } .secret-open em { margin-left: auto; font-style: normal; font-weight: 500; font-size: 13px; } .secret-open[disabled] { cursor: default; } .secret-open.ready { border: 1px solid var(--accent); color: var(--accent-text); background: var(--accent-soft); } .album-cell.secret.empty { display: flex; align-items: center; justify-content: center; color: var(--muted); } .album-cell.secret.empty .icon { width: 16px; height: 16px; } .album-view .nv-wait { animation: nv-blink 1.4s ease-in-out infinite; } /* 物語: まだ読んでいない・答えていない章（右に「読む／答える」） */ .chapter:has(.ch-go) { grid-template-columns: auto 1fr auto; } .chapter .ch-go { grid-column: 3; grid-row: 1 / 3; align-self: center; padding: 6px 14px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 700; } .chapter.fresh { background: var(--accent-soft); border-radius: 12px; } .chapter.fresh { padding: 10px 12px; } /* 物語の一覧: 読み終えた章の「もう一度読む」（控えめ） */ .chapter .ch-go.again { background: transparent; color: var(--accent-text); border: 1px solid var(--accent); font-weight: 600; } /* 好感度 +N（ふわっと浮かんで消える） */ .heart-pop { position: fixed; left: 50%; top: 42%; z-index: 2000; display: flex; align-items: center; gap: 6px; transform: translate(-50%, 0); padding: 9px 18px 9px 14px; border-radius: 99px; background: linear-gradient(135deg, #ff4f86, #ff8fb6); color: #fff; font-weight: 800; font-size: 19px; box-shadow: 0 8px 26px rgba(255, 79, 134, .45); pointer-events: none; animation: heart-pop 1.7s ease-out forwards; } /* ハートはテーマの色に頼らず、いつもピンク×白（09-27 Yuji「黒いハートで分かりにくい・色付きに」） */ .heart-pop .hp-heart { display: inline-block; color: #fff; font-size: 22px; text-shadow: 0 0 10px rgba(255,255,255,.7); animation: hp-beat .5s ease-in-out 2; } .heart-pop .hp-mini { position: absolute; left: 50%; top: 50%; color: #ff6b9a; font-size: 14px; opacity: 0; animation: hp-float 1.3s ease-out forwards; } .heart-pop .hp-mini:nth-child(3) { --dx: -46px; animation-delay: .1s; } .heart-pop .hp-mini:nth-child(4) { --dx: 40px; animation-delay: .22s; font-size: 12px; } .heart-pop .hp-mini:nth-child(5) { --dx: -12px; animation-delay: .34s; font-size: 16px; } @keyframes heart-pop { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.7); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); } 30% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; transform: translate(-50%, -26px); } 100% { opacity: 0; transform: translate(-50%, -46px); } } @keyframes hp-beat { 50% { transform: scale(1.35); } } @keyframes hp-float { 0% { opacity: 0; transform: translate(-50%, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -70px) scale(1.1); } } @media (prefers-reduced-motion: reduce) { .heart-pop, .heart-pop .hp-heart { animation-duration: .01s; } } /* 物語の上の道具（ボイス・オート・スキップ・閉じる） */ .novel .nv-tools { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; left: 12px; display: flex; justify-content: flex-end; gap: 8px; z-index: 2; pointer-events: none; } .novel .nv-tools > button { position: static; pointer-events: auto; height: 34px; min-width: 34px; padding: 0 12px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.35); color: #fff; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; } .novel .nv-tools > .nv-close { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* × は線で描いて真ん中に（文字の × は 1.8px 下にずれた） */ .novel .nv-tools > button.on { background: #fff; color: #222; border-color: #fff; } .novel .nv-tools.answering .nv-auto { display: none; } /* 答えの画面でもセリフを声で読むので、ボイスと音量は出したまま */ .novel .nv-tools > .nv-vol, .novel .nv-tools > .nv-rep { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; } /* 音量のつまみ（マークを押したときだけ開く・09-29 Yuji） */ .novel .nv-volpop { position: absolute; top: calc(54px + env(safe-area-inset-top, 0px)); right: 12px; z-index: 3; padding: 12px 14px; border-radius: 14px; background: rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .novel .nv-volpop input { width: 180px; accent-color: #fff; } /* 状態の行が無い章（もう一度読む）は、題名を上下の真ん中に（09-27 Yuji「出会いが第1章より少し上にある」） */ .chapter.no-state .ch-title { grid-row: 1 / 3; align-self: center; } /* 読んでいない章が続くとき、枠どうしがくっつかないように間をあける（09-27 Yuji「2章3章の枠が上下でくっついている」） */ .chapter.fresh { margin-block: 5px; } .chapter.fresh + .chapter, .chapter + .chapter.fresh { border-top: 0; } /* 枠のある章（読んでいない）とない章で、頭の位置をそろえる（09-27 Yuji「第2章と第3章の位置がずれている」） */ .chapter { padding-inline: 12px; border-radius: 12px; } /* 挿絵を壁紙にする（アルバムで大きく開いたとき・読み終えたあと） */ .album-view .album-wall { position: absolute; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 2; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(255,255,255,.4); background: rgba(0,0,0,.45); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } .novel .ch-wall { display: block; margin: 12px auto 0; color: rgba(255,255,255,.8); font-size: 13px; } .wall-opt .wall-del { position: absolute; left: 6px; top: 6px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.55); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; } /* 長押しで文字が選択されないように（アプリらしく・09-27 Yuji）。入力欄と引き継ぎ番号は選べるまま */ body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .transfer-code .code { -webkit-user-select: all; user-select: all; -webkit-touch-callout: default; } /* いま入っているプラン（枠を太く・上に「いまのプラン」） */ .plan { position: relative; } .plan.current { border-width: 2.5px; } .plan .plan-now { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 9px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; } .plans { padding-top: 8px; } /* 年額のライト（09-28）: 3つの札の下に横長で1枚 */ .plan.year { width: 100%; margin-top: 12px; display: grid; gap: 4px; text-align: left; padding: 12px 14px; } .plan.year .year-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .plan.year .year-save { font-size: 12px; font-weight: 700; color: var(--accent-text); } .plan.year .year-perk { font-size: 12px; color: var(--muted); line-height: 1.5; } /* 心の声（プロ）: 返事の横の「心」と、吹き出しの下にのぞく本音 */ .inner-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #ff8fb6; background: transparent; color: #ff6b9a; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; } .inner-btn.on { background: #ff6b9a; color: #fff; border-color: #ff6b9a; } .inner-btn.busy { animation: inner-beat .9s ease-in-out infinite; } /* 心の声を読み込み中 */ @keyframes inner-beat { 50% { transform: scale(1.18); box-shadow: 0 0 0 6px rgba(255, 107, 154, .18); } } .inner-voice.loading { display: flex; align-items: center; gap: 5px; min-height: 20px; } .inner-voice .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff6b9a; animation: blink 1.2s infinite; } .inner-voice .dot:nth-of-type(2) { animation-delay: .2s; } .inner-voice .dot:nth-of-type(3) { animation-delay: .4s; } @media (prefers-reduced-motion: reduce) { .inner-btn.busy { animation: none; } } /* ⚠ 背景を透かすと壁紙の上で字が読めなかった（09-27 Yuji）。テーマ・壁紙に関係なく、無地の薄いピンクに濃い字 */ .inner-voice { margin-top: 6px; padding: 8px 12px; border-radius: 14px; border: 1px dashed #ff8fb6; background: #fff1f5; color: #3b2530; box-shadow: 0 2px 10px rgba(0,0,0,.12); font-size: 13px; line-height: 1.6; font-style: italic; animation: fade .25s ease-out; } .inner-voice::before { content: "♡ "; color: #ff6b9a; font-style: normal; } /* ---- ホワイトの差し色（2026-09-27 Yuji ①ピンク）---- 白と黒だけだと冷たく見えるので、「気持ち」に関わる小さな所だけピンクにする（♥ +N・心の声と同じ色）。ボタンと文字は白黒のまま */ :root[data-theme="white"] { --hl: #ff5c8a; --hl-soft: #fff0f4; --hl-line: #ffc2d4; } :root[data-theme="white"] .bar i { background: linear-gradient(90deg, #ff9dbc, #ff5c8a); } :root[data-theme="white"] .tabbar a.on { color: var(--hl); } :root[data-theme="white"] .tabbar a.on .icon { background: var(--hl-soft); } :root[data-theme="white"] .chapter .ch-go { background: var(--hl); color: #fff; } :root[data-theme="white"] .chapter .ch-go.again { background: transparent; color: var(--hl); border-color: var(--hl); } :root[data-theme="white"] .chapter.fresh { background: var(--hl-soft); } :root[data-theme="white"] .wall-opt.on .wall-sw::before { border-color: var(--hl); } :root[data-theme="white"] .wall-opt.on .wall-sw::after { background: var(--hl); color: #fff; } :root[data-theme="white"] .plan.current { border-color: var(--hl); background: var(--hl-soft); } :root[data-theme="white"] .plan .plan-now { background: var(--hl); color: #fff; } :root[data-theme="white"] .secret-open.ready { border-color: var(--hl); color: var(--hl); background: var(--hl-soft); } :root[data-theme="white"] .occasion.found { color: var(--hl); } /* 思い出したこと（スタンダード以上）: 返事の下に小さく。壁紙の上でも読めるように無地 */ .recalled { margin-top: 5px; padding: 5px 10px; border-radius: 10px; background: var(--card); color: var(--muted); font-size: 11.5px; line-height: 1.5; border: 1px solid var(--line); max-width: 100%; overflow-wrap: anywhere; } .recalled::before { content: "💭 "; } :root[data-theme="white"] .recalled { color: #b0406a; border-color: var(--hl-line); background: var(--hl-soft); } /* プロの印 */ /* ⚠ ピンクは女の子っぽい（09-27 Yuji）。よくある AI の色（紫→青→赤のグラデーション） */ .pro-mark { display: inline-block; vertical-align: middle; padding: 1px 7px; border-radius: 6px; background: linear-gradient(120deg, #7c4dff 0%, #3d7bff 45%, #ff4d6d 100%); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1.6; } h2 .pro-mark { font-size: 11px; margin-left: 4px; } /* プランを比べる表 */ .plan-table { margin: 14px 0 4px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 11.5px; } .plan-table .pt-row { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); align-items: center; } .plan-table .pt-row + .pt-row { border-top: 1px solid var(--line); } .plan-table .pt-row > span { padding: 8px 4px; text-align: center; line-height: 1.35; overflow-wrap: anywhere; } .plan-table .pt-row > span:first-child { text-align: left; padding-left: 10px; color: var(--muted); } .plan-table .pt-head > span { font-weight: 700; font-size: 10px; letter-spacing: -.03em; white-space: nowrap; } .plan-table span.cur { background: var(--accent-soft); font-weight: 700; } .plan-table span.no { color: var(--muted); } :root[data-theme="white"] .plan-table span.cur { background: var(--hl-soft); } /* 札: 「/月」を金額の右に。狭い端末でも折り返さない（09-27 Yuji） */ .plan .price-row { display: flex; align-items: baseline; justify-content: center; gap: 1px; white-space: nowrap; } .plan .price-row .price { font-size: clamp(13px, 4vw, 16px); } .plan .price-row .per { font-size: 10px; } /* 比べる表: 今のプランの列の色を行の高さいっぱいに（字の高さぶんだけ塗っていて、上下に隙間ができていた） */ .plan-table .pt-row { align-items: stretch; } .plan-table .pt-row > span { display: flex; align-items: center; justify-content: center; } .plan-table .pt-row > span:first-child { justify-content: flex-start; } /* 通話中のハート（下から揺れながら上がって消える・1.9秒） */ .call-screen .cs-hearts { position: absolute; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom, 0px)); width: 0; height: 0; pointer-events: none; z-index: 5; } .call-screen .cs-hearts i { position: absolute; left: var(--x); bottom: 0; font-style: normal; line-height: 1; text-shadow: 0 2px 8px rgba(0,0,0,.25); animation: cs-heart 1.9s linear forwards; } @keyframes cs-heart { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 10% { opacity: 1; } 20% { transform: translate(calc(-50% + var(--sway)), calc(var(--rise) * -.2)) scale(1.2); } 45% { transform: translate(calc(-50% - var(--sway)), calc(var(--rise) * -.45)) scale(1.2); } 70% { opacity: 1; transform: translate(calc(-50% + var(--sway)), calc(var(--rise) * -.7)) scale(1.2); } 100% { opacity: 0; transform: translate(-50%, calc(var(--rise) * -1)) scale(1.2); } } .call-screen .heart-btn { color: #ff5fa2; } /* プランが上がったときの「できるようになったこと」（09-27） */ .plan-welcome .pw-list { list-style: none; margin: 10px 0 16px; padding: 0; display: grid; gap: 8px; } .plan-welcome .pw-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--chip, rgba(127,127,127,.12)); } .plan-welcome .pw-list li::before { content: "✓"; color: var(--hl, #ff5c8a); font-weight: 700; margin-right: 8px; } .plan-welcome .pw-list li span { flex: 1; } .plan-welcome .pw-list li b { font-weight: 600; white-space: nowrap; } /* ---- コイン（09-28・backend/coins.py） ---- */ /* ぼかして届いた写真: 押すと80コインで開く（開いたときに描く） */ .photo-lock { position: relative; display: block; width: 200px; max-width: 70vw; aspect-ratio: 1; border-radius: 16px; overflow: hidden; border: 0; padding: 0; margin-bottom: 6px; cursor: pointer; background: var(--bg-2); } /* 届いた自撮り（開く前）: ぼかし絵ではなく「自撮りが届いています」のカード（09-28 Yuji） */ .photo-lock { background: linear-gradient(145deg, var(--accent), #ff8fb3); } .photo-lock .pl-art { position: absolute; inset: 0 0 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; } .photo-lock .pl-art .icon { width: 44px; height: 44px; opacity: .95; } .photo-lock .pl-art b { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.18); } .photo-lock .pl-cap { position: absolute; inset: auto 10px 10px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 700; } .photo-lock .pl-cap .icon { width: 14px; height: 14px; } .photo-lock.busy .pl-cap { animation: nv-blink 1.4s ease-in-out infinite; } .gift-price .icon, .pk-price .icon, .cp-n .icon, .coin-have .icon, .coin-row .icon { width: 1em; height: 1em; margin-right: 3px; } .coin-confirm .cc-cost { display: flex; align-items: baseline; gap: 10px; margin: 10px 0; } .coin-confirm .cc-cost b { font-size: 20px; color: var(--ink); } .coin-confirm .cc-alt { display: block; margin: 12px auto 0; font-size: 12px; } .coin-shop .coin-have { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 12px; color: var(--ink); } .coin-shop .coin-have b { font-size: 24px; } .coin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .coin-pack { position: relative; display: grid; gap: 2px; justify-items: center; padding: 14px 8px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); font: inherit; cursor: pointer; } .coin-pack:disabled { opacity: .6; cursor: default; } .coin-pack.first { grid-column: 1 / -1; border-color: var(--accent); border-width: 2px; } .coin-pack .cp-tag { position: absolute; top: -9px; padding: 1px 10px; border-radius: 99px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; } .coin-pack .cp-n { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; } .coin-pack .cp-price { font-size: 12px; color: var(--muted); min-height: 1em; } .coin-row { display: flex; align-items: center; gap: 8px; margin: 8px 2px 4px; color: var(--ink); } .coin-row b { font-size: 17px; font-variant-numeric: tabular-nums; } .coin-row .link-btn { margin-left: auto; } /* プランの紹介（1画面・zeta pass の画面を参考・09-28 Yuji） */ .plan-sheet-wrap { align-items: stretch; } .sheet.plan-sheet { display: flex; flex-direction: column; max-height: 92dvh; padding: 0; overflow: hidden; } .plan-sheet .ps-hero { position: relative; height: 180px; flex: none; overflow: hidden; background: var(--bg-2); } .plan-sheet .ps-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .plan-sheet .ps-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.72)); } .plan-sheet .ps-head { position: absolute; left: 20px; right: 20px; bottom: 14px; display: grid; gap: 2px; color: #fff; } .plan-sheet .ps-name { font-size: 24px; font-weight: 800; } .plan-sheet .ps-tag { font-size: 13px; opacity: .9; } .plan-sheet .ps-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px 8px; } .plan-sheet .ps-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; } .plan-sheet .ps-price b { font-size: 26px; color: var(--accent-text); } .plan-sheet .ps-price em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--accent-text); } .plan-sheet .ps-perk { font-size: 13px; color: var(--ink); background: var(--accent-soft); padding: 8px 10px; border-radius: 10px; } .plan-sheet .ps-list { list-style: none; margin: 8px 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); display: grid; gap: 9px; } .plan-sheet .ps-list li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 14px; } .plan-sheet .ps-check { color: var(--accent-text); font-weight: 800; } .plan-sheet .ps-v { font-weight: 700; font-variant-numeric: tabular-nums; } .plan-sheet .ps-cta { flex: none; display: grid; gap: 6px; padding: 10px 20px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); } .plan-sheet .ps-cta .primary-btn { width: 100%; padding: 14px; font-size: 16px; } .plan-sheet .ps-cta .primary-btn:disabled { opacity: .55; } .plan-sheet .ps-cta .primary-btn { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 14px; font: inherit; font-weight: 800; cursor: pointer; } .plan-sheet .ps-cta .ghost { background: transparent; border: 0; color: var(--muted); font: inherit; padding: 6px; cursor: pointer; } .gift-price .icon, .pk-price .icon, .cp-n .icon, .coin-have .icon, .coin-row .icon { vertical-align: -2px; } .gift-price, .pk-price { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; } /* マイページの上（09-28・zeta のマイページを参考）: プラン・コイン・設定の入口 */ .my-top { display: grid; gap: 10px; } .my-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; } .my-card .my-main { display: grid; gap: 2px; flex: 1; min-width: 0; } .my-card .my-main b { font-size: 18px; display: inline-flex; align-items: center; gap: 6px; } .my-card .my-main b .icon { width: 18px; height: 18px; } .my-btn { flex: none; padding: 9px 16px; border-radius: 12px; border: 0; background: var(--bg-2); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; } .my-btn.primary { background: var(--accent); color: var(--on-accent); } .my-link { justify-content: space-between; font-weight: 600; } .my-link span:first-child { display: inline-flex; align-items: center; gap: 8px; } .my-link .icon { width: 18px; height: 18px; } .back-link { display: inline-block; margin: 6px 16px 0; color: var(--muted); text-decoration: none; font-size: 14px; } /* 下タブの選んでいる所は、黒のテーマでは白（09-28 Yuji「下タブの紫は要らない・紫が多くなりすぎる」） */ :root:not([data-theme]) .tabbar a.on, :root[data-theme="black"] .tabbar a.on { color: var(--ink); } :root:not([data-theme]) .tabbar a.on .icon, :root[data-theme="black"] .tabbar a.on .icon { background: #34323a; } details.acc.mem-acc { margin-top: 18px; } /* ⚠ details.acc（margin 0）より強く書く。ふたりの関係のカードとくっついていた（09-28） */ /* チャージの画面（09-28・zeta のチャージを参考）: 上に残り、その下に数と値段の行を縦に、いちばん下に利用案内 */ .coin-page { padding: calc(10px + env(safe-area-inset-top, 0px)) 0 0; } .cpg-have { display: flex; align-items: center; gap: 8px; margin: 6px 16px 4px; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); color: var(--ink); } .cpg-have .icon { width: 20px; height: 20px; color: var(--accent-text); } .cpg-have b { margin-left: auto; font-size: 20px; font-variant-numeric: tabular-nums; } .cpg-soon { margin: 6px 18px 0; } .cpg-h { margin: 18px 16px 6px; font-size: 15px; } .cpg-list { margin: 0 16px; } .screen.sub .packs { margin: 18px 16px 0; } /* スターの画面の「スターで追加する」（ほかの欄と同じ余白） */ .screen.sub .packs .pack-title { font-size: 15px; } .cpg-row { display: flex; align-items: center; gap: 12px; padding: 12px 2px; border-bottom: 1px solid var(--line); } .cpg-n { flex: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .cpg-n .icon { width: 20px; height: 20px; color: var(--accent-text); } .cpg-n em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--accent); color: var(--on-accent); } .cpg-buy { min-width: 88px; padding: 10px 14px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; cursor: pointer; font-variant-numeric: tabular-nums; } .cpg-buy:disabled { opacity: .55; cursor: default; } .cpg-note { margin: 18px 16px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-2); color: var(--muted); font-size: 12px; line-height: 1.7; } .cpg-note b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; } .cpg-note p { margin: 0; } #coinMsg { margin: 8px 18px 0; } /* 文字の強調は薄い紫（黒のテーマ）。ほかのテーマは今までどおり強調色 */ :root { --accent-text: var(--accent); } :root:not([data-theme]), :root[data-theme="black"] { --accent-text: #b8a4ff; } .plan .price, .plan-sheet .ps-price b, .plan-sheet .ps-price em, .plan.year .year-save, .plan-sheet .ps-check, .cpg-have .icon, .cpg-n .icon, .coin-row .icon { color: var(--accent-text); } /* 下の画面（プラン・チャージ・設定）の上の帯は固定（09-28 Yuji「一緒に動いてしまう」・zeta と同じ） */ .screen.sub .subnav { flex: none; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; min-height: 52px; padding: env(safe-area-inset-top, 0px) 4px 0; border-bottom: 1px solid var(--line); background: var(--bg); } .screen.sub .subnav h2 { margin: 0; text-align: center; font-size: 17px; font-weight: 700; color: var(--ink); } .screen.sub .sn-back { display: grid; place-items: center; height: 44px; font-size: 28px; line-height: 1; color: var(--ink); text-decoration: none; } .screen.sub .coin-page { padding-top: 0; } /* 一つ下の画面の中身と上の帯の間（09-28 Yuji「ナビゲーションとの隙間が狭い」） */ .screen.sub .scroll, .screen.sub .scroll.coin-page { padding-top: 14px; } /* 次の章へ続く引き（09-28 Yuji「続きが読みたくなる終わり方・韓流ドラマのように」） */ /* 次の章へ続く引き（09-29 Yuji「もう少し目立つように」）: 1文ずつ浮かび上がり、最後に「つづく」 */ .ch-hook { position: relative; margin: 28px 0 10px; padding: 26px 18px 16px; text-align: center; border-radius: 18px; background: radial-gradient(120% 90% at 50% 0%, rgba(184, 164, 255, .22), rgba(0, 0, 0, .55) 70%); border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 10px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .12); } .ch-hook::before { content: ""; position: absolute; left: 50%; top: 0; width: 40%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); } .ch-hook .hk-line { margin: 0 0 6px; font-size: 18px; line-height: 1.9; color: #fff; font-weight: 600; letter-spacing: .02em; text-shadow: 0 0 18px rgba(184, 164, 255, .45), 0 2px 6px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(6px); animation: hk-in 1.1s ease forwards; animation-delay: calc(var(--i) * 1.1s + .3s); } .ch-hook .hk-foot { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; opacity: 0; animation: hk-in 1s ease forwards; animation-delay: calc(var(--n) * 1.1s + .6s); } .ch-hook .ch-tbc { font-size: 13px; letter-spacing: .6em; color: rgba(255, 255, 255, .85); padding-left: .6em; } .ch-hook .hk-play { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35); background: rgba(0, 0, 0, .3); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } @keyframes hk-in { to { opacity: 1; transform: none; } } /* 答えた直後は、ひなたの返事を読む間（1.8秒）をあけてから引きを出す */ /* 引きのあとに出る続きのボタン（出るまでは見えず、押せない） */ .novel [data-after] { opacity: 0; visibility: hidden; transform: translateY(6px); animation: hk-after .8s ease forwards; } @keyframes hk-after { to { opacity: 1; visibility: visible; transform: none; } } @media (prefers-reduced-motion: reduce) { .novel [data-after] { animation: none; opacity: 1; visibility: visible; transform: none; } } /* ボイスが入: ひとことの声が終わるまで待つ（wait）→ 出す（now） */ .novel .ch-hook.wait, .novel .ch-hook.wait .hk-line, .novel .ch-hook.wait .hk-foot { animation: none; opacity: 0; } /* ⚠ .ch-hook.late より強く（後に書いた late の animation が勝っていた） */ .novel [data-after][data-wait] { animation: none; opacity: 0; visibility: hidden; } .ch-hook.now { opacity: 0; transform: translateY(8px); animation: hk-in .9s ease .1s forwards; } .ch-hook.now .hk-line { animation-delay: calc(var(--i) * 1.1s + .5s); } .ch-hook.now .hk-foot { animation-delay: calc(var(--n) * 1.1s + .8s); } .ch-hook.late { opacity: 0; transform: translateY(8px); animation: hk-in .9s ease 1.8s forwards; } .ch-hook.late .hk-line { animation-delay: calc(var(--i) * 1.1s + 2.3s); } .ch-hook.late .hk-foot { animation-delay: calc(var(--n) * 1.1s + 2.6s); } @media (prefers-reduced-motion: reduce) { .ch-hook, .ch-hook .hk-line, .ch-hook .hk-foot { animation: none; opacity: 1; transform: none; } } .story-fixed .story-rel { margin: 0 0 6px; font-weight: 700; color: var(--ink); } .story-fixed .story-text { margin: 0 0 10px; font-size: 14px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; } /* マイページのボタン（購読・チャージ・保存）は角の丸みを抑えて小さく（09-28 Yuji） */ .my-btn { padding: 6px 12px; border-radius: 8px; font-size: 13px; } .screen .invite button { border-radius: 8px; padding: 0 12px; font-size: 13px; } .album-sub { margin: 12px 2px 6px; font-size: 12px; color: var(--muted); letter-spacing: .05em; } .ch-ending-art { display: block; width: 100%; max-width: 320px; aspect-ratio: 9 / 16; object-fit: cover; margin: 0 auto 12px; border-radius: 14px; background: var(--bg-2); } .legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin: 18px 0 8px; font-size: 12px; } .legal-links a { color: var(--muted); text-decoration: underline; } .copyright, .onboard p.copyright { margin: 0 0 8px; text-align: center; font-size: 11px; color: var(--muted); letter-spacing: .02em; } /* PC では幅を 600px に抑えて真ん中に置き、外側は背景にする（09-28 Yuji「きらめきウェブのように全画面に広げず、外側は背景に」）。 ⚠ スマホ（幅 720px 未満）は今までどおり。全画面に出していた画面（最初の案内・電話・物語）も同じ枠に収める */ @media (min-width: 720px) { body { background: radial-gradient(900px 700px at 12% 8%, var(--accent-glow), transparent 62%), radial-gradient(800px 700px at 90% 92%, var(--blob-2), transparent 60%), var(--bg-2); background-attachment: fixed; } #app { box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgba(0, 0, 0, .28); } .onboard, .call-screen, .novel { left: calc(50% - 300px); right: calc(50% - 300px); box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgba(0, 0, 0, .28); } } /* はじめの案内の「戻る」（2枚目から・09-28） */ .onboard .ob-back { position: absolute; top: calc(12px + env(safe-area-inset-top, 0px)); left: 12px; z-index: 2; background: none; border: 0; padding: 8px 12px; font-size: 15px; color: var(--muted); border-radius: 99px; } .onboard .ob-back:hover { background: var(--bg-2); color: var(--ink); } /* 声の見本の話す動画: 始めと終わりはふんわり、途中の入れ替えもゆっくり（09-28 Yuji「画面が急に切り替わる。スムーズに」） */ .look-talk { transition: opacity .35s ease; } .look-stage.talking .look-talk { transition: opacity .2s ease; } /* はじめの案内の「見た目と声」を1画面に収める（09-28 Yuji「縦に長い・次へが見えない」） */ .lv.compact .look-stage { max-height: 30vh; max-width: 220px; } .lv.compact .lv-label { margin-top: 10px; } .lv.compact .row { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 6px; margin: 0 -4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; } .lv.compact .row::-webkit-scrollbar { display: none; } .lv.compact .looks.row .look-opt { flex: 0 0 64px; width: 64px; height: 64px; scroll-snap-align: start; } .lv.compact .voices.row .voice-opt { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; } /* 「次へ」を下に固定して、いつでも見えるようにする */ .onboard .next { position: sticky; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 3; } /* 背の低い画面（iPhone SE など）では絵をさらに小さくし、「次へ」が声の列に重ならないようにする */ @media (max-height: 720px) { .lv.compact .look-stage { max-height: 22vh; max-width: 160px; } .lv.compact .look-char { margin-top: 2px; } .lv.compact .lv-label { margin-top: 6px; } } /* 絵を押すと話す（09-28） */ .look-stage { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* はじめの案内の「どんなひなたと話す？」の2人を大きく（09-28 Yuji「ちょっと小さい」）。設定の小さい並び（.small）は今までどおり */ .onboard .partners:not(.small) { max-width: 420px; gap: 14px; } .onboard .partners:not(.small) .partner-opt { padding: 18px 10px 16px; } .onboard .partners:not(.small) .partner-opt .avatar.big { width: 132px; height: 132px; font-size: 48px; margin-bottom: 8px; } .onboard .partners:not(.small) .partner-opt b { font-size: 16px; } .onboard .partners:not(.small) .partner-opt small { font-size: 13px; } @media (max-width: 360px) { .onboard .partners:not(.small) .partner-opt .avatar.big { width: 108px; height: 108px; } } /* 口の絵（半開き・開き）を静止画に重ねて口だけ動かす（09-28・話す動画を外したので）。⚠ 静止画と同じ切り取り */ .look-mouth { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .look-mouth.on { opacity: 1; } .look-mouth:not([src]) { display: none; } .call-screen .cs-mouth { position: absolute; inset: 0; background-size: cover; background-position: center 18%; opacity: 0; pointer-events: none; } .call-screen .cs-mouth.on { opacity: 1; } /* はじめの案内の「はじめまして」以降のひなたの顔を大きく（09-28 Yuji「アイコンが小さい」）。一覧の2人（.partner-opt）は別の指定 */ .onboard > .avatar.big, .onboard .ob-step > .avatar.big { width: 210px; height: 210px; font-size: 72px; } @media (max-height: 700px) { .onboard > .avatar.big, .onboard .ob-step > .avatar.big { width: 160px; height: 160px; } } /* 毎日のごほうびのダイアログ（09-28・トークの中のカードから移した） */ .ck-sheet { text-align: center; } .ck-sheet .ck-face { width: 88px; height: 88px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; background: var(--bg-2); display: flex; align-items: center; justify-content: center; font-size: 32px; } .ck-sheet .ck-face img { width: 100%; height: 100%; object-fit: cover; } .ck-sheet .ck-sub { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.7; min-height: 3.4em; } .ck-sheet .sheet-actions .ck-btn { min-height: 0; padding: 13px; border-radius: 14px; } .sheet-backdrop.fade-out { opacity: 0; transition: opacity .25s ease; } /* 「声がおかしい」を、壁紙の上でも読める小さな札に（09-28 Yuji「文字が薄くて見えづらい。壁紙によっては見えなくなる」） */ .vrep { margin-top: 4px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--glass-line); background: var(--glass-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--ink); text-decoration: none; font-weight: 600; } .vrep:disabled { color: var(--muted); } .row.ai:has(.vrep:not([hidden])) { margin-bottom: 24px; } /* 時刻も明るい壁紙で消えないよう、影を濃くする（09-28・「声がおかしい」と一緒に見直し） */ .talk.has-art .time { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.75), 0 1px 2px rgba(0,0,0,.6); } /* はじめの案内の「Google で続ける」（09-28・次へ の下に控えめに） */ .onboard .ob-google { width: 100%; max-width: 340px; margin: 18px auto 0; border-radius: 99px; } /* お問い合わせのメールアドレス（文字で出すだけ・長押しで選べる） */ .contact-mail { user-select: text; -webkit-user-select: text; } .version.contact-line { margin-bottom: 0; } .version.contact-line + .version { margin-top: 6px; } /* プランの表の下の注意書き（09-29） */ .sub-notes { margin: 16px 2px 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.7; color: var(--muted); } .sub-notes b { display: block; margin-bottom: 4px; font-size: 12px; color: var(--ink); } .sub-notes ul { margin: 0; padding-left: 1.2em; display: grid; gap: 2px; } .sub-notes .sub-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 11.5px; } .sub-notes .sub-links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } /* ---- ひなたの日常（5つ目のタブ・09-29・app.js の screenDaily）---- いちばん上に「いまのひなた」、その下に投稿のカード（絵 4:5・2〜3行・時刻）。色は今のトークン、カードは .card と同じ地 */ .tabbar a { min-width: 0; } /* 5つのタブ: 相手の名前（12字まで）が長くても、タブが縮んで名前を「…」にする（縮まないと 360px で右にはみ出した） */ @media (max-width: 340px) { .tabbar a .icon { padding: 3px 12px; } } /* 5つのタブが 320px の端末でも1行に収まるように */ .feed-screen { padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 0; } .feed-title { margin: 4px 2px 12px; font-size: 20px; } /* .album-title と同じ */ .now-card { display: flex; align-items: center; gap: 12px; } .now-card .avatar { width: 44px; height: 44px; font-size: 18px; box-shadow: none; } .now-card .avatar.online::after { border-color: var(--card); } .now-text { display: grid; gap: 2px; min-width: 0; } .now-label { font-size: 12px; color: var(--muted); font-weight: 600; } .card .now-line { margin: 0; font-size: 15px; line-height: 1.5; } .post { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px 6px; box-shadow: 0 2px 12px rgba(60, 20, 50, .04); } .now-card + .post, .post + .post { margin-top: 12px; } .post-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; } .post-head .avatar { width: 28px; height: 28px; font-size: 12px; box-shadow: none; } .post-head b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-head time { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); } /* 絵は縦横を先に決める（読み込みの前後で高さが変わらない・スクロールの位置が戻る） */ .post-art { display: block; width: 100%; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--bg-2); cursor: zoom-in; } .post-art.sq { aspect-ratio: 1; } .post-img { display: block; width: 100%; height: 100%; object-fit: cover; } .post .photo-lock { width: 100%; max-width: none; aspect-ratio: 1; margin: 0; border-radius: 14px; } .post-text { margin: 10px 2px 2px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; } html:lang(ja) .post-text { word-break: normal; } .post-actions { display: flex; align-items: center; gap: 2px; margin: 0 -8px; } .pa { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; height: 38px; padding: 0 8px; border: 0; border-radius: 99px; background: none; color: var(--muted); } .pa .icon { width: 20px; height: 20px; } .pa-n { font-size: 13px; font-variant-numeric: tabular-nums; } .pa-n:empty { display: none; } .pa.like.on { color: var(--accent-text); } .pa.like.on svg { fill: currentColor; } :root[data-theme="white"] .pa.like.on { color: var(--hl); } /* 気持ちに関わる所はピンク（白のテーマの ♥ +N・心の声と同じ） */ .pa.voice .pi { display: inline-flex; } .pa.voice .eq { display: none; align-items: flex-end; gap: 2px; width: 14px; height: 14px; } .pa.voice .eq i { display: block; width: 3px; height: 40%; border-radius: 2px; background: currentColor; animation: vo-eq .8s ease-in-out infinite; } .pa.voice .eq i:nth-child(2) { animation-delay: -.3s; } .pa.voice .eq i:nth-child(3) { animation-delay: -.55s; } .pa.voice.playing { color: var(--accent-text); } .pa.voice.playing .pi { display: none; } .pa.voice.playing .eq { display: inline-flex; } .pa.voice.loading { color: var(--accent-text); animation: sp-wait 1s ease-in-out infinite; } .pa.voice.stopped { animation: vo-pop .35s ease-out; } .pa-lock { position: absolute; right: 3px; bottom: 5px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--muted); } .pa-lock .icon { width: 11px; height: 11px; } .post-talk { margin-left: auto; min-width: 0; padding: 8px 8px; border: 0; background: none; color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: right; } /* 書いている最中（点3つだけ）・はじめて開いたときの灰色のカード */ .post.writing { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 12px 16px 12px 14px; } .post.writing .post-head { margin: 0; } .post.writing .typing-inline { padding: 0; } .post.skeleton { display: grid; gap: 10px; padding: 14px; } .post.skeleton i { display: block; border-radius: 8px; background: var(--bg-2); } .post.skeleton i:nth-child(1) { width: 38%; height: 14px; } .post.skeleton i:nth-child(2) { width: 100%; aspect-ratio: 4 / 5; border-radius: 14px; } .post.skeleton i:nth-child(3) { width: 78%; height: 14px; margin-bottom: 6px; } .feed-empty { margin: 28px 4px; display: grid; gap: 12px; justify-items: center; text-align: center; } .feed-empty p { margin: 0; color: var(--muted); font-size: 14px; } .feed-empty .ghost-btn { width: auto; padding: 10px 22px; } .feed-more { display: block; width: 100%; min-height: 44px; margin-top: 8px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; } .feed-more-wait { justify-content: center; margin-top: 14px; } @media (prefers-reduced-motion: no-preference) { .post.enter { animation: post-in .5s cubic-bezier(.2, .9, .3, 1.1) both; } /* 新しく届いた投稿だけ（トークの吹き出しと同じ考え） */ @keyframes post-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } } .pa.like.pop svg { animation: like-pop .35s ease-out; } @keyframes like-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } } .post.skeleton i { animation: skel 1.6s ease-in-out infinite; } @keyframes skel { 50% { opacity: .5; } } } @media (prefers-reduced-motion: reduce) { .pa.voice.loading, .pa.voice.stopped, .pa.voice .eq i { animation: none; } } /* コメントのシート: 上に投稿の頭・やり取り（ここだけスクロール）・入力欄 */ .sheet.cm-sheet { display: flex; flex-direction: column; max-height: 86dvh; padding: 14px 14px calc(12px + env(safe-area-inset-bottom, 0px)); } .cm-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 0 2px 10px; border-bottom: 1px solid var(--line); } .cm-thumb { flex: none; width: 44px; height: 55px; border-radius: 8px; overflow: hidden; background: var(--bg-2); display: grid; place-items: center; color: var(--muted); } .cm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .cm-thumb .icon { width: 20px; height: 20px; } .cm-sheet .cm-post { flex: 1; min-width: 0; margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .cm-x { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--muted); } .cm-x .icon { width: 15px; height: 15px; } .cm-list { flex: 1; min-height: 64px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding: 12px 2px; } .cm-list .row .avatar { width: 28px; height: 28px; font-size: 12px; } .cm-list .bubble { max-width: 80%; font-size: 14px; } .cm-list .row.ai .bubble { background: var(--bubble-ai); border-bottom-left-radius: 6px; } .cm-list .row.user .bubble { background: var(--grad); color: var(--on-accent); border-bottom-right-radius: 6px; } :root[data-theme="pink"] .cm-list .row.ai .bubble { background: var(--bg-2); } /* ピンクは吹き出しの地が白（シートと同じ色）なので少しだけ色を付ける */ .cm-guide { flex: none; } .cm-guide:empty { display: none; } .cm-guide .free-card { margin: 4px 0 8px; } .cm-guide .hint { display: block; width: fit-content; margin: 4px auto 10px; } .cm-guide .cm-got { text-align: center; color: var(--ink); } .cm-foot { flex: none; } .cm-form .pill { display: flex; align-items: flex-end; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 24px; background: var(--bg-2); border: 1px solid var(--line); } .cm-form textarea { flex: 1; min-width: 0; resize: none; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.4; padding: 8px 0; max-height: 96px; outline: none; } .cm-form .send { width: 36px; height: 36px; background: var(--grad); } .cm-sheet .cm-limit { margin: 8px 0 2px; text-align: center; font-size: 13px; color: var(--muted); } /* トーク: 声の手紙の吹き出し（押すと本文を開いて声で読む）・投稿の話の札・投稿を見て話しかけた発言の引用 */ .letter-msg { display: grid; gap: 6px; max-width: 76%; padding: 10px 14px 11px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 18px; border-bottom-left-radius: 6px; background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 2px 10px rgba(60, 20, 50, .08); animation: pop .18s ease-out; } .lm-head { display: flex; align-items: center; gap: 6px; font-size: 14px; } .lm-head .icon { width: 18px; height: 18px; color: var(--accent-text); } .lm-text { font-size: 14px; line-height: 1.7; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .letter-msg.open .lm-text { display: block; color: var(--ink); } html:lang(ja) .lm-text { word-break: normal; } .lm-play { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px 4px 9px; border-radius: 99px; border: 1px solid var(--line); background: var(--bg-2); font-size: 12px; font-weight: 600; } .lm-play .pi { display: inline-flex; } .lm-play .icon { width: 13px; height: 13px; } .lm-play .eq { display: none; align-items: flex-end; gap: 2px; width: 12px; height: 12px; } .lm-play .eq i { display: block; width: 2.5px; height: 40%; border-radius: 2px; background: currentColor; animation: vo-eq .8s ease-in-out infinite; } .lm-play .eq i:nth-child(2) { animation-delay: -.3s; } .lm-play .eq i:nth-child(3) { animation-delay: -.55s; } .letter-msg.playing .lm-play { border-color: var(--accent); color: var(--accent-text); } .letter-msg.playing .lm-play .pi { display: none; } .letter-msg.playing .lm-play .eq { display: inline-flex; } .letter-msg.loading .lm-play { color: var(--accent-text); animation: sp-wait 1s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .letter-msg.loading .lm-play, .lm-play .eq i { animation: none; } } .post-chip { flex: 0 1 auto; min-width: 0; max-width: 100%; } .post-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .post-chip button { flex: none; padding: 0 2px 0 4px; border: 0; background: none; color: inherit; font-size: 13px; line-height: 1; } .ref-post { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 10px; border-radius: 12px; font-size: 12px; color: var(--muted); background: var(--glass-strong); border: 1px solid var(--glass-line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .ref-post .icon { flex: none; width: 13px; height: 13px; } .ref-post span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }