/* plan.css */
/* ============================================================
   本番サイト共通CSS（https://bcart.jp/assets/css/style.css）から
   #plan-new 配下の要素に実際に効いているルールだけを自動抽出したもの。
   - 抽出方法: 本番ページ上でJSを実行し、#plan-new の子孫要素に
     Element.matches() で一致するセレクタのみを収集（Bootstrapの
     .btn/.nav-tabs 等の無関係なコンポーネントや @media print は除外済み）。
   - このファイル + plan2.css の2枚だけで、本番同等の見た目をローカル
     プレビューで再現する。plan2.css はこのベースの上に重ねる前提。
   ============================================================ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-size: 100%; vertical-align: baseline; }
ol, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0px; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
a { background-color: transparent; }
a:active, a:hover { outline: 0px; }
b, strong { font-weight: bold; }
small { font-size: 80%; }
img { border: 0px; }
svg:not(:root) { overflow: hidden; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0px; }
button { overflow: visible; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { appearance: button; cursor: pointer; }
td, th { padding: 0px; }
th { text-align: left; }

.font-s, .b-notes, ul.widget-post li .part-info .part-author, ul.widget-post li .part-info .part-date, .widget-tile .part-info .part-description, .widget-mm-entry-form .part-description, .widget-mm-entry-form .part-notice, .header .header-nav .gnav > li > a, #footer-nav ul li ul li a, #footer-info ul li, #footer-company .part-copyright, #the-home-content .part-topic .part-topic-wrap .part-icon, #the-plan .part-plan .part-body ul li, #the-post-detail .part-post-title .part-author-name, #the-post-detail .part-post-title .part-date, #the-post-detail .part-author .part-wrap .part-profile .part-name .part-name-en, #the-search-result .part-description, #the-search-result .part-url { font-size: 13px; }
.font-m, #footer-nav ul li span, #the-home-header .part-comment-wrap .part-compname, #the-plan .part-plan .part-body ul li.part-point, body { font-size: 16px; }
.font-smaller { font-size: 0.85em; }
.font-xxlarger { font-size: 2em; }
.section-m, #the-home-user-company { margin-bottom: 1.5em; }
.text-center, .widget-mm-entry-form .part-title { text-align: center; }

ol.b-list li, .b-content ol li, ul.b-list li, ul.widget-list-icon li, .b-content ul li, #the-plan .part-plan .part-body ul li { padding-top: 0.75em; padding-bottom: 0.75em; }
ol.b-list li :last-child, .b-content ol li :last-child, ul.b-list li :last-child, ul.widget-list-icon li :last-child, .b-content ul li :last-child, #the-plan .part-plan .part-body ul li :last-child { margin-bottom: 0px; }
ol.b-list.b-list-condensed li, .b-content ol li, ul.b-list.b-list-condensed li, ul.b-list-condensed.widget-list-icon li, .b-content ul.widget-list-icon li, .b-content ul li, #the-plan .part-plan .part-body ul li { padding-top: 0.375em; padding-bottom: 0.375em; }
ol.b-list.b-list-border > li, .b-content ol.b-list-border > li, ul.b-list.b-list-border > li, ul.widget-list-icon > li, .b-content ul.b-list-border > li, .b-content ul.widget-list-icon > li, #the-plan .part-plan .part-body .b-content ul > li, #the-plan .part-plan .part-body ul > li { border-bottom: 1px solid rgb(214, 214, 214); }
ol.b-list.b-list-border > li:last-child, .b-content ol.b-list-border > li:last-child, ul.b-list.b-list-border > li:last-child, ul.widget-list-icon > li:last-child, .b-content ul.b-list-border > li:last-child, .b-content ul.widget-list-icon > li:last-child, #the-plan .part-plan .part-body .b-content ul > li:last-child, #the-plan .part-plan .part-body ul > li:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }

/* ===== #the-plan プランカードの本体デザイン（本番の見た目の核） ===== */
#the-plan .part-plan .part-header { color: rgb(255, 255, 255); }
#the-plan .part-plan .part-header .part-title { text-align: center; padding: 0.5em 0px; }
#the-plan .part-plan .part-header .part-price { padding: 0.5em 0px; }
#the-plan .part-plan .part-header .part-price p { line-height: 1; margin: 0.5em 0px; }
#the-plan .part-plan .part-header .part-price .part-int { font-family: Helvetica, Arial, sans-serif; font-weight: bold; letter-spacing: 1px; }
#the-plan .part-plan.part-plan-main .part-header, #the-plan .part-plan.part-initial .part-header { background-color: rgb(0, 160, 233); }
#the-plan .part-plan.part-plan-main .part-header .part-title, #the-plan .part-plan.part-initial .part-header .part-title { background-color: rgb(4, 176, 255); }
#the-plan .part-plan.part-plan-main .part-body, #the-plan .part-plan.part-initial .part-body { border-width: medium 1px 1px; border-style: none solid solid; border-color: currentcolor rgb(0, 160, 233) rgb(0, 160, 233); border-image: none; }
#the-plan .part-plan .part-body { padding: 0.5em; }
#the-plan .part-plan .part-body ul li.part-point p { font-weight: bold; }
#the-plan .part-plan .part-body ul li h3 { text-align: center; }
#the-plan .part-plan .part-body ul li p { text-align: center; margin: 0px; }
#the-plan { overflow: hidden; }
#the-plan .part-plan { width: 14%; float: left; }
#the-plan .part-plan .part-header .part-price p, #the-plan .part-plan .part-header .part-price div { text-align: center; }
#the-plan .part-plan#the-plan-light, #the-plan .part-plan#the-plan-enterprise { margin-left: 1%; }
#the-plan .part-plan#the-plan-light .part-header, #the-plan .part-plan#the-plan-light .part-body, #the-plan .part-plan#the-plan-10 .part-header, #the-plan .part-plan#the-plan-10 .part-body, #the-plan .part-plan#the-plan-30 .part-header, #the-plan .part-plan#the-plan-30 .part-body, #the-plan .part-plan#the-plan-50 .part-header, #the-plan .part-plan#the-plan-50 .part-body, #the-plan .part-plan#the-plan-100 .part-header, #the-plan .part-plan#the-plan-100 .part-body { border-right: 1px solid rgb(255, 255, 255); }
#the-plan .part-plan#the-plan-trial .part-header, #the-plan .part-plan#the-plan-enterprise .part-header { border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; overflow: hidden; }
#the-plan .part-plan#the-plan-trial .part-body, #the-plan .part-plan#the-plan-enterprise .part-body { border-bottom-left-radius: 0.5em; border-bottom-right-radius: 0.5em; overflow: hidden; }
#the-plan .part-plan#the-plan-light .part-header { border-top-left-radius: 0.5em; overflow: hidden; }
#the-plan .part-plan#the-plan-light .part-body { border-bottom-left-radius: 0.5em; overflow: hidden; }
#the-plan .part-plan#the-plan-300 .part-header { border-top-right-radius: 0.5em; overflow: hidden; }
#the-plan .part-plan#the-plan-300 .part-body { border-bottom-right-radius: 0.5em; overflow: hidden; }

* { box-sizing: border-box; }
p { margin-bottom: 1em; line-height: 1.65; }
a:hover { text-decoration: none; }


