/* =======================================================================
   製品詳細ページ show.css
   ======================================================================= */

/* ===== タイトルブロック ===== */
.product-detail__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28rem;
  width: 100%;
  margin-bottom: 40rem;
}

.product-detail__meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16rem;
  width: 100%;
}

.product-detail__code {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 500;
  color: var(--color-neutral-02, rgba(120, 120, 120, 1));
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 1;
  white-space: nowrap;
}

.product-detail__division-badge {
  display: inline-flex;
  height: 24rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 12rem;
  background-color: #46b5c3;
  border-radius: 12rem;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 1;
  white-space: nowrap;
}

.product-detail__cat-badge {
  display: inline-flex;
  height: 24rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 12rem;
  background-color: #ffffff;
  border-radius: 12rem;
  border: 1px solid var(--color-neutral-04, rgba(217, 217, 217, 0.88));
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-02, rgba(120, 120, 120, 1));
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 1;
  white-space: nowrap;
}

.product-detail__title-wrap {
  display: flex;
  align-items: center;
  gap: 8rem;
  padding: 4rem 0 4rem 28rem;
  width: 100%;
  box-sizing: border-box;
  border-left-width: 5rem;
  border-left-style: solid;
  border-color: transparent;
  border-image: linear-gradient(90deg, rgba(255, 145, 67, 1) 0%, rgba(255, 98, 67, 1) 100%) 1;
}

.product-detail__title {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 34rem;
  letter-spacing: 1.36rem;
  line-height: 1.8;
}

.product-detail__rule {
  width: 100%;
  height: 1px;
  background-color: var(--color-neutral-04, rgba(217, 217, 217, 0.88));
}

/* ===== 本文 2カラム ===== */
.product-detail__body {
  display: flex;
  align-items: flex-start;
  gap: 56rem;
  width: 100%;
}

/* ===== 左：ギャラリー ===== */
.product-detail__gallery {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24rem;
  flex: 0 0 auto;
  width: 520rem;
  max-width: 100%;
}

/* メイン画像 */
.product-detail__main-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24rem;
  overflow: hidden;
  background-color: #ffffff;
  padding: 20rem;
  box-sizing: border-box;
}

.product-detail__main-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.product-detail__no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-size: 14rem;
  color: var(--color-neutral-02, rgba(120, 120, 120, 1));
}

/* サムネイル列（矢印 + トラック）
   Figma 4568:392610 準拠: 32rem(arrow) / 9rem gap / 48rem(thumb) / ... / 9rem / 32rem(arrow) */
.product-detail__thumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 9rem;
}

.product-detail__thumb-arrow {
  flex: 0 0 32rem;
  width: 32rem;
  height: 32rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-detail__thumb-arrow img {
  width: 32rem;
  height: 32rem;
  display: block;
}

/* サムネイル表示トラック（矢印の間） */
.product-detail__thumb-track {
  display: flex;
  align-items: center;
  gap: 9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* 各サムネイルボタン */
.product-detail__thumb-btn {
  flex: 0 0 72rem;
  width: 72rem;
  height: 72rem;
  padding: 0;
  border: 2rem solid transparent;
  border-radius: 8rem;
  background: transparent;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  transition: border-color 0.12s ease;
}

.product-detail__thumb-btn.is-active {
  border-color: var(--color-key, rgba(255, 98, 67, 1));
}

.product-detail__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6rem;
}

/* ===== 右：スペック表 ===== */
.product-detail__info {
  flex: 1;
  min-width: 0;
}

/* スペック表のテーブル枠（table / row / key / divider）は共通 c-table（variant=ruled）へ移行済み
   （components/table.css）。以下は値セル内のスタイル（spec-val / spec-val-list / spec-btn 等）。 */

.product-detail__spec-val {
  flex: 1;
  min-width: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 14rem;
  letter-spacing: 0;
  line-height: 1.8;
  word-break: break-word;
}

/* 箇条書きリスト */
.product-detail__spec-val-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  flex: 1;
  min-width: 0;
}

.product-detail__spec-list-item {
  display: flex;
  align-items: flex-start;
  gap: 8rem;
  width: 100%;
}

.product-detail__spec-bullet {
  flex: 0 0 6rem;
  width: 6rem;
  height: 6rem;
  margin-top: calc(1.8em * 14rem / 2 - 3rem);
  margin-top: 10rem;
  background-color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  border-radius: 3rem;
  display: block;
}

.product-detail__spec-val-text {
  flex: 1;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 14rem;
  line-height: 1.8;
  word-break: break-word;
}

