/* ==========================================================================
   コーポレートTOP（/）リニューアル用CSS　2026-09-24
   --------------------------------------------------------------------------
   このファイルは /index.html だけが読み込む。main2.css には混ぜていない。

   ★main2.css への統合はしないこと。
     .l-header .l-header__buttons など、全ページ共通のセレクタを
     含むため、統合するとTOP以外のヘッダーまで変わってしまう。

   ※レビュー中の試行錯誤が層になって残っている（同じセレクタが複数回出てくる）。
     動作は検証済みだが、将来整理するなら別作業で。
   ========================================================================== */

@charset "UTF-8";
/* ==========================================================================
   TOP（https://www.shanon.co.jp/）FV・CTA 改修 レビュー専用CSS
   --------------------------------------------------------------------------
   ・このファイルは /fv-review-8x2k/sample_2/ のテストページからのみ
     読み込まれます。本番の /assets/css/main2.css は一切変更していないため、
     ここに書いた内容が本番サイトに影響することはありません。
   ・本番反映するときは、ここで確定した内容を main2.css へ移設します。
   ========================================================================== */

/* --------------------------------------------------------------------------
   FV：3分割固定パネル（自動カルーセルの置き換え）

   PC 1440px時の実寸
     左 SHANON MA   960 × 720
     右上 EVENT     480 × 360
     右下 企業情報   480 × 360
   文字は中央1200pxのコンテナ内に収める（左右120pxは背景のみ）
   -------------------------------------------------------------------------- */

.p-kv-panels {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  height: 720px;
  gap: 2px;          /* パネルの境界線。0にすると完全に密着 */
  background: #fff;  /* gap の色 */
}

/* 各パネル＝1つの巨大ボタン（画像のどこを押しても遷移） */
.p-kv-panels .p-kvp {
  position: relative;
  display: block;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.p-kv-panels .p-kvp--ma { grid-row: 1 / span 2; }

/* 背景画像 */
.p-kvp__bg {
  position: absolute;
  inset: 0;
}
.p-kvp__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
/* 文字を読ませるためのオーバーレイ
   ★いまは仮置き画像（明るい製品スクショ）に白文字を載せているため濃くしています。
     デザイン納品後は、実際の絵に合わせて濃度を調整してください。 */
.p-kvp__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0.9) 0%,
    rgba(0, 20, 60, 0.72) 48%,
    rgba(0, 20, 60, 0.34) 100%
  );
  transition: background 0.4s ease;
}
.p-kvp--es .p-kvp__bg::after,
.p-kvp--corp .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0.9) 0%,
    rgba(0, 20, 60, 0.66) 100%
  );
}

/* テキスト側 */
.p-kvp__body {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 14px;
}
/* 左パネル：文字の左端を1200pxコンテナの左端に合わせる
   ※ヘッダー（高さ84px）はFVに重なっていない＝FVはヘッダーの下から始まるので、
     ヘッダーを避けるための余白は不要 */
.p-kvp--ma .p-kvp__body {
  padding: 40px 6% 40px max(24px, calc((100vw - 1200px) / 2));
}
/* 右パネル：右端を1200pxコンテナの右端に合わせる */
.p-kvp--es .p-kvp__body,
.p-kvp--corp .p-kvp__body {
  gap: 10px;
  /* 【2026-09-24】右パディングは 100vw 連動で無限に増えるため、広い幅/ズームアウト時に
     中身が細く潰れ→高さ360px超でEVENTのボタンが切れる不具合があった。上限200px
     (=1600px幅相当)でキャップ。通常幅(≤1600px)は従来どおり無変更。 */
  padding: 28px clamp(24px, calc((100vw - 1200px) / 2), 200px) 28px 40px;
}

/* ラベル（SHANON MA / SHANON EVENT / CORPORATION） */
.p-kvp__label {
  font-size: clamp(24px, 2.1vw, 34px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
.p-kvp--es .p-kvp__label,
.p-kvp--corp .p-kvp__label {
  font-size: clamp(19px, 1.6vw, 25px);
}

/* リード（左パネルのみ） */
.p-kvp__caption {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
}

/* 見出し */
.p-kvp__title {
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.p-kvp--es .p-kvp__title,
.p-kvp--corp .p-kvp__title {
  font-size: clamp(18px, 1.7vw, 24px);
  line-height: 1.5;
}

/* 価格バッジ（依頼書の確定コピー案を使う場合のみ表示される） */
.p-kvp__price {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  margin-top: 2px;
  padding: 8px 18px;
  border-radius: 999px;
  background: radial-gradient(circle at 38% 30%, #ffc76b, #f7a21a 52%, #ec8d00 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 6px 16px rgba(0, 22, 66, 0.28);
}
.p-kvp__price b { font-size: 28px; font-weight: 700; }

/* 擬似ボタン（リンクの入れ子は不可なので span で見た目だけ作る） */
.p-kvp__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.1);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background 0.3s ease, color 0.3s ease;
}
.p-kvp__btn::after {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}
.p-kvp--es .p-kvp__btn,
.p-kvp--corp .p-kvp__btn {
  margin-top: 4px;
  padding: 9px 18px;
  font-size: 13px;
}

/* ホバー：画像を少し寄せて、暗幕を薄くして、ボタンを反転 */
.p-kv-panels .p-kvp:hover .p-kvp__bg img,
.p-kv-panels .p-kvp:focus-visible .p-kvp__bg img {
  transform: scale(1.04);
}
.p-kv-panels .p-kvp:hover .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0.82) 0%,
    rgba(0, 20, 60, 0.6) 56%,
    rgba(0, 20, 60, 0.24) 100%
  );
}
.p-kv-panels .p-kvp:hover .p-kvp__btn {
  background: #fff;
  color: #00319b;
}
.p-kv-panels .p-kvp:hover .p-kvp__btn::after { width: 24px; }

