/* ことばツール 単独サイト - v5: 白い誌面 + グラデーションのアート片(VOGUE HOROSCOPE 型) */

:root{
  --lavender: #8f6bc7;
  --pink: #e07a9e;
  --pink-soft: #f7b8cf;
  --pink-deep: #f3a0be;
  --orange: #f9b78a;
  --cream-gold: #f3d89b;
  --ink: #2f2a30;
  --ink-soft: #7a6d82;
  --line: #e5e0da;
  --white: #ffffff;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 20px 46px -20px rgba(143,107,199,.28), 0 8px 18px -12px rgba(224,122,158,.18);
  --serif: "Shippori Mincho B1", serif;
  --sans: "Zen Kaku Gothic New", sans-serif;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:var(--pink) }
a:hover{ color:var(--lavender) }

h1,h2,h3{
  font-family:var(--serif);
  font-weight:500;
  color:var(--ink);
  margin:0 0 .5em;
  line-height:1.6;
  letter-spacing:.1em;
}

/* ---- レイアウト: 誌面らしい余白 ---- */
.wrap{
  max-width:680px;
  margin:0 auto;
  padding:0 26px;
}

/* ---- 見出しラベル ---- */
.eyebrow{
  display:block;
  font-size:.74rem;
  letter-spacing:.22em;
  color:var(--pink);
  font-weight:700;
  margin-bottom:12px;
}

/* ---- ＼ ○○ ／ 型の斜線見出し(全体で2箇所まで) ---- */
.slash-heading{
  display:inline-flex;
  align-items:center;
  gap:.4em;
}
.slash-heading::before{ content:"＼"; color:var(--pink); font-size:.75em; font-weight:700; letter-spacing:0 }
.slash-heading::after{ content:"／"; color:var(--pink); font-size:.75em; font-weight:700; letter-spacing:0 }

/* ---- グラデーションのアート片(共通・複層+グレイン) ---- */
.gradient-art{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(120% 150% at 15% 20%, var(--cream-gold) 0%, transparent 52%),
    radial-gradient(110% 140% at 85% 15%, var(--orange) 0%, transparent 55%),
    radial-gradient(130% 160% at 75% 85%, var(--pink) 0%, transparent 58%),
    conic-gradient(from 210deg at 25% 75%, var(--lavender), var(--pink), var(--orange), var(--cream-gold), var(--lavender));
}
.gradient-art::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity:.6;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* ---- ヒーロー ---- */
.hero{
  padding:56px 0 0;
  text-align:center;
}
.hero h1{
  font-size:1.44rem;
  margin-bottom:.7em;
}
.hero-illust{
  max-width:480px;
  width:100%;
  height:auto;
  margin:22px auto 18px;
  display:block;
}
.grad-text{
  background:linear-gradient(90deg, var(--lavender), var(--pink));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}
.hero .sub{
  font-size:.98rem;
  color:var(--ink-soft);
  margin:0 0 14px;
}
.hero .badge-line{
  font-size:.8rem;
  color:var(--ink-soft);
  letter-spacing:.08em;
  margin:0 0 30px;
}

/* ---- 罫線区切り ---- */
.rule{
  border:none;
  border-top:1px solid var(--line);
  margin:0;
}

/* ---- セクション ---- */
.section{
  padding:56px 0;
  text-align:left;
}
.section h2{
  font-size:1.22rem;
  text-align:center;
}
.section-head{
  text-align:center;
  margin-bottom:26px;
}
.section > p{
  text-align:left;
}

/* ---- カード(枠線ベース、装飾は最小) ---- */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:28px 24px;
  margin:22px 0;
}

/* ---- 導入ブロック ---- */
.intro-block{
  text-align:center;
  margin:0 0 28px;
}
.intro-block:last-child{ margin-bottom:0 }

/* ---- ふわっとリビール ---- */
.kt-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
}
.kt-reveal.in{ opacity:1; transform:translateY(0) }

/* ---- 会話デモ(ヒーロー直下・主役、しっぽ付き吹き出し) ---- */
.chat{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:10px;
}
.bubble-row{ display:flex }
.bubble-row.you{ justify-content:flex-end }
.bubble-row.ai{ justify-content:flex-start }
.bubble{
  position:relative;
  max-width:82%;
  padding:14px 17px;
  border-radius:18px;
  font-size:.92rem;
  line-height:1.7;
  text-align:left;
}
.bubble-row.you .bubble{
  background:linear-gradient(135deg, var(--pink-soft), var(--pink-deep));
  color:#fff;
  border-bottom-right-radius:5px;
  box-shadow:0 8px 18px -10px rgba(224,122,158,.5);
}
.bubble-row.you .bubble::after{
  content:"";
  position:absolute;
  right:-7px; bottom:0;
  width:14px; height:14px;
  background:var(--pink-deep);
  clip-path:polygon(0 0, 0 100%, 100% 100%);
}
.bubble-row.ai .bubble{
  background:#fff;
  border:1.5px solid var(--lavender);
  color:var(--ink);
  border-bottom-left-radius:5px;
}
.bubble-row.ai .bubble::after{
  content:"";
  position:absolute;
  left:-8px; bottom:-1px;
  width:14px; height:14px;
  background:#fff;
  border-left:1.5px solid var(--lavender);
  border-bottom:1.5px solid var(--lavender);
  clip-path:polygon(0 100%, 100% 100%, 100% 0);
}
.bubble-label{
  font-size:.7rem;
  color:var(--ink-soft);
  margin:0 6px 4px;
  letter-spacing:.06em;
}
.example{ margin-bottom:26px }
.example:last-child{ margin-bottom:0 }
.example .note{
  margin:10px 6px 0;
  font-size:.82rem;
  color:var(--ink-soft);
  text-align:left;
}

