/* ==========================================================================
   RISMM 専用スタイルシート
   対象ページ：/rismm

   【編集方針】
   ・HTML側のセクション番号（01〜11）と対応させています。
   ・CSSの記述順を、HTMLのセクション出現順（01→11）にそろえています。
     共通設定は先頭（00番台）、レスポンシブ調整は末尾（12番台）にまとめています。
   ・色は「00. 共通設定」のCSS変数を変更するとまとめて調整できます。
   ・すべて .rismm 配下に限定し、他ページへの影響を防いでいます。
   ・認証情報、社内URL、未公開情報などはコメントにも記載しないでください。

   【注意】
   @import はCSS仕様上、他のスタイル指定より前に置く必要があります。
   ========================================================================== */

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

/* ==========================================================================
   00. 共通設定：カラー・フォント・ページ全体の基本値
   色を変更するときは、原則としてこのCSS変数を編集します。
   ========================================================================== */
.rismm {
  --ink: #132f47;
  /* 見出しの基本文字色（濃紺） */
  --ink-soft: #20415c;
  /* 少しやわらかい文字色（リード文など） */
  --sub: #57697c;
  /* 本文・補足の文字色（グレー） */
  --accent: #0c6fa8;
  /* アクセント青（ラベル・リンク） */
  --accent-bright: #1bb2d6;
  /* 明るいアクセント青（チェック・下線マーカー等） */
  --sky: #e9f5fb;
  /* 淡い水色（アイコン背景・帯） */
  --card: #ffffff;
  /* カードの地色（白） */
  --bg: #ffffff;
  /* 背景の交互2色のうち「色1（白）」＝プレーンなセクション */
  --band-tint: #EBF5FC;
  /* 背景の交互2色のうち「色2（薄い青）」＝一つおきのセクション。白との差をはっきりさせたいときは少し濃く（例 #cbe3f5）、淡くしたいときは薄く（例 #e6f2fc） */
  --line: #e0eaf1;
  /* 罫線・カード枠線の色 */
  --grad: linear-gradient(125deg, #22c1dd 0%, #1391cc 52%, #123a9e 100%);
  /* HEROの装飾とCTAパネルに使用するブランド青グラデ */
  --btn-bg: #1391cc;
  /* ボタン（.btn）の単色。グラデをやめて単色にした。色を変えたいときはここ */
  --hi: linear-gradient(transparent 58%, #A9EEF4 58%);
  /* 見出しのマーカー（蛍光ペン）風 */
  --round: "Zen Maru Gothic", sans-serif;
  /* 見出し・強調用の丸ゴシック */
  --sans: "Noto Sans JP", sans-serif;
  /* 本文用ゴシック */

  /* ▼ページ全体の基本設定（通常は触らなくてOK） */
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   00-1. リセット・共通レイアウト
   -------------------------------------------------------------------------- */
.rismm * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.rismm img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 各セクションの中身の最大幅。
 * ★重要：reneilテーマの既定 .wrap（default.css）に min-height:600px / text-align:center / overflow:hidden があり、
 *   本文も同じ .wrap クラスを使うため、それらが漏れて「全セクションが同じ高さ(600px)に揃う＝色帯が一定に見える」
 *   不具合が起きる。次の4つで打ち消す（min-height:0 が高さ揃いの解消、他は文字寄せ/はみ出しの復元）。 */
.rismm .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  min-height: 0;
  /* ← テーマの min-height:600px を無効化（これが「一定の高さ」の主因） */
  text-align: left;
  /* ← テーマの text-align:center を打ち消す */
  overflow: visible;
  /* ← テーマの overflow:hidden を打ち消す（ヒーローの装飾がはみ出せるように） */
  width: auto;
}

.rismm .sec {
  padding: 84px 0;
}

/* セクション内側の上下余白（内容の呼吸）。詰めたい/広げたいときはここ */

/* --------------------------------------------------------------------------
   00-2. セクション背景・見出し・共通部品
   -------------------------------------------------------------------------- */
/* 色1（白 = --bg）と 色2（薄い青 = --band-tint）を、セクションごとに一つおきに敷きます。
 * ・色を変えたいときは上の変数 --bg / --band-tint を書き換えるだけ（全体に反映）。
 * ・どのセクションが「色2（青）」かは本文HTMLの class="sec sec--tint" で決まります
 *   （課題・ライフサイクル・運用管理・料金・FAQ が青。間のセクションは白）。
 * ・帯どうしは隙間なく連続します（間の余白は入れません）。 */
.rismm .sec--tint {
  background: var(--band-tint);
}

/* 小さめの英語ラベル（Issue / Feature など） */
.rismm .eyebrow {
  display: inline-block;
  font-family: var(--round);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
}

/* セクション見出し（h2）と、その中のマーカー強調 .hl */
.rismm h2 {
  font-family: var(--round);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink);
}

.rismm h2 .hl {
  background: var(--hi);
  border-radius: 2px;
  padding: 0 .1em;
}

/* 蛍光ペン風マーカー */
.rismm p {
  color: var(--sub);
  font-size: .97rem;
}

/* 見出しブロック（左に見出し＋右にリズの顔） */
.rismm .sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
}

