/* ============================================================
   product-detail-flexible-v1.css
   Yamaichi Lease ｜ 商品詳細 Flexible Content Template v1
   ------------------------------------------------------------
   目的：既存 Local（WordPress post_content）のテキスト・画像・
   テーブルを、商品ごとの差異を壊さず、個別CSS調整なしで受け止める
   1カラム商品詳細テンプレート。
   - Hero にしない主画像（products.html カード相当スケール／contain／非拡大）
   - Thumbnail Gallery なし（.pd-gallery__thumb.is-current 不採用）
   - .product-content ＝ bare な semantic タグをそのまま整形
   - テーブルは wrapper 不要（CSSで横スクロール吸収・ページ横あふれ防止）
   - Local テーマ class の raw paste も 1カラムへ degrade する compat 層
   すべて common.css のトークン（紺・青・白／Typography／Hairline）を継承。
   JavaScript なし。
   ============================================================ */

/* ---- 1カラムの器 ---- */
.pdf { padding: 40px 0 72px; }
.pdf__inner {
  max-width: 900px;      /* 可読な measure。.container(1240) の内側で中央寄せ */
  margin: 0 auto;
}

/* ---- 商品ヘッダ（カテゴリ→商品名→既存情報→主画像→問い合わせ導線） ---- */
.pdf__cat {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  color: var(--blue-600);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
/* 商品名 ＋ Utility Action（商品資料を印刷）を同じ行に。
   Desktop：商品名の右。Mobile：情報ブロック内へ自然に折り返す。 */
.pdf__titlerow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.pdf__title {
  font-size: 30px;
  line-height: 1.4;
  color: var(--navy-900);
  margin: 0;
}
/* Utility Action：Primary CTA より弱く・本文リンクより見つけやすい補助リンク（ボタンにしない） */
.pdf__util {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-600);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 1px solid var(--gray-300);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.pdf__util::before {
  content: "";
  width: 14px; height: 14px;
  flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v5H6V3Zm-3 6h18a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3v3H6v-3H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Zm5 8v4h8v-4H8Zm11-4.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 3h12v5H6V3Zm-3 6h18a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-3v3H6v-3H3a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Zm5 8v4h8v-4H8Zm11-4.5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z'/%3E%3C/svg%3E");
}
.pdf__util:hover { color: var(--blue-500); border-color: var(--blue-400); }
/* 本文内（複数モデル等）へ置く場合の Utility Action（.product-content a より優先させる） */
.pdf__util--inline { font-size: 12px; margin: 2px 0 18px; }
.product-content a.pdf__util { color: var(--blue-600); text-decoration: none; }
.product-content a.pdf__util:hover { color: var(--blue-500); border-color: var(--blue-400); }
.pdf__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pdf__badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* Product Detail ヘッダー提供形態Chip（H1直下 .pdf__badges 直下のみ）を Archive/TOP と同じ「青塗り pill」へ揃える。
   DOM Reality: ヘッダーは <div class="pdf__badges"> 直下、本文 co-model は <p class="pdf__badges-inline"> 内。
   `.pdf__badges` と `.pdf__badges-inline` は別トークンのため、本ルールは本文 co-model の .pdf__badge に一切影響しない
   （co-model は上の bare .pdf__badge ＝ muted outline pill のまま不変）。文言・DOM・HTML は変更しない（CSS のみ）。
   specificity 0,2,0 が bare .pdf__badge(0,1,0) を上回りヘッダーのみ上書き。 */
.pdf__badges .pdf__badge {
  background: var(--blue-600);
  color: var(--white);
  border: none;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding: 4px 10px;
}
.pdf__code {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

/* ---- 主画像：Hero にしない。products.html の商品画像表示スケールを上限に。
        object-fit:contain／淡グレー背景／元サイズ以上に不自然拡大しない。 ---- */
.pdf__hero { margin: 22px 0 26px; }
.pdf__hero-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 400px;          /* ≒ products.html カード幅（3col/1240） */
  width: 100%;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 16px;
}
.pdf__hero-frame img {
  max-width: 100%;
  width: auto;               /* 小画像を強制拡大しない */
  height: auto;
  max-height: 340px;         /* 縦長画像が大きくなりすぎない */
  object-fit: contain;
  display: block;
}

/* Documentation Rhythm：主画像の直後は中間CTA/注意文を置かず、
   ヘアラインで区切って Flexible Content Area へ直接入る。
   問い合わせはヘッダー右上CTA／最下部共通CTAに委ねる（中間CTAは役割重複のため撤去）。 */
.pdf__divider { border: 0; border-top: 1px solid var(--gray-200); margin: 28px 0 32px; }

/* ============================================================
   FLEXIBLE CONTENT AREA — .product-content
   bare な semantic タグを個別CSSなしで受け止める主領域
   ============================================================ */
.product-content {
  font-size: 15px;
  line-height: 1.9;
  color: var(--text);
}
.product-content > *:first-child { margin-top: 0; }
.product-content > *:last-child { margin-bottom: 0; }
/* Heading-to-Content Rhythm v1：見出しブロック（H1→提供形態Chip→区切り線 <hr>）の「下余白」を
   見出しブロック側（区切り線 hr）が持つ。これにより線と本文先頭（見出し「特徴」/主画像/表/リスト）の
   詰まりを一律に解消し、本文先頭がどのタグでも同じ Heading Rhythm（24px）になる。
   margin collapse（隣接＝max 採用）により本文先頭要素の margin-top と重ならず二重余白は生じない。
   hr の線の見た目・位置・H1・提供形態Chip・semantic 構造は不変（下余白のみの調整）。 */
.pdf__inner > hr { margin-bottom: 24px; }
/* 主画像の「上余白依存」を解消：先頭画像は自前の上余白を持たず、上の hr（見出しブロック）の下余白に委ねる。
   旧 Visual Micro Refinement v1 の img:first-child 局所 margin（24px）を 0 に戻す。画像サイズ/fit/構造は不変。 */
.product-content > img:first-child { margin-top: 0; }

/* 見出し階層（h2＝大区分 / h3＝特長・仕様等 / h4・h5＝小見出し） */
.product-content h2 {
  font-size: 22px;
  line-height: 1.45;
  color: var(--navy-900);
  margin: 48px 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-200);
}
.product-content h3 {
  font-size: 18px;
  line-height: 1.5;
  color: var(--navy-900);
  margin: 34px 0 14px;
  padding-left: 12px;
  border-left: 4px solid var(--blue-600);
}
.product-content h4 {
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy-900);
  margin: 26px 0 10px;
}
.product-content h5 {
  font-size: 14px;
  line-height: 1.6;
  color: var(--navy-700);
  font-weight: 700;
  margin: 20px 0 8px;
}
.product-content h6 { font-size: 13px; color: var(--navy-700); font-weight: 700; margin: 18px 0 6px; }
/* <h3><span>特長</span></h3> のような span 入り見出しも素直に */
.product-content h2 span, .product-content h3 span,
.product-content h4 span, .product-content h5 span,
.product-content h6 span { font: inherit; color: inherit; }

