@charset "UTF-8";

/* ============================================================
   バーチャルマスターオペレーター（VMO）製品ページ専用CSS
   格納先：/css/hkhisys-renewal/page/keyword_operation/vmo/virtual-master-operator.css

   共通CSS(base/common/parts)で表現できない部分だけをここで補います。

   ● 使っている主な色（デザインシステム準拠）
     --color-blue       : #4D4D4D（プライマリ）
     --color-light-blue : #F4F4F4（淡いグレーの背景）
     アクセント（装飾/CTA）: #CC0000（赤）
   ============================================================ */

/* ------------------------------------------------------------
   共通：セクション（区切り）の上下余白
   PC=60px / スマホ(767px以下)=40px に切り替え
   ------------------------------------------------------------ */
.lp-section { padding: 60px 0; }
@media screen and (max-width: 767px) {
  .lp-section { padding: 40px 0; }
}

/* ------------------------------------------------------------
   ファーストビューの文字位置調整（デフォルトは左）
   このセクションをONにすることで文字位置を右に変更できます。
   文字位置を左にしたい場合はこのセクションは削除してください。
   ------------------------------------------------------------ */
.PageFv .lp-fv-right {
  align-items: flex-end;   /* 縦積みの各行を右端に寄せる */
  text-align: right;       /* 行内の文字も右揃えに */
  margin-left: auto;       /* ブロック自体も右へ押し出す（保険） */
}

/* ------------------------------------------------------------
   ローカルナビゲーション（メインビジュアル直下のページ内リンク）
   ページ内の各セクションへジャンプするためのメニューです
   ------------------------------------------------------------ */
.lp-localnav {
  background: #fff;                      /* 背景は白 */
  border-top: 1px solid #E5E5E5;         /* 上に薄いグレーの線 */
  border-bottom: 1px solid #E5E5E5;      /* 下に薄いグレーの線 */
  color: #000000;
}
.lp-localnav ul {
  display: flex;            /* 横並びにする */
  flex-wrap: wrap;          /* 入りきらない場合は折り返す */
  justify-content: center;  /* 中央寄せ */
  max-width: 1120px;        /* 最大幅（これ以上は広がらない） */
  margin: 0 auto;           /* 左右中央に配置 */
  padding: 0;
  list-style: none;         /* リストの「・」を消す */
}
.lp-localnav li {
  flex: 1 1 auto;           /* 各項目を均等に伸縮させる */
  text-align: center;
}
/* 2つ目以降の項目の左側に区切り線を入れる */
.lp-localnav li + li { border-left: 1px solid #E5E5E5; }

.lp-localnav a {
  position: relative;              /* 下線マーク(::after)の位置基準 */
  display: inline-block;
  padding: 18px 16px 20px;         /* 下線マークの分だけ下に余白を確保 */
  color: #000000;                  /* 初期表示の文字色＝黒 */
  font-weight: bold;
  font-size: 95%;
  text-decoration: none;           /* 下線を消す */
  transition: color 0.2s ease;     /* 色変化をなめらかに */
}

/* 共通CSSがリンクを赤くするため、!important で黒を強制的に上書き */
.lp-localnav ul li a,
.lp-localnav ul li a:link,
.lp-localnav ul li a:visited {
  color: #000000 !important;       /* 初期表示は黒 */
}
/* マウスを乗せた時／キーボードで選んだ時だけ赤にする */
.lp-localnav ul li a:hover,
.lp-localnav ul li a:focus {
  color: #FA000F !important;
}

/* 「ここはリンクですよ」と示す下線マーク（初期は薄いグレー #F3F3F3） */
.lp-localnav a::after {
  content: "";                     /* 疑似要素は content が必須 */
  position: absolute;
  left: 16px; right: 16px;         /* 文字幅に沿わせる */
  bottom: 14px;
  height: 2px;
  border-radius: 2px;
  background: #F3F3F3;
  transition: background 0.2s ease;
}
/* ホバー時は下線も赤に連動 */
.lp-localnav a:hover::after,
.lp-localnav a:focus::after {
  background: #FA000F;
}

/* リンクで飛んだ先の見出しが画面の上端に貼り付きすぎないよう余白を確保 */
#sec-target, #sec-solution, #sec-feature, #sec-effect, #sec-contact {
  scroll-margin-top: 20px;
}

