/* マーケティングレポート 公開用サンプル — Cloud Assist ページ専用スタイル
   ファイル配置: /includes/report-sample/report-sample-style.css
   report-sample.html 内の <link rel="stylesheet" href="..."> から参照される。

   すべてのセレクタを .report-sample-lp 配下にスコープし、WordPressテーマ(denettm)へ
   スタイルが漏れないようにしている。デザイントークン(CSS変数)も .report-sample-lp 配下に
   限定して定義しているため、テーマ側の変数とは衝突しない。

   ＝＝ 設計意図 ＝＝
   このページは「サービス紹介ページ」ではなく「レポートという成果物そのもの」を
   見せる面。したがって親ページ(/ai/marketing-analytics/)のトーンではなく、
   報告書としての可読性（明朝見出し・等幅数値・判定バッジ・表の走査性）を優先している。

   ＝＝ ライトテーマ固定 ＝＝
   WordPressテーマのヘッダー／フッターがライト固定のため、本フラグメントも
   ライト固定とする（OSのダークモード設定に追随させると、サイト外枠と
   本文の明暗が食い違って破綻するため prefers-color-scheme は使わない）。 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Serif+JP:wght@500;600;700&display=swap');

/* ================================================================
   DESIGN TOKENS（.report-sample-lp 配下に限定）
   ================================================================ */
.report-sample-lp {
  --paper: #e9edec;
  --surface: #fafcfb;
  --surface-sunk: #f1f4f3;
  --ink: #131c1b;
  --ink-muted: #55625e;
  --ink-faint: #7d8783;
  --line: #d3dad8;
  --line-strong: #b6c0bd;
  --accent: #0e6b5e;
  --accent-soft: #dcebe7;
  --alert: #a3352a;
  --alert-soft: #f5e2df;
  --warn: #8a5c11;
  --warn-soft: #f4e9d6;
  --good: #2b6a41;
  --good-soft: #dfeee2;
  --shadow: 0 1px 1px rgba(19, 28, 27, .04), 0 6px 18px rgba(19, 28, 27, .05);

  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", YuMincho, serif;
  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", monospace;
}

/* ================================================================
   RESET（スコープ内のみ）
   ================================================================ */
.report-sample-lp *,
.report-sample-lp *::before,
.report-sample-lp *::after {
  box-sizing: border-box;
}

/* ================================================================
   WRAPPER — テーマのコンテンツ枠に収める「文書カード」構成

   ＝＝ フルブリード（100vw）を使わない理由 ＝＝
   他のLPページ（azure/msp 等）は `width:100vw` ＋ 負マージンで全幅化しているが、
   `100vw` は縦スクロールバーの幅を含むため、ページ全体が数px（実測8px）
   横スクロールしてしまう。テーマ側 body の overflow-x:hidden では防げない
   （overflow の伝播元は html のため）。
   このページは全幅の背景演出を必要としない「報告書」であり、かつ
   分析の厳密さを見せる面で横揺れが出るのは避けたいので、
   あえてテーマのコンテンツ枠内に収め、紙面として見せる構成にしている。
   横に長い表は .tw 側で個別に横スクロールさせるため情報は失われない。
   ================================================================ */
.report-sample-lp {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  border: 1px solid var(--line-strong);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.report-sample-lp .rpt {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

/* テーマの見出し・段落マージンを打ち消し、レイアウトはgapで統一 */
.report-sample-lp h1,
.report-sample-lp h2,
.report-sample-lp h3,
.report-sample-lp p,
.report-sample-lp ol,
.report-sample-lp ul,
.report-sample-lp dl,
.report-sample-lp dd,
.report-sample-lp table,
.report-sample-lp figure {
  margin: 0;
}

/* ================================================================
   SAMPLE BANNER
   ================================================================ */
.report-sample-lp .sample-bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--paper);
  padding: .8rem 1.15rem;
}

.report-sample-lp .sample-bar strong {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .18em;
  border: 1px solid currentColor;
  padding: .12rem .55rem;
  flex: none;
}

.report-sample-lp .sample-bar span {
  font-size: .84rem;
  opacity: .9;
  line-height: 1.7;
}

/* ================================================================
   MASTHEAD
   ================================================================ */
