/*
 * 商品説明のページ。
 *
 * 色・書体・図は /mvp1/style.css をそのまま使う。ここでは足さない。
 * 2つの画面で別々の見た目にすると、同じサービスに見えなくなる。
 * このファイルにあるのは、このページにしか無い並べ方だけ。
 */

/*
 * Heroの上下は広く取る。ゆうすけから「縦余白を増やせ」と指示。
 * 文字量を増やさずに階層を作るのは余白の仕事。
 * desktop 96px / mobile 64px を基準にしている。
 */
.lp .wrap{padding:0 0 4rem}
.lp .hero{padding:96px 0}

/* ① 何の商品か。写真は右（狭い画面では下） */
.hero{
  display:grid; grid-template-columns:1fr 1fr; gap:48px;
  align-items:center; margin:0;
}
.hero h1{
  margin:0 0 1.1rem; font-size:34px; line-height:1.45; font-weight:700;
  letter-spacing:.01em; text-wrap:balance;
}
.hero-sub{margin:0 0 1.4rem; font-size:15px; line-height:1.9; color:var(--muted)}
.hero-img{margin:0; border-radius:10px; overflow:hidden; background:var(--line-soft)}
.hero-img img{display:block; width:100%; height:auto; object-fit:cover; aspect-ratio:4/3}

/* 条件。/app と同じ見た目 */
.lp .terms{
  margin:0; font-size:13px; color:var(--muted);
  display:flex; flex-wrap:wrap; align-items:baseline;
}
.lp .terms b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; margin:0 1px}
.lp .terms .sep{color:var(--faint); margin:0 12px}
/* いま何件あるかは、条件ではなく状況。1段下げて置く */
.nowcount{margin:.5rem 0 0; font-size:13px; color:var(--muted)}
.nowcount b{color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums}

/* ② 以降の節 */
.sec{margin:0 0 3rem}
.sec h2{
  margin:0 0 1.2rem; font-size:22px; line-height:1.5; font-weight:700;
  padding-bottom:.7rem; border-bottom:1px solid var(--line);
}
.lp .flowwrap{margin:0 0 .8rem}
.lp .note-sm{margin:0; font-size:13px; line-height:1.8; color:var(--muted)}

/* ④ 実際の画面。枠を付けて、ページの一部ではなく画面の写しだと分かるようにする */
/*
 * 実際の一覧の写し。縦は全部入らないので下端で切れる。
 * ただ切ると「作りかけ」に見えるので、下を薄くして続きがあることを示す。
 */
.shot{position:relative; margin:0; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--card)}
.shot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:64px; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--card));
}
.shot img{display:block; width:100%; height:auto}

/* ⑤ 分かっていること・いないこと */
.facts-dl{
  display:grid; grid-template-columns:auto 1fr; gap:.55rem 1.4rem;
  margin:0; font-size:14px; line-height:1.7;
}
.facts-dl dt{color:var(--muted); white-space:nowrap}
.facts-dl dd{margin:0}

.lp-foot{margin-top:3.5rem; padding-top:1.4rem; border-top:1px solid var(--line)}
.op{
  display:grid; grid-template-columns:auto 1fr; gap:.4rem 1.4rem;
  margin:0 0 1rem; font-size:13px; line-height:1.7;
}
.op dt{color:var(--muted); white-space:nowrap}
.op dd{margin:0}

@media (max-width:768px){
  .lp .wrap{padding:0 0 3rem}
  /* 写真を上に出す。文章より先に目に入ったほうが、何の話かが早く伝わる */
  .lp .hero{padding:64px 0}
  .hero{grid-template-columns:1fr; gap:24px; margin:0}
  .hero-img{order:-1}
  .hero h1{font-size:26px; line-height:1.45}
  .lp .terms{display:block; line-height:1.9}
  .lp .terms .t{display:block}
  .lp .terms .sep{display:none}
  .sec{margin-bottom:2.2rem}
  .facts-dl, .op{grid-template-columns:1fr; gap:.15rem 0}
  .facts-dl dt, .op dt{margin-top:.6rem; font-size:12px}
}

/*
 * 時間軸。示すのは「開店してからではなく、開店前に見つけられる」という時点だけ。
 *
 * 以前は 求人 → 公式発表 → 開店情報 を軸の上に左から順に置いていた。これは誤り。
 * その順番で出てくるという事実を確かめていない。港区で分かっているのは
 * 「媒体によって見つかる時期が違った例がある」までで、3媒体の前後関係ではない。
 * 図にすると、文章より強く断定して見える。
 *
 * なので3つは軸の点に結びつけない。開業前の期間全体にかかる箱に入れる。
 * 前後関係は表さない。
 *
 * 画像ではなく組んでいるのは、狭い画面で画像内の文字が5pxまで縮んで読めなくなるため。
 * この組み方なら幅が変わっても文字の大きさは変わらない。
 */
.tl{
  margin:0 0 1.2rem; max-width:720px;
  display:grid; grid-template-columns:1fr auto; column-gap:16px; align-items:center;
}
.tl-pre{grid-column:1; grid-row:1; margin:0 0 6px; font-size:13px; font-weight:700; color:var(--accent)}
.tl-band{grid-column:1; grid-row:2; height:14px; border-radius:7px; background:var(--accent-soft)}
.tl-end{
  grid-column:2; grid-row:2; margin:0;
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:700; color:var(--ink); white-space:nowrap;
}
.tl-end i{display:block; width:2px; height:16px; background:var(--ink)}
.tl-box{
  grid-column:1; grid-row:3; margin-top:8px;
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 14px 12px;
}
.tl-box-h{margin:0 0 8px; font-size:13px; color:var(--muted)}
.tl-src{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.tl-src li{
  font-size:13px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); border-radius:6px; padding:5px 12px;
}
/* 「など」は媒体ではないので、札にしない */
.tl-src li.etc{background:transparent; color:var(--muted); font-weight:400; padding:5px 2px}
.tl-cap{grid-column:1 / -1; grid-row:4; margin:12px 0 0; font-size:13px; font-weight:700; color:var(--accent)}

