@charset "UTF-8";
/**
 * product.css — 製品一覧（固定ページ slug: product ／ WP 固定ページ ID 369）
 *
 * Figma  : under 489:7749 ／ 1440×6227
 * inspect: figma-dump/inspect/under/product_list.txt（寸法の正本）
 * カンプ : figma-dump/screenshots/under/product_list.png（等倍 1440px）
 * HTML   : page-product.php ／ template-parts/under/product/*.php
 *
 * 接頭辞 .plt-。BEM（Block__Element--Modifier）。common.css の既存クラスと同名は作らない。
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 *
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 ＝ vw」＝ clamp(下限, 実測px/14.4 vw, 実測px)。
 * clamp の下限は SP カンプが無いため当方設計（目安は上限の6〜7割・本文は 1.4rem を下回らせない）。
 * 実測 14px の本文はその 1.4rem と同値なので clamp を使わず固定にしている（40_price.css 235行と同じ扱い）。
 *
 * 固定 px / rem を使ってよいのは (1) コンテナの max-width (2) 1px・2px の罫線と 5px 以下の角丸
 * (3) 固定でないと整わない場合 の3つだけ。使った箇所には理由を1行で書いてある。
 *
 * common.css から流用していて、ここでは再定義しないもの
 *   .page-title / .page-title__title      1117〜1133行（冒頭の赤グラデ帯）
 *   .bread                                1150行（kennet_breadcrumb() が出力）
 *   .heading-01 / __title / __label       951〜970行（各セクションの見出し）
 *   .heading3--2                          935〜948行（黒帯の h3。カンプ h3_deco と同値）
 *   .ar / .ar--white / .ar--2-white / .ar--2-down   725行〜（矢印）
 *   CSS 変数                               16〜49行
 *
 * このページに #333333（text_black）は出てこないため、変数の追加は無し。
 */


/* ============================================================
   0. 内容枠 .plt-inner
   common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため
   1440px 表示で内容幅が 1121px になり、本ページのカンプ（内容幅 1200px）と食い違う。
   .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」方式にする
   （WEB版イヤホンガイドの .wgd-inner と同じ式）。
   ============================================================ */
.plt-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 固定: 1200 + 80 = 1280。コンテナの最大幅は固定値で持つ */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}


/* ============================================================
   1. lead（リード文）
   Figma contents_inner [0,382,1440,440]。パンくずの直後に余白ゼロで続く。
   ============================================================ */
.plt-lead__text {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.8; /* 実測 lh28.8 / 16 */
  letter-spacing: .05em;
  text-align: center;
}


/* ============================================================
   2. pagelink（ページの目次）
   Figma page_link [0,440,1440,671] pad(20,0,80,0)
        灰帯 wrap  [0,460,1440,591]（画面幅いっぱい・#F6F6F6・pad(20,0,30,0)・gap10）
   ============================================================ */
.plt-pagelink {
  padding-block: clamp(1.6rem, 1.39vw, 2rem) clamp(5rem, 5.56vw, 8rem); /* 実測 上20 / 下80 */
}

/* 灰色の帯はカンプでも 1440px いっぱい（内容枠より外へ出る）ので、幅を絞らない */
.plt-pagelink__band {
  padding-block: clamp(1.6rem, 1.39vw, 2rem) clamp(2rem, 2.08vw, 3rem); /* 実測 上20 / 下30 */
  background: var(--color_light);
}

.plt-pagelink__title {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.8; /* 実測 lh28.8 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

.plt-pagelink__list {
  display: flex;
  flex-wrap: wrap; /* 幅が足りない時だけ2行になる（375px で 200px×2＋間20 が入らないため） */
  justify-content: center;
  gap: clamp(1.2rem, 1.39vw, 2rem); /* 実測 ボタン間 20px */
  margin-top: clamp(.8rem, .69vw, 1rem); /* 実測 見出しとの間 10px */
}