/* 値 + リンクボタン横並び */
.product-detail__spec-val-with-link {
  display: flex;
  align-items: center;
  gap: 16rem;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

/* pill ボタンは共通 c-button（tertiary-table / tertiary-table-download）へ委譲。
   値セル内で縮まないよう、レイアウト都合の flex-shrink のみ保持。 */
.product-detail__spec-val-with-link .c-button {
  flex-shrink: 0;
}

/* ===== メインコメント1（共通リッチ .c-rich に委譲） =====
   main_comment2 と同じく rich-content コンポーネント（Purifier works_rich ＋ .c-rich）で描画する。
   生出力（{!! !!}）だと Quill の contenteditable がフロントに残り編集可能になる／
   テーブル・横罫線の枠が出ない／未サニタイズ（XSS）になるため、c-rich 経由に統一。 */
.product-detail__main-comment {
  margin-top: 40rem;
  width: 100%;
}

.product-detail__main-comment .c-rich {
  --c-rich-pad-y: 0rem;
}

/* 自由入力欄の画像は本文幅いっぱい（works の 554px 中央寄せを上書き） */
.renewal-subpage-body .product-detail__main-comment .c-rich p > img:only-child {
  max-width: 100%;
}

/* メインコメント2（お問い合わせCTAの下 96px）
   共通リッチコンポーネント .c-rich に委譲。外側余白はここで持ち、
   .c-rich 自身の上下パディングは 0 にして二重余白を防ぐ
   （下の 96px は .pd-used の margin-top が担保）。 */
.product-detail__main-comment2 {
  margin-top: 96rem;
}

.product-detail__main-comment2 .c-rich {
  --c-rich-pad-y: 0rem;
}

/* 製品詳細の自由入力欄は全幅画像（Figma 5083:303282）。
   works の中央 554px ではなく、白枠・角丸のまま本文幅いっぱいに表示する。
   renewal-subpage.css の .c-rich p>img:only-child(554px) を上書きするため
   .renewal-subpage-body を含めて specificity を上げる。 */
.renewal-subpage-body .product-detail__main-comment2 .c-rich p > img:only-child {
  max-width: 100%;
}

/* SP：白枠余白を Figma 5919:40896（製品の特徴 SP）の 8px に合わせる
   （共通 .c-rich SP 既定の 16rem を製品スコープのみ上書き）。 */
@media (max-width: 1023.98px) {
  .renewal-subpage-body .product-detail__main-comment2 .c-rich p > img:only-child {
    padding: 8rem;
  }
}

/* 中段 CONTACT 帯（共通 c-contact-cta--middle / Figma 2092:44698 contect PC（S））
   印刷テンプレート〜本文リッチ領域の間に 96px の余白で挿入 */
.product-detail .c-contact-cta--middle {
  margin-top: 96rem;
}

/* ===== CTA ブロック ===== */
.product-detail__cta {
  margin-top: 56rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 外枠：lightorange-02 背景・4px 白ボーダー・border-radius 32px */
.product-detail__cta-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 64rem;
  padding: 56rem 0;
  background-color: var(--color-light-orange-02, rgba(252, 233, 221, 1));
  border-radius: 32rem;
  border: 4rem solid #ffffff;
  width: 100%;
  box-sizing: border-box;
}

/* 各ブロック（リード + ボタン）— ボタン幅にフィット（440px）、横並びは中央寄せ */
.product-detail__cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
  flex: 0 0 auto;
  min-width: 0;
}

/* リード行（オレンジドット + テキスト） */
.product-detail__cta-lead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10rem;
}

/* オレンジグラデーション小ドット（8×8px） */
.product-detail__cta-dot {
  display: block;
  width: 8rem;
  height: 8rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, rgba(255, 145, 67, 1) 0%, rgba(255, 98, 67, 1) 100%);
  flex-shrink: 0;
}

.product-detail__cta-lead-text {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.8rem;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
}

/* パンフレット文の SP 専用改行。PC は 1 行（br を無効化）。 */
.product-detail__cta-lead-br {
  display: none;
}

/* CTA ボタン本体は共通 c-button（secondary-cta / primary）に委譲。
   ここは横幅・配置のみ受け持つ（SP 文字サイズは下の @media で調整）。 */
.product-detail__cta-btn {
  width: 440rem;
  max-width: 100%;
  margin-top: auto;
}

/* 縦区切り線（CTA 2カラム中央のライン）— 1px 幅で内枠の高さに合わせて伸びる */
.product-detail__cta-divider {
  flex-shrink: 0;
  align-self: stretch;
  width: 1px;
  height: auto;
  margin: 0;
  padding: 0;
  border: none;
  background-color: #f1d1bf;
}