/*
 * 一覧と詳細で、同じ項目の解像度が上がることを示す表。
 *
 * 以前は左右に項目を並べただけで、どれとどれが対応するのか分からなかった。
 * 行ごとに「何のために見る項目か」を置き、同じ行で具体になる形にする。
 * これで水平位置に意味が出る。
 */
.grow{width:100%; border-collapse:collapse; font-size:14px}
.grow th, .grow td{padding:14px 16px; text-align:left; vertical-align:top}
.grow thead th{
  font-size:12px; font-weight:700; color:var(--muted);
  letter-spacing:.04em; border-bottom:1px solid var(--line); padding-bottom:10px;
}
.grow tbody th{font-weight:700; color:var(--ink); white-space:nowrap; width:1%}
.grow tbody tr{border-bottom:1px solid var(--line-soft)}
.grow tbody tr:last-child{border-bottom:0}
.grow td{color:var(--muted)}
/* 右側が「増えるぶん」。ここだけ本文色にして、左より強くする */
.grow td.open{color:var(--ink); font-weight:700}
.grow .to{width:1%; color:var(--faint); text-align:center; white-space:nowrap}
/* 例は実データから採っている。作り話を置かない */
.eg{display:block; margin-top:.25rem; font-size:12px; font-weight:400; color:var(--faint)}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* 使い方の3手順。番号に意味があるので ol で書く */
.steps{
  margin:1rem 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:10px; counter-reset:s;
}
.steps li{
  flex:1 1 200px; position:relative; padding:.7rem 1rem .7rem 2.6rem;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  font-size:13px; line-height:1.5;
}
.steps li::before{
  counter-increment:s; content:counter(s);
  position:absolute; left:1rem; top:.7rem;
  width:1.2rem; height:1.2rem; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-size:11px; font-weight:700; line-height:1.2rem; text-align:center;
}

/*
 * 次の行動。行き先を2つに分ける。
 * この画面は個別URLでしか開けないので、URLを持っていない人に
 * 「無料で見る」ボタンを出しても押した先が無い。
 */
.cta-two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.cta-card{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.1rem 1.2rem}
.cta-h{margin:0 0 .4rem; font-size:14px; font-weight:700}
.cta-b{margin:0; font-size:13px; line-height:1.7; color:var(--muted)}
.cta-mail{margin:.6rem 0 0; font-size:14px; font-weight:700}
.cta-mail a{color:var(--accent)}

@media (max-width:768px){
  .grow, .grow thead, .grow tbody, .grow tr, .grow th, .grow td{display:block; width:auto}
  .grow thead{position:absolute; left:-9999px}
  .grow tbody tr{padding:.9rem 0}
  .grow tbody th{padding:0 0 .5rem; font-size:13px}
  .grow td{padding:0 0 .5rem}
  /* 縦積みでは矢印が行の向きを示せないので、下向きにする */
  .grow .to{text-align:left; padding:0 0 .5rem; transform:rotate(90deg); width:1.2rem}
  .cta-two{grid-template-columns:1fr}
  .steps{flex-direction:column}
}

/*
 * ファーストビューの押しどころ。
 * 個別URLを持たない人でも押せる先へ送る。下の一覧まで飛ばすだけ。
 * 押した先が無いボタンを置くほうが、信用を落とす。
 */
.hero-cta{margin:1.3rem 0 .8rem}
.hero-cta a{
  display:inline-block; padding:11px 20px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink);
  font-size:14px; font-weight:700; text-decoration:none;
}
.hero-cta a:hover{filter:brightness(1.08)}
.hero-cta .dn{margin-left:.5rem}
.nowcount .sep{color:var(--faint); margin:0 8px}
.cta-box{background:var(--card); border:1px solid var(--line); border-radius:8px; padding:1.6rem 1.4rem; text-align:center}
.cta-box .cta-h{margin:0; font-size:16px; font-weight:700}
.cta-box .hero-cta{margin:1rem 0 .8rem}
.cta-box .cta-b{margin:0; font-size:13px; color:var(--muted)}
.cta-box .cta-b a{color:var(--accent)}

/*
 * ファーストビューの押しどころは、補助にとどめる。
 * ここで買わせるのではなく、縦に長いページで最初の迷いを消すのが役目。
 * 塗りつぶしのボタンにすると「今すぐ購入」に見えて、初対面には重い。
 */
.hero-cta a.soft{
  background:transparent; color:var(--accent);
  border:1px solid var(--accent); padding:10px 18px;
}
.hero-cta a.soft:hover{background:var(--accent-soft); filter:none}

/*
 * 料金。買う判断をする場所なので、値段を並べるだけにしない。
 * 1件あたりいくらかは、読む人の頭の中で必ず計算される。先に出す。
 * 付いてこないもの（店舗ごとに未確認の項目がある）も同じ面に置く。隠すと後で不信になる。
 */