/* ボタンは図形なので padding 任せにせず幅を明示する（共通契約 1-6） */
.plt-pagelink__btn {
  position: relative;
  display: flex;
  align-items: center;
  width: clamp(16rem, 13.89vw, 20rem); /* 実測 200px */
  min-height: clamp(3.6rem, 2.92vw, 4.2rem); /* 実測 42px */
  /* 右 30px は矢印の逃げ。下限は矢印（右8px＋幅16px＝24px）と文字がぶつからない 28px に置く */
  padding: .5rem clamp(2.8rem, 2.08vw, 3rem) .5rem clamp(1.2rem, 1.11vw, 1.6rem); /* 実測 左16 / 右30 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1); /* Figma DROP_SHADOW(0,5 r=20 #591E1B@0.1) */
  color: var(--color_dark);
  font-size: 1.4rem; /* 実測 14px。本文の最小サイズのため可変にしない */
  font-weight: 500;
  line-height: 1.4; /* 実測 lh19.6 / 14 */
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--transition);
}

.plt-pagelink__btn:hover {
  opacity: .65; /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
}

/* 下向き矢印は common.css の .ar--2-down（16×16・右向きを90度回転）。
   common.css 796行の注記どおり、translate と rotate は1つの transform にまとめる。 */
.plt-pagelink__btn .ar--2-down {
  position: absolute;
  top: 50%;
  right: .8rem; /* 実測 ボタン右端から 8px */
  transform: translateY(-50%) rotate(90deg);
}


/* ============================================================
   3. purpose（用途に合わせて選べるイヤホンガイド）
   Figma section [0,671,1440,1148]
     head_01 [120,671,1320,805]（下余白60）／導入文 [0,805,1440,893]（下余白30）
     4列表   [120,893,1320,1068]（1列300・見出し帯75・説明100）／表の下余白80
   ============================================================ */
.plt-purpose {
  padding-bottom: clamp(5rem, 5.56vw, 8rem); /* 実測 表の下 80px */
}

/* common.css の .heading-01 は下余白 1.6rem。ここは実測 60px なので上書きする */
.plt-purpose__head {
  padding-bottom: clamp(4rem, 4.17vw, 6rem);
}

.plt-purpose__lead {
  margin-bottom: clamp(2rem, 2.08vw, 3rem); /* 実測 導入文の下 30px */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.8; /* 実測 lh28.8 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* カンプの罫線は 1px #EAEAEA の OUTSIDE ストローク。隣り合うセルで重なるため
   実際には 1px に見える（product_list.png の x419 / y967 / y1068 を等倍で実測し
   1px #EAEAEA を確認）。CSS では gap 1px ＋ 親の背景色で1本に見せる。
   列数が変わっても線が二重にならない組み方にしてある。 */
.plt-purpose__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px; /* 固定: 1px 罫線（共通契約 1-6 例外2） */
  border: 1px solid var(--color_line); /* 固定: 同上 */
  background: var(--color_line);
}

.plt-purpose__item {
  display: flex;
  flex-direction: column;
}

/* 見出し帯。実測 75px・#B80003・pad 左右20 */
.plt-purpose__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(6rem, 5.21vw, 7.5rem); /* 実測 75px */
  padding: 1rem clamp(1rem, 1.39vw, 2rem);
  background: var(--color_main);
  color: #fff;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
}

/* 1行目。inspect は +mixed としか出ないため product_list.png を等倍で実測。
   墨の高さ17px・9文字で幅167px ＝ 18px（PNG実測）。 */
.plt-purpose__use {
  font-size: clamp(1.5rem, 1.25vw, 1.8rem);
  line-height: 1.2; /* 実測 lh21.6 / 18 */
}

/* 2行目の機種名。同じく PNG実測。墨の高さ18px・「KR-400」幅85px に対し
   「KR-400W」は109px（差24px ＝ W 1文字分）＝ 24px。
   1行目の下端923 → 2行目の下端951 の行送り28px も 24px × 1.2 と一致する。 */
.plt-purpose__model {
  font-size: clamp(2rem, 1.67vw, 2.4rem);
  line-height: 1.2;
}