/* キーボード操作でどのパネルを選んでいるかわかるように */
.p-kv-panels .p-kvp:focus-visible {
  outline: 3px solid #f39800;
  outline-offset: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .p-kvp__bg img,
  .p-kvp__bg::after,
  .p-kvp__btn,
  .p-kvp__btn::after { transition: none; }
  .p-kv-panels .p-kvp:hover .p-kvp__bg img { transform: none; }
}

/* --------------------------------------------------------------------------
   SP（暫定）
   3分割の畳み方は未確定のため、まずは縦積みで破綻しない形にしています。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
  .p-kv-panels {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .p-kv-panels .p-kvp--ma { grid-row: auto; min-height: 98vw; }  /* 入稿画像 1536x1500 の比率 */
  .p-kv-panels .p-kvp { min-height: 36vw; }              /* 入稿画像 1536x549 の比率 */

  .p-kvp--ma .p-kvp__body {
    padding: 4.5rem 1.25rem 1.75rem;
    gap: 0.75rem;
  }
  .p-kvp--es .p-kvp__body,
  .p-kvp--corp .p-kvp__body {
    padding: 1.5rem 1.25rem;
    gap: 0.5rem;
  }
  .p-kvp--es .p-kvp__body { padding-top: 1.5rem; }

  .p-kvp__label { font-size: 1.25rem; }
  .p-kvp__caption { font-size: 0.875rem; }
  .p-kvp__title { font-size: 1.5rem; }
  .p-kvp--es .p-kvp__title,
  .p-kvp--corp .p-kvp__title { font-size: 1.125rem; }
}

/* --------------------------------------------------------------------------
   ホバー：選んでいないパネルを暗転させる（2026-09-09 追加）

   グループにマウスが乗ったら3枚すべてに白い幕をかけ、
   いま乗っているパネルだけ幕を外す、という書き方。
   マウスのある環境に限定しているので、スマホで常時暗転することはない。
   -------------------------------------------------------------------------- */
.p-kv-panels .p-kvp::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

@media (hover: hover) {
  .p-kv-panels:hover .p-kvp::after  { opacity: 0.55; }  /* 全部フェード */
  .p-kv-panels .p-kvp:hover::after  { opacity: 0; }     /* 乗った1枚だけ戻す */
}

/* キーボード操作（Tab）でも同じ見え方にする */
.p-kv-panels:focus-within .p-kvp::after   { opacity: 0.55; }
.p-kv-panels .p-kvp:focus-visible::after  { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .p-kv-panels .p-kvp::after { transition: none; }
}

/* SP：縦積みなので暗転はしない */
@media screen and (width <= 768px) {
  .p-kv-panels .p-kvp::after { display: none; }
}

/* --------------------------------------------------------------------------
   背景を <picture> でPC/SP出し分けにしたことによる補正 ── 2026-09-11

   デザイナー入稿の文字なし背景を当てた。
     PC : kv_*_bg.jpg      1920x1440 / 960x720（3分割グリッドの比率）
     SP : kv_*_bg-sp.jpg   1536x1500 / 1536x549（縦積みの比率）

   <picture> が img の親に挟まるので、高さを通すために block 指定が要る。
   -------------------------------------------------------------------------- */
.p-kvp__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   入稿デザイン反映 ── 2026-09-11
   --------------------------------------------------------------------------
   デザイナーから「文字なし背景」が届いたため、仮置き画像用だった
   濃紺オーバーレイ＋全パネル白文字 の作りを、実際の絵に合わせて組み直す。

     MA           明るい水色背景  → オーバーレイ無し／文字は濃色
     EVENT        明るい緑背景    → オーバーレイ無し／文字は濃色
     CORPORATION  暗い写真        → 軽いオーバーレイ／文字は白（従来どおり）

   ★色はこの4つの変数だけで調整できます
   ========================================================================== */
.p-kv-panels {
  --kvp-ink: #16233a;        /* 明るいパネルの文字色 */
  --kvp-ma-band: #2f6fd0;    /* SHANON MA のラベル帯 */
  --kvp-es-band: #10a89b;    /* SHANON EVENT のラベル帯 */
  --kvp-corp-band: #2c3e5a;  /* CORPORATION のラベル帯 */
}

/* ---- オーバーレイ ---- */
.p-kvp--ma .p-kvp__bg::after,
.p-kvp--es .p-kvp__bg::after {
  background: none;
}
.p-kvp--corp .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0.5) 0%,
    rgba(0, 20, 60, 0.12) 100%
  );
}
/* ホバーで明るくなる既存の挙動も、パネルごとに打ち消す */
.p-kv-panels .p-kvp--ma:hover .p-kvp__bg::after,
.p-kv-panels .p-kvp--es:hover .p-kvp__bg::after {
  background: none;
}
.p-kv-panels .p-kvp--corp:hover .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0.38) 0%,
    rgba(0, 20, 60, 0.06) 100%
  );
}

/* ---- 文字色 ---- */
.p-kv-panels .p-kvp--ma,
.p-kv-panels .p-kvp--es {
  color: var(--kvp-ink);
}
.p-kv-panels .p-kvp--corp {
  color: #fff;
}