/* ============================================================
   Bカート料金プラン用CSS（plan2.css）
   - 元 plan.css をベースに直接埋め込み版へ移植
   - 全セレクタを #plan-new でスコープ化
   - スマホ用 @media クエリは削除（親ページが width=1230 固定）
   - iframe前提のグローバル指定（body, .b-container 等）を削除
   - 【リファクタ】エンプラカードもメインと同じ構造（.part-plan-main + .d-header/.d-body）に統一し、
     高さは全カード共通CSSで固定。JSによる高さ同期処理は不要に。
   ============================================================ */

/* ===== テンプレート上書き（#plan-newスコープ外） =====
   料金プランページではテンプレート標準の以下要素を非表示にする：
   1. ページ上部のグレー帯（.part-description）
   2. デフォルトの「オプション料金」リンク（独自CTAボタンで代替済み）
   ============================================================ */
#content > div.content-header > div.part-description{
  display:none!important;
}
#content > div.b-container > div > div:nth-child(2){
  display:none!important;
}

/* ===== CSS変数（#plan-newスコープ内） ===== */
#plan-new{
  --bc:#00ADEF;--bc-dk:#0090CC;--bc-lt:#E8F7FD;--bc-md:#B3E5F7;
  --t1:#333;--t2:#666;--t3:#999;
  --bd:#E0E0E0;--bd2:#EEE;--bg2:#F5F5F5;--bgt:#F0FAFF;
}

/* ===== SKUバナー（旧／未使用：保険として残置） ===== */
#plan-new .sku-banner{
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:#e9f8ff;border:2px solid #00a0e9;border-radius:.5em;
  padding:18px 28px;margin:0 auto 1.5em;max-width:820px;text-align:center;
}
#plan-new .sku-banner .txt{font-size:17px;font-weight:bold;color:#0070b0;line-height:1.5}
#plan-new .sku-banner .txt small{display:block;font-weight:normal;font-size:14px;color:#555;margin-top:6px;line-height:1.6}

/* ===== ページヒーロー（リード文） ===== */
#plan-new .page-hero{
  text-align:center;
  padding:20px 24px;
  margin:8px 0 16px;
  background:#e9f8ff;
  border-radius:8px;
  overflow:hidden;
  background-clip:padding-box;
  box-sizing:border-box;
  box-shadow:inset 0 0 0 2px #00ADEF;
  position:relative;
  z-index:1;
}
#plan-new .page-hero-tag{
  display:inline-block;
  background:#00ADEF;
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:3px 14px;
  border-radius:12px;
  letter-spacing:.05em;
  margin-bottom:14px;
}
#plan-new .page-hero-title{
  font-size:24px;
  font-weight:700;
  color:#333;
  margin:0 0 10px;
  line-height:1.5;
}
#plan-new .page-hero-title strong{
  color:#00ADEF;
  font-weight:700;
  font-size:24px;
  padding:0 4px;
}
#plan-new .page-hero-sub{
  font-size:14px;
  color:#555;
  margin:0;
  line-height:1.7;
}
#plan-new .page-hero-sub strong{
  color:#00ADEF;
  font-weight:700;
}

/* ===== 価格表記 中央配置 ===== */
#plan-new .plan-tax-note{
  width:100%!important;
  flex:0 0 100%!important;
  text-align:center!important;
  margin:8px 0 0!important;
  color:#666;
  font-size:12px;
}

/* ===== 料金注釈エリア（3カード横並び・コンパクト） ===== */
#plan-new .plan-notes-new{
  margin:16px 0 20px;
}
#plan-new .plan-notes-highlight{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:stretch;
  margin-bottom:0;
}
#plan-new .plan-note-card{
  flex:1 1 0;
  min-width:240px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid #e0e6ed;
  border-radius:8px;
  padding:0 16px;
  box-sizing:border-box;
  min-height:56px;
}
#plan-new .plan-note-card-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  padding:0 12px;
  height:26px;
  border-radius:13px;
  white-space:nowrap;
  letter-spacing:.03em;
  flex-shrink:0;
  line-height:1;
  box-sizing:border-box;
}
#plan-new .plan-note-card-label-included,
#plan-new .plan-note-card-label-option,
#plan-new .plan-note-card-label-other{
  background:#f5f7fa;
  color:#666;
  border:1px solid #d6dce2;
}
#plan-new .plan-note-card-text{
  font-size:14px;
  color:#444;
  line-height:1.4;
  display:flex;
  align-items:center;
}
#plan-new .plan-note-card-text strong{
  color:#444;
  font-weight:700;
}
/* 3枚目：折りたたみ式
   - details の display:flex は外す（user-agentデフォルトのsummaryレイアウトと
     競合して縦中央がズレる原因のため）
   - .plan-note-card のスタイル（display:flex/align-items:center/padding）も
     summary 側に移して、details 自体は単なる枠（border + radius）だけ担う */
#plan-new .plan-note-card-other{
  display:block!important;
  padding:0!important;
  align-items:initial!important;
  flex-direction:initial!important;
  justify-content:initial!important;
}
#plan-new .plan-note-card-other > summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 16px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  margin:0;
  width:100%;
  height:54px;  /* 親.plan-note-card の min-height:56px - border 2px = 54px */
  box-sizing:border-box;
  line-height:1;
}
#plan-new .plan-note-card-other summary::-webkit-details-marker{display:none}
#plan-new .plan-note-card-toggle{
  margin-left:auto;
  font-size:14px;
  color:#999;
  transition:transform .2s;
  line-height:1;
}
#plan-new .plan-note-card-other[open] .plan-note-card-toggle{
  transform:rotate(180deg);
}
#plan-new .plan-note-card-list{
  list-style:none;
  margin:0;
  padding:0 16px 12px;
  border-top:1px dashed #e0e6ed;
  padding-top:10px;
}
#plan-new .plan-note-card-list li{
  font-size:12px;
  color:#666;
  line-height:1.6;
  padding-left:12px;
  position:relative;
  margin-bottom:3px;
}
#plan-new .plan-note-card-list li:last-child{margin-bottom:0;}
#plan-new .plan-note-card-list li::before{
  content:'・';
  position:absolute;
  left:0;
  top:0;
  color:#999;
}

/* ============================================================
   プランカード共通レイアウト
   - メイン6カード + エンプラを全て同じレイアウトで描画
   - tile() のインライン高さ書き換えに勝つため !important
   ============================================================ */

/* プランカードのコンテナ */
#plan-new #the-plan{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:0!important;
  margin-left:0!important;
  padding-right:2px!important;
}

/* 全カード共通：横並びでflex分配 */
#plan-new #the-plan .part-plan{
  float:none!important;
  flex:1 1 0!important;
  width:auto!important;
  margin:0!important;
  min-width:0!important;
  box-sizing:border-box!important;
}

/* 全カード共通：ヘッダー高さ固定（tile()を上書き） */
#plan-new #the-plan .part-plan .part-header,
#plan-new #the-plan .part-plan .d-header{
  height:128px!important;
  box-sizing:border-box!important;
}

/* 全カード共通：ボディ高さ固定（tile()を上書き） */
#plan-new #the-plan .part-plan .part-body,
#plan-new #the-plan .part-plan .d-body{
  height:205px!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
}