.plt-purpose__desc {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-height: clamp(8rem, 6.94vw, 10rem); /* 実測 100px */
  padding: 1.5rem clamp(1rem, 1.39vw, 2rem);
  border-top: 1px solid var(--color_line); /* 固定: 1px 罫線。赤帯と白地の境目（PNG y967 実測） */
  background: #fff;
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.4; /* 実測 lh22.4 / 16 */
  letter-spacing: .05em;
  text-align: center;
}


/* ============================================================
   4. 製品カード（本体・充電器・周辺製品で共通の product_lineup_item）
   Figma カード 588×可変・白地・影 0 0 20px #000@0.1
     名前帯 61px（#B80003・pad(10,20,12,20)・28px 白 / lh39.2）
     本体   pad20・写真200 ＋ 間隔10 ＋ テキスト338（＝内容幅548）
   ============================================================ */
.plt-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 同じ行のカードは高さをそろえる（grid の既定 stretch）。
     カンプは同じ行でも左右で高さが違う（本体 KR-400 443px / KR-400W 425px）が、
     2026-08-20 CEO 指示によりカンプではなく「高さをそろえる」を採る。
     戻すときは align-items: start。 */
  align-items: stretch;
  gap: clamp(1.6rem, 1.67vw, 2.4rem); /* 実測 カード間 24px（行間も24px） */
}

.plt-card {
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1) */
}

.plt-card__name {
  padding: clamp(.8rem, .69vw, 1rem) clamp(1.4rem, 1.39vw, 2rem) clamp(1rem, .83vw, 1.2rem); /* 実測 pad(10,20,12,20) */
  background: var(--color_main);
  color: #fff;
  font-size: clamp(2rem, 1.94vw, 2.8rem); /* 実測 28px */
  font-weight: 700;
  line-height: 1.4; /* 実測 lh39.2 / 28 */
  letter-spacing: .05em;
}

.plt-card__body {
  display: flex;
  align-items: flex-start; /* カンプは写真もテキストも上そろえ（下は余る） */
  gap: clamp(.8rem, .69vw, 1rem); /* 実測 写真とテキストの間 10px */
  padding: clamp(1.4rem, 1.39vw, 2rem); /* 実測 pad 20 */
}

.plt-card__img {
  flex: 0 0 36.5%; /* 実測 写真200px ÷ カード内容幅548px。カードと一緒に縮む */
  max-width: 20rem; /* 固定: 実測 200px。1列表示のとき写真だけ大きくならないよう上限を置く */
}

.plt-card__img img {
  width: 100%;
}

.plt-card__txt {
  flex: 1 1 auto;
  min-width: 0; /* 長い型番でテキスト側がはみ出さないように */
}

/* 縦の間隔は「上の要素の下余白」ではなく各要素の margin-top で持つ。
   カードによって並ぶ要素が違う（型番なし・仕様表なし・注記あり）ため、
   先頭に来た要素だけ余白が付かないようにしておく。 */
.plt-card__txt > :first-child {
  margin-top: 0;
}

.plt-card__model {
  color: var(--color_main);
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 実測 24px */
  font-weight: 900;
  line-height: 1.4; /* 実測 lh33.6 / 24 */
  letter-spacing: .05em;
}

.plt-card__desc {
  margin-top: clamp(.8rem, .69vw, 1rem); /* 実測 型番ブロックの下余白 10px */
  font-size: 1.4rem; /* 実測 14px。本文の最小サイズのため可変にしない */
  font-weight: 500;
  line-height: 1.4; /* 実測 lh19.6 / 14 */
  letter-spacing: .05em;
}

/* 「外部機器接続専用コード」の ※注記。inspect は +mixed としか出ないため
   product_list.png を等倍で実測（墨の高さ11px・行送り17px ＝ 12px / lh1.4）。
   本文ではなく注記のため 1.4rem 下限の対象外。縮めると読めなくなるので固定。 */
