@charset "UTF-8";
/**
 * compare.css — 購入とレンタルの比較（固定ページ slug: compare）
 *
 * 対象: page-compare.php ／ template-parts/under/compare/*.php
 * 出典: figma-dump/inspect/under/compare.txt（ノード 493:4448 / 1440×3313）
 *       ログに出ない値（罫線の色分け・文字色の境目・アイコンの余白）は
 *       figma-dump/screenshots/under/compare.png（等倍 1440px）をピクセル走査した実測。
 *       実測した箇所にはその旨をコメントで残している。
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * 寸法はカンプ幅 1440px 基準の可変指定（clamp の vw 値 ＝ 実測px ÷ 14.4）。
 * clamp の下限は SP カンプが無いため当方設計（上限の6〜7割・本文系は 1.4rem 止まり）。
 * ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 *
 * 流用する common.css の既存クラス（再定義しない）:
 *   .page-title / .page-title__title … 冒頭の赤グラデ帯
 *   .breadcrumb-wrap / .bread        … パンくず（kennet_breadcrumb()）
 *   .heading-01 / __title / __label  … 各セクションの head_01
 *   .sub-head / .sub-head__text      … 赤枠1px の帯コピー
 *   .ar / .ar--white                 … 24×24 の赤／白シェブロン
 * 🚫 .section / .section__inner は使わない（1440px 時の内容幅がカンプと食い違うため）。
 *
 * 色は common.css の CSS 変数のみ。#333333（text_black）はこのページには出てこない
 * （黒はすべて #111111 ＝ --color_dark。compare.png のピクセル走査で確認済み）。
 */


/* =============================================================================
 * 1. 内容枠
 * common.css の .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」方式。
 * 1280px 以上で内容幅がカンプどおり 1200px になる。
 * カンプの中身はさらに内側の 1040px（表・灰箱）に置かれるので、各ブロック側で
 * max-width: 104rem; margin-inline: auto; を持たせる。
 * ========================================================================== */
.cmp-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280 */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}


/* =============================================================================
 * 2. overview（見出し＋比較表＋詳細ボタン2本）
 * ログ: contents_inner 内の Frame 4858（上余白 0）／ Frame 4896 の下余白 100
 * ========================================================================== */
.cmp-overview {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* ログ Frame 4896 pad-bottom 100 */
}

/* 導入文。ログ: 16px / lh16 / 700 / 中央（テキスト幅 403 ＝ 24文字 ×16.8） */
.cmp-overview__lead {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 700;
  line-height: 1; /* ログ lh16 ÷ 16px。ここを 1.6 にすると表の位置が 10px 下がるのでカンプどおりにする */
  letter-spacing: .05em;
  text-align: center;
}


/* -----------------------------------------------------------------------------
 * 2-1. 比較表（div ＋ grid の 27セル。3列×9行）
 *
 * 列比 180 : 430 : 430 → 18fr : 43fr : 43fr（合計 1040 ＝ 104rem）。
 * 罫線は 1px #EAEAEA が縦横すべてに入る（PNG 実測：外周 x199/x1240・y603/y1279、
 * 列間 x379/x809、行間 y678/y753…）。外周は表本体の border、内側はセルの
 * border-top / border-left で作り、1行目と1列目だけ二重線にならないよう外している。
 * -------------------------------------------------------------------------- */
.cmp-table__scroll {
  margin-top: clamp(1.2rem, 1.39vw, 2rem); /* ログ Frame 4887 pad-top 20（導入文 y584 → 表 y604） */
}