.rismm .sec-head .lead {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 1.02rem;
  font-weight: 500;
/*   max-width: 40em; */
}

.rismm .riz-face {
  width: 92px;
  flex: none;
  filter: drop-shadow(0 10px 16px rgba(20, 70, 110, .18));
}

/* 見出し横のリズ画像サイズ */

/* ボタン（.btn=塗り / .btn-ghost=白枠） */
.rismm a.btn,
.rismm a.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  text-decoration: none;
  font-family: var(--round);
  font-weight: 700;
  border-radius: 999px;
  transition: transform .15s, box-shadow .15s;
}

.rismm a.btn {
  background: var(--btn-bg);
  color: #fff;
  padding: 15px 32px;
  font-size: 1rem;
  box-shadow: 0 14px 26px -10px rgba(16, 120, 170, .6);
}

.rismm a.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -10px rgba(16, 120, 170, .7);
}

.rismm a.btn-ghost {
  background: #fff;
  color: var(--accent);
  padding: 13px 28px;
  font-size: .98rem;
  border: 2px solid #cfe6f2;
}

.rismm a.btn-ghost:hover {
  border-color: var(--accent-bright);
  transform: translateY(-2px);
}

/* カード共通（角丸・枠線・影）。角丸を変えたいときは border-radius */
.rismm .card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 18px 36px -26px rgba(20, 60, 90, .4);
}

/* --------------------------------------------------------------------------
   00-3. 共通：スクロール出現アニメーション
   data-rv を持つ要素にJavaScriptで .in を付与して表示します。
   -------------------------------------------------------------------------- */
.rismm [data-rv] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s, transform .7s;
}

.rismm [data-rv].in {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   01. HERO：ファーストビュー
   HTML：<section class="hero">
   ========================================================================== */
.rismm .hero {
  position: relative;
  padding: 118px 0 70px;
  background: radial-gradient(120% 90% at 82% 8%, #dff2fb 0%, rgba(223, 242, 251, 0) 55%), var(--bg);
  overflow: hidden;
  isolation: isolate;
}

.rismm .hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items: center;
}

/* 左テキスト:右画像の比率 */
.rismm .pill {
  align-items: center;
  gap: .5em;
  background: #fff;
  border: 1px solid #d3e8f3;
  color: var(--accent);
  font-family: var(--round);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  padding: 8px 16px;
  box-shadow: 0 8px 18px -12px rgba(20, 90, 140, .5);
}

.rismm .pill::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 5px;
  background: var(--grad);
  flex: none;
}

.rismm .hero h1 {
  font-family: var(--round);
  font-weight: 900;
  font-size: clamp(2.1rem, 5.6vw, 3.5rem);
  line-height: 1.34;
  letter-spacing: .02em;
  margin: 22px 0 18px;
}

/* メインコピーの大きさ */
.rismm .hero h1 em {
  font-style: normal;
  background: var(--hi);
  border-radius: 3px;
  padding: 0 .08em;
  white-space: nowrap;
}

.rismm .hero .lead {
  font-size: 1.04rem;
  color: var(--ink-soft);
  line-height: 2;
  max-width: 30em;
}

.rismm .hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 28px 0 24px;
}

.rismm .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ✓付きの小さな特徴タグ */
.rismm .chips span {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: #fff;
  border: 2px solid var(--line);
  padding: 4px 14px;
}

.rismm .chips span::before {
  content: "✓";
  color: var(--accent-bright);
  font-weight: 700;
  margin-right: .4em;
}

