@charset "UTF-8";
/**
 * rental.css — レンタル・購入のご案内（固定ページ slug: rental / page-rental.php）
 *
 * Figma  : under（node 472:3214 ／ 1440×2052・2026-08-14 の確定版）
 * inspect: figma-dump/inspect/rental_final/00_rental_under.txt
 * カンプ : figma-dump/screenshots/rental_final/00_rental_under.png（全体）
 *          同 01_lead.png ／ 05_lineup.png ／ 06_btn_area.png（いずれも 1200px 幅で書き出し）
 * HTML   : page-rental.php ／ template-parts/under/rental/ の lead.php・lineup.php・
 *          compare-btn.php・contact.php
 *
 * 確定版で非表示になった3ブロック（472:4175 ／ 502:4425 ／ 709:4102）と
 * btn_area 内の黒ボタン（709:4128）は実装対象外。先行実装ぶんの flow は
 * 後から戻せるよう下の 4. に残してある（page-rental.php からの読み込みは外した）。
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 = vw」。
 * clamp の下限は SP カンプが無いため当方設計（本文系は 1.4rem を下回らせない）。
 * 固定値は (1) コンテナの最大幅 (2) 1px/2px 罫線・角丸5px以下 (3) 固定でないと整わない場合
 * のみで、その行に理由を書いている。
 * ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 *
 * 再定義しない共通クラス（common.css）
 *   .page-title / __title      1117〜1133行
 *   .breadcrumb-wrap           109行（kennet_breadcrumb() が出力）
 *   .heading-01 / __title / __label  951〜970行
 *   .sub-head / __text         972〜986行
 *   .btn                       787〜838行（Figma btn 320×60・#111111）
 *   .ar / .ar--white           725〜751行
 */

/* ============================================================
   1. 内容枠 .rnt-inner
   共通契約どおり _wgd/00_base.css の .wgd-inner と同じ式を自ページの接頭辞で持つ。
   .section__inner（max-width 1200 の内側に左右 padding）だと 1440px 表示のとき
   内容幅が 1121px になり、カンプの内容幅 1200px と食い違うため使わない。
   1280px 以上で内容幅がカンプどおり 1200px（Figma x120〜1320）になる。
   ============================================================ */
.rnt-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 固定: 1200 + 80 = 1280。コンテナの最大幅（例外1） */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}


/* ============================================================
   2. lead（冒頭のリード文）
   Figma contents_inner → Frame 4858 [120,382,1320,494]・pad=(0,0,60,0)
     中の txt [120,382,1320,434]（16px×2行＝25.6×2＝51.2 ≒ 52）

   上の余白は 0。パンくず（.bread の下 padding 40px）の下端 382px から
   そのまま本文が始まる（inspect 実測）。
   ============================================================ */
.rnt-lead {
  padding-bottom: clamp(4rem, 4.17vw, 6rem); /* Frame 4858 の下 padding 60px（60÷14.4＝4.17vw） */
}