.cmp-table {
  display: grid;
  grid-template-columns: 18fr 43fr 43fr;
  max-width: 104rem; /* 固定：カンプの表幅 1040px。1200 の内容幅の中で中央に置く */
  margin-inline: auto;
  background: #fff;
  border: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

.cmp-table__cell {
  display: flex;
  align-items: center;
  min-height: clamp(5rem, 5.21vw, 7.5rem); /* ログ 各行 75px */
  /* 左右はログの pad=(0,20,0,20)。上下はログでは 0（高さ 75px 固定＋中央そろえ）だが、
     狭い帯で3行に折り返した時に文字が罫線へ付くため 15px の逃げを持たせる（当方設計）。
     2行（17.6×2＝35.2）＋上下 30 ＝ 65.2 なので 1440px では行の高さ 75px を崩さない。 */
  padding: clamp(.8rem, 1.04vw, 1.5rem) clamp(1rem, 1.39vw, 2rem);
  border-top: 1px solid var(--color_line); /* 固定：1px の罫線 */
  border-left: 1px solid var(--color_line); /* 固定：1px の罫線 */
}

/* 1行目・1列目は表本体の border と重なるので内側の線を外す */
.cmp-table__cell:nth-child(-n + 3) {
  border-top: 0;
}

.cmp-table__cell:nth-child(3n + 1) {
  border-left: 0;
}

/* 見出し行（3セルとも赤地・白文字18px）。アイコン付きは icon 30 ＋ gap 10 ＋ 文字 */
.cmp-table__cell--head {
  justify-content: center;
  gap: clamp(.6rem, .69vw, 1rem); /* ログ アイコンと文字の間 10 */
  background: var(--color_main);
  color: #fff;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem);
  font-weight: 700;
  line-height: 1.4; /* カンプ lh18（＝1.0）は1行前提。丸括弧が切れないよう 1.4 にする（中央そろえのため見た目は同じ） */
  letter-spacing: .05em;
  text-align: center;
}

.cmp-table__icon {
  flex: 0 0 auto;
  width: clamp(2.4rem, 2.08vw, 3rem); /* ログ 30×30 */
  height: auto;
}

/* 左列（行見出し）。地色 #F6F6F6・16px 500・中央 */
.cmp-table__cell--label {
  justify-content: center;
  background: var(--color_light);
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4; /* カンプ lh16（＝1.0）は1行前提。狭い幅で折り返しても重ならない値にする */
  letter-spacing: .05em;
  text-align: center;
}

/* 中央・右列の本文。地は白・16px 700・左そろえ */
.cmp-table__text {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 700;
  line-height: 1.1; /* ログ lh17.6 ÷ 16px。2行セルの行送りが実測 18px と合う */
  letter-spacing: .05em;
}

/* セルの地の文字色が赤のもの（ログの fill が #B80003） */
.cmp-table__text--main {
  color: var(--color_main);
}

/* 黒地のセルの中で赤くする部分（PNG実測 #B80003） */
.cmp-table__em {
  color: var(--color_main);
}

/* 赤地のセルの中で黒くする部分（PNG実測 #111111） */
.cmp-table__plain {
  color: var(--color_dark);
}

/* サポート行の「⇒あんしん補償サービスもご利用できます」。カンプは下線付き（PNG実測）
   2026-08-19 確定版（櫂作様 17:10）で文言変更。旧「〜もご案内」 */
.cmp-table__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: var(--transition, all .3s ease);
}

.cmp-table__link:hover {
  color: var(--color_main);
}


/* -----------------------------------------------------------------------------
 * 2-2. 詳細ボタン2本（402×90・白地・影 0 0 20px rgba(0,0,0,.1)）
 * ログ: Frame 4896 gap=30 ／ ボタン内は 左31 → アイコン43 → 30 → 文字20px、右端から矢印30
 * -------------------------------------------------------------------------- */
.cmp-overview__btns {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 2.08vw, 3rem); /* ログ gap=30 */
  margin-top: clamp(2.4rem, 2.78vw, 4rem); /* ログ Frame 4887 pad-bottom 40（表 y1279 → ボタン y1319） */
}