/* ---- ラベル帯（白文字＋色帯・右端を斜めに切る） ---- */
.p-kvp__label {
  align-self: stretch;
  width: fit-content;
  padding: 7px 34px 7px 0;
  color: #fff;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
/* 帯をパネルの端まで伸ばす（body の padding を打ち消す） */
.p-kvp--ma .p-kvp__label,
.p-kvp--es .p-kvp__label {
  margin-left: calc(-1 * max(24px, calc((100vw - 1200px) / 2)));
  padding-left: max(24px, calc((100vw - 1200px) / 2));
}
.p-kvp--es .p-kvp__label { margin-left: -40px; padding-left: 40px; }

.p-kvp--ma   .p-kvp__label { background: var(--kvp-ma-band); }
.p-kvp--es   .p-kvp__label { background: var(--kvp-es-band); }
.p-kvp--corp .p-kvp__label {
  background: var(--kvp-corp-band);
  margin-right: calc(-1 * max(24px, calc((100vw - 1200px) / 2)));
  padding: 7px max(24px, calc((100vw - 1200px) / 2)) 7px 34px;
  clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- 擬似ボタン ---- */
.p-kvp--ma .p-kvp__btn,
.p-kvp--es .p-kvp__btn {
  border-color: currentColor;
  background: rgba(255, 255, 255, 0.55);
}
.p-kv-panels .p-kvp--ma:hover .p-kvp__btn,
.p-kv-panels .p-kvp--es:hover .p-kvp__btn {
  background: var(--kvp-ink);
  color: #fff;
}

/* --------------------------------------------------------------------------
   入稿デザインに合わせた文字の置き場所 ── 2026-09-11

   背景の絵に「文字を置く余白」が決まっているため、それに合わせる。
     MA    ：製品スクショが右下にあるので、文字は左上に寄せて幅を絞る
     EVENT ：カンファレンス画面が右にあるので、幅を絞る
     CORP  ：写真の構図に合わせて右寄せ
   -------------------------------------------------------------------------- */
.p-kvp--ma .p-kvp__body {
  justify-content: flex-start;
  padding-top: 74px;
}
.p-kvp--ma .p-kvp__caption,
.p-kvp--ma .p-kvp__title,
.p-kvp--ma .p-kvp__price,
.p-kvp--ma .p-kvp__btn {
  max-width: 62%;
}

.p-kvp--es .p-kvp__title,
.p-kvp--es .p-kvp__caption {
  max-width: 62%;
}

.p-kvp--corp .p-kvp__body {
  align-items: flex-end;
  text-align: right;
}
.p-kvp--corp .p-kvp__label {
  align-self: flex-end;
}

/* SPは背景が縦積み用の絵に変わるので、幅の制限と右寄せは解除する */
@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__body { padding-top: 4.5rem; }
  .p-kvp--ma .p-kvp__caption,
  .p-kvp--ma .p-kvp__title,
  .p-kvp--ma .p-kvp__price,
  .p-kvp--ma .p-kvp__btn,
  .p-kvp--es .p-kvp__title,
  .p-kvp--es .p-kvp__caption { max-width: none; }
  .p-kvp--corp .p-kvp__body { align-items: flex-start; text-align: left; }
  .p-kvp--corp .p-kvp__label { align-self: flex-start; }
}

/* --------------------------------------------------------------------------
   MAパネル：コピーを sample_3（/ma/ 大改修＝正）に合わせたことによる追加 ── 2026-09-11
   -------------------------------------------------------------------------- */

/* ラベル帯と価格リボンを1行に並べる */
.p-kvp--ma .p-kvp__head {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  align-self: stretch;
}

/* 価格リボン（デザイナー入稿の透過PNG） */
.p-kvp--ma .p-kvp__price {
  flex: 0 0 auto;
}
.p-kvp--ma .p-kvp__price img {
  display: block;
  width: clamp(120px, 12vw, 186px);
  height: auto;
}

/* マーカー：sample_3 と同じオレンジの実線 */
.p-kvp__marker {
  text-decoration: underline;
  text-decoration-color: #ff4a11;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}

/* note文（注釈サイズ・グレー） */
.p-kvp__note {
  font-size: 12.5px;
  line-height: 1.9;
  letter-spacing: 0.02em;
  color: #6c7a90;
  max-width: 62%;
}

@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__price img { width: clamp(110px, 30vw, 160px); }
  .p-kvp__marker { text-decoration-thickness: 2.5px; text-underline-offset: 4px; }
  .p-kvp__note { font-size: 12px; line-height: 1.8; max-width: none; }
}

/* MAパネル：コピーが長くなったので見出しのサイズを詰める（2026-09-11） */
.p-kvp--ma .p-kvp__title {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.45;
}
@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__title { font-size: 1.375rem; }
}

/* --------------------------------------------------------------------------
   MAパネル：文字ブロックを背景の「余白ゾーン」に収める ── 2026-09-11

   入稿背景(1920x1440)は、製品スクショが およそ 縦46% / 横38% より右下にある。
   文字はその手前（上側）に収める必要があるため、サイズと余白を詰めている。
   -------------------------------------------------------------------------- */
.p-kvp--ma .p-kvp__body {
  padding-top: 58px;
  gap: 10px;
}
.p-kvp--ma .p-kvp__title {
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.45;
  max-width: 72%;
}
.p-kvp--ma .p-kvp__caption { max-width: 72%; }
.p-kvp--ma .p-kvp__note {
  font-size: 12px;
  line-height: 1.8;
  max-width: 64%;
}
.p-kvp--ma .p-kvp__btn { margin-top: 2px; }

@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__body { padding-top: 4.5rem; gap: 0.75rem; }
  .p-kvp--ma .p-kvp__title { font-size: 1.375rem; max-width: none; }
  .p-kvp--ma .p-kvp__caption { max-width: none; }
  .p-kvp--ma .p-kvp__note { max-width: none; }
}

/* --------------------------------------------------------------------------
   h1 の設置 ── 2026-09-11

   3分割パネル化した時点で、本番TOPにあった
     <h1>最先端のやりたいマーケティングを、誰でも成果がでるカタチに</h1>
   が span に置き換わり、ページから h1 が消えていた。
   CORPORATIONパネルの見出しを h1 に戻す（A案）。
   会社と事業がわかる補足を、画面に出さない形で同じ h1 内に足す（C案）。
   -------------------------------------------------------------------------- */

/* h1 はブラウザ既定の余白・サイズを持つので打ち消す */
.p-kv-panels h1.p-kvp__title {
  margin: 0;
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 700;
  line-height: 1.5;
}

