/* product-block.css
 * 商品ページ本文（.product-block-content でラップされたGutenbergブロック）専用のCSSです。
 * サイト全体のヘッダー・フッター・固定ページ・他の投稿には一切影響しません。
 * 旧サイトのCSS（old-html/css/base_1.css, extr_1.css, extr_2.css, user_1.css）の
 * 実際の値（色・フォントサイズ・余白）を参考に、標準Gutenbergブロック向けに再構成しています。
 */

.product-block-content {
  max-width: 960px;
  margin: 0 auto;
  color: #5F5F5F;
  font-family: Meiryo, "Hiragino Kaku Gothic Pro", "MS PGothic", sans-serif;
  line-height: 1.25;
}

/* ---------- 行間の余白（横並びカラム行） ---------- */
.product-block-content .pbc-banner-row,
.product-block-content .pbc-code-row {
  margin-bottom: 12px;
}
/* 親テーマ(Lightning)の style-theme-json.css が
   body .container .is-layout-flow > * + :where(...) { margin-block-end: unset; }
   (詳細度 0,2,1) で margin-bottom を無効化してしまうため、
   セレクタを .product-block-content.product-block-content とし詳細度を 0,3,0 に引き上げて上書きする。
   margin-block-end も明示指定し、論理プロパティ側からの再上書きも防ぐ。 */
.product-block-content.product-block-content .pbc-price-spec-row {
  margin-top: 0;
  margin-bottom: 30px;
  margin-block-start: 0;
  margin-block-end: 30px;
  gap: 0;
}
.product-block-content .pbc-price-spec-row .wp-block-column {
  padding-right: 10px;
  box-sizing: border-box;
}
.product-block-content .pbc-spec-row {
  margin-bottom: 12px;
}

/* ---------- 区切り線（旧サイトの product-img-line.jpg に相当。実画像の色情報が無いため標準的な薄いグレーで代替） ---------- */
/* 旧サイトの line 画像は class="mb012"（margin-bottom:12pxのみ）で、上余白は付与されていなかったため合わせる */
/* 親テーマの is-layout-flow 子要素マージンリセット(詳細度0,2,1)に上書きされるため、
   .product-block-content.product-block-content で詳細度を0,3,0に引き上げる */
.product-block-content.product-block-content .pbc-divider {
  border-top: 1px solid #cccccc;
  margin-top: 0;
  margin-bottom: 12px;
  margin-block-start: 0;
  margin-block-end: 12px;
}

/* ---------- Products Sales Point ロゴ（旧サイト img width="184" の実測サイズ 184x26 に固定） ---------- */
.product-block-content .pbc-salespoint {
  margin: 0 0 12px;
}
.product-block-content .pbc-salespoint img {
  width: 184px;
  height: 26px;
}

/* ---------- キャッチコピー見出し（Sales Point見出し下の説明文。旧サイトより少し大きく読みやすいサイズへ調整） ---------- */
.product-block-content .pbc-catchcopy {
  font-weight: bold;
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 12px;
}

/* ---------- アイコン（国内生産・性能アイコン） ---------- */
.product-block-content .pbc-icon {
  margin: 0 0 8px;
}
.product-block-content .pbc-icon-perf {
  margin-top: 81px;
}
/* ジャストテント(投稿ID 60003)固有の補正：旧サイトの実際の値は class="pt046"（padding-top:46px）だったが、
   .pbc-icon-perf の81pxは旧サイト値と一致しておらず開きすぎていた。
   他ページの.pbc-icon-perfへ影響させないため投稿ID限定セレクタで上書きする。
   旧サイト実機（www.nakatutent.co.jp/product/pt04.html）をブラウザで実測（getBoundingClientRect）した結果、
   日本国内生産品アイコンと仕様アイコン列は隙間0px（密着）だったため、それに合わせる。 */
.postid-60003 .pbc-icon-perf {
  margin-top: 0;
}

/* ---------- 商品コード（商品画像の中央位置に合わせて中央揃え） ---------- */
.product-block-content .pbc-code {
  font-size: 12px;
  margin: 0;
}
.product-block-content .pbc-code-row .wp-block-column:first-child {
  text-align: center;
}

