@charset "UTF-8";

/* ===================================================
   D+ Cleanliness Studio のLP 専用スタイル（2026-10-27 第1版）
   ・子テーマのフォルダに「dplus-clean-lp.css」という名前で置く（page-clean-lp.php が自動で読み込む）
   ・部品の名前は「cl-」で始まるものだけ（ほかのページに影響しない）
   ・色：アプリと同じ青緑が基本。アイコンのオレンジを「無料で使ってみる」のボタンにだけ使う
=================================================== */

.cl-root {
  --cl-ink: #0c1f1b;
  --cl-ink-2: #12302a;
  --cl-mint: #7fd1bd;
  --cl-mint-2: #c4ebe1;
  --cl-green: #2f7d6d;
  --cl-green-dark: #24604f;
  --cl-green-bg: #eaf4f1;
  --cl-orange: #be7022;
  --cl-orange-dark: #a35c16;
  --cl-text: #14201d;
  --cl-text-2: #3b4a46;
  --cl-muted: #5b6a66;
  --cl-line: #dfe8e5;
  --cl-bg: #f4f8f7;
  --cl-red: #c2410c;
  --cl-red-bg: #fdecec;
  --cl-miss-bg: #fff4e5;
  --cl-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;

  width: 100%;
  background: #ffffff;
  color: var(--cl-text);
  font-family: var(--cl-sans);
  font-size: 16px;
  line-height: 1.75;
  overflow-x: hidden;
}
@supports (overflow-x: clip) { .cl-root { overflow-x: clip; } }
.cl-root *, .cl-root *::before, .cl-root *::after { box-sizing: border-box; }
.cl-root img { max-width: 100%; height: auto; }
.cl-root section[id] { scroll-margin-top: 72px; }
.cl-root h1, .cl-root h2, .cl-root h3 { border: 0 !important; background: none !important; padding: 0 !important; margin: 0; color: inherit; font-family: var(--cl-sans); }
.cl-root h1::before, .cl-root h1::after, .cl-root h2::before, .cl-root h2::after, .cl-root h3::before, .cl-root h3::after { content: none !important; display: none !important; }
.cl-root ul, .cl-root ol { list-style: none; margin: 0; padding: 0; }
.cl-root p { margin: 0; }
.cl-root a { text-decoration: none; }
.cl-wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; position: relative; }
.cl-sp { display: none; }
.cl-ico { flex-shrink: 0; color: var(--cl-green); }