/* 全カード共通：ボディ内訳を flex で 3 等分 */
#plan-new #the-plan .part-plan .part-body ul{
  list-style:none!important;
  margin:0!important;
  padding:0!important;
  height:100%!important;
  display:flex!important;
  flex-direction:column!important;
}
#plan-new #the-plan .part-plan .part-point{
  flex:1 1 0!important;
  height:auto!important;          /* JS時代の遺物インラインstyle対策 */
  min-height:0!important;
  border-bottom:1px solid #e0e0e0!important;
  text-align:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  padding:6px 4px!important;
  box-sizing:border-box!important;
}
#plan-new #the-plan .part-plan .part-point:last-child{
  border-bottom:none!important;
}

/* 内訳テキストの折り返し抑制（「30,000以上」等が崩れないよう） */
#plan-new #the-plan .part-plan .part-point p{
  white-space:nowrap;
}

/* h3（商品数・SKU数のラベル）内のテキストとツールチップ?を縦中央揃え
   - inline-flexのvertical-align:middleでは和文の中央が基準にならないため、
     h3自体をflex化して確実に揃える
   - line-height:1 でline-boxを font-size と同じに圧縮し、和文の視覚中心と一致させる */
#plan-new #the-plan .part-plan .part-point h3{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
  line-height:1;
}
/* 親style.css が h3::after で「:」コロンを付与しているケースを無効化。
   モバイル時に「商品数:」+ アイコンが収まらず「商品/数 ? :」のように
   折返してしまう問題の根本対策 */
#plan-new #the-plan .part-plan .part-point h3::after,
#plan-new #the-plan .part-plan .part-point h3::before{
  content:none!important;
  display:none!important;
}

/* SKU無制限行のハイライト */
#plan-new #the-plan .part-plan .part-point.sku-unlimited{
  background:#e9f8ff!important;
}
#plan-new #the-plan .part-plan .part-point.sku-unlimited p{
  color:#00a0e9!important;
}

/* 全幅要素 */
#plan-new #the-plan .text-right,
#plan-new #the-plan .text-center,
#plan-new #the-plan .sku-initial-bar{
  flex:0 0 100%!important;
  width:100%!important;
}

/* 既存の.part-initialは非表示（独自バーを使う） */
#plan-new #the-plan .part-initial{display:none!important}

/* カード共通の overflow（ツールチップが切れないように） */
#plan-new .part-plan{overflow:visible!important}
#plan-new .part-plan .part-body{overflow:visible!important;padding-bottom:0!important}

/* ============================================================
   メインカード（ライト〜プラン300）：隙間ゼロでくっつける
   ※ エンプラ（.part-plan-ent）とトライアル（.part-plan-trial）は除外
   ============================================================ */
/* 角丸を全て削除（後でライトとプラン300だけ復活） */
#plan-new #the-plan .part-plan-main:not(.part-plan-ent):not(.part-plan-trial){
  border-radius:0!important;
}
#plan-new #the-plan .part-plan-main:not(.part-plan-ent):not(.part-plan-trial) .part-header,
#plan-new #the-plan .part-plan-main:not(.part-plan-ent):not(.part-plan-trial) .part-body{
  border-radius:0!important;
}
/* 最初のメイン（ライト）：左側のみ角丸 */
#plan-new #the-plan #the-plan-light,
#plan-new #the-plan #the-plan-light .part-header{
  border-top-left-radius:.5em!important;
}
#plan-new #the-plan #the-plan-light .part-body{
  border-bottom-left-radius:.5em!important;
}
/* 最後のメイン（プラン300）：右側のみ角丸 */
#plan-new #the-plan #the-plan-300,
#plan-new #the-plan #the-plan-300 .part-header{
  border-top-right-radius:.5em!important;
}
#plan-new #the-plan #the-plan-300 .part-body{
  border-bottom-right-radius:.5em!important;
}
/* メインカード間：ボディ部分に薄い区切り線（トライアル直後とエンプラは除外） */
#plan-new #the-plan .part-plan-main:not(.part-plan-trial) + .part-plan-main:not(.part-plan-ent):not(.part-plan-trial) .part-body{
  border-left:1px solid #e0e0e0!important;
}

/* ============================================================
   無料トライアルカードの差分のみ
   - エンプラの鏡像。左端に配置、margin-right で分離
   ============================================================ */
#plan-new #the-plan .part-plan-trial{
  margin-right:24px!important;
  margin-left:2px!important;
  border-radius:.5em!important;
  border:none!important;
  box-shadow:0 0 0 1px #04b0ff!important;
}
/* ul が縮んで内訳が中央寄せに見える問題対策：明示的にカード幅いっぱいに */
#plan-new #the-plan-trial > .part-body > ul,
#plan-new #the-plan-trial > .d-body > ul{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
}
#plan-new #the-plan-trial > .part-body > ul > .part-point{
  width:100%!important;
}
#plan-new #the-plan .part-plan-trial .part-header,
#plan-new #the-plan .part-plan-trial .part-body{
  border-radius:0!important;
}
#plan-new #the-plan .part-plan-trial .part-header{
  border-top-left-radius:.5em!important;
  border-top-right-radius:.5em!important;
}
#plan-new #the-plan .part-plan-trial .part-body{
  border-bottom-left-radius:.5em!important;
  border-bottom-right-radius:.5em!important;
  border-right:none!important;
}
/* tooltip 位置：左端なので tooltip は右方向に伸ばす */
#plan-new #the-plan-trial .tooltip-content{left:0;right:auto;transform:translateX(-15%)}
#plan-new #the-plan-trial .tooltip-content::after{left:15%;right:auto}

/* ============================================================
   エンタープライズカードの差分のみ
   - 構造はメインと同じ。独立感（左マージン + 角丸）だけ追加
   - .part-plan-ent クラス指定にして詳細度を .part-plan 一般ルールと同等に
     （マージン:0が勝ってしまう問題の解消）
   - 独自枠線は付けない（親style.cssの枠がメインと同じく適用される。
     ここで足すと2px分カードが大きくなって他カードとサイズずれする）
   ============================================================ */
#plan-new #the-plan .part-plan-ent{
  margin-left:24px!important;
  margin-right:2px!important;
  border-radius:.5em!important;
  /* overflow:hidden は使わない（tooltipが切れるため）。
     内側の header/body に個別に border-radius を当てる方式で角丸を担保 */
  /* 親style.cssの.part-plan-main borderを無効化 */
  border:none!important;
  /* 青枠は box-shadow で描画 */
  box-shadow:0 0 0 1px #04b0ff!important;
}
#plan-new #the-plan .part-plan-ent .part-header,
#plan-new #the-plan .part-plan-ent .part-body{
  border-radius:0!important;
}
#plan-new #the-plan .part-plan-ent .part-header{
  border-top-left-radius:.5em!important;
  border-top-right-radius:.5em!important;
}
#plan-new #the-plan .part-plan-ent .part-body{
  border-bottom-left-radius:.5em!important;
  border-bottom-right-radius:.5em!important;
  border-left:none!important;  /* 隣接セレクタからは除外済だが念のため */
}

