/* -----------------------------------------------------------------------------
   こどもこえログの紹介ページ（/kodomo-koelog/）専用。

   ★ 色はアプリに合わせている（`kodomo_voice/lib/theme/app_theme.dart`）。
     地 = 生成りのクリーム #FBF3E9 / 文字 = 墨 #222222 /
     ブランド = 桃→黄のグラデーション #FD8CFF → #FFF57F。
     会社サイト（トップ・こども家計簿・規約類）はグレースケールのままで、
     ここだけアプリの色にしている。

   作り: 上に固定ヘッダー + 全幅の帯を上から積む。文字は中央寄せ、見出しは大きく太く。
   帯を「クリーム / 薄いクリーム / 墨 / グラデーション」で入れ替えて場面を切る。
   吹き出し・浮いたカード・点線のつなぎで、固さを抜く。

   ⚠️ **このページはダークモードに追随させない。** アプリ自体がクリーム地の
     明るい配色1本なので、反転させるとブランドの見え方が変わる。
   -------------------------------------------------------------------------- */
/* 既定は こどもこえログ の色。アプリごとに body のクラスで差し替える */
.lp-page{
  --paper:#FBF3E9;      /* アプリの地。surface */
  --paper-2:#F5EEE2;    /* 少し沈めた地。surfaceTile */
  --white:#FFFFFF;
  --ink:#222222;
  --ink-2:#6A6A6A;
  --hair:rgba(34,34,34,.14);
  --brand:#FD8CFF;
  --brand-2:#FFF57F;
  --grad:linear-gradient(135deg,#FD8CFF 0%,#FFF57F 100%);
  --soft:0 18px 40px rgba(34,34,34,.12);
}

/* こども家計簿。紺と青（`newApp4_kodomo-kakeibo/src/core/theme/palettes.ts`）*/
.lp-page.kakeibo{
  --paper:#EEF1F6;
  --paper-2:#F4F6FA;
  --white:#FFFFFF;
  --ink:#111A2E;
  --ink-2:#5B6B85;
  --hair:#E1E6EF;
  --brand:#2F6FED;
  --brand-2:#0A2E73;
  --grad:linear-gradient(135deg,#2F6FED 0%,#0A2E73 100%);
  --soft:0 18px 40px rgba(17,26,46,.14);
}
/* 濃いグラデーションなので、その帯の中だけ白抜きにする */
.lp-page.kakeibo .band.brand{color:#FFFFFF}
.lp-page.kakeibo .band.brand .sub,
.lp-page.kakeibo .band.brand .tiny{color:rgba(255,255,255,.8)}
.lp-page.kakeibo .band.brand .pill.soon{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.5)}
.lp-page.kakeibo .band.brand .balloon{color:var(--ink)}

body.lp-page{
  color-scheme:light;              /* 反転させない */
  background:var(--paper);color:var(--ink);
  line-height:1.85;letter-spacing:.005em;
}
body.lp-page main{padding:0;max-width:none}
body.lp-page a{color:inherit;border-bottom-color:rgba(34,34,34,.25)}
body.lp-page a:hover{border-bottom-color:var(--ink)}

/* ------------------------------------------------------------------ ヘッダー */
.lp-head{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:1rem;
  padding:.75rem clamp(1rem,4vw,2.5rem);
  background:var(--paper);border-bottom:1px solid var(--hair);
}
.lp-head .mark{
  font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;border:0;margin-right:auto;
}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.6875rem 1.375rem;border-radius:999px;
  font-size:.8125rem;font-weight:700;line-height:1.4;text-align:center;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  text-decoration:none;
}
.pill:hover{background:var(--paper);color:var(--ink)}
/* まだ押せないもの。枠だけにして、押せないことを見た目で分ける */
.pill.soon{
  background:transparent;color:var(--ink-2);
  border-color:var(--hair);cursor:default;
}
.pill.soon:hover{background:transparent;color:var(--ink-2)}
.pill.lg{padding:.9375rem 2rem;font-size:.9375rem}
/* body.lp-page a の下線指定より強くして、枠の色を保つ */
.lp-page a.pill{border-color:var(--ink)}
.lp-page a.pill:hover{border-color:var(--ink)}

/* -------------------------------------------------------------------- 帯 */
.band{
  padding:clamp(3.5rem,10vw,7rem) clamp(1.25rem,5vw,2.5rem);
  background:var(--paper);
}
.band.tint{background:var(--paper-2)}
.band.brand{background:var(--grad)}      /* 桃→黄。文字は墨のまま */
.band.dark{background:var(--ink);color:var(--paper)}
.band.dark a{color:var(--paper);border-bottom-color:rgba(251,243,233,.4)}
.band.dark .sub,.band.dark .tiny{color:rgba(251,243,233,.75)}
.band.flush{padding-left:0;padding-right:0}
.inner{max-width:44rem;margin:0 auto;text-align:center}
.inner.wide{max-width:60rem}

/* 見出し。画面の幅に合わせて自動で縮む。
   ★ site.css の h1/h2 は上に罫線と余白が付くので、ここで全部消す */
.lp-page h1,.lp-page h2,.lp-page h3{margin:0;padding:0;border:0}

.ttl{
  font-size:clamp(1.5rem,5.4vw,2.5rem);line-height:1.55;font-weight:800;
  letter-spacing:-.02em;margin:0 0 1.25rem;text-wrap:balance;
}
.ttl.sm{font-size:clamp(1.25rem,4.2vw,1.875rem)}
.eyebrow{
  font-size:clamp(1.75rem,7vw,3.25rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.25;margin:0 0 2.5rem;
}
.sub{font-size:clamp(.9375rem,2.8vw,1.0625rem);color:var(--ink-2);margin:0 0 1.5rem}
.tiny{font-size:.8125rem;color:var(--ink-2);line-height:1.8;margin:0}
.cols + .tiny{margin-top:1.5rem}

/* ------------------------------------------------------------------ 吹き出し */
.balloon{
  position:relative;display:inline-block;
  background:var(--white);border:3px solid var(--ink);border-radius:1.25rem;
  padding:clamp(1.25rem,4vw,2rem) clamp(1.25rem,5vw,2.5rem);
  margin:0 0 clamp(2.5rem,7vw,3.5rem);
}
.balloon p{margin:0}
.balloon .eyebrow{margin:0}
.balloon::after,.balloon::before{
  content:"";position:absolute;left:2.5rem;width:0;height:0;
  border-left:14px solid transparent;border-right:14px solid transparent;
}
.balloon::before{bottom:-20px;border-top:20px solid var(--ink)}
.balloon::after{bottom:-15px;border-top:20px solid var(--white)}

/* ---------------------------------------------------- 写真・画面のはめ込み枠 */
.stage{position:relative;max-width:26rem;margin:0 auto;isolation:isolate}
.frame{
  display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--hair);border-radius:1.5rem;
  box-shadow:var(--soft);overflow:hidden;
  color:var(--ink-2);font-size:.75rem;letter-spacing:.16em;
}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame.phone{aspect-ratio:9/19.5;max-width:15rem;margin:0 auto;border-radius:2rem}
.frame.wide{aspect-ratio:16/10;border-radius:1rem}
.frame.square{aspect-ratio:1/1;border-radius:1rem}

/* 浮かせる小さなカード。少し傾けて重ねる */
.float{
  position:absolute;width:8.5rem;border-radius:1rem;
  box-shadow:var(--soft);background:var(--white);border:1px solid var(--hair);
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:.6875rem;letter-spacing:.14em;
}
.float.a{left:-1rem;top:14%;transform:rotate(-7deg)}
.float.b{right:-1rem;bottom:10%;transform:rotate(6deg)}
@media (max-width:34rem){.float{display:none}}

/* 端末の後ろに敷く面。ブランドの色をうっすら使う */
.stage::before{
  content:"";position:absolute;inset:auto 0 -6% 0;height:70%;
  background:var(--grad);opacity:.28;border-radius:999px;z-index:-1;
}
.band.brand .stage::before{background:var(--white);opacity:.55}

/* 丸いバッジ */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:4.5rem;height:4.5rem;border-radius:50%;
  background:var(--grad);color:var(--ink);
  font-size:.75rem;font-weight:800;line-height:1.4;text-align:center;
}