.rismm .hero-art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 340px;
}

/* 右側のリズ画像エリア */
.rismm .hero-art .blob {
  position: absolute;
  width: 112%;
  aspect-ratio: 1;
  border-radius: 46% 54% 52% 48%/52% 46% 54% 48%;
  background: radial-gradient(circle at 40% 35%, #c6ecf7, #dff3fb);
  filter: blur(2px);
  z-index: -1;
}

/* 背景の水色のふわっとした形 */
.rismm .hero-art .riz-hero {
  position: relative;
  z-index: 1;
  width: 96%;
  filter: drop-shadow(0 22px 30px rgba(20, 70, 110, .22));
}

/* ==========================================================================
   02. 課題：よくあるお悩み
   HTML：.issue-cards
   ========================================================================== */
.rismm .issue-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* PCで横4列 */
.rismm .issue-cards .ic {
  padding: 26px 22px;
  text-align: center;
}

.rismm .issue-cards .ic h3 {
  font-family: var(--round);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.5;
}

.rismm .issue-cards .ic p {
  font-size: .85rem;
}

/* ==========================================================================
   03. 導入実績：数値カード
   HTML：.stats / .stat
   カード数に応じて列数を自動調整します。
   ========================================================================== */
.rismm .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}

.rismm .stat {
  padding: 30px 22px;
  text-align: center;
}

.rismm .stat .snum {
  font-family: var(--round);
  font-weight: 900;
  font-size: 72px;
  line-height: 1.05;
  color: var(--accent);
  letter-spacing: .01em;
  text-align: center;
}

.rismm .stat .snum small {
  font-size: .46em;
  font-weight: 700;
  margin-left: .15em;
  color: var(--accent-bright);
}

/* 「台超」「社」等の単位 */
.rismm .stat .slabel {
  font-family: var(--round);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-top: 10px;
  text-align: center;
}

.rismm .stat .snote {
  font-size: .78rem;
  color: var(--sub);
  margin-top: 6px;
  text-align: center;
}

/* ==========================================================================
   04. 端末ライフサイクル：4ステップ
   HTML：.lifecycle / .lc
   PCでは横並び、画面幅に応じて2列・1列へ切り替えます。
   ========================================================================== */
.rismm .lifecycle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.rismm .lifecycle .lc {
  padding: 26px 16px;
  text-align: center;
  position: relative;
}

.rismm .lifecycle .lc .lcicon {
  font-size: 2rem;
  line-height: 1;
}

.rismm .lifecycle .lc .lcstep {
  font-family: var(--round);
  font-weight: 700;
  font-size: .16px;
  letter-spacing: .12em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 10px;
}

.rismm .lifecycle .lc h3 {
  font-family: var(--round);
  font-weight: 900;
  font-size: 1.02rem;
  color: var(--ink);
  margin: 4px 0 8px;
  line-height: 1.4;
}

.rismm .lifecycle .lc p {
  font-size: .8rem;
}

.rismm .lifecycle .lc.core {
  border-color: var(--line);
  box-shadow: 0 18px 36px -22px rgba(20, 120, 170, .55);
}

/* 中核(②MDM)を少し強調 */
.rismm .lifecycle .lc:not(:last-child)::after {
  content: "\203A";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--round);
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--accent-bright);
  z-index: 1;
}

/* ステップ間の矢印(PC) */

/* ==========================================================================
   05・07. 写真＋説明の2カラム
   HTML：.photosec / .pimg / .ptxt
   HTML内の要素順で、画像を左右どちらに配置するか決まります（05＝キッティング／07＝ヘルプデスク で共用）。
   ========================================================================== */
.rismm .photosec {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}

.rismm .photosec .ptxt .eyebrow {
  margin-bottom: 6px;
}

.rismm .photosec .ptxt h2 {
  margin-bottom: 14px;
}

.rismm .photosec .ptxt .lead {
  color: var(--ink-soft);
  font-size: 1.02rem;
  font-weight: 500;
  margin-top: 18px;
  margin-bottom: 18px;
}

.rismm .photosec .flist {
  list-style: none;
  display: grid;
  gap: 10px;
}

.rismm .photosec .flist li {
  position: relative;
  padding-left: 28px;
  font-size: .92rem;
  color: var(--ink-soft);
}

.rismm .photosec .flist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-bright);
  font-weight: 900;
}