/* 本文テキスト */
.product-content p { margin: 0 0 16px; }
.product-content ul, .product-content ol { margin: 0 0 18px; padding-left: 1.5em; }
.product-content li { margin-bottom: 6px; }
.product-content li::marker { color: var(--blue-500); }
.product-content a { color: var(--blue-600); text-decoration: underline; }
.product-content a:hover { color: var(--blue-500); }
.product-content strong, .product-content b { font-weight: 700; color: var(--navy-900); }
.product-content em { font-style: italic; }
.product-content blockquote {
  margin: 0 0 18px;
  padding: 12px 18px;
  border-left: 4px solid var(--gray-300);
  background: var(--gray-50);
  color: var(--text-muted);
  font-size: 14px;
}

/* 本文中の画像（1枚〜複数・小/横長/縦長・キャプション付き・文章と混在） */
.product-content img {
  max-width: 100%;    /* 器を超えない */
  width: auto;        /* 元サイズ以上に強制拡大しない（bare img は自然サイズが上限） */
  height: auto;
  display: block;
  margin: 16px 0;
  border-radius: var(--radius-sm);
}
.product-content figure { margin: 20px 0; }
.product-content figure img { margin: 0; }
.product-content figcaption {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-top: 8px;
}

/* ---- テーブル：wrapper 不要で成立させる ----
   display:block + width:fit-content + max-width:100% + overflow-x:auto により
   ・狭い仕様表は自然幅で左寄せ（間延びしない）
   ・横長表は表の外側だけ横スクロール（ページ全体は横あふれしない）
   ・rowspan / colspan / caption / th / br入りセルはそのまま
   ・長文セルは折り返す（white-space を nowrap で潰さない）
   任意で <div class="table-scroll"><table></div> の包みも同じ挙動で許容。 */