/* ------------------------------------------------------------------- 並べる */
.cols{display:grid;gap:clamp(1.25rem,4vw,2rem);margin:0}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:48rem){.cols-3{grid-template-columns:1fr}}
@media (max-width:40rem){.cols-2{grid-template-columns:1fr}}

.block{margin:0 0 clamp(2.5rem,7vw,3.5rem)}
.block:last-child{margin-bottom:0}
.block h3{
  font-size:clamp(1.0625rem,3.4vw,1.375rem);font-weight:800;
  margin:0 0 .5rem;letter-spacing:-.01em;
}
.block p{margin:0;opacity:.88}

/* 白い面に置く「できること」 */
.tile{
  background:var(--white);border:1px solid var(--hair);border-radius:1.25rem;
  padding:1.5rem 1.375rem;text-align:left;
}
.tile h3{font-size:1.0625rem;font-weight:800;margin:0 0 .375rem}
.tile p{margin:0;font-size:.9375rem;color:var(--ink-2)}

/* 手順 */
.step{margin:0}
.step .no{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;border-radius:50%;
  background:var(--grad);color:var(--ink);
  font-weight:800;font-size:1rem;margin:0 0 1rem;
}
.step h3{font-size:clamp(1.125rem,3.6vw,1.375rem);font-weight:800;margin:0 0 .5rem}
.step p{margin:0 0 1.5rem;color:var(--ink-2)}