.report-sample-lp .mast {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-bottom: 2px solid var(--line-strong);
  padding-bottom: 2rem;
}

.report-sample-lp .mast-kicker {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.report-sample-lp .mast h1 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  text-wrap: balance;
}

.report-sample-lp .mast-sub {
  font-size: 1rem;
  color: var(--ink-muted);
  max-width: 48ch;
}

.report-sample-lp .meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .5rem 2rem;
  font-size: .875rem;
}

.report-sample-lp .meta > div {
  display: flex;
  gap: .6rem;
  padding: .3rem 0;
  border-top: 1px solid var(--line);
}

.report-sample-lp .meta dt {
  flex: 0 0 5.5rem;
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding-top: .28rem;
}

.report-sample-lp .meta dd {
  color: var(--ink-muted);
}

/* ================================================================
   NOTES
   ================================================================ */
.report-sample-lp .note {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.report-sample-lp .note.is-warn {
  background: var(--warn-soft);
  border-color: var(--warn);
  border-left-color: var(--warn);
}

.report-sample-lp .note-label {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}

.report-sample-lp .note.is-warn .note-label {
  color: var(--warn);
}

.report-sample-lp .note p {
  font-size: .92rem;
}

.report-sample-lp .note ul {
  padding-left: 1.3rem;
  font-size: .9rem;
  color: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

/* ================================================================
   SECTIONS
   ================================================================ */
.report-sample-lp .sec {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.report-sample-lp .sec-head {
  display: flex;
  align-items: baseline;
  gap: .9rem;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: .6rem;
}

.report-sample-lp .sec-num {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--accent);
  letter-spacing: .08em;
  flex: none;
}

.report-sample-lp .sec-head h2 {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.45;
}

.report-sample-lp .sec h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.7;
}

.report-sample-lp .sec h3 .h3-note {
  font-weight: 400;
  color: var(--ink-faint);
  font-size: .84rem;
  margin-left: .5rem;
}

.report-sample-lp .sec p {
  max-width: 68ch;
}

.report-sample-lp .block {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}

/* ================================================================
   KPI TILES
   ================================================================ */
.report-sample-lp .tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.report-sample-lp .tile {
  background: var(--surface);
  padding: 1.1rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border-top: 3px solid var(--line-strong);
}

.report-sample-lp .tile.is-critical { border-top-color: var(--alert); }
.report-sample-lp .tile.is-good { border-top-color: var(--good); }

.report-sample-lp .tile-label {
  font-size: .78rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.report-sample-lp .tile-value {
  font-family: var(--mono);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.report-sample-lp .tile.is-critical .tile-value { color: var(--alert); }
.report-sample-lp .tile.is-good .tile-value { color: var(--good); }

.report-sample-lp .tile-delta {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}

/* 指数表記の添字（実数ではないことを示す） */
.report-sample-lp .mk {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .06em;
  vertical-align: .35em;
  color: var(--ink-faint);
  margin-left: .2em;
}

/* ================================================================
   VERDICT LIST（前回の読みの検証）
   ================================================================ */
.report-sample-lp .verdicts {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.report-sample-lp .verdict {
  background: var(--surface);
  display: grid;
  grid-template-columns: 1fr 8.5rem;
  gap: .35rem 1rem;
  padding: .95rem 1.2rem;
  align-items: start;
}

.report-sample-lp .verdict-claim {
  font-size: .92rem;
  color: var(--ink-muted);
}

.report-sample-lp .verdict-basis {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  line-height: 1.7;
}

.report-sample-lp .pill {
  justify-self: end;
  font-size: .76rem;
  font-weight: 700;
  padding: .18rem .6rem;
  border-radius: 2px;
  white-space: nowrap;
  text-align: center;
}

.report-sample-lp .pill.p-alert { background: var(--alert-soft); color: var(--alert); }
.report-sample-lp .pill.p-good { background: var(--good-soft); color: var(--good); }
.report-sample-lp .pill.p-warn { background: var(--warn-soft); color: var(--warn); }
.report-sample-lp .pill.p-flat { background: var(--surface-sunk); color: var(--ink-muted); }

/* ================================================================
   FUNNEL
   ================================================================ */
.report-sample-lp .funnel {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.report-sample-lp .fstep {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: .25rem 1rem;
  align-items: center;
}

.report-sample-lp .fstep-label {
  font-size: .84rem;
  color: var(--ink-muted);
  line-height: 1.55;
}

.report-sample-lp .fstep-label b {
  color: var(--ink);
  font-weight: 700;
}

/* バーは .fbar-track（残り幅いっぱいに伸縮）の中で % 指定する。
   インラインの max-width でバー幅を抑える方式にすると、狭い幅で
   数値ラベルがはみ出すため、トラック側で幅を決める構成にしている。 */
.report-sample-lp .fstep-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  min-width: 0;
}

.report-sample-lp .fbar-track {
  flex: 1 1 7rem;
  min-width: 0;
}

.report-sample-lp .fstep-num,
.report-sample-lp .fstep-note {
  flex: none;
}

.report-sample-lp .fbar {
  height: 1.6rem;
  background: var(--accent);
  opacity: .85;
  flex: none;
  border-radius: 1px;
}

.report-sample-lp .fstep.is-zero .fbar {
  background: var(--alert);
}

.report-sample-lp .fstep-num {
  font-family: var(--mono);
  font-size: .88rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  white-space: nowrap;
}

.report-sample-lp .fstep-note {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.report-sample-lp .fbreak {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: .35rem 0;
  color: var(--alert);
  font-size: .84rem;
  font-weight: 700;
}

.report-sample-lp .fbreak::before,
.report-sample-lp .fbreak::after {
  content: "";
  flex: 1;
  height: 0;
  border-top: 2px dashed var(--alert);
  opacity: .55;
}

/* バーの出現アニメーション。スクロール連動ではないため、
   ヒートマップ/スクショクローラでも必ず最終状態で描画される。 */
@media (prefers-reduced-motion: no-preference) {
  .report-sample-lp .fbar {
    animation: report-sample-grow .7s cubic-bezier(.2, .7, .3, 1) both;
    transform-origin: left center;
  }

  @keyframes report-sample-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ================================================================
   TABLES
   ================================================================ */
.report-sample-lp .tw {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}

.report-sample-lp table {
  border-collapse: collapse;
  width: 100%;
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}

.report-sample-lp caption {
  caption-side: top;
  text-align: left;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: .7rem 1rem .5rem;
  border-bottom: 1px solid var(--line);
}

.report-sample-lp th,
.report-sample-lp td {
  padding: .5rem .8rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.report-sample-lp thead th {
  background: var(--surface-sunk);
  font-size: .76rem;
  font-weight: 700;
  color: var(--ink-muted);
  white-space: nowrap;
}

.report-sample-lp tbody tr:last-child td {
  border-bottom: 0;
}

.report-sample-lp td.n,
.report-sample-lp th.n {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
}

.report-sample-lp td.bad { color: var(--alert); font-weight: 700; }
.report-sample-lp td.ok { color: var(--good); font-weight: 700; }
.report-sample-lp tr.hl td { background: var(--accent-soft); }

.report-sample-lp code {
  font-family: var(--mono);
  font-size: .88em;
  background: var(--surface-sunk);
  padding: .08em .35em;
  border-radius: 2px;
  word-break: break-word;
}

.report-sample-lp .tw code {
  background: transparent;
  padding: 0;
}

/* ================================================================
   FINDING CARDS
   ================================================================ */
.report-sample-lp .findings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.report-sample-lp .finding {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  padding: 1.2rem 1.4rem 1.35rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.report-sample-lp .finding.sev-1 { border-left-color: var(--alert); }
.report-sample-lp .finding.sev-2 { border-left-color: var(--warn); }
.report-sample-lp .finding.sev-3 { border-left-color: var(--line-strong); }

.report-sample-lp .finding-head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
}

.report-sample-lp .finding-id {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink-faint);
}

.report-sample-lp .sev {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  padding: .12rem .5rem;
  border-radius: 2px;
  background: var(--surface-sunk);
  color: var(--ink-muted);
}

.report-sample-lp .sev.s-high { background: var(--alert-soft); color: var(--alert); }
.report-sample-lp .sev.s-mid { background: var(--warn-soft); color: var(--warn); }

.report-sample-lp .finding-head h3 {
  flex: 1 1 20rem;
  font-size: 1.02rem;
}

.report-sample-lp .kv {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: .4rem .9rem;
  font-size: .88rem;
}

.report-sample-lp .kv dt {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  padding-top: .32rem;
}

.report-sample-lp .kv dd {
  color: var(--ink-muted);
}

.report-sample-lp .kv dd b { color: var(--ink); }

/* ================================================================
   ACTIONS
   ================================================================ */
.report-sample-lp .action {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.2rem 1.4rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.report-sample-lp .action.is-now {
  border-color: var(--alert);
}

.report-sample-lp .action-head {
  display: flex;
  align-items: baseline;
  gap: .7rem;
  flex-wrap: wrap;
}

.report-sample-lp .action-id {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--accent);
}

.report-sample-lp .action-head h3 {
  flex: 1 1 18rem;
}

.report-sample-lp .who {
  font-family: var(--mono);
  font-size: .7rem;
  padding: .14rem .5rem;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
  white-space: nowrap;
}

.report-sample-lp .action ol,
.report-sample-lp .action ul {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .9rem;
  color: var(--ink-muted);
}

.report-sample-lp .action li b { color: var(--ink); }

.report-sample-lp .verify {
  font-size: .84rem;
  background: var(--surface-sunk);
  border-left: 2px solid var(--accent);
  padding: .65rem .9rem;
  color: var(--ink-muted);
}

.report-sample-lp .verify b { color: var(--ink); }

/* ================================================================
   WATCHLIST
   ================================================================ */
.report-sample-lp .watch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.report-sample-lp .watch-item {
  background: var(--surface);
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.report-sample-lp .watch-name {
  font-size: .82rem;
  color: var(--ink-muted);
}

.report-sample-lp .watch-now {
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.report-sample-lp .watch-target {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--accent);
}

/* ================================================================
   DELIVERABLE GRID
   ================================================================ */
.report-sample-lp .deliv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.report-sample-lp .deliv-item {
  background: var(--surface);
  padding: 1.05rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.report-sample-lp .deliv-item h3 { font-size: .92rem; }

.report-sample-lp .deliv-item p {
  font-size: .84rem;
  color: var(--ink-muted);
}

/* ================================================================
   CTA（親ページ・問い合わせへの戻り導線）
   ================================================================ */
.report-sample-lp .cta {
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-top: 3px solid var(--accent);
  padding: 1.75rem 1.5rem 1.85rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}

.report-sample-lp .cta h2 {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.5;
}

.report-sample-lp .cta p {
  font-size: .92rem;
  color: var(--ink-muted);
}

.report-sample-lp .cta-links {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.report-sample-lp .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.3rem;
  background: var(--accent);
  color: #ffffff;
  font-size: .92rem;
  font-weight: 700;
  text-decoration: none;
  border-radius: 2px;
  transition: background .15s ease;
}

.report-sample-lp .cta-btn:hover,
.report-sample-lp .cta-btn:focus {
  background: #0a544a;
  color: #ffffff;
}

.report-sample-lp .cta-btn.is-ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.report-sample-lp .cta-btn.is-ghost:hover,
.report-sample-lp .cta-btn.is-ghost:focus {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ================================================================
   LINKS / FOOTNOTES
   ================================================================ */
.report-sample-lp a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

.report-sample-lp a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.report-sample-lp .footnotes {
  font-size: .85rem;
  color: var(--ink-muted);
}

.report-sample-lp .footnotes ol {
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.report-sample-lp hr.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 34rem) {
  .report-sample-lp .rpt {
    padding: 1.5rem 1.1rem 4rem;
    gap: 2.75rem;
  }

  .report-sample-lp .fstep { grid-template-columns: 1fr; }
  .report-sample-lp .verdict { grid-template-columns: 1fr; }
  .report-sample-lp .pill { justify-self: start; }

  .report-sample-lp .kv {
    grid-template-columns: 1fr;
    gap: .1rem;
  }

  .report-sample-lp .kv dt { padding-top: .4rem; }

  .report-sample-lp .cta-btn { width: 100%; justify-content: center; }
}