.rismm .photosec .pimg img {
  border-radius: 22px;
  box-shadow: 0 22px 44px -26px rgba(20, 60, 90, .55);
}

/* ==========================================================================
   06. 運用・管理（MDM）：3つの機能カード
   HTML：.feat3 / .fc
   ========================================================================== */
.rismm .feat3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.rismm .feat3 .fc {
  padding: 30px 26px;
}

.rismm .feat3 .fc h3 {
  font-family: var(--round);
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--ink);
  margin: 6px 0 16px;
  line-height: 1.5;
}

.rismm .feat3 .fc ul {
  list-style: none;
}

.rismm .feat3 .fc li {
  font-size: .88rem;
  color: var(--sub);
  padding: 9px 0 9px 26px;
  position: relative;
  border-bottom: 1px dashed var(--line);
}

.rismm .feat3 .fc li:last-child {
  border-bottom: 0;
}

.rismm .feat3 .fc li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 16px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-bright);
}

/* 箇条書きの青い点 */

/* --------------------------------------------------------------------------
   07-1. 故障対応のワンストップフロー
   写真2カラム（07）の下に全幅の帯として置き、1行表示を維持。狭い画面では横スクロール。
   -------------------------------------------------------------------------- */
/* 故障ワンストップの流れ：全幅の帯として常に横一列（折り返さない）。
   width:fit-content＋margin:auto で、収まるときは中央寄せ・はみ出すときは左端から横スクロール（中央寄せ＋overflow の見切れ回避） */
.rismm .repair-band {
  margin-top: 34px;
}

.rismm .repair-band .lead {
  color: var(--ink-soft);
  font-weight: 700;
  margin-bottom: 14px;
}

.rismm .repair-flow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
}

.rismm .repair-flow .rf {
  flex: 0 0 auto;
  white-space: nowrap;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  font-family: var(--round);
  font-weight: 700;
  font-size: .82rem;
  color: var(--ink);
}

.rismm .repair-flow .rfsep {
  flex: 0 0 auto;
  color: var(--accent-bright);
  font-family: var(--round);
  font-weight: 900;
}

/* ==========================================================================
   08. 料金：プラン比較表
   横幅が足りない画面では .ptable 内を横スクロールさせます。
   ========================================================================== */
/* 料金表は横スクロール対応。「人気」列は .pop / .popcol で水色ハイライトしています */
.rismm .pcard {
  padding: 12px 12px 8px;
  border-radius: 26px;
}

.rismm .ptable {
  overflow-x: auto;
}

/* スマホで表がはみ出す時は横スクロール */
.rismm table.price {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  font-size: .86rem;
}

.rismm table.price th,
.rismm table.price td {
  padding: 16px 12px;
  text-align: center;
}

.rismm table.price thead th {
  font-family: var(--round);
  font-weight: 900;
  font-size: 1rem;
  color: var(--ink);
  vertical-align: bottom;
}

.rismm table.price thead th:first-child {
  text-align: left;
}

.rismm table.price thead th small {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  color: var(--sub);
  margin-top: 4px;
}

.rismm table.price tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: .84rem;
}

.rismm table.price tbody tr td,
.rismm table.price tbody tr th {
  border-top: 1px solid var(--line);
}

.rismm table.price .amt {
  font-family: var(--round);
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--ink);
}

/* 金額の大きな数字 */
.rismm table.price .yes {
  color: var(--accent-bright);
  font-size: 1.05rem;
}

/* ● 対応 */
.rismm table.price .no {
  color: #c4d2de;
}

/* − 非対応 */
.rismm table.price .popcol {
  background: var(--sky);
}

/* 「人気」列の背景ハイライト */
.rismm table.price thead th.pop {
  position: relative;
  color: var(--accent);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}

