@charset "utf-8";

/* ============================================================
   看護With 新サービス事前ローンチLP 専用スタイル
   既存 css/style.css（白カード540px / ベージュ#fbefdc / ネイビー#4C5376
   / ゴールド#C19E67 / Noto Sans JP）に重ねるコンポーネント群。
   ============================================================ */

:root {
  --navy: #4C5376;
  --navy-deep: #3d4885;
  --gold: #C19E67;
  --gold-deep: #91774D;
  --beige: #fbefdc;
  --teal: #DEF0EE;
  --ink: #333;
}

/* ---- 先行ローンチ告知バー ---- */
.prelaunch-bar {
  background: linear-gradient(180deg, #3d4885 0%, #252c58 50%, #3d4885 100%);
  color: #fff;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  padding: .55rem 1rem;
  letter-spacing: .02em;
}
.prelaunch-bar strong { color: #ffd97a; }

/* ---- ヒーロー ---- */
.lp-hero {
  position: relative;
  background: radial-gradient(120% 100% at 50% 0%, #fff 0%, #fdf6ea 55%, var(--beige) 100%);
  padding: 2.4rem 1.25rem 2.6rem;
  text-align: center;
  overflow: hidden;
}
.lp-hero .badge-launch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: 1rem;
  letter-spacing: .04em;
}
.lp-hero .badge-launch::before { content: "\f017"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #ffd97a; }
.lp-hero h1 {
  color: var(--navy);
  font-weight: 900;
  font-size: clamp(1.6rem, 6.2vw, 2.15rem);
  line-height: 1.45;
  margin-bottom: 1rem;
  letter-spacing: .01em;
}
.lp-hero h1 .hl { background: linear-gradient(transparent 62%, rgba(243,203,140,.9) 0); padding: 0 .1em; }
.lp-hero .lead {
  color: #555;
  font-size: 1rem;
  line-height: 1.9;
  margin-bottom: 1.4rem;
}
.lp-hero .hero-figure { margin: 0 auto 1.2rem; max-width: 320px; }
.lp-hero .hero-figure img { border-radius: 16px; box-shadow: 0 8px 24px rgba(76,83,118,.18); }

/* ---- ヒーロー: 1年間無料の訴求 ---- */
.lp-hero .hero-free {
  display: inline-block; background: #fff; border: 2px solid #d6453f;
  border-radius: 14px; padding: .7rem 1.4rem; margin: 0 auto 1.3rem;
  color: #d6453f; font-weight: 900; font-size: 1.35rem; line-height: 1.35;
  box-shadow: 0 4px 14px rgba(214,69,63,.16);
}
.lp-hero .hero-free strong { font-size: 1.7rem; }
.lp-hero .hero-free span { display: block; color: #8a8273; font-weight: 500; font-size: .82rem; margin-top: .2rem; }
.lp-hero .hero-cta {
  background: var(--gold); box-shadow: 0 5px 0 var(--gold-deep); color: #fff;
  font-weight: 700; padding: .95rem 2.4rem; border-radius: 33px;
}
.lp-hero .hero-cta:hover { opacity: .9; color: #fff; }
.lp-hero .hero-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-deep); }

/* ---- セクション見出し ---- */
.lp-h2 {
  color: var(--navy);
  font-weight: 900;
  text-align: center;
  font-size: clamp(1.35rem, 5.2vw, 1.7rem);
  line-height: 1.5;
  position: relative;
  padding-bottom: .9rem;
  margin-bottom: 1.6rem;
}
.lp-h2::after {
  content: ""; width: 64px; height: 4px; border-radius: 2px;
  background: var(--gold);
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
}
.lp-h2 .small-label {
  display: block; color: var(--gold-deep); font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; margin-bottom: .35rem;
}

/* ---- 共感/お悩みブロック ---- */
.worry-list { list-style: none; padding: 0; margin: 0 auto; max-width: 460px; }
.worry-list li {
  background: #fff;
  border: 1px solid #ece3cf;
  border-radius: 12px;
  padding: .9rem 1rem .9rem 2.9rem;
  margin-bottom: .75rem;
  position: relative;
  line-height: 1.7;
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
.worry-list li::before {
  content: "\f4c0"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--gold); position: absolute; left: 1rem; top: 1rem;
}

/* ---- 特長カード ---- */
.feature-grid { display: grid; gap: 1rem; }
.feature-card {
  background: #fff; border-radius: 14px; padding: 1.4rem 1.2rem;
  box-shadow: 0 4px 14px rgba(76,83,118,.10);
  border-top: 4px solid var(--gold);
}
.feature-card .fnum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--navy); color: #fff; font-weight: 700; margin-bottom: .6rem;
}
.feature-card h3 { color: var(--navy); font-weight: 700; font-size: 1.12rem; line-height: 1.5; margin-bottom: .5rem; }
.feature-card p { margin: 0; font-size: .95rem; line-height: 1.8; color: #444; }

/* ---- 商品カード（ハブ用） ---- */
.product-card {
  display: block; background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(76,83,118,.12); margin-bottom: 1.3rem;
  border: 1px solid #eee; color: inherit; transition: transform .2s, box-shadow .2s;
}
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(76,83,118,.2); }
.product-card .pc-head { padding: 1.1rem 1.2rem .4rem; }
.product-card .pc-tag { display: inline-block; font-size: 12px; font-weight: 700; color: #fff; background: var(--gold); border-radius: 6px; padding: .15rem .6rem; margin-bottom: .5rem; }
.product-card h3 { color: var(--navy); font-weight: 900; font-size: 1.2rem; line-height: 1.45; margin: 0; }
.product-card .pc-desc { padding: .2rem 1.2rem; color: #555; font-size: .92rem; line-height: 1.8; }
.product-card .pc-price { padding: .4rem 1.2rem 1.1rem; }
.product-card .pc-more { background: var(--navy); color: #fff; text-align: center; padding: .8rem; font-weight: 700; }
.product-card .pc-more::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: .5rem; font-size: .8em; }

/* ---- 料金ブロック ---- */
.price-box {
  background: #fff; border: 2px solid var(--gold); border-radius: 16px;
  padding: 1.4rem 1.2rem; text-align: center; max-width: 420px; margin: 0 auto;
  box-shadow: 0 6px 18px rgba(193,158,103,.18);
}
.price-box .pb-ribbon {
  display: inline-block; background: #d6453f; color: #fff; font-weight: 700;
  font-size: .82rem; border-radius: 999px; padding: .25rem 1rem; margin-bottom: .7rem;
  letter-spacing: .03em;
}
.price-box .pb-name { color: var(--navy); font-weight: 700; font-size: 1.05rem; margin-bottom: .5rem; }
.price-box .pb-off { display:inline-block; background:#d6453f; color:#fff; font-weight:900; font-size:.95rem; border-radius:8px; padding:.2rem .8rem; margin-bottom:.5rem; letter-spacing:.02em; }
.product-card .pc-off { display:inline-block; background:#d6453f; color:#fff; font-weight:700; font-size:.72rem; border-radius:6px; padding:.1rem .5rem; margin-left:.4rem; vertical-align:2px; }
.price-box .pb-before { color: #8a8273; font-size: .98rem; margin-bottom: .1rem; }
.price-box .pb-after { color: #d6453f; font-weight: 900; line-height: 1.1; }
.price-box .pb-after .yen { font-size: 1.3rem; }
.price-box .pb-after .num { font-size: 3rem; letter-spacing: -.02em; vertical-align: -2px; }
.price-box .pb-after .unit { font-size: 1rem; color: #555; font-weight: 500; }
.price-box .pb-note { font-size: 12px; color: #888; margin-top: .5rem; line-height: 1.6; }

/* ---- 事前登録フォーム ---- */
.prereg {
  background: linear-gradient(180deg, #3d4885 0%, #2c3361 100%);
  color: #fff; padding: 2.4rem 1.25rem;
}
.prereg h2 { color: #fff; font-weight: 900; text-align: center; font-size: clamp(1.3rem,5vw,1.6rem); line-height: 1.5; margin-bottom: .6rem; }
.prereg .sub { text-align: center; font-size: .95rem; line-height: 1.8; color: #e8ebf5; margin-bottom: 1.4rem; }
.prereg form { max-width: 420px; margin: 0 auto; }
.prereg label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .35rem; }
.prereg input[type=email], .prereg input[type=text], .prereg select {
  width: 100%; border: none; border-radius: 10px; padding: .85rem 1rem;
  font-size: 16px; margin-bottom: 1rem; color: #333; background: #fff;
}
.prereg .btn-submit {
  width: 100%; border: none; background: var(--gold); color: #fff; font-weight: 700;
  font-size: 1.2rem; border-radius: 999px; padding: .95rem; cursor: pointer;
  box-shadow: 0 5px 0 var(--gold-deep); transition: opacity .2s, transform .1s;
}
.prereg .btn-submit:hover { opacity: .9; }
.prereg .btn-submit:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--gold-deep); }
.prereg .formnote { font-size: 12px; color: #c9cfe6; text-align: center; margin-top: .9rem; line-height: 1.7; }
.prereg .line-add {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #06C755; color: #fff; font-weight: 700; text-decoration: none;
  border-radius: 999px; padding: .85rem; margin-top: 1rem; font-size: 1.05rem;
}
.prereg .line-add:hover { opacity: .92; color: #fff; }
.prereg .line-add::before { content: "\f3c0"; font-family: "Font Awesome 6 Brands"; font-size: 1.3rem; }
.prereg .or { text-align: center; font-size: 13px; color: #b7bedb; margin: 1rem 0 .3rem; }

/* ---- Stripe 埋め込みCheckout 枠 ---- */
#checkout { max-width: 480px; margin: 0 auto; }
#checkout:not(:empty) { background: #fff; border-radius: 12px; padding: .5rem; margin-top: .5rem; }

/* ---- 追従CTAボタン（下部固定） ---- */
.sticky-cta {
  position: fixed; left: 0; bottom: 0; width: 100%; z-index: 20;
  background: rgba(76,83,118,.96); padding: .6rem .8rem; display: none;
  box-shadow: 0 -2px 10px rgba(0,0,0,.2);
}
.sticky-cta a {
  display: block; max-width: 480px; margin: 0 auto; text-align: center;
  background: var(--gold); color: #fff; font-weight: 700; font-size: 1.1rem;
  border-radius: 999px; padding: .8rem; box-shadow: 0 4px 0 var(--gold-deep);
}
.sticky-cta a:hover { opacity: .9; color: #fff; }
@media (max-width: 767.98px) { .sticky-cta { display: block; } body { padding-bottom: 76px; } }

/* ---- 流れ Step ---- */
.flow-step { background:#fff; border-radius:14px; padding:1.1rem 1.2rem; margin-bottom:1rem; box-shadow:0 3px 10px rgba(0,0,0,.06); position:relative; }
.flow-step .stepn { color: var(--gold-deep); font-weight:700; font-size:.8rem; letter-spacing:.1em; }
.flow-step h3 { color: var(--navy); font-weight:700; font-size:1.1rem; margin:.1rem 0 .4rem; }
.flow-step p { margin:0; font-size:.93rem; line-height:1.8; color:#444; }

/* ---- 信頼（運営）---- */
.trust { text-align: center; }
.trust .logos img { max-width: 220px; margin: .4rem auto; }

/* ---- セクション余白の微調整（白カード内）---- */
.lp-section { padding: 2.6rem 0; }
.lp-section .inner { width: 90%; margin: 0 auto; }
.lp-section.alt { background: var(--teal); }
.lp-section.cream { background: #fdf6ea; }

/* ---- 簡易ヘッダー（事前ローンチ用・Jicoo非依存） ---- */
.lp-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-bottom: 1px solid #eee; padding: .5rem .9rem;
}
.lp-header .brand { color: var(--navy); font-weight: 900; font-size: 1.15rem; line-height: 1.2; }
.lp-header .brand span { display: block; font-size: .62rem; font-weight: 700; color: var(--gold-deep); letter-spacing: .12em; }
.lp-header .hbtn {
  background: var(--gold); color: #fff; font-weight: 700; font-size: .92rem;
  border-radius: 999px; padding: .5rem 1.1rem; box-shadow: 0 3px 0 var(--gold-deep);
}
.lp-header .hbtn:hover { opacity: .9; color: #fff; }

/* ---- 関連サービス導線（フッター手前） ---- */
.other-services { display: grid; gap: .6rem; }
.other-services a {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border: 1px solid #eadfca; border-radius: 12px;
  padding: .85rem 1rem; color: var(--navy); font-weight: 700; font-size: .98rem;
}
.other-services a::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--gold); font-size: .8em; }
.other-services a:hover { box-shadow: 0 4px 12px rgba(76,83,118,.12); color: var(--navy); }

/* ---- 注意書き ---- */
.fineprint { font-size: 12px; color: #8a8273; line-height: 1.8; }

/* ---- thanks ---- */
.thanks-wrap { text-align:center; padding: 3rem 1.25rem; }
.thanks-wrap .check { width:84px;height:84px;border-radius:50%;background:#06C755;color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-size:2.4rem; }
.thanks-wrap h1 { color: var(--navy); font-weight:900; font-size:1.6rem; line-height:1.5; margin-bottom:.8rem; }
.thanks-wrap p { color:#555; line-height:1.9; }

/* ---- embedded checkout modal ---- */
.kw-checkout-overlay { position:fixed; inset:0; z-index:1080; background:rgba(20,24,40,.6); display:none; align-items:flex-start; justify-content:center; padding:24px 12px; overflow-y:auto; }
.kw-checkout-box { position:relative; width:100%; max-width:560px; background:#fff; border-radius:14px; box-shadow:0 18px 60px rgba(0,0,0,.35); padding:46px 16px 20px; margin:auto; }
.kw-checkout-close { position:absolute; top:8px; right:10px; width:38px; height:38px; border:none; background:transparent; font-size:1.9rem; line-height:1; color:#888; cursor:pointer; border-radius:50%; }
.kw-checkout-close:hover { background:#f1f1f4; color:#333; }
#kw-checkout-mount { min-height:260px; }