/* SimpleAppli-Agent の製品ページ専用スタイル。
   見た目は ChemGraphic 2 の製品ページに合わせ、chemgraphic2.css の部品（.sa-cg2-）をそのまま使う。
   ここには、それに無い部品だけを接頭辞 .sa-sag- で足す。
   読み込むのは product_simpleappli_agent.html と en/product_simpleappli_agent_en.html のみ
   （chemgraphic2.css の後に読み込む）。 */

/* --- ページ内リンクの飛び先：「主な機能」のカード。
   節（section[id]）の余白は chemgraphic2.css で指定している。 --- */
body.sa-page .sa-sag-features .sa-cg2-diff__item{ scroll-margin-top: 150px; }

/* --- ヒーロー：公開前の入手ボタン --- */
body.sa-page .sa-sag-soon{
  opacity: .5;
  cursor: default;
  pointer-events: none;
}

/* --- 各機能：見出しと説明（左）、箇条書き（右） --- */
body.sa-page .sa-sag-feature{
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: start;
}
body.sa-page .sa-sag-feature h3{
  margin: 14px 0 12px;
}
body.sa-page .sa-sag-feature p{
  font-size: 15px;
  line-height: 1.9;
  color: var(--sa-body);
  margin: 0;
}
body.sa-page .sa-sag-feature .sa-cg2-checks{ margin-top: 0; }

/* --- 主な機能：3枚のカード（.sa-cg2-diff を使い、中に箇条書きを置く） --- */
body.sa-page .sa-sag-features .sa-cg2-checks{
  margin-top: 14px;
  gap: 8px;
}
body.sa-page .sa-sag-features .sa-cg2-checks li{
  font-size: 14px;
  line-height: 1.7;
}
body.sa-page .sa-sag-features h3 small{
  font-size: 13px;
  font-weight: 500;
  color: var(--sa-body);
}

/* --- 比較表の料金の行から料金プランへのリンク（カードの「…の詳細 →」と同じ見た目） --- */
body.sa-page #difference .sa-cg2-table small a,
body.sa-page .sa-sag-pricing .sa-pricing__price small a{
  color: var(--sa-blue);
  font-weight: 700;
}
body.sa-page .sa-sag-pricing .sa-pricing__price small a{ white-space: nowrap; }

/* --- スクリーンショット ---
   並びと大きさは site.css の .sa-gallery（2列、900px 以下は1列）に合わせ、画像の下に画面の名前を添える。 */
body.sa-page .sa-sag-gallery figure{ margin: 0; }
body.sa-page .sa-sag-gallery img{
  display: block;
  width: 100%;
  height: auto;
}
body.sa-page .sa-sag-gallery figcaption{
  margin-top: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sa-ink-800);
  text-align: center;
}

/* --- 料金（4プラン） --- */
body.sa-page .sa-sag-pricing{
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}
body.sa-page .sa-sag-pricing .sa-pricing__plan{ padding: 28px 22px; }
body.sa-page .sa-sag-pricing .sa-pricing__amount{ font-size: 26px; }
body.sa-page .sa-sag-pricing .sa-pricing__price small{
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--sa-body);
}
body.sa-page .sa-sag-pricing .sa-pricing__specs strong{ white-space: normal; text-align: right; }
body.sa-page .sa-sag-pricing .sa-pricing__desc strong{
  display: block;
  color: var(--sa-ink);
  font-size: 12.5px;
  margin-bottom: 2px;
}
body.sa-page .sa-sag-notes{
  max-width: 800px;
  margin: 28px auto 0;
  padding: 0 0 0 1.2em;
  font-size: 13px;
  line-height: 1.85;
  color: var(--sa-body);
}

/* --- 動作環境（2列の表なので横スクロールさせない） --- */
body.sa-page .sa-sag-spec{
  max-width: 800px;
  margin: 0 auto;
}
body.sa-page .sa-sag-spec .sa-cg2-table{ min-width: 0; }
body.sa-page .sa-sag-spec .sa-cg2-table tbody th{ width: 1%; white-space: nowrap; }

@media (max-width: 1100px){
  body.sa-page .sa-sag-pricing{ grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; }
}
@media (max-width: 900px){
  body.sa-page .sa-sag-feature{ grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px){
  body.sa-page .sa-sag-pricing{ grid-template-columns: 1fr; max-width: 420px; }
}