@charset "UTF-8";
/* ==========================================================================
   SatoRader 商品ページ専用スタイル（改修指示書 v3）

   方針：装飾は緊急銃猟対応管理システムのページの部品をそのまま借りる。
   このファイルには次の2種類だけを置く。
     (1) 指示書 5章「新規に作ってよい装飾」N1〜N4
     (2) 同じクラスが構造上使えない箇所の、同じ値で作った SatoRader 用クラス
   共通ヘッダー・フッター・他ページに影響しないよう .sr- 接頭辞でスコープする。
   ========================================================================== */

/* --------------------------------------------------------------------------
   N1 利用者・端末タグ
   → D14（Origin Story の小ラベル = .timeline__tag）をそのまま使うため、
      専用の定義は設けない。テンプレート側で .timeline__tag を付与している。
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   N2 NEW バッジ
   テーマカラー #e64a19 塗り・白文字。サイズ・角丸は D10 の PHASE 小ラベル
   （.phase-table__phase：11px / 700 / letter-spacing .05em）に合わせる。
   -------------------------------------------------------------------------- */
.sr-new {
  display: inline-block;
  background: #e64a19;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   N3 事務ツールのブロック枠
   D5〜D9 の機能ブロック（.feature-module）と同じ見た目で、外枠のみ点線にする。
   線の色・太さは .feature-module のものをそのまま継承し、style だけ変える。
   -------------------------------------------------------------------------- */
.sr-module--dashed { border-style: dashed; }

/* --------------------------------------------------------------------------
   N4 「一枚の地図に、すべて重なる」帯
   既存のセクション背景色のうち濃い色（--c-primary）を背景に、
   D3 の H2 と同じ書体で1行。グラデーション・装飾的な影は使わない。
   -------------------------------------------------------------------------- */
.sr-band {
  background: var(--c-primary);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin-top: var(--sp-6);
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   構造調整（同じクラスが構造上使えない箇所）
   -------------------------------------------------------------------------- */

/* 画像が未支給のブロックは、本文を1カラムにして画像枠の空きを作らない。
   （.feature-module__body は本来 画像 | 箇条 の2カラム） */
.feature-module__body.sr-noimg { grid-template-columns: minmax(0, 1fr); }


/* 画面キャプチャ：枠・角丸・影は D7（.media-img）のものをそのまま使う。
   ただし支給素材は比率がまちまちで、縦長のスマホ画面（縦横比 0.45〜0.69）を含む。
   16/10 に固定する .feature-module__media / .media-img--screen を当てると
   上部 1/4 ほどしか映らないため、自然な比率のまま表示し、
   カードが縦に伸びすぎないよう高さの上限だけ設ける。 */
.sr-shot {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin: 0 auto;
}

/* 4.3-2 agri のスマホ画面2枚を横並びにする枠（D8：share-view.png の扱いに合わせる） */
.sr-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  align-items: start;
}
.sr-media-pair > * { min-width: 0; }

/* 4.7 Pricing の2カラム。枠・背景・角丸・余白は D17（.supervisor カード）と同じ値 */
.sr-pricing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5);
  align-items: start;
}
.sr-pricing > * { min-width: 0; }
.sr-pricing__card {
  background: linear-gradient(135deg, #F2F5F7 0%, #E8F2FA 100%);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}
.sr-pricing__card h3 { margin-bottom: var(--sp-4); }

/* 4.6 導入後に変わること：D16（.feature-row__check）の箇条をそのまま使うため、
   リストの最大幅だけ中央寄せで整える */
.sr-after { max-width: 860px; margin: 0 auto; }

/* 4.9 導入の流れ：D4/D15 のカードを ol/li で流用し、3列×2段で幅を使い切る
   （番号と見出しだけの簡略版のため、縦1列だと右側が大きく空くため） */
#flow .pillar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 画像キャプション（D12：Safety の「※ 表示は…」と同じ扱い）。
   素材支給後に <figure class="sr-figure"> で使用する。 */
.sr-figure { margin: 0; border: 1px solid var(--c-border-light); border-radius: var(--radius); overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.sr-figure img { display: block; width: 100%; height: auto; }
.sr-figure figcaption { padding: 8px 12px; font-size: 11px; line-height: 1.6; color: var(--c-text-light); background: var(--c-bg-gray); border-top: 1px solid var(--c-border-light); }
/* 横長の表（field-calendar.png）：スマホでは縮小しすぎて文字が読めなくなるため、
   一定幅を保ったまま枠内で横スクロールさせる */
.sr-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   レスポンシブ：ブレイクポイントは緊急銃猟ページ（v2-style.css）に合わせる
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .sr-pricing { grid-template-columns: minmax(0, 1fr); }
  #flow .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sr-band { font-size: 17px; }
  .sr-media-pair { grid-template-columns: minmax(0, 1fr); }
  .sr-shot { max-height: 360px; }
  .sr-scroll img { width: 720px; max-width: none; }
  #flow .pillar-grid { grid-template-columns: minmax(0, 1fr); }
}