.product-content .table-scroll {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 22px;
}
.product-content table {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  border: 1px solid var(--gray-200);
  margin: 16px 0 22px;
  font-size: 14px;
}
.product-content .table-scroll table { margin: 0; max-width: none; width: auto; }
.product-content caption {
  display: block;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-700);
  padding: 0 0 8px;
}
.product-content th,
.product-content td {
  border: 1px solid var(--gray-200);
  padding: 9px 14px;
  text-align: left;
  vertical-align: middle;
  line-height: 1.6;
  white-space: normal;   /* 長文セルは折り返せる（全面 nowrap しない） */
}
.product-content th {
  background: var(--gray-100);
  color: var(--navy-900);
  font-weight: 700;
}

/* 複数表・表直後の注意書きの余白 */
.product-content table + p,
.product-content .table-scroll + p { margin-top: 4px; }
.product-content p.note,
.product-content .attention {
  font-size: 13px;
  color: var(--text-muted);
}

/* ============================================================
   Local テーマ class 互換層（raw paste tolerance）
   既存 post_content をそのまま貼っても 1カラムへ degrade する。
   ・2カラム float レイアウト（.tb .layoutN / .tl / .tr）→ 縦積み
   ・print専用 / JS開閉（.none .printon .subbox）→ 常時表示（JSなしで全内容へ到達）
   ・器 class（.block2 .box1..3 .content .main .detail_XX）→ 素通し
   これにより「移行時の毎回手作業」を最小化する。
   ============================================================ */
.product-content .content,
.product-content .main,
.product-content .block2,
.product-content .block3,
.product-content .box1,
.product-content .box2,
.product-content .box3,
.product-content .single_box,
.product-content .scroll,
.product-content .subbox,
.product-content .tb,
.product-content [class^="detail_"],
.product-content [class*=" detail_"] {
  display: block;
  width: auto;
  max-width: 100%;
  float: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.product-content .tl,
.product-content .tr {
  display: block;
  width: auto;
  float: none;
}
/* print専用 / JS開閉で隠れていた画像・データを常時表示 */
.product-content .none,
.product-content .printon { display: block; }
/* テーマの主タイトル行 .main_ttl（h2）内の名称/印刷リンク */
.product-content .main_ttl { border-bottom: 2px solid var(--gray-200); }
.product-content .main_ttl .tr { font-size: 13px; }
.product-content .flg1,
.product-content .flg2 {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  margin-left: 6px;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  color: var(--text-muted);
  vertical-align: middle;
}
/* テーマの画像幅 class を素通し（強制100%拡大を避ける） */
.product-content img.wd100,
.product-content img.tab100 { width: auto; max-width: 100%; }

/* ============================================================
   関連商品（products.html カードと同じ見え） — 任意
   ============================================================ */
.pdf-related { padding: 56px 0; background: var(--gray-100); border-top: 1px solid var(--gray-200); }
.pdf-related__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pdf-related .product-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pdf-related .product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pdf-related .product-card__thumb { aspect-ratio: 4/3; background: var(--gray-200); }
.pdf-related .product-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pdf-related .product-card__body { padding: 14px 16px; }
.pdf-related .product-card__cat { font-size: 11px; color: var(--blue-600); font-weight: 700; letter-spacing: 0.08em; margin-bottom: 4px; }
.pdf-related .product-card__name { font-size: 14px; color: var(--navy-900); font-weight: 700; line-height: 1.4; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .pdf__title { font-size: 24px; }
  .product-content h2 { font-size: 20px; }
  .product-content h3 { font-size: 17px; }
  .pdf-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pdf { padding: 28px 0 56px; }
  .product-content { font-size: 14px; }
  .pdf__hero-frame { max-width: 100%; }
  /* Heading-to-Content Rhythm v1（Mobile）：見出しブロック（hr）の下余白を Mobile リズム（20px）に。
     主画像の上余白依存は解消済み（0）。線と本文先頭の詰まりを Mobile でも一律に解消。 */
  .pdf__inner > hr { margin-bottom: 20px; }
  .product-content > img:first-child { margin-top: 0; }
  .pdf__title { font-size: 22px; }
  /* Mobile：Utility Action は商品名の右に置かず、情報ブロック内へ自然に折り返す */
  .pdf__titlerow { flex-direction: column; align-items: flex-start; gap: 10px; }
  .product-content th, .product-content td { padding: 8px 10px; }
}