/* SP 対応 */
@media (max-width: 1023.98px) {
  /* products-show SP の .container は左右 20rem ガター（show.css の
     .product-detail__info calc ハック都合で 16rem へ縮められない）。
     一方 Figma 商品詳細SP（Contents 358 / page 390）は左右 16rem ガターで
     CTA カード内コンテンツ幅 294px が前提。20rem ガターのままだと内寸が 8px
     狭く、リード文が「まとめ／て」「パン／フレット」と語中で不自然に折り返す。
     CTA カードのみ左右 -4rem の負マージンで Figma の 16rem ガター幅へ広げ、
     パディング 32rem（Figma 準拠）を保ったまま内寸 294px を確保する。 */
  .product-detail__cta {
    margin-left: -4rem;
    margin-right: -4rem;
    width: calc(100% + 8rem);
  }

  /* ===== 外枠：縦積み・gap 24px ===== */
  /* 左右パディングは 28rem。Figma の左右パディングは 32px だが、Figma の 4px
     白ストロークはレイアウト幅を消費しない（パディング領域に重なる）のに対し、
     CSS は box-sizing:border-box で 4px ボーダーが内寸を各 4px 食う。
     padding 32 のままだと内寸 286px（= 358 − 8border − 64padding）となり Figma
     の内寸 294px に 8px 足りずリードが語中で折返す。padding を 28 に下げると
     内寸 294px（= 358 − 8border − 56padding）= Figma 準拠、かつカード端からの
     視覚的インセットは border4 + padding28 = 32px で Figma と一致する。 */
  .product-detail__cta-inner {
    flex-direction: column;
    align-items: center;
    gap: 24rem;
    padding: 40rem 28rem;
  }

  /* 各ブロック：縦積み・gap 8px・センター揃え（リード→ボタン） */
  .product-detail__cta-block {
    flex: none;
    width: 100%;
    gap: 8rem;
  }

  /* リード行：ドット + テキスト
     SP では 1 行に収まらず 2 行へ折り返すケースがある（例「複数の商品をまとめて
     お問い合わせできます」20 字）。flex 配置だとテキスト span が残り幅いっぱいまで
     伸び、ドットだけが左端に取り残されて中央から離れてしまう。
     そこで SP は inline 中央寄せに切替え、ドットをテキスト先頭にぶら下げて
     [ドット＋テキスト] のまとまりごと中央寄せ・1 行目にドットを揃える。
     ※ width:100% を必ず指定する。block のまま幅未指定だと中央寄せ flex カラム
       （align-items:center）内で内容幅へ収縮し、本来 1 行（実寸 288px < 内寸 294px）
       で収まる問い合わせリードまで text-wrap:balance で 2 行に均等折返しされて
       「複数の商品をまとめ／て…」と語中で割れてしまう。 */
  .product-detail__cta-lead {
    display: block;
    width: 100%;
    text-align: center;
    /* text-wrap:balance は使わない。問い合わせ文は 1 行（288px < 内寸 294px）で
       収まるのに balance が 2 行へ均等折返しして「複数の商品をまとめ／て…」と
       割れ、パンフレット文も「パン／フレット」と語中で割れていた。
       問い合わせ＝1 行・パンフレット＝SP 専用 br で「…を／ご覧…」と
       明示的に 2 行へ折る方式に統一する。 */
  }

  /* SP のみ：パンフレット文を「この製品のデジタルパンフレットを」/「ご覧いただけます」
     の 2 行へ。br を有効化（PC は上の既定 display:none で 1 行）。 */
  .product-detail__cta-lead-br {
    display: inline;
  }

  .product-detail__cta-dot {
    display: inline-block;
    margin-top: 0;
    margin-right: 10rem;
    /* 1 行目テキストの中央付近にドットを合わせる */
    vertical-align: 2rem;
  }

  .product-detail__cta-lead-text {
    display: inline;
    white-space: normal;
    font-size: 13rem;
    font-weight: 700;
    color: var(--color-neutral-01, rgba(51, 51, 51, 1));
    letter-spacing: 0.52rem;
    line-height: 1.8;
  }

  /* ボタン：SP は横幅いっぱい・文字 14px（本体は共通 c-button） */
  .product-detail__cta-btn {
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    font-size: 14rem;
    letter-spacing: 0.84rem;
  }

  /* 区切り線：ドット線（border-top dotted・横幅100%） */
  .product-detail__cta-divider {
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
    background: none;
    background-color: transparent;
    border: 0;
    border-top: 2rem dotted #f1d1bf;
  }

  /* 表示順：お問い合わせ（primary）→ 区切り線 → パンフレット（secondary） */
  .product-detail__cta-block--inquiry {
    order: 1;
  }

  .product-detail__cta-divider {
    order: 2;
  }

  .product-detail__cta-block--pamphlet {
    order: 3;
  }
}

/* ===== この製品の製作実績 ===== */
.pdw {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40rem;
  margin-top: 40rem;
  width: 100%;
}

/* 見出し */
/* pdw の見出し（旧 __head/__head-inner/__title-wrap/__title/__head-line）は
   共通 c-section-heading（variant=bar）へ移行済み（components/section-heading.css）。 */

/* メイン実績コンテナ */
.pdw__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 56rem;
  width: 100%;
}

/* メイン：テキスト＋画像 横並び */
.pdw__main-row {
  display: flex;
  align-items: flex-start;
  gap: 48rem;
  width: 100%;
}

/* テキストエリア */
.pdw__main-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
  flex: 1;
  flex-grow: 1;
}

.pdw__main-client {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0;
  line-height: 2;
}