/* 画面に出さないテキスト（読み上げと検索エンジンには届く） */
.p-kvp__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   【2026-09-14】文言を本番TOPに戻し、「資料フォームへ」を復元
   --------------------------------------------------------------------------
   パネル全体を <a> で包む作りだと、中にボタン（＝別のリンク）を置けない。
   そこで透明なオーバーレイリンクを1枚敷き、ボタンだけその上に重ねる。

     .p-kvp__overlay  パネル全体を覆う透明リンク（サービスサイトへ／私たちについて）
     .p-kvp__body     その下（文字は見えるが、クリックはオーバーレイが拾う）
     .p-kvp__btn--accent  オーバーレイより上（資料フォームへ）
   ========================================================================== */

.p-kvp__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.p-kv-panels .p-kvp__body {
  position: relative;
  z-index: 1;
}

/* ボタンの並び */
.p-kvp__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* 資料フォームへ（本番TOPと同じオレンジ） */
.p-kv-panels .p-kvp__btn--accent {
  position: relative;
  z-index: 3;
  border-color: #ff4a11;
  background: #ff4a11;
  color: #fff;
}
.p-kv-panels .p-kvp__btn--accent:hover {
  background: #e03d08;
  border-color: #e03d08;
  color: #fff;
}

/* パネルは <a> から <div> になったので、フォーカス表示を中のリンクで受ける */
.p-kv-panels .p-kvp:focus-within {
  outline: 3px solid #f39800;
  outline-offset: -3px;
}
.p-kv-panels .p-kvp:focus-within .p-kvp__bg img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   文言が変わったことによる文字サイズの調整
   -------------------------------------------------------------------------- */

/* MA：見出しが短くなったので大きく戻す */
.p-kvp--ma .p-kvp__title {
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.4;
  max-width: 72%;
}

/* EVENT・CORPORATION：3行の見出し＋説明文が入るので詰める */
.p-kvp--es .p-kvp__title,
.p-kvp--corp .p-kvp__title {
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.5;
}
.p-kvp--es .p-kvp__caption,
.p-kvp--corp .p-kvp__caption {
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.7;
  max-width: 100%;
}
.p-kvp--es .p-kvp__body,
.p-kvp--corp .p-kvp__body {
  gap: 7px;
}
.p-kvp--es .p-kvp__btn,
.p-kvp--corp .p-kvp__btn {
  padding: 8px 16px;
  font-size: 12.5px;
}

@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__title { font-size: 1.5rem; max-width: none; }
  .p-kvp--es .p-kvp__title,
  .p-kvp--corp .p-kvp__title { font-size: 1.125rem; }
  .p-kvp--es .p-kvp__caption,
  .p-kvp--corp .p-kvp__caption { font-size: 0.8125rem; }
}

/* --------------------------------------------------------------------------
   折り返しの調整 ── 2026-09-14

   ・EVENT「セミオーダーの柔軟性と」が「柔軟／性と」で割れていた
     → 以前の入稿画像合わせで入れた max-width 62% が効きすぎていたので解除。
       右の余白(120px)が既にスクショを避ける役目を果たしている。
   ・CORPORATION の説明文が「ます。」だけ次行に落ちていた → 文字を小さく
   -------------------------------------------------------------------------- */
.p-kvp--es .p-kvp__title,
.p-kvp--es .p-kvp__caption {
  max-width: none;
}
.p-kvp--es .p-kvp__title {
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.55;
}
.p-kvp--corp .p-kvp__title {
  font-size: clamp(16px, 1.45vw, 21px);
  line-height: 1.55;
}
.p-kvp--corp .p-kvp__caption {
  font-size: clamp(10.5px, 0.9vw, 12.5px);
  line-height: 1.7;
}

/* 右2枚は縦に余裕が無いので、要素間をさらに詰める */
.p-kvp--es .p-kvp__body,
.p-kvp--corp .p-kvp__body {
  gap: 6px;
  padding-top: 22px;
  padding-bottom: 22px;
}
.p-kvp--es .p-kvp__actions,
.p-kvp--corp .p-kvp__actions {
  margin-top: 2px;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   【修正 2026-09-14】資料フォームへボタンがオーバーレイに塞がれていた

   .p-kvp__body に z-index:1 が付いていたため、body が独立した重なり順の
   グループを作ってしまい、中のボタンに z-index:3 を付けても
   「body(1) < overlay(2)」の関係が優先されて、クリックを拾えなかった。
   body の z-index を auto に戻し、ボタンを直接オーバーレイの上に出す。
   -------------------------------------------------------------------------- */
.p-kv-panels .p-kvp__body {
  position: relative;
  z-index: auto;
}
.p-kv-panels .p-kvp__actions {
  position: relative;
  z-index: 3;
}
.p-kv-panels .p-kvp__btn--accent {
  position: relative;
  z-index: 4;
}

/* --------------------------------------------------------------------------
   【修正 2026-09-14】MAの「サービスサイトへ」が縦に潰れていた

   背景の余白ゾーンに文字を収めるために入れた max-width(%) が、
   文章だけでなくボタンにも掛かっていた。
   ボタンは flex の中にあるため、% 指定が親の幅と循環して極端に細くなる。
   ボタンには幅制限を掛けない。
   -------------------------------------------------------------------------- */
.p-kv-panels .p-kvp__btn {
  max-width: none;
  white-space: nowrap;
}
.p-kv-panels .p-kvp__actions {
  max-width: none;
  width: auto;
}

/* ==========================================================================
   【2026-09-14 その2】
   ② 製品名をさらに拡大
   ④ CORPORATION：オーバーレイの向きが逆だった問題を修正
   ========================================================================== */

/* ---- ② 製品名（ラベル帯）をさらに大きく ---- */
.p-kvp--ma .p-kvp__label {
  font-size: clamp(28px, 2.5vw, 40px);
}
.p-kvp--es .p-kvp__label,
.p-kvp--corp .p-kvp__label {
  font-size: clamp(22px, 1.9vw, 29px);
}

/* ---- ④ CORPORATION の可読性 ----
   背景は「左＝人物／右＝ダッシュボード／中央に白いくの字のライン」。
   これまでのオーバーレイは左が濃く右が薄かったため、
   右寄せにした文字がいちばん明るい場所に乗って読みにくくなっていた。
   向きを反転し、左（人物）は素のまま見せ、右だけ落とす。            */
.p-kvp--corp .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0) 0%,
    rgba(0, 20, 60, 0.3) 38%,
    rgba(0, 20, 60, 0.76) 100%
  );
}
.p-kv-panels .p-kvp--corp:hover .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0) 0%,
    rgba(0, 20, 60, 0.22) 38%,
    rgba(0, 20, 60, 0.66) 100%
  );
}