/* 手順どうしをつなぐ点線 */
.dash{
  width:0;height:clamp(2.5rem,7vw,4rem);margin:0 auto;
  border-left:5px dashed var(--brand);
}

/* 全幅の写真の帯 */
.bleed{
  width:100%;aspect-ratio:16/7;display:flex;align-items:center;
  justify-content:center;background:var(--paper-2);color:var(--ink-2);
  font-size:.75rem;letter-spacing:.16em;overflow:hidden;
}
.bleed img{width:100%;height:100%;object-fit:cover;display:block}

/* 料金 */
.price-card{
  background:var(--white);border:1px solid var(--hair);border-radius:1.25rem;
  padding:2rem 1.5rem;text-align:center;
}
.price-card.on{border:3px solid var(--ink)}
.price-card h3{font-size:1.0625rem;font-weight:800;margin:0 0 .25rem}
.price-card .amount{
  font-size:2rem;font-weight:800;letter-spacing:-.02em;margin:0 0 1rem;line-height:1.3;
}
.price-card ul{list-style:none;margin:0;padding:0;font-size:.9375rem;color:var(--ink-2)}
.price-card li{margin:.375rem 0}

/* よくある質問（Q と A） */
.qa-item{text-align:left;max-width:38rem;margin:0 auto}
.qa-q{
  display:flex;gap:.75rem;align-items:baseline;
  font-size:clamp(1rem,3.2vw,1.1875rem);font-weight:800;line-height:1.6;
  margin:0 0 1rem;
}
.qa-q .lbl{font-size:1.25em;font-weight:800;flex:none}
.qa-a{
  display:flex;gap:.75rem;align-items:flex-start;
  background:var(--white);border-radius:1.25rem;
  padding:1.25rem 1.375rem;margin:0;
}
.qa-a .lbl{font-weight:800;flex:none;color:var(--ink-2)}
.qa-a p{margin:0;font-size:.9375rem;line-height:1.9;color:var(--ink-2)}
.qa-sep{
  width:100%;max-width:38rem;
  margin:clamp(2rem,6vw,3rem) auto;
  border:0;border-top:5px dashed var(--brand);
}

/* 締めのボタン */
.cta{display:flex;flex-direction:column;align-items:center;gap:.75rem}

/* ---------------------------------------------------------------- 足もと */
.lp-foot{
  background:var(--ink);color:var(--paper);
  padding:clamp(3rem,8vw,4.5rem) clamp(1.25rem,5vw,2.5rem);
  text-align:center;
}
.lp-foot .mark{
  display:block;font-size:1.25rem;font-weight:800;margin:0 0 1.75rem;
  color:var(--paper);border:0;text-decoration:none;
}
.lp-foot a{color:var(--paper);border-bottom:1px solid rgba(251,243,233,.35)}
.lp-foot a:hover{border-bottom-color:var(--paper)}
.lp-foot .links{
  display:flex;flex-direction:column;gap:.875rem;align-items:center;
  margin:0 0 2rem;font-size:.9375rem;
}
.lp-foot .tiny{color:rgba(251,243,233,.6)}

