/* ============================================================
   ハピマリ新潟 お悩み相談AI
   参考デザイン（ChatGPT Image）を再現したハイクオリティ版
   コンセプト: 上品 / やわらかい / 安心。婚活女子向け。
   ============================================================ */
:root{
  --pink:        #ee5a77;   /* メインCTA */
  --pink-deep:   #e6466a;
  --pink-bright: #f06d88;
  --accent:      #ee5a77;   /* 強調文字 */
  --cream:       #fffaf6;
  --soft1:       #fdeef0;   /* お悩みセクション */
  --soft2:       #fbe3e8;   /* CTAセクション */
  --circle:      #fbe1e6;
  --ink:         #4b4544;
  --ink2:        #847976;
  --marker:      #ffe79c;
  --gold:        #d3a861;
  --line:        rgba(238,90,119,.14);
  --shadow:      0 14px 36px rgba(224,120,135,.20);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"Zen Kaku Gothic New", system-ui, sans-serif;
  color:var(--ink);
  background:linear-gradient(170deg,#fffdfb 0%, #fdf3ef 100%);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}
.app{ width:100%; max-width:440px; margin:0 auto; min-height:100dvh; position:relative;
  overflow-x:hidden;
  background:linear-gradient(180deg,#fffefc, #fdf4f0);
  box-shadow:0 0 60px rgba(224,150,140,.10); }
.hidden{ display:none !important; }
em{ font-style:normal; color:var(--accent); }

/* ============ ランディング ============ */
.lp{ display:flex; flex-direction:column; min-height:100dvh; overflow-x:hidden; }

/* ヒーロー */
.lp-hero{
  position:relative; overflow:hidden;
  padding:0 0 24px; min-height:auto;
  background:linear-gradient(180deg,#fffdfb,#fdf6f2);
}
/* 写真：上部に全幅で1枚まるごと表示（一切クロップしない） */
.hero-photo{
  position:relative; display:block; z-index:0;
  width:100%; max-width:100%; height:auto;
  -webkit-mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 88%,transparent 100%);
}
.hero-text{ position:relative; z-index:2; text-align:left; padding:18px 24px 0; }
.catch{
  font-family:"Klee One", cursive; font-weight:600; font-size:15px; color:var(--ink2);
  display:flex; align-items:center; gap:6px; margin-bottom:14px;
}
.catch-heart{ width:25px; height:22px; flex-shrink:0; }
.hero-title{
  font-family:"Shippori Mincho", serif; font-weight:600;
  font-size:31px; line-height:1.55; letter-spacing:.02em; color:#3f3a39;
  display:flex; flex-direction:column; align-items:flex-start; margin-bottom:18px;
  text-shadow:0 2px 12px rgba(255,255,255,.85), 0 0 22px rgba(255,255,255,.7);
}
.hero-title em{ color:#3f3a39; font-weight:700; position:relative; }   /* 見出しのお悩みは濃い色 */
.hero-title em::before{
  content:"・ ・ ・"; position:absolute; top:-0.62em; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:3px; color:var(--pink-bright);
}
.hero-sub{ font-size:13.5px; line-height:2; color:var(--ink2); max-width:none;
  text-shadow:0 1px 8px rgba(255,255,255,.8); }

/* 空白に入れるブランドキャッチ */
.hero-brandcatch{ margin-top:22px; }
.hero-brandcatch .bc-line{
  font-family:"Klee One", cursive; font-weight:600;
  font-size:16px; line-height:1.8; color:var(--pink-deep);
  text-shadow:0 1px 9px rgba(255,255,255,.95);
}
.hero-brandcatch .bc-brand{
  display:block; margin-top:9px;
  font-family:"Shippori Mincho", serif; font-weight:600;
  font-size:13px; letter-spacing:.1em; color:var(--ink2);
  text-shadow:0 1px 8px rgba(255,255,255,.9);
}

/* お悩みセクション */
.lp-worries{
  position:relative;
  background:var(--soft1);
  padding:34px 22px 30px;
  margin-top:-2px;
}
.wave{ position:absolute; left:0; top:-38px; width:100%; height:40px; display:block; }
.sec-head{
  text-align:center;
  font-family:"Shippori Mincho", serif;
  font-weight:600;
  font-size:20px;
  color:#3f3a39;
  margin-bottom:24px;
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.sec-head .brk{ color:var(--pink-bright); font-size:16px; transform:rotate(8deg); }
.sec-head .brk.flip{ transform:rotate(-8deg) scaleX(-1); }
.worry-cards{ display:flex; gap:10px; }
.worry{
  flex:1; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.worry-ic{
  width:84px; height:84px; border-radius:50%;
  background:var(--circle);
  display:flex; align-items:center; justify-content:center;
  box-shadow:inset 0 2px 6px rgba(255,255,255,.7), 0 6px 14px rgba(238,90,119,.10);
}
.worry-ic svg{ width:42px; height:42px; }
.worry p{ font-size:12.5px; line-height:1.6; color:#5c5552; font-weight:500; }

/* ヒーロー直下のCTA */
.hero-cta-btn{
  margin:6px auto 2px;
  width:calc(100% - 48px);
}

/* CTAセクション */
.lp-cta{
  position:relative;
  background:linear-gradient(180deg,#fbd7de, #f8c4cf);
  padding:42px 24px calc(26px + env(safe-area-inset-bottom));
  text-align:center;
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  overflow:hidden;
}
.spark{ position:absolute; color:#fff; opacity:.85; font-size:18px;
  text-shadow:0 0 8px rgba(255,255,255,.8); animation:twinkle 2.6s ease-in-out infinite; }
.spark.s1{ top:42px; left:26px; font-size:22px; }
.spark.s2{ top:70px; right:34px; animation-delay:.6s; }
.spark.s3{ bottom:120px; left:30px; font-size:14px; animation-delay:1.1s; }
.spark.s4{ bottom:90px; right:26px; font-size:20px; animation-delay:1.6s; }
.cta-lead{
  font-size:15px; line-height:1.95; color:#6b4a4f; font-weight:500;
  margin-bottom:24px; position:relative; z-index:2;
}
.cta-lead mark{
  background:linear-gradient(transparent 58%, var(--marker) 58%);
  color:#5c4146; font-weight:700; padding:0 2px;
}
.cta-btn{
  position:relative; z-index:2;
  width:100%; max-width:380px;
  border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:20px 24px;
  border-radius:999px;
  font-family:"Zen Kaku Gothic New", sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(135deg,#f06d88, #ec4e6e);
  box-shadow:0 10px 0 #d23b5d, 0 18px 28px rgba(214,59,93,.40);
  transition:transform .12s ease, box-shadow .12s ease;
}
.cta-btn:active{ transform:translateY(6px); box-shadow:0 4px 0 #d23b5d, 0 10px 18px rgba(214,59,93,.35); }
.cta-heart{ width:36px; height:32px; flex-shrink:0; }
.cta-arrow{
  position:absolute; right:14px;
  width:38px; height:38px; border-radius:50%;
  background:#fff; color:var(--pink);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; font-weight:700; line-height:1;
}
.privacy{
  margin-top:22px; position:relative; z-index:2;
  font-size:11.5px; color:#9a6f74;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.privacy svg{ width:18px; height:18px; }
.lp-foot{ margin-top:auto; padding-top:36px; position:relative; z-index:2; }
.foot-brand{ font-family:"Shippori Mincho", serif; font-weight:600; font-size:15px;
  color:#a85b66; margin-bottom:6px; }
.lp-foot p{ font-size:11.5px; color:#9a6f74; }

/* ============ チャット ============ */
.chat{ display:flex; flex-direction:column; height:100dvh; width:100%; overflow-x:hidden;
  background:radial-gradient(120% 60% at 100% 0%, #fdeef0, transparent 55%), linear-gradient(180deg,#fffdfb,#fdf4f0); }
.messages, .composer, .chat-top{ max-width:100%; }
.msg{ overflow-wrap:anywhere; }
.chat-top{
  display:flex; align-items:center; gap:6px;
  padding:12px 14px;
  background:rgba(255,253,251,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:6;
}
.chat-top{ position:relative; }
.back{ border:none; background:none; color:var(--ink2); font-size:13.5px; font-family:inherit;
  cursor:pointer; padding:4px 4px; flex:0 0 auto; white-space:nowrap; z-index:2; }
.brand{ position:absolute; left:0; right:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:"Shippori Mincho", serif; font-weight:600; font-size:15.5px; color:var(--pink);
  white-space:nowrap; }
.brand-heart{ width:23px; height:21px; flex:0 0 auto; }
.head-right{ margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto; z-index:2; }
.icon-toggle{ flex:0 0 auto; border:none; background:none; cursor:pointer; color:#d3b9bd;
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  transition:.15s; }
.icon-toggle svg{ width:21px; height:21px; }
.icon-toggle .wave1,.icon-toggle .wave2{ opacity:0; transition:opacity .15s; }
.icon-toggle[aria-pressed="true"]{ color:var(--pink); background:var(--soft1); }
.icon-toggle[aria-pressed="true"] .wave1,
.icon-toggle[aria-pressed="true"] .wave2{ opacity:1; }
.badge{ flex:0 0 auto; font-size:11px; color:#fff; background:var(--pink-bright);
  border-radius:999px; padding:4px 11px; font-weight:700; white-space:nowrap; }

.messages{ flex:1; overflow-y:auto; padding:22px 16px 8px;
  display:flex; flex-direction:column; gap:14px; scroll-behavior:smooth; }

.row{ display:flex; gap:9px; align-items:flex-end; width:100%; }
.row.user{ justify-content:flex-end; flex-direction:row-reverse; }
.row.ai{ justify-content:flex-start; }
.av{ width:38px; height:38px; border-radius:50%; flex-shrink:0; overflow:hidden;
  border:2px solid #fff; box-shadow:0 3px 8px rgba(238,90,119,.22); background:var(--circle); }
.av img{ width:100%; height:100%; object-fit:cover; object-position:center top; }

.msg{ max-width:78%; padding:13px 16px; font-size:14.5px; line-height:1.8; border-radius:20px;
  white-space:pre-wrap; word-break:break-word; animation:pop .35s cubic-bezier(.2,.8,.2,1) both; }
.row.ai .msg{ background:#fff; color:var(--ink); border:1px solid var(--line);
  border-bottom-left-radius:6px; box-shadow:0 5px 16px rgba(224,150,140,.10); }
.row.user .msg{ background:linear-gradient(135deg,#f4869b,#ee5a77); color:#fff;
  border-bottom-right-radius:6px; box-shadow:0 6px 16px rgba(238,90,119,.30); }

.typing{ display:flex; gap:5px; padding:15px 18px; background:#fff;
  border:1px solid var(--line); border-radius:20px; border-bottom-left-radius:6px; }
.typing span{ width:8px; height:8px; border-radius:50%; background:var(--pink-bright);
  animation:blink 1.2s infinite both; }
.typing span:nth-child(2){ animation-delay:.2s } .typing span:nth-child(3){ animation-delay:.4s }

/* CTAカード（次の一歩） */
.cta-area{ padding:2px 16px 12px; }
.cta-card{ background:linear-gradient(135deg,#fff,#fdeef0); border:1.5px solid #f6c9d2;
  border-radius:20px; padding:18px; box-shadow:var(--shadow); text-align:center;
  animation:rise .5s ease both; }
.cta-card p{ font-size:13px; color:var(--ink2); margin-bottom:13px; }
.cta-card a{ display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:linear-gradient(135deg,#e6b86a,#cf9a52); color:#fff; font-weight:700; font-size:15px;
  padding:14px 28px; border-radius:999px; box-shadow:0 8px 18px rgba(201,168,106,.40); }

/* 選べる返信案（クイックリプライ） */
.quick-replies{ display:flex; flex-wrap:wrap; gap:8px; padding:2px 16px 12px; animation:rise .3s ease both; }
.qr-chip{ appearance:none; border:1.5px solid #f3cdd5; background:#fff; color:var(--pink-deep);
  font-family:inherit; font-size:13px; line-height:1.4; text-align:left;
  padding:9px 15px; border-radius:999px; cursor:pointer; transition:.15s; }
.qr-chip:hover{ background:var(--soft1); border-color:var(--pink-bright); }
.qr-chip:active{ transform:scale(.96); }
.qr-chip:disabled{ opacity:.5; cursor:default; }

/* 音声入力ステータス */
.mic-status{ margin:0 16px 8px; padding:9px 14px; border-radius:14px; font-size:12.5px;
  text-align:center; background:var(--soft1); color:#9a5560; border:1px solid #f6cbd4;
  animation:rise .25s ease both; }
.mic-status.listening{ background:#fff0f3; color:var(--pink); font-weight:700; }
.mic-status.err{ background:#fff3e6; color:#a5683a; border-color:#f3d9b8; }

/* 入力欄 */
.composer{ display:flex; align-items:flex-end; gap:10px;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,253,251,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); }
.mic-btn{ flex-shrink:0; width:46px; height:46px; border:1.5px solid #f3cdd5; border-radius:50%;
  background:#fff; color:var(--pink); cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.15s; }
.mic-btn svg{ width:22px; height:22px; }
.mic-btn:active{ transform:scale(.92); }
.mic-btn.recording{ background:var(--pink); color:#fff; border-color:var(--pink);
  animation:micpulse 1.1s infinite; }
@keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(238,90,119,.45);} 50%{ box-shadow:0 0 0 9px rgba(238,90,119,0);} }
.input{ flex:1; resize:none; border:1.5px solid #f3cdd5; border-radius:24px;
  padding:12px 16px; font-family:inherit; font-size:15px; line-height:1.6; color:var(--ink);
  background:#fff; max-height:120px; outline:none; transition:border-color .15s; }
.input:focus{ border-color:var(--pink-bright); }
.send-btn{ flex-shrink:0; width:48px; height:48px; border:none; border-radius:50%;
  background:linear-gradient(135deg,#f06d88,#ec4e6e); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(238,90,119,.36); transition:transform .15s, opacity .15s; }
.send-btn svg{ width:22px; height:22px; }
.send-btn:active{ transform:scale(.92); }
.send-btn:disabled{ opacity:.45; }

/* アニメーション */
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
@keyframes pop{ from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;} }
@keyframes blink{ 0%,80%,100%{opacity:.3; transform:translateY(0);} 40%{opacity:1; transform:translateY(-3px);} }
@keyframes twinkle{ 0%,100%{opacity:.35; transform:scale(.8);} 50%{opacity:.95; transform:scale(1.1);} }