.price{
  display:grid; grid-template-columns:auto 1fr; gap:0 2.4rem; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:1.6rem 1.8rem; margin:0 0 .8rem;
}
.price-main{text-align:center; padding-right:2.4rem; border-right:1px solid var(--line-soft)}
.price-lead{margin:0; font-size:13px; color:var(--muted)}
.price-amt{margin:.2rem 0 0; color:var(--accent); font-weight:700; line-height:1.1}
.price-amt b{font-size:38px; font-variant-numeric:tabular-nums}
.price-amt .yen{font-size:15px; margin-left:.15rem}
.price-per{margin:.4rem 0 0; font-size:12px; color:var(--faint)}
.price-list{list-style:none; margin:0; padding:0; font-size:15px; line-height:1.7}
.price-list li{position:relative; padding:.35rem 0 .35rem 1.5rem}
.price-list li::before{
  content:""; position:absolute; left:.15rem; top:.75rem;
  width:.55rem; height:.3rem; border-left:2px solid var(--accent);
  border-bottom:2px solid var(--accent); transform:rotate(-45deg);
}
/* 付いてこないものは、印を変える。同じチェックにすると利点に見える */
.price-list li.no{color:var(--muted)}
.price-list li.no::before{
  border:0; width:auto; height:auto; transform:none;
  content:"—"; color:var(--faint); top:.35rem; font-weight:700;
}

@media (max-width:768px){
  .price{grid-template-columns:1fr; gap:1rem 0; padding:1.3rem 1.2rem}
  .price-main{padding:0 0 1rem; border-right:0; border-bottom:1px solid var(--line-soft)}
}

/* ジッピーが作った図。枠を付けず、そのまま置く */
.fig{margin:0 0 .8rem}
.fig img{display:block; width:100%; height:auto; border-radius:8px}


/*
 * ③ 実際にどう使うのか。スクロールに連動して右の画面が進む。
 *
 * 目的は装飾ではなく、使い方が文章を読まずに伝わること。
 * 動きは slide / fade / highlight / 数字が増える、だけにする。
 * 浮かせたり跳ねさせたりしない。「すごいでしょ」になった時点で目的から外れる。
 *
 * 左は補助。右の画面だけ見れば意味が分かるようにする。
 */
/*
 * 左に文、右に画面。ただしHTMLでは画面を先に書いている。
 * 狭い画面では画面を上に貼り付けて、その下に文を流したいので、
 * 文書順を「画面 → 文」にしておき、広い画面のときだけ order で左右を入れ替える。
 * 文を先に書いてしまうと、狭い画面で貼り付ける相手が上に無くなる。
 */
.demo{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr); gap:24px; align-items:start}
.demo-steps{order:1; max-width:30rem; margin-left:auto}
.demo-stage{order:2}

.demo-steps{list-style:none; margin:0; padding:0; counter-reset:d}
.demo-steps li{
  min-height:54vh; display:flex; flex-direction:column; justify-content:center;
  padding-left:3.2rem; position:relative;
  /*
   * 現在の段以外を薄くする。ただし薄くしすぎない。
   * 大きく消し込むと、いかにもSaaSのスクロール演出になる。
   * ここでやりたいのは目立たせることではなく、いまどこを読むかを示すことだけ。
   */
  opacity:.45; transition:opacity .35s ease;
}
.demo-steps li.on{opacity:1}
.demo-steps li::before{
  counter-increment:d; content:counter(d);
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:2.2rem; height:2.2rem; border-radius:50%;
  background:var(--line-soft); color:var(--muted);
  font-size:13px; font-weight:700; line-height:2.2rem; text-align:center;
  transition:background .35s ease, color .35s ease;
}
.demo-steps li.on::before{background:var(--accent); color:var(--accent-ink)}
.demo-steps b{display:block; font-size:20px; font-weight:700; margin:0 0 .5rem}
.demo-steps span{display:block; font-size:14px; line-height:1.9; color:var(--muted)}

/*
 * 各段に添える写真。
 *
 * 主役は説明文のほう。写真は「何の話をしているか」を一目で分からせるための脇役。
 * 大きくしない。説明より目立たせない。
 *
 * 高さを決めて object-fit:cover で切る。縦横の比が違う写真が混ざっても
 * 段の高さが揃い、レイアウトが暴れない。
 * 幅は本文の幅まで。画面いっぱいに敷かない。
 */
.step-img{
  display:block; width:100%; height:132px; object-fit:cover;
  margin:0 0 .9rem; border-radius:8px;
  background:var(--line-soft);   /* 読み込み前でも段の高さが変わらない */
}

/* スマホは縦に長くなるので、さらに小さくする */
.mstep .step-img{height:104px; margin:0 0 .7rem}

/* 問い合わせの写真は、文章の上に小さく置くだけ */
.cta-box .step-img{height:120px; max-width:22rem; margin:0 auto 1rem}

/* 右は貼り付けて動かす。高さは画面に収める */
.demo-stage{position:sticky; top:88px}

/* ---- 画面の模型。/app と同じ配色・同じ組み方にする ---- */
.dm{
  position:relative; overflow:hidden;
  background:var(--ground); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--shadow);
}
.dm-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line);
}
.dm-mark{font-size:14px; font-weight:700; color:var(--accent)}
.dm-count{
  font-size:13px; padding:6px 12px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent); font-weight:700;
  transition:transform .3s ease;
}
.dm-count b{font-variant-numeric:tabular-nums}
.dm.bump .dm-count{transform:scale(1.12)}
.dm-body{position:relative; height:558px}