.cmp-detail {
  --cmp-detail-icon: clamp(3.4rem, 2.99vw, 4.3rem); /* ログ アイコン枠 43×43 */

  position: relative;
  display: flex;
  flex: 0 1 40.2rem; /* カンプのボタン幅 402px。狭い帯では縮む側にする */
  align-items: center;
  gap: clamp(1.6rem, 2.08vw, 3rem); /* ログ アイコン→文字 30 */
  min-width: 0;
  min-height: clamp(7rem, 6.25vw, 9rem); /* ログ 90 */
  /* 左 31（ログ x303→334）／右は矢印（24）と右余白（30）の逃げ */
  padding-inline: clamp(1.6rem, 2.15vw, 3.1rem) clamp(4.4rem, 4.03vw, 5.8rem);
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* 固定：ログ DROP_SHADOW(0,0 r=20 #000000@0.1) */
  color: var(--color_main);
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

/* hover はトップ・about の白カードと同じ語彙（白のまま内側に 2px の赤枠）。
   2026-08-20 CEO 指示「ホバーを目立たせる」により opacity: .85 から変更した。
   枠を疑似要素に持たせるのは、このボタン自身が js-popUps の子として
   data-anim="pop" を持ち、animation.css が本体の transition を
   opacity / transform に固定し is-inview の opacity:1 が :hover に勝つため
   （本体への opacity・box-shadow 指定ではフェードできない）。 */
.cmp-detail::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 2px var(--color_main);
  opacity: 0;
  transition: var(--transition, all .3s ease);
}

.cmp-detail:hover::after {
  opacity: 1;
}

.cmp-detail__icon {
  flex: 0 0 auto;
  width: var(--cmp-detail-icon);
  height: auto;
}

/* 購入側だけ既存素材（finduse_cart_icon.svg）を使う。
   56×56 の中にカートが 42.5×39 で入っている（等倍レンダリングで実測）ため、
   カンプの ink 36×33 に合わせるには 43 × 1.1 = 47.3px 相当で表示する必要がある。
   増えた左右 2.15px ずつを負の margin で戻し、文字の起点をレンタル側とそろえる。 */
.cmp-detail__icon--cart {
  width: calc(var(--cmp-detail-icon) * 1.1);
  margin-inline: calc(var(--cmp-detail-icon) * -.05);
}

.cmp-detail__text {
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* ログ 20px */
  font-weight: 700;
  line-height: 1.4; /* カンプ lh20（＝1.0）は1行前提。折り返す幅でも重ならない値にする */
  letter-spacing: .05em;
}

.cmp-detail .ar {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 2.08vw, 3rem); /* ログ 右端から 30 */
  transform: translateY(-50%);
}


/* =============================================================================
 * 3. merit（メリット・検討事項）
 * ログ: Frame 4919（見出し 28px）／ Frame 4894（灰箱 1040×550・pad-block 40）
 * ========================================================================== */
.cmp-merit__title {
  color: var(--color_dark);
  font-size: clamp(2rem, 1.94vw, 2.8rem); /* ログ 28px */
  font-weight: 700;
  line-height: 1.4; /* ログ lh39.2 ÷ 28px */
  letter-spacing: .05em;
  text-align: center;
}

/* 灰箱。左右 70 はカンプの内容幅 900 を 1040 の中に置いた残り（ログ x200→270 / x1170→1240） */
.cmp-merit__box {
  max-width: 104rem; /* 固定：カンプの灰箱幅 1040px */
  margin-inline: auto;
  padding-block: clamp(2.4rem, 2.78vw, 4rem); /* ログ pad=(40,0,40,0) */
  padding-inline: clamp(1.6rem, 4.86vw, 7rem);
  background: var(--color_light);
}

/* 「購入のメリット・検討事項」／「レンタルのメリット・検討事項」 */
.cmp-merit__lead {
  color: var(--color_dark);
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* ログ 24px */
  font-weight: 700;
  line-height: 1.4; /* ログ lh33.6 ÷ 24px */
  letter-spacing: .05em;
  text-align: center;
}

/* 白線から2組目の見出しまで（ログ Frame 4893 pad-top 30） */
.cmp-merit__lead--2 {
  margin-top: clamp(1.8rem, 2.08vw, 3rem);
}

/* 赤くする部分（PNG実測 #B80003）。見出しは「購入」「レンタル」だけが赤 */
.cmp-merit__em {
  color: var(--color_main);
}

.cmp-merit__cards {
  display: flex;
  gap: clamp(2rem, 2.78vw, 4rem); /* カンプ実測 40（x700 → x740） */
  margin-top: clamp(1.2rem, 1.39vw, 2rem); /* ログ Frame 126 pad-top 20 */
}

.cmp-merit__card {
  flex: 1 1 0;
  min-width: 0;
}

/* 見出し帯 430×43。アイコン18 ＋ gap4 ＋ 文字18px */
.cmp-merit__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.3rem, .28vw, .4rem); /* カンプ実測 4（x455 → x459） */
  min-height: clamp(3.4rem, 2.99vw, 4.3rem); /* ログ 43 */
  padding-inline: 1rem; /* 狭い帯で文字が帯の端に付かないようにする（当方設計） */
  color: #fff;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* ログ 18px */
  font-weight: 700;
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
}

.cmp-merit__card--merit .cmp-merit__card-head {
  background: var(--color_main);
}

.cmp-merit__card--point .cmp-merit__card-head {
  background: var(--color_dark);
}