/* お問い合わせリンク（メインの ¥9,800 と同等の存在感に） */
#plan-new .sku-ent-contact-link{
  color:#fff!important;
  font-size:22px!important;
  font-weight:700!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
  display:inline-block!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
#plan-new .sku-ent-contact-link:hover{
  opacity:.85!important;
  color:#fff!important;
}
/* 「個別お見積」を小さめに */
#plan-new #the-plan .part-plan-ent .part-price>div>p:last-child{
  font-size:12px!important;
  opacity:.9!important;
  margin-top:4px!important;
}

/* ============================================================
   ツールチップ
   - 元の :first-child/:last-child は trial カード削除に伴い ID 指定に変更
   ============================================================ */
#plan-new .tooltip-wrapper{position:relative;display:inline-block;cursor:help}
#plan-new .tooltip-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;background-color:#00a0e9;color:#fff;
  border-radius:50%;font-size:11px;font-weight:bold;
  margin-left:4px;vertical-align:middle;
  /* 和文の視覚中心は line-box の中心より2pxほど上にあるため微調整 */
  transform:translateY(-2px);
}
#plan-new .tooltip-content{
  visibility:hidden;opacity:0;position:absolute;
  bottom:100%;left:50%;transform:translateX(-50%);
  width:220px;background-color:#333;color:#fff;
  text-align:left;padding:10px 12px;border-radius:6px;
  font-size:12px;line-height:1.5;z-index:9999;
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  transition:opacity .2s,visibility .2s;
  pointer-events:none;margin-bottom:8px;
  white-space:normal;
}
#plan-new .tooltip-content::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  border-width:6px;border-style:solid;
  border-color:#333 transparent transparent transparent;
}
#plan-new .tooltip-wrapper:hover .tooltip-content{visibility:visible;opacity:1}
/* 左端カード（ライトプラン）はツールチップを右寄せ */
#plan-new #the-plan-light .tooltip-content{left:0;transform:translateX(-15%)}
#plan-new #the-plan-light .tooltip-content::after{left:15%}
/* 右端カード（エンタープライズ）はツールチップを左寄せ */
#plan-new #the-plan-enterprise .tooltip-content{left:auto;right:0;transform:translateX(15%)}
#plan-new #the-plan-enterprise .tooltip-content::after{left:auto;right:15%}

/* ============================================================
   AI/SEO向けリード文（ヒーロー直下）
   - 視覚的にも自然な導入文として機能。AIクローラーがプラン概要を
     テキストから把握できるようにする
   ============================================================ */
#plan-new .plan-intro-lead{
  max-width:880px;
  margin:0 auto 28px;
  padding:0 20px;
  font-size:16px;
  line-height:1.8;
  color:#555;
  text-align:center;
}
#plan-new .plan-intro-lead strong{
  color:#0090CC;
  font-weight:700;
}

/* ============================================================
   初期費用バー（軽量化：濃い青ベタ塗り → ライトブルー背景）
   - 視覚的な重さを下げてプラン表の主張を邪魔しない
   ============================================================ */
#plan-new .sku-initial-bar{
  width:100%;
  background:#e9f8ff;
  border:1px solid #c5e9f7;
  border-radius:6px;
  padding:0;
  margin-top:8px;
  box-sizing:border-box;
}
#plan-new .sku-initial-inner{
  display:flex;align-items:center;justify-content:center;
  padding:14px 24px;
}
#plan-new .sku-initial-inner>div{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
#plan-new .sku-initial-label{
  color:#0090CC;font-size:12px;font-weight:700;opacity:1;
  display:block;text-align:center;letter-spacing:.03em;
}
#plan-new .sku-initial-price{color:#333;font-size:14px;display:block;text-align:center}
#plan-new .sku-initial-price strong{font-size:20px;font-weight:700;margin:0 4px;color:#0090CC}

/* ============================================================
   無料トライアルCTA（旧／未使用：保険として残置）
   ============================================================ */
#plan-new .sku-trial-cta{
  background:#e9f8ff;border:2px solid #00ADEF;border-radius:6px;
  padding:24px 28px;margin:24px 0;
}
#plan-new .sku-trial-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
}
#plan-new .sku-trial-text{display:flex;flex-direction:column;gap:4px}
#plan-new .sku-trial-text strong{font-size:16px;color:#333;font-weight:700}
#plan-new .sku-trial-text span{font-size:13px;color:#666}
#plan-new .sku-trial-btn{
  display:inline-block;background:#00ADEF;color:#fff;
  font-size:14px;font-weight:700;padding:13px 32px;
  border-radius:4px;text-decoration:none;white-space:nowrap;
  transition:background .15s;
}
#plan-new .sku-trial-btn:hover{background:#0090CC}

/* ============================================================
   タブセクション
   ============================================================ */
#plan-new .sku-section{
  width:100%;box-sizing:border-box;
  background:#f6f6f6!important;
  padding:0 24px 24px!important;
  border-radius:6px;
  margin-bottom:0!important;
  padding-bottom:10px!important;
}
#plan-new .sku-sec-head{text-align:center;margin-bottom:24px;padding-top:28px}
#plan-new .sku-sec-head h2{font-size:24px;font-weight:700;color:var(--t1);margin-bottom:12px;line-height:1.5}
#plan-new .sku-sec-head p{font-size:16px;color:var(--t2);line-height:1.8}

/* コンセプトボックス（旧／未使用：保険として残置） */
#plan-new .sku-concept-box{
  background:var(--bgt);border:1px solid var(--bc-md);border-radius:6px;
  padding:28px 32px;margin-bottom:36px;
}
#plan-new .sku-concept-title{
  font-size:13px;font-weight:700;color:var(--bc-dk);
  text-align:center;margin-bottom:20px;letter-spacing:.03em;
}
#plan-new .sku-concept-flow{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  justify-content:center;margin-bottom:20px;
}
#plan-new .sku-concept-product{
  background:#fff;border:1.5px solid var(--bc);border-radius:6px;
  padding:12px 22px;text-align:center;min-width:120px;flex-shrink:0;
}
#plan-new .sku-concept-product .cp-label{
  font-size:10px;color:var(--bc-dk);font-weight:700;
  margin-bottom:4px;letter-spacing:.05em;
}
#plan-new .sku-concept-product .cp-name{font-size:15px;font-weight:700;color:var(--t1)}
#plan-new .sku-arrow-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
#plan-new .sku-arrow-label{font-size:9px;color:var(--bc-dk);font-weight:700;letter-spacing:.05em;white-space:nowrap}
#plan-new .sku-arrow-svg{width:36px;height:20px}
#plan-new .sku-chips-wrap{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
#plan-new .sku-chips-label{font-size:10px;color:var(--bc-dk);font-weight:700;letter-spacing:.05em}
#plan-new .sku-chips{display:flex;flex-wrap:wrap;gap:7px;max-width:420px;align-items:center}
#plan-new .sku-chip{
  background:#fff;border:1px solid var(--bc);border-radius:20px;
  padding:4px 12px;font-size:12px;color:var(--bc-dk);font-weight:500;white-space:nowrap;
}
#plan-new .sku-chip.more{background:var(--bg2);border-color:var(--bd);color:var(--t3)}
#plan-new .sku-concept-note{
  background:#fff;border-left:3px solid var(--bc);
  padding:12px 16px;font-size:13px;color:var(--t2);line-height:1.7;
  border-radius:0 4px 4px 0;
}
#plan-new .sku-concept-note strong{color:var(--t1);font-weight:700}