/* 文字ブロックを下寄せして、中央の白いラインを避ける */
.p-kvp--corp .p-kvp__body {
  justify-content: flex-end;
  padding-bottom: 26px;
}

@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__label { font-size: 1.5rem; }
  .p-kvp--es .p-kvp__label,
  .p-kvp--corp .p-kvp__label { font-size: 1.25rem; }
  /* SPは背景が縦積み用の絵に変わるので、下寄せは解除 */
  .p-kvp--corp .p-kvp__body {
    justify-content: center;
    padding-bottom: 1.5rem;
  }
}

/* MAパネル：sample_3 の長いコピーに合わせて見出しを詰める（2026-09-14）
   「1人の履歴につなぎ、次の商談へ。」が「へ。」だけ3行目に落ちていた */
.p-kvp--ma .p-kvp__title {
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.45;
  max-width: 78%;
}
.p-kvp--ma .p-kvp__caption { max-width: 78%; }
.p-kvp--ma .p-kvp__note    { max-width: 70%; }

@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__title { font-size: 1.375rem; max-width: none; }
  .p-kvp--ma .p-kvp__caption,
  .p-kvp--ma .p-kvp__note { max-width: none; }
}

/* --------------------------------------------------------------------------
   CORPORATION：文字を右へ寄せ、人物の表情を出す ── 2026-09-14

   背景は左に人物、右にダッシュボード。
   これまでは右寄せにしていても文字ブロックが左へ伸びてきて、
   人物の顔を覆っていた。
   padding-left で「左半分には文字を置かない」と決めてしまう。
   -------------------------------------------------------------------------- */
.p-kvp--corp .p-kvp__body {
  padding-left: 46%;          /* 左46%は人物のための領域。文字は入れない */
  padding-right: 30px;        /* 右端まで寄せる */
  align-items: flex-end;
  text-align: right;
}
.p-kvp--corp .p-kvp__label {
  align-self: flex-end;
}
/* 帯は右端まで伸ばす */
.p-kvp--corp .p-kvp__label {
  margin-right: -30px;
  padding-right: 30px;
}

/* 人物側（左）は素の写真が見えるよう、暗幕を右だけに寄せる */
.p-kvp--corp .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0) 0%,
    rgba(0, 20, 60, 0) 34%,
    rgba(0, 20, 60, 0.42) 58%,
    rgba(0, 20, 60, 0.8) 100%
  );
}
.p-kv-panels .p-kvp--corp:hover .p-kvp__bg::after {
  background: linear-gradient(
    100deg,
    rgba(0, 20, 60, 0) 0%,
    rgba(0, 20, 60, 0) 34%,
    rgba(0, 20, 60, 0.32) 58%,
    rgba(0, 20, 60, 0.7) 100%
  );
}

@media screen and (max-width: 768px) {
  /* SPは背景が縦積み用の絵に変わるので、左右の割り付けは解除 */
  .p-kvp--corp .p-kvp__body {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    align-items: flex-start;
    text-align: left;
  }
  .p-kvp--corp .p-kvp__label {
    align-self: flex-start;
    margin-right: 0;
    padding-right: 34px;
  }
}

/* CORPORATION：右に寄せた結果、幅が足りず語中で改行していたので緩める（2026-09-14）
   人物の顔はおよそ左10〜35%にあるので、40%まで文字を寄せても顔にはかからない */
.p-kvp--corp .p-kvp__body {
  padding-left: 40%;
}
.p-kvp--corp .p-kvp__title {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.55;
}
.p-kvp--corp .p-kvp__caption {
  font-size: clamp(10px, 0.85vw, 11.5px);
  line-height: 1.75;
}

@media screen and (max-width: 768px) {
  .p-kvp--corp .p-kvp__body { padding-left: 1.25rem; }
  .p-kvp--corp .p-kvp__title { font-size: 1.125rem; }
  .p-kvp--corp .p-kvp__caption { font-size: 0.8125rem; }
}

/* CORPORATION：あと1文字はみ出していたので、もう少しだけ右の領域を広げる（2026-09-14）
   人物の顔は背景画像の左10〜28%なので、34%まで寄せても顔にはかからない */
.p-kvp--corp .p-kvp__body {
  padding-left: 34%;
}
.p-kvp--corp .p-kvp__title {
  font-size: clamp(15px, 1.3vw, 18px);
}
.p-kvp--corp .p-kvp__caption {
  font-size: clamp(10px, 0.85vw, 11.5px);
  text-wrap: pretty;
}

@media screen and (max-width: 768px) {
  .p-kvp--corp .p-kvp__body { padding-left: 1.25rem; }
}

/* ==========================================================================
   CTAの強弱づけ／価格リボンのCSS化 ── 2026-09-14
   --------------------------------------------------------------------------
   指摘：
     ・MAのボタンをもっと目立たせ、他は控えめでよい
     ・「サービスサイトへ」より「SHANON MAの詳細をみる」の方がわかりやすい
     ・月額6万円はもう少しべた塗りでよい
   ========================================================================== */

/* ---- MAのボタン：主役。青のべた塗り ---- */
.p-kv-panels .p-kvp__btn--primary {
  padding: 15px 30px;
  border: 0;
  border-radius: 3px;
  background: #00319b;
  color: #fff;
  font-size: 15px;
  box-shadow: 0 3px 10px -3px rgba(0, 49, 155, 0.55);
}
.p-kv-panels .p-kvp--ma:hover .p-kvp__btn--primary {
  background: #002679;
  color: #fff;
}
.p-kv-panels .p-kvp__btn--primary::after {
  width: 18px;
  background: #fff;
}
.p-kv-panels .p-kvp--ma:hover .p-kvp__btn--primary::after { width: 26px; }

/* ---- EVENT・CORPORATIONのボタン：脇役。枠線だけの控えめな見た目 ---- */
.p-kv-panels .p-kvp__btn--quiet {
  padding: 8px 16px;
  border-width: 1px;
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
}
.p-kvp--es .p-kvp__btn--quiet {
  border-color: rgba(22, 35, 58, 0.3);
  color: #16233a;
}
.p-kv-panels .p-kvp--es:hover .p-kvp__btn--quiet {
  border-color: rgba(22, 35, 58, 0.6);
  background: transparent;
  color: #16233a;
}
.p-kvp--corp .p-kvp__btn--quiet {
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
}
.p-kv-panels .p-kvp--corp:hover .p-kvp__btn--quiet {
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #fff;
}

/* ---- 価格リボン：画像をやめてCSSのべた塗りに ----
   テキストなので検索エンジンにも読まれる（画像のaltより強い）        */
.p-kvp--ma .p-kvp__price {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 9px 22px 10px;
  border-radius: 4px;
  background: #f39800;          /* べた塗り。グラデーションは使わない */
  color: #fff;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 3px 10px -4px rgba(243, 152, 0, 0.7);
}
.p-kvp__price-label {
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 700;
}
.p-kvp__price-num {
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.p-kvp__price-unit {
  font-size: clamp(14px, 1.2vw, 19px);
  font-weight: 700;
}
.p-kvp__price-tax {
  margin-left: 2px;
  font-size: clamp(10px, 0.8vw, 12px);
  font-weight: 500;
}

@media screen and (max-width: 768px) {
  .p-kv-panels .p-kvp__btn--primary {
    padding: 0.875rem 1.375rem;
    font-size: 0.9375rem;
  }
  .p-kv-panels .p-kvp__btn--quiet {
    padding: 0.5rem 0.875rem;
    font-size: 0.75rem;
  }
  .p-kvp--ma .p-kvp__price { padding: 0.5rem 1rem 0.5625rem; }
  .p-kvp__price-num { font-size: 1.75rem; }
}


/* ==========================================================================
   【2026-09-16】FVのCTAをサイト共通コンポーネント .c-button に戻す
   --------------------------------------------------------------------------
   これまでFVのボタンだけが一点物（#00319B・角丸3px・高さ45px）で、
   ページ下部の「お知らせ一覧へ」「他のサービスを確認する」と形も色も
   違っていた。サイト標準は .c-button（角丸ピル・330x80px・16px/500）。

   HTMLを .c-button の形に差し替えたので、ボタンの見た目のCSSは
   main2.css 側が持つ。ここに書くのは、FV特有の事情による調整だけ。

     MA    : .c-button .c-button--accent          （#F39800／案A）
     EVENT : .c-button--xs .c-button--outline     （206x50px）
     CORP  : .c-button--xs .c-button--white-outline

   ※案Bにするときは index.html の MA から c-button--accent を外すだけ。
     色が #004EA2 になり、下の「価格バッジ」の調整も不要になる。
   ========================================================================== */

/* ---- 重なり順：オーバーレイ(z-index:2)より上にボタンを出す ----
   .p-kvp__actions に z-index:3 が既に付いているので、その中に入れておけば
   クリックを拾える。ここでは念のため .c-button 自身にも持たせる。        */
.p-kv-panels .p-kvp__actions .c-button {
  position: relative;
  z-index: 3;
}

/* ---- ラベルを折り返さない ----
   .c-button は inline-flex なので、min-width を超える分は自動で広がる。   */
.p-kv-panels .p-kvp__actions .c-button__main {
  white-space: nowrap;
}

/* ---- ボタンが大きくなった分、上に少し間隔を足す ---- */
.p-kv-panels .p-kvp--ma .p-kvp__actions { margin-top: 10px; }
.p-kv-panels .p-kvp--es .p-kvp__actions,
.p-kv-panels .p-kvp--corp .p-kvp__actions { margin-top: 6px; }

/* ---- 価格バッジ：ボタンと同じオレンジのべた塗りが2つ並ぶのを避ける ----
   案A（オレンジのCTA）を採る場合、いちばん目立つ色はCTAに預ける。
   数字だけオレンジで残すので「6万円」の視認性は落ちない。
   ★案Bにするならこのブロックごと削除して、べた塗りのままでよい。        */
.p-kvp--ma .p-kvp__price {
  padding: 8px 18px 9px;
  border: 1px solid rgba(22, 35, 58, 0.16);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: #16233a;
  box-shadow: none;
}
.p-kvp__price-label,
.p-kvp__price-unit { color: #16233a; }
.p-kvp__price-num  { color: #e08600; }
.p-kvp__price-tax  { color: #4a5770; }

/* ---- SP：ボタンは全幅に（.c-button の min-width 330px を解除） ---- */
@media screen and (max-width: 768px) {
  /* MAだけ全幅。.p-kvp__actions は中身なりの幅になるので、
     まず入れ物側を親いっぱいに伸ばしてから width:100% を効かせる */
  .p-kv-panels .p-kvp--ma .p-kvp__actions {
    align-self: stretch;
    width: 100%;
  }
  .p-kv-panels .p-kvp__actions .c-button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
  }
  .p-kv-panels .p-kvp--es .p-kvp__actions .c-button,
  .p-kv-panels .p-kvp--corp .p-kvp__actions .c-button {
    width: auto;
    min-height: 48px;
  }
  .p-kvp--ma .p-kvp__price { padding: 0.5rem 0.875rem 0.5625rem; }
}


/* ==========================================================================
   【2026-09-16】導線改善案の反映（F3 / H1 / H2 / H3 / H4）
   --------------------------------------------------------------------------
   F3 FVのCTAと製品スクショの間に余白
   H1 SHANON MA をグローバルナビの第1階層へ        （HTMLのみ）
   H2 ヘッダーの折り返しを 768px → 1200px に
      ＋「シャノンとは」を企業情報に統合、採用情報をヘッダーから外す（HTMLのみ）
   H3 常設ボタンを「資料請求」に。お問い合わせはテキストリンクへ
   H4 サービス▾ から SHANON SFA を外す              （HTMLのみ）

   ★H2について
     本来は main2.css にある @media screen and (width <= 768px) のうち
     ヘッダー関連の14行を 1200px に書き換えるだけで済みます（1行の値変更）。
     ここではテストページ単体で見えるように、769〜1200px の帯へ
     同じ内容を写して再現しています。本番反映時は main2.css 側で直してください。
   ========================================================================== */

/* ---- F3：80pxのボタンが独立して見えるよう余白を確保 ---- */
.p-kvp--ma .p-kvp__body {
  gap: 18px;
  padding-bottom: 104px;
}

/* ---- H3：ヘッダーの常設ボタン ----
   これまでは .l-header-button という一点物（角丸0・176x84px）だった。
   サイト共通の .c-button--xs（ピル）に寄せ、文言を資料請求に変更。
   お問い合わせはテキストリンクとして残す（需要が顕在化した人は自分で探す）  */
.l-header .l-header__buttons {
  align-items: center;
  gap: 22px;
  padding-right: 24px;
}
.l-header .l-header__button-item {
  flex: 0 0 auto;
}
.l-header__contact-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  color: #16233a;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.l-header__contact-link:hover { color: #004ea2; }

/* SPドロワー下部：資料請求（オレンジ塗り）＋お問い合わせ（枠線） */
.c-sp-menu-button--outline {
  color: #004ea2;
  background-color: transparent;
  border: 1px solid #004ea2;
}

/* ==========================================================================
   H2｜769〜1240px でもドロワー（ハンバーガー）に切り替える
   --------------------------------------------------------------------------
   PCナビが必要とする幅は約873px（項目整理後）。いっぽう切替は768pxの1点しか
   無いため、769〜1023pxの帯では現状でも必ず崩れている（既存バグ）。
   ここは main2.css の (width <= 768px) にあるヘッダー関連の記述を
   そのまま写したもの（中の記述は未変更）。
   【2026-09-24】上限を 1200px→1240px に変更。body{min-width:1240px} のため
   viewport 1201〜1240px では本体が1240pxになり、お問い合わせボタンが画面外に
   切れる（既バグ）。1240pxまでハンバーガー化して解消。1241px以上はPCナビが
   横スクロールなしで収まることを実機計測で確認。
   ========================================================================== */
@media screen and (min-width: 769px) and (max-width: 1240px) {

  /* --- main2.css の (width <= 768px) から写した分 --- */
  .l-header ~ .l-main { padding-top: 4.5rem; }
  .l-header .l-header__bar { height: 4.5rem; }
  .l-header .l-header__bar .c-container { padding: 0 1.25rem; }
  .l-header .l-header__drawer { display: none; }
  .l-header .l-header__nav-link { display: none; }
  .l-header .l-header__nav-link--external { display: none; }
  .l-header .l-header__buttons { display: none; }
  .l-header .l-header__additional-items { display: none; }
  .l-drawer .l-drawer__container { width: 19.5rem; }
  .l-drawer .l-drawer__close-button {
    top: 1rem; right: 1rem; width: 2rem; height: 2rem; border-width: 0.0625rem;
  }
  .l-drawer .l-drawer__close-button::before,
  .l-drawer .l-drawer__close-button::after {
    top: calc(50% - 0.0625rem); left: calc(50% - 0.5rem);
    width: 1rem; height: 0.125rem;
  }

  /* --- この帯だけの調整 --- */

  /* ハンバーガーを出す。.pc-none が !important なので同じ強さで戻す */
  .c-menu-button.pc-none { display: flex !important; }

  /* ラベルは 100vw 基準の計算式なので、この幅だと大きくなりすぎる。SPの実寸で固定 */
  .c-menu-button .c-menu-button__menu-label { height: 13px; }
  .c-menu-button .c-menu-button__label { font-size: 13px; }

  /* スクロールで隠れるときの移動量を、縮んだヘッダーの高さに合わせる */
  .l-header.is_hidden .l-header__bar,
  .l-header.is_hidden .l-header__drawer { transform: translateY(-4.5rem); }
}


/* ==========================================================================
   【2026-09-17】レビュー指摘の反映（①〜④）
   ========================================================================== */

/* ---- ① ヘッダーの常設ボタン：文言は「お問い合わせ」に戻し、色は指定の #063165 ----
   .c-button は --color という変数で色を持っているので、そこだけ差し替える。
   形（ピル・サイズ・ホバー演出）はサイト共通のまま。                          */
.l-header .l-header__buttons .c-button--header {
  --color: #063165;
}

/* 矢印の丸囲みは白地。中の矢印がボタン色になる（.c-button の既定の挙動）  */
.l-header .l-header__buttons .c-button--header .c-button__icon--after .c-icon {
  background-color: #063165;
}

/* メールアイコンの仕切り線が濃すぎるので少し落とす */
.l-header .l-header__buttons .c-button--header .c-button__icon--before {
  width: 30px;
  height: 22px;
  border-right-color: rgba(255, 255, 255, 0.45);
}

/* 前回入れた「お問い合わせ」テキストリンクは役目が終わったので消す
   （ボタン自体がお問い合わせに戻ったため、並べると重複になる）            */
.l-header__contact-link { display: none; }

/* ---- ② FVコピーの赤い下線をやめる ----
   .p-kvp__marker は使わなくなったが、定義が残っていても無害なので
   打ち消しだけ入れておく（sample_3 側では引き続き使っている）             */
.p-kv-panels .p-kvp__marker {
  text-decoration: none;
}

/* ---- ④ 中段「サービス」のパネルタイトルをFVと同じ書体に ----
   main2.css が .p-top-service .p-top-service__block-title に
   Roboto＋italic を当てているので、同じ強さで打ち消す。
   FVの製品名（.p-kvp__label）は本文書体＋太字＋字間0.06em。               */
.p-top-service .p-top-service__block-title {
  font-family: inherit;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}


/* ==========================================================================
   ⑤ 帯バナー（トライアル受付中）を画像からHTMLへ
   --------------------------------------------------------------------------
   元画像 trial2026.jpg は 780x180。その寸法をそのまま比率で再現する。

     背景      横方向のグラデーション（両端 #004EA1、中央 #709ECF）をCSSで
     ノートPC  元画像の左端 251px を切り出して画像のまま（幅の32.2%）
     文言      テキスト

   幅が変わってもとかないよう、文字サイズは cqw（バナー幅の％）で指定している。
   元画像の実測値：1行目30px / 2行目33px / ボタン高40px。780で割って％にしてある。
   ========================================================================== */

.trialCP .p-trial {
  container-type: inline-size;   /* cqw の基準をこのバナー自身にする */
  position: relative;
  display: flex;
  align-items: stretch;
  aspect-ratio: 780 / 180;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #004ea1 0%,
    #004ea1 8%,
    #709ecf 53%,
    #004ea1 100%
  );
}

/* ── 左：ノートPCの写真（切り出し画像） ── */
.trialCP .p-trial__visual {
  flex: 0 0 32.18%;              /* 251 / 780 */
}
.trialCP .p-trial__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 右：文言とボタン ── */
.trialCP .p-trial__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.54cqw;                  /* 12 / 780 */
  padding-right: 2.6cqw;
  color: #fff;
  text-align: center;
}
.trialCP .p-trial__lead {
  font-size: 3.85cqw;            /* 30 / 780 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}
.trialCP .p-trial__title {
  font-size: 4.23cqw;            /* 33 / 780 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ボタン：白のピル、文字はブランドの青 */
.trialCP .p-trial__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-height: 5.13cqw;           /* 40 / 780 */
  padding: 0.6cqw 2cqw;
  color: #004ea1;
  background: #fff;
  border-radius: 100vmax;
  font-size: 2.82cqw;            /* 22 / 780 */
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}

/* ホバー：元は画像全体を opacity .8 にしていた。
   テキストが薄くなると読みづらいので、ボタン側だけ反応させる */
.trialCP a:hover { opacity: 1; }
.trialCP .p-trial:hover .p-trial__btn {
  color: #002f62;
  background: #e9f2fb;
  transition: 0.2s;
}
.trialCP .p-trial__btn { transition: 0.2s; }

/* SP：元画像の比率のままだと文字が小さすぎるので、縦に伸ばして読める大きさに */
@media screen and (max-width: 768px) {
  .trialCP .p-trial {
    aspect-ratio: auto;
    align-items: center;
    min-height: 88px;
  }
  .trialCP .p-trial__visual { flex-basis: 30%; }
  .trialCP .p-trial__body {
    gap: 2.2cqw;
    padding: 3.4cqw 3.4cqw 3.4cqw 0;
  }
  .trialCP .p-trial__lead  { font-size: 4.4cqw; }
  .trialCP .p-trial__title { font-size: 5cqw; }
  .trialCP .p-trial__btn   { min-height: 8.6cqw; font-size: 4cqw; }
}


/* ==========================================================================
   【2026-09-18】採用案①：価格を背景になじませる（囲みなし）
   --------------------------------------------------------------------------
   shanon-ma-pattern-01 の style.css を、既存の .p-kvp__price* に接続したもの。
   同じ役割のクラスが既にあるため、shanon-ma-price* を並存させると
   2つの体系が残る。HTMLは変更せず、見た目だけを入れ替えている。

     白地・枠線・角丸・影  → 全部外す（背景透過）
     文字                  → 濃紺 #0c1d3c
     「6」だけ              → ブランドの青 #3370d7
     サイズ                → 月額14 / 6は34 / 万円〜18 / （税抜）10（1440px時）
     ロゴ帯との間隔        → 16px

   ※ロゴ帯、見出し、CTA、商品画像、右パネルは一切触っていない。
   ========================================================================== */

/* 帯と価格の間隔を見本の16pxに。
   幅が足りないときは価格を「一つのまとまりのまま」次の行へ送る */
.p-kvp--ma .p-kvp__head {
  flex-wrap: wrap;
  gap: 10px 16px;
}

.p-kvp--ma .p-kvp__price {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #0c1d3c;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;      /* 価格文字列の途中では折り返さない */
}

.p-kvp--ma .p-kvp__price-label {
  margin-right: 5px;
  font-size: clamp(12px, 0.98vw, 14px);
  font-weight: 700;
  color: #0c1d3c;
}
.p-kvp--ma .p-kvp__price-num {
  font-size: clamp(26px, 2.36vw, 34px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  /* ロゴ帯と同じ青を参照する。帯の色を変えれば数字もついてくるので、
     「数字はブランドの青で統一」がこの先も自動で保たれる。
     （当初の指定は #3370d7 だったが、帯の #2f6fd0 に揃える判断） */
  color: var(--kvp-ma-band, #2f6fd0);
}
.p-kvp--ma .p-kvp__price-unit {
  font-size: clamp(14px, 1.25vw, 18px);
  font-weight: 700;
  color: #0c1d3c;
}
.p-kvp--ma .p-kvp__price-tax {
  margin-left: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #0c1d3c;
}

/* SP：古い世代のパディング指定が @media 内に残っているので打ち消す */
@media screen and (max-width: 768px) {
  .p-kvp--ma .p-kvp__head { gap: 8px 14px; }
  .p-kvp--ma .p-kvp__price { padding: 0; }
  .p-kvp--ma .p-kvp__price-num { font-size: clamp(24px, 7.4vw, 30px); }
}