.plt-card__note {
  margin-top: clamp(1.2rem, 1.17vw, 1.7rem); /* 実測 本文との間は空行1行分 16.8px */
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 「レンタル：可／購入：可」帯。出典＝Novio 2026-08-19 14:00 ケンネット様ご指示。
   体裁は KR-400 詳細の .krd-detail__avail（product-kr400.css 110行）に合わせた。
   暫定配置（確定カンプ待ち）：位置・見た目は確定カンプで再照合して差し替える。 */
.plt-card__avail {
  margin-top: clamp(.8rem, .69vw, 1rem);
  padding: .5rem clamp(.8rem, .69vw, 1rem); /* 上下5px は固定：縮めても1px しか動かず行の高さだけ乱れるため（.krd-detail__avail と同じ扱い） */
  background: var(--color_light);
  color: var(--color_dark);
  font-size: 1.4rem; /* カード本文の最小サイズに合わせ固定（.plt-card__desc 278行と同じ理由） */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* オススメ使用シーンの囲み（本体カードのみ） */
.plt-card__scene {
  margin-top: clamp(.8rem, .69vw, 1rem); /* 実測 説明ブロックの下余白 10px */
  padding: clamp(.8rem, .69vw, 1rem); /* 実測 pad 10 */
  border: 1px solid var(--color_main); /* 固定: 1px 罫線（共通契約 1-6 例外2） */
}

.plt-card__scene-label {
  color: var(--color_main);
  font-size: 1.4rem; /* 実測 14px。本文の最小サイズのため可変にしない */
  font-weight: 700;
  line-height: 1.4; /* 実測 lh19.6 / 14 */
  letter-spacing: .05em;
}

.plt-card__scene-text {
  font-size: 1.4rem; /* 実測 14px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 仕様表。dl / dt / dd は common.css のリセット対象外なので余白をここで消す */
.plt-card__spec,
.plt-card__spec dt,
.plt-card__spec dd {
  margin: 0;
}

.plt-card__spec {
  display: grid;
  gap: clamp(.4rem, .35vw, .5rem); /* 実測 行間 5px */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 実測 説明ブロックの下余白 20px（充電器カード） */
}

/* 本体カードは仕様表の上が「使用シーン枠」で、その下余白は 10px */
.plt-card--unit .plt-card__spec {
  margin-top: clamp(.8rem, .69vw, 1rem);
}

/* 実測 見出し150 : 値183（間5）。比で持たせてカード幅と一緒に伸び縮みさせる */
.plt-card__spec-row {
  display: grid;
  grid-template-columns: 150fr 183fr;
  gap: clamp(.4rem, .35vw, .5rem);
}

/* 充電器カードだけ見出し列が広い（実測 185 : 148） */
.plt-card__spec--wide .plt-card__spec-row {
  grid-template-columns: 185fr 148fr;
}

.plt-card__spec-label {
  padding: clamp(.2rem, .21vw, .3rem) clamp(.4rem, .35vw, .5rem); /* 実測 pad(3,5,3,5) */
  background: var(--color_light);
  font-size: 1.4rem; /* 実測 14px */
  font-weight: 700;
  line-height: 1.4; /* 実測 lh19.6 / 14 */
  letter-spacing: .05em;
  text-align: center;
}

.plt-card__spec-value {
  padding-block: clamp(.2rem, .21vw, .3rem); /* 実測 pad(3,0,3,0) */
  font-size: 1.4rem; /* 実測 14px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

/* ボタン。本体カードは2本（詳細＋PDF）、それ以外は1本 */
.plt-card__btns {
  display: flex;
  align-items: stretch; /* カンプは短い方が高い方に合う（本体カードの btn5 が 70px になる） */
  gap: clamp(.4rem, .35vw, .5rem); /* 実測 ボタン間 5px */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 実測 直前ブロックの下余白 20px */
}

.plt-card__btn {
  position: relative;
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
  /* 上下の実測 pad は 20 だが、Figma の 20 は字面（1行 12px）に対する値。
     行ボックス（16px × lh1.4 ＝ 22.4）で組む CSS では 15px にするとカンプの
     実寸（1行 52px ／ 2行 70px）と一致する。
     右 30px は矢印・別タブアイコンの逃げ。下限は矢印（右10px＋幅16px）とぶつからない 28px。 */
  padding: clamp(1.2rem, 1.04vw, 1.5rem) clamp(2.8rem, 2.08vw, 3rem) clamp(1.2rem, 1.04vw, 1.5rem) clamp(1.4rem, 1.39vw, 2rem);
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1); /* Figma DROP_SHADOW(0,5 r=20 #591E1B@0.1) */
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--transition);
}

.plt-card__btn:hover {
  opacity: .65; /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
}

.plt-card__btn--detail {
  background: var(--color_dark); /* Figma #111111 */
  color: #fff;
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
}

.plt-card__btn--pdf {
  background: #fff;
  color: var(--color_dark);
  font-size: 1.4rem; /* 実測 14px。本文の最小サイズのため可変にしない */
}

.plt-card__btn-txt {
  line-height: 1.4; /* 実測 lh22.4 / 16・lh19.6 / 14 とも 1.4 */
}

/* 白い矢印 16×16（common.css の .ar--2-white）。Figma も絶対配置・右10px */
.plt-card__btn .ar--2-white {
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

/* 別タブアイコン 18×18。実測 ボタン右端から 6px。
   幅の狭いときに文字とぶつからないよう、大きさも位置も一緒に縮める */
.plt-card__btn-blank {
  position: absolute;
  top: 50%;
  right: clamp(.5rem, .42vw, .6rem);
  width: clamp(1.4rem, 1.25vw, 1.8rem);
  height: clamp(1.4rem, 1.25vw, 1.8rem);
  transform: translateY(-50%);
}


/* ============================================================
   5. unit（イヤホンガイド本体）
   Figma earphone_guide_unit [120,1148,1320,2292]（head_01 の下余白60・セクション下余白80）
   ============================================================ */
.plt-unit {
  /* ヘッダーが position:fixed（common.css 156行・高さ var(--header_height)）のため、
     ページ内リンクで飛んだときに見出しがヘッダーへ潜らないよう逃げを持たせる */
  scroll-margin-top: calc(var(--header_height) + 2rem);
  padding-bottom: clamp(5rem, 5.56vw, 8rem); /* 実測 80px */
}

.plt-unit__head {
  padding-bottom: clamp(4rem, 4.17vw, 6rem); /* 実測 60px（common.css の 1.6rem を上書き） */
}


/* ============================================================
   6. accessories（充電器・周辺製品）
   Figma chargers_accessories [120,2292,1320,5485]
     head_01 下余白60 ／ PDF ボタン 400×74・間隔10・下余白40 ／ グループ間 50 ／ 下余白80
   ============================================================ */
.plt-accessories {
  scroll-margin-top: calc(var(--header_height) + 2rem); /* 理由は .plt-unit と同じ */
  padding-bottom: clamp(5rem, 5.56vw, 8rem); /* 実測 80px */
}

.plt-accessories__head {
  padding-bottom: clamp(4rem, 4.17vw, 6rem); /* 実測 60px */
}

.plt-accessories__pdfs {
  display: flex;
  flex-wrap: wrap; /* 830px 付近で 400×2＋間10 が入らなくなるので折り返す */
  align-items: stretch; /* カンプは1行の方が2行の方に合わせて 74px になる */
  justify-content: center;
  gap: clamp(.8rem, .69vw, 1rem); /* 実測 ボタン間 10px */
  margin-bottom: clamp(2.8rem, 2.78vw, 4rem); /* 実測 下 40px */
}

.plt-accessories__pdf {
  position: relative;
  display: flex;
  flex: 0 1 40rem; /* 実測 400px。図形なので幅を明示する（共通契約 1-6） */
  align-items: center;
  /* 上下は .plt-card__btn と同じ理由で 15px（カンプ実寸 2行74px / 1行はそこに合う）。
     右 30px は別タブアイコンの逃げ（カンプでも文字の右端 685 とアイコン左端 685 が接する）。 */
  padding: clamp(1.2rem, 1.04vw, 1.5rem) clamp(2.6rem, 2.08vw, 3rem) clamp(1.2rem, 1.04vw, 1.5rem) clamp(1.4rem, 1.39vw, 2rem);
  background: #fff;
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1); /* Figma DROP_SHADOW(0,5 r=20 #591E1B@0.1) */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 700;
  line-height: 1.4; /* 実測 lh22.4 / 16 */
  letter-spacing: .05em;
  text-decoration: none;
  transition: var(--transition);
}

/* このボタンは出現アニメ（data-anim）を自分に持つため、animation.css の
   `[data-anim].is-inview { opacity:1 }` が詳細度で :hover に勝ち、opacity のホバーは
   実際には効いていなかった（2026-08-20 実ブラウザで計測して確認）。
   白い面の既定ホバー＝内側 2px の赤枠（top.css 510行・Figma node 569:5013）へ変更する。 */
.plt-accessories__pdf:hover {
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1), inset 0 0 0 2px var(--color_main);
}

/* 別タブアイコン 18×18。実測 ボタン右端から 12px。
   幅の狭いときに文字とぶつからないよう、大きさも位置も一緒に縮める */
.plt-accessories__pdf-blank {
  position: absolute;
  top: 50%;
  right: clamp(.6rem, .83vw, 1.2rem);
  width: clamp(1.4rem, 1.25vw, 1.8rem);
  height: clamp(1.4rem, 1.25vw, 1.8rem);
  transform: translateY(-50%);
}

/* 「※一部の周辺機器は有償レンタルとなります。」の注記。
   出典＝Novio 2026-08-19 14:00 ケンネット様ご指示。PDF ボタン群が中央寄せのため注記も中央寄せ。
   位置は 2026-08-19 の確定カンプ（node 880:5673 / 880:5674）で確定。
   充電器・周辺製品の見出し（head_01・下余白60px）の直後に置き、注記の下 30px で
   パンフレットのボタン群へ続く。カンプ実測＝注記ブロック 1200×59（テキスト29＋下30）。 */
.plt-accessories__note {
  margin-bottom: clamp(2.1rem, 2.08vw, 3rem); /* 実測 30px */
  color: var(--color_dark);
  font-size: 1.4rem; /* 注記のため本文の最小サイズで固定（.plt-card__desc 278行と同じ理由） */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

/* グループ（充電器 / イヤホン / マイクロホン / その他）の間 */
.plt-accessories__group + .plt-accessories__group {
  margin-top: clamp(3.6rem, 3.47vw, 5rem); /* 実測 50px */
}


/* ============================================================
   7. contact（CONTACT 帯）
   Figma contact [0,5485,1440,5911]（1440×426）
   トップの contact（node 170:922）と座標まで一致するため、数値は
   assets/css/top.css 1935〜2095行の .top-contact 系からの転記。転記元の行を各所に書いてある。
   top.css はトップ限定読み込みで本ページでは効かないためクラスを作り直している。
   ============================================================ */
.plt-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ（.plt-inner と同じ値）。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.plt-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem。1024px 付近で右カラムを潰さないよう縮む側にした */
  max-width: 100rem; /* 固定: top.css 1945行。Figma 実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -------- 左カラム（top.css 1950〜2025行の転記） -------- */
.plt-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ */
}

.plt-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.plt-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.plt-contact__title {
  font-family: var(--font_eng); /* top.css 1975行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1976行 6rem / 下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.plt-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.plt-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.plt-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem;
}

.plt-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2003行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}

.plt-contact__tel a {
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem / 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
}

.plt-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem / 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* -------- 右カラム（ボタン2本・top.css 2028〜2095行の転記） -------- */
.plt-contact__btns {
  display: flex;
  flex: 0 1 60rem; /* top.css 2030行。Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* top.css 2034行。Figma ボタン間 20px */
  min-width: 0;
}

.plt-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2041行（Figma 120px） */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3)・top.css 2042行と同値 */
  text-decoration: none;
  transition: var(--transition);
}