.pdw__main-h {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pdw__main-tit {
  padding-bottom: 16rem;
}

.pdw__main-title {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 28rem;
  letter-spacing: 1.12rem;
  line-height: 1.5;
}

.pdw__main-rule {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.pdw__main-rule-accent {
  display: block;
  width: 100rem;
  height: 2rem;
  background-color: var(--color-key, rgba(255, 98, 67, 1));
  flex-shrink: 0;
}

.pdw__main-rule-line {
  display: block;
  flex: 1;
  height: 1px;
  background-color: var(--color-neutral-04, rgba(217, 217, 217, 0.88));
}

.pdw__main-tags {
  display: inline-flex;
  align-items: center;
  gap: 12rem;
  flex-wrap: wrap;
}

.pdw__main-desc {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 1.8;
}

/* 画像エリア */
.pdw__main-img-wrap {
  display: flex;
  width: 480rem;
  height: 480rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 32rem;
  background-color: #ffffff;
  border-radius: 32rem;
  box-sizing: border-box;
  overflow: hidden;
}

.pdw__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16rem;
}

.pdw__main-no-img {
  width: 100%;
  height: 100%;
  background-color: var(--color-neutral-04, rgba(217, 217, 217, 0.88));
  border-radius: 16rem;
}

/* 「この実績を詳しく見る」ボタン */
.pdw__main-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* pill（白地・オレンジ枠・h56・hover）は c-button--primary-white に委譲。ここは幅のみ。 */
.pdw__link-btn {
  width: 264rem;
}

/* タグ（共通） */
.pdw__tag {
  display: inline-flex;
  height: 24rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 12rem;
  border-radius: 12rem;
  background-color: #ffffff;
  border: 1px solid var(--color-neutral-04, rgba(217, 217, 217, 0.88));
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-02, rgba(133, 133, 133, 1));
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 18rem;
  white-space: nowrap;
}
/* インタビューあり: セカンダリ塗り（c-card__tag--interview と統一） */
.pdw__tag--interview {
  color: var(--color-white);
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ===== その他の製作実績 ===== */
.pdw__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40rem;
  width: 100%;
}

/* 「その他の製作実績」見出し（旧 __sub-h/__sub-h-dot/__sub-title）は
   共通 c-section-heading（variant=accent-dot）へ移行済み。 */

/* 製作実績一覧ボタン（カードと 56px 空ける：親 gap 40px + margin-top 16px） */
.pdw__sub-btn-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: 16rem;
}

/* ===== SP 対応 ===== */
@media (max-width: 1023.98px) {
  .pdw {
    margin-top: 40rem;
    gap: 32rem;
  }

  .pdw__main-row {
    flex-direction: column;
    gap: 32rem;
  }

  .pdw__main-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .pdw__link-btn {
    width: 100%;
    max-width: 314rem;
  }
}

/* ===== サブCTA ===== */
.pd-sub-cta {
  margin-top: 40rem;
  width: 100%;
}

.pd-sub-cta__inner {
  display: flex;
  align-items: center;
  gap: 64rem;
  width: 100%;
  padding: 56rem 0;
  background-color: var(--color-bg-02, rgba(245, 242, 240, 1));
  border-radius: 32rem;
  border: 4rem solid #ffffff;
  box-sizing: border-box;
  justify-content: center;
}

/* 各ブロック（左・右） */
.pd-sub-cta__block {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 16rem;
}

/* リード行 */
.pd-sub-cta__lead-row {
  display: inline-flex;
  /* リード文が2行に折り返した際、ドットを行の縦中央（=2行の真ん中）ではなく
     1行目テキストに合わせる（No.14 / 製品詳細フィードバック）。 */
  align-items: flex-start;
  justify-content: center;
  gap: 10rem;
}

/* オレンジドット */
.pd-sub-cta__dot {
  display: block;
  width: 8rem;
  height: 8rem;
  /* 1行目テキストの光学的中央へ。(line-height ≈ 22rem - dot 8rem) / 2 ≈ 7rem */
  margin-top: 7rem;
  border-radius: 2rem;
  background: linear-gradient(90deg, rgba(255, 145, 67, 1) 0%, rgba(255, 98, 67, 1) 100%);
  flex-shrink: 0;
}

.pd-sub-cta__lead-text {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.8rem;
  line-height: normal;
  white-space: nowrap;
}

/* ボタン: pill は c-button--primary-white に委譲。ここは幅のみ。 */
.pd-sub-cta__btn {
  width: 450rem;
}

/* 縦区切り線 */
.pd-sub-cta__divider {
  align-self: stretch;
  width: 1px;
  flex-shrink: 0;
}

/* ===== SP 対応 ===== */
@media (max-width: 1023.98px) {
  .pd-sub-cta__inner {
    flex-direction: column;
    gap: 32rem;
    padding: 40rem 24rem;
  }

  .pd-sub-cta__divider {
    display: none;
  }

  .pd-sub-cta__btn {
    width: 100%;
    max-width: 440rem;
  }

  /* SP はリード文が2行に折り返す（dot の1行目合わせは基底ルールで対応済み）。 */
  .pd-sub-cta__lead-text {
    white-space: normal;
    text-align: center;
  }
}

/* ===== 使用している製品 ===== */
.pd-used {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40rem;
  margin-top: 96rem;
  width: 100%;
}

/* 左サイドバー */
.pd-used__sidebar {
  display: flex;
  flex-direction: column;
  width: 280rem;
  flex-shrink: 0;
  gap: 40rem;
}