.dm-list{width:100%; border-collapse:collapse; background:var(--card); font-size:13px}
.dm-list th{
  text-align:left; font-size:11px; font-weight:700; color:var(--muted);
  letter-spacing:.04em; padding:10px 14px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.dm-list td{padding:13px 14px; border-bottom:1px solid var(--line-soft); white-space:nowrap}
.dm-list tr{transition:background .3s ease}
.dm-list tr.hi td{background:var(--accent-soft)}
/* 開いている行の左に線を引く。細い帯だけ見えている状態でも、どれを開いたか分かる */
.dm-list tr.hi td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.dm-list tr.got td{background:var(--line-soft)}
.dm-go{text-align:right; color:var(--faint); font-size:12px}

/* 詳細と営業リストは、右から出る。実際の画面と同じ向き */
/*
 * 詳細は右から出るが、一覧を2〜3割残す。
 * 全部覆うと詳細だけの単体画面に見えて、「一覧から1件を開いている」関係が消える。
 * このデモで見せたいのは 一覧 → 詳細 → 追加 → 一覧 → 別の店 という循環なので、
 * 一覧が視界から消えてはいけない。
 */
.dm-panel{
  position:absolute; top:0; right:0; bottom:0; width:72%;
  background:var(--card); border-left:1px solid var(--line);
  display:flex; flex-direction:column;
  transform:translateX(102%); opacity:0;
  transition:transform .45s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
  /*
   * 出入りの途中で、細い帯だけが残って壊れて見えていた。
   * 途中のコマも見られるので「途中だから」で済ませない。
   * 滑らせながら消す。中身が細く潰れた状態を見せない。
   */
  box-shadow:-8px 0 24px rgba(27,33,38,.06);
}
.dm-panel.in{transform:none; opacity:1}
.dm-panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line-soft);
}
.dm-tag{font-size:12px; color:var(--muted); letter-spacing:.04em}
.dm-x{color:var(--muted); font-size:13px}
.dm-panel-body{flex:1; overflow:hidden; padding:14px}
.dm-panel-body h3{margin:0 0 10px; font-size:17px; font-weight:700; line-height:1.4}
.dm-sec{border-top:1px solid var(--line-soft); padding-top:10px; margin-top:10px}
.dm-sec:first-of-type{border-top:0; padding-top:0; margin-top:0}
.dm-sec h4{
  margin:0 0 8px; font-size:11px; font-weight:700; color:var(--muted); letter-spacing:.06em;
}
.dm-sec dl{display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0 0 6px; font-size:13px}
.dm-sec dt{color:var(--muted); white-space:nowrap}
.dm-sec dd{margin:0}
.dm-sec dd.none{color:var(--faint)}
.dm-sec dl.sub{font-size:12px}
.dm-sec dl.sub dd{color:var(--muted)}
.dm-srcs{list-style:none; margin:0; padding:0; font-size:12px}
.dm-srcs li{padding:2px 0; color:var(--accent)}
.dm-srcs span{color:var(--faint); margin-left:3px}
.dm-panel-foot{padding:12px 14px; border-top:1px solid var(--line)}
.dm-why{margin:0 0 8px; font-size:11px; color:var(--muted); line-height:1.6}
.dm-btn{
  display:block; text-align:center; padding:9px 14px; border-radius:6px;
  background:var(--accent); color:var(--accent-ink); font-size:13px; font-weight:700;
}
.dm-btn.off{background:var(--accent-soft); color:var(--accent)}
.demo-note{margin-top:12px}

@media (prefers-reduced-motion: reduce){
  .dm-panel, .dm-count, .demo-steps li, .demo-steps li::before, .dm-list tr{transition:none}
}

@media (max-width:900px){
  /* 狭い画面では横に並べられない。画面を上に貼り付けて、文は下に流す */
  /* 横に並べられない。画面を上に貼り付けて、文はその下を流す */
  .demo{display:block}
  .demo-stage{
    position:sticky; top:52px; z-index:5;
    background:var(--ground); padding:8px 0 12px; margin-bottom:4px;
  }
  /*
   * 狭い画面では、詳細の中身が枠に入りきらず、後ろの節と「情報源」が切れていた。
   * 段2の文が「情報源が出ます」と言っているのに、それが見えない状態。
   * 枠を高くし、節の間を詰め、フッタの補助文を省いて、3節すべてを入れる。
   */
  .dm-body{height:486px}
  .dm-panel{width:90%}
  .dm-sec{padding-top:6px; margin-top:6px}
  .dm-sec h4{margin-bottom:5px}
  .dm-sec dl{gap:3px 12px; margin-bottom:3px}
  .dm-panel-body{padding:10px 12px}
  .dm-panel-foot .dm-why{display:none}
  .demo-steps li{min-height:40vh; padding-left:2.8rem}
  .demo-steps b{font-size:17px}
  .demo-steps span{font-size:13px}

  /*
   * 一覧は5列のままでは390pxに入らない。/app の狭い画面と同じ組み方にする。
   * 表をやめて1件1枚のカードにし、業態を主、エリアと状態を従に置く。
   * ここで別の見せ方にすると、デモと実際の画面が食い違う。
   */
  .dm-list thead{display:none}
  .dm-list, .dm-list tbody, .dm-list tr, .dm-list td{display:block; width:auto}
  .dm-list tr{
    display:grid; grid-template-columns:1fr auto;
    grid-template-areas:"cat open" "area area" "cst cst";
    gap:2px 10px; padding:10px 14px; border-bottom:1px solid var(--line-soft);
  }
  .dm-list td{padding:0; border:0}
  .dm-list td[data-l="業態"]{grid-area:cat; font-weight:700; font-size:13px}
  .dm-list td[data-l="開業予定"]{grid-area:open; font-size:12px; color:var(--muted)}
  .dm-list td[data-l="エリア"]{grid-area:area; font-size:12px; color:var(--muted)}
  .dm-list td[data-l="確認できている情報"]{grid-area:cst; margin-top:3px}
  .dm-list .dm-go{display:none}
  /* カードにすると、セルごとに塗ると隙間で縞になる。行ごと塗る */
  .dm-list tr.hi{background:var(--accent-soft)}
  .dm-list tr.got{background:var(--line-soft)}
  .dm-list tr.hi td, .dm-list tr.got td{background:transparent}
}

/*
 * スクロールで動くことを先に言う。
 *
 * 右の画面は貼り付けたまま、左の手順だけが進む。説明が無いと
 * 「スクロールが止まった」「ページが固まった」と読まれる。実機で触った人がそう感じた。
 * 演出の前に、何が起きるのかを文で書く。
 */
.demo-lead{margin:0 0 .4rem; font-size:15px; font-weight:700}
.demo-flow{margin:0 0 1.8rem; font-size:13px; color:var(--muted); line-height:1.9}