/* 16px ／ 行高 25.6 ／ 中央 ／ 太さ500 ／ #111111（inspect 41行） */
.rnt-lead__text {
  color: var(--color_dark); /* Figma txt_color #111111。body と同値だが本文の色として明示する */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px（16÷14.4＝1.11vw）。下限は共通契約の本文下限 1.4rem */
  font-weight: 500;
  line-height: 1.6; /* 25.6 ÷ 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* -----------------------------------------------------------------------------
 * 768px 以下（SP カンプ無し・当方設計）
 * 本文が 14px まで縮んで1行に入る文字数が変わるため、カンプの改行位置を解除して
 * 自然な折り返しにする（改行を残すと2行目が極端に短くなる）。
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rnt-lead__br {
    display: none;
  }
}


/* ============================================================
   3. lineup（製品ラインナップ カード2枚）
   ============================================================ */

/**
 * lineup（製品ラインナップ カード2枚）
 *
 * Figma  : under（node 472:3214・確定版）内の Frame 4947 [160,495,1280,1119]
 *          カード＝product_lineup_item 545×564（左 [160,495,705,1059]／右 [735,495,1280,1059]）
 * inspect: figma-dump/inspect/rental_final/00_rental_under.txt 42〜118行
 * カンプ : figma-dump/screenshots/rental_final/05_lineup.png
 *          （等倍・Frame 4947 を左上 (140,475) 起点で切り出した画像。「PNG実測」はこの画像）
 * HTML   : template-parts/under/rental/lineup.php
 *
 * 2026-08-14 司令が rental.css へ結合済み（元は部分ファイル _rnt/20_lineup.css）。
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 = vw」。
 * 固定値は (1) コンテナの最大幅 (2) 1px/2px 罫線・5px 以下の小さな図形
 * (3) 固定でないと整わない場合 のみで、その行に理由を書いている。
 * ブレイクポイントは max-width の単独指定。
 *
 * 再定義しない共通クラス
 *   .rnt-inner … rental.css（内容幅 1200px）。この中に 1120px の枠を1段入れている
 *   .ar 系     … common.css 725〜775行。ボタンの白シェブロンは絶対配置が必要なため
 *                共通クラスには一切触らず、自前の .rnt-lineup__btn-ar に支給素材
 *                rental_07.svg（16×16 白・Figma の ar_2_white と同形）を指定している
 */

/* ============================================================
   1. セクション枠
   Figma Frame 4947 [160,495,1280,1119]・pad=(0,0,60,0)・gap 30。
   上の余白は 0（直前のリード文 Frame 4858 が pad-bottom 60 を持っている）。
   ============================================================ */
.rnt-lineup {
  padding-bottom: clamp(4rem, 4.17vw, 6rem); /* Figma 下 60px */
}

/* このセクションだけ内容幅 1120px（Figma x160〜1280）。
   ページの他セクションは 1200px（.rnt-inner）なので、その内側にもう一段入れて
   左右へ 40px ずつ寄せる形にしている。1440px で x160〜1280 と一致する。 */
.rnt-lineup__inner {
  max-width: 112rem; /* 固定: Figma 1120px。コンテナの最大幅（例外1） */
  margin-inline: auto;
}

/* カード2枚（Figma gap 30 → 1枚 545px＝(1120 − 30) ÷ 2）。
   769〜1199px は2列のままリキッドで縮む（帯を閉じないので下の 768px まで継承）。 */
.rnt-lineup__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30 */
}

/* ============================================================
   2. カード
   ============================================================ */
.rnt-lineup__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1)。オフセットは縦横とも 0（下方向のズレなし）。 */
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

/* -----------------------------------------------------------------------------
 * 2-1. 赤帯（Figma name > wrap [160,495,705,560]・pad(12,20,14,20)・gap 4・#B80003）
 *      高さ 65px は「上 12 ＋ 見出しの行高 39.2 ＋ 下 14」で決まるので高さは持たせない。
 * -------------------------------------------------------------------------- */
.rnt-lineup__head {
  display: flex;
  align-items: center; /* Figma: アイコン 35px は行高 39.2 の中で上下中央（y509〜544） */
  gap: .4rem; /* Figma gap 4（アイコン右端 215 → 見出し左端 219） */
  padding: clamp(1rem, .83vw, 1.2rem) clamp(1.6rem, 1.39vw, 2rem) clamp(1.2rem, .97vw, 1.4rem);
  background: var(--color_main); /* Figma main_color #B80003 */
  color: #fff;
}

/* 白アイコン 35×35（Figma icon / cart） */
.rnt-lineup__head-icon {
  flex: 0 0 clamp(2.8rem, 2.43vw, 3.5rem);
  width: clamp(2.8rem, 2.43vw, 3.5rem);
}
.rnt-lineup__head-icon img {
  width: 100%;
}

/* 見出し（Figma 28px / lh39.2 / 白 / wght700） */
.rnt-lineup__head-title {
  font-size: clamp(2rem, 1.94vw, 2.8rem); /* 28px */
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
  letter-spacing: .05em;
}

/* -----------------------------------------------------------------------------
 * 2-2. 本体（Figma wrap [160,560,705,1059]・pad 30）
 *      縦並びにして黒ボタンの親に margin-top:auto を効かせ、2枚のカードで
 *      ボタンの位置をそろえる（min-height は持たせない＝文が折り返して増えても崩れない）。
 * -------------------------------------------------------------------------- */
.rnt-lineup__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
}