/* 「使用している製品」見出し（旧 __h/__tit/__title/__rule/__rule-accent/__rule-line）は
   共通 c-section-heading（variant=accent）へ移行済み。 */

.pd-used__lead {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 1.8;
}

/* 右：カードリスト（PCはデザイン通り padding なし、カードはコンテナ内幅いっぱい） */
.pd-used__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32rem;
  background-color: var(--color-bg-01, rgba(249, 246, 244, 1));
  border-radius: 40rem;
  padding: 0;
}

/* 各カード（リンク） */
.pd-used__card {
  display: flex;
  align-items: center;
  gap: 32rem;
  height: 232rem;
  padding: 16rem 32rem 16rem 24rem;
  background-color: #ffffff;
  border-radius: 24rem;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.12s ease;
}

.pd-used__card:hover {
  background-color: var(--color-light-orange-02, rgba(252, 233, 221, 1));
}

.pd-used__card-inner {
  display: flex;
  align-items: center;
  gap: 24rem;
  flex: 1;
  flex-grow: 1;
}

/* 画像 */
.pd-used__img-wrap {
  display: flex;
  width: 200rem;
  height: 200rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 24rem;
  overflow: hidden;
}

.pd-used__img {
  width: 180rem;
  height: 180rem;
  object-fit: cover;
  border-radius: 12rem;
}

.pd-used__no-img {
  width: 180rem;
  height: 180rem;
  background-color: var(--color-neutral-04, rgba(217, 217, 217, 0.88));
  border-radius: 12rem;
}

/* テキストエリア */
.pd-used__body {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding: 0 8rem;
  flex: 1;
}

.pd-used__name-wrap,
.pd-used__desc-wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.pd-used__name {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 18rem;
  letter-spacing: 0.72rem;
  line-height: 1.8;
}

.pd-used__desc {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: 1.8;
}

/* タグ */
.pd-used__tags {
  display: inline-flex;
  align-items: flex-start;
  gap: 8rem;
  flex-wrap: wrap;
}

.pd-used__tag {
  display: inline-flex;
  height: 24rem;
  align-items: center;
  justify-content: center;
  padding: 3rem 12rem;
  border-radius: 12rem;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 12rem;
  letter-spacing: 0.48rem;
  line-height: 18rem;
  white-space: nowrap;
}

.pd-used__tag--primary {
  background-color: #649fd4;
  color: #ffffff;
}

.pd-used__tag--secondary {
  background-color: #ffffff;
  color: var(--color-neutral-02, rgba(133, 133, 133, 1));
  border: 1px solid var(--color-neutral-04, rgba(217, 217, 217, 0.88));
}

/* リンクアイコン */
.pd-used__link-icon {
  display: block;
  width: 14rem;
  height: 14rem;
  flex-shrink: 0;
}

/* ボタン */
.pd-used__btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 56rem;
}