/* ============================================================
   誤認防止セクション（トライアル後・業種タブ前）
   ============================================================ */
#plan-new .smp-section{
  margin:32px 0 24px;
}
#plan-new .smp-section-head{
  text-align:center;
  margin-bottom:14px;
}
#plan-new .smp-section-tag{
  display:inline-block;
  background:#f5b800;
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:4px 14px;
  border-radius:12px;
  letter-spacing:.05em;
  margin-bottom:14px;
}
#plan-new .smp-section-question{
  font-size:16px;
  color:#666;
  margin:0 0 8px;
  line-height:1.6;
  font-style:italic;
}
#plan-new .smp-section-title{
  font-size:24px;
  font-weight:700;
  color:#333;
  margin:0;
  line-height:1.5;
}
#plan-new .smp-section-title strong{
  color:#0090CC;
  font-weight:700;
}

/* ============================================================
   誤認防止ブロック（SKU=商品数の誤解を解く）
   ============================================================ */
#plan-new .smp-card{
  background:#fffbeb;
  border:2px solid #f5b800;
  border-radius:8px;
  padding:22px 24px;
  margin:0 0 36px;
}
/* カード内Q&Aヘッダー */
#plan-new .smp-card-qa{
  text-align:center;
  margin-bottom:18px;
  padding-bottom:18px;
  border-bottom:1px dashed #f5d77a;
}
#plan-new .smp-card-tag{
  display:inline-block;
  background:#f5b800;
  color:#fff;
  font-size:13px;
  font-weight:700;
  padding:4px 14px;
  border-radius:12px;
  letter-spacing:.05em;
  margin-bottom:12px;
}
#plan-new .smp-card-question{
  font-size:16px;
  color:#666;
  margin:0 0 10px;
  line-height:1.6;
  font-style:italic;
}
#plan-new .smp-card-answer{
  font-size:20px;
  font-weight:700;
  color:#333;
  margin:0;
  line-height:1.5;
}
#plan-new .smp-card-answer strong{
  color:#00ADEF;
  font-weight:700;
}
#plan-new .smp-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:8px;
}
#plan-new .smp-head-icon{
  flex-shrink:0;
  display:block;
}
#plan-new .smp-head-title{
  font-size:22px;
  font-weight:700;
  color:#333;
  margin:0;
  line-height:1.4;
}
#plan-new .smp-head-title strong{
  color:#0090CC;
  font-weight:700;
}
#plan-new .smp-lead{
  font-size:15px;
  color:#555;
  line-height:1.7;
  margin:0 0 20px;
}
/* 例ブロック */
#plan-new .smp-example-box{
  background:#fff;
  border:1px solid #f5d77a;
  border-radius:6px;
  padding:18px 20px;
  margin-bottom:14px;
}
#plan-new .smp-example-label{
  font-size:14px;
  font-weight:700;
  color:#8a6500;
  margin:0 0 16px;
  letter-spacing:.04em;
}
#plan-new .smp-formula{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
#plan-new .smp-term{
  background:#f5f7fa;
  border:1px solid #e0e6ed;
  border-radius:6px;
  padding:12px 18px;
  text-align:center;
  min-width:130px;
}
#plan-new .smp-term-label{
  display:block;
  font-size:12px;
  color:#888;
  margin-bottom:5px;
  letter-spacing:.03em;
}
#plan-new .smp-term-value{
  display:block;
  font-size:24px;
  font-weight:700;
  color:#333;
  line-height:1.1;
}
#plan-new .smp-term-value small{
  font-size:12px;
  font-weight:500;
  color:#666;
  margin-left:3px;
}
#plan-new .smp-term-key{
  background:#e9f8ff;
  border-color:#00ADEF;
}
#plan-new .smp-term-key .smp-term-label{
  color:#0090CC;
}
#plan-new .smp-term-key .smp-term-value{
  color:#0090CC;
}
#plan-new .smp-term-result{
  background:#f5f7fa;
  border-color:#e0e6ed;
}
#plan-new .smp-term-result .smp-term-label{
  color:#888;
}
#plan-new .smp-term-result .smp-term-value{
  color:#333;
}
#plan-new .smp-op{
  font-size:16px;
  color:#999;
  font-weight:700;
}
#plan-new .smp-arrow-down{
  text-align:center;
  font-size:16px;
  color:#999;
  font-weight:700;
  line-height:1;
  margin-bottom:10px;
}
#plan-new .smp-conclusion-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:#f0f9ff;
  border:2px solid #00ADEF;
  border-radius:8px;
  padding:18px 20px;
}
#plan-new .smp-conc-text{
  font-size:14px;
  color:#666;
  margin:0;
  line-height:1.5;
}
#plan-new .smp-conc-text strong{
  color:#0090CC;
  font-weight:700;
}
#plan-new .smp-conc-result{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:16px;
  line-height:1.5;
  color:#333;
}
#plan-new .smp-conc-result-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:#00ADEF;
  color:#fff;
  font-size:15px;
  font-weight:700;
  flex-shrink:0;
}
#plan-new .smp-conc-result-text{
  font-weight:500;
}
#plan-new .smp-conc-result-text strong{
  color:#0090CC;
  font-weight:700;
  font-size:20px;
}
#plan-new .smp-foot-note{
  font-size:14px;
  color:#666;
  line-height:1.7;
  margin:0;
  text-align:center;
}
#plan-new .smp-foot-note strong{
  color:#333;
  font-weight:700;
}

#plan-new .sku-tab-hint{text-align:center;font-size:13px;color:var(--t3);margin-bottom:12px}

/* タブ */
#plan-new .sku-tabs{border:1px solid var(--bd);border-radius:6px;overflow:hidden;background:#fff}
#plan-new .sku-tabs-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  background:var(--bg2);
  border-bottom:1px solid var(--bd);
  padding-right:12px;
}
#plan-new .sku-tabs-nav{
  display:flex;
  flex:1;
  min-width:0;
  background:transparent;
  border-bottom:none;
  overflow-x:auto;scrollbar-width:none;
}
#plan-new .sku-tabs-nav::-webkit-scrollbar{display:none}
/* リンクコピーボタン */
#plan-new .sku-share-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  margin-bottom:8px;
  font-size:12px;
  font-weight:500;
  font-family:inherit;
  color:#666;
  background:#fff;
  border:1px solid #d0d6dd;
  border-radius:6px;
  cursor:pointer;
  white-space:nowrap;
  transition:all .15s;
  flex-shrink:0;
  align-self:center;
}
#plan-new .sku-share-btn:hover{
  background:#f5fafd;
  color:var(--bc-dk);
  border-color:var(--bc);
}
#plan-new .sku-share-btn.copied{
  background:var(--bc-lt);
  color:var(--bc-dk);
  border-color:var(--bc);
}
#plan-new .sku-share-btn.failed{
  background:#fff4f4;
  color:#cc3333;
  border-color:#e08080;
}
#plan-new .sku-share-icon{flex-shrink:0}
#plan-new .sku-tab-btn{
  padding:16px 24px;font-size:16px;font-weight:700;color:var(--t2);
  background:none;border:none;border-bottom:3px solid transparent;
  cursor:pointer;white-space:nowrap;font-family:inherit;
  transition:color .15s,border-color .15s,background .15s;
  margin-bottom:-1px;
}
#plan-new .sku-tab-btn:hover{color:var(--bc-dk);background:#fff}
#plan-new .sku-tab-btn.active{
  color:var(--bc-dk);background:#fff;
  border-bottom-color:var(--bc);font-weight:700;
  font-size:16px;
}
#plan-new .sku-panels{position:relative}
#plan-new .sku-panel{display:block;visibility:hidden;height:0;overflow:hidden;padding:0 28px}
#plan-new .sku-panel.active{visibility:visible;height:auto;overflow:visible;padding:18px 28px}
#plan-new .sku-panel-layout{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:start}
#plan-new .sku-panel-desc{font-size:16px;color:var(--t2);line-height:1.8;margin-bottom:12px;padding:16px 18px;background:var(--bc-lt);border-left:3px solid var(--bc);border-radius:0 4px 4px 0}
#plan-new .sku-panel-desc strong{color:var(--bc-dk);font-weight:700}