/* ---------- ボタン（PDF/WEBカタログ/価格詳細）：装飾なし・画像のみ・PCも横一列 ---------- */
/* 旧サイトはボタン列の親要素に .x3（text-align:right）が指定され右寄せ表示だったため合わせる */
.product-block-content .pbc-buttons {
  display: flex;
  margin-top: 24px;
  margin-bottom: 12px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0;
}
.product-block-content .pbc-btn .wp-block-button__link {
  display: inline-block;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  min-width: 0;
  line-height: 0;
}
.product-block-content .pbc-btn-text {
  /* 画像を表示に使うため非表示（altテキストでアクセシビリティは確保） */
  display: none;
}
.product-block-content .pbc-btn-img {
  display: block;
  width: 144px;
  height: 48px;
}

/* ---------- 運賃一覧リンク（黒枠ボタンではなく控えめなテキストリンク調） ---------- */
.product-block-content .pbc-fee-buttons {
  margin-bottom: 0;
  justify-content: flex-end;
}
.product-block-content .pbc-btn-fee .wp-block-button__link {
  background: none;
  border: none;
  box-shadow: none;
  color: #007FFF;
  text-decoration: underline;
  font-size: 12px;
  padding: 2px 0;
  min-width: 0;
  white-space: nowrap;
}
.product-block-content .pbc-btn-fee .wp-block-button__link:hover {
  color: #0056b3;
  transform: none;
  box-shadow: none;
}
.product-block-content .pbc-btn-fee-small .wp-block-button__link {
  font-size: 11px;
}

/* ---------- 補足説明画像（旧サイトと同様、画像のみ表示） ---------- */
.product-block-content .pbc-supplement-box {
  margin-bottom: 12px;
}

