/* =====================================================
   flowmeter.css
   「流量計」ページ専用の追加スタイル。
   共通の style.css（ロードセル基準）は変更せず、
   このページだけで使うルールをここに追記する。
   style.css の後に読み込むこと。
===================================================== */

/* ===== Hero（カテゴリ別：流量計） ===== */
/* hero.png は背景が透明のため、グラデーションの下に敷くと白に透けてほぼ見えなくなる。
   そのため画像は ::before で上に重ね、opacity で文字が読める濃さに調整している。 */
.lp-product-category .hero {
  position: relative;
  background-image: linear-gradient(120deg, rgba(124, 147, 171, 0.82) 0%, rgba(93, 121, 152, 0.82) 45%, rgba(47, 77, 112, 0.82) 100%);
  color: #fff;
  padding: 100px 0;
  overflow: hidden;
}
.lp-product-category .hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: -14%;                      /* 値を大きくするほど製品が右へ寄る（透明な余白が切れるだけで製品は切れない） */
  bottom: -10%;                     /* 値を大きくするほど製品が下へ寄る */
  background: url('https://www.incom.co.jp/word/img/flowmeter/hero.webp') right bottom / contain no-repeat;
  opacity: 0.4;
  transform: scale(0.8);            /* 画像サイズ80%（右下を基準に縮小）。大きさを変える場合はこの値 */
  transform-origin: right bottom;
  pointer-events: none;
}
.lp-product-category .hero > .inner { position: relative; z-index: 1; }
/* style.css のSP用 padding(72px) が、後読みのこのファイルに上書きされないよう再指定 */
@media (max-width: 640px) {
  .lp-product-category .hero { padding: 72px 0; }
  .lp-product-category .hero::before { display: none; }   /* SPはボタンと重なるため画像なし */
}

/* 2カラムのカード（瞬時流量と積算流量／体積流量と質量流量） */
.lp-product-category .shape-cards.two-col { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lp-product-category .shape-cards.two-col .shape-card h3,
.lp-product-category .shape-cards.two-col .shape-card h4 { text-align: center; }
.lp-product-category .shape-cards.two-col .shape-card p + p { margin-top: 10px; }
@media (max-width: 640px) {
  .lp-product-category .shape-cards.two-col { grid-template-columns: 1fr; }
}

/* =====================================================
   タブレット表示（641px〜1024px）：ロードセルページに合わせる調整
   ※ 共通 style.css は変更せず、ここで上書きする
   ※ 掲載内容（メーカー・製品）は変更しない。見た目のみ。
===================================================== */
@media (min-width: 641px) and (max-width: 1024px) {

  /* --- 注目の流量計メーカー：カードの見た目 --- */
  .lp-product-category .maker-carousel { gap: 11px; }
  .lp-product-category .maker-card {
    height: auto;
    min-height: 280px;
    padding: 12px 12px 16px;
    border-radius: 2px;
  }
  /* カードが画像の元サイズに引っ張られて幅が広がり、右側が切れるのを防ぐ */
  .lp-product-category .maker-card { min-width: 0; }
  .lp-product-category .maker-img-wrap {
    position: relative;
    min-width: 0;
    aspect-ratio: 5 / 3;            /* 正方形ではなく横長の画像枠 */
    border: 1px solid var(--gray-line);
    background: #fff;
  }
  .lp-product-category .maker-img {
    position: absolute;             /* 画像の元サイズが枠の寸法に影響しないようにする */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .lp-product-category .maker-name {
    font-size: 16px;
    padding: 14px 0 4px;
    color: var(--navy-text);
  }
  .lp-product-category .maker-desc {
    font-size: 13px;
    font-weight: 500;
    color: #1a1a1a;
    padding: 0;
    margin: 4px 0 14px;
  }
  .lp-product-category .maker-btn {
    margin: 0;
    padding: 10px;
    font-size: 12.5px;
  }

  /* --- 矢印：黒い丸＋白い三角 --- */
  .lp-product-category .carousel-arrow {
    width: 22px;
    height: 22px;
    background: #000;
    font-size: 0;                   /* 元の ‹ › の文字は非表示 */
  }
  .lp-product-category .carousel-arrow:hover:not(.is-disabled) { background: #333; }
  .lp-product-category .carousel-arrow::after {
    content: "";
    display: block;
    border-style: solid;
    border-color: transparent;
  }
  .lp-product-category .carousel-arrow.left::after {
    border-width: 5px 7px 5px 0;
    border-right-color: #fff;
    margin-right: 2px;
  }
  .lp-product-category .carousel-arrow.right::after {
    border-width: 5px 0 5px 7px;
    border-left-color: #fff;
    margin-left: 2px;
  }

  /* --- 流量計の用途：枠線なし、アイコン大きめ、見出しは黒 --- */
  .lp-product-category .usage-text h3,
  .lp-product-category .usage-text h4 { color: #111; font-size: 16px; }
}

/* =====================================================
   導入手順：6ステップを3列×2段で表示し、カード間に矢印（→）を入れる
   ※ 641px以上。スマホ幅（640px以下）は style.css の1列表示のまま
===================================================== */
@media (min-width: 641px) {
  .lp-product-category .steps-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 40px;               /* 横は矢印を入れる分だけ広めに */
  }
  .lp-product-category .step-card {
    position: relative;
    border: 1px solid #d3e3f8;
  }

  /* 各段の1枚目・2枚目の右側に矢印（3枚目・6枚目には付けない） */
  .lp-product-category .step-card:nth-child(3n+1)::after,
  .lp-product-category .step-card:nth-child(3n+2)::after {
    content: "→";
    position: absolute;
    top: 50%;
    right: -30px;
    width: 20px;
    transform: translateY(-50%);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: var(--blue-accent);
  }
}