.rismm table.price tbody tr:last-child .popcol {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.rismm .pnote {
  font-size: .8rem;
  color: var(--sub);
  margin-top: 16px;
}

/* 料金表の下の注記 */

/* --------------------------------------------------------------------------
   08-1. 料金タブ切り替え
   JavaScriptは使用せず、radioのchecked状態と兄弟セレクタで切り替えます。
   HTML側の input → .ptabnav → .ptabpanel の並び順を変更しないでください。
   -------------------------------------------------------------------------- */
.rismm .ptabs {
  position: relative;
}

.rismm .ptabs > input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.rismm .ptabnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.rismm .ptabnav label {
  cursor: pointer;
  font-family: var(--round);
  font-weight: 700;
  font-size: .92rem;
  color: var(--accent);
  background: #fff;
  border: 2px solid #cfe6f2;
  border-radius: 999px;
  padding: 10px 22px;
  transition: background .15s, color .15s, border-color .15s;
}

.rismm .ptabnav label:hover {
  border-color: var(--accent-bright);
}

.rismm .ptabpanel {
  display: none;
}

.rismm #ptab-mobile:checked ~ .ptabnav label[for="ptab-mobile"],
.rismm #ptab-pc:checked ~ .ptabnav label[for="ptab-pc"] {
  background: var(--btn-bg);
  color: #fff;
  border-color: var(--btn-bg);
}

.rismm #ptab-mobile:checked ~ .panel-mobile,
.rismm #ptab-pc:checked ~ .panel-pc {
  display: block;
}

/* --------------------------------------------------------------------------
   08-2. 料金タブの分類と初期導入費テーブル
   運用保守は青、初期導入は緑で視覚的に区別します。
   -------------------------------------------------------------------------- */
/* タブ列を「運用保守（月額）」「初期導入（初回のみ）」の2群に分け、色・区切り線・見出しで視覚的に区別する。
   初期導入のアクセント色＝緑(#2f8f6b)。運用保守の青(--accent/--btn-bg)と対比。色を変えたいときはこの #2f8f6b / #c3e6d6 / #cfeadd を差し替え。 */
.rismm .ptabnav {
  align-items: flex-end;
  gap: 14px 28px;
}

/* 2群を横並び・下端そろえ（既存の display:flex / flex-wrap / margin-bottom は継承） */
.rismm .ptabgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rismm .ptabgroup-cap {
  font-family: var(--round);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .08em;
}

/* 群見出し（運用保守／初期導入） */
.rismm .ptabgroup-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rismm .ptabgroup--ops .ptabgroup-cap {
  color: var(--accent);
}

/* 運用保守の見出し＝青 */
.rismm .ptabgroup--init {
  border-left: 2px dashed #cfe6f2;
  padding-left: 28px;
}

/* 2群の区切り線 */
.rismm .ptabgroup--init .ptabgroup-cap {
  color: #2f8f6b;
}

/* 初期導入の見出し＝緑 */
.rismm .ptabgroup--init label {
  color: #2f8f6b;
  border-color: #c3e6d6;
}

/* 初期導入タブ（非選択）＝緑文字・緑枠 */
.rismm .ptabgroup--init label:hover {
  border-color: #2f8f6b;
}

.rismm #ptab-init:checked ~ .ptabnav label[for="ptab-init"] {
  background: #2f8f6b;
  color: #fff;
  border-color: #2f8f6b;
}

/* 選択中＝緑塗り */
.rismm #ptab-init:checked ~ .panel-init {
  display: block;
}

@media(max-width:520px) {

  /* スマホ：2群が縦積みになるので区切りを上罫線に切替 */
  .rismm .ptabgroup--init {
    border-left: 0;
    border-top: 2px dashed #cfe6f2;
    padding-left: 0;
    padding-top: 14px;
  }
}

/* 初期導入パネル：先頭に「初回のみ」バッジ＋金額を緑にして、運用保守（月額）と一目で区別 */
.rismm .pcard--init {
  border: 1px solid #cfeadd;
}

.rismm .initcap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .86rem;
  color: var(--ink-soft);
  padding: 6px 6px 14px;
  line-height: 1.7;
}

.rismm .initbadge {
  font-family: var(--round);
  font-weight: 700;
  font-size: .72rem;
  color: #fff;
  background: #2f8f6b;
  border-radius: 999px;
  padding: 4px 13px;
  white-space: nowrap;
}

.rismm table.priceinit {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 560px;
  font-size: .9rem;
}

/* スマホは .ptable が横スクロール */
.rismm table.priceinit th,
.rismm table.priceinit td {
  padding: 15px 14px;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}

.rismm table.priceinit thead th {
  font-family: var(--round);
  font-weight: 900;
  font-size: .95rem;
  color: var(--ink);
  border-top: 0;
}

.rismm table.priceinit tbody th {
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
}

.rismm table.priceinit tbody th small {
  display: block;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .72rem;
  color: var(--sub);
  margin-top: 2px;
}