/* いま何段目か。丸数字だけだと全体の長さが分からない */
.demo-steps .step-n{
  display:block; font-style:normal; font-size:12px; font-weight:700;
  color:var(--muted); letter-spacing:.04em; margin:0 0 .35rem;
}
.demo-steps li.on .step-n{color:var(--accent)}

/*
 * 追加した瞬間に、何が変わったかを指す。
 *
 * 件数は小さく、押した場所から離れているので、増えても気づかれない。
 * 1秒だけ枠で囲み、数字を大きくし、言葉でも出す。
 * 色は緑（ブランドの色）。赤はエラーや警告に見える。
 */
/* 知らせを浮かせる土台。詳細パネル（.dm-body の中）より前に出す */
.dm-bar{position:relative; z-index:2}
/*
 * 知らせは浮かせる。並びに入れると、出ていない間も場所を取り、
 * 「営業リスト」が右端から中央へずれる。本物の画面と違う見え方になる。
 */
.dm-added{
  position:absolute; left:50%; top:50%;
  font-size:12px; font-weight:700; color:var(--accent-ink);
  background:var(--accent); border-radius:6px; padding:5px 10px;
  white-space:nowrap;
  opacity:0; transform:translate(-50%,calc(-50% - 3px));
  transition:opacity .2s ease, transform .2s ease; pointer-events:none;
}
.dm.added .dm-added{opacity:1; transform:translate(-50%,-50%)}
.dm.added .dm-count{
  outline:2px solid var(--accent); outline-offset:3px;
  transform:scale(1.12);
}
.dm.added .dm-count b{font-size:16px}
/* 押したボタン側も短く光らせて、押した場所と結果をつなぐ */
.dm.added .dm-btn{box-shadow:0 0 0 3px var(--accent-soft)}

@media (max-width:860px){
  /*
   * 狭い画面では、バーの中に置くと「OpeningCue」と件数の両方に重なる。
   * 360px幅で実測して分かった。バーの下へ出す。
   */
  .dm-added{
    font-size:11px; padding:4px 8px;
    top:calc(100% + 6px); transform:translate(-50%,-3px);
  }
  .dm.added .dm-added{transform:translate(-50%,0)}
}

@media (prefers-reduced-motion: reduce){
  /*
   * 動きを減らす設定の人にも、追加されたことは伝える。
   * 消すのは動きだけ。枠と文字はそのまま出す。
   */
  .dm-added{transition:none}
  .dm.added .dm-count{transform:none}
}

/*
 * 「営業候補は、開店前から見つけられます。」の節。
 *
 * 伝えることは1つだけ。
 * 複数のサイトを自分で探す作業が、開業予定店舗の一覧を見る作業に変わる。
 *
 * 節ごと中央に置く。見出し・説明・図の中心線を揃える。
 * 以前は左寄せで、幅の広い画面だと本文の一部のように見えてバランスが悪かった。
 *
 * 装飾はしない。囲みも影もグラデーションも使わない。
 * 上下の関係は矢印1本と余白で示す。文字を薄く小さくして「おしゃれ」にしない。
 */
.why{text-align:center}
.why h2{text-align:center}
.why-lead{margin:0 auto 2.4rem; max-width:44rem; font-size:16px; line-height:2; color:var(--ink)}

.fl{margin:0; display:flex; flex-direction:column; align-items:center; gap:0}