/* サムネ */
#plan-new .sku-thumb{
  background:var(--bg2);border:1px solid var(--bd);border-radius:6px;
  padding:18px 10px 14px;text-align:center;
}
#plan-new .sku-thumb-icon{display:block;margin:0 auto 10px;width:76px;height:76px;border:none;background:none}
#plan-new .sku-thumb-label{font-size:10px;color:var(--t3);margin-bottom:3px}
#plan-new .sku-thumb-name{font-size:11px;font-weight:700;color:var(--t1);line-height:1.4;margin-bottom:8px}
#plan-new .sku-thumb-badge{
  display:inline-block;background:var(--bc-lt);border:1px solid var(--bc-md);
  color:var(--bc-dk);font-size:10px;font-weight:700;
  border-radius:20px;padding:2px 9px;
}

/* コールアウト */
#plan-new .sku-callout{
  margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;
  gap:12px;background:var(--bc-lt);border:1px solid var(--bc-md);
  border-left:3px solid var(--bc);border-radius:0 4px 4px 0;
  padding:12px 16px;flex-wrap:wrap;
}
#plan-new .sku-callout-text{font-size:14px;color:var(--t2);line-height:1.7}
#plan-new .sku-callout-text strong{color:var(--t1);font-weight:700}
#plan-new .sku-callout-note{font-size:11px;color:var(--t3);margin-top:6px;line-height:1.6}

/* テーブル */
#plan-new .sku-tbl-wrap{border:1px solid var(--bd);border-radius:6px;overflow:hidden}
#plan-new .sku-tbl{width:100%;border-collapse:collapse;font-size:16px;table-layout:fixed}
#plan-new .sku-tbl thead{background:var(--bg2)}
#plan-new .sku-tbl th{
  padding:12px 16px;text-align:left;font-weight:700;font-size:14px;
  color:var(--t3);border-bottom:1px solid var(--bd);letter-spacing:.04em;
}
#plan-new .sku-tbl th.r{text-align:right}
#plan-new .sku-tbl th.cp{width:110px}
#plan-new .sku-tbl th.cs{width:100px}
#plan-new .sku-tbl td{padding:13px 16px;border-bottom:1px solid var(--bd2);vertical-align:middle}
#plan-new .sku-tbl tr:last-child td{border-bottom:none}
#plan-new .sku-tbl td.r{text-align:right;white-space:nowrap}
#plan-new .sku-row-name{font-weight:700;color:var(--t1);font-size:16px}
#plan-new .sku-row-meta{font-size:12px;color:var(--t3);line-height:1.5;display:none}
#plan-new .show-meta .sku-row-meta{display:block}
#plan-new .sku-meta-toggle{
  display:inline-block;font-size:14px;color:var(--bc-dk);cursor:pointer;
  background:none;border:none;font-family:inherit;padding:10px 0;
  text-decoration:underline;text-underline-offset:2px;
}
#plan-new .sku-label{
  display:inline-block;font-size:12px;font-weight:700;
  background:var(--bc-lt);color:var(--bc-dk);border:1px solid var(--bc-md);
  border-radius:3px;padding:2px 8px;margin-left:6px;
  vertical-align:middle;white-space:nowrap;
}
#plan-new .sku-price{font-weight:700;color:var(--t1);font-size:16px}
#plan-new .sku-stock{font-size:14px;color:var(--t2)}
#plan-new .sku-tbl-more{
  background:var(--bg2);border-top:1px solid var(--bd2);
  text-align:center;padding:8px 12px;font-size:14px;
  color:var(--t3);font-style:italic;
}

/* ============================================================
   商品ページ入れ子カード（業種別パネル内）
   ============================================================ */
#plan-new .sku-product-card{
  border:2px solid var(--bc);
  border-radius:8px;
  background:#fff;
  margin-top:8px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(0,173,239,.08);
}
#plan-new .sku-product-card-head{
  background:var(--bc);
  color:#fff;
  padding:11px 16px;
  text-align:center;
}
#plan-new .sku-product-card-badge{
  font-size:16px;
  font-weight:700;
  letter-spacing:.03em;
  color:#fff;
}
#plan-new .sku-product-card-body{
  padding:20px 22px 22px;
}
/* 商品情報（画像+名前） */
#plan-new .sku-product-info{
  display:flex;
  align-items:center;
  gap:20px;
  padding:6px 0 18px;
  border-bottom:1px dashed var(--bd);
  margin-bottom:18px;
}
#plan-new .sku-product-img{
  width:160px;
  height:160px;
  flex-shrink:0;
  background:var(--bg2);
  border-radius:8px;
  padding:16px;
  box-sizing:border-box;
}
#plan-new .sku-product-name-area{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}
#plan-new .sku-product-name-label{
  font-size:13px;
  color:#fff;
  background:var(--bc);
  font-weight:700;
  letter-spacing:.05em;
  padding:4px 12px;
  border-radius:12px;
  align-self:flex-start;
}
#plan-new .sku-product-name{
  font-size:22px;
  font-weight:700;
  color:var(--t1);
  line-height:1.3;
}
/* SKUセクションのラベル */
#plan-new .sku-sku-section-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
#plan-new .sku-sku-section-title{
  font-size:20px;
  font-weight:700;
  color:var(--t1);
}
#plan-new .sku-sku-section-note{
  font-size:14px;
  color:var(--bc-dk);
  background:var(--bc-lt);
  border:1px solid var(--bc-md);
  padding:4px 14px;
  border-radius:20px;
  white-space:nowrap;
}

/* カード→矢印→コールアウトの流れ */
#plan-new .sku-flow-arrow{
  text-align:center;
  font-size:28px;
  color:var(--bc);
  font-weight:700;
  line-height:1;
  margin:16px 0 12px;
}
#plan-new .sku-result-callout{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--bc-lt);
  border:2px solid var(--bc);
  border-radius:8px;
  padding:18px 20px;
}
#plan-new .sku-result-text{
  font-size:16px;
  color:#666;
  line-height:1.5;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}