.rismm table.priceinit .amt {
  font-family: var(--round);
  font-size: 1.2rem;
  font-weight: 900;
  color: #2f8f6b;
  white-space: nowrap;
}

/* 初期費用の金額＝緑（運用保守の青と区別） */
.rismm table.priceinit .amt small {
  font-family: var(--sans);
  font-weight: 700;
  font-size: .72rem;
  color: var(--sub);
  margin-left: 2px;
}

.rismm table.priceinit .note {
  color: var(--sub);
  font-size: .82rem;
  line-height: 1.7;
}

/* ==========================================================================
   09. 導入の流れ：5ステップ
   HTML：.flow / .st
   ========================================================================== */
.rismm .flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}

/* PCで横5列 */
.rismm .flow .st {
  text-align: center;
  padding: 24px 12px;
}

.rismm .flow .st .fnum {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: #fff;
  border: 0.5px solid var(--accent-bright);
  color: var(--accent);
  font-family: var(--round);
  font-weight: 900;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}

.rismm .flow .st h4 {
  font-family: var(--round);
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
  margin-bottom: 6px;
}

.rismm .flow .st p {
  font-size: .78rem;
}

.rismm .flow-riz {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

/* 「ぜんぶおまかせ！」＋リズ */
.rismm .flow-riz img {
  width: 300px;
  filter: drop-shadow(0 10px 16px rgba(20, 70, 110, .18));
}

.rismm .flow-riz span {
  font-family: var(--round);
  font-weight: 700;
  color: var(--accent);
  font-size: 24px;
  background: #fff;
  border: 1px solid #d3e8f3;
  padding: 8px 16px;
  border-radius: 16px 16px 4px 16px;
}

/* ==========================================================================
   10. FAQ：クリックで開閉するアコーディオン
   Qは青、Aは赤の文字バッジとして疑似要素で表示します。
   ========================================================================== */
.rismm .faq-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}

.rismm .faq-head img {
  width: 160px;
  filter: drop-shadow(0 10px 16px rgba(20, 70, 110, .18));
}

/* ウインクするリズ */
.rismm details.qa {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 12px;
  box-shadow: 0 14px 30px -26px rgba(20, 60, 90, .4);
  overflow: hidden;
}

.rismm details.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 52px 20px 54px;
  font-family: var(--round);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  position: relative;
}

.rismm details.qa summary::-webkit-details-marker {
  display: none;
}

/* 質問部分 */
.rismm details.qa summary::before {
  content: "Q";
  position: absolute;
  left: 20px;
  top: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #0066cc;
  /* Qを青文字に */
  font-size: 16px;
  font-weight: bold;
  display: grid;
  place-items: center;
}

/* 右端の＋ */
.rismm details.qa summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 16px;
  font-size: 1.4rem;
  color: var(--accent-bright);
  transition: transform 0.2s;
}

/* 開いたときに＋を回転 */
.rismm details.qa[open] summary::after {
  transform: rotate(45deg);
}

/* 回答部分 */
.rismm details.qa .ans {
  position: relative;
  padding: 0 24px 22px 54px;
  color: var(--sub);
  /* 回答本文の色 */
  font-size: 0.9rem;
}

/* 回答のA */
.rismm details.qa .ans::before {
  content: "A";
  position: absolute;
  left: 20px;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  color: #e60000;
  /* Aを赤文字に */
  font-size: 16px;
  font-weight: bold;
  display: grid;
  place-items: center;
}

/* ==========================================================================
   11. CTA：資料ダウンロード・お問い合わせ誘導
   HTML：.cta / .cta-panel
   ========================================================================== */
.rismm .cta {
  padding: 70px 0 84px;
}

.rismm .cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--grad);
  border-radius: 34px;
  padding: 52px 40px;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: 0 30px 60px -30px rgba(16, 80, 150, .7);
}

.rismm .cta-panel::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}

/* 右上の装飾円 */
.rismm .cta-panel .ct-copy {
  position: relative;
  z-index: 1;
}

.rismm .cta-panel h2 {
  font-family: var(--round);
  font-weight: 900;
  color: #fff;
  font-size: clamp(1.6rem, 3.6vw, 2.3rem);
  line-height: 1.5;
}