/* 灰色の説明箱（Figma Frame 4950 / 4951 [190,590,675,666]・pad 16・#F6F6F6） */
.rnt-lineup__lead {
  padding: clamp(1.2rem, 1.11vw, 1.6rem); /* Figma pad 16 */
  background: var(--color_light); /* Figma base_color #F6F6F6 */
  font-size: 1.4rem; /* ログ 14px。本文の最小サイズのため可変にしない */
  font-weight: 700;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
}

/* ラベル＋リストのまとまり（Figma Frame 4948 / 4949）。
   直前の要素との間はどれも 20px（灰色箱 y666 → 686、1つめの下端 802 →（pad20）→ 822）。 */
.rnt-lineup__block {
  margin-top: clamp(1.6rem, 1.39vw, 2rem); /* Figma 20px */
}

/* 赤枠ラベル「向いているケース」「主な特徴」
   Figma Frame 104 [190,686,675,726]・stroke 1px #B80003 INSIDE・pad 10・14px / lh19.6 / 赤 / wght700。
   Figma の INSIDE 罫線は pad 10 の内側に描かれる（文字の上端は枠から 10px）ので、
   CSS では 罫線 1px ＋ 余白 9px に分けて合計を 10px に合わせている。 */
.rnt-lineup__label {
  padding: .9rem; /* 固定: 中の文字が 14px 固定のため上下の余白も固定（例外3）。10 − 罫線1 = 9 */
  border: 1px solid var(--color_main); /* 固定: 1px 罫線（例外2） */
  color: var(--color_main);
  font-size: 1.4rem; /* ログ 14px。本文の最小サイズのため可変にしない */
  font-weight: 700;
  line-height: 1.4; /* 19.6 / 14 */
  letter-spacing: .05em;
}

/* 3項目のリスト（Figma: ラベル枠 y726 → 1項目め y736 の 10px＝txt の pad-bottom 10） */
.rnt-lineup__items {
  margin-top: 1rem; /* 固定: ラベルの文字が 14px 固定なのでここも固定（例外3）。Figma 10px */
}

/* 項目（Figma 14px / lh22.4 / wght500 / #111111・項目間の余白は 0＝行高だけで並ぶ） */
.rnt-lineup__item {
  position: relative;
  padding-left: 2.2rem; /* PNG実測: 行頭 x190 → 本文 x212 の 22px。折り返し行もここにそろう */
  color: var(--color_dark); /* Figma txt_color #111111（行頭の点も currentColor で拾う） */
  font-size: 1.4rem; /* ログ 14px。本文の最小サイズのため可変にしない */
  font-weight: 500;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
}

/* 行頭の点。ログでは項目が +mixed（1行に2書式）とだけ出て記号の実体が読めないため、
   05_lineup.png を等倍で実測して確定した:
     ・直径4px の丸（ink は x58〜62・y272〜275 の4px 四方＝丸）
     ・行頭（テキスト枠の左端）から 8px の位置にあり、中心は 10px
     ・行の上端から点の上端まで 11px
     ・色は本文と同じ（黒の行は #111111・強調が行頭から始まる行だけ #B80003）
   箇条書きの点は CSS で描いてよい図形（下層8ページ指示書 51行）。 */