#plan-new .sku-result-text strong{
  color:var(--bc-dk);
  font-weight:700;
  font-size:16px;
}
#plan-new .sku-result-plan{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:18px;
  line-height:1.5;
  color:#333;
}
#plan-new .sku-result-plan-mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--bc);
  color:#fff;
  font-size:15px;
  font-weight:700;
  flex-shrink:0;
}
#plan-new .sku-result-plan-text{
  font-weight:500;
}
#plan-new .sku-result-plan-text strong{
  color:var(--bc-dk);
  font-weight:700;
  font-size:22px;
}

/* CTA（旧／未使用：保険として残置） */
#plan-new .sku-cta{margin-top:40px;text-align:center}
#plan-new .sku-cta-note{font-size:13px;color:var(--t2);margin-bottom:16px}
#plan-new .sku-cta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
#plan-new .sku-btn-primary{
  display:inline-block;background:var(--bc);color:#fff;
  font-size:14px;font-weight:700;padding:13px 32px;
  border-radius:4px;text-decoration:none;border:none;cursor:pointer;
  font-family:inherit;transition:background .15s;
}
#plan-new .sku-btn-primary:hover{background:var(--bc-dk)}
#plan-new .sku-btn-secondary{
  display:inline-block;background:#fff;color:var(--bc-dk);
  font-size:14px;font-weight:700;padding:13px 32px;
  border-radius:4px;text-decoration:none;border:2px solid var(--bc);
  cursor:pointer;font-family:inherit;transition:background .15s;
}
#plan-new .sku-btn-secondary:hover{background:var(--bc-lt)}

/* ============================================================
   既存#the-initialの角丸（念のため残置）
   ============================================================ */
#plan-new #the-initial{border-radius:8px!important;overflow:hidden!important}

/* ============================================================
   ページ下部CTA（プラン相談 + オプション料金）
   ============================================================ */
#plan-new .plan-cta-row{
  display:flex;
  gap:14px;
  margin:32px 0 16px;
  flex-wrap:wrap;
}
#plan-new .plan-cta-btn{
  flex:1 1 0;
  min-width:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:18px 28px;
  font-size:22px;
  font-weight:700;
  text-decoration:none;
  border-radius:8px;
  box-sizing:border-box;
  transition:all .2s;
  font-family:inherit;
  cursor:pointer;
  text-align:center;
}
#plan-new .plan-cta-btn-primary{
  background:#00ADEF;
  color:#fff!important;
  border:2px solid #00ADEF;
}
#plan-new .plan-cta-btn-primary:hover{
  background:#0090CC;
  border-color:#0090CC;
  color:#fff!important;
  text-decoration:none;
}
#plan-new .plan-cta-btn-secondary{
  background:#fff;
  color:#0090CC!important;
  border:2px solid #00ADEF;
}
#plan-new .plan-cta-btn-secondary:hover{
  background:#e9f8ff;
  color:#0090CC!important;
  text-decoration:none;
}
#plan-new .plan-cta-btn-text{
  font-weight:700;
}
#plan-new .plan-cta-btn-arrow{
  font-size:18px;
  font-weight:400;
  line-height:1;
  transition:transform .2s;
}
#plan-new .plan-cta-btn:hover .plan-cta-btn-arrow{
  transform:translateX(3px);
}

/* ============================================================
   補助金導線（IT補助金LPへの誘導）
   - 上部インフォバー（.plan-subsidy-bar）
   - 下部CTAの3つ目ボタン（.plan-cta-btn-subsidy／ティール塗り・主役）
   - 色はテキスト/罫線用に濃いティール #0a97b0、塗り用に明るいティール #1bbdc4
   ============================================================ */
/* ===== 上部インフォバー ===== */
#plan-new .plan-subsidy-bar{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  background:#f4f5f6;
  border:1.5px solid #c4c8ce;
  border-radius:10px;
  padding:18px 24px;
  margin:20px 0;
  text-decoration:none;
  color:#333333;
  line-height:1.5;
}
#plan-new .plan-subsidy-bar-tag{
  background:#ffffff;
  border:1px solid #0a97b0;
  color:#0a97b0;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.08em;
  padding:3px 12px;
  border-radius:4px;
}
#plan-new .plan-subsidy-bar-title{
  font-size:18px;
  font-weight:700;
}
#plan-new .plan-subsidy-bar-title .is-accent{
  color:#0a97b0;
}
#plan-new .plan-subsidy-bar-link{
  font-size:15px;
  font-weight:700;
  color:#0a97b0;
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
}

/* ===== 下部CTAボタン（補助金・主役） ===== */
#plan-new .plan-cta-btn-subsidy{
  background:#1bbdc4;
  border:2px solid #1bbdc4;
  color:#ffffff!important;
}
#plan-new .plan-cta-btn-subsidy:hover{
  background:#159aa0;
  border-color:#159aa0;
  color:#ffffff!important;
  text-decoration:none;
}

/* ============================================================
   レスポンシブ：モバイル（〜768px）
   - プランテーブルを縦積みに変換
   - 各カードは横幅100%、内訳3項目は横並び3カラムに
   - SKUテーブルは横スクロール
   - 商品画像、見出し等を適切なサイズに縮小
   - CTAボタンは縦並び
   ============================================================ */