/* ===== SP 対応 ===== */
@media (max-width: 1023.98px) {
  .pd-used {
    flex-direction: column;
    margin-top: 64rem;
    gap: 32rem;
  }

  .pd-used__sidebar {
    width: 100%;
    gap: 24rem;
  }

  .pd-used__list {
    padding: 24rem 16rem;
    border-radius: 24rem;
  }

  /* SP は Figma 5083:291035 準拠。横型カード（画像左）に揃える。
     ・カード = 横並び / 矢印は上下中央
     ・card-inner = 2 段グリッド: 上段[画像 120｜製品名] / 下段[タグ全幅]
     ・説明文(__desc)は SP では非表示
     旧実装は画像を上に全幅で積んでいたため No.13（画像・タイトル・タグ・矢印の位置差）。 */
  .pd-used__card {
    height: auto;
    flex-direction: row;
    align-items: center;
    padding: 16rem;
    gap: 16rem;
  }

  .pd-used__card-inner {
    display: grid;
    grid-template-columns: 120rem 1fr;
    column-gap: 16rem;
    row-gap: 8rem;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
  }

  /* body をグリッドへ透過させ、名前/説明/タグを card-inner の直接アイテムにする */
  .pd-used__body {
    display: contents;
  }

  .pd-used__img-wrap {
    grid-column: 1;
    grid-row: 1;
    width: 120rem;
    height: 120rem;
    border-radius: 8.96rem;
  }

  .pd-used__img,
  .pd-used__no-img {
    width: 100rem;
    height: 100rem;
    border-radius: 8rem;
  }

  .pd-used__name-wrap {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .pd-used__name {
    font-size: 14rem;
    letter-spacing: 0.56rem;
    line-height: 1.8;
  }

  /* 説明文は SP 非表示（Figma） */
  .pd-used__desc-wrap {
    display: none;
  }

  /* タグは下段に全幅（左右 8rem の内側パディング） */
  .pd-used__tags {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 8rem;
    gap: 8rem;
    flex-wrap: wrap;
  }

  .pd-used__tag {
    height: 20rem;
    font-size: 11rem;
    line-height: 1.5;
    letter-spacing: 0.55rem;
  }

  .pd-used__tag--primary {
    padding: 2rem 12rem;
  }

  .pd-used__tag--secondary {
    padding: 3rem 12rem;
  }
}

/* ===== 利用可能な梱包パッケージ ===== */
.pd-pkg {
  display: flex;
  align-items: flex-start;
  gap: 40rem;
  margin-top: 56rem;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 左サイドバー */
.pd-pkg__sidebar {
  display: flex;
  flex-direction: column;
  width: 280rem;
  flex-shrink: 0;
  gap: 40rem;
}

/* 「利用可能な梱包パッケージ」見出し（旧 __h/__tit/__title/__rule/__rule-accent/__rule-line）は
   共通 c-section-heading（variant=accent）へ移行済み。 */

.pd-pkg__lead {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 1.8;
}

/* 右：カードリスト */
.pd-pkg__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32rem;
  background-color: var(--color-bg-01, rgba(251, 249, 248, 1));
  border-radius: 40rem;
  padding: 32rem;
}

/* 各カード */
.pd-pkg__card {
  display: flex;
  align-items: center;
  gap: 24rem;
  padding: 24rem 32rem 24rem 24rem;
  background-color: #ffffff;
  border-radius: 24rem;
}

/* 画像エリア */
.pd-pkg__card-img-wrap {
  display: flex;
  width: 200rem;
  height: 200rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 24rem;
  overflow: hidden;
}

.pd-pkg__card-img {
  width: 172rem;
  height: 172rem;
  object-fit: cover;
  border-radius: 0;
}

.pd-pkg__card-no-img {
  width: 172rem;
  height: 172rem;
  background-color: var(--color-neutral-04, rgba(217, 217, 217, 0.88));
  border-radius: 12rem;
}

/* テキストエリア */
.pd-pkg__card-body {
  display: flex;
  flex-direction: column;
  gap: 16rem;
  padding: 0 8rem;
  flex: 1;
}

.pd-pkg__card-title-row {
  display: flex;
  align-items: center;
  padding: 6rem 0;
  border-bottom: 1px solid var(--color-neutral-04, rgba(217, 217, 217, 0.88));
}

.pd-pkg__card-title {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-key, rgba(255, 98, 67, 1));
  font-size: 18rem;
  letter-spacing: 0.72rem;
  line-height: 1.8;
}

.pd-pkg__card-desc {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

.pd-pkg__card-desc-text {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: 1.8;
}

/* ===== SP 対応 ===== */
@media (max-width: 1023.98px) {
  .pd-pkg {
    flex-direction: column;
    margin-top: 56rem;
    gap: 32rem;
  }

  .pd-pkg__sidebar {
    width: 100%;
    gap: 24rem;
  }

  .pd-pkg__lead {
    font-weight: 400;
  }

  /* リスト：背景パネル（padding 0・gap 16px・角丸 40px） */
  .pd-pkg__list {
    padding: 0;
    border-radius: 40rem;
    width: 100%;
    gap: 16rem;
  }

  /* カード：中央寄せ・角丸 32px・padding 24px 24px 32px */
  .pd-pkg__card {
    flex-direction: column;
    align-items: center;
    padding: 24rem 24rem 32rem;
    gap: 8rem;
    border-radius: 32rem;
  }

  /* 画像：130 × 130 を中央配置 */
  .pd-pkg__card-img-wrap {
    width: 130rem;
    height: 130rem;
  }

  .pd-pkg__card-img,
  .pd-pkg__card-no-img {
    width: 130rem;
    height: 130rem;
    border-radius: 12rem;
  }

  .pd-pkg__card-body {
    width: 100%;
    padding: 0;
  }

  .pd-pkg__card-title-row,
  .pd-pkg__card-desc {
    width: 100%;
  }
}

/* 他の梱包パッケージはこちら ボタン */
.pd-pkg__btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 56rem;
}

.pd-pkg__btn-wrap--standalone {
  margin-top: 96rem;
}

/* pill は c-button--primary-white に委譲。最小幅のみ（↗ は中央寄せグループ）。 */
.pd-pkg__link-btn {
  min-width: 314rem;
}

@media (max-width: 1023.98px) {
  .pd-pkg__link-btn {
    /* 固定 width だと長い文言（例「その他のオリジナルグッズはこちら」）で
       中身がはみ出し矢印が右枠に張り付くため、min-width で内容に追従させる。
       max-width:100% でコンテナ幅は超えない。*/
    min-width: 287rem;
    max-width: 100%;
    font-size: 14rem; /* SP は 14px（c-button base 16px を上書き。本体に font-size が乗る） */
  }

  .pd-pkg__btn-wrap {
    margin-top: 32rem;
  }

  .pd-pkg__btn-wrap--standalone {
    margin-top: 56rem;
  }
}

/* ===== 製品を購入する ===== */
.pd-buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32rem;
  margin-top: 96rem;
  padding-bottom: 96rem;
  width: 100%;
  position: relative;
  z-index: 0;
}

.pd-buy::before {
  content: "";
  position: absolute;
  top: -200rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: calc(100% + 200px);
  background-color: #ffffff;
  z-index: -1;
  pointer-events: none;
}

