/* ==========================================================================
 * Page Name : [自社開発プロダクト]StockTime CSS
 * File Name : /assets/css/product/stocktime.css
 * Created   : 2026-08-20
 * Updated   : 2026-08-20
 * ========================================================================== */

/* -- こんなお悩みありませんか?(吹き出しの三角の色をcolor_3→color_1に) -- */
.page.-st .pr-onayami-box::after {
  border-top-color: var(--custom-color-1);
}

/* -- ロゴ(icon.svgはアイコン+「StockTime」ロゴタイプの横長画像のため、
      共通CSSの正方形指定(aspect-ratio:1)を上書き) -- */
.pagehero.-st .pr-pagehero-logo {
  width: 360px;
  aspect-ratio: 361 / 105;
}
.page.-st .pr-cta-title img {
  width: 336px;
  aspect-ratio: 361 / 105;
}
@media screen and (max-width: 767px) {
  .pagehero.-st .pr-pagehero-logo {
    width: 160px;
  }
  .page.-st .pr-cta-title img {
    width: 140px;
  }
}

/* -- ページヒーロー(店舗向け／個人利用ボタン) -- */
.pr-pagehero-btnbox.-st {
  margin-top: 50px;
  align-items: flex-start;
  gap: 20px 40px;
}
.st-heroBtn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.st-heroBtn-label {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}
/* アイコンは legacy-system-migration-support.php と同じ共通アイコン(-report/-contact)を使用 */
.st-heroBtn {
  width: fit-content;
  height: 54px;
  padding: 0 28px;
  gap: 15px;
}
/* icon-mail.svgは白塗り固定のため、下部CTA(.pr-cta)のように背景が白でテキストがティールになる
   コンテキストだとアイコンが見えなくなる。テキストと同じ色になるようcurrentColorで塗り直す */
.st-heroBtn.-contact .common-button__icon::before {
  background-color: currentColor;
  -webkit-mask: url("../../images/product/icon-mail.svg") center center / contain no-repeat;
  mask: url("../../images/product/icon-mail.svg") center center / contain no-repeat;
}

/* -- 下部CTA(ティール背景)内のラベル配色 -- */
.pr-cta .st-heroBtn-label {
  color: var(--color-white);
}

@media screen and (max-width: 767px) {
  .pr-pagehero-btnbox.-st {
    margin-top: 40px;
    flex-direction: row;
    gap: 15px;
  }
  .st-heroBtn-group {
    flex: 1;
    gap: 8px;
  }
  .st-heroBtn-label {
    font-size: 11px;
    text-align: center;
  }
  .st-heroBtn {
    width: 100%;
    height: 46px;
    padding: 0 10px;
    gap: 8px;
    font-size: 13px;
  }
}

/* -- StockTimeとは? (4ステップ) -- */
/* 他プロダクトページと同じ .pr-point-list (product.css) を使用するため、固有CSSは無し */

/* -- 料金プラン(先着枠・リワード稼働条件の注記) -- */
.st-price-limited {
  text-align: center;
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}
/* スタンダード/プロにも同じ要素を非表示で置き、フリープランとリワード行の高さを揃える */
.st-price-limited.-invisible {
  visibility: hidden;
}
.st-price-note {
  margin-top: 5px;
  text-align: center;
  font-size: 11px;
  color: #888;
}

.page.-st .pr-price-option {
  margin-top: 30px;
}
/* 料金プランの機能アイコンをStockTime専用アイコンに差し替え(内容に合わせた意味づけ) */
/* アイコンが丸の縁ギリギリまで届いていたため、余白を持って収まるよう縮小 */
.page.-st .pr-price-option li::after {
  background-size: 80%;
  background-position: center center;
}
.page.-st .pr-price-option li[data-icon="1"]::after {
  background-image: url("../../images/product/stocktime/price-icon01.svg");
}
.page.-st .pr-price-option li[data-icon="2"]::after {
  background-image: url("../../images/product/stocktime/price-icon02.svg");
}
.page.-st .pr-price-option li[data-icon="3"]::after {
  background-image: url("../../images/product/stocktime/price-icon03.svg");
}
.page.-st .pr-price-option li[data-icon="4"]::after {
  background-image: url("../../images/product/stocktime/price-icon04.svg");
}
.page.-st .pr-price-option li[data-icon="5"]::after {
  background-image: url("../../images/product/stocktime/price-icon05.svg");
}
.page.-st .pr-price-option li[data-icon="6"]::after {
  background-image: url("../../images/product/stocktime/price-icon06.svg");
}
.page.-st .pr-price-option li[data-icon="7"]::after {
  background-image: url("../../images/product/stocktime/price-icon07.svg");
}
.page.-st .pr-price-option li[data-icon="8"]::after {
  background-image: url("../../images/product/stocktime/price-icon08.svg");
}
.page.-st .pr-price-option li[data-icon="9"]::after {
  background-image: url("../../images/product/stocktime/price-icon09.svg");
}
.page.-st .pr-price-option li[data-icon="10"]::after {
  background-image: url("../../images/product/stocktime/price-icon10.svg");
}
.page.-st .pr-price-option li[data-icon="11"]::after {
  background-image: url("../../images/product/stocktime/price-icon11.svg");
}

/* リワード行の文字を大きく */
.page.-st .pr-price-bottomLabel {
  font-size: 22px;
}
.page.-st .pr-price-bottomLabel span {
  padding: 4px 14px;
  font-size: 14px;
}

/* -- CTA2の波形装飾(containだと左右に隙間ができ背景色が見えるため、coverで完全に覆う) -- */
.page.-st .pr-cta2::before {
  background-size: cover;
}

/* -- 他にも便利な機能をご用意 -- */
.st-feature-list {
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  .st-feature-list {
    margin-top: 30px;
  }
}