@media (max-width:768px){

  /* ---------- ヒーロー ---------- */
  #plan-new .page-hero{
    padding:20px 16px!important;
  }
  #plan-new .page-hero-title,
  #plan-new .page-hero-title strong{
    font-size:20px!important;
  }
  /* リード文：モバイルでは少し小さく */
  #plan-new .plan-intro-lead{
    font-size:14px!important;
    padding:0 16px!important;
    text-align:left!important;
    line-height:1.7!important;
  }

  /* ---------- プランテーブル：縦積み ---------- */
  #plan-new #the-plan{
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:12px!important;
    padding-right:0!important;
  }

  /* 全カード：100%幅、margin/角丸リセット */
  #plan-new #the-plan .part-plan,
  #plan-new #the-plan .part-plan-trial,
  #plan-new #the-plan .part-plan-ent{
    flex:0 0 auto!important;
    width:100%!important;
    margin:0!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }

  /* メイン6枚（ライト〜プラン300）：横並び時の隙間ゼロルールを打ち消し、4辺角丸に
     ※ PCの border-radius:0 ルールと同じ詳細度（0,2,4,0）にして上書き
     ※ 親style.cssによる左右borderの欠落をbox-shadowで補い、青枠を4辺すべてに */
  #plan-new #the-plan .part-plan-main:not(.part-plan-ent):not(.part-plan-trial){
    border:none!important;
    border-radius:8px!important;
    box-shadow:0 0 0 1px #04b0ff!important;
  }
  #plan-new #the-plan .part-plan-main:not(.part-plan-ent):not(.part-plan-trial) .part-header{
    border-radius:8px 8px 0 0!important;
  }
  #plan-new #the-plan .part-plan-main:not(.part-plan-ent):not(.part-plan-trial) .part-body{
    border-radius:0 0 8px 8px!important;
    border-left:none!important;
  }
  /* カード間の縦区切り線は消す（元ルールと同じ詳細度で確実に上書き） */
  #plan-new #the-plan .part-plan-main:not(.part-plan-trial) + .part-plan-main:not(.part-plan-ent):not(.part-plan-trial) .part-body{
    border-left:none!important;
  }

  /* ヘッダー：横並び（プラン名 ↔ 価格） */
  #plan-new #the-plan .part-plan .part-header{
    height:auto!important;
    min-height:0!important;
    padding:14px 16px!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }
  #plan-new #the-plan .part-plan .part-title{
    margin:0!important;
    text-align:left!important;
    font-size:16px!important;
    line-height:1.3!important;
    flex:0 0 auto!important;
  }
  #plan-new #the-plan .part-plan .part-price{
    margin:0!important;
    flex:0 0 auto!important;
  }
  #plan-new #the-plan .part-plan .part-price>div{
    display:flex!important;
    align-items:baseline!important;
    gap:6px!important;
  }
  #plan-new #the-plan .part-plan .part-price>div>p{
    margin:0!important;
  }

  /* ボディ：横並び3カラム（商品数 | SKU数 | 会員数） */
  #plan-new #the-plan .part-plan .part-body{
    height:auto!important;
    padding:0!important;
  }
  #plan-new #the-plan .part-plan .part-body ul{
    flex-direction:row!important;
    height:auto!important;
  }
  #plan-new #the-plan .part-plan .part-point{
    border-bottom:none!important;
    border-right:1px solid #e0e0e0!important;
    padding:12px 4px!important;
  }
  #plan-new #the-plan .part-plan .part-point:last-child{
    border-right:none!important;
  }
  /* SKU行のハイライト：横並び時は上下border維持 */
  #plan-new #the-plan .part-plan .part-point.sku-unlimited{
    border-top:none!important;
    border-bottom:none!important;
    background:var(--bc-lt)!important;
  }

  /* エンプラの問い合わせリンク：ヘッダー横並び化に合わせて調整 */
  #plan-new .sku-ent-contact-link{
    font-size:18px!important;
  }
  /* 「個別お見積」「30日間」などの小ラベル */
  #plan-new #the-plan .part-plan .part-price>div>p:last-child{
    font-size:12px!important;
  }

  /* ---------- 初期費用・注釈ボックス ---------- */
  #plan-new .plan-notes-highlight{
    flex-direction:column!important;
    gap:8px!important;
  }
  #plan-new .plan-note-card,
  #plan-new .plan-note-card-other{
    flex:1 1 100%!important;
    width:100%!important;
  }

  /* ---------- Q&A セクション ---------- */
  #plan-new .smp-card-question{
    font-size:12px!important;
  }
  #plan-new .smp-card-answer{
    font-size:16px!important;
  }
  /* 計算式：横並びが入らない場合は wrap 許可 */
  #plan-new .smp-formula{
    flex-wrap:wrap!important;
  }
  #plan-new .smp-term-value{
    font-size:20px!important;
  }

  /* ---------- 業種別セクション ---------- */
  #plan-new .sku-sec-head h2{
    font-size:20px!important;
    line-height:1.4!important;
  }
  /* 「業種別の登録イメージから...」の説明文はスマホでは非表示 */
  #plan-new .sku-sec-head p{
    display:none!important;
  }

  /* 各タブパネル：左右の28pxパディングを外して、内側のカードを全幅にする */
  #plan-new .sku-panel,
  #plan-new .sku-panel.active{
    padding-left:0!important;
    padding-right:0!important;
  }

  /* 商品ページ入れ子カード：枠線と角丸を撤去し、ヘッダーをタブパネル全幅まで広げる */
  #plan-new .sku-product-card{
    border:none!important;
    border-radius:0!important;
    box-shadow:none!important;
    margin-top:0!important;
  }
  #plan-new .sku-product-card-head{
    border-radius:0!important;
    padding:12px 16px!important;
  }
  /* ボディは左右パディングを足し直して読みやすく */
  #plan-new .sku-product-card-body{
    padding:16px!important;
  }

  /* 商品ページの説明文（「同じ商品でも容量・…」）はスマホでは非表示 */
  #plan-new .sku-panel-desc{
    display:none!important;
  }

  /* リンクコピーボタンは非表示（モバイルでは不要） */
  #plan-new .sku-share-btn{
    display:none!important;
  }

  /* 商品ページカード：画像 + タグ + 商品名 を1行に並べる */
  #plan-new .sku-product-info{
    flex-direction:row!important;
    align-items:center!important;
    gap:12px!important;
    padding:6px 0 12px!important;
  }
  #plan-new .sku-product-img{
    width:56px!important;
    height:56px!important;
    padding:6px!important;
    align-self:center!important;
  }
  #plan-new .sku-product-name-area{
    flex:1 1 0!important;
    min-width:0!important;
    gap:4px!important;
  }
  #plan-new .sku-product-name{
    font-size:16px!important;
    line-height:1.3!important;
  }
  #plan-new .sku-product-name-label{
    font-size:11px!important;
    padding:2px 8px!important;
    border-radius:10px!important;
  }
  #plan-new .sku-product-card-badge{
    font-size:13px!important;
    text-align:center!important;
  }

  /* プランカード内訳：3カラム等分を明示的に強制（不均等にならないように） */
  #plan-new #the-plan .part-plan .part-point{
    flex:1 1 33.333%!important;
    width:33.333%!important;
    max-width:33.333%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  /* SKUテーブル：横スクロール対応 */
  #plan-new .sku-tbl-wrap{
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  #plan-new .sku-tbl{
    table-layout:auto!important;
    min-width:480px!important;
    font-size:14px!important;
  }
  #plan-new .sku-tbl th{
    white-space:nowrap!important;
    padding:10px 12px!important;
  }
  #plan-new .sku-row-name{
    font-size:14px!important;
  }
  #plan-new .sku-price{
    font-size:14px!important;
  }

  /* 結論コールアウト：チェックアイコン + テキストを1行に強制 */
  #plan-new .sku-result-text{
    font-size:13px!important;
  }
  #plan-new .sku-result-plan{
    flex-direction:row!important;
    align-items:center!important;
    gap:6px!important;
    flex-wrap:nowrap!important;
    font-size:13px!important;
  }
  #plan-new .sku-result-plan-check,
  #plan-new .sku-result-plan svg{
    width:16px!important;
    height:16px!important;
    flex-shrink:0!important;
  }
  #plan-new .sku-result-plan-text{
    font-size:13px!important;
    white-space:nowrap!important;
    overflow:hidden;
    text-overflow:ellipsis;
    min-width:0;
  }
  #plan-new .sku-result-plan-text strong{
    font-size:13px!important;
  }

  /* ---------- CTAボタン ---------- */
  #plan-new .plan-cta-row{
    flex-direction:column!important;
    gap:10px!important;
  }
  #plan-new .plan-cta-btn{
    width:100%!important;
    box-sizing:border-box!important;
  }

  /* ---------- 補助金インフォバー ---------- */
  #plan-new .plan-subsidy-bar{
    padding:16px!important;
  }
  #plan-new .plan-subsidy-bar-title{
    font-size:15px!important;
    text-align:center!important;
  }
  #plan-new .plan-subsidy-bar-link{
    font-size:13px!important;
    white-space:normal!important;
    text-align:center!important;
  }
}