/* =============================================================================
   お問い合わせフォーム。アプリのページ（.lp-page）の色で出す。
   送信の処理は /assets/contact.js。受け口は contact.isasaka-lab.com
   ============================================================================= */
.lp-page form{max-width:34rem;margin:0 auto;text-align:left}
.lp-page .field{margin:0 0 1.5rem}
.lp-page label{
  display:block;font-size:.875rem;font-weight:700;margin:0 0 .5rem;color:var(--ink);
}
.lp-page .req{font-size:.75rem;font-weight:700;margin-left:.5rem;color:var(--ink)}
.lp-page .opt{font-size:.75rem;font-weight:400;margin-left:.5rem;color:var(--ink-2)}
.lp-page input,.lp-page select,.lp-page textarea{
  width:100%;padding:.875rem 1rem;font:inherit;font-size:1rem;
  color:var(--ink);background:var(--white);
  border:1px solid var(--hair);border-radius:.75rem;
}
.lp-page textarea{min-height:12rem;resize:vertical;line-height:1.8}
.lp-page input:focus,.lp-page select:focus,.lp-page textarea:focus{
  outline:none;border-color:var(--ink);
}
.lp-page .hint{font-size:.8125rem;color:var(--ink-2);line-height:1.8;margin:.5rem 0 0}
.lp-page button{
  font:inherit;font-size:.9375rem;font-weight:700;cursor:pointer;width:100%;
  padding:.9375rem 2rem;border-radius:999px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);
}
.lp-page button:hover:not(:disabled){background:transparent;color:var(--ink)}
.lp-page button:disabled{opacity:.4;cursor:default}
/* 迷惑投稿よけの隠し欄。人には見せない */
.lp-page .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lp-page .status{display:none;margin:1.25rem 0 0;font-size:.9375rem;text-align:center}
.lp-page .status.show{display:block}
.lp-page .status.ok{color:var(--ink-2)}
.lp-page .status.ng{color:var(--ink);font-weight:700}

/* ------------------------------------------------------ スクロールで出てくる
   下から 22px ぶん、ふわっと上がってくる。動かすのは `/assets/reveal.js`。

   🔴 **隠す側は `:where()` で囲む。** `:where()` は詳細度を 0 にするので、
     出す側（`html.reveal .in`）が必ず勝つ。外すと、隠れたまま出てこない。

   🔴 **対象の並びは `reveal.js` の `SEL` と揃える。** 片方だけ足すと、
     隠れたまま出てこない要素ができる。

   `html.reveal` は JavaScript が動いたときだけ付く。止まっている端末では
   この規則ごと効かず、ふつうに全部見える。
   ------------------------------------------------------------------------- */
html.reveal :where(
  .lp-page .ttl,
  .lp-page .eyebrow,
  .lp-page .sub,
  .lp-page .cta,
  .lp-page .block,
  .lp-page .step,
  .lp-page .dash,
  .lp-page .tile,
  .lp-page .price-card,
  .lp-page .qa-item,
  .lp-page .qa-sep,
  .lp-page .bleed,
  .lp-page .stage:not(.step .stage),
  .lp-page .tiny:not(.cta .tiny),
  .lp-page .pill:not(.cta .pill)
){
  opacity:0;
  transform:translateY(22px);
  /* 終わりぎわがゆっくり止まる曲線。行き過ぎて戻る動きは入れない */
  transition:opacity .8s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 70ms);
  /* 動いている最中に文字がにじむのを防ぐ */
  will-change:opacity,transform;
}
html.reveal .in{opacity:1;transform:none;will-change:auto}

/* 動きを減らす設定の人には出し入れをしない（`reveal.js` 側でも止めている。
   ここは、あとから JavaScript を変えたときの保険） */
@media (prefers-reduced-motion:reduce){
  html.reveal :where(.lp-page *){
    opacity:1 !important;transform:none !important;transition:none !important;
  }
}