/* ---- 使い方ステップ ---- */
.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:12px;
}
.steps li{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:14px 18px;
  font-size:.96rem;
  text-align:left;
}
.stepnum{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--lavender), var(--pink));
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:.9rem;
}
.steps .note{
  display:block;
  margin-top:18px;
  text-align:center;
  color:var(--ink-soft);
  font-size:.88rem;
}
.tea-illust{
  max-width:300px;
  width:100%;
  height:auto;
  margin:22px auto 8px;
  display:block;
}

/* ---- 登録欄の道具イラスト ---- */
.desk-illust{
  max-width:340px;
  width:100%;
  height:auto;
  margin:0 auto 20px;
  display:block;
}

/* ---- CTA(コピー・登録)ピル型グラデボタン ---- */
.grad-btn{
  position:relative;
  display:block;
  width:100%;
  min-height:56px;
  border:none;
  border-radius:999px;
  background:linear-gradient(90deg, #f78bb0, #f9b78a);
  color:#fff;
  font-family:var(--sans);
  font-weight:700;
  font-size:1.02rem;
  letter-spacing:.03em;
  cursor:pointer;
  box-shadow:0 14px 28px -12px rgba(247,139,176,.5);
  transition:transform .22s ease, box-shadow .22s ease;
  overflow:hidden;
}
.grad-btn::before{
  content:"";
  position:absolute;
  top:0; left:6%;
  width:88%; height:46%;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  border-radius:999px 999px 60% 60%/100% 100% 0 0;
  pointer-events:none;
}
.grad-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 32px -12px rgba(247,139,176,.58) }
.grad-btn:active{ transform:translateY(0) }
.grad-btn:disabled{ opacity:.6 }
.grad-btn.done{ background:linear-gradient(90deg, var(--lavender), var(--pink)) }

.prompt-box{
  margin-top:16px;
  max-height:220px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  background:#faf8f5;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px;
  font-family:var(--sans);
  font-size:.76rem;
  line-height:1.8;
  color:var(--ink-soft);
  white-space:pre-wrap;
  word-break:break-word;
  text-align:left;
}
.prompt-hint{
  font-size:.82rem;
  color:var(--ink-soft);
  text-align:center;
  margin:12px 0 0;
}

/* ---- 最後にこれだけ ---- */
.emphasis-card{
  text-align:center;
  font-size:.98rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:0;
  padding:34px 0;
  margin:22px 0;
}

/* ---- 登録フォーム(カード背景にごく淡いグラデ) ---- */
.signup-card{
  text-align:center;
  position:relative;
  border:1px solid var(--line);
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(155deg, rgba(143,107,199,.10), rgba(224,122,158,.10) 45%, rgba(249,183,138,.10) 75%, rgba(243,216,155,.10)) padding-box;
  background-color:#fff;
  background-image:
    radial-gradient(140% 160% at 10% 0%, rgba(143,107,199,.08) 0%, transparent 55%),
    radial-gradient(140% 160% at 90% 100%, rgba(249,183,138,.10) 0%, transparent 55%);
}
.signup-card p{
  font-size:.9rem;
  color:var(--ink-soft);
}
.signup-form{
  display:grid;
  gap:12px;
  margin-top:18px;
}
.signup-form input[type=email]{
  padding:15px 18px;
  border-radius:999px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:1rem;
  text-align:center;
}
.signup-form input[type=email]:focus{
  outline:2px solid var(--pink);
  outline-offset:2px;
}
.signup-form .status{
  font-size:.82rem;
  color:var(--ink-soft);
  min-height:1.4em;
  margin:0;
}

/* ---- フッター ---- */
footer.kt{
  padding:34px 0 50px;
  text-align:center;
  font-size:.82rem;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
}
footer.kt p{ margin:0 0 8px }
footer.kt p:last-child{ margin-bottom:0 }
footer.kt a{
  color:var(--lavender);
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

@media (min-width:640px){
  .hero h1{ font-size:1.9rem }
  .section h2{ font-size:1.5rem }
}