/* ---------- 仕様/価格ラベルバッジ（旧サイトのbi04アイコン背景を再現） ---------- */
.product-block-content .pbc-badge {
  background-image: url(https://www.nakatutent.co.jp/img/product-bg-btnbackground.jpg);
  background-repeat: no-repeat;
  width: 45px;
  height: 45px;
  padding: 15px 0 0 8px;
  font-size: 15px;
  margin: 0;
}
.product-block-content .pbc-badge-inline {
  margin-bottom: 8px;
}

/* ---------- 仕様欄（表ではなく段落ブロックで縦に流す） ---------- */
.product-block-content .pbc-spec-heading {
  font-size: 15px;
  font-weight: bold;
  margin: 0 0 4px;
  margin-block: 0 4px !important;
  max-width: 100%;
  box-sizing: border-box;
}
.product-block-content .pbc-spec-line {
  font-size: 12px;
  line-height: 1.4;
  margin: 0;
  margin-block: 0 !important;
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ---------- 価格表記（税込/税別） ---------- */
.product-block-content .pbc-price {
  font-size: 15px;
  margin: 0 0 8px;
}
.product-block-content .pbc-price-main {
  font-size: 18px;
}
.product-block-content .pbc-price-unit {
  font-size: 12px;
  font-weight: normal;
}
.product-block-content .pbc-price-sub {
  font-size: 12px;
  padding-left: 6px;
}

/* ---------- 補足注記（※底面シート付 等） ---------- */
.product-block-content .pbc-subnote {
  font-size: 12px;
  margin: 0 0 8px;
}

/* ---------- 運賃ランクバッジ（結合セル無しの単純2セルだが、色・枠線・寸法の再現精度を優先しカスタムHTMLで実装） ---------- */
.product-block-content .pbc-rank-badge {
  border-collapse: collapse;
  font-size: 12px;
  text-align: center;
  margin: 0 0 4px auto;
  table-layout: fixed;
  width: 86px;
}
.product-block-content .pbc-rank-badge td {
  border: 1px solid #5F5F5F;
  width: 43px;
  height: 18px;
  padding: 0;
  box-sizing: border-box;
  white-space: nowrap;
}
.product-block-content .pbc-rank-label {
  background-color: #CFCFCF;
  color: #1F1F1F;
  border-right: none;
}
.product-block-content .pbc-rank-value {
  color: #5F5F5F;
  border-left: none;
}

/* ---------- 価格表画像 ---------- */
.product-block-content .pbc-price-table-img {
  margin-top: 4px;
}

/* ---------- 運賃一覧リンクの右寄せを明示的に固定 ---------- */
.product-block-content .pbc-fee-buttons-right {
  display: flex;
  width: 100%;
  justify-content: flex-end;
}

/* ---------- メイン画像（PC表示は現状維持。スマホ用クラスはメディアクエリ側で処理） ---------- */
.product-block-content .product-main-image {
  margin: 0;
}

/* ---------- 価格表の横スクロールラッパー（PCでは現状幅のまま表示） ---------- */
.product-block-content .product-price-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.product-block-content .product-price-scroll table {
  min-width: 760px;
  width: 760px;
}
.product-block-content .product-price-scroll img {
  width: 960px;
  max-width: 100%;
  display: block;
}

/* ---------- 横スクロール案内（PCでは非表示。スマホのみメディアクエリで表示） ---------- */
.product-block-content .product-scroll-guide {
  display: none;
}

/* ========================================================
   レスポンシブ（スマートフォン対応。旧サイトには存在しないため新規追加）
   ・Gutenbergのカラムブロックは既定でモバイル時に自動で1カラムへ積み上がるため、
     追加のfloat解除等は不要。ここでは旧サイト側で固定だった余白・タップ領域・
     表のはみ出しのみを調整する。
   ======================================================== */
@media (max-width: 640px) {
  .product-block-content {
    max-width: 100%;
    padding: 0 16px;
    box-sizing: border-box;
  }
  .product-block-content .wp-block-table {
    overflow-x: auto;
    display: block;
  }
  .product-block-content .pbc-rank-badge {
    margin-left: auto;
    margin-right: auto;
  }
  .product-block-content .pbc-code-row .wp-block-column:first-child {
    text-align: center;
  }
  .product-block-content .pbc-price-spec-row {
    gap: 16px;
  }
  .product-block-content .pbc-price-spec-row .wp-block-column {
    padding-right: 0;
  }

  /* ---- Sales Point説明文：スマホでは大きくなりすぎないよう14〜16px程度に抑える ---- */
  .product-block-content .pbc-catchcopy {
    font-size: 15px;
  }

  /* ---- 赤い丸アイコン・性能アイコン群：スマホ表示のみ横一列に並べる。PC表示には影響しない ---- */
  .product-block-content .pbc-icon-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
  }

  /* ---- メイン画像：画面幅いっぱいに表示。PC表示には影響しない ---- */
  .product-block-content .product-main-image,
  .product-block-content .product-main-image img {
    width: 100%;
    max-width: none;
    height: auto;
  }

  /* ---- PDF/WEBカタログ/価格詳細ボタン：3つ横並び・同幅・ボタン画像を使用 ---- */
  .product-block-content .pbc-buttons {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    justify-content: stretch;
  }
  .product-block-content .pbc-buttons .wp-block-button {
    flex: 1;
    min-width: 0;
  }
  .product-block-content .pbc-btn .wp-block-button__link {
    display: block;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    min-width: 0;
    width: 100%;
  }
  .product-block-content .pbc-btn-text {
    display: none;
  }
  .product-block-content .pbc-btn-img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* ---- 運賃一覧：右上の黒枠ボタンをやめ、小さめの青いボタンとして価格表直前に右寄せ ---- */
  .product-block-content .pbc-fee-buttons,
  .product-block-content .pbc-fee-buttons-right {
    justify-content: flex-end;
  }
  .product-block-content .pbc-btn-fee .wp-block-button__link,
  .product-block-content .pbc-btn-fee-small .wp-block-button__link {
    display: inline-block;
    background: #007FFF;
    color: #ffffff;
    text-decoration: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* ---- 横スクロール案内（矢印付き。スマホのみ表示） ---- */
  .product-block-content .product-scroll-guide {
    display: block;
    font-size: 12px;
    color: #888888;
    text-align: right;
    margin: 0 0 4px;
  }

  /* ---- 価格表：横スクロール＋右端にスクロール可能であることを示すグラデーション ---- */
  .product-block-content .product-price-scroll {
    margin-bottom: 12px;
    overflow-x: auto;
  }
  .product-block-content .product-price-scroll img {
    width: auto;
    max-width: none;
    display: block;
  }
  .product-block-content .product-price-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.12));
  }
}