/* =============================================================================
   メディアストリームルーター（MSR）製品ページ専用スタイル
   対象ファイル：products/index.html （<div class="msr-page"> 以下の独自コンテンツ）
   読み込み元　：products/index.html の head 内、編集可能領域から
                 <link rel="stylesheet" href="css/style.css"> で読み込み
   =============================================================================

   [クラス命名ルール]
     ・すべてのクラス名は "msr-" プレフィックスで統一し、NTTテクノクロス
       共通CSS（base_pro.css / megamenu2-products_style.css / footer2_style.css）
       とのクラス名衝突を避けている。
     ・唯一の例外は #pageHead（IDセレクタ）。sample.html側の変更禁止HTML
       構造は一切変更せず、CMS標準の見出し帯を「見た目だけ」非表示にする
       ためにこのファイル側から上書きしている（詳細は本ファイル内コメント参照）。

   [ページ内セクション構成（上から順）]
     .msr-breadcrumb        パンくずリスト
     .msr-pageTitle         カテゴリタグ＋ページタイトル
     .msr-localNav          ページ内追従ナビ（#top #features #scene #price #flow #faq）
     #top     .msr-hero          1. ファーストビュー（ロゴ・コピー・背景写真・CTA）
     .msr-sectionLead            特長セクションの見出し帯
     #features .msr-features     2. 4つの特長（番号・見出し・画像・説明）
     #scene   .msr-scene         3. 活用シーン（事例カード×2）
     #price   .msr-price         4. 料金（ライセンス・保守費用）
     #flow    .msr-flow          5. ご利用の流れ（STEP01〜04）
     .msr-ctaBanner--mid         中間CTAバナー
     #spec    .msr-spec          6. 仕様（アコーディオン：機能仕様／動作環境／接続実績機器）
     #column  .msr-column        7. コラム（記事一覧）
     #movie   .msr-movieSection  （現在コメントアウト中）動画セクション
     #faq     .msr-faq           8. よくあるご質問（アコーディオン）
     .msr-ctaBanner--final       最終CTAバナー＋お問い合わせ先

   [共通・汎用クラス]
     .msr-inner              コンテンツ幅を揃える共通ラッパー（最大1080px中央寄せ）
     .msr-btn / --outline / --primary
                              CTAボタン共通スタイル（白抜き／黄色塗り。現在は
                              ご依頼により全ボタンを --primary＝黄色 で統一使用）
     .msr-cta                 CTAボタンを横並びにするラッパー
     .msr-pc-only / .msr-sp-only
                              同じ文言のPC用／スマホ用（改行位置違い）を出し分け
                              （767px以下で表示が切り替わる。JS不使用）
     details.msr-accordion /
     details.msr-faqItem     アコーディオン欄。JS不使用、ブラウザ標準の
                              <details><summary>要素の開閉機能のみで実装

   [レスポンシブ]
     ブレークポイントは 767px以下＝スマホ、1100px以上＝PC広幅レイアウト。
     スマホ用の上書きはすべてファイル末尾の @media (max-width: 767px) 内に集約。
   ============================================================================= */
:root{
  --msr-navy: #0c2158;
  --msr-navy-light: #17357a;
  --msr-navy-pale: #eef2fa;
  --msr-orange: #f5a623;
  --msr-orange-dark: #dd9315;
  --msr-blue-bg: #e9f5fb;
  --msr-text: #333333;
  --msr-text-light: #666666;
  --msr-border: #d9dee8;
  --msr-radius: 8px;
  --msr-maxw: 1080px;
}

.msr-page{
  color: var(--msr-text);
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: break-word;
}

/* CMS標準のページ見出し帯は、msr-page内で独自にパンくず・カテゴリ・タイトルを
   再現しているため視覚的に非表示にする（h1自体はSEO/アクセシビリティのため残す） */
#pageHead{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.msr-page img{ max-width: 100%; height: auto; display: block; }
.msr-page a{ color: inherit; }
.msr-page section, .msr-page .msr-block{ position: relative; }
.msr-inner{
  max-width: var(--msr-maxw);
  margin: 0 auto;
  padding: 0 20px;
}
/* PC/スマホでテキストの改行位置を出し分けるためのユーティリティ */
.msr-sp-only{ display: none; }

