/* A2: AIパクくん公式HPの工夫をスリジェの見た目で(本人U18・2026-10-03)。色と書体は style.css の変数。
   1 会話の実演(頼む→考え中→返事の中で写真が作品に)/2 透かし(番号つきの点線の枠と札)/3 題の上の小見出し/
   4 大きな数字の手順/5 発信の4つ/6 結びの正直な一言 */

/* 3 小見出し(題の上・桜色の細い線つき) */
.kicker{display:flex;align-items:center;gap:10px;margin:0 22px 8px;font-size:12px;line-height:1.4;letter-spacing:.24em;color:var(--sakura-d);font-weight:700}
.kicker::before{content:"";flex:none;width:22px;height:1px;background:var(--sakura-d)}

/* 1 会話の実演 */
.chat{margin:30px 16px 0}
.chat .kicker{margin:0 6px 8px}
.c-head{margin:0 6px 6px;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.5;letter-spacing:.03em;word-break:auto-phrase}
.c-lead{margin:0 6px 14px;font-size:14.5px;line-height:1.7;color:var(--sub)}
.c-asks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.c-asks button{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--sakura);background:#fff;color:var(--sakura-d);font:inherit;font-size:13.5px;font-weight:700;line-height:1.3;cursor:pointer}
.c-asks button[aria-pressed="true"]{background:var(--sakura-d);border-color:var(--sakura-d);color:#fff}
.c-win{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 32px rgba(42,35,38,.10);overflow:hidden}
.c-top{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;line-height:1.4}
.c-top .dots{display:flex;gap:4px}
.c-top .dots i{width:7px;height:7px;border-radius:50%;background:#E8DCD2}
.c-top small{margin-left:auto;font-size:12px;color:var(--sub)}
/* 会話の欄は一定の高さで、中だけを送る(公式HPと同じ・動いても下の文が押し下がらない) */
.c-log{position:relative;display:flex;flex-direction:column;gap:12px;height:clamp(460px,60vh,540px);overflow-y:auto;padding:14px 12px;background:linear-gradient(#FFFDFB,#FBF6F1);scrollbar-width:thin}
.c-log > *{flex:none}
.c-empty{margin:auto;display:grid;justify-items:center;gap:10px;text-align:center}
.c-empty img{width:min(200px,70%);aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:0 8px 22px rgba(42,35,38,.12)}
.c-empty p{font-size:13px;line-height:1.6;color:var(--sub)}
.c-msg{max-width:88%;padding:10px 12px;border-radius:16px;font-size:14px;line-height:1.7}
.c-me{align-self:flex-end;display:grid;gap:8px;background:#F7E6EA;color:#4A2230;border-bottom-right-radius:6px}
.c-me .c-photo{justify-self:end;width:84px;height:84px;object-fit:cover;border-radius:10px}
.c-ai{align-self:flex-start;display:grid;gap:10px;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px}
.c-who{font-size:12px;letter-spacing:.12em;color:var(--sakura-d);font-weight:700;line-height:1.2}
.c-work{position:relative;margin:0;width:min(240px,100%);border-radius:10px;overflow:hidden;background:#EFE7DE}
.c-work[data-kind="tall"]{width:min(176px,100%)}
.c-work img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.c-work[data-kind="tall"] img{aspect-ratio:2/3}
.c-work .c-done{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .8s ease}
.c-work.done .c-done{opacity:1}
.c-tags{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;line-height:1.3}
.c-tags span{padding:3px 10px;border-radius:999px;background:#F3ECE4;color:var(--sub);font-weight:700;transition:background .4s,color .4s}
.c-tags .t1{background:#2A2326;color:#fff}
.c-tags.done .t1{background:#F3ECE4;color:var(--sub)}
.c-tags.done .t2{background:var(--sakura-d);color:#fff}
.c-xray{justify-self:start;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--sakura-d);background:#fff;color:var(--sakura-d);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .4s}
.c-ai.ready .c-xray{opacity:1;visibility:visible}
.c-ai.hint .c-xray{animation:c-hint 1.2s ease 1}
@keyframes c-hint{0%,100%{box-shadow:0 0 0 0 rgba(140,66,86,0)}40%{box-shadow:0 0 0 6px rgba(231,161,174,.45)}}
.c-xray[aria-pressed="true"]{background:var(--sakura-d);color:#fff}
.c-think{align-self:flex-start;display:flex;gap:5px;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:16px;border-bottom-left-radius:6px}
.c-think span{width:6px;height:6px;border-radius:50%;background:var(--sakura);animation:c-dot 1s ease-in-out infinite}
.c-think span:nth-child(2){animation-delay:.15s}.c-think span:nth-child(3){animation-delay:.3s}
@keyframes c-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-3px);opacity:1}}
.c-comp{display:flex;align-items:center;gap:8px;min-height:44px;margin:0 10px 10px;padding:6px 6px 6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;line-height:1.4}
.c-entry{flex:1;min-width:0;display:flex;justify-content:flex-end;overflow:hidden;white-space:nowrap}
.c-entry .c-txt{flex:none}
.c-caret{flex:none;width:1.5px;height:1.2em;margin-left:1px;background:var(--sakura-d);display:none}
.c-comp.typing .c-caret{display:block}
.c-comp.typing .c-ph{display:none}
.c-comp:not(.typing) .c-entry{display:none}
.c-ph{flex:1;color:#8A7E82}
.c-send{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sakura-d);color:#fff;font-size:14px}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 4px 0}
.c-foot small{font-size:12px;line-height:1.6;color:#3A3034}
.c-again{flex:none;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.c-next{margin:20px 6px 0;font-family:var(--serif);font-size:17px;line-height:1.7;text-align:center;color:var(--ink)}

/* 2 透かし */
.xr{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s}
.c-ai.xon .xr{opacity:1}
.xr::after{content:"";position:absolute;left:0;right:0;top:-35%;height:35%;background:linear-gradient(transparent,rgba(231,161,174,.42),transparent)}
.c-ai.xon .xr::after{animation:x-scan 1.1s ease-out 1 both}
@keyframes x-scan{to{top:100%}}
.xb{position:absolute;border:2px dashed var(--sakura-d);border-radius:6px;background:rgba(231,161,174,.14)}
.xb.all{border-style:dotted;border-color:rgba(140,66,86,.7);background:none}
.c-ai.xon .xb{animation:x-in .45s ease both}
.c-ai.xon .xb:nth-child(2){animation-delay:.25s}.c-ai.xon .xb:nth-child(3){animation-delay:.5s}
@keyframes x-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.xb i,.xl i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sakura-d);color:#fff;font-style:normal;font-size:12px;font-weight:700;line-height:1}
.xb i{position:absolute;top:4px;left:4px;box-shadow:0 0 0 2px #fff}
.xb.tr i{left:auto;right:4px}
.xb.bl i{top:auto;bottom:4px}
.xl{display:none;list-style:none;margin:0;padding:0;gap:6px;font-size:13px;line-height:1.5}
.c-ai.xon .xl{display:grid}
.xl li{display:flex;align-items:center;gap:8px}
.xl i{flex:none}
.xl b{font-weight:700;margin-right:4px}

/* 5 発信の4つ */
.chan{margin:30px 22px 0;padding-top:22px;border-top:1px solid var(--line)}
.chan-h{margin:0 0 10px;font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.5}
.chan ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chan a{position:relative;display:flex;flex-direction:column;gap:6px;min-height:88px;padding:12px 12px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);text-decoration:none}
.chan a::after{content:"↗";position:absolute;top:9px;right:10px;font-size:12px;color:var(--sub)}
.chan .pf{align-self:flex-start;padding:1px 9px;border:1px solid var(--sakura);border-radius:999px;background:#FBEFF2;color:var(--sakura-d);font-size:12px;font-weight:700;letter-spacing:.04em;line-height:1.6}
.chan b{font-size:14px;line-height:1.5;font-weight:700}
.chan + .note{margin-top:10px}

/* 4 大きな数字の手順 */
.steps.hp li{gap:14px}
.steps.hp li::before{display:none}
.steps.hp .n{flex:none;width:44px;font-family:var(--serif);font-weight:400;font-size:34px;line-height:1;letter-spacing:.02em;color:var(--sakura-d)}
.steps.hp .t{flex:1;min-width:0;display:grid;gap:4px}
.steps.hp .t b{font-size:16.5px;line-height:1.5}
.steps.hp .t span{font-size:13.5px;line-height:1.7;color:var(--sub)}
.steps.hp li > img,.steps.hp li > .vwrap{order:3;width:84px;height:84px}
.steps.hp .t b{font-size:16px}
/* 狭い幅は文字の幅を優先して、手順の小さな写真を外す */
@media (max-width:360px){.steps.hp li > img,.steps.hp li > .vwrap{display:none}}

/* 6 結び */
footer .f-tag{margin:0 0 6px;font-family:var(--serif);font-size:14px;color:var(--ink);letter-spacing:.06em}
footer .f-ai{margin:0 auto 10px;max-width:22em;font-size:12px;line-height:1.7}

@media (prefers-reduced-motion: reduce){
  .c-work .c-done,.xr,.c-xray,.c-tags span{transition:none}
  .c-ai.xon .xr::after,.c-ai.xon .xb,.c-ai.hint .c-xray,.c-think span{animation:none}
}

/* d8 の「女性だけの/仲間」(320幅で2字落ち・1行目に字下げがある)。狭い幅だけ題を少し小さく */
@media (max-width:340px){.diff li b{font-size:16.5px}}

/* 10/3 本人「FV、崩れてない？」: 320幅で上の帯の言葉が1行のまま受け取るボタンの下に潜る(WebKit)→「自分推しを叶える/キャリアスクール」で2行に。
   下の固定の帯は340px以下でボタンが2行に折れる→「無料・女性限定」を外してボタンを1行に(無料・女性限定は冒頭とボタンの下の小さい字にある) */
.brand > div{min-width:0}
.brand small{white-space:normal;word-break:keep-all}
@media (max-width:340px){.sticky .t{display:none}}