/* 「製品を購入する」見出し（旧 __h/__tit/__title/__rule/__rule-accent/__rule-line）は
   共通 c-section-heading（variant=accent）へ移行済み。 */

/* リードテキスト */
.pd-buy__lead {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 1.8;
  width: 100%;
}

/* ショップグリッド（3列×2行） */
.pd-buy__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24rem;
  width: 100%;
}

/* 各ショップカード */
.pd-buy__card {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5rem;
  height: 80rem;
  padding: 16rem 24rem;
  background-color: #ffffff;
  border-radius: 16rem;
  border: 2rem solid var(--color-light-orange-01, rgba(255, 213, 178, 1));
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.pd-buy__card:hover {
  background-color: var(--color-light-orange-02, rgba(252, 233, 221, 1));
}

/* カード内側（ロゴ + "で購入"） */
.pd-buy__card-inner {
  display: flex;
  align-items: center;
  gap: 16rem;
  padding-left: 16rem;
  flex: 1;
  align-self: stretch;
}

.pd-buy__logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

/* ロゴ画像サイズ（各サービスに合わせて調整） */
.pd-buy__logo {
  display: block;
  height: auto;
  width: auto;
  max-height: 48rem;
  object-fit: contain;
}

.pd-buy__logo--b2b    { width: 155rem; max-height: 48rem; }
.pd-buy__logo--shp    { width: 150rem; max-height: 40rem; }
.pd-buy__logo--yahoo  { width: 160rem; max-height: 48rem; }
.pd-buy__logo--amazon { width: 110rem; max-height: 48rem; }
.pd-buy__logo--rakuten{ width: 120rem; max-height: 44rem; }

/* マイデザアートはテキストロゴ */
.pd-buy__logo-text {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14rem;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  white-space: nowrap;
}

/* 矢印アイコン */
.pd-buy__arrow {
  display: block;
  width: 18rem;
  height: 19rem;
  flex-shrink: 0;
}

/* ===== SP 対応 ===== */
@media (max-width: 1023.98px) {
  .pd-buy {
    margin-top: 64rem;
    padding-bottom: 64rem;
    gap: 24rem;
  }

  .pd-buy__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16rem;
  }

  /* 2カラム時のカード幅にロゴ固定幅(155〜160rem)が収まらず右へはみ出すため、
     ロゴ枠を縮小許可＋画像を max-width:100% で可変にする（No.15）。 */
  .pd-buy__card-inner {
    min-width: 0;
    padding-left: 8rem;
    gap: 8rem;
  }

  .pd-buy__logo-wrap {
    flex-shrink: 1;
    min-width: 0;
  }

  .pd-buy__logo {
    max-width: 100%;
  }
}

@media (max-width: 479.98px) {
  .pd-buy__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== 印刷テンプレート ===== */
.pd-tpl {
  display: flex;
  align-items: flex-start;
  gap: 40rem;
  margin-top: 192rem;
  width: 100%;
}

/* 左サイドバー */
.pd-tpl__sidebar {
  display: flex;
  flex-direction: column;
  width: 280rem;
  flex-shrink: 0;
  gap: 40rem;
}

/* 「印刷テンプレート」見出し（旧 __h/__tit/__title/__rule/__rule-accent/__rule-line）は
   共通 c-section-heading（variant=accent）へ移行済み。 */

.pd-tpl__lead {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 16rem;
  letter-spacing: 0.64rem;
  line-height: 1.8;
}

/* 右：カードリスト */
.pd-tpl__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 32rem;
  background-color: var(--color-bg-01, rgba(249, 246, 244, 1));
  border-radius: 40rem;
}

/* カード */
.pd-tpl__card {
  display: flex;
  align-items: center;
  gap: 24rem;
  padding: 24rem 32rem 24rem 24rem;
  background-color: #ffffff;
  border-radius: 24rem;
}

/* 画像エリア */
.pd-tpl__card-img-wrap {
  display: flex;
  width: 200rem;
  height: 200rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 24rem;
  overflow: hidden;
}

.pd-tpl__card-img {
  width: 180rem;
  height: 180rem;
  object-fit: cover;
  border-radius: 12rem;
}

.pd-tpl__card-no-img {
  width: 180rem;
  height: 180rem;
  background-color: var(--color-neutral-04, rgba(217, 217, 217, 0.88));
  border-radius: 12rem;
}

/* テキストエリア */
.pd-tpl__card-body {
  display: flex;
  flex-direction: column;
  gap: 8rem;
  padding: 0 8rem;
  flex: 1;
}

.pd-tpl__card-title-row {
  display: flex;
  align-items: flex-start;
  padding-bottom: 4rem;
}

.pd-tpl__card-title {
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 700;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 18rem;
  letter-spacing: 0.72rem;
  line-height: 1.8;
}

.pd-tpl__card-desc {
  margin: 0;
  font-family: "Noto Sans JP", Helvetica, sans-serif;
  font-weight: 400;
  color: var(--color-neutral-01, rgba(51, 51, 51, 1));
  font-size: 14rem;
  letter-spacing: 0.56rem;
  line-height: 1.8;
}