.cmp-merit__card-icon {
  flex: 0 0 auto;
  width: clamp(1.4rem, 1.25vw, 1.8rem); /* ログ 18×18 */
  height: auto;
}

.cmp-merit__card-body {
  min-height: clamp(8rem, 7.78vw, 11.2rem); /* ログ 112（本文2行＋上下30） */
  padding: clamp(1.6rem, 2.08vw, 3rem); /* ログ 本文の内側余白 30（x270→300 / y1686→1716） */
  background: #fff;
}

.cmp-merit__text {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
  font-weight: 500;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px（PNG実測の行送り 26px と一致） */
  letter-spacing: .05em;
}

/* 2組の間の白い区切り線（ログ Vector 45・stroke 2px #FFFFFF・幅900） */
.cmp-merit__line {
  display: block;
  height: 2px; /* 固定：2px の罫線 */
  margin-top: clamp(1.2rem, 1.39vw, 2rem); /* ログ Frame 126 pad-bottom 20 */
  background: #fff;
}


/* =============================================================================
 * 4. guide（選び方の目安＋相談ボタン）
 * ログ: Frame 4897（灰箱 1040×242・pad-block 40）／ Frame 477（黒ボタン 402×90）
 * merit の灰箱と隙間なく続くのでセクションの上に余白を置かない。
 * ========================================================================== */
.cmp-guide {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* ログ contents_inner pad-bottom 100 */
}

/* 左右 65 はカンプの内容幅 910 を 1040 の中に置いた残り（ログ x200→265 / x1175→1240） */
.cmp-guide__box {
  max-width: 104rem; /* 固定：カンプの灰箱幅 1040px */
  margin-inline: auto;
  padding-block: clamp(2.4rem, 2.78vw, 4rem); /* ログ pad=(40,0,40,0) */
  padding-inline: clamp(1.6rem, 4.51vw, 6.5rem);
  background: var(--color_light);
}

.cmp-guide__title {
  color: var(--color_dark);
  font-size: clamp(2rem, 1.88vw, 2.7rem); /* ログ 27px */
  font-weight: 700;
  line-height: 1.4; /* ログ lh37.8 ÷ 27px */
  letter-spacing: .05em;
  text-align: center;
}

.cmp-guide__cards {
  display: flex;
  gap: clamp(2.4rem, 3.47vw, 5rem); /* ログ gap=50（x695 → x745） */
  margin-top: clamp(1.2rem, 1.39vw, 2rem); /* ログ Frame 126 pad-top 20 */
}

.cmp-guide__card {
  flex: 1 1 0;
  min-width: 0;
}

/* 見出し帯 430×43。赤枠1px・地は透明（灰色が透ける／PNG実測 #F6F6F6） */
.cmp-guide__card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.6rem, .69vw, 1rem); /* カンプ実測 10（x453 → x463） */
  min-height: clamp(3.4rem, 2.99vw, 4.3rem); /* ログ 43 */
  padding-inline: 1rem; /* 狭い帯で文字が枠の端に付かないようにする（当方設計） */
  border: 1px solid var(--color_main); /* 固定：1px の罫線 */
  color: var(--color_main);
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* ログ 18px */
  font-weight: 700;
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
}

.cmp-guide__card-icon {
  flex: 0 0 auto;
  width: clamp(2.4rem, 2.08vw, 3rem); /* ログ 30×30 */
  height: auto;
}

.cmp-guide__text {
  margin-top: clamp(.6rem, .63vw, .9rem); /* カンプ実測 9（帯の下端 y2239 → 本文 y2248） */
  padding-inline: clamp(.6rem, .8vw, 1.15rem); /* 本文幅 407 を帯幅 430 の中に置いた残りの半分 */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* ログ 16px */
  font-weight: 700;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
  letter-spacing: .05em;
}

/* 黒ボタン「自社に合う方法を相談する」。ログ 402×90・#111111・影 0 0 20px rgba(0,0,0,.1) */
.cmp-guide__consult {
  display: flex;
  justify-content: center;
  /* 灰箱の下端 y2340 → ボタン上端 y2381。ログ Frame 4858 pad-bottom 40 ＋ gap 1 */
  margin-top: clamp(2.4rem, 2.85vw, 4.1rem);
}