/* 見出し */
.cl-section { padding: 110px 0; }
.cl-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; margin-bottom: 52px; }
.cl-head--left { align-items: flex-start; text-align: left; margin-bottom: 32px; }
.cl-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 0.22em; color: var(--cl-green); }
.cl-eyebrow.is-light { color: var(--cl-mint); }
.cl-root .cl-title { font-size: 36px; line-height: 1.4; font-weight: 800; letter-spacing: 0.01em; color: var(--cl-text); }
.cl-root .cl-title.is-light { color: #ffffff; }
.cl-sub { max-width: 720px; font-size: 16px; line-height: 1.9; color: var(--cl-muted); }
.cl-sub.is-light { color: #b4cdc7; }

/* ボタン */
.cl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.cl-btn:hover { transform: translateY(-2px); }
.cl-btn--lg { min-height: 56px; padding: 0 30px; font-size: 16px; }
.cl-btn--block { width: 100%; }
.cl-root .cl-btn--orange { background: var(--cl-orange); color: #ffffff; box-shadow: 0 10px 28px rgba(190, 112, 34, 0.35); }
.cl-root .cl-btn--orange:hover { background: var(--cl-orange-dark); color: #ffffff; }
.cl-root .cl-btn--glass { background: rgba(255, 255, 255, 0.08); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.28); }
.cl-root .cl-btn--glass:hover { background: rgba(255, 255, 255, 0.14); color: #ffffff; }
.cl-root .cl-btn:focus-visible { outline: 3px solid #f2b673; outline-offset: 3px; }

/* ブランド表示 */
.cl-brand { display: inline-flex; align-items: center; gap: 12px; }
.cl-brand img { width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.cl-brand span { display: flex; flex-direction: column; font-size: 16px; font-weight: 800; line-height: 1.3; color: #ffffff; }
.cl-brand small { font-size: 12px; font-weight: 600; color: var(--cl-mint-2); }
.cl-brand--dark span { color: var(--cl-text); }
.cl-brand--dark small { color: var(--cl-green); }

/* ---------- ① ヒーロー ---------- */
.cl-hero { position: relative; overflow: hidden; padding: 88px 0 150px; color: #ffffff;
  background: radial-gradient(ellipse 60% 70% at 85% 20%, rgba(127, 209, 189, 0.16) 0%, transparent 60%),
              radial-gradient(ellipse 40% 50% at 10% 100%, rgba(190, 112, 34, 0.12) 0%, transparent 70%),
              linear-gradient(160deg, #173d35 0%, var(--cl-ink) 62%); }
.cl-hero__glow { position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 70% 80% at 60% 40%, #000 20%, transparent 100%); }
.cl-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; align-items: center; }
.cl-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.cl-root .cl-hero__title { font-size: 50px; line-height: 1.3; font-weight: 800; letter-spacing: 0.01em; color: #ffffff; }
.cl-hero__title em { font-style: normal; background: linear-gradient(90deg, var(--cl-mint), #f2c48d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cl-hero__lead { font-size: 16.5px; line-height: 1.9; color: #c5d8d3; max-width: 540px; }
.cl-hero__lead b { color: #ffffff; }
.cl-hero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cl-hero__chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: #e2f0ec; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 6px 14px 6px 11px; }
.cl-hero__chips .cl-ico { color: var(--cl-mint); width: 16px; height: 16px; }
.cl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.cl-hero__visual { position: relative; height: 480px; }
/* 紙（印刷した記録表）とタブレット */
.cl-paper { position: absolute; left: 0; top: 8px; width: 84%; padding: 0; background: #ffffff; border-radius: 4px; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.45); }
.cl-paper img { display: block; width: 100%; aspect-ratio: 1629 / 855; object-fit: cover; border-radius: 4px; }
.cl-tablet { position: absolute; right: 0; bottom: 0; width: 64%; padding: 10px; border-radius: 22px; background: #05100d; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); }
.cl-tablet img { display: block; width: 100%; aspect-ratio: 1180 / 820; object-fit: cover; object-position: center top; border-radius: 12px; }

/* ---------- ② 3つの使い方（ヒーローに重ねるカード） ---------- */
.cl-ways { position: relative; margin-top: -90px; padding-top: 0; padding-bottom: 0; background: transparent; }
.cl-ways__card { position: relative; z-index: 2; background: #ffffff; border-radius: 24px; box-shadow: 0 30px 80px rgba(10, 35, 30, 0.18), 0 0 0 1px rgba(10, 35, 30, 0.05); padding: 40px 40px 36px; }
.cl-ways__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.cl-way { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cl-way__img { border-radius: 14px; overflow: hidden; border: 1px solid var(--cl-line); background: var(--cl-bg); aspect-ratio: 16 / 10; margin-bottom: 8px; }
.cl-way__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.cl-way__img.is-paper { padding: 12px; }
.cl-way__img.is-paper img { object-fit: contain; object-position: center; box-shadow: 0 6px 18px rgba(10, 35, 30, .12); background: #fff; }
.cl-way__img.is-tablet { padding: 12px; background: #0b1714; }
.cl-way__img.is-tablet img { object-fit: cover; object-position: left top; border-radius: 8px; background: #f4f8f7; }
.cl-way__no { position: absolute; top: -12px; left: -8px; width: 34px; height: 34px; border-radius: 50%; background: var(--cl-green); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(47, 125, 109, .35); }
.cl-root .cl-way h3 { font-size: 18px; line-height: 1.5; font-weight: 800; }
.cl-way p { font-size: 14.5px; line-height: 1.85; color: var(--cl-text-2); }

/* ---------- ③ さわってみてください（デモ） ---------- */
.cl-try { background: #ffffff; padding-top: 72px; }
.cl-demo { background: #ffffff; border-radius: 24px; border: 1px solid var(--cl-line); box-shadow: 0 20px 60px rgba(10, 35, 30, 0.08); padding: 36px 40px 30px; }
.cl-demo__head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.cl-root .cl-demo__title { font-size: 28px; line-height: 1.4; font-weight: 800; }
.cl-demo__head p { font-size: 15px; line-height: 1.85; color: var(--cl-muted); max-width: 860px; }
.cl-dg { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.cl-dg__scroll { overflow-x: auto; border: 1px solid var(--cl-line); border-radius: 14px; }
.cl-root .cl-dg__table { width: 100%; min-width: 600px; border-collapse: collapse; margin: 0; border: 0; font-size: 13px; table-layout: fixed; }
.cl-root .cl-dg__table th, .cl-root .cl-dg__table td { border: 0; border-bottom: 1px solid var(--cl-line); border-left: 1px solid var(--cl-line); padding: 0; text-align: center; vertical-align: middle; background: none; line-height: 1.3; }
.cl-root .cl-dg__table thead th { padding: 8px 2px; font-size: 12px; font-weight: 800; color: var(--cl-text-2); background: var(--cl-bg); }
.cl-root .cl-dg__table thead th.is-off { color: var(--cl-muted); }
.cl-root .cl-dg__table th.cl-dg__name { width: 190px; text-align: left; padding: 8px 12px; font-size: 13px; font-weight: 800; border-left: 0; }
.cl-dg__name small { display: block; font-size: 11px; font-weight: 600; color: var(--cl-muted); }
.cl-root .cl-dg__table tr.cl-dg__group th { text-align: left; padding: 5px 12px; font-size: 11.5px; font-weight: 800; color: var(--cl-green-dark); background: var(--cl-green-bg); border-left: 0; }
.cl-root .cl-dg__table td.is-off { background: repeating-linear-gradient(135deg, #f1f4f3 0 6px, #e8edeb 6px 12px); }
.cl-root .cl-dg__cell { appearance: none; display: block; width: 100%; height: 44px; border: 0; margin: 0; padding: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 800; color: var(--cl-text); cursor: pointer; transition: background-color .15s; }
.cl-root .cl-dg__cell:hover { background: #f0f6f4; }
.cl-root .cl-dg__cell:focus-visible { outline: 3px solid var(--cl-green); outline-offset: -3px; }
.cl-root td.is-miss .cl-dg__cell, .cl-root td.is-miss .cl-dg__temp { background: var(--cl-miss-bg); }
.cl-root td.is-ng .cl-dg__cell, .cl-root td.is-ng .cl-dg__temp { background: var(--cl-red-bg); color: var(--cl-red); }
.cl-root .cl-dg__temp { display: block; width: 100%; height: 44px; border: 0; margin: 0; padding: 0 4px; background: transparent; font: inherit; font-size: 15px; font-weight: 700; text-align: center; color: var(--cl-text); border-radius: 0; box-shadow: none; }
.cl-root .cl-dg__temp:focus { outline: 3px solid var(--cl-green); outline-offset: -3px; background: #fff; }
.cl-dg__note { margin-top: 12px !important; font-size: 12px; line-height: 1.8; color: var(--cl-muted); }
.cl-root .cl-dg__reset { appearance: none; font: inherit; font-size: 12px; font-weight: 700; padding: 4px 12px; margin-left: 8px; border-radius: 999px; border: 1px solid var(--cl-line); background: #fff; color: var(--cl-text-2); cursor: pointer; }
.cl-dg__panel { display: flex; flex-direction: column; gap: 10px; background: var(--cl-bg); border-radius: 18px; padding: 20px; }
.cl-dg__stat { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--cl-line); font-size: 13px; font-weight: 700; color: var(--cl-text-2); transition: background-color .2s, border-color .2s; }
.cl-dg__stat b { font-size: 22px; color: var(--cl-text); }
.cl-dg__stat.is-warn { background: var(--cl-miss-bg); border-color: #f0c88f; }
.cl-dg__stat.is-bad { background: var(--cl-red-bg); border-color: #f2b8b8; }
.cl-dg__stat.is-bad b { color: var(--cl-red); }
.cl-dg__issues { margin-top: 4px; }
.cl-dg__issues-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: var(--cl-muted); margin-bottom: 6px !important; }
.cl-dg__issues li { padding: 10px 0; border-top: 1px dashed #cfdbd7; font-size: 12.5px; line-height: 1.6; }
.cl-dg__issues li b { display: block; color: var(--cl-red); }
.cl-dg__issues li.is-empty { color: var(--cl-muted); }
.cl-root .cl-dg__issues input { display: block; width: 100%; margin-top: 6px; padding: 7px 10px; font: inherit; font-size: 13px; border: 1.5px solid #e5a3a3; border-radius: 8px; background: #fff; }
.cl-root .cl-dg__issues input.is-done { border-color: var(--cl-line); }
.cl-dg__issues small { display: block; margin-top: 4px; font-size: 11px; color: var(--cl-red); }

/* ---------- ④ こんなこと ---------- */
.cl-pain { background: var(--cl-bg); }
.cl-pain__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cl-pain__card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; border: 1px solid var(--cl-line); background: #ffffff; }
.cl-pain__before { position: relative; padding: 22px 22px 20px 50px; font-size: 15.5px; font-weight: 800; line-height: 1.6; background: #eef3f1; color: var(--cl-text-2); }
.cl-pain__before::before { content: "?"; position: absolute; left: 20px; top: 23px; width: 20px; height: 20px; border-radius: 50%; background: #b9c8c3; color: #ffffff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }
.cl-pain__after { position: relative; padding: 18px 22px 22px 50px; font-size: 14.5px; line-height: 1.8; color: var(--cl-text); }
.cl-pain__after::before { content: "✓"; position: absolute; left: 20px; top: 21px; width: 20px; height: 20px; border-radius: 50%; background: var(--cl-green); color: #ffffff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; line-height: 1; }

/* ---------- ⑤ 3つのステップ ---------- */
.cl-flow { background: #ffffff; }
.cl-flow__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; counter-reset: flow; }
.cl-flow__step { position: relative; padding: 30px 24px 24px; border-radius: 18px; border: 1px solid var(--cl-line); background: #fff; }
.cl-flow__step::before { counter-increment: flow; content: counter(flow); position: absolute; top: -15px; left: 22px; width: 32px; height: 32px; border-radius: 50%; background: var(--cl-green); color: #fff; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(47, 125, 109, .3); }
.cl-root .cl-flow__step h3 { font-size: 17px; font-weight: 800; margin-bottom: 8px !important; }
.cl-flow__step p { font-size: 14px; line-height: 1.85; color: var(--cl-text-2); }

/* ---------- ⑥ できること ---------- */
.cl-feat { background: var(--cl-bg); }
.cl-feat__row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.cl-feat__row + .cl-feat__row { margin-top: 88px; }
.cl-feat__row.is-reverse .cl-feat__text { order: 2; }
.cl-feat__text { display: flex; flex-direction: column; gap: 16px; }
.cl-feat__no { font-size: 13px; font-weight: 800; letter-spacing: 0.1em; color: var(--cl-green); }
.cl-root .cl-feat__text h3 { font-size: 28px; line-height: 1.4; font-weight: 800; }
.cl-feat__text p { font-size: 15.5px; line-height: 1.95; color: var(--cl-text-2); }
.cl-list { display: flex; flex-direction: column; gap: 8px; }
.cl-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 700; line-height: 1.6; }
.cl-list .cl-ico { margin-top: 3px; }
.cl-feat__shot { border-radius: 18px; padding: 10px; background: #ffffff; border: 1px solid var(--cl-line); box-shadow: 0 30px 60px rgba(10, 35, 30, 0.12); }
.cl-feat__shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: left top; border-radius: 10px; }
.cl-feat__shot.is-bare { padding: 0; background: none; border: 0; box-shadow: none; display: flex; justify-content: center; }
.cl-tablet2 { width: 100%; max-width: 560px; padding: 12px; border-radius: 26px; background: #0b1714; box-shadow: 0 30px 60px rgba(10, 35, 30, .22); }
.cl-root .cl-tablet2 img { aspect-ratio: 1180 / 820; object-position: center top; border-radius: 14px; }
.cl-paper2 { width: 70%; max-width: 380px; background: #fff; border-radius: 4px; box-shadow: 0 30px 60px rgba(10, 35, 30, .18); }
.cl-root .cl-paper2 img { aspect-ratio: 909 / 1287; object-fit: contain; border-radius: 4px; }
.cl-feat__phones { gap: 18px; }
.cl-feat__phones .cl-phone2 { width: 46%; max-width: 230px; padding: 8px; border-radius: 30px; background: #05100d; box-shadow: 0 30px 60px rgba(10, 35, 30, .22); }
.cl-root .cl-feat__phones .cl-phone2 img { display: block; width: 100%; aspect-ratio: 9 / 17.5; object-fit: cover; object-position: center top; border-radius: 22px; }

/* ---------- ⑦ 印刷できる用紙 ---------- */
.cl-papers { background: #ffffff; }
.cl-papers__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; align-items: start; }
.cl-papers__grid li { display: flex; flex-direction: column; gap: 4px; }
.cl-papers__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 14px; border-radius: 14px; background: var(--cl-bg); border: 1px solid var(--cl-line); margin-bottom: 8px; }
.cl-root .cl-papers__img img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 6px 16px rgba(10, 35, 30, .14); }
.cl-papers__img { overflow: hidden; }
.cl-root .cl-papers__img.is-portrait img { width: 60%; }
.cl-papers__grid b { font-size: 15px; font-weight: 800; }
.cl-papers__grid span { font-size: 12.5px; color: var(--cl-muted); }

/* ---------- ⑧ 安心 ---------- */
.cl-safe { position: relative; overflow: hidden; background: linear-gradient(160deg, #173d35 0%, var(--cl-ink) 70%); color: #ffffff; }
.cl-safe__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.cl-safe__item { padding: 24px 22px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); }
.cl-root .cl-safe__item h3 { font-size: 17px; font-weight: 800; color: #ffffff; margin-bottom: 8px !important; }
.cl-safe__item h3::before { content: "" !important; display: block !important; width: 28px; height: 3px; border-radius: 3px; background: var(--cl-mint); margin-bottom: 14px; }
.cl-safe__item p { font-size: 14px; line-height: 1.8; color: #b4cdc7; }
.cl-safe__note { margin-top: 22px; padding: 20px 24px; border-radius: 16px; background: rgba(255, 214, 120, 0.08); border: 1px solid rgba(255, 214, 120, 0.35); }
.cl-safe__note p { font-size: 14px; line-height: 1.85; color: #e4efec; margin: 0 0 6px; }
.cl-safe__note p:last-child { margin-bottom: 0; }
.cl-safe__note .cl-safe__note-title { font-size: 15.5px; font-weight: 800; color: #ffd678; margin-bottom: 8px; }
.cl-safe__note strong { color: #ffd678; }
.cl-safe__more { display: inline-block; margin-left: 6px; color: var(--cl-mint); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cl-safe__more:hover { color: var(--cl-mint-2); }
#faq { scroll-margin-top: 80px; }

/* ---------- ⑨ 無料 ---------- */
.cl-free { background: var(--cl-bg); }
.cl-free__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 960px; margin: 0 auto; background: #ffffff; border-radius: 26px; overflow: hidden; box-shadow: 0 30px 70px rgba(10, 35, 30, 0.12); border: 1px solid var(--cl-line); }
.cl-free__main { display: flex; flex-direction: column; gap: 16px; padding: 44px 40px; }
.cl-free__num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; font-size: 18px; font-weight: 800; }
.cl-free__num b { font-size: 56px; letter-spacing: -0.02em; line-height: 1.1; color: var(--cl-orange); }
.cl-free__num small { font-size: 13px; font-weight: 700; color: var(--cl-muted); }
.cl-free__small { font-size: 12.5px; line-height: 1.7; color: var(--cl-muted); }
.cl-root .cl-free__list { display: flex; flex-direction: column; justify-content: center; gap: 14px; padding: 44px 40px; background: linear-gradient(160deg, #173d35 0%, var(--cl-ink) 80%); }
.cl-free__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; font-weight: 700; line-height: 1.6; color: #e2f0ec; }
.cl-free__list .cl-ico { color: var(--cl-mint); margin-top: 3px; }
.cl-free__compare { max-width: 860px; margin: 32px auto 0 !important; font-size: 14.5px; line-height: 1.9; color: var(--cl-text-2); text-align: center; }
.cl-free__family { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 18px; margin-top: 22px; font-size: 13.5px; }
.cl-free__family p { font-weight: 800; color: var(--cl-muted); }
.cl-root .cl-free__family a { color: var(--cl-green-dark); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- ⑩ よくある質問 ---------- */
.cl-faq { background: #ffffff; }
.cl-faq__wrap { max-width: 860px; }
.cl-qa { border-bottom: 1px solid var(--cl-line); }
.cl-qa:first-of-type { border-top: 1px solid var(--cl-line); }
.cl-qa summary { display: flex; align-items: center; gap: 14px; padding: 22px 4px; cursor: pointer; list-style: none; }
.cl-qa summary::-webkit-details-marker { display: none; }
.cl-qa__q { width: 28px; height: 28px; border-radius: 8px; background: var(--cl-green-bg); color: var(--cl-green); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cl-qa__text { flex: 1; font-size: 16px; font-weight: 800; line-height: 1.5; }
.cl-qa__arrow { width: 9px; height: 9px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .25s; flex-shrink: 0; margin: 0 6px 4px 0; }
.cl-qa[open] .cl-qa__arrow { transform: rotate(-135deg); border-color: var(--cl-green); margin: 4px 6px 0 0; }
.cl-qa p { padding: 0 4px 22px 46px; font-size: 15px; line-height: 1.9; color: var(--cl-text-2); }

/* ---------- ⑪ 最後の呼びかけ ---------- */
.cl-final { position: relative; overflow: hidden; padding: 110px 0; text-align: center; color: #ffffff;
  background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(127, 209, 189, 0.18) 0%, transparent 65%), linear-gradient(160deg, #173d35 0%, var(--cl-ink) 70%); }
.cl-final__icon { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); margin: 0 auto 22px; display: block; }
.cl-root .cl-final h2 { font-size: 36px; line-height: 1.45; font-weight: 800; color: #ffffff; }
.cl-final p { margin-top: 14px !important; font-size: 15px; color: #c5d8d3; }
.cl-final__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* ===================================================
   タブレット
=================================================== */
@media (max-width: 1100px) {
  .cl-hero__grid { grid-template-columns: 1fr; }
  .cl-hero__visual { max-width: 640px; width: 100%; margin: 0 auto; height: 430px; }
  .cl-dg { grid-template-columns: minmax(0, 1fr); }
  .cl-feat__row { grid-template-columns: 1fr; gap: 28px; }
  .cl-feat__row.is-reverse .cl-feat__text { order: 0; }
  .cl-safe__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-papers__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===================================================
   スマホ
=================================================== */
@media (max-width: 768px) {
  .cl-root { font-size: 15px; }
  .cl-wrap { padding: 0 16px; }
  .cl-sp { display: inline; }
  .cl-section { padding: 68px 0; }
  .cl-head { margin-bottom: 34px; gap: 10px; }
  .cl-root .cl-title { font-size: 24px; }
  .cl-sub { font-size: 14.5px; }

  .cl-hero { padding: 40px 0 110px; }
  .cl-root .cl-hero__title { font-size: 32px; }
  .cl-hero__lead { font-size: 15px; }
  /* スマホ：見出し・説明 → 画像 → 特長 → ボタン の順 */
  .cl-hero__grid { display: flex; flex-direction: column; align-items: stretch; gap: 18px; }
  .cl-hero__text { display: contents; }
  .cl-brand { order: 1; align-self: flex-start; }
  .cl-hero__title { order: 2; }
  .cl-hero__lead { order: 3; }
  .cl-hero__visual { order: 4; margin: 6px 0 4px; height: auto; aspect-ratio: 390 / 300; }
  .cl-hero__chips { order: 5; }
  .cl-hero__actions { order: 6; width: 100%; flex-direction: column; }
  .cl-hero__actions .cl-btn { width: 100%; }
  .cl-paper { width: 84%; }
  .cl-tablet { width: 66%; padding: 6px; border-radius: 14px; bottom: 0; }
  .cl-tablet img { border-radius: 8px; }

  .cl-ways { margin-top: -70px; }
  .cl-ways__card { padding: 26px 18px 24px; border-radius: 20px; }
  .cl-ways__grid { grid-template-columns: 1fr; gap: 30px; }

  .cl-try { padding-top: 56px; }
  .cl-demo { padding: 22px 14px 18px; border-radius: 20px; }
  .cl-root .cl-demo__title { font-size: 21px; }
  .cl-demo__head p { font-size: 13.5px; }
  .cl-root .cl-dg__table { min-width: 520px; }
  .cl-root .cl-dg__table th.cl-dg__name { width: 128px; padding: 6px 8px; font-size: 12px; }

  .cl-pain__grid { grid-template-columns: 1fr; }
  .cl-flow__grid { grid-template-columns: 1fr; row-gap: 30px; }
  .cl-feat__row + .cl-feat__row { margin-top: 60px; }
  .cl-root .cl-feat__text h3 { font-size: 22px; }
  .cl-tablet2 { padding: 7px; border-radius: 16px; }
  .cl-root .cl-tablet2 img { border-radius: 9px; }
  .cl-papers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .cl-safe__grid { grid-template-columns: 1fr; }
  .cl-free__card { grid-template-columns: 1fr; border-radius: 20px; }
  .cl-free__main, .cl-root .cl-free__list { padding: 28px 20px; }
  .cl-free__num b { font-size: 44px; }
  .cl-free__compare { text-align: left; }
  .cl-qa__text { font-size: 15px; }
  .cl-qa p { padding-left: 4px; font-size: 14px; }
  .cl-final { padding: 72px 0; }
  .cl-root .cl-final h2 { font-size: 23px; }
  .cl-final__actions { flex-direction: column; }
}