/* ダウンロードボタン本体は共通 c-button--download に委譲。ここは配置のみ。 */
.pd-tpl__dl-btn {
  flex-shrink: 0;
}

/* ===== SP 対応 ===== */
@media (max-width: 1023.98px) {
  .pd-tpl {
    flex-direction: column;
    margin-top: 64rem;
    gap: 32rem;
  }

  .pd-tpl__sidebar {
    width: 100%;
    gap: 24rem;
  }

  .pd-tpl__list {
    padding: 24rem 16rem;
    border-radius: 24rem;
    width: 100%;
  }

  .pd-tpl__card {
    flex-direction: column;
    align-items: flex-start;
    padding: 20rem 16rem;
    gap: 20rem;
  }

  .pd-tpl__card-img-wrap {
    width: 100%;
    height: 200rem;
  }

  .pd-tpl__card-img {
    width: auto;
    height: 180rem;
  }

  .pd-tpl__dl-btn {
    width: 100%;
    max-width: 280rem;
  }
}

/* ===== レスポンシブ ===== */
@media (max-width: 1099.98px) {
  .product-detail__gallery {
    width: 420rem;
  }
  .product-detail__body {
    gap: 40rem;
  }
}

@media (max-width: 1023.98px) {
  /* ===== ヘッダー（コード / バッジ / タイトル / 区切り線） ===== */
  .product-detail__head {
    gap: 14rem;
    margin-bottom: 32rem;
  }

  /* 製品コードはバッジ列の上に独立表示（コードのみ強制改行、バッジは横並び） */
  .product-detail__meta-row {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 12rem;
    column-gap: 8rem;
  }

  .product-detail__code {
    flex: 0 0 100%;
    width: 100%;
    font-size: 16rem;
    letter-spacing: 0.8rem;
    line-height: 1;
  }

  /* バッジ（区分・カテゴリ）— デザインの SP 寸法に合わせる */
  .product-detail__division-badge,
  .product-detail__cat-badge {
    height: 22rem;
    padding: 2rem 12rem;
    font-size: 11rem;
    letter-spacing: 0.55rem;
    line-height: 1.5;
  }

  .product-detail__title-wrap {
    padding: 4rem 0 4rem 16rem;
  }

  .product-detail__title {
    margin-top: -5rem;
    font-size: 24rem;
    letter-spacing: 1.2rem;
    line-height: 1.8;
  }

  /* ===== 本文 縦積み ===== */
  .product-detail__body {
    flex-direction: column;
    gap: 32rem;
  }

  /* ===== 左：ギャラリー ===== */
  .product-detail__gallery {
    width: 100%;
    gap: 24rem;
  }

  .product-detail__main-img-wrap {
    border-radius: 32rem;
    background-color: #ffffff;
  }

  .product-detail__main-img {
    border-radius: 32rem;
  }

  .product-detail__thumb-btn {
    flex: 0 0 48rem;
    width: 48rem;
    height: 48rem;
    border-radius: 4rem;
  }

  .product-detail__thumb-img {
    border-radius: 0;
  }

  /* ===== 右：スペック表 =====
     SP の縦積み（ラベル上 / 値下）とラベル列幅は共通 c-table（variant=ruled）の
     @media(max-width:1023.98px) で処理。ここは info の幅調整と値セル内タイポのみ。 */

  /* SP では右側を画面端まで伸ばす（.container の右 padding 20px を相殺）
     width も calc で +20px して確実にコンテナ右 padding を超えるようにする */
  .product-detail__info {
    width: calc(100% + 20px);
    max-width: calc(100% + 20px);
    margin-right: -20rem;
  }

  .product-detail__spec-val,
  .product-detail__spec-val-text {
    font-size: 14rem;
    letter-spacing: 0.56rem;
    line-height: 1.8;
  }

  /* ラベル下に値が積まれるため、bullet のオフセットを揃える */
  .product-detail__spec-bullet {
    margin-top: 10rem;
  }

  /* 値 + リンクボタン（品質基準 / ダウンロード）の行 */
  .product-detail__spec-val-with-link {
    width: 100%;
    gap: 16rem;
  }

  /* ===== 説明文（main_comment）SP — 余白のみ。タイポ/パディングは .c-rich 側 ===== */
  .product-detail__main-comment {
    margin-top: 32rem;
  }
}

/* =============================================
   よく組み合わせられるパーツ (combi-parts)
   ED5yN カードスタイル準拠
   ============================================= */

.combi-parts {
  margin-top: 40rem;
}

/* 見出し（左オレンジグラデ縦線 + タイトル + 1px水平線） */
.combi-parts__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28rem;
  width: 100%;
  margin-bottom: 40rem;
}

/* combi-parts の見出し（旧 __title-wrap/__title/__head-line）は共通
   c-section-heading（variant=bar）へ移行済み。__head は余白ラッパとして残置。 */

/* ボタン */
.combi-parts__btn-wrap {
  margin-top: 56rem;
  margin-bottom: 40rem;
  display: flex;
  justify-content: center;
}