.plt-contact__btn--rental {
  background: var(--color_main_dark); /* Figma #7C0002。top.css 2048行は直書き */
  color: #fff;
}

.plt-contact__btn--inquiry {
  background: #fff;
  color: var(--color_main); /* Figma #B80003 */
}

/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.plt-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.plt-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

.plt-contact__btn-icon {
  position: absolute; /* top.css 2062行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}

.plt-contact__btn-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem; /* top.css 2074行。Figma gap 16 から行の余白分を引いた実効値 */
  text-align: center;
}

.plt-contact__btn-main {
  font-size: 2.4rem; /* top.css 2079行。Figma 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.plt-contact__btn-sub {
  font-size: 1.5rem; /* top.css 2086行。Figma 15px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.plt-contact__btn .ar {
  position: absolute; /* top.css 2093行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* ============================================================
   8. 1023px 以下（SP カンプ無し・当方設計）
   ここで落とす理由
     ・製品カードは 2列のままだと 1024px でカード内容幅が 420px になり、
       仕様表の見出し「通話・通信方式」（14px で約105px 必要）が入る幅を割り込む。
     ・4列の早見表は 1列 245px で「質疑応答を伴う案内に」（18px で約190px）が
       ぎりぎりのため、2列にして余裕を持たせる。
     ・contact は左カラムが 30rem 固定のため、2カラムのままだと右のボタン内で
       小さい行（最長「レンタル・購入・デモ機などのご相談はこちら」）が折り返す。
   ============================================================ */
@media (max-width: 1023px) {
  .plt-purpose__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 1列にしたうえで、カードの幅はカンプの 588px 前後にとどめる。
     幅いっぱい（1023px 表示で 983px）に伸ばすと写真だけ上限 200px で止まり、
     仕様表と説明文だけが横に間延びしてカンプの見た目から離れるため。 */
  .plt-cards {
    grid-template-columns: 1fr;
    max-width: 60rem; /* 固定: 実測カード幅 588px 相当。コンテナの最大幅は固定値で持つ */
    margin-inline: auto;
  }

  .plt-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  /* 縦積みでは左右いっぱいに広げず、カンプのボタン幅 600px にそろえて置く
     （営業時間の枠だけが伸びて間延びするのを防ぐ） */
  .plt-contact__intro,
  .plt-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem;
    margin-inline: auto;
  }
}