/* ---------- ボタン ---------- */
.msr-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 22px;
  border-radius: 999px;
  font-size: 17px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity .2s ease, transform .15s ease;
}
.msr-btn:hover{ opacity: .85; }
.msr-btn::after{ content: "\203A"; font-weight: bold; }
.msr-btn.msr-btn--outline{
  background: #fff;
  color: var(--msr-navy);
  border: 1px solid var(--msr-navy);
}
.msr-btn.msr-btn--primary{
  background: var(--msr-orange);
  color: var(--msr-navy);
  border: 1px solid var(--msr-orange);
}
.msr-cta{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
/* ページ本文内（ヒーロー・各CTAバナー）のボタンは横幅を統一する。
   ヘッダー内ページ内ナビのボタンは現状のサイズのままとする。 */
.msr-hero .msr-cta .msr-btn,
.msr-ctaBanner .msr-cta .msr-btn{
  min-width: 220px;
}

/* ---------- パンくず ---------- */
.msr-breadcrumb{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px 0;
  font-size: 14px;
  color: var(--msr-text-light);
}
.msr-breadcrumb ol{ display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.msr-breadcrumb li:not(:last-child)::after{ content: "\203A"; margin: 0 8px; color: #b7bfd1; }
.msr-breadcrumb a{ text-decoration: none; }
.msr-breadcrumb a:hover{ text-decoration: underline; }

/* ---------- カテゴリ・タイトル ---------- */
.msr-pageTitle{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px 24px;
}
.msr-pageTitle-cat{
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid var(--msr-navy);
  color: var(--msr-navy);
  font-size: 12px;
  border-radius: 3px;
  margin-bottom: 10px;
}
.msr-pageTitle-heading{
  font-size: 36px;
  font-weight: bold;
  color: var(--msr-navy);
  line-height: 1.5;
  margin: 0;
}

/* ---------- ページ内ナビ ---------- */
.msr-localNav{
  background: var(--msr-navy);
  position: sticky;
  top: 0;
  z-index: 50;
}
.msr-localNav .msr-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.msr-localNav-list{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 4px;
}
.msr-localNav-list a{
  display: block;
  padding: 10px 14px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
}
.msr-localNav-list a:hover{ background: rgba(255,255,255,.12); }
.msr-localNav-cta{ display: flex; gap: 10px; flex-wrap: wrap; }
.msr-localNav-cta .msr-btn{ padding: 12px 16px; font-size: 15px; min-width: 132px; }

/* ---------- ヒーロー ---------- */
/* 横幅比率3:7（紺色単色：写真）。写真パネルは右側70%に固定し、
   パネル内で左寄せクロップしてカメラ全体がほぼ収まるようにする。
   紺色との境目のみ短くぼかして自然につなげる。 */
.msr-hero{
  position: relative;
  background-color: var(--msr-navy);
  color: #fff;
  padding: 70px 0;
  margin-bottom: 28px; /* 特長帯との間に目立たない程度の余白を挟む */
  overflow: hidden;
}
@media (min-width: 1100px){
  .msr-hero{
    min-height: 460px;
    display: flex;
    align-items: center;
  }
}
.msr-hero-media{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 70%;
  overflow: hidden;
  z-index: 0;
}
.msr-hero-media::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 境目はしっかりぼかしつつ、写真全体にも紺色の薄い透かしを乗せる */
  background: linear-gradient(90deg, var(--msr-navy) 0%, rgba(12,33,88,.6) 10%, rgba(12,33,88,.3) 24%, rgba(12,33,88,.3) 100%);
}
.msr-hero-media .msr-hero-media-img{
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  display: block;
}
.msr-hero-inner{
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: 0;
  padding-left: max(20px, calc((100% - 1080px) / 2 + 20px));
  padding-right: 20px;
}
/* スマホ専用：コピーとCTAの間に写真を通常フローで表示するための要素。
   PCでは使わない（PCは .msr-hero-media の背景レイヤーを使用）。 */
.msr-hero-media-sp{ display: none; }
.msr-hero-logo{ margin: 0 0 24px; line-height: 0; }
.msr-hero-logo .msr-hero-logo-img{ height: 48px; width: auto; max-width: none; }
.msr-hero-copy{
  font-size: 40px;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 32px;
  white-space: nowrap;
}

/* ---------- セクション見出し帯 ---------- */
.msr-sectionLead{
  background: var(--msr-navy);
  color: #fff;
  text-align: center;
  padding: 26px 20px;
  font-size: 36px;
  font-weight: bold;
}

/* ---------- 特長 ---------- */
.msr-features{ padding: 60px 0 70px; }
.msr-feature{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "media head" "media desc";
  align-items: start;
  column-gap: 48px;
  padding: 40px 0;
  border-bottom: 1px solid var(--msr-border);
}
.msr-feature:last-child{ border-bottom: none; }
.msr-feature:nth-child(even){
  grid-template-areas: "head media" "desc media";
}
.msr-feature-head{ grid-area: head; min-width: 0; margin-bottom: 14px; }
.msr-feature-media{ grid-area: media; min-width: 0; }
.msr-feature-desc{ grid-area: desc; min-width: 0; }
.msr-feature-num{
  font-size: 44px;
  font-weight: bold;
  color: var(--msr-navy);
  line-height: 1;
  margin: 0 0 8px;
  font-style: italic;
}
.msr-feature-heading{
  font-size: 24px;
  font-weight: bold;
  color: var(--msr-navy);
  margin: 0;
  line-height: 1.5;
}
.msr-feature-desc p{ margin: 0; color: var(--msr-text); }
.msr-feature-img{
  width: 100%;
  border-radius: var(--msr-radius);
  box-shadow: 0 4px 16px rgba(12,33,88,.08);
}

/* ---------- 画像プレースホルダー ---------- */
.msr-placeholder{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(45deg, #eceff5, #eceff5 10px, #e3e7f0 10px, #e3e7f0 20px);
  border: 1px dashed #b9c0d4;
  border-radius: var(--msr-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8891a8;
  text-align: center;
  overflow: hidden;
}
.msr-placeholder span{
  background: rgba(255,255,255,.9);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
}

/* ---------- 活用シーン ---------- */
.msr-scene{ background: var(--msr-blue-bg); padding: 60px 0; }
.msr-scene-lead{ text-align: center; margin-bottom: 40px; }
.msr-scene-lead h2{ font-size: 36px; color: var(--msr-navy); margin: 0 0 10px; }
.msr-scene-lead p{ margin: 0; color: var(--msr-navy); font-size: 18px; font-weight: bold; }
.msr-scene-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.msr-scene-card{ background: #fff; border-radius: var(--msr-radius); overflow: hidden; box-shadow: 0 4px 16px rgba(12,33,88,.08); }
.msr-scene-photo{ position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.msr-scene-photo img{ width: 100%; height: 100%; object-fit: cover; }
.msr-scene-tag{
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--msr-navy);
  color: #fff;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
}
.msr-scene-body{ padding: 24px; }
.msr-scene-body h3{ font-size: 24px; color: var(--msr-navy); margin: 0 0 12px; line-height: 1.5; }
.msr-scene-body p{ margin: 0; font-size: 16px; color: var(--msr-text); }

/* ---------- 料金 ---------- */
.msr-price{ background: var(--msr-blue-bg); padding: 60px 0; }
.msr-price-lead{ text-align: center; margin-bottom: 40px; }
.msr-price-lead h2{ font-size: 36px; color: var(--msr-navy); margin: 0 0 10px; }
.msr-price-lead p{ margin: 0; color: var(--msr-navy); font-size: 18px; font-weight: bold; }
.msr-price-grid{ display: flex; align-items: stretch; justify-content: center; gap: 20px; flex-wrap: wrap; }
.msr-price-card{
  display: flex;
  flex-direction: column;
  flex: 1 1 400px;
  max-width: 460px;
  background: #fff;
  border-radius: var(--msr-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(12,33,88,.08);
}
.msr-price-card-head{
  background: var(--msr-navy);
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  padding: 14px;
}
.msr-price-card-body{ flex: 1 1 auto; padding: 26px; text-align: center; display: flex; flex-direction: column; justify-content: center; }
.msr-price-card-body p{ margin: 0 0 12px; font-size: 16px; }
.msr-price-card-body .msr-price-value{ font-size: 30px; font-weight: bold; color: var(--msr-navy); margin: 0 0 10px; white-space: nowrap; }
.msr-price-card-body .msr-price-note{ font-size: 12px; color: var(--msr-text-light); margin: 0; }
.msr-price-plus{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  color: var(--msr-navy);
  flex: 0 0 auto;
}

/* ---------- ご利用の流れ ---------- */
.msr-flow{ background: var(--msr-blue-bg); padding: 60px 0 0; }
.msr-flow-lead{ text-align: center; margin-bottom: 36px; }
.msr-flow-lead h2{ font-size: 36px; color: var(--msr-navy); margin: 0 0 10px; }
.msr-flow-lead p{ margin: 0; color: var(--msr-navy); font-size: 18px; font-weight: bold; }
.msr-flow-list{ display: flex; flex-direction: column; gap: 16px; padding-bottom: 60px; }
.msr-flow-step{
  display: flex;
  align-items: stretch;
  min-height: 152px;
  width: 75%;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--msr-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(12,33,88,.08);
}
.msr-flow-step-badge{
  flex: 0 0 96px;
  background: var(--msr-navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1.3;
}
.msr-flow-step-badge small{ font-size: 12px; letter-spacing: .1em; }
.msr-flow-step-badge strong{ font-size: 22px; }
.msr-flow-step-body{
  flex: 1 1 auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
}
.msr-flow-step-body h3{ flex: 0 0 auto; font-size: 24px; color: var(--msr-navy); margin: 0 0 6px; }
.msr-flow-step-body p{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  color: var(--msr-text);
}
.msr-flow-step-icon{
  flex: 0 0 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 18px;
  color: var(--msr-navy);
}
.msr-flow-step-icon svg{ width: 40px; height: 40px; }
.msr-flow-step-icon .msr-flow-step-icon-img{ height: 48px; width: auto; max-width: none; }

/* ---------- CTAバナー ---------- */
.msr-ctaBanner{
  background: var(--msr-navy);
  color: #fff;
  text-align: center;
  padding: 50px 20px;
}
.msr-ctaBanner h2{ font-size: 36px; margin: 0 0 26px; }
.msr-ctaBanner .msr-cta{ justify-content: center; margin: 0 auto; }
.msr-ctaBanner--final .msr-contact{
  margin-top: 34px;
  font-size: 14px;
  line-height: 1.9;
  color: #dbe2f2;
}

/* ---------- 仕様 ---------- */
.msr-spec{ padding: 60px 0; }
.msr-spec-lead{ text-align: center; margin-bottom: 32px; }
.msr-spec-lead h2{ font-size: 36px; color: var(--msr-navy); margin: 0; }
.msr-accordion{ border-top: 1px solid var(--msr-border); margin-bottom: 8px; }
.msr-accordion summary{
  list-style: none;
  cursor: pointer;
  padding: 18px 4px;
  font-size: 18px;
  font-weight: bold;
  color: var(--msr-navy);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.msr-accordion summary::-webkit-details-marker{ display: none; }
.msr-accordion summary::after{
  content: "";
  width: 12px; height: 12px;
  border-right: 2px solid var(--msr-navy);
  border-bottom: 2px solid var(--msr-navy);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: 12px;
  flex-shrink: 0;
}
.msr-accordion[open] summary::after{ transform: rotate(-135deg); }
.msr-accordion-body{ padding-bottom: 20px; }

.msr-table{ width: 100%; border-collapse: collapse; font-size: 16px; }
.msr-table th, .msr-table td{
  border: 1px solid var(--msr-border);
  padding: 14px 18px;
  text-align: left;
  vertical-align: middle;
}
.msr-table th{ background: var(--msr-blue-bg); color: var(--msr-navy); width: 240px; font-weight: bold; }
.msr-table td{ background: #fff; }
.msr-table .msr-table-note{ text-align: right; font-size: 12px; color: var(--msr-text-light); padding-top: 8px; border: none; }

/* ---------- コラム ---------- */
.msr-column{ padding: 60px 0; }
.msr-column-lead{ text-align: center; margin-bottom: 30px; }
.msr-column-lead h2{ font-size: 36px; color: var(--msr-navy); margin: 0; }
.msr-article{ display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--msr-border); }
.msr-article:last-of-type{ border-bottom: none; }
.msr-article-thumb{ flex: 0 0 160px; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--msr-radius); }
.msr-article-thumb a{ display: block; width: 100%; height: 100%; }
.msr-article-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.msr-article-body{ flex: 1 1 auto; min-width: 0; }
.msr-article-date{ font-size: 12px; color: var(--msr-text-light); }
.msr-article-title{ font-size: 24px; color: var(--msr-navy); font-weight: bold; margin: 4px 0 8px; line-height: 1.5; }
.msr-article-title a{ text-decoration: none; }
.msr-article-title a:hover{ text-decoration: underline; }
.msr-article-excerpt{ font-size: 14px; color: var(--msr-text-light); margin: 0; }
.msr-movieSection{ padding: 60px 0; }
.msr-movie{ margin-top: 0; }
.msr-movie h3{ font-size: 24px; color: var(--msr-navy); margin: 0 0 18px; }
.msr-movie-frame{
  aspect-ratio: 16/9;
  border-radius: var(--msr-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(12,33,88,.08);
}
.msr-movie-frame iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- FAQ ---------- */
.msr-faq{ padding: 60px 0; }
.msr-faq-lead{ text-align: center; margin-bottom: 30px; }
.msr-faq-lead h2{ font-size: 36px; color: var(--msr-navy); margin: 0; }
.msr-faqItem{
  border: 1px solid var(--msr-border);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 4px;
}
.msr-faqItem summary{
  list-style: none;
  cursor: pointer;
  background: var(--msr-navy);
  color: #fff;
  padding: 16px 22px;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 14px;
}
.msr-faqItem summary::-webkit-details-marker{ display: none; }
.msr-faqItem summary .msr-qa-mark{ color: var(--msr-orange); font-size: 18px; flex-shrink: 0; }
.msr-faqItem summary::after{
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin-left: auto;
  flex-shrink: 0;
}
.msr-faqItem[open] summary::after{ transform: rotate(-135deg); }
.msr-faqAnswer{
  background: #fff;
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  font-size: 16px;
}
.msr-faqAnswer .msr-qa-mark{ color: var(--msr-orange); font-size: 18px; font-weight: bold; flex-shrink: 0; }
.msr-faqAnswer-body{ flex: 1 1 auto; min-width: 0; }
.msr-faqAnswer-body p{ margin: 0 0 6px; }
.msr-faqAnswer-body p:last-child{ margin-bottom: 0; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 767px){
  /* PC/スマホ文言の出し分け */
  .msr-pc-only{ display: none; }
  .msr-sp-only{ display: inline; }

  /* 見出しサイズはスマホでは統一（改行が多い見出しのみ個別にさらに縮小） */
  .msr-pageTitle-heading{ font-size: 18px; }
  .msr-sectionLead{ font-size: 17px; padding: 22px 20px; }
  .msr-scene-lead h2{ font-size: 20px; margin-bottom: 20px; }
  .msr-price-lead h2{ font-size: 24px; margin-bottom: 20px; }
  .msr-flow-lead h2{ font-size: 24px; margin-bottom: 20px; }
  .msr-spec-lead h2{ font-size: 24px; }
  .msr-column-lead h2{ font-size: 24px; }
  .msr-faq-lead h2{ font-size: 24px; }
  .msr-ctaBanner h2{ font-size: 20px; }

  /* ページ内追従ナビ：スマホ用の簡易ナビ（ハンバーガー化しない）
     position: fixed だと常にNTTテクノクロス公式ヘッダー／ハンバーガーメニューの
     上に重なってしまう（開いた時のメニューパネルとも衝突する）ため、
     PCと同じ position: sticky に統一する。sticky は通常のドキュメントの流れの
     中でヘッダーの直後に配置され、スクロールでその位置に達した時だけ
     画面上端に張り付くため、ヘッダーやメニューと重なる問題が起きない。 */
  .msr-localNav .msr-inner{
    flex-direction: row;
    flex-wrap: nowrap;
    padding-top: 0;
    padding-bottom: 0;
  }
  .msr-localNav-list{
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;
    gap: 0;
  }
  .msr-localNav-list li{ flex: 1 1 0; text-align: center; }
  .msr-localNav-list a{
    padding: 12px 2px;
    font-size: 12px;
    white-space: nowrap;
  }
  .msr-localNav-list li.msr-localNav-hideSp{ display: none; }
  .msr-localNav-cta{ display: none; }

  /* ヒーロー：PC用の背景写真レイヤーは使わず、コピー文とCTAの間に
     写真全体（紺色の薄い透かし付き）を画面幅いっぱいに表示する */
  .msr-hero-media{ display: none; }
  .msr-hero-inner{ max-width: none; padding-left: 20px; }
  .msr-hero-copy{ font-size: 22px; white-space: normal; }
  .msr-hero-logo-img{ height: 34px; }
  .msr-hero-media-sp{
    display: block;
    position: relative;
    width: calc(100% + 40px);
    margin: 4px -20px 28px;
    aspect-ratio: 4000 / 2240;
    overflow: hidden;
  }
  .msr-hero-media-sp::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 上下端（各6%）は背景と同じ紺色から一気にぼかして境目を馴染ませつつ、
       写真全体にもPC版と同程度（30%）の紺色の透かしを乗せる */
    background: linear-gradient(180deg,
      var(--msr-navy) 0%,
      rgba(12,33,88,.3) 6%,
      rgba(12,33,88,.3) 94%,
      var(--msr-navy) 100%);
  }
  .msr-hero-media-sp .msr-hero-media-sp-img{
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
  }
  .msr-cta{ flex-wrap: nowrap; justify-content: center; gap: 8px; }
  .msr-hero .msr-cta .msr-btn,
  .msr-ctaBanner .msr-cta .msr-btn{
    min-width: 150px;
    flex: 0 1 auto;
    padding: 13px 18px;
    font-size: 15px;
  }

  /* 特長：見出し→画像→説明 の順に並び替え、画像は中央ぞろえ */
  .msr-feature{ display: flex; flex-direction: column; gap: 16px; }
  .msr-feature-head{ order: 1; margin-bottom: 0; }
  .msr-feature-num{ text-align: center; }
  .msr-feature-media{ order: 2; display: flex; justify-content: center; }
  .msr-feature-media .msr-placeholder,
  .msr-feature-media .msr-feature-img{ width: 85%; }
  .msr-feature-desc{ order: 3; }

  .msr-scene-grid{ grid-template-columns: 1fr; }

  .msr-price-grid{ flex-direction: column; gap: 0; }
  /* デスクトップの flex-basis:400px が、縦積みでは「高さ」の指定として
     効いてしまい、パディングを縮めても箱の高さが変わらなかったための修正 */
  .msr-price-card{ max-width: none; flex: 0 0 auto; }
  .msr-price-card-body{ padding: 12px 20px; }
  .msr-price-card-body .msr-price-value{ font-size: 24px; white-space: normal; }
  /* align-items:stretch（親.msr-price-gridから継承）により、縦積み時に
     幅いっぱいへ引き伸ばされたまま回転し、縦長の帯になってカードと
     重なっていたための修正 */
  .msr-price-plus{ align-self: center; width: auto; transform: rotate(90deg); }

  .msr-flow-step{ flex-direction: column; min-height: 0; width: 100%; }
  .msr-flow-step-body{ display: block; flex: 0 0 auto; text-align: center; }
  .msr-flow-step-body p{ display: block; text-align: left; }
  /* こちらもデスクトップの flex-basis（横幅指定）が縦積みで「高さ」に
     化けてしまい、パディングを縮めても変わらなかったための修正 */
  .msr-flow-step-badge{ flex: 0 0 auto; flex-direction: row; justify-content: center; gap: 8px; padding: 14px 10px; }
  .msr-flow-step-icon{ flex: 0 0 auto; padding: 6px 0 22px; }

  .msr-table{ table-layout: fixed; }
  .msr-table th, .msr-table td{ box-sizing: border-box; }
  .msr-table th{ width: 33.333%; }
  .msr-article{ flex-direction: column; }
  .msr-article-thumb{ flex-basis: auto; }
}

/* ==========================================================================
   外部発表チェック対応で追加（2026年9月11日）
   - .msr-price-tax-note : 料金セクションの税込表示の注記（景表法(9)）
   - .msr-trademark      : 商標帰属表示（知財(7)(5)）
   ========================================================================== */
.msr-price-tax-note{
  margin: 24px 0 0;
  font-size: 12px;
  line-height: 1.8;
  color: var(--msr-text-light);
  text-align: right;
}

.msr-trademark{
  margin: 0;
  padding: 28px 20px 40px;
  text-align: center;
}
.msr-trademark p{
  margin: 0 0 4px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--msr-text-light);
}
.msr-trademark p:last-child{ margin-bottom: 0; }

@media screen and (max-width: 767px){
  .msr-price-tax-note{ text-align: left; }
  .msr-trademark{ padding: 24px 16px 32px; }
}