/* スマホ表示ではナビを2列に */
@media screen and (max-width: 767px) {
  .lp-localnav li { flex: 1 1 50%; }                    /* 1行に2つ */
  .lp-localnav li:nth-child(odd) { border-left: none; } /* 奇数番目の左線は消す */
  .lp-localnav a { padding: 14px 8px; font-size: 88%; }
}

/* ------------------------------------------------------------
   中央寄せのセクション見出し（各セクション共通の大見出し）
   ------------------------------------------------------------ */
.lp-sec-head { text-align: center; margin-bottom: 48px; }
.lp-sec-head h2 {
  font-size: 180%;
  font-weight: bold;
  color: var(--color-blue, #4D4D4D);   /* 変数が無い場合は #4D4D4D を使用 */
  letter-spacing: 0.06em;              /* 文字間隔を少し広げる */
  padding-bottom: 0;
  background: none;
}
/* 見出しの下に短い赤いラインを飾りとして表示 */
.lp-sec-head h2::after {
  content: "";
  display: block;
  width: 56px; height: 4px;
  background-color: #CC0000;
  margin: 16px auto 0;                 /* 上16px・左右autoで中央寄せ */
  border-radius: 2px;
}
.lp-sec-head p { margin-top: 20px; color: #4D4D4D; }
@media screen and (max-width: 767px) {
  .lp-sec-head { margin-bottom: 32px; }
  .lp-sec-head h2 { font-size: 140%; }
}

/* ------------------------------------------------------------
   ③ 対象のお客さまカード（画像＋見出し）
   ------------------------------------------------------------ */
.lp-card {
  background: #fff;
  border: 1px solid var(--color-light-blue, #F4F4F4);
  border-radius: 10px;                 /* 角を丸くする */
  overflow: hidden;                    /* 角丸からはみ出た画像を切り取る */
  height: 100%;                        /* 隣のカードと高さを揃える */
  box-shadow: 0 2px 12px #4D4D4D14;    /* 影。末尾14は透明度8%(16進) */
}
.lp-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;                 /* 画像を16:10の比率で表示 */
  object-fit: cover;                   /* 比率を保ったまま枠いっぱいに */
}
.lp-card-body { padding: 20px; }
.lp-card-body h3 { font-size: 115%; color: var(--color-blue, #4D4D4D); margin-bottom: 6px; }
.lp-card-body .lp-note { font-size: 88%; color: #777; }

/* ------------------------------------------------------------
   ④⑤ 課題 → 解決 の対比（左＝課題／右＝解決）
   左上に「課題」「解決」のラベルを表示するデザイン
   ------------------------------------------------------------ */
/* 3カラム構成：左(課題) / 中央(矢印64px) / 右(解決) */
.lp-ps {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;                /* 高さを揃える */
  margin-bottom: 20px;
}

.lp-ps-box {
  position: relative;                  /* ラベル(::before)の位置基準 */
  border-radius: 10px;
  padding: 44px 24px 24px;             /* 上部はラベル分の余白を多めに */
}

/* 課題ボックス：淡いグレー背景 */
.lp-ps-problem { background: var(--color-light-blue, #F4F4F4); border: 1px solid #e2e2e2; }
/* 解決ボックス：白地＋赤い枠で目立たせる */
.lp-ps-solution { background: #fff; border: 2px solid #CC0000; }

/* 左上のラベル（共通設定）。枠線の分だけ外側に出して隙間を防ぐ */
.lp-ps-box::before {
  position: absolute;
  top: -1px; left: -1px;               /* 課題ボックス(枠1px)に合わせる */
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 16px 5px 14px;
  font-size: 82%;
  font-weight: bold;
  color: #fff;
  border-radius: 10px 0 10px 0;        /* 左上を角丸にしてボックスに沿わせる */
  letter-spacing: 0.08em;
}
/* 課題ラベル（グレー） */
.lp-ps-problem::before { content: "課題"; background: #7A7A7A; }
/* 解決ラベル（赤）。枠が2pxなので位置も-2pxにして隙間を消す */
.lp-ps-solution::before {
  content: "解決";
  background: #CC0000;
  top: -2px; left: -2px;
}

/* 中央の矢印（課題→解決の流れを示す） */
.lp-ps-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #CC0000;
  font-size: 28px;
  font-weight: bold;
}

/* スマホでは縦積みにし、矢印は下向き(90度回転)に */
@media screen and (max-width: 767px) {
  .lp-ps { grid-template-columns: 1fr; }
  .lp-ps-arrow { transform: rotate(90deg); padding: 10px 0; }
}

/* ------------------------------------------------------------
   ⑥ 選ばれる理由（番号付きカード）
   ------------------------------------------------------------ */
.lp-reason { height: 100%; }
/* 丸い番号バッジ（1・2・3） */
.lp-num {
  display: inline-flex;
  width: 40px; height: 40px;
  border-radius: 50%;                  /* 正円にする */
  background: var(--color-blue, #4D4D4D);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: 12px;
}
.lp-reason h3 { font-size: 110%; color: var(--color-blue, #4D4D4D); margin-bottom: 8px; line-height: 1.5; }
.lp-reason p { font-size: 93%; color: #555; margin-bottom: 0; }

/* 理由カード内の画像を、カード幅からはみ出さないように収める */
.lp-reason img {
  display: block;
  width: 100%;                         /* 幅いっぱいに縮小（はみ出し防止） */
  height: auto;                        /* 縦横比を維持 */
  margin-top: 16px;                    /* 上のテキストとの間隔 */
  border-radius: 8px;
  object-fit: cover;
}

/* ------------------------------------------------------------
   理由カード内の「ポイント3点」リスト（丸アイコン＋見出し＋説明）
   ------------------------------------------------------------ */
.lp-points {
  list-style: none;      /* リストの「・」を消す */
  margin: 16px 0 0;
  padding: 0;
}
.lp-points li {
  display: flex;         /* アイコンと文章を横並びに */
  align-items: flex-start;
  gap: 12px;             /* アイコンと文章の間隔 */
}
/* 2つ目以降の項目の上に区切り線と余白 */
.lp-points li + li {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #E5E5E5;
}
/* 丸いアイコン枠 */
.lp-points .lp-point-icon {
  flex: 0 0 44px;        /* 幅44pxで固定（縮まない） */
  width: 44px;
  height: 44px;
  border-radius: 50%;    /* 正円にする */
  border: 1px solid var(--color-blue, #4D4D4D);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.lp-points .lp-point-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}
/* 文章side */
.lp-points .lp-point-title {
  font-size: 97%;
  font-weight: bold;
  color: var(--color-blue, #4D4D4D);
  margin-top: 10px;
  margin-bottom: 2px;
  line-height: 1.4;
}
.lp-points .lp-point-text {
  font-size: 88%;
  color: #666;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ------------------------------------------------------------
   「選ばれる理由」セクションのアクセントカラー
   ------------------------------------------------------------ */
/* 丸い番号バッジ（1・2・3） */
.lp-num {
  background: #4D4D4D;
}

/* 各理由の見出し */
.lp-reason h3 {
  color: #4D4D4D;
}

/* ポイント3点リスト：丸枠とアイコンの線 */
.lp-points .lp-point-icon {
  border-color: #4D4D4D;
}
.lp-points .lp-point-icon svg {
  stroke: #4D4D4D;   /* HTML側のstroke指定をCSSで上書き */
}
.lp-points .lp-point-title {
  color: #4D4D4D;
}

/* ------------------------------------------------------------
   ⑥ 特長（4カラム）
   ------------------------------------------------------------ */
.lp-feature {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-top: 2px solid #CC0000;   /* ← 上端だけアクセント色 */
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  height: 100%;
}
.lp-feature h4 { font-size: 100%; color: #CC0000; margin-bottom: 6px; line-height: 1.5; }
.lp-feature p { font-size: 88%; color: #4D4D4D; margin-bottom: 0; }

/* ------------------------------------------------------------
   ⑦ 導入効果（導入前→導入後の比較）
   ------------------------------------------------------------ */
.lp-effect {
  background: #fff;
  border: 1px solid #4D4D4D;
  border-radius: 10px;
  padding: 28px;
  text-align: center;
  height: 90%;
}
/* 見出しの高さを最低3行分確保して、左右2枚の位置を揃える */
.lp-effect h3 { min-height: 3em; }
.lp-effect h3 { font-size: 105%; color: var(--color-blue, #4D4D4D); margin-bottom: 8px; }

/* ------------------------------------------------------------
   導入効果カード内に置く画像
   カード内の好きな位置に <img class="lp-effect-img"> を入れて使います
   ※大きさは max-width で調整してください
   ------------------------------------------------------------ */
.lp-effect-img {
  display: block;
  width: 100%;          /* カード幅いっぱい（はみ出し防止） */
  max-width: 320px;     /* これ以上は大きくならない上限 */
  height: auto;         /* 縦横比を維持 */
  margin: 16px auto;    /* 上下16px・左右autoで中央寄せ */
  border-radius: 8px;   /* カードに馴染む角丸 */
}

/* 導入前 ▶ 導入後 を横並びで表示する部分 */
.lp-ba { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 16px 0 8px; }
.lp-ba .lp-label { font-size: 85%; color: #777; }                                          /* 「導入前」等の小見出し */
.lp-ba .lp-val { font-size: 180%; font-weight: bold; color: var(--color-blue, #4D4D4D); }  /* 数値を大きく */
.lp-ba .lp-to { color: #CC0000; font-size: 26px; font-weight: bold; }                      /* 中央の矢印 */

/* 削減効果の強調ラベル（【 】カギ括弧で囲むデザイン） */
.lp-badge {
  display: inline-block;
  position: relative;                  /* カギ括弧(::before/::after)の位置基準 */
  margin-top: 14px;
  padding: 6px 24px;
  background: none;                    /* 塗りつぶしなし */
  border-radius: 0;
  color: #CC0000;
  font-size: 118%;
  font-weight: bold;
  letter-spacing: 0.03em;
}
/* 左右に「【」「】」のようなカギ括弧を描く */
.lp-badge::before,
.lp-badge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 9px;
  border: 2px solid #CC0000;
}
.lp-badge::before { left: 0;  border-right: none; }  /* 左のカギ括弧 */
.lp-badge::after  { right: 0; border-left:  none; }  /* 右のカギ括弧 */

.lp-disclaimer { font-size: 82%; color: #888; margin-top: 10px; }          /* 注釈(※)テキスト */
.lp-disclaimer_cta { font-size: 82%; color: #F3F3F3; margin-top: 50px; }   /* CTA内の注釈(※)テキスト */

/* 導入効果の下部：メリット4項目（左に赤い縦線） */
.lp-benefit {
  padding: 20px;
  border-left: 4px solid #CC0000;
  background: #fff;
  height: 100%;
  width: 100%;
  box-sizing: border-box;              /* paddingを含めて幅を計算 */
}
.lp-benefit h4 { font-size: 90%; color: var(--color-blue, #4D4D4D); margin-bottom: 6px; }
.lp-benefit p { font-size: 80%; color: #666; margin-bottom: 0; }

/* ------------------------------------------------------------
   ⑧ CTA（お問い合わせ誘導）
   濃いグレー地に、明るいグレーのカードを2枚並べる
   ------------------------------------------------------------ */
.lp-cta { background: #4D4D4D; }             /* セクション背景＝濃いグレー */
.lp-cta .lp-sec-head h2 { color: #FFFFFF; }  /* 見出しは白文字に */

.lp-cta-card {
  background: #F3F3F3;                  /* カードは明るいグレー */
  border: 1px solid #4D4D4D;
  border-radius: 10px;
  padding: 32px;
  text-align: center;
  color: #4D4D4D;                       /* カード内の文字色 */
  height: 100%;
  box-sizing: border-box;
  /* ↓ホバー時の動きをなめらかにする（下の:hoverと対で機能） */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lp-cta-card img { width: 56px; margin: 0 auto 16px; }
.lp-cta-card h3 { font-size: 120%; margin-bottom: 10px; color: #4D4D4D; }
.lp-cta-card p { font-size: 93%; color: #4D4D4D; margin-bottom: 20px; }

/* カード内の2つのボタンをサイズ統一（横280px / 高さ50px） */
.lp-cta-card .ButtonDocumentRequest,
.lp-cta-card .ButtonContactA {
  width: 100%;
  max-width: 280px;
  height: 50px;
  border-radius: 10px;
  margin: 0 auto;                       /* 中央寄せ */
  box-sizing: border-box;
}

/* マウスを乗せるとカードがふわっと浮き上がる演出 */
.lp-cta-card:hover {
  transform: translateY(-6px);          /* 上に6px移動 */
  box-shadow: 0 10px 24px #00000026;    /* 影を付けて浮遊感を出す(黒15%) */
}

/* セキュリティ説明＋タグ部分 */
.lp-security { margin-top: 40px; text-align: center; color: #F3F3F3; }
.lp-security .DetailTagList span {
  color: #4D4D4D;
  background-color: #FFFFFF;
  border-color: #4D4D4D;
  justify-content: center;
  margin-top: 30px;
}