.cmp-consult {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 1.25vw, 1.8rem); /* ログ アイコン→文字 18（x586 → x604） */
  width: 100%;
  max-width: 40.2rem; /* 固定：カンプのボタン幅 402px */
  min-height: clamp(7rem, 6.25vw, 9rem); /* ログ 90 */
  /* 左 38（ログ x519→557）／右は矢印（24）と右余白（30）の逃げ */
  padding-inline: clamp(2rem, 2.64vw, 3.8rem) clamp(4.4rem, 4.03vw, 5.8rem);
  background: var(--color_dark);
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* 固定：ログ DROP_SHADOW(0,0 r=20 #000000@0.1) */
  color: #fff;
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

/* hover はトップの同じ濃い地のボタン（top.css 760行・Figma node 569:5027 実測 #111111→#323232）と
   同じ語彙。2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.cmp-consult:hover {
  background: #323232;
}

.cmp-consult__icon {
  flex: 0 0 auto;
  width: clamp(2.4rem, 2.01vw, 2.9rem); /* ログ 29×28（アイコンの実寸。枠 44×43 の中身） */
  height: auto;
}

.cmp-consult__text {
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* ログ 20px */
  font-weight: 700;
  line-height: 1.4; /* カンプ lh20（＝1.0）は1行前提。折り返す幅でも重ならない値にする */
  letter-spacing: .05em;
}

.cmp-consult .ar {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 2.08vw, 3rem); /* ログ 右端から 30 */
  transform: translateY(-50%);
}


/* =============================================================================
 * 5. contact（CONTACT 帯）
 * ログ: INSTANCE contact 1440×426 / pad(80,276,80,276) / gap100
 * 数値は top.css 1935〜2097行（.top-contact 系）からの転記。形が同じため。
 * top.css はトップ限定読み込みのため本ページでは効かず、クラスも別（cmp-contact__*）。
 * ========================================================================== */
.cmp-contact {
  /* 上下は Figma pad(80,…,80,…)。左右は .section__inner を使わない取り決めのためここで持つ */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr */
  color: #fff;
}

.cmp-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* Figma gap100。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;
}

.cmp-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ */
}

.cmp-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;
}

.cmp-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%;
}

.cmp-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 だけ字間を空けない */
}

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

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

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

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

.cmp-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;
}

.cmp-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;
}

.cmp-contact__btns {
  display: flex; /* top.css 2028行 */
  flex: 0 1 60rem; /* Figma ボタン 600px。狭い帯では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* Figma btn 下端2774 → 次の btn 上端2794 */
  min-width: 0;
}

.cmp-contact__btn {
  position: relative; /* top.css 2036行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* Figma 120px */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.cmp-contact__btn--rental {
  background: var(--color_main_dark); /* Figma #7C0002 */
  color: #fff;
}

.cmp-contact__btn--inquiry {
  background: #fff;
  color: var(--color_main);
}

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

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

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

.cmp-contact__btn-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem; /* Figma txt gap=16 */
  text-align: center;
}

.cmp-contact__btn-main {
  font-size: 2.4rem; /* Figma 24px */
  font-weight: 700;
  line-height: 1; /* Figma lh24 */
  letter-spacing: .05em;
}

.cmp-contact__btn-sub {
  font-size: 1.5rem; /* Figma 15px */
  font-weight: 700;
  line-height: 1; /* Figma lh15 */
  letter-spacing: .05em;
}

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


/* =============================================================================
 * 6. 1023px 以下（SP カンプ無し・当方設計）
 * CONTACT を2カラムのままにすると、右カラムが 555px を切ったところで
 * ボタン内の中央そろえの文字（最長「レンタル・購入・デモ機などのご相談はこちら」331px）が
 * 左のアイコン（左40px＋64px）に重なる。計算上そうなるのは 976px 以下。
 * 1ページ目の contact（_wgd/70_contact.css 234行）と同じ 1023px で縦積みにそろえる。
 * ========================================================================== */