.rismm .cta-panel p {
  color: rgba(255, 255, 255, .9);
  margin: 14px 0 26px;
  font-size: .98rem;
}

.rismm .cta-panel .btns {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.rismm .cta-panel .b1 {
  background: #fff;
  color: var(--accent);
  text-decoration: none;
  font-family: var(--round);
  font-weight: 700;
  padding: 15px 32px;
  border-radius: 999px;
  font-size: 1rem;
}

/* 白いメインボタン */
.rismm .cta-panel .b2 {
  color: #fff;
  text-decoration: none;
  font-family: var(--round);
  font-weight: 700;
  border-bottom: 2px solid rgba(255, 255, 255, .7);
  padding-bottom: 2px;
  font-size: .95rem;
}

.rismm .cta-panel .tel {
  margin-top: 18px;
  font-size: .86rem;
  color: rgba(255, 255, 255, .9);
}

.rismm .cta-panel .tel b {
  font-family: var(--round);
  font-size: 1.3rem;
  color: #fff;
}

.rismm .cta-panel .ct-riz {
  position: relative;
  z-index: 1;
  width: 230px;
  filter: drop-shadow(0 20px 26px rgba(0, 30, 60, .35));
}

/* 右側のリズ画像サイズ */

/* ==========================================================================
   12. レスポンシブ調整
   900px以下：タブレット〜スマートフォン向け
   520px以下：小さなスマートフォン向け
   ※ベースの指定より後ろに置く必要があるため、ファイル末尾にまとめています。
   ========================================================================== */
@media(max-width:900px) {
  .rismm .hero-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ヒーロー：縦積み */
  .rismm .hero-art {
    order: -1;
    min-height: 0;
    max-width: 420px;
    margin: 0 auto;
  }

  /* 画像を上に */

  /* 課題・ライフサイクル・運用管理・導入の流れ：タブレット/スマホは詰め込まず、
     1行のまま横スクロールにする（指でスワイプ）。scroll-snap で1枚ずつ止まる。
     ※ベースの grid 列指定は display:flex 側で無効化される。 */
  .rismm .issue-cards,
  .rismm .lifecycle,
  .rismm .feat3,
  .rismm .flow {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    /* スクロールバー分の余白 */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  /* 各カードは固定幅で横に並べる（中身量に合わせて幅を調整） */
  .rismm .issue-cards .ic,
  .rismm .lifecycle .lc,
  .rismm .feat3 .fc,
  .rismm .flow .st {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .rismm .issue-cards .ic {
    width: 200px;
  }

  /* 悩みカード幅 */
  .rismm .lifecycle .lc {
    width: 172px;
  }

  /* ライフサイクル各ステップ幅（横1行なので矢印 ::after はそのまま活かす） */
  .rismm .feat3 .fc {
    width: 280px;
  }

  /* 機能カード幅（箇条書きが入るので広め） */
  .rismm .flow .st {
    width: 158px;
  }

  /* 導入の流れ各ステップ幅 */

  .rismm .cta-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rismm .cta-panel .ct-riz {
    margin: 0 auto;
    width: 180px;
  }

  .rismm .cta-panel .btns {
    justify-content: center;
  }

  /* ライフサイクルは上の横スクロールグループで指定済み（矢印 ::after は横1行のまま表示） */

  .rismm .photosec {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  /* 写真セクション：縦積み */
  .rismm .photosec .pimg {
    order: -1;
  }

  /* スマホは画像を上に */
}

@media(max-width:520px) {

  /* ※課題・ライフサイクル・運用管理・導入の流れ の横スクロールは
     @media(max-width:900px) 側で指定済み（タブレット・スマホ共通） */

  /* 「ここまで、ぜんぶおまかせ！」：スマホは吹き出しと画像を横並びにすると
     吹き出しが縦長につぶれるため、縦積み（吹き出しを上）にして中央寄せする。 */
  .rismm .flow-riz {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: center;
    margin-top: 14px;
  }

  .rismm .flow-riz img {
    width: 180px;
    /* スマホでは画像を小さめに（画面幅からのはみ出し防止） */
  }

  /* 余白を詰める */
  .rismm .sec {
    padding: 60px 0;
  }

  /* 見出し：折り返し */
  .rismm .sec-head {
    flex-wrap: wrap;
  }

  /* 見出し横のリズを小さく */
  .rismm .riz-face {
    width: 70px;
  }
}