/* ChemGraphic 2 の製品ページ・操作説明ページ専用スタイル。
   site.css の body.sa-page 配下に追加する形で、接頭辞 .sa-cg2- に限定する。
   読み込むのは product_chemgraphic2*.html と en/product_chemgraphic2*_en.html のみ。 */

/* --- ヒーロー内のアイコン・対応OSチップ・配信ステータス --- */
body.sa-page .sa-cg2-hero__icon{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: var(--sa-shadow);
  margin: 0 auto 4px;
  display: block;
}
body.sa-page .sa-cg2-platforms{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
body.sa-page .sa-cg2-platforms li{
  background: var(--sa-white);
  border: 1px solid var(--sa-line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--sa-ink-800);
}
body.sa-page .sa-cg2-status{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sa-orange-light);
  color: var(--sa-orange-dark);
  font-size: 13px;
  font-weight: 700;
}
body.sa-page .sa-cg2-status::before{
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sa-orange);
}

/* --- 「3つの違い」カード --- */
body.sa-page .sa-cg2-diff{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
body.sa-page .sa-cg2-diff__item{
  background: var(--sa-white);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: 28px 26px;
}
body.sa-page .sa-cg2-diff__num{
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--sa-blue);
  margin-bottom: 12px;
}
body.sa-page .sa-cg2-diff__item h3{
  font-size: 19px;
  line-height: 1.5;
  margin: 0 0 10px;
}
body.sa-page .sa-cg2-diff__item p{
  font-size: 14px;
  line-height: 1.85;
  color: var(--sa-body);
  margin: 0 0 14px;
}
body.sa-page .sa-cg2-diff__item p:last-child{ margin-bottom: 0; }
body.sa-page .sa-cg2-diff__more{
  font-size: 13.5px;
  font-weight: 700;
  color: var(--sa-blue);
}

/* --- 比較表（横スクロール可） --- */
body.sa-page .sa-cg2-table-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 40px;
}
body.sa-page .sa-cg2-table{
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--sa-white);
}
body.sa-page .sa-cg2-table th,
body.sa-page .sa-cg2-table td{
  border: 1px solid var(--sa-line);
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
body.sa-page .sa-cg2-table th{
  background: var(--sa-bg-alt);
  color: var(--sa-ink);
  font-weight: 700;
}
body.sa-page .sa-cg2-table thead th:first-child{ width: 22%; }
body.sa-page .sa-cg2-table tbody th{
  background: var(--sa-white);
  white-space: nowrap;
}
body.sa-page .sa-cg2-table td.is-hl{
  background: var(--sa-blue-light);
  color: var(--sa-ink);
  font-weight: 600;
}
body.sa-page .sa-cg2-table small{
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--sa-body);
}

/* --- チェックリスト（機能の箇条書き） --- */
body.sa-page .sa-cg2-checks{
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.sa-page .sa-cg2-checks li{
  position: relative;
  padding-left: 28px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--sa-ink-800);
}
body.sa-page .sa-cg2-checks li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sa-blue-light);
}
body.sa-page .sa-cg2-checks li::after{
  content: "";
  position: absolute;
  left: 5px;
  top: 9px;
  width: 5px;
  height: 8px;
  border-right: 2px solid var(--sa-blue);
  border-bottom: 2px solid var(--sa-blue);
  transform: rotate(45deg);
}
body.sa-page .sa-cg2-note,
body.sa-page .sa-split__text p.sa-cg2-note{
  font-size: 12.5px;
  line-height: 1.75;
  color: #7B8A95;
  margin: 20px 0 0;
}
body.sa-page .sa-cg2-note + .sa-cg2-note,
body.sa-page .sa-split__text p.sa-cg2-note + p.sa-cg2-note{ margin-top: 6px; }
body.sa-page .sa-cg2-note strong{ color: var(--sa-ink-800); }

/* --- 料金（2プラン用に幅を絞る） --- */
body.sa-page .sa-cg2-pricing{
  grid-template-columns: repeat(2, 1fr);
  max-width: 760px;
  margin: 0 auto;
  align-items: stretch;
}
body.sa-page .sa-cg2-pricing .sa-pricing__amount small{
  font-size: 14px;
  font-weight: 500;
  color: var(--sa-body);
  margin-left: 4px;
}

/* --- ダウンロード（ストアごとの配信状況） --- */
body.sa-page .sa-cg2-stores{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 900px;
  margin: 0 auto;
}
body.sa-page .sa-cg2-store{
  background: var(--sa-white);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: 24px 22px;
  text-align: center;
}
body.sa-page .sa-cg2-store h3{
  font-size: 17px;
  margin: 0 0 6px;
}
body.sa-page .sa-cg2-store p{
  font-size: 13px;
  color: var(--sa-body);
  margin: 0 0 14px;
  line-height: 1.7;
}
body.sa-page .sa-cg2-store__badge{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--sa-bg-alt);
  border: 1px solid var(--sa-line);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--sa-body);
}
body.sa-page .sa-cg2-store__badge.is-live{
  background: var(--sa-blue);
  border-color: var(--sa-blue);
  color: #fff;
}