.rnt-lineup__item::before {
  position: absolute;
  top: .79em; /* PNG実測: 行の上端から 11px（11 ÷ 14px） */
  left: .8rem; /* 固定: PNG実測 8px。点が 4px 固定なので位置も固定（例外3） */
  width: .4rem; /* 固定: PNG実測 直径4px。可変にすると点が消えるため（例外2） */
  height: .4rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

/* 強調が行頭から始まる項目（レンタル1枚目の2項目め）は点も赤。PNG実測 #B80003。 */
.rnt-lineup__item--em-head::before {
  background: var(--color_main);
}

/* 項目内の強調。ログは +mixed で色・太さが出ないため PNG実測:
   色 #B80003／墨の量が本文（500）より明らかに多く灰色箱の 700 と同等 → 700。 */
.rnt-lineup__em {
  color: var(--color_main);
  font-weight: 700;
}

/* -----------------------------------------------------------------------------
 * 2-3. 黒ボタン（Figma btn5 [190,958,675,1029]・pad(20,30,20,20)・#111111）
 * -------------------------------------------------------------------------- */
.rnt-lineup__btn-wrap {
  margin-top: auto; /* カード下端にそろえる（2枚の高さが変わってもボタンの位置が合う） */
  padding-top: clamp(1.6rem, 1.39vw, 2rem); /* Figma: 直前のまとまりとの間 20px（最低値として効く） */
}

.rnt-lineup__btn {
  position: relative; /* 白シェブロンを右端に絶対配置するため */
  display: flex;
  align-items: center;
  /* Figma pad(20,30,20,20)。右の 30px は「シェブロン右10px ＋ 図形16px ＋ 逃げ4px」の合計で、
     文字枠の右端 645 とシェブロン左端 649 の間に 4px 残る（ログの座標どおり）。
     右だけ固定なのは、可変にすると狭い幅で 24px まで縮んで文字枠が矢印に 2px 重なるため（例外3）。 */
  padding: clamp(1.6rem, 1.39vw, 2rem) 3rem clamp(1.6rem, 1.39vw, 2rem) clamp(1.6rem, 1.39vw, 2rem);
  background: var(--color_dark); /* Figma txt_color #111111 */
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1); /* Figma DROP_SHADOW(0,5 r=20 #591E1B@0.1) */
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

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

/* 白アイコン 31×31（Figma icon / cart [210,978,241,1009]） */
.rnt-lineup__btn-icon {
  flex: 0 0 clamp(2.4rem, 2.15vw, 3.1rem);
  width: clamp(2.4rem, 2.15vw, 3.1rem);
}
.rnt-lineup__btn-icon img {
  width: 100%;
}

/* 文言（Figma 16px / lh22.4 / 白 / wght700・アイコンとの間は gap 10） */
.rnt-lineup__btn-txt {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: clamp(.8rem, .69vw, 1rem); /* Figma gap 10 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1.4; /* 22.4 / 16 */
  letter-spacing: .05em;
}

/* 白シェブロン 16×16（Figma INSTANCE ar_2_white [649,986,665,1002]）。
   auto layout の外に置かれていて右端から 10px・上下中央のため絶対配置にしている。
   共通クラス .ar--2-white と同形だが、共通側を上書きしない取り決めのため
   支給素材 rental_07.svg（16×16 白・stroke 2px）を自前クラスで指定する。 */
.rnt-lineup__btn-ar {
  position: absolute;
  top: 50%;
  right: 1rem; /* 固定: Figma 右端から 10px。中の図形が 16px 固定なので位置も固定（例外3） */
  width: 1.6rem;
  height: 1.6rem;
  background: url("../images/rental/rental_07.svg") no-repeat center / 1.6rem 1.6rem;
  transform: translateY(-50%);
}

/* ============================================================
   3. 768px 以下は1列（SP カンプ無し・当方設計）
   1列でも横に伸びきらないよう、カンプのカード幅 545px を上限にして中央へ置く。
   ============================================================ */
@media (max-width: 768px) {
  .rnt-lineup__list {
    grid-template-columns: 1fr;
    max-width: 54.5rem; /* 固定: Figma のカード幅 545px（コンテナの最大幅・例外1） */
    margin-inline: auto;
  }
}



/* ============================================================
   4. compare（購入とレンタルを詳しく比較する）
   Figma contents_inner → btn_area [120,1120,1320,1310]・pad=(0,0,100,0)
     白カード Frame 4853 [468,1120,972,1210]＝504×90
       影 DROP_SHADOW(0,0 r=20 #000000@0.1) … ずれは縦横とも 0（0 5px などではない）
     中身は絶対配置の Group 120 [505,1144,952,1186]
       アイコン 41×41 [505,1145,546,1186]
       文字     [566,1158,880,1173]（20px・太さ700・#B80003・align=CENTER）
       ar       [933,1154,952,1175]（枠19×21・中の線 7×14 stroke2px）

   横の内訳（合計 504）: 左余白37 ＋ アイコン41 ＋ 間20 ＋ 文字枠314 ＋ 間50.5
                        ＋ .ar 24 ＋ 右余白17.5
   ＝ カンプの枠 19×21 を共通クラス .ar（24×24 枠・中の線は同寸）に置き換えたぶん、
     枠の左右が 2.5px ずつ広がるので右余白を 20 → 17.5 に詰めて線の中心（x942.5）を合わせる。
   ============================================================ */
.rnt-compare {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* btn_area の下 padding 100px（100÷14.4＝6.94vw） */
}

.rnt-compare__body {
  display: flex;
  justify-content: center; /* Figma: カード 504px は内容幅 1200 の中央（左右とも 348px 空き） */
}

.rnt-compare__link {
  display: flex;
  align-items: center;
  /* 図形なので padding 任せにせず明示 width（共通契約 1-6）。504÷14.4＝35vw。
     下限 42rem は 1200px 表示の値で止める指定。右端のシェブロンが共通クラス .ar の
     24px 固定で縮まないため、これ以上カード全体を vw 比例で縮めると文字枠だけが先に
     足りなくなり、1024px 付近で「購入とレンタルを詳しく比較す／る」と1文字だけ
     折り返して崩れる（実測で確認）。max-width で container からははみ出させない。 */
  width: clamp(42rem, 35vw, 50.4rem);
  max-width: 100%;
  /* 90÷14.4＝6.25vw。下限は上の width と同じく 1200px 表示の 75px で止めて比率を保つ。
     狭い幅で文言が2行になったときに潰さないため height ではなく min-height。 */
  min-height: clamp(7.5rem, 6.25vw, 9rem);
  padding-left: clamp(1.6rem, 2.57vw, 3.7rem); /* カード左端468 → アイコン左端505 の 37px */
  padding-right: clamp(1.2rem, 1.22vw, 1.75rem); /* 上のブロックコメントの 17.5px */
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1)。ずれは縦横とも0 */
  text-decoration: none;
  transition: var(--transition);
}

/* hover はトップ・about の白いカード（top.css 510行・Figma node 569:5013 実測）と同じ語彙。
   box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.rnt-compare__link:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, .1), inset 0 0 0 2px var(--color_main);
}

.rnt-compare__icon {
  flex: 0 0 auto;
  width: clamp(3rem, 2.85vw, 4.1rem); /* Figma icon 41×41（41÷14.4＝2.85vw） */
  height: clamp(3rem, 2.85vw, 4.1rem);
  margin-right: clamp(1.2rem, 1.39vw, 2rem); /* アイコン右端546 → 文字枠左端566 の 20px */
}

.rnt-compare__text {
  flex: 1 1 auto;
  min-width: 0;
  /* 字送りの逃げ。Figma の文字幅 314 は 15字×20px ＋ 字間14個ぶん（＝末尾に字間が付かない）で、
     CSS は末尾にも letter-spacing が付くため 315px 必要になり、314 のままだと折り返す。
     左右 6px ずつを隣の空きから借りて 12px の逃げを作る（左右対称なので文字の中心は動かない）。 */
  margin-inline: -.6rem;
  color: var(--color_main); /* Figma main_color #B80003 */
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px（20÷14.4＝1.39vw）。下限はボタン文言として読める 1.6rem */
  font-weight: 700;
  /* Figma は行高 20＝文字サイズと同値だが、CSS で 1 にすると濁点・句読点が切れるため 1.4。
     1行のときは上下中央に置かれるので見た目の位置は変わらない。 */
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

.rnt-compare__link .ar {
  margin-left: clamp(2rem, 3.51vw, 5.05rem); /* 文字枠右端880 → .ar 枠左端930.5 の 50.5px */
}

/* -----------------------------------------------------------------------------
 * 768px 以下（SP カンプ無し・当方設計）
 * 375px 表示ではコンテンツ幅が 335px しか無く、カード幅の下限 420px に届かないため
 * カードのほうが container 幅まで詰められる。そのぶん中の空きを最小まで削り、
 * あわせて文言を 15px にして1行を保つ（文字枠 241px に対し実寸 236px ＝ 4px 強の逃げ）。
 * カンプの左右の空き（左37・アイコンの後20・シェブロンの前50.5・右17.5）はここでは持てない。
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rnt-compare__link {
    padding-left: 1.6rem; /* 固定: 上の clamp の下限と同値（例外3） */
    padding-right: 1.2rem;
  }

  .rnt-compare__icon {
    margin-right: 1.2rem;
  }

  .rnt-compare__text {
    font-size: 1.5rem; /* 固定: これ以上縮めない下限（例外3）。共通契約の本文下限 1.4rem は上回る */
  }

  .rnt-compare__link .ar {
    margin-left: 1.2rem;
  }
}


/* ============================================================
   5. flow（レンタル・購入のご利用の流れ）
   2026-08-14 確定版で非表示ブロック化のため読み込み解除（page-rental.php 参照）。
   後から戻せるよう削除せずに残している。以下は先行実装時のままの記述。
   Figma contents_inner [0,382,1440,735]
     Frame 4858 [120,382,1320,674] … head_01 ＋ sub_head ＋ 導入文（下 padding 80）
     btn_area   [120,675,1320,735] … 黒ボタン 320×60（x560〜880）

   上下の余白はどちらも 0。
     上: カンプでもパンくずの下端 382px から見出しが始まる（Frame の pad 上 0）。
     下: ボタンの下端 y734 の次の行から CONTACT 帯が始まる（PNG 実測・ログとも y735）。
   そのため .rnt-flow 自体には padding を持たせていない。
   ============================================================ */

/* 導入文（Figma txt [120,568,1320,594]・16px / lh 25.6 / 中央 / wght500 / #111111）
   sub_head の下余白 50px は共通クラス .sub-head の padding-bottom が持っているので
   ここでは上マージンを付けない（カンプの 568px にそのまま接する）。 */
.rnt-flow__lead {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

/* ボタンの帯（Figma btn_area）。
   導入文の下端 594 → ボタン上端 675 の 81px ＝ Frame 4858 の下 padding 80 ＋
   contents_inner の gap 1。81 ÷ 14.4 = 5.63vw。 */
.rnt-flow__btn-area {
  display: flex;
  justify-content: center; /* Figma: ボタンは 1200 幅の中央（左右とも 440px 空き） */
  margin-top: clamp(5.6rem, 5.63vw, 8.1rem);
}


/* ============================================================
   6. contact（CONTACT 帯）
   Figma contact インスタンス [0,1310,1440,1736]（1440×426・確定版の座標）
   ※ 先行実装時のカンプでは [0,735,1440,1161] に置かれていた。上に2ブロック増えたぶん
      下がっただけで、中身と寸法は同じ（下の数値は当時の実測のまま）。
   inspect を突き合わせるとトップの contact（node 170:922）と座標まで一致するため、
   数値は assets/css/top.css 1935〜2095行（.top-contact 系）からの転記。
   各宣言に転記元の行を書いてある。SP の落とし方は top.css 2320〜2375行が手本。
   top.css はトップ限定読み込みのため本ページでは効かず、クラスも別（rnt-contact__*）。
   文字の下限は 1ページ目 _wgd/70_contact.css と同じ考え方（top.css の SP 値を下限にして
   768px の段差ではなく連続で縮ませる）。
   ============================================================ */
.rnt-contact {
  /* 上下は top.css 1936行と同値（Figma pad(80,276,80,276) の上下 80px）。
     .section を使わない取り決めのため左右はここで持つ（値は .section__inner と同じ）。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

.rnt-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1944行 10rem（Figma gap 100）。狭い幅では縮む側にする */
  max-width: 100rem; /* 固定: top.css 1945行。Figma 実配置 x220〜1220（コンテナの最大幅・例外1） */
  min-height: 26.6rem; /* top.css 1946行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* -----------------------------------------------------------------------------
 * 左カラム（top.css 1950〜2025行の転記）
 * -------------------------------------------------------------------------- */
.rnt-contact__intro {
  flex: 0 0 30rem; /* 固定: top.css 1951行。Figma title-wrap 300px（x220〜520）で固定幅の列 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

.rnt-contact__label {
  display: flex; /* top.css 1956行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端 234 → 文字左端 238 */
  font-size: 1.5rem; /* top.css 1958行。Figma 15px。これ以上小さくすると読みにくいため固定 */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 21 / 15px */
  letter-spacing: .05em;
}

.rnt-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; /* 固定: 3px の輪郭線（例外2） */
  border-radius: 50%;
}

.rnt-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（Figma 60px）／下限 同 2337行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 / 60px */
  letter-spacing: 0; /* top.css 1979行。CONTACT だけ字間を空けない */
}

.rnt-contact__point {
  display: block; /* top.css 1983行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0; /* Figma title-wrap gap 20（head_01 下端 920 → point 940 → wrap 964） */
  background: #fff;
}

.rnt-contact__tel-label {
  font-size: 1.5rem; /* top.css 1991行。Figma 15px。読みやすさの下限として固定 */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 21 / 15px */
  letter-spacing: .05em;
}

.rnt-contact__tel {
  display: flex; /* top.css 1998行 */
  align-items: center;
  gap: .4rem; /* Figma wrap gap 4（アイコン右端 252 → tel 左端 256） */
}

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

.rnt-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（Figma 34px）／下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 / 34px */
  letter-spacing: .05em;
  text-decoration: none;
}

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

/* -----------------------------------------------------------------------------
 * 右カラム＝ボタン2本（top.css 2028〜2095行の転記）
 * Figma wrap [620,818,1220,1078]・gap 20
 *   btn1 600×120・#7C0002・影 0 10px 30px #860D08@30%（今すぐレンタル申込）
 *   btn2 600×120・#FFFFFF・影 同上（お問い合わせ・見積相談）
 * -------------------------------------------------------------------------- */
.rnt-contact__btns {
  display: flex;
  flex-direction: column;
  flex: 0 1 60rem; /* Figma ボタン 600px。幅が足りない帯では縮む側にする（top.css 2029〜2034行と同じ扱い） */
  min-width: 0;
  gap: 2rem; /* Figma wrap gap 20（btn1 下端 938 → btn2 上端 958） */
}

.rnt-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 固定: top.css 2041行と同値（Figma 120px）。中のアイコン 64×64 は絶対配置で、
     文字が2行のため高さを可変にすると 1024〜1440px の間で上下の余白が痩せる。 */
  height: 12rem;
  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, all .3s ease);
}

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

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

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

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

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

.rnt-contact__btn-txt {
  display: flex; /* top.css 2070行 */
  flex-direction: column;
  align-items: center;
  /* top.css 2074行と同値。Figma の gap 16 は「文字の墨の高さ」基準（1行目18px・2行目12px）で、
     CSS の line-height:1 の行ボックス（24px・15px）に直すと 11.5px ≒ 1.2rem になる
     （墨の中心どうしの間隔 31px を合わせた値）。 */
  gap: 1.2rem;
  text-align: center;
}

.rnt-contact__btn-main {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 上限 top.css 2079行 2.4rem（Figma 24px）／下限は当方設計 */
  font-weight: 700;
  line-height: 1; /* Figma lh 24 / 24px */
  letter-spacing: .05em;
}

.rnt-contact__btn-sub {
  font-size: clamp(1.4rem, 1.04vw, 1.5rem); /* 上限 top.css 2086行 1.5rem（Figma 15px）／下限は当方設計 */
  font-weight: 700;
  line-height: 1; /* Figma lh 15 / 15px */
  letter-spacing: .05em;
}

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


/* -----------------------------------------------------------------------------
 * 1023px 以下（SP カンプ無し・当方設計／1ページ目 _wgd/70_contact.css 234行と同じ落とし方）
 *
 * 2カラムのままだと左カラムが 300px 固定のぶん右カラムが痩せ、
 * 幅 865px を切ったところで2行目の文（最長「レンタル・購入・デモ機などのご相談はこちら」
 * 21文字 × 14px ≒ 309px）が左のアイコン（左40px＋64px）に届く。
 * 帯を分ける位置は共通契約の基本ブレイクポイント 1023px を使う。
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .rnt-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 6rem; /* 縦積みでの左カラムとボタンの間。top.css の SP 4rem より広くして帯の中で区切りを付ける */
    min-height: 0;
  }

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


/* -----------------------------------------------------------------------------
 * 768px 以下（top.css 2320〜2375行の SP を手本）
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rnt-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .rnt-contact__inner {
    gap: 4rem; /* top.css 2327行 */
  }

  .rnt-contact__btn {
    height: auto; /* top.css 2349行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem; /* top.css 2352行。左はアイコン、右は矢印の逃げ */
  }

  .rnt-contact__btn-icon {
    left: 1.6rem; /* top.css 2355〜2357行 */
    width: 5.6rem;
    height: 5.6rem;
  }

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

  .rnt-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2367行 */
    line-height: 1.4; /* 2行に折り返す前提の行間（top.css 2368行） */
  }

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