@charset "utf-8";
/* =========================================================
   SEO用ランディングページ専用（名前空間 .z3dlp-）
   ・写真を足さずに成立させる方針のため、間は「構造」で持たせる。
     数字帯／式の図／レーン比較／条件カード／引用／注意ブロック。
   ・色は variables.css のトークンだけを使う（紫・ゴールドは使わない）。
   ・320pxまで横スクロールが出ないこと。図は枠内でスクロールさせる。
   ========================================================= */

/* ---- 地の文（.container--narrow の中で使う） ---- */
.z3dlp-prose{font-size:16px;line-height:2.05;color:var(--text)}
.z3dlp-prose p{margin:0 0 1.15em}
.z3dlp-prose p:last-child{margin-bottom:0}
.z3dlp-prose b{color:var(--ink);font-weight:700}

/* ---- 数字帯 ---- */
.z3dlp-strip{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--line-cool);border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-cool);margin-top:26px}
.z3dlp-strip__item{background:#fff;padding:22px 14px;text-align:center;min-width:0}
.z3dlp-strip__num{
  display:block;font-family:var(--ff-round);font-weight:900;line-height:1.15;
  font-size:clamp(22px,6vw,32px);color:var(--navy);letter-spacing:.01em;
  overflow-wrap:anywhere}
.z3dlp-strip__num em{font-style:normal;color:var(--orange)}
.z3dlp-strip__label{display:block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.04em}
@media (max-width:520px){
  .z3dlp-strip{grid-template-columns:1fr}
  .z3dlp-strip__item{padding:16px 12px;display:flex;align-items:baseline;justify-content:center;gap:10px}
  .z3dlp-strip__label{margin-top:0}
}

/* ---- 式（上限の構造） ---- */
.z3dlp-eq{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:10px;margin-top:26px}
.z3dlp-eq__box{
  flex:1 1 190px;min-width:0;background:#fff;border:2px solid var(--line-cool);
  border-radius:var(--radius);padding:18px 14px;text-align:center;position:relative}
.z3dlp-eq__box--free{border-color:var(--orange);box-shadow:0 10px 26px rgba(255,45,122,.14)}
.z3dlp-eq__box--goal{flex-basis:100%;background:var(--navy);border-color:var(--navy);color:#fff}
.z3dlp-eq__ttl{font-family:var(--ff-round);font-weight:900;font-size:16px;color:var(--ink);line-height:1.45}
.z3dlp-eq__box--goal .z3dlp-eq__ttl{color:#fff;font-size:18px}
.z3dlp-eq__txt{margin-top:8px;font-size:13px;line-height:1.75;color:var(--text)}
.z3dlp-eq__box--goal .z3dlp-eq__txt{color:rgba(255,255,255,.86)}
.z3dlp-eq__tag{
  display:inline-block;margin-bottom:10px;padding:3px 11px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;
  background:var(--line-cool);color:var(--ink-soft)}
.z3dlp-eq__box--free .z3dlp-eq__tag{background:var(--orange);color:#fff}
.z3dlp-eq__op{
  align-self:center;font-family:var(--ff-round);font-weight:900;font-size:20px;
  color:var(--muted);flex:0 0 auto;padding:0 2px}
@media (max-width:600px){
  .z3dlp-eq{flex-direction:column;gap:8px}
  .z3dlp-eq__op{align-self:center;padding:0}
  .z3dlp-eq__box{flex:1 1 auto}
}

/* ---- 図版の枠（SVG。はみ出しは枠の中でスクロール） ---- */
.z3dlp-figure{margin-top:26px;background:#fff;border:1px solid var(--line-cool);
  border-radius:var(--radius-lg);padding:20px 16px}
.z3dlp-figure__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.z3dlp-figure svg{display:block;width:100%;min-width:480px;height:auto}
.z3dlp-figure figcaption{margin-top:14px;font-size:12.5px;line-height:1.8;color:var(--muted);min-width:0}
/* 図が枠に収まらない幅では、横に動かせることを明示する */
.z3dlp-figure__hint{display:none;margin:10px 0 0;font-size:12px;color:var(--muted);text-align:center}
@media (max-width:620px){.z3dlp-figure__hint{display:block}}

/* ---- レーン比較（打ち手 × 1人サロンでの現実） ---- */
.z3dlp-lane{display:grid;gap:16px;margin-top:26px}
@media (min-width:781px){.z3dlp-lane{grid-template-columns:repeat(3,minmax(0,1fr))}}
.z3dlp-lane__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:22px 20px;display:flex;flex-direction:column;min-width:0}
.z3dlp-lane__no{
  display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:10px;background:var(--grad-mint);color:#fff;
  font-family:var(--ff-round);font-weight:900;font-size:15px;margin-bottom:12px}
.z3dlp-lane__ttl{font-family:var(--ff-round);font-weight:900;font-size:17.5px;color:var(--ink);line-height:1.5}
.z3dlp-lane__txt{margin-top:10px;font-size:14.5px;line-height:1.9;color:var(--text)}
.z3dlp-lane__real{
  margin-top:auto;padding-top:16px;border-top:1px dashed var(--line);
  font-size:13.5px;line-height:1.85;color:var(--ink-soft)}
.z3dlp-lane__real b{display:block;font-size:11.5px;letter-spacing:.06em;color:var(--muted);margin-bottom:5px}
.z3dlp-lane__item--pick{border-color:var(--orange);box-shadow:0 14px 34px rgba(255,45,122,.13)}
.z3dlp-lane__item--pick .z3dlp-lane__no{background:var(--grad-cta)}

/* ---- 条件カード ---- */
.z3dlp-cond{display:grid;gap:12px;margin-top:26px}
@media (min-width:721px){
  .z3dlp-cond{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 奇数個のとき、最後の1枚だけ取り残されないよう横いっぱいに伸ばす */
  .z3dlp-cond__item:last-child:nth-child(odd){grid-column:1 / -1}
}
.z3dlp-cond__item{
  display:flex;gap:14px;align-items:flex-start;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--yellow);
  border-radius:var(--radius);padding:18px 18px;min-width:0}
.z3dlp-cond__ic{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--yellow-soft);
  display:inline-flex;align-items:center;justify-content:center;color:var(--navy)}
.z3dlp-cond__ic .micon{font-size:21px}
.z3dlp-cond__ttl{font-family:var(--ff-round);font-weight:900;font-size:15.5px;color:var(--ink);line-height:1.55}
.z3dlp-cond__txt{margin-top:6px;font-size:14px;line-height:1.85;color:var(--text)}

/* ---- 引用（クライアントの資料からの引用） ---- */
.z3dlp-quote{
  position:relative;margin-top:26px;padding:26px 24px 24px;
  background:var(--cream);border-radius:var(--radius-lg);border:1px solid var(--line)}
.z3dlp-quote__mark{
  position:absolute;top:-14px;left:22px;width:34px;height:34px;border-radius:50%;
  background:var(--grad-cta);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.z3dlp-quote__mark .micon{font-size:19px}
.z3dlp-quote blockquote{margin:0;font-family:var(--ff-round);font-weight:700;
  font-size:clamp(15.5px,3.6vw,18px);line-height:1.95;color:var(--ink)}
.z3dlp-quote__src{margin:12px 0 0;font-size:12.5px;color:var(--muted);line-height:1.8}

/* ---- 正直に伝えるブロック ---- */
.z3dlp-honest{
  margin-top:26px;background:#fff;border:2px solid var(--line-cool);
  border-radius:var(--radius-lg);padding:24px 22px}
.z3dlp-honest__head{
  display:flex;align-items:center;gap:10px;font-family:var(--ff-round);font-weight:900;
  font-size:17px;color:var(--ink);line-height:1.5}
.z3dlp-honest__head .micon{font-size:22px;color:var(--navy)}
.z3dlp-honest__list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.z3dlp-honest__list li{
  position:relative;padding-left:26px;font-size:14.5px;line-height:1.9;color:var(--text)}
.z3dlp-honest__list li::before{
  content:"";position:absolute;left:6px;top:.72em;width:8px;height:8px;border-radius:50%;
  background:var(--navy);opacity:.35}
.z3dlp-honest__list b{color:var(--ink)}

/* ---- セクション見出しの直下に置く小見出し ---- */
.z3dlp-h3{
  font-family:var(--ff-round);font-weight:900;font-size:clamp(18px,4.4vw,21px);
  color:var(--ink);line-height:1.6;margin:34px 0 0}
.z3dlp-h3+.z3dlp-prose{margin-top:12px}

/* ---- 320px対策（最小幅） ---- */
@media (max-width:359px){
  .z3dlp-lane__item,.z3dlp-honest,.z3dlp-quote{padding-left:16px;padding-right:16px}
  .z3dlp-cond__item{padding:14px 14px;gap:10px}
  .z3dlp-figure{padding:16px 12px}
}