/* --- FAQ --- */
body.sa-page .sa-cg2-faq{
  max-width: 800px;
  margin: 0 auto;
}
body.sa-page .sa-cg2-faq details{
  border-bottom: 1px solid var(--sa-line);
}
body.sa-page .sa-cg2-faq details:first-child{ border-top: 1px solid var(--sa-line); }
body.sa-page .sa-cg2-faq summary{
  cursor: pointer;
  list-style: none;
  padding: 18px 36px 18px 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--sa-ink);
  position: relative;
}
body.sa-page .sa-cg2-faq summary::-webkit-details-marker{ display: none; }
body.sa-page .sa-cg2-faq summary::after{
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--sa-blue);
}
body.sa-page .sa-cg2-faq details[open] summary::after{ content: "−"; }
body.sa-page .sa-cg2-faq details p{
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--sa-body);
  margin: 0 0 18px;
}

/* --- 操作説明ページ：目次と各画面の骨組み --- */
body.sa-page .sa-cg2-toc{
  max-width: 800px;
  margin: 0 auto;
  background: var(--sa-white);
  border: 1px solid var(--sa-line);
  border-radius: var(--sa-radius);
  padding: 28px 32px;
}
body.sa-page .sa-cg2-toc h2{
  font-size: 18px;
  margin: 0 0 14px;
}
body.sa-page .sa-cg2-toc ol{
  margin: 0;
  padding: 0 0 0 24px;
  columns: 2;
  column-gap: 40px;
}
body.sa-page .sa-cg2-toc li{
  font-size: 14.5px;
  line-height: 2;
  break-inside: avoid;
}
body.sa-page .sa-cg2-toc a{
  color: var(--sa-ink-800);
  text-decoration: none;
}
body.sa-page .sa-cg2-toc a:hover{ color: var(--sa-blue); text-decoration: underline; }
body.sa-page .sa-cg2-toc .is-wip::after{
  content: "準備中";
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--sa-orange-light);
  color: var(--sa-orange-dark);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
html[lang="en"] body.sa-page .sa-cg2-toc .is-wip::after{ content: "Coming soon"; }

body.sa-page .sa-cg2-screen{
  padding: 56px 0;
  border-bottom: 1px solid var(--sa-line);
  scroll-margin-top: 140px;
}
body.sa-page .sa-cg2-screen:last-child{ border-bottom: none; padding-bottom: 0; }
body.sa-page .sa-cg2-screen__head{
  margin-bottom: 28px;
}
body.sa-page .sa-cg2-screen__head h2{
  font-size: 24px;
  margin: 10px 0 8px;
}
body.sa-page .sa-cg2-screen__head p{
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--sa-body);
  margin: 0;
  max-width: 720px;
}
body.sa-page .sa-cg2-parts{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: cg2part;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
body.sa-page .sa-cg2-parts li{
  position: relative;
  padding-left: 40px;
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--sa-body);
}
body.sa-page .sa-cg2-parts li strong{
  display: block;
  color: var(--sa-ink);
  font-size: 15px;
}
body.sa-page .sa-cg2-parts li::before{
  counter-increment: cg2part;
  content: counter(cg2part);
  position: absolute;
  left: 0;
  top: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sa-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.sa-page .sa-cg2-wip{
  margin-top: 24px;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--sa-orange-light);
  color: var(--sa-orange-dark);
  font-size: 13px;
  line-height: 1.7;
}
body.sa-page .sa-cg2-back{
  text-align: center;
  padding: 40px 0 0;
}

@media (max-width: 900px){
  body.sa-page .sa-cg2-diff{ grid-template-columns: 1fr; }
  body.sa-page .sa-cg2-pricing{ grid-template-columns: 1fr; max-width: 420px; }
  body.sa-page .sa-cg2-stores{ grid-template-columns: 1fr; max-width: 420px; }
  body.sa-page .sa-cg2-toc ol{ columns: 1; }
}
@media (max-width: 560px){
  body.sa-page .sa-cg2-screen{ padding: 40px 0; }
  body.sa-page .sa-cg2-screen__head h2{ font-size: 21px; }
  body.sa-page .sa-cg2-toc{ padding: 22px 20px; }
}

/* --- 操作説明ページ：手順ごとのスクリーンショット一覧 --- */
body.sa-page .sa-cg2-shots{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 20px;
  margin: 32px 0 0;
}
body.sa-page .sa-cg2-shots--3{ grid-template-columns: repeat(3, 1fr); }
body.sa-page .sa-cg2-shots figure{ margin: 0; }
body.sa-page .sa-cg2-shots img{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--sa-line);
  border-radius: 10px;
}
body.sa-page .sa-cg2-shots figcaption{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--sa-body);
}
body.sa-page .sa-cg2-shots figcaption strong{
  display: block;
  font-size: 14px;
  color: var(--sa-ink);
}
@media (max-width: 900px){
  body.sa-page .sa-cg2-shots--3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  body.sa-page .sa-cg2-shots,
  body.sa-page .sa-cg2-shots--3{ grid-template-columns: 1fr; }
}

body.sa-page .sa-cg2-shots a{ display: block; cursor: zoom-in; }

/* 連続した変化を示す画像の間に矢印を入れる（横に3枚並ぶときだけ） */
body.sa-page .sa-cg2-shots--seq{ column-gap: 56px; }
body.sa-page .sa-cg2-shots--seq a{ position: relative; }
body.sa-page .sa-cg2-shots--seq figure:not(:last-child) a::after{
  content: "→";
  position: absolute;
  right: -48px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sa-blue-light);
  color: var(--sa-blue);
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  text-align: center;
}
@media (max-width: 900px){
  body.sa-page .sa-cg2-shots--seq{ column-gap: 20px; }
  body.sa-page .sa-cg2-shots--seq figure:not(:last-child) a::after{ content: none; }
}