/* ============================================================
   9. 768px 以下（SP カンプ無し・当方設計。contact は top.css 2320〜2375行が手本）
   ============================================================ */
@media (max-width: 768px) {
  /* 目次ボタンは 375px だと2本並べて 1本 160px しかなく「イヤホンガイド本体」が
     折り返して左右の高さがそろわなくなるため、縦に積んで1行に収める */
  .plt-pagelink__list {
    flex-direction: column;
    align-items: center;
  }

  .plt-pagelink__btn {
    width: 100%;
    max-width: 24rem; /* 固定: ラベル最長「イヤホンガイド本体」＋左右 padding が1行で入る幅 */
  }

  /* 早見表は 375px だと2列で1列 127px しかなく、見出しの「質疑応答を伴う案内に」が
     入らないため1列にする */
  .plt-purpose__list {
    grid-template-columns: 1fr;
  }

  /* カードは写真を上、テキストを下へ。横並びのままだと写真が 100px 台になり
     製品が見分けられなくなる */
  .plt-card__body {
    flex-direction: column;
    align-items: center;
  }

  .plt-card__img {
    flex: 0 0 auto;
    width: 100%;
  }

  .plt-card__txt {
    width: 100%;
  }

  /* 本体カードのボタン2本は、375px だと1本あたり 145px になり
     「パンフレットを見る（PDF）」（14px で約180px）が入らないため縦積みにする */
  .plt-card__btns {
    flex-direction: column;
  }

  /* contact ---------------------------------------------------- */
  .plt-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .plt-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem; /* top.css 2352行 */
  }

  .plt-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }

  /* 1行に収める（top.css 2360行の判断をそのまま踏襲）。最長の
     「お問い合わせ・見積相談」は 19px だと 219px 必要で入る幅が 203px しかない。 */
  .plt-contact__btn-main {
    font-size: 1.7rem;
  }

  .plt-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2367行 */
    line-height: 1.4;
  }

  .plt-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}