@media (max-width: 1023px) {
  .cmp-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

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


/* =============================================================================
 * 7. 768px 以下（SP カンプ無し・当方設計／PC 構造を1カラムへ落とす）
 * ========================================================================== */
@media (max-width: 768px) {

  /* 導入文は 375px で1行に収まらず折り返すため、行間を戻す
     （24文字 ×14.7px ＝ 353px に対し、入る幅が 354px しかない） */
  .cmp-overview__lead {
    line-height: 1.6;
  }

  /* 比較表 ------------------------------------------------------------------
     2026-08-21 ケンネット様のご指摘で横スクロールを廃止（旧：外側 overflow-x:auto ＋
     表本体 min-width 82rem）。行見出しを2列ぶち抜きの帯にし、その下に「購入」「レンタル」を
     2列で並置する。比較表の価値は購入とレンタルを横に並べて見比べられることなので、
     並置は残し、行見出しだけを帯へ逃がす（当方設計・SP カンプは無い）。
     27セルの並び順（ラベル→購入→レンタル）は変えていない。grid の自動配置が
     全幅セルの次を新しい行へ送るため、ソース順のまま「帯→2列」になる。
     375px の実寸：内容幅 335px ÷ 2 = 167px、内側余白 10px×2 を引いて約 147px
     ＝ 14px＋字間.05em で1行あたり全角9〜10文字。 */
  .cmp-table {
    grid-template-columns: 1fr 1fr;
  }

  /* 「比較項目」は列見出しなので、帯レイアウトでは指す先が無くなる。非表示にする。
     display:none でも nth-child の数えには残るため、下の罫線規則はずれない。 */
  .cmp-table__cell--head:first-child {
    display: none;
  }

  /* 行見出し＝2列ぶち抜きの帯。内容行（min-height 5rem）より一段低くして帯に見せる */
  .cmp-table__cell--label {
    grid-column: 1 / -1;
    min-height: 4rem;
  }

  /* 購入列（2・5・8…26セル ＝ 3n+2）が SP では左端に来るので、
     表本体の外周 border と二重線になる縦罫線を外す。
     レンタル列（3n）の border-left は購入とレンタルの間の1本として残す。 */
  .cmp-table__cell:nth-child(3n + 2) {
    border-left: 0;
  }

  /* 見出し2セルはアイコンを上・文字を下に積む。
     横並びのままだと文字に使える幅が約 116px しかなく、
     「レンタル（必要な期間のみ）」が不格好な位置で折れる。 */
  .cmp-table__cell--head {
    flex-direction: column;
    padding-block: 1.2rem;
  }

  /* 1行あたり9〜10文字で折り返すため、カンプ実測の行間 1.1 では詰まって読めない。
     導入文（.cmp-overview__lead）と同じ考え方で 1.4 へ戻す。 */
  .cmp-table__text {
    line-height: 1.4;
    text-wrap: pretty; /* 対応ブラウザでは末尾1文字だけの行を避ける（保険） */
  }

  /* カンプ（1440px）の改行位置は SP では意味を持たず、1文字だけの行を作るので無効化。
     ただしサポート行の「⇒あんしん補償サービスもご利用できます」の前だけは残す
     （消すと矢印が文中に埋もれてリンクの始まりが分からなくなる。行数は変わらない）。 */
  .cmp-table__text br {
    display: none;
  }

  .cmp-table__text br:has(+ .cmp-table__link) {
    display: inline;
  }

  /* 詳細ボタン2本 ----------------------------------------------------------- */
  .cmp-overview__btns {
    flex-direction: column;
    align-items: center;
  }

  .cmp-detail {
    flex: 0 0 auto;
    width: 100%;
    max-width: 40.2rem;
  }

  /* メリット・検討事項／選び方の目安のカード ---------------------------------- */
  .cmp-merit__cards,
  .cmp-guide__cards {
    flex-direction: column;
  }

  /* contact（top.css 2320〜2374行の SP をそのまま） --------------------------- */
  .cmp-contact {
    padding-block: 6rem;
  }

  .cmp-contact__btn {
    height: auto;
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }

  .cmp-contact__btn-icon {
    left: 1.6rem;
    width: 5.6rem;
    height: 5.6rem;
  }

  /* 1行に収める（top.css 2360行と同じ理由）。最長の「お問い合わせ・見積相談」は
     19px だと 219px 必要で入る幅が 203px しかなく折り返していた。17px なら 196px で収まる。 */
  .cmp-contact__btn-main {
    font-size: 1.7rem;
  }

  .cmp-contact__btn-sub {
    font-size: 1.3rem;
    line-height: 1.4;
  }

  .cmp-contact__btn-txt {
    gap: 1.2rem; /* 文字を小さくした分だけ2行の間も詰める（当方設計） */
  }

  .cmp-contact__btn .ar {
    right: 1.2rem;
  }
}