/*
Theme Name: Kikkake Navi LP
Author: Kikkake Navi
Description: きっかけNavi（結婚相談所）ランディングページ用オリジナルテーマ
Version: 1.2
*/

:root{
  --pink:#F963B0;         /* メインピンク */
  --pink-deep:#E04A9B;    /* 濃いピンク */
  --pink-pale:#FDEDF6;    /* 淡いピンク背景 */
  --tiffany:#0ABAB5;      /* ティファニーブルー */
  --tiffany-deep:#089A96;
  --tiffany-pale:#E6F7F6; /* 淡いティファニー背景 */
  --ink:#333941;          /* テキスト */
  --line:#06C755;
  --line-dark:#05a648;
  --white:#fff;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Zen Maru Gothic",sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:2.05;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.serif{font-family:"Shippori Mincho",serif}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.center{text-align:center}
.pink{color:var(--pink-deep)}
.tif{color:var(--tiffany-deep)}
.marker{background:linear-gradient(transparent 62%, #FDD0EA 62%);font-weight:700}
.marker-t{background:linear-gradient(transparent 62%, #BFEDEB 62%);font-weight:700}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #F3E4EA;
}
.header-in{display:flex;align-items:center;justify-content:space-between;height:60px;max-width:1040px;margin:0 auto;padding:0 18px}
.logo{font-family:"Shippori Mincho",serif;font-weight:700;font-size:1.15rem;letter-spacing:.05em}
.logo small{display:block;font-family:"Zen Maru Gothic",sans-serif;font-weight:500;font-size:.58rem;letter-spacing:.16em;color:var(--tiffany-deep)}

/* ---------- buttons ---------- */
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  background:var(--line);color:#fff;font-weight:700;
  border-radius:999px;padding:1em 2.2em;font-size:1.05rem;
  box-shadow:0 6px 18px rgba(6,199,85,.35);
  transition:transform .18s ease, background .18s ease;
  line-height:1.5;
}
.btn-line:hover{background:var(--line-dark);transform:translateY(-2px)}
.btn-line--sm{padding:.55em 1.2em;font-size:.82rem;box-shadow:0 3px 10px rgba(6,199,85,.3)}
.btn-line .free{
  background:#fff;color:var(--line-dark);font-size:.7em;
  border-radius:999px;padding:.15em .8em;font-weight:700;
}
.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.cta-note{font-size:.78rem;color:#9b8d94;margin-top:12px;line-height:1.8}

.cta-block{
  text-align:center;padding:52px 22px;
  background:linear-gradient(135deg,var(--pink-pale) 0%, var(--tiffany-pale) 100%);
  border-radius:18px;margin:30px 0;
}
.cta-block .lead-mini{font-weight:700;font-size:1.02rem;margin-bottom:20px;line-height:2}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;text-align:center;
  padding:64px 22px 76px;
  background:
    radial-gradient(circle at 12% 18%, rgba(242,123,166,.16) 0, transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(10,186,181,.16) 0, transparent 42%),
    radial-gradient(circle at 85% 85%, rgba(242,123,166,.12) 0, transparent 40%),
    linear-gradient(180deg,#fff 0%, var(--tiffany-pale) 100%);
}
.hero .eyebrow{
  display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.2em;
  color:#fff;background:var(--tiffany);
  padding:.4em 1.4em;border-radius:999px;margin-bottom:24px;
}
.hero h1{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.5rem,5.8vw,2.7rem);
  line-height:1.5;letter-spacing:.02em;
}
.hero h1 br{line-height:1.5}
.hero h1 span,.hero h1{word-break:keep-all;overflow-wrap:normal}
.hero h1 .ln{display:block}
.hero .sub{margin:26px auto 8px;font-size:1rem;font-weight:500;line-height:2.1}
.ribbon{
  display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:26px 0 30px;
}
.ribbon span{
  font-size:.78rem;font-weight:700;letter-spacing:.05em;
  background:#fff;border:1.5px solid var(--pink);color:var(--pink-deep);
  border-radius:999px;padding:.35em 1.1em;
}
.ribbon span:nth-child(even){border-color:var(--tiffany);color:var(--tiffany-deep)}

/* ---------- sections ---------- */
section{padding:74px 0}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head .en{font-size:.7rem;letter-spacing:.32em;color:var(--tiffany-deep);font-weight:700}
.sec-head h2{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.45rem,4.6vw,2rem);letter-spacing:.05em;margin-top:8px;line-height:1.8;
}
.sec-head .dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
.sec-head .dots i{width:8px;height:8px;border-radius:50%;background:var(--pink)}
.sec-head .dots i:nth-child(2){background:var(--tiffany)}
.sec-head .dots i:nth-child(3){background:var(--pink)}

.bg-pink{background:var(--pink-pale)}
.bg-tif{background:var(--tiffany-pale)}

/* お悩み */
.nayami-list{display:grid;gap:13px;margin:0 auto;max-width:560px}
.nayami-list li{
  list-style:none;display:flex;gap:.75em;align-items:flex-start;
  background:#fff;border-radius:12px;padding:1em 1.25em;
  font-weight:500;box-shadow:0 3px 12px rgba(224,81,127,.08);
  font-size:.96rem;line-height:1.9;
}
.nayami-list li::before{content:"💭";flex:none}
.talk{
  max-width:560px;margin:36px auto 0;text-align:center;
  font-size:1.05rem;line-height:2.3;
}

/* 数字/実感 */
.empathy{
  max-width:600px;margin:0 auto;text-align:center;line-height:2.3;font-size:1rem;
}
.empathy .big{
  font-family:"Shippori Mincho",serif;font-size:clamp(1.3rem,4.8vw,1.7rem);
  font-weight:600;line-height:2;margin:30px 0;
}

/* 声 */
.voice{
  background:#fff;border-radius:16px;padding:28px 24px;
  box-shadow:0 6px 22px rgba(10,186,181,.1);
  margin-bottom:24px;position:relative;
}
.voice .head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.voice .icon{
  flex:none;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
  background:var(--pink-pale);
}
.voice:nth-child(even) .icon{background:var(--tiffany-pale)}
.voice .who{font-size:.85rem;font-weight:700;line-height:1.6}
.voice .who small{display:block;font-weight:500;color:#9b8d94;font-size:.75rem}
.voice .stars{color:#F5B93E;font-size:.85rem;letter-spacing:.15em}
.voice h3{
  font-size:1.05rem;font-weight:700;color:var(--pink-deep);
  margin-bottom:10px;line-height:1.8;
}
.voice:nth-child(even) h3{color:var(--tiffany-deep)}
.voice p{font-size:.93rem;line-height:2.05}
.voice-note{font-size:.72rem;color:#9b8d94;text-align:center;margin-top:6px}

/* 理由 */
.reason{
  background:#fff;border-radius:16px;padding:30px 26px;margin-bottom:22px;
  box-shadow:0 5px 18px rgba(224,81,127,.09);
}
.reason .badge{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.18em;
  color:#fff;background:var(--pink);border-radius:999px;padding:.3em 1.2em;
}
.reason:nth-child(even) .badge{background:var(--tiffany)}
.reason h3{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:1.22rem;margin:14px 0 10px;line-height:1.8;letter-spacing:.03em;
}
.reason p{font-size:.94rem;line-height:2.05}

/* 流れ */
.steps{max-width:600px;margin:0 auto;position:relative}
.steps::before{
  content:"";position:absolute;left:24px;top:16px;bottom:16px;
  width:2px;background:linear-gradient(180deg,var(--pink),var(--tiffany));opacity:.5;
}
.step{display:flex;gap:20px;padding:18px 0;position:relative}
.step .num{
  flex:none;width:48px;height:48px;border-radius:50%;
  background:#fff;border:2px solid var(--pink);
  color:var(--pink-deep);font-family:"Shippori Mincho",serif;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
}
.step:nth-child(even) .num{border-color:var(--tiffany);color:var(--tiffany-deep)}
.step h3{font-weight:700;font-size:1.05rem;line-height:1.8}
.step p{font-size:.92rem;color:#6d6167;margin-top:4px;line-height:1.95}

/* メッセージ */
.message{
  max-width:620px;margin:0 auto;background:#fff;border-radius:18px;
  padding:36px 28px;box-shadow:0 6px 22px rgba(10,186,181,.1);
  line-height:2.25;font-size:.97rem;
}
.message .sign{text-align:right;margin-top:22px;font-family:"Shippori Mincho",serif;font-weight:600}

/* FAQ */
.faq-list{max-width:660px;margin:0 auto;display:grid;gap:13px}
details{background:#fff;border-radius:12px;padding:0 1.3em;box-shadow:0 3px 12px rgba(224,81,127,.07)}
summary{
  cursor:pointer;font-weight:700;padding:1.05em 0;list-style:none;
  display:flex;align-items:baseline;gap:.7em;line-height:1.8;font-size:.95rem;
}
summary::-webkit-details-marker{display:none}
summary::before{content:"Q";color:var(--pink-deep);font-family:"Shippori Mincho",serif;font-weight:700;flex:none}
details p{padding:0 0 1.2em 1.8em;font-size:.9rem;color:#6d6167;line-height:2}

/* 最終CTA */
.final{
  text-align:center;
  background:
    radial-gradient(circle at 15% 20%, rgba(242,123,166,.18) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(10,186,181,.18) 0, transparent 45%),
    linear-gradient(180deg,var(--pink-pale), #fff);
}
.final h2{
  font-family:"Shippori Mincho",serif;font-weight:600;
  font-size:clamp(1.5rem,5.4vw,2.2rem);line-height:1.9;letter-spacing:.04em;
}
.final .lead{margin:26px auto 34px;max-width:32em;line-height:2.3}

footer{
  background:#333941;color:#e5e8ec;text-align:center;
  padding:44px 22px 130px;font-size:.8rem;line-height:2;letter-spacing:.04em;
}
footer .logo{color:#fff;margin-bottom:8px}
footer .logo small{color:#8FD9D6}

/* 固定LINEバー */
.fixed-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid #F3E4EA;
  display:flex;justify-content:center;
}
.fixed-cta .btn-line{width:100%;max-width:430px;padding:.95em;font-size:1rem}

/* logos */
.logo-img{display:flex;align-items:center}
.logo-img img{height:34px;width:auto;display:block}
.hero-logo{width:min(180px,42vw);height:auto;margin:0 auto 20px;display:block}
.ibj-badge{width:min(190px,50vw);height:auto;margin:0 auto 26px;display:block;background:#fff;border-radius:6px}
.footer-logo-wrap{display:flex;justify-content:center;margin-bottom:14px}
.footer-logo-wrap img{height:42px;width:auto}
.footer-ibj{display:flex;justify-content:center;margin-top:18px}
.footer-ibj img{height:40px;width:auto;background:#fff;border-radius:6px}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s ease}
.reveal.on{opacity:1;transform:none}



/* hero photo */
.hero-photo{width:min(86%,440px);margin:0 auto 18px;aspect-ratio:3/2;border-radius:18px;overflow:hidden}
.hero-photo img{width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover;object-position:50% 38%;display:block;
  -webkit-mask-image:radial-gradient(125% 108% at 50% 42%, #000 58%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(125% 108% at 50% 42%, #000 58%, rgba(0,0,0,0) 100%);}

@media (max-width:600px){
  section{padding:60px 0}
  .header-cta{display:none}
  body{font-size:15.5px}
  
}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .pulse{animation:none}
  html{scroll-behavior:auto}
}

/* footer links */
.footer-links{margin-top:14px;font-size:.8rem}
.footer-links a{color:#e5e8ec;text-decoration:underline;text-underline-offset:3px}
.footer-links a:hover{color:#F963B0}
.footer-links span{opacity:.4;margin:0 .4em}
.footer-ibj a{display:block}

/* brand name coloring（ロゴ準拠：きっかけ=黄 / Navi=ピンク） */
.bname{font-weight:700;white-space:nowrap}
.bname .bk{color:#FFC900;text-shadow:0 0 1px rgba(0,0,0,.06)}
.bname .bn{color:#FF66C4}
.serif .bname, h2 .bname{font-family:inherit}

/* offer3 / narrowing / ps */
.offer3{max-width:480px;margin:0 auto 28px;text-align:left;background:#fff;border-radius:14px;padding:24px 26px;box-shadow:0 5px 18px rgba(224,81,127,.1)}
.offer3 h4{font-size:1rem;font-weight:700;text-align:center;margin-bottom:14px;line-height:1.8}
.offer3 h4 b{color:var(--pink-deep)}
.offer3 ol{list-style:none;display:grid;gap:10px}
.offer3 li{display:flex;gap:.7em;align-items:flex-start;font-size:.93rem;font-weight:500;line-height:1.9}
.offer3 li i{flex:none;font-style:normal;font-family:"Shippori Mincho",serif;font-weight:700;color:var(--tiffany-deep)}
.fit-list{max-width:520px;margin:0 auto 34px;display:grid;gap:10px;text-align:left}
.fit-list li{list-style:none;display:flex;gap:.7em;align-items:flex-start;background:#fff;border-radius:10px;padding:.85em 1.2em;font-weight:500;font-size:.93rem;line-height:1.9;box-shadow:0 3px 12px rgba(224,81,127,.08)}
.fit-list li::before{content:"✔";color:var(--tiffany-deep);font-weight:700;flex:none}
.ps{max-width:480px;margin:44px auto 0;text-align:left;background:#fff;border-radius:14px;padding:26px 26px;box-shadow:0 5px 18px rgba(10,186,181,.12);font-size:.93rem;line-height:2.1}
.ps .ps-label{font-family:"Shippori Mincho",serif;font-weight:700;color:var(--pink-deep);margin-bottom:8px;letter-spacing:.1em}