/* 情報の出どころ */
.fl-src{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.fl-src li{
  padding:8px 14px; border:1px solid var(--line); border-radius:6px;
  background:var(--card); font-size:15px; font-weight:700; color:var(--ink);
}
.fl-src li.etc{border:0; background:none; font-weight:400; color:var(--muted); padding-left:2px}

/* 矢印は1本ずつ。線を引くだけ */
.fl-step, .fl-gain{position:relative; margin:0; padding:2.2rem 0 0}
.fl-step::before, .fl-gain::before{
  content:""; position:absolute; left:50%; top:.7rem; width:1px; height:1.1rem;
  background:var(--line); transform:translateX(-50%);
}

/* 何をしているか */
.fl-step{font-size:16px; font-weight:700; color:var(--ink); padding-bottom:2.2rem}

/* 出来上がるもの＝実際の一覧と同じ形 */
.fl-cards{
  list-style:none; margin:0; padding:0;
  /* 横いっぱいを使わせないと、3枚が 2枚+1枚 に折り返して重心がずれる */
  width:100%; max-width:54rem;
  display:flex; flex-wrap:wrap; justify-content:center; gap:12px;
}
.fl-cards li{
  flex:1 1 15rem; min-width:0; text-align:left;
  border:1px solid var(--line); border-radius:8px; background:var(--card); padding:14px 16px;
}
.fl-cards b{display:block; font-size:16px; font-weight:700; margin:0 0 .4rem; color:var(--ink)}
.fl-cards span{display:block; font-size:14px; line-height:1.8; color:var(--ink)}
.fl-cards em{display:block; margin-top:.6rem; font-style:normal}
.fl-cards i{
  display:inline-flex; align-items:center; gap:4px;
  margin:0 4px 4px 0; padding:3px 8px; border-radius:4px;
  background:var(--line-soft); color:var(--ink);
  font-size:12px; font-weight:700; font-style:normal; line-height:1.5;
}

/* 何ができるか → 何が楽になるか */

.fl-gain{font-size:19px; font-weight:700; color:var(--accent); line-height:1.7; max-width:44rem; margin-left:auto; margin-right:auto}
.fl-note{margin:1.4rem 0 0; font-size:14px; color:var(--muted)}

@media (max-width:640px){
  .fl-cards li{flex:1 1 100%}
  .why-lead{font-size:15px}
  .fl-gain{font-size:17px}
}

/*
 * 狭い画面の利用デモ。
 *
 * 広い画面の作り（右を貼り付け、左の手順が進む）を縮めて使うのをやめた。
 * 実機で「スクロールが止まった」と読まれ、手順の説明が画面の裏に隠れていた。
 * 狭い画面では演出を捨て、説明 → その状態の画面 を縦に積む。重ねない。浮かせない。
 */
.mdemo{display:none}

@media (max-width:767px){
  /* 広い画面用のデモは出さない。同じものを2つ見せない */
  .demo{display:none}
  .mdemo{display:block}
  /*
   * 上の案内も広い画面用。
   * 「下へスクロールすると…」は、貼り付けで止まって見えるのを防ぐために置いたもので、
   * 貼り付けをやめた狭い画面には要らない。
   * 流れの1行も 5段（営業リストまで）を前提にしていて、ここの3段と食い違う。
   */
  .demo-lead, .demo-flow{display:none}

  .mstep{margin:0 0 2.6rem}
  .mstep-n{margin:0 0 .3rem; font-size:13px; font-weight:700; color:var(--accent)}
  .mstep h3{margin:0 0 .5rem; font-size:19px; font-weight:700; line-height:1.6; color:var(--ink)}
  .mstep > p{margin:0 0 .9rem; font-size:15px; line-height:1.9; color:var(--ink)}

  /* 画面の模型。説明の下に置く。位置は動かさない */
  .mshot{
    border:1px solid var(--line); border-radius:8px; background:var(--card);
    padding:12px 14px;
  }

  /* 1段目：一覧 */
  .mrow{padding:10px 0; border-bottom:1px solid var(--line-soft)}
  .mrow:last-child{border-bottom:0}
  .mrow b{display:block; font-size:15px; font-weight:700; color:var(--ink)}
  .mrow span{display:inline-block; margin-right:10px; font-size:13px; color:var(--ink)}
  .mrow em{display:block; margin-top:6px; font-style:normal}
  .mrow i{
    display:inline-flex; align-items:center; gap:4px;
    margin:0 4px 4px 0; padding:3px 8px; border-radius:4px;
    background:var(--line-soft); color:var(--ink);
    font-size:12px; font-weight:700; font-style:normal;
  }

  /* 2・3段目：詳細 */
  .mshot-h{margin:0 0 .6rem; font-size:13px; font-weight:700; color:var(--muted)}
  .mshot h4{margin:0 0 .7rem; font-size:18px; font-weight:700; color:var(--ink)}
  .mshot dl{display:grid; grid-template-columns:5.5rem 1fr; gap:8px 10px; margin:0}
  .mshot dt{font-size:13px; font-weight:700; color:var(--muted)}
  .mshot dd{margin:0; font-size:15px; color:var(--ink)}
  .mshot-s{margin:1rem 0 .4rem; font-size:13px; font-weight:700; color:var(--muted)}
  .msrc{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px}
  .msrc li{font-size:13px; color:var(--accent); font-weight:700}

  /*
   * その段で新しく分かったものを緑で指す。
   * 「押したら数字が増えた」ではなく「営業に使える中身が出た」を見せたいので、
   * 強調するのは操作ではなく、出てきた情報のほう。
   */
  .mshot .hi, .mrow i.hi{
    background:var(--accent-soft); color:var(--accent); font-weight:700;
    border-radius:4px; padding:2px 6px;
  }
  .mshot dd.hi{display:inline-block}

  .mcopy{
    margin:1rem 0 0; padding:9px 0; text-align:center;
    border:1px solid var(--accent); border-radius:6px;
    font-size:14px; font-weight:700; color:var(--accent);
  }
  .mcap{margin:.7rem 0 0; font-size:13px; line-height:1.9; color:var(--muted)}
}

/*
 * デモの一覧に出す「確認できている情報」の札。/app と同じ形にする。
 * ここで別の見せ方にすると、デモと実際の画面が食い違う。
 */
/*
 * 種類ごとの色とアイコン。**mvp1/style.css と同じ値にすること。**
 *
 * LPのデモは /app の模型なので、ここだけ別の見せ方にすると
 * 「見たものと違う画面が出てきた」ことになる。
 *
 * 色は3か所（上の図のカード・スマホの模型・デモの表）で共通。
 * アイコンのSVGは index.html に直接書いてある。path も /app と同じもの。
 */
/* i を付けているのは詳細度のため。.fl-cards i / .mrow i と同じ強さにして、
   後ろに書いてあるこちらを勝たせる。付けないと地の色のままになる */
i.k-addr{background:#EAF0F6; color:#2F5273}   /* 青。地図・場所 */
i.k-corp{background:#EFEDF6; color:#4B4478}   /* 紫。組織 */
i.k-tel {background:#EAF1EC; color:#2C5C40}   /* 緑。連絡が取れる */
.kni{width:12px; height:12px; flex:none; fill:currentColor; opacity:.75}

.dm-kn{
  display:inline-flex; align-items:center; gap:4px;
  margin:0 4px 3px 0; padding:2px 7px; border-radius:4px;
  background:var(--line-soft); color:var(--ink);
  font-size:11px; font-weight:700; font-style:normal; line-height:1.5;
}

/*
 * 段3：営業に使える情報を緑で指す。
 * 強調するのは操作ではなく、出てきた中身のほう。
 */
.dm .dm-detail dd{transition:background .3s ease, color .3s ease}
/*
 * 指すのはアプローチ情報の値だけ。
 * 最初に dl 単位で当てたら見出しまで緑になった。値（dd）を名指しする。
 * 未確認の項目は行にせず下の1行（.dm-rest）にまとめているので、緑になることはない。
 */
.dm.show-use .dm-ap dd{
  background:var(--accent-soft); color:var(--accent); font-weight:700;
  border-radius:4px; padding:1px 6px; margin-left:-6px;
}

/*
 * 文字を濃く・太くする。
 *
 * 実機で見た人に「文字が細すぎる。AIっぽい」と言われた。
 * 書体は変えない（system font のまま）。直すのは
 * 「細字 ＋ 薄い色 ＋ 小さい文字」の組み合わせのほう。
 *
 *   本文の主要な文字を薄いグレーから本文色へ
 *   13px を 15px へ（読ませる文だけ。模型の中は実画面の縮小なので触らない）
 *   薄いグレーは、注釈と補足だけに残す
 *
 * 細い線で洗練させるのではなく、文字に存在感を持たせて余白で洗練させる。
 */

/* ヒーロー下の件数。商品の規模を示す数字なので、補足の色にしない */
.nowcount{font-size:15px; color:var(--ink)}

/* 料金の見出し。「全店舗の詳細」は読ませる文 */
.price-lead{font-size:15px; color:var(--ink); font-weight:700}

/* 無料と有料の対比表の見出し */
.grow thead th{font-size:13px; color:var(--ink)}

/* 最後の手順 */
.steps li{font-size:15px}

/* 注釈は小さいままでよいが、薄くしすぎない */
.lp .note-sm{font-size:14px; color:var(--muted)}

/* 図の下の補足 */
.fl-note{font-size:14px}

/* 見出しは太く。細字で見せる作りをやめる */
.sec h2{font-weight:700}

/* ヒーロー直下。商品の説明そのものなので、補足の色にしない */
.hero-sub{color:var(--ink)}
/* ボタンの文言に合わせる。掲載イメージではなく使い方を見せる節になった */

/* デモの詳細：アプローチ情報（/app の .ap-kv と同じ組み方。2026-09-17） */
.dm-ap dl{align-items:center}
.dm-ap dt .dm-kn{margin:0}
.dm-ap dd{font-weight:700; overflow-wrap:anywhere}
.dm-link{color:var(--accent)}
.dm-link span{font-size:.8em; margin-left:3px; font-weight:400}
.dm-rest{margin:6px 0 0; padding-top:6px; border-top:1px dashed var(--line-soft); font-size:11px; color:var(--muted)}

/* スマホの模型：店舗概要の見出しは店名のすぐ下なので上を詰める。未確認の1行は薄く */
.mshot .mshot-s.mshot-s1{margin-top:0}
.mshot-rest{margin:.5rem 0 0; font-size:13px; color:var(--muted)}
/* スマホの模型：項目名の列は「規模の手がかり」が1行に収まる幅。アプローチ情報の項目名は /app と同じタグで出す */
.mshot dl{grid-template-columns:6.8rem 1fr; align-items:center}
.mshot dd{word-break:keep-all; overflow-wrap:anywhere}
.mshot dt i{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 7px; border-radius:4px;
  font-size:12px; font-weight:700; font-style:normal; line-height:1.5;
}
.mshot .nb{white-space:nowrap}
/* ヒーローの説明文は語の途中で折り返さない（「整／理しています」になっていた）。区切りは <wbr> の位置 */
.hero-sub{word-break:keep-all; overflow-wrap:anywhere}

/* ══════════════════════════════════════════════════
   2026-09-17 /app と同じ見た目にそろえる（ジッピー）

   ヒーローは /app の hero2（mvp1/style.css）をそのまま使う。
   使い方は、人物写真と HTML の模型をやめ、実際の画面の写真3枚（tools/lp-shots.mjs）にした。
   ══════════════════════════════════════════════════ */

/* /app は .wrap の上の余白ぶん写真を引き上げている。LP の .wrap は上の余白が0なので戻す */
.lp .hero2{margin-top:0}

/* 写真のすぐ下の白い帯。/app の指標の帯（.facts3）と同じ置き方 */
.lp-band{
  margin:0 calc(50% - 50vw); padding:20px max(24px, calc((100vw - 1120px) / 2));
  background:var(--card); border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.lp-band .nowcount{margin:0}
.lp-band-go{color:var(--accent); font-size:15px; font-weight:700; text-decoration:none; white-space:nowrap}
.lp-band-go span{margin-left:6px}
.lp-band-go:hover{text-decoration:underline}

/* 使い方：文と実際の画面を1段ずつ並べる */
.use2-flow{margin:.2rem 0 0; font-size:14px; color:var(--muted); letter-spacing:.06em}
.steps2{list-style:none; margin:2.4rem 0 0; padding:0; display:flex; flex-direction:column; gap:80px}
.step2{display:grid; grid-template-columns:minmax(280px, 380px) 1fr; gap:56px; align-items:center}
.step2-n{margin:0 0 12px; display:flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--accent); letter-spacing:.08em}
.step2-n b{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; font-size:14px; letter-spacing:0;
}
.step2-txt h3{margin:0 0 12px; font-size:22px; font-weight:700; line-height:1.5; color:var(--ink)}
.step2-txt p:last-child{margin:0; font-size:15px; line-height:1.9; color:var(--ink)}
.step2-shot{margin:0; justify-self:center; min-width:0}
/* 画面の写しだと分かるように、枠と薄い影を付ける */
.step2-shot img{
  display:block; height:auto; max-width:100%;
  border:1px solid var(--line); border-radius:12px; background:#fff;
  box-shadow:0 14px 36px rgba(27,33,38,.08);
}
.step2-shot.wide img{width:100%}
.step2-shot:not(.wide) img{width:420px}
.use2-note{margin-top:48px}

@media (max-width:720px){
  .steps2{gap:52px; margin-top:1.8rem}
  .step2{grid-template-columns:1fr; gap:20px}
  .step2-txt h3{font-size:19px}
  /* スマホは /app のスマホ画面をそのまま、少し小さく真ん中に置く */
  .step2-shot{justify-self:stretch}
  .step2-shot img, .step2-shot.wide img, .step2-shot:not(.wide) img{width:min(300px, 100%); max-height:none; margin:0 auto}
  .lp-band{padding:14px 16px}
  .lp-band .nowcount{font-size:14px}
}

/* ヒーローの帯のすぐ下は詰まるので、最初の節の上をあける */
.lp .sec.why{margin-top:72px}
@media (max-width:720px){ .lp .sec.why{margin-top:44px} }

/* ══════════════════════════════════════════════════
   2026-09-17 ページ全体を、ヒーロー／3ステップと同じ見た目にそろえる（ジッピー）

   明朝の見出し・広い余白・白基調・控えめな緑・細い区切り。新しい飾りは足さない。
   ══════════════════════════════════════════════════ */

/* 節の見出しは、ヒーローと同じ明朝。下線はやめて、余白で区切る */
.lp .sec h2{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  font-weight:600; font-size:clamp(22px, 2.3vw, 30px); line-height:1.6; letter-spacing:.04em;
  text-align:center; border-bottom:0; padding-bottom:0; margin:0 0 1.1rem;
}
.lp .sec{margin:0 0 112px}
.lp .use2 .use2-flow{text-align:center}
@media (max-width:720px){
  .lp .sec{margin-bottom:72px}
  .lp .sec h2{font-size:21px}
}

/* ② 散らばっている情報 → 一覧。中身はそのまま、札と箱を軽くする */
.lp .fl-src{gap:0}
.lp .fl-src li{
  border:0; border-radius:0; background:none; padding:2px 18px;
  font-size:15px; font-weight:500; color:var(--ink);
  border-left:1px solid var(--line);
}
.lp .fl-src li:first-child{border-left:0}
.lp .fl-src li.etc{border-left:0; padding-left:0; color:var(--muted)}
.lp .fl-step{font-size:15px; font-weight:500; color:var(--muted)}
/* 店舗の箱は /app の一覧のカードと同じ白・細い線・角丸 */
.lp .fl-cards{gap:16px}
.lp .fl-cards li{border-radius:12px; padding:20px 22px; box-shadow:0 10px 28px rgba(27,33,38,.05)}
.lp .fl-cards b{font-size:17px}
.lp .fl-cards span{color:var(--muted)}
/* 2つ目の span は開業予定。/app の一覧と同じく「開業予定」と添える */
.lp .fl-cards span + span::before{content:"開業予定　"; font-size:12px; color:var(--muted)}
.lp .fl-cards span + span{color:var(--ink)}
.lp .fl-gain{
  font-family:"Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-weight:600; font-size:clamp(18px, 1.7vw, 22px); color:var(--accent); letter-spacing:.03em;
}

/* ④ 料金。/app の無料3件の説明と同じく、値段を大きく1つ、中央に */
.price2-card{
  max-width:880px; margin:0 auto; padding:44px 48px 36px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; text-align:center;
}
.price2-lead{margin:0; font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.04em}
.price2-amt{margin:.4rem 0 0; color:var(--accent); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums}
.price2-amt b{font-size:clamp(40px, 4.4vw, 56px)}
.price2-amt .yen{font-size:18px; margin-left:.2rem}
.price2-once{margin:.5rem 0 0; font-size:14px; color:var(--muted)}
.price2-list{
  list-style:none; margin:32px 0 0; padding:24px 0 0; border-top:1px solid var(--line-soft);
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0; text-align:left;
}
.price2-list li{padding:0 24px; border-left:1px solid var(--line-soft)}
.price2-list li:first-child{border-left:0; padding-left:0}
.price2-list li:last-child{padding-right:0}
.price2-k{display:block; margin:0 0 6px; font-size:13px; font-weight:700; color:var(--accent); letter-spacing:.06em}
.price2-v{display:block; font-size:14px; line-height:1.85; color:var(--ink)}
.price2-note{margin:28px 0 0; font-size:13px; color:var(--muted)}
@media (max-width:720px){
  .price2-card{padding:32px 20px 26px; border-radius:14px}
  .price2-list{grid-template-columns:1fr; margin-top:24px; padding-top:4px}
  .price2-list li, .price2-list li:first-child, .price2-list li:last-child{padding:16px 0; border-left:0; border-bottom:1px solid var(--line-soft)}
  .price2-list li:last-child{border-bottom:0; padding-bottom:0}
  .price2-note{margin-top:20px; line-height:1.8}
}

/* ⑤ 無料で見る入口（開けているときだけ）と、問い合わせ。写真は置かない */
.sample2{text-align:center; margin:0 0 40px}
.sample2 .cta-h{margin:0; font-size:16px; font-weight:700}
.sample2 .hero-cta{margin:1rem 0 0}
/* 入口を閉じているときは server.mjs が中身を消すので、空の箱を残さない */
.sample2:not(:has(a)){display:none}
.contact2-card{
  max-width:640px; margin:0 auto; padding:36px 32px;
  background:var(--card); border:1px solid var(--line); border-radius:16px; text-align:center;
}
.lp .contact2-card h2{font-size:20px; margin:0 0 .6rem}
.contact2-card .cta-b{margin:0; font-size:15px; line-height:1.9; color:var(--ink)}
.contact2-card .cta-b a{color:var(--accent); font-weight:700; text-decoration:none; word-break:break-all}
.contact2-card .cta-b a:hover{text-decoration:underline}
@media (max-width:720px){
  .contact2-card{padding:28px 20px}
}

/* 語の途中で折り返さない（360px で「場／所」「飲／食店」になっていた）。区切りは 、 と <wbr> の位置 */
.lp .sec h2, .why-lead, .lp .fl-gain{word-break:keep-all; overflow-wrap:anywhere}
@media (max-width:400px){
  .lp .fl-src li{padding:2px 12px}
}