/* ==========================================================================
   page-pricing.css
   料金ページ（/pricing/）専用の追加スタイル。
   header.php で is_page('pricing') の時だけ読み込む（他ページ非影響）。
   既存の共通 css/style.css は書き換えず、ここに料金ページ固有の調整を閉じ込める。
   本番パーツを最大限そのまま使い、装飾は最小限。html{font-size:62.5%}=1rem:10px
   ========================================================================== */

/* FV白ボックス：見出し＋CTA。見出しは特徴ページ .featureSummary-title-sub に合わせ 2.4rem/bold（SP1.5rem） */
.priceSummary-title{margin-bottom:18px;}
.priceSummary-title-main{display:block;font-size:2.4rem;font-weight:bold;line-height:1.5;margin-bottom:0;}
@media(max-width:767px){ .priceSummary-title-main{font-size:1.5rem;line-height:1.5;} }
/* （旧FVリード用。本文側でリードを廃止したため未使用だが、将来用に残置） */
.fvHi{color:#3E3EE1;font-weight:bold;}
.priceSummary-text.is-lead{border-bottom:none;padding-bottom:0;max-width:680px;margin:0 auto;line-height:3.6rem;}
@media(max-width:767px){ .priceSummary-text.is-lead{line-height:2rem;} }

/* CTAブロック：吹き出し＋「無料」バッジ＋大型ボタン＋余白で孤立（FV・中間CTA共通で使用） */
.fvBtns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px;}
.fvCtaUnit{display:flex;flex-direction:column;align-items:center;}
/* 吹き出し（便益）：白地＋影でオレンジボタンに重ねる。文字は一部オレンジ強調／クリックは透過 */
.fvBubble{position:relative;z-index:2;pointer-events:none;display:inline-block;background:#fff;color:#08061A;font-size:1.55rem;font-weight:700;padding:11px 28px;border-radius:999px;margin-bottom:-13px;letter-spacing:.02em;box-shadow:0 4px 14px rgba(8,6,26,0.14);transition:all 0.2s;}
.fvBubble b{color:#F57B3D;font-weight:700;}
.fvBubble::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);width:0;height:0;border:9px solid transparent;border-top-color:#fff;border-bottom:0;}
/* ボタン本体：矢印なし・文字23px・高さ72px・外側に白枠＋ドロップシャドウ */
.fvBtns .btn-flat{min-width:380px;height:72px;font-size:2.3rem;font-weight:700;padding:10px 36px;border:2px solid #fff;box-shadow:0 4px 14px rgba(245,123,61,0.28);display:inline-flex;align-items:center;justify-content:center;}
/* 「無料」バッジ：オレンジボタン上に白ピル（hover時はボタンが白反転するため色も反転） */
.fvBadge{display:inline-block;background:#fff;color:#F57B3D;font-size:1.3rem;font-weight:800;padding:3px 13px;border-radius:999px;margin-right:13px;line-height:1.3;}
@media(hover:hover){
  .fvBtns .btn-flat:hover{transform:translateY(-2px);border-color:#F57B3D;box-shadow:0 8px 20px rgba(245,123,61,0.38);}
  .fvBtns .btn-flat:hover .fvBadge{background:#F57B3D;color:#fff;}
  /* ボタンホバーに吹き出しを連動：ボタンが白くなるのと逆に吹き出しはオレンジへ反転＋一緒に浮く */
  .fvCtaUnit:has(.btn-flat:hover) .fvBubble{background:#F57B3D;color:#fff;transform:translateY(-2px);box-shadow:0 7px 18px rgba(245,123,61,0.32);}
  .fvCtaUnit:has(.btn-flat:hover) .fvBubble b{color:#fff;}
  .fvCtaUnit:has(.btn-flat:hover) .fvBubble::after{border-top-color:#F57B3D;}
}
.fvCtaNote{text-align:center;font-size:1.35rem;color:#646466;margin-top:16px;}
@media(max-width:767px){
  .fvBtns .btn-flat{min-width:0;width:100%;font-size:2.0rem;}
  .fvCtaUnit{width:100%;}
}

/* 料金体系：式＋2要素を罫線で端的に整理 */
.feeFormula{font-size:2.6rem;font-weight:900;color:#08061A;text-align:center;margin-bottom:24px;line-height:1.4;}
.feeFormula .plus{color:#3E3EE1;margin:0 14px;}
.feeNote{max-width:680px;margin:0 auto;font-size:1.55rem;color:#444;line-height:1.95;text-align:center;}
@media(max-width:767px){
  .feeFormula{font-size:1.9rem;} .feeFormula .plus{margin:0 8px;}
  .feeNote{font-size:1.45rem;text-align:left;}
}
/* 比較セクションの外枠 */
.meritSec{padding:80px 5%;}
.meritSec.alt{background:#FAFAFC;}
.meritSec-inner{max-width:1100px;margin:0 auto;}
.meritSec-lead{text-align:center;color:#646466;font-size:1.6rem;line-height:1.9;margin:16px auto 0;max-width:780px;}
/* footerTrial：高さの上書きは撤去。他ページと同じ既定（572px・フォームが帯の上下にはみ出す配置）に揃える */
@media (max-width:767px){ .meritSec{padding:50px 5%;} }
/* ④ 人数課金との違い */
.diffList{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:44px auto 0;list-style:none;padding:0;}
.diffList-item{background:#fff;border-radius:12px;box-shadow:0px 7px 27px rgba(120,119,172,0.1);padding:30px 26px;font-size:1.55rem;font-weight:700;color:#08061A;line-height:1.65;}
.diffList-item small{display:block;font-size:1.3rem;font-weight:500;color:#646466;margin-top:6px;line-height:1.6;}
/* ★ 料金の仕組み */
.safeSec{background:#FAFAFC;}
.safeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:44px auto 0;}
.safeGrid-item{background:#fff;border-radius:12px;box-shadow:0px 7px 27px rgba(120,119,172,0.1);padding:34px 24px;text-align:center;}
.safeGrid-icon{width:46px;height:46px;margin:0 auto 16px;}
.safeGrid-icon svg{width:100%;height:100%;fill:#3E3EE1;}
.safeGrid-title{font-size:1.8rem;font-weight:700;color:#08061A;margin-bottom:10px;}
.safeGrid-text{font-size:1.45rem;color:#444;line-height:1.8;}
/* 2セクションとも3→2カードに削減：2カラム中央寄せ */
.diffList.diffList-2col,.safeGrid.safeGrid-2col{grid-template-columns:repeat(2,1fr);max-width:820px;margin-left:auto;margin-right:auto;}
@media(max-width:767px){
  .diffList{grid-template-columns:1fr;gap:16px;}
  .diffList-item{padding:24px 20px;}
  .safeGrid{grid-template-columns:1fr;gap:16px;}
}
/* FAQ直下CTA：本文側で廃止したため未使用（将来用に残置） */
.faqCta{text-align:center;margin-top:48px;}
.faqCta .btn-flat{min-width:340px;height:62px;font-size:1.7rem;padding:10px 32px;box-shadow:0 8px 22px rgba(245,123,61,0.3);}
.faqCta .btn-flat::after{content:"→";margin-left:12px;font-size:1.7rem;line-height:1;font-weight:bold;}
@media(hover:hover){ .faqCta .btn-flat:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(245,123,61,0.4);} }
@media(max-width:767px){ .faqCta{margin-top:36px;} .faqCta .btn-flat{min-width:0;width:100%;font-size:1.6rem;} }