@charset "UTF-8";
/* =============================================================================
 * rental-earphone.css — イヤホンガイドのレンタル（新規ページ・スラッグは司令が確定）
 *
 * Figma  : 下層ページ under（node 715:4161 ／ 1440×7709・2026-08-21 の確定版）
 * inspect: figma-dump/inspect/confirm_20260821/rental_earphone.txt（寸法・文言の正本）
 * カンプ : figma-dump/screenshots/confirm_20260821/rental_earphone.png（等倍 1440px）
 * HTML   : page-rental-earphone.php ／ template-parts/under/rental-earphone/ の各パーツ
 *
 * 接頭辞は rtl-（rnt- は「レンタル・購入のご案内」で使用済み）。
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 ＝ vw」。
 * clamp の下限は SP カンプが無いため当方設計（本文系は 1.4rem を下回らせない）。
 * 固定 px/rem を使うのは (1)コンテナの最大幅 (2)1px/2px の罫線・角丸5px以下・小さな図形
 * (3)固定でないと整わない場合 のみ。使った箇所には理由を1行書いている。
 *
 * ブレイクポイントは max-width の単独指定のみ（min-width で下限を切らない）。
 *   1199px … 3列カードの列間だけを詰める
 *   1023px … 2カラム・3列を畳む
 *    768px … SP（カンプ無し・当方設計）
 *
 * common.css からそのまま使う既存クラス（ここでは再定義しない）
 *   .page-title / .page-title__title … 1133〜1149行
 *   .heading-01 / __title / __label  … 967〜986行（下余白 1.6rem 込み）
 *   .sub-head / .sub-head__text      … 988〜1000行（下余白 5rem 込み）
 *   .btn                              … 834行（320×60・#111111・影 0 10 30 rgba(0,0,0,.2)）
 *   .ar / .ar--white / .ar--down / .ar--2-white / .ar--2-down … 734行〜
 *
 * ホバーは 2026-08-20 の統一語彙（common.css に定義済み・ここでは作り直さない）
 *   白い面      … 外影を保ったまま inset 0 0 0 2px var(--color_main)
 *   #7C0002 の面 … 同じ形の白枠
 *   #111111 の面 … #323232
 * ========================================================================== */


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


/* ============================================================
   2. case（レンタルがおすすめのケース）
   Figma FRAME おすすめのケース [120,867,1320,2034] ／ pad=(0,0,100,0)
     head_01  [120,867,1320,957]    … 共通 .heading-01（下 16px 込み）
     sub_head [120,957,1320,1053]   … 共通 .sub-head（下 50px 込み）
     wrap     [200,1053,1240,1687]  … カード 330×305 を 3＋2・gap 24
     Frame454 [120,1687,1320,1747]  … 下向きの二重シェブロン（1200×60）
     txt      [200,1747,1240,1844]  … 補足文（下 padding 45）
     Frame4853[468,1844,972,1934]   … 白カード 504×90

   上の余白は 0。パンくず（.breadcrumb-wrap の下 padding 40px）の下端 867px から
   そのまま見出しが始まる。
   ============================================================ */
.rtl-case {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* Figma 下 100px（100÷14.4＝6.94vw） */
}

.rtl-case__list {
  /* 番号のはみ出し量とカード間の間隔を他の指定から参照するので変数で持つ */
  --rtl-case-gap: clamp(1.6rem, 1.67vw, 2.4rem);      /* Figma gap 24px */
  --rtl-case-num-offset: clamp(1.4rem, 1.39vw, 2rem); /* Figma 番号 20px（左位置・上へのはみ出し） */

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 2列目の2枚を中央に置く（Figma も x378〜1062 で中央） */
  gap: var(--rtl-case-gap);
  max-width: 104rem; /* 固定: Figma のカード枠 1040px（カード330×3＋gap24×2＝1038）。コンテナの最大幅（例外1） */
  margin-inline: auto;
}

.rtl-case__item {
  position: relative; /* 番号の基準 */
  width: calc((100% - var(--rtl-case-gap) * 2) / 3);
  max-width: 33rem; /* 固定: Figma カード幅 330px。1列になっても伸びきらせない（例外1） */
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
  background: #fff;
  /* Figma effect=DROP_SHADOW(0,0 r=20 #000000@0.1)。
     ログには stroke=1px #EAEAEA も出るが、全量ダンプの strokes[0] は visible:false で、
     カンプ PNG でもカードの4辺は純白（x201/x531/y1053/y1358 いずれも 255,255,255）。
     見えているのは影だけなので枠線は置かない（購入ページの同じカードと同じ扱い）。 */
  box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

/* 番号 01〜05（Figma 30px / lh42 / Roboto / wght500 / 赤・カード左端+20px・カード上端より20px上）
   1ページ目の flow の番号（_wgd/30_flow.css 48行）と同じ作り */
.rtl-case__num {
  position: absolute;
  top: calc(-1 * var(--rtl-case-num-offset));
  left: var(--rtl-case-num-offset);
  color: var(--color_main);
  font-family: var(--font_eng); /* Figma 実測 Roboto */
  font-size: clamp(2.2rem, 2.08vw, 3rem); /* 30px */
  font-weight: 500;
  line-height: 1.4; /* 42 / 30 */
  letter-spacing: .05em;
}

/* 写真 270×150（書き出しは2倍の 540×300 を想定） */
.rtl-case__img img {
  width: 100%;
}

/* Figma 18px / lh25.2 / 中央 / wght700 / 赤。写真との間は wrap の pad-top 20px。
   min-height はカンプのテキスト枠が5枚とも3行ぶん（75px）で固定されていて、
   カード高さが5枚とも 305px にそろっているため。文字数が2行の札もこの高さを保つ。 */
.rtl-case__title {
  min-height: 4.2em; /* 3行ぶん（行送り 1.4em × 3）。カンプのテキスト枠 75px ＝ 25.2×3 */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma wrap の pad-top 20px */
  color: var(--color_main);
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1.4; /* 25.2 / 18 */
  letter-spacing: .05em;
  text-align: center;
}

/* 下向きの二重シェブロン（Figma Frame 454 [120,1687,1320,1747]・高さ60・中に 34×20 の図形）。
   図形の位置（1200幅の中で x583〜617・上から 20px）・色 #717171・線幅 2px・square cap が
   購入ページの同じ図形と完全に一致するため、支給済みの purchase_06.svg をそのまま敷く。
   background-size を指定しないことで、幅が変わっても図形が 34×20 のまま中央に出る
   （img で置くと幅に比例して図形まで縮む）。
   カード列の下端 1687 からそのまま始まるので上マージンは持たせない。 */
.rtl-case__chevron {
  height: clamp(4rem, 4.17vw, 6rem); /* Figma 60px（上下 pad 20 ＋ 図形 20） */
  background: url("../images/purchase/purchase_06.svg") no-repeat center;
}

/* 補足文（Figma txt [200,1747,1240,1799]・16px / lh25.6 / 中央 / wght500） */
.rtl-case__note {
  max-width: 104rem; /* 固定: Figma のテキスト枠 1040px（コンテナの最大幅・例外1） */
  margin-inline: auto;
  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;
}

/* -----------------------------------------------------------------------------
 * 2-2. 白カード「購入とレンタルを比較する」
 *      Figma Frame 4853 [468,1844,972,1934]＝504×90・#FFFFFF
 *        影 DROP_SHADOW(0,0 r=20 #000000@0.1)（ずれは縦横とも 0）
 *      中身は絶対配置の Group 120 [505,1868,952,1910]
 *        アイコン 41×41 [505,1869,546,1910]
 *        文字     [594,1882,845,1897]（20px・lh20・wght700・#B80003・align=CENTER）
 *        ar       [933,1878,952,1899]（枠19×21・中の線 7×14 stroke 2px）
 *
 *      横の内訳（合計 504）: 左余白37 ＋ アイコン41 ＋ 間48 ＋ 文字枠251 ＋ 間85.5
 *                          ＋ .ar 24 ＋ 右余白17.5
 *      ＝ カンプの枠 19×21 を共通クラス .ar（24×24 枠・中の線は同寸）に置き換えたぶん、
 *        枠の左右が 2.5px ずつ広がるので右余白を 20 → 17.5 に詰めて線の中心（x942.5）を合わせる。
 *      レンタル・購入のご案内の .rnt-compare と同一の部品で、文言（12字）だけが短い。
 * -------------------------------------------------------------------------- */
.rtl-case__compare {
  display: flex;
  justify-content: center; /* Figma: カード 504px は内容幅 1200 の中央 */
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* Figma txt の下 padding 45px（45÷14.4＝3.125vw） */
}

.rtl-case__compare-link {
  display: flex;
  align-items: center;
  /* 図形なので padding 任せにせず明示 width。504÷14.4＝35vw。
     下限 42rem は 1200px 表示の値で止める指定。右端のシェブロンが共通クラス .ar の
     24px 固定で縮まないため、これ以上カード全体を vw 比例で縮めると文字枠だけが先に
     足りなくなり（文字は 1151px 以下で 16px に張り付く）、1024〜1150px で文言が
     折り返す。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 は白い面の統一語彙。box-shadow は1プロパティなので既存の外影を併記して維持する。 */
.rtl-case__compare-link:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, .1), inset 0 0 0 2px var(--color_main);
}

.rtl-case__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, 3.33vw, 4.8rem); /* アイコン右端546 → 文字枠左端594 の 48px */
}

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

.rtl-case__compare-link .ar {
  margin-left: clamp(1.2rem, 5.94vw, 8.55rem); /* 文字枠右端845 → .ar 枠左端930.5 の 85.5px */
}


/* ============================================================
   3. benefit（レンタルのメリット）
   Figma FRAME レンタルメリット [0,2035,1440,3101] ／ 全幅の灰色帯・pad=(100,0,100,0)
     カード 330×328・白地・上辺だけ 8px の赤帯・pad=(40,30,30,30)・gap 24
     3枚＋2枚（2列目は中央寄せ）
   ============================================================ */
.rtl-benefit {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
  background: var(--color_light); /* Figma base_color #F6F6F6 */
}

.rtl-benefit__list {
  --rtl-benefit-gap: clamp(1.6rem, 1.67vw, 2.4rem); /* Figma gap 24px */

  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 2列目の2枚を中央に置く（Figma も x378〜1062 で中央） */
  gap: var(--rtl-benefit-gap);
  max-width: 104rem; /* 固定: Figma のカード枠 1040px（例外1） */
  margin-inline: auto;
}

.rtl-benefit__item {
  display: flex;
  flex-direction: column;
  width: calc((100% - var(--rtl-benefit-gap) * 2) / 3);
  max-width: 33rem; /* 固定: Figma カード幅 330px（例外1） */
  /* Figma pad=(40,30,30,30)。上は「赤帯 8px ＋ 32px」で合計 40px になる。 */
  padding: clamp(2.2rem, 2.22vw, 3.2rem) clamp(2rem, 2.08vw, 3rem) clamp(2rem, 2.08vw, 3rem);
  /* 上端の赤い太帯。inspect ログは stroke=1px #B80003 としか出ないが、全量ダンプの
     individualStrokeWeights が {top:8, right:0, bottom:0, left:0}＝上辺だけ 8px で、
     左右・下辺に線は無い。カンプ PNG の見た目とも一致する。 */
  border-top: clamp(.5rem, .56vw, .8rem) solid var(--color_main);
  background: #fff;
}

/* アイコン（淡いピンクの円 84×84 ごと書き出した SVG）とラベルの入れ物 */
.rtl-benefit__head {
  position: relative; /* ラベルの基準 */
  width: clamp(6rem, 5.83vw, 8.4rem); /* Figma Group 160 84×84 */
  margin-inline: auto;
}

.rtl-benefit__icon {
  display: block;
  width: 100%;
}

/* 「Benefit01」（Figma 16px / lh22.4 / Roboto / wght500 / 中央 / cta_gr グラデーション文字）。
   Figma でも縦積みの流れに入っていない絶対配置（layoutPositioning: ABSOLUTE）で、
   墨の枠が y2353〜2364・円の上端が y2361。行送り 22.4 の行箱の中で墨は上下中央に来るので、
   行箱の上端を円の上端より 13.5px 上に置くと墨がカンプの位置に来る。 */
.rtl-benefit__label {
  position: absolute;
  top: calc(-1 * clamp(1rem, .94vw, 1.35rem));
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
  color: var(--color_main); /* グラデーション文字が効かない環境用の色 */
  font-family: var(--font_eng); /* Figma 実測 Roboto */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.4; /* 22.4 / 16 */
  letter-spacing: .03em; /* Figma 実測 0.48 ÷ 16px（このラベルだけ .05em ではない） */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rtl-benefit__label {
    background-image: var(--gradient); /* Figma cta_gr */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* Figma 20px / lh28 / 中央 / wght700 / 赤。下に 1px #EAEAEA の区切り線（pad-bottom 10） */
.rtl-benefit__title {
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma カード内 gap 20 */
  padding-bottom: clamp(.8rem, .69vw, 1rem); /* Figma txt の pad-bottom 10 */
  /* 区切り線。Figma は枠内ストローク（individualStrokeWeights の bottom:1）で、線は
     pad-bottom 10 の内側に出る。border-bottom だと枠の外に付いて枠が 1px 伸び、
     下の要素までずれるため、内側に描く inset box-shadow にしている。 */
  box-shadow: inset 0 -1px 0 var(--color_line); /* 固定: 1px の罫線（例外2） */
  color: var(--color_main);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  font-weight: 700;
  line-height: 1.4; /* 28 / 20 */
  letter-spacing: .05em;
  text-align: center;
}

/* Figma 16px / lh25.6 / 左寄せ / wght500 */
.rtl-benefit__text {
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma Frame 4841 gap 10 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}


/* ============================================================
   4. area（国内レンタル・海外レンタル）
   Figma FRAME 国内レンタル・海外レンタル [120,3102,1320,4023] ／ pad=(100,0,60,0)
     head_01   [120,3202,1320,3326] … 下 padding が 50px（この節は sub_head が無い）
     txt       [200,3326,1240,3449] … リード文3行（下 padding 45）
     Frame4947 [160,3449,1280,3812] … カード 545×303 ×2・gap 30（下 padding 60）
     txt       [200,3812,1240,3883] … 注記1行（下 padding 45）
     btn       [490,3883,950,3963]  … 赤ボタン 460×80
   ============================================================ */
.rtl-area {
  padding-top: clamp(6rem, 6.94vw, 10rem);   /* Figma 上 100px */
  padding-bottom: clamp(4rem, 4.17vw, 6rem); /* Figma 下 60px */
}

/* common.css の .heading-01 は下余白 1.6rem。この節だけ sub_head が無く、
   head_01 自身の下 padding が 50px なので上書きする（warranty.css 307行と同じ扱い）。 */
.rtl-area__head {
  padding-bottom: clamp(3rem, 3.47vw, 5rem); /* Figma 50px */
}

/* リード文（Figma 16px / lh25.6 / 中央 / wght500 / #111111） */
.rtl-area__lead {
  max-width: 104rem; /* 固定: Figma のテキスト枠 1040px（例外1） */
  margin-inline: auto;
  margin-bottom: clamp(3rem, 3.13vw, 4.5rem); /* Figma txt の下 padding 45px */
  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;
}

/* この節だけ内容幅が 1120px（Figma Frame 4947 は x160〜1280）。
   .rtl-inner（1200px）の内側にもう一段置いて左右を 40px ずつ詰める。 */
.rtl-area__outer {
  max-width: 112rem; /* 固定: Figma 1120px（例外1） */
  margin-inline: auto;
  margin-bottom: clamp(4rem, 4.17vw, 6rem); /* Figma Frame 4947 の下 padding 60px */
}

.rtl-area__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30 */
}

.rtl-area__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1) */
}

/* 赤帯の見出し（Figma wrap pad=(12,20,14,20)・#B80003・28px / lh39.2 / 白 / wght700）。
   高さ 65 ＝ 12 ＋ 39.2 ＋ 14。レンタル・購入のご案内の同じ部品と違い、左のアイコンは無い。 */
.rtl-area__name {
  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;
  font-size: clamp(2rem, 1.94vw, 2.8rem); /* 28px */
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
  letter-spacing: .05em;
}

/* 本体（Figma wrap [160,3514,705,3752]・pad 30）。
   縦並びにして黒ボタンの親に margin-top:auto を効かせ、2枚のカードでボタンの位置をそろえる。 */
.rtl-area__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
}

/* 灰色の説明箱（Figma Frame 4950 / 4951 [190,3544,675,3642]・pad 16・#F6F6F6・
   14px / lh22.4 / 左寄せ / wght700） */
.rtl-area__lead-box {
  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;
}

.rtl-area__btn-wrap {
  margin-top: auto; /* カード下端にそろえる（2枚の高さが変わってもボタンの位置が合う） */
  padding-top: clamp(1.6rem, 1.39vw, 2rem); /* Figma: 灰色箱との間 20px（最低値として効く） */
}

/* 黒ボタン（Figma btn5 [190,3662,675,3722]＝485×60・pad=(20,30,20,20)・#111111） */
.rtl-area__btn {
  position: relative; /* 白シェブロンを右端に絶対配置するため */
  display: flex;
  align-items: center;
  /* Figma pad(20,30,20,20)。右の 30px は「シェブロン右10px ＋ 図形16px ＋ 逃げ4px」の合計。
     右だけ固定なのは、可変にすると狭い幅で 24px まで縮んで文字枠が矢印に重なるため（例外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 は濃いグレーの面の統一語彙 */
.rtl-area__btn:hover {
  background: #323232;
}

/* 文言（Figma 16px / lh22.4 / 白 / wght700） */
.rtl-area__btn-txt {
  flex: 1 1 auto;
  min-width: 0;
  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,3684,665,3700]）。
   auto layout の外に置かれていて右端から 10px・上下中央のため絶対配置にしている。
   共通クラス .ar--2-white の中の線は 4.67×9.33 で、カンプ実測 4.7×9.3 と一致する。 */
.rtl-area__btn .ar--2-white {
  position: absolute;
  top: 50%;
  right: 1rem; /* 固定: Figma 右端から 10px。中の図形が 16px 固定なので位置も固定（例外3） */
  transform: translateY(-50%);
}

/* 注記（Figma txt [200,3812,1240,3838]・16px / lh25.6 / 中央 / wght500） */
.rtl-area__note {
  max-width: 104rem; /* 固定: Figma のテキスト枠 1040px（例外1） */
  margin-inline: auto;
  margin-bottom: clamp(3rem, 3.13vw, 4.5rem); /* Figma txt の下 padding 45px */
  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;
}

.rtl-area__cta,
.rtl-flow__cta {
  display: flex;
  justify-content: center;
}

/* -----------------------------------------------------------------------------
 * 4-2. 赤ボタン .rtl-cta-btn（area と flow で共通の部品）
 *      Figma btn [490,3883,950,3963]／[490,5266,950,5346]＝460×80・#7C0002
 *        影   DROP_SHADOW(0,10 r=30 #860D08@0.3)
 *        icon [542,3902,585,3945]＝43×43（ボタン左端から 52px）
 *        txt  [528,3916,912,3930]＝384px・20px / lh20 / 白 / wght700・align=CENTER
 *        ar   [906,3911,930,3935]＝24×24（ボタン右端から 20px）
 *      文字枠の中心（x720）＝ボタンの中心なので、左右の padding は同値にして中央に置く。
 *      値はアイコンの右端（左52＋43＝95px）にちょうど接するところまで開けている。
 * -------------------------------------------------------------------------- */
.rtl-cta-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 460px。下限 36rem は、文字が 16px に張り付く 1151px 以下でも
     文言（12字＝202px）が1行に収まるようにするための止め（例外3）。 */
  width: clamp(36rem, 31.94vw, 46rem);
  max-width: 100%;
  /* 80÷14.4＝5.56vw。文言が2行になっても潰さないため height ではなく min-height。 */
  min-height: clamp(6.4rem, 5.56vw, 8rem);
  padding-inline: clamp(5.6rem, 6.6vw, 9.5rem); /* 上のブロックコメントの 95px */
  background: var(--color_main_dark); /* Figma main_color_dark #7C0002 */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

/* hover は #7C0002 の面の統一語彙＝白い内枠。外影は併記して維持する。 */
.rtl-cta-btn:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.rtl-cta-btn__icon {
  position: absolute;
  top: 50%;
  left: clamp(1.2rem, 3.61vw, 5.2rem); /* Figma ボタン左端 → アイコン左端 52px */
  width: clamp(3.2rem, 2.99vw, 4.3rem); /* Figma 43×43 */
  height: auto;
  transform: translateY(-50%);
}

.rtl-cta-btn__txt {
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  font-weight: 700;
  /* Figma は行高 20＝文字サイズと同値だが、CSS で 1 にすると濁点・句読点が切れるため 1.4。 */
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

.rtl-cta-btn .ar--white {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 1.39vw, 2rem); /* Figma ボタン右端から 20px */
  transform: translateY(-50%);
}


/* ============================================================
   5. flow（レンタルの流れ）
   Figma FRAME レンタルまでの流れ [0,4024,1440,5446] ／ pad=(100,0,100,0)
     Frame4847 [200,4310,1240,5266] … カード 1040×141 ×6・gap 13（下 padding 45）
     btn       [490,5266,950,5346]  … 赤ボタン 460×80（area と同じ部品）
   カードは 白地・1px #EAEAEA・pad=(20,30,20,80)。左の 80px は帯 50px ＋ 30px。
   ============================================================ */
.rtl-flow {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
}

.rtl-flow__list {
  display: flex;
  flex-direction: column;
  gap: clamp(.8rem, .9vw, 1.3rem); /* Figma カード間 13px */
  max-width: 104rem; /* 固定: Figma のカード幅 1040px（例外1） */
  margin-inline: auto;
}

.rtl-flow__item {
  position: relative; /* 帯と矢印の基準 */
  display: flex;
  align-items: center;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* Figma アイコンと本文の gap 20 */
  min-height: clamp(10.4rem, 9.79vw, 14.1rem); /* Figma カード高 141px。中身が増えたら伸びるよう min にする */
  /* Figma pad=(20,30,20,80)。4辺とも 1px の枠内ストローク分を差し引く
     （枠の外側から数えて 20/30/20/80 になる）。左 79px＝5.486vw／右 29px＝2.014vw。
     これでアイコン左端が x280、区切り線の右端が x1210 とカンプに一致する。 */
  padding: clamp(1.1rem, 1.32vw, 1.9rem) clamp(2rem, 2.01vw, 2.9rem) clamp(1.1rem, 1.32vw, 1.9rem) clamp(5.4rem, 5.49vw, 7.9rem);
  border: 1px solid var(--color_line); /* 固定: 1px の罫線（例外2） */
  background: #fff;
}

/* 左端の帯（Figma Rectangle 182 [200,4310,250,4451]・cta_gr）。
   カンプでは帯がカードの枠線まで覆っているので、1px の枠の外まで広げる。
   グラデーションはカンプ実測でも左 #DA3106 → 右 #B80003 の横方向。 */
.rtl-flow__band {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(3.6rem, 3.47vw, 5rem); /* Figma 50px */
  background: var(--gradient); /* Figma cta_gr */
  color: #fff;
}

/* Figma 18px / wght700 / 白の縦書き（カンプは S が上・文字は時計回りに90度） */
.rtl-flow__band-txt {
  writing-mode: vertical-rl;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

.rtl-flow__icon {
  flex: 0 0 auto;
  width: clamp(6.4rem, 6.53vw, 9.4rem); /* Figma Group 162 94×94（淡いピンクの円ごと書き出し） */
  height: auto;
}

.rtl-flow__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Figma 18px / lh28.8 / 左寄せ / wght700 / 赤。下に 1px #EAEAEA の区切り線（pad-bottom 10） */
.rtl-flow__title {
  padding-bottom: clamp(.8rem, .69vw, 1rem);
  border-bottom: 1px solid var(--color_line); /* 固定: 1px の罫線（例外2） */
  color: var(--color_main);
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1.6; /* 28.8 / 18 */
  letter-spacing: .05em;
}

/* Figma 16px / lh25.6 / 左寄せ / wght500 */
.rtl-flow__text {
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma Frame 4841 gap 10 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}

/* カード間の下向き矢印。共通クラス .ar--down（24×24）で、中の線 14×7・stroke 2px・
   square cap はカンプの図形（[713,4450,727,4457]）と同寸・同色。
   カンプの位置は「隙間の中央」ではなくカード下辺寄りで、線の中心 y4453.5 は
   カード下辺（枠線の外側 y4451）の 2.5px 下。絶対配置の基準はパディングボックス
   （枠線 1px の内側＝y4450）なので、その 3.5px 下に 24px の枠の中心を置く
   ＝ bottom は -(24/2 + 3.5) = -15.5px。矢印は共通クラス側が 2.4rem 固定なので
   位置も固定値でそろえる。
   .ar--down は transform: rotate(90deg) を持つので、中央寄せの translate と
   1つの transform にまとめる（common.css 782行の注記どおり）。 */
.rtl-flow__arrow {
  position: absolute;
  bottom: -1.55rem; /* 固定: 24px 固定の矢印に対する位置合わせ（例外3・上の実測どおり） */
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.rtl-flow__cta {
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* Figma Frame 4847 の下 padding 45px */
}


/* ============================================================
   6. warranty（あんしん補償サービスへの誘導）
   Figma FRAME cta [160,5447,1280,5740] ／ 1120×293・白地・4px #EAEAEA 枠・pad=(50,0,50,0)
     T        [380,5497,1060,5524] … 見出し 27px / lh27 / 中央 / 赤
     Frame456 [200,5554,1240,5690] … 左 570px ＋ 右 402px（合計 1040＝箱の内側）
     Rect230  [469,5597,618,5603]  … #FFEDED の下線マーカー（149×6）
   ============================================================ */
.rtl-warranty {
  /* カンプでは次の FAQ を包む Frame 4968 の上 padding 100px。地色はどちらも白で
     見た目は同じなので、margin の相殺を避けてこちら側の下 padding として持つ。 */
  padding-bottom: clamp(6rem, 6.94vw, 10rem);
}

.rtl-warranty__box {
  max-width: 112rem; /* 固定: Figma 1120px（内容幅 1200 よりさらに 40px ずつ内側・例外1） */
  margin-inline: auto;
  /* Figma 上下 pad 50 ／ 左右 40。どちらも 4px の枠内ストローク分を差し引いてある
     （枠の外側から数えて 50/40 になる。common.css の .sub-head__text と同じ考え方）。 */
  padding: clamp(2.6rem, 3.19vw, 4.6rem) clamp(1.6rem, 2.5vw, 3.6rem);
  border: 4px solid var(--color_line); /* 固定: 罫線は縮めると消えるため（例外2） */
  background: #fff;
}

/* Figma 27px / lh27 / 中央 / wght700 / 赤 */
.rtl-warranty__title {
  color: var(--color_main);
  font-size: clamp(2rem, 1.88vw, 2.7rem); /* 27px */
  font-weight: 700;
  line-height: 1; /* Figma lh27 ＝ 文字サイズと同値。1行に収まる幅では行送りを増やさない */
  letter-spacing: .05em;
  text-align: center;
}

.rtl-warranty__body {
  display: flex;
  align-items: center; /* Figma: 右のボタン 90px は左カラム 136px の中で上下中央 */
  gap: clamp(3rem, 4.72vw, 6.8rem); /* Figma 左カラム右端 770 → ボタン左端 838 ＝ 68px */
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma cta の gap 30 */
}

.rtl-warranty__txt {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 57rem; /* 固定: Figma のテキスト枠 570px（例外1） */
}

/* Figma 16px / lh25.6 / 左寄せ / wght500 */
.rtl-warranty__lead {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}

/* 本文中の強調「負担額を100％免除」。全量ダンプの characterStyleOverrides で
   50〜59文字目だけ wght700・#B80003 になっていて、同じ範囲に #FFEDED の
   下線マーカー（Rectangle 230）が重なる。
   マーカーはカンプ実測で高さ 6px・行箱の下端に接する（y5597〜5602／行箱の下端 5605.2、
   16px の Noto Sans JP のインライン箱の下端は 5603.3）。
   インライン要素の背景箱＝そのインライン箱なので、下から 6px だけ塗れば実測と重なる。
   マーカーは図形なので固定 px（可変にすると細くなって消える・例外2）。 */
.rtl-warranty__em {
  background-image: linear-gradient(to top, var(--color_main_light) 6px, transparent 6px);
  color: var(--color_main);
  font-weight: 700;
}

/* ※注記（Figma Frame 4942 [200,5638,770,5690]・16px / lh25.6 / wght500）。
   「※」だけ独立したテキストで幅ちょうど 16px＝1em。本文はその分ぶら下がる。 */
.rtl-warranty__note {
  display: flex;
  margin-top: clamp(.4rem, .42vw, .6rem); /* Figma Frame 4941 の gap 6 */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}

.rtl-warranty__note-mark {
  flex: 0 0 auto;
  letter-spacing: 0; /* ※ の送りをカンプどおり 1em ちょうどにする（字送りが付くと本文の頭がずれる） */
}

.rtl-warranty__action {
  flex: 0 0 auto;
}

/* 黒ボタン（Figma Frame 4853 [838,5577,1240,5667]＝402×90・#111111・影 0 0 20 rgba(0,0,0,.1)）。
   文字枠は [872,5601,1174,5643]＝302×42 で、左 34px・右 66px の非対称。
   右が広いのは 24px の矢印（右端から 20px）を避けるため。 */
.rtl-warranty__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Figma 402px。下限 33rem は、文字が 15px に張り付く 1200px 以下でも
     文言（16字＝252px）が1行に収まるようにするための止め（例外3）。 */
  width: clamp(33rem, 27.92vw, 40.2rem);
  max-width: 100%;
  min-height: clamp(7rem, 6.25vw, 9rem); /* Figma 90px */
  padding-left: clamp(2.4rem, 2.36vw, 3.4rem);  /* Figma ボタン左端838 → 文字枠左端872 の 34px */
  padding-right: clamp(4.4rem, 4.58vw, 6.6rem); /* Figma 文字枠右端1174 → ボタン右端1240 の 66px */
  background: var(--color_dark); /* Figma txt_color #111111 */
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1) */
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

/* hover は濃いグレーの面の統一語彙 */
.rtl-warranty__btn:hover {
  background: #323232;
}

/* Figma 18px / lh18 / 中央 / 白 / wght700 */
.rtl-warranty__btn-txt {
  flex: 1 1 auto;
  min-width: 0;
  /* 字送りの逃げ。Figma の文字幅 303 は 16字×18px ＋ 字間15個ぶんで、CSS は末尾にも
     letter-spacing が付くため 302.4 の枠にちょうど入らない。左右 1px ずつ借りる
     （左右対称なので文字の中心は動かない）。 */
  margin-inline: -.1rem;
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 18px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

/* カンプの矢印枠は 19×21（中の線 7×14 stroke 2px 白）。共通クラス .ar--white（24×24 枠・
   中の線は同寸）に置き換えたぶん枠が左右 2.5px ずつ広がるので、右余白を 20 → 17.5 に
   詰めて線の中心（x1210.5）を合わせる。 */
.rtl-warranty__btn .ar--white {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 1.22vw, 1.75rem);
  transform: translateY(-50%);
}


/* ============================================================
   7. faq（よくある質問）
   Figma FRAME faq [0,5841,1440,6967] ／ 全幅の灰色帯・pad=(100,0,100,0)
     Frame4852 [200,6129,1240,6806] … カード 1040幅・gap 20（下 padding 45）
     btn       [550,6807,890,6867]  … 黒ボタン 340×60（共通 .btn の幅違い）
   カード高はカンプ実測で 閉じ 64px（20＋24＋20）／開き 128px（20＋24＋20＋線＋20＋24＋20）。
   ============================================================ */
.rtl-faq {
  --rtl-faq-badge: clamp(2rem, 1.67vw, 2.4rem); /* Figma Q/A の丸バッジ 24×24。行の高さもこの値で決まる */

  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
  background: var(--color_light); /* Figma base_color #F6F6F6 */
}

.rtl-faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* Figma gap 20 */
  max-width: 104rem; /* 固定: Figma の枠 1040px（例外1） */
  margin-inline: auto;
}

.rtl-faq__item {
  padding: clamp(1.4rem, 1.39vw, 2rem) clamp(1.8rem, 1.81vw, 2.6rem); /* Figma pad=(20,27,20,26) */
  background: #fff;
}

.rtl-faq__q {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .97vw, 1.4rem); /* Figma バッジと文字の gap 14 */
  cursor: pointer;
  list-style: none; /* <summary> の既定の三角を消す */
}
.rtl-faq__q::-webkit-details-marker {
  display: none;
}

/* 回答の原稿が無い設問は <div> で組んでいて開閉しないので、指の形にしない */
.rtl-faq__q--static {
  cursor: default;
}

/* Q / A の丸バッジ（Figma 24×24。Q＝赤地に白文字・A＝#FFEDED 地に赤文字） */
.rtl-faq__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--rtl-faq-badge);
  height: var(--rtl-faq-badge);
  border-radius: 50%;
  /* カンプの Q・A は Roboto Condensed Bold（Figma 実測）。指定しないと本文の
     Noto Sans JP を継いでしまい、字幅と Q の尾の出方が変わる。2026-08-21 CEO 指摘。 */
  font-family: var(--font_eng_cond);
  font-size: clamp(1.3rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1;
}
.rtl-faq__badge--q {
  background: var(--color_main);
  color: #fff;
}
.rtl-faq__badge--a {
  background: var(--color_main_light);
  color: var(--color_main);
}

/* Figma 16px / lh25.6 / wght700 / #111111（設問・回答とも太字） */
.rtl-faq__q-txt,
.rtl-faq__a-txt {
  /* Figma の Q 行・A 行は高さ 24px（丸バッジの高さ）で組まれていて、行送り 25.6px の
     行ボックスぶんは高さに数えていない。CSS のままだと行が 1.6px 高くなり
     カードが 64/128px に収まらないので、その差だけ詰める。
     文字は行ボックスの中央にあるため、詰めても文字の位置は動かない。 */
  margin-block: calc((var(--rtl-faq-badge) - 1.6em) / 2);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}
.rtl-faq__q-txt {
  flex: 1 1 auto;
}

/* 開閉の矢印。カンプの枠は 18×18・中の山は 10.5×5.3（stroke 2px #B80003）。
   共通の .ar--2-down（16×16 枠・中の山 4.67×9.33 を90度回したもの）を 18px に
   広げると中の山が 10.5×5.25 になり、カンプと一致する（faq.css 600〜606行と同じ扱い）。
   共通クラス側は書き換えず、この2つのプロパティだけ自前のクラスで上書きする。 */
.rtl-faq__ar {
  flex: 0 0 auto;
  width: 1.8rem;  /* 固定: Figma の矢印枠 18×18（例外2） */
  height: 1.8rem;
  margin-left: clamp(.4rem, .42vw, .6rem); /* 上の gap 14 と合わせて Figma の 20px にする */
  background-size: 1.8rem 1.8rem;
  transition: transform .3s ease;
}

/* 開いている項目は矢印が上向き（カンプの1問目）。.ar--2-down の 90度から 270度へ回す */
.rtl-faq__item[open] .rtl-faq__ar {
  transform: rotate(-90deg);
}

/* 回答。上の 1px は Figma Vector 34（区切り線 [226,6193,1214,6193]）。
   設問の下端 6173 → 区切り線 6193 → 回答 6213 でどちらも 20px。 */
.rtl-faq__a {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, .97vw, 1.4rem); /* Figma バッジと文字の gap 14 */
  margin-top: clamp(1.4rem, 1.39vw, 2rem);
  padding-top: clamp(1.4rem, 1.32vw, 1.9rem); /* 20px から 1px の線を差し引く */
  border-top: 1px solid var(--color_line); /* 固定: 1px の罫線（例外2） */
}

/* 回答の中のリンク（あんしん補償サービス）。サポート・FAQ ページの
   .faq-list__a-link（faq.css 750〜759行）と同じ見た目にそろえる。
   2026-08-30 に回答の原稿を入れたときに必要になった。 */
.rtl-faq__a-link {
  color: inherit;
  text-decoration: underline;
  transition: var(--transition);
}
.rtl-faq__a-link[href]:hover,
.rtl-faq__a-link[href]:focus-visible {
  color: var(--color_main);
}

.rtl-faq__btn-area {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* Figma Frame 4852 の下 padding 45px */
}

/* 共通クラス .btn（320×60・#111111・影 0 10 30 rgba(0,0,0,.2)）は、このカンプの
   btn（340×60・同色・同影）と幅だけが違う。common.css 792行の注記どおり、
   幅だけセクション側で上書きする（faq.css 220〜223行と同じ扱い）。 */
.rtl-faq__btn-area .btn {
  width: 34rem; /* 固定: Figma 340px。共通クラス側が 320×60 の固定サイズのため（例外3） */
}


/* ============================================================
   8. contact（導入のご相談はこちら / CONTACT）
   Figma FRAME contact [0,6967,1440,7393] ／ 1440×426・cta_gr
   「1ボタン＋吹き出し」型。左カラムは WEB版イヤホンガイド（_wgd/70_contact.css）と
   同じ形・同じ数値で、各宣言に転記元を書いてある。
   右カラムだけ違い、こちらはリード文 ＋ 白い吹き出し ＋ #7C0002 のボタン1本。
   ============================================================ */
.rtl-contact {
  /* 上下は 70_contact.css 21行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr */
  color: #fff;
}

.rtl-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* Figma 左カラム右端 520 → 右カラム左端 620 ＝ 100px */
  max-width: 100rem; /* 固定: Figma 実配置 220〜1220px。70_contact.css 31行と同値（例外1） */
  min-height: 26.6rem; /* 固定: Figma title-wrap 266px（426 − 上下 padding 160）（例外1） */
  margin-inline: auto;
}

/* ---- 左カラム（70_contact.css 39〜114行の転記） ---- */
.rtl-contact__intro {
  flex: 0 0 30rem;
  align-self: stretch; /* カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

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

.rtl-contact__label-mark {
  flex: 0 0 1.4rem; /* 固定: Figma Ellipse 14×14・stroke 3px INSIDE（例外2） */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

.rtl-contact__title {
  font-family: var(--font_eng);
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* Figma 60px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* CONTACT だけ字間を空けない */
}

.rtl-contact__point {
  display: block; /* Figma point 68×4 */
  width: 6.8rem; /* 固定: 図形のため（縮めると線が消える・例外2） */
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}

.rtl-contact__tel-label {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

.rtl-contact__tel {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.rtl-contact__tel-icon {
  flex: 0 0 3.2rem; /* 固定: Figma icon 32×32（例外2） */
  width: 3.2rem;
  height: 3.2rem;
}

.rtl-contact__tel a {
  font-family: var(--font_eng);
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* Figma 34px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
}

.rtl-contact__hours {
  margin-top: .8rem; /* Figma gap 8 */
  padding: .7rem; /* Figma 34px ＝ border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* 固定: 1px の罫線（例外2） */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* Figma 13px */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* ---- 右カラム（Figma wrap [620,7058,1220,7302]・gap 80） ---- */
.rtl-contact__action {
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  min-width: 0;
}

/* リード文（Figma T [620,7058,1220,7102]・16px / lh22.4 / 左寄せ / wght700 / 白）。
   1ページ目の CONTACT には無い要素。 */
.rtl-contact__lead {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 700;
  line-height: 1.4; /* 22.4 / 16 */
  letter-spacing: .05em;
}

/* 吹き出しはボタンの上端に重なる絶対配置なので、ボタンだけを包む枠を基準にする
   （リード文まで含めた右カラム全体を基準にすると位置が合わない）。 */
.rtl-contact__btn-wrap {
  position: relative;
  margin-top: clamp(4rem, 5.56vw, 8rem); /* Figma wrap の gap 80px */
}

/* 吹き出し（Figma Frame wrap [706,7134,1134,7187]＝428×53・白地・角丸5px・
   影 0 10 20 #000@0.1・pad(15,25,15,25)・18px / lh23.4 / 中央 / #111111）。
   ボタン上端 7182 に吹き出し下端 7187 が 5px 重なる。
   1ページ目（_wgd）は黒地に白文字だったが、ここは白地に黒文字。 */
.rtl-contact__balloon {
  position: absolute;
  bottom: calc(100% - .5rem); /* ボタン上端に 5px 重ねる */
  left: 50%;
  z-index: 1; /* 後ろに来るボタン（position:relative）より前に置き、三角を隠されないようにする */
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  padding: clamp(1.2rem, 1.04vw, 1.5rem) clamp(1.6rem, 1.74vw, 2.5rem); /* Figma pad(15,25,15,25) */
  border-radius: 5px; /* Figma r=5 */
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,10 r=20 #000000@0.1) */
  color: var(--color_dark); /* Figma txt_color #111111 */
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* Figma 18px */
  font-weight: 700;
  line-height: 1.3; /* Figma lh 23.4 / 18px */
  letter-spacing: .05em;
  text-align: center;
}

/* 下向きの三角（CSS で描いてよい図形の1つ）。カンプの多角形 36×25（[902,7175,938,7200]）を
   そのまま置き、吹き出しに 12px 食い込ませることで見える部分が実測どおり 13px になる。
   図形のため固定 px（縮めると先端が潰れる・例外2）。 */
.rtl-contact__balloon::after {
  content: "";
  position: absolute;
  top: calc(100% - 12px);
  left: 50%;
  transform: translateX(-50%);
  border-top: 25px solid #fff;
  border-right: 18px solid transparent;
  border-left: 18px solid transparent;
}

/* ボタン（Figma btn [620,7182,1220,7302]＝600×120・#7C0002・影 0 10 30 #860D08@0.3） */
.rtl-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* 固定: Figma 120px。70_contact.css 172行と同値（例外1） */
  /* 左右とも 10.4rem にすることで文字がボタンの中央に来て、かつ左のアイコン
     （左40px＋64px）と右の矢印（右20px＋24px）に重ならない。 */
  padding-inline: 10.4rem;
  background: var(--color_main_dark); /* Figma main_color_dark #7C0002 */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  color: #fff;
  text-decoration: none;
  transition: var(--transition);
}

/* hover は #7C0002 の面の統一語彙＝白い内枠。外影は併記して維持する。 */
.rtl-contact__btn:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

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

/* Figma 24px / lh24 / 中央 / 白 / wght700（1ページ目は2行だがここは1行） */
.rtl-contact__btn-txt {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* Figma 24px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

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


/* =============================================================================
 * 1199px 以下（SP カンプが無いため当方設計）
 * 内容幅が 1040px を割り始める帯。3列カードは列間だけ詰めて3列を保つ。
 * ========================================================================== */
@media (max-width: 1199px) {
  .rtl-case__list {
    --rtl-case-gap: 1.6rem; /* 固定: 上の clamp の下限と同値（例外3）。列を保つため間隔を先に詰める */
  }
  .rtl-benefit__list {
    --rtl-benefit-gap: 1.6rem;
  }
}


/* =============================================================================
 * 1023px 以下（SP カンプが無いため当方設計）
 * ここで閉じるのは「2〜3列のままだと中身が潰れる」箇所だけ。
 * ========================================================================== */
@media (max-width: 1023px) {
  /* カードは3列だと1枚あたり 300px を切り、写真（270px）と本文が窮屈になるので2列にする。
     5枚なので 2＋2＋1 になり、最後の1枚は中央寄せのまま置かれる。 */
  .rtl-case__item {
    width: calc((100% - var(--rtl-case-gap)) / 2);
  }
  .rtl-benefit__item {
    width: calc((100% - var(--rtl-benefit-gap)) / 2);
  }

  /* 左のテキスト（最長 570px）とボタン（402px）が並ぶと 1023px では本文が
     4行以上に折り返すため、縦積みにしてボタンを中央に置く。 */
  .rtl-warranty__body {
    flex-direction: column;
    align-items: stretch;
  }
  .rtl-warranty__txt {
    max-width: none;
  }
  .rtl-warranty__btn {
    width: 100%;
    max-width: 40.2rem; /* 固定: Figma のボタン幅 402px（例外1） */
    margin-inline: auto;
  }

  /* CONTACT は2カラムのままだと右カラムが 600px を大きく割り、
     ボタン内の文字（最長 384px）と左右のアイコン・矢印が競う。 */
  .rtl-contact__inner {
    flex-direction: column;
    align-items: stretch;
    /* 6rem。吹き出し（53px）がボタンの外へ出るため、4rem だと営業時間の枠との間が
       ほとんど空かない。768px 以下は吹き出しを流れの中に戻すので 4rem に落とす。 */
    gap: 6rem;
    min-height: 0;
  }
  .rtl-contact__intro,
  .rtl-contact__action {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem; /* 固定: Figma のボタン幅 600px にそろえる（例外1） */
    margin-inline: auto;
  }
}


/* =============================================================================
 * 768px 以下（SP カンプが無いため当方設計）
 * ========================================================================== */
@media (max-width: 768px) {
  /* カードは1列。横に伸びきらないようカンプのカード幅 330px を上限にする */
  .rtl-case__item,
  .rtl-benefit__item {
    width: 100%;
    max-width: 33rem;
  }

  /* PC カンプの改行位置は 16px 前提。14px まで縮む幅では2行目・3行目が極端に
     短くなるので、中央そろえの長文だけ改行を解除して自然な折り返しにする。 */
  .rtl-case__note br,
  .rtl-area__lead br {
    display: none;
  }

  /* 白カードは 375px でコンテンツ幅 335px しか無く、カード幅の下限 420px に届かないため
     container 幅まで詰められる。そのぶん中の空きを最小まで削り、文言を 15px にして
     1行を保つ（文字枠 229px に対し実寸 189px）。 */
  .rtl-case__compare-link {
    padding-left: 1.6rem; /* 固定: 上の clamp の下限と同値（例外3） */
    padding-right: 1.2rem;
  }
  .rtl-case__compare-icon {
    margin-right: 1.2rem;
  }
  .rtl-case__compare-text {
    font-size: 1.5rem; /* 固定: これ以上縮めない下限（例外3）。本文下限 1.4rem は上回る */
  }
  .rtl-case__compare-link .ar {
    margin-left: 1.2rem;
  }

  /* カード2枚は1列。横に伸びきらないようカンプのカード幅 545px を上限にする */
  .rtl-area__list {
    grid-template-columns: 1fr;
    max-width: 54.5rem; /* 固定: Figma のカード幅 545px（例外1） */
    margin-inline: auto;
  }

  /* 流れのカードは帯とアイコンを一段小さくして本文の幅を確保する */
  .rtl-flow__item {
    gap: 1.2rem;
    padding-right: 1.6rem;
    padding-left: 4.6rem; /* 帯 3.2rem ＋ 1.4rem */
  }
  .rtl-flow__band {
    width: 3.2rem;
  }
  .rtl-flow__band-txt {
    font-size: 1.3rem;
  }
  .rtl-flow__icon {
    width: 6rem;
  }

  /* 見出しが2行になる幅では行送り 1（カンプ値）だと行がぶつかる */
  .rtl-warranty__title {
    line-height: 1.4;
  }
  .rtl-warranty__box {
    padding: clamp(2.4rem, 4vw, 3rem) clamp(1.6rem, 2.6vw, 2rem);
  }
  /* 375px では箱の内側が 295px しか無く、文言（16字）が 15px だと 252px 必要で
     カンプどおりの左右余白（34/66）では2行に折れる（実測で確認）。
     左右を詰めて 14px にし、1行を保つ（文字枠 247px に対し実寸 235px）。
     右 3.8rem は右端の矢印（右12px＋24px＝x259から）に文字が触れない値。 */
  .rtl-warranty__btn {
    padding-left: 1.2rem;
    padding-right: 3.8rem;
  }
  .rtl-warranty__btn-txt {
    font-size: 1.4rem; /* 固定: これ以上縮めない下限（例外3） */
  }
  .rtl-warranty__btn .ar--white {
    right: 1.2rem;
  }

  .rtl-faq__item {
    padding-inline: 1.6rem;
  }

  /* 共通クラス .btn は幅 320px 固定（ここでは 340px に広げている）で、375px では
     枠の左右余白を引いた 335px に入らない。幅いっぱいまでにして枠から出さない
     （faq.css 1003〜1008行と同じ扱い）。 */
  .rtl-faq__btn-area .btn {
    width: 100%;
    max-width: 34rem;
  }

  .rtl-contact {
    padding-block: 6rem;
  }
  .rtl-contact__inner {
    gap: 4rem;
  }

  /* 吹き出しを絶対配置のままにすると、文字が折り返して2行になった時に
     上のリード文へかぶる。SP だけ通常の流れに置き、5px の重なりは負のマージンで作る。
     文字は 375px で「…ご案内しま／す」と1文字だけ折り返す（20字が 15px だと 315px
     必要で、入る幅が 303px しかない）ため、幅に連れて縮む式にして1行を保つ。
     上限は 769px 側の値（15px）と同じにして、768px の境目で段差が出ないようにしている。 */
  .rtl-contact__balloon {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0 auto -.5rem;
    font-size: clamp(1.4rem, 3.73vw, 1.5rem); /* 375px でちょうど 14px */
    transform: none;
  }

  .rtl-contact__btn {
    height: auto;
    min-height: 10rem;
    padding: 2rem 3.6rem 2rem 6.4rem; /* アイコンを小さくした分、左右を詰めて文字の幅を確保 */
  }
  .rtl-contact__btn-icon {
    left: 1.2rem;
    width: 4.8rem;
    height: 4.8rem;
  }
  .rtl-contact__btn .ar--white {
    right: 1.2rem;
  }
  /* 375px では「レンタルを申し込む・相談をする」が 18px だと 284px 必要で、
     入る幅が 231px しかない。幅に連れて縮む式にして1行を保つ。
     上限は 769px 側の値（18px）と同じにして、768px の境目で段差が出ないようにしている。 */
  .rtl-contact__btn-txt {
    font-size: clamp(1.4rem, 3.9vw, 1.8rem); /* 375px でちょうど 14.6px */
  }
}


/* =============================================================================
 * 0. fv（メインビジュアル）2026-08-22 追加
 *
 * Figma  : FRAME FV [0,80,1440,720]（1440×640）＋ 下へ 45px はみ出す CTA帯
 *          FRAME Frame 4961 [120,595,1320,765]
 * inspect: figma-dump/inspect/confirm_20260821/rental_earphone.txt 32〜80行
 * カンプ : figma-dump/screenshots/fv_20260822/fv_rental.png（2倍・1440×640相当）
 * HTML   : template-parts/under/rental-earphone/fv.php
 *
 * 【ここに書く理由】共通の fv.css は作らない。本テーマは「1ページ1CSS・接頭辞つき」
 *   （.rtl- / .wty- / .cmp- …）が既存の流儀で、あんしん補償サービスの FV とは記述が重複するが
 *   これは意図的。2ページを別々の担当が同時に触っても衝突せず、後からページ単位で
 *   差し替えられるようにするため。
 *
 * 【ファイル末尾に置く理由】既存の 1〜8 節と末尾の3つのメディアクエリ（1199/1023/768）を
 *   1文字も触らないため、FV は自分のメディアクエリごと1節にまとめて末尾に足している。
 *
 * 【座標】ログの y はページ絶対値。ここのコメントの「相対y」は 絶対y − 80。
 *   リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 ＝ vw」。1rem = 10px。
 *   カンプ幅より広い画面では vw が伸びすぎるので、装飾の位置・大きさは
 *   min() / max() で 1440px の実測値に頭打ちさせている（clamp の上限と同じ意味）。
 *
 * 【縦の積み上げ（相対y・合計 469 ＝ カンプの注記下端 470）】
 *   65 上余白 ＋ 見出し70 ＋ 19 ＋ キャッチ43.2 ＋ 15 ＋ サブ64 ＋ 32 ＋ 本文76.8 ＋ 20 ＋ 注記64
 *   その 45px 下（相対y515）から CTA帯170 が始まり、FV 下端 640 を 45px はみ出す。
 * ========================================================================== */

/* 2026-08-23 CEO 指示「ピンクのグラデーション背景は 1920px で止めて」。
   節を 1920px（192rem）で止めて中央に置く。背景も左下の波もこの箱の中に収まるので、
   1920px を超えても波がこれ以上左へ行かない（.rtl-fv__stage の overflow: hidden が
   箱の左端＝ピンクの地の左端で切る）。右のイラストは箱の中でさらに中央 1440px の
   位置に止めてある（.rtl-fv__photo の right 参照）。1920px 以下は 1px も変わらない。 */
.rtl-fv {
  position: relative;
  max-width: 192rem;
  margin-inline: auto;
}

/* FV 本体。写真と波の装飾はここで切る（CTA帯は下へはみ出すので stage の外に置く）。 */
.rtl-fv__stage {
  position: relative;
  overflow: hidden;
  min-height: min(44.4444vw, 64rem); /* カンプ 640px。1440px 超では 640px で頭打ち */
  /* 下は CTA帯の高さぶん空けておく。こうすると本文がどれだけ増えても
     CTA帯（下の margin-top で 125px 引き上げ）との間隔がカンプの 45px のまま保たれる。 */
  padding-bottom: min(11.8056vw, 17rem); /* カンプ CTA帯 170px */
  /* Figma GRAD(GRADIENT_LINEAR,#FFEDED,#FFFFFF)。向き・停止位置はカンプ PNG 実測から起こした。
     左端 #FFECEC → 右上へ向かって白。右下が右上よりわずかに赤いので水平ではなく 62度。 */
  background: linear-gradient(62deg, #FFEDED 43%, #FFFFFF 100%);
}

/* 右のイラスト。カンプ実測で枠 [710,33,1477,464]（767×431）に対し画像は縦横同率で
   contain 配置（相対 x770.2,y33,w646.5,h431）。右端 1440 までの残り 23.3px で位置を出す。
   Figma の「Mask group」は白い矩形を重ねているのではなく画像のアルファマスク。
   カンプでは写真の下の帯（相対y464〜476）が白ではなく背景のピンクで出るため、
   白のグラデーションを重ねるのではなく mask で左へ抜く（実測で確認済み）。 */
.rtl-fv__photo {
  position: absolute;
  top: min(2.2917vw, 3.3rem);   /* 相対 y33 */
  /* 1440px 以下は従来どおり 1.6181vw（＝1440 − 1416.7）で画面幅に追従する。
     1440px を超えたら、画面の中央に置いた見えない 1440px の画布の右端から 23.3px の位置で止める。
     2026-08-23 CEO 指示「右（イラスト）は止めて」。こうしないと中央の文章・CTA 帯を置き去りにして
     イラストだけ画面の右端まで離れていく。
     50% は節（1920px で止まる箱）の半分なので、1920px を超えると計算結果も止まる。
     1440px で両方 23.3px になるので段差は出ない。 */
  right: max(1.6181vw, calc(50% - 72rem + 2.33rem));
  width: min(44.8958vw, 64.65rem); /* 646.5px */
  height: auto;
  /* 掛かり具合もカンプ PNG 実測から。相対 x783 で透明、x1043 で不透明度 0.85 に達して以降は横ばい
     （＝写真は最後まで 0.85 で、完全な不透明にはならない）。写真枠に対する割合で 2%→42%。 */
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .85) 42%);
          mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .85) 42%);
}

/* 左下の赤い波。素材の縦横比と枠 [−13,169,807,610] が一致しないため、カンプ PNG に
   重ねて合わせ込んだ実測値（相対 x−19,y178,820×425・下端は FV 下端の 37px 上）で置く。
   stage が伸びても波は下辺に付いたままにしたいので top ではなく bottom で指定する。 */
.rtl-fv__deco {
  position: absolute;
  bottom: min(2.5694vw, 3.7rem); /* 37px */
  left: max(-1.3194vw, -1.9rem); /* −19px。基準は箱の左端なので 1920px 超はこれ以上左へ行かない */
  width: min(56.9444vw, 82rem);  /* 820px */
  height: min(29.5139vw, 42.5rem); /* 425px */
}

.rtl-fv__inner {
  position: relative;
  z-index: 1; /* 写真・波より前 */
  padding-top: clamp(3.6rem, 4.5139vw, 6.5rem); /* 相対 y65 */
}

/* 見出し 50px / lh70 / wght700 / cta_gr グラデーション文字。
   幅を文字なりにするのはグラデーションの端をカンプ（618px の中で #DA3106→#B80003）に
   合わせるため。ブロック幅いっぱいだと右端が赤くなりきらない。 */
.rtl-fv__title {
  width: -moz-fit-content;
  width: fit-content;
  /* カタカナの左サイドベアリング（.06em）ぶん墨が右に寄るので、その分だけ左へ戻して
     下のキャッチ・本文の墨の左端と揃える（カンプも 墨 x120.5 で揃っている）。 */
  margin-left: -.05em;
  color: var(--color_main); /* グラデーション文字が効かない環境用の色 */
  font-size: clamp(2.4rem, 3.4722vw, 5rem); /* 50px */
  font-weight: 700;
  line-height: 1.4; /* 70 / 50 */
  letter-spacing: .05em; /* カンプ実測（12字が 618px に収まる字送り） */
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .rtl-fv__title {
    background-image: var(--gradient); /* Figma cta_gr #DA3106→#B80003 */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* ログの「+mixed」の中身。カンプ PNG 実測で「の」だけ 42px（他は 50px）。
   墨の高さ 33px・上端が前後の字より 9px 下がるのが 42px と一致する。 */
.rtl-fv__title-small {
  font-size: .84em; /* 42 / 50 */
}

/* キャッチ 28px / lh39.2 / wght700。下に 3px #B80003 の線。
   Figma は pad-bottom 4 ＋ 3px INSIDE stroke（＝線は余白の中に描かれる）なので、
   CSS では余白 1px ＋ 線 3px にすると墨の下端から線までの間隔がカンプと一致する
   （カンプ実測：文字の行箱 相対y154〜193.2、線 194〜197）。 */
.rtl-fv__catch {
  width: -moz-fit-content;
  width: fit-content;
  margin-top: clamp(1.2rem, 1.3194vw, 1.9rem); /* 19px */
  padding-bottom: 1px; /* 固定: 1px の詰め（例外2）。上のコメントの理由 */
  border-bottom: 3px solid var(--color_main); /* 固定: 3px の線（例外2） */
  color: var(--color_dark);
  font-size: clamp(1.8rem, 1.9444vw, 2.8rem); /* 28px */
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
  letter-spacing: 0; /* カンプ実測：この行だけ字間なし（15字＝418px でぴたり） */
}
/* ログの「+mixed」の中身。カンプ PNG の墨の色を1字ずつ拾った結果、
   「必要な期間」「必要な台数」が #B80003、「だけ、」「を。」が #111111。 */
.rtl-fv__catch-em {
  color: var(--color_main);
}

/* サブコピー 20px / lh32 / wght700 / #111111 */
.rtl-fv__sub {
  margin-top: clamp(1rem, 1.0417vw, 1.5rem); /* 15px */
  color: var(--color_dark);
  font-size: clamp(1.5rem, 1.3889vw, 2rem); /* 20px */
  font-weight: 700;
  line-height: 1.6; /* 32 / 20 */
  letter-spacing: .05em;
}

/* 本文 16px / lh25.6 / wght500 / #111111・幅 598（右のイラストに掛からない幅） */
.rtl-fv__lead {
  width: min(41.5278vw, 59.8rem); /* 598px */
  margin-top: clamp(2rem, 2.2222vw, 3.2rem); /* 32px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.1111vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}

/* 注記 754×64・白地・角丸5px・pad10。文字 14px / lh22.4 / wght700 / #7C0002・2行 */
.rtl-fv__note {
  width: min(52.3611vw, 75.4rem); /* 754px */
  margin-top: clamp(1.4rem, 1.3889vw, 2rem); /* 20px */
  padding: clamp(.8rem, .6944vw, 1rem); /* 10px */
  border-radius: 5px; /* 固定: 5px の角丸（例外2） */
  background: #fff;
  color: var(--color_main_dark); /* Figma main_color_dark #7C0002 */
  font-size: clamp(1.3rem, .9722vw, 1.4rem); /* 14px。下限は注記なので本文の 1.4rem より小さい 1.3rem */
  font-weight: 700;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
}

/* 折り返した行を「※」の次の文字にそろえる（ぶら下げインデント）。2026-08-23 CEO 指摘。
   幅を狭めると折り返しが行頭へ戻り、体裁が崩れていた。
   2行目はカンプで全角1字ぶん下がっているため、字下げも全角スペースではなくこの
   padding で表す（全角スペースだと折り返した行に効かないため）。 */
.rtl-fv__note-line {
  display: block;
  padding-left: 1em;
}
.rtl-fv__note-line--mark {
  text-indent: -1em; /* 「※」だけ枠の左端へ出す */
}

/* カレンダー＋無線機のアイコン 126×137（相対 x556,y144）。
   left は .rtl-inner の枠（左右 padding を含む外枠）からの距離なので 556 − 80 ＝ 476。
   1440px 表示で内容枠が中央に来る式と噛み合い、どの幅でもカンプと同じ「文字の右」に立つ。
   下限 35.5rem は、サブコピーの文字サイズが下限（15px）に張り付く 1080px 以下で
   その右端に重ならないようにするための止め（実測で 4px 以上の空きを確保）。 */
.rtl-fv__icon {
  position: absolute;
  top: min(10vw, 14.4rem); /* 相対 y144 */
  left: clamp(35.5rem, 33.0556vw, 47.6rem);
  width: min(8.75vw, 12.6rem); /* 126px */
  height: auto;
}


/* --- CTA帯 ---------------------------------------------------------------
   Figma Frame 4961 [120,595,1320,765] ＝ 内容幅 1200 × 170・cta_gr・
   pad=(45,0,45,0)（上下45・左右0）・gap20・ボタン2つは横中央。
   FV 下端（相対y640）を 45px はみ出すので、stage の下 padding（170）から
   125px 引き上げて相対y515 に置く。stage が伸びても間隔 45px は変わらない。 */
.rtl-fv__cta {
  position: relative;
  z-index: 2; /* 波の装飾より前 */
  margin-top: max(-8.6806vw, -12.5rem); /* −125px。負の値なので頭打ちは max 側 */
}

.rtl-fv__cta-band {
  display: flex;
  justify-content: center;
  gap: clamp(1.2rem, 1.3889vw, 2rem); /* 20px */
  padding-block: clamp(2.4rem, 3.125vw, 4.5rem); /* 45px */
  background: var(--gradient); /* Figma cta_gr */
}

/* ボタン 460×80。図形なので padding 任せにせず明示 width。
   文字は左右のアイコン・矢印を避けずにボタンの中央（Figma も txt はボタン中央）。 */
.rtl-fv__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34rem, 31.9444vw, 46rem); /* 460px */
  min-height: clamp(6rem, 5.5556vw, 8rem); /* 80px。文言が折れても潰さないので height ではなく min-height */
  font-size: clamp(1.6rem, 1.3889vw, 2rem); /* 20px */
  font-weight: 700;
  /* Figma は行高 20＝文字サイズと同値だが、CSS で 1 にすると濁点・句読点が切れるため 1.4。
     1行のときは上下中央なので見た目の位置は変わらない（.rtl-case__compare-text と同じ扱い）。 */
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
}

/* 左：#7C0002・影 0 10 30 rgba(134,13,8,.3)（Figma DROP_SHADOW(0,10 r=30 #860D08@0.3)） */
.rtl-fv__btn--apply {
  background: var(--color_main_dark);
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3);
  color: #fff;
}
/* hover は 2026-08-20 の統一語彙（#7C0002 の面には白枠）。外影は1プロパティなので併記して残す。 */
.rtl-fv__btn--apply:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

/* 右：白地・#111111。影は Figma の2枚（Frame 122 と Frame 4853）をそのまま重ねる。
   左ボタンとは値が違うのでログどおり分けている。 */
.rtl-fv__btn--detail {
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1);
  color: var(--color_dark);
}
/* hover は統一語彙（白い面には赤枠）。 */
.rtl-fv__btn--detail:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3), 0 0 20px rgba(0, 0, 0, .1), inset 0 0 0 2px var(--color_main);
}

/* ガイドレシーバー 43×43（Figma icon [302,659,345,702]・ボタン左端から 52px）。 */
.rtl-fv__btn-icon {
  position: absolute;
  top: 50%;
  left: clamp(2rem, 3.6111vw, 5.2rem); /* 52px */
  width: clamp(2.8rem, 2.9861vw, 4.3rem); /* 43px */
  height: auto;
  transform: translateY(-50%);
}

.rtl-fv__btn-txt {
  /* 字送りの逃げ。CSS は末尾にも letter-spacing が付くぶん Figma より 1字分ぶん広くなるので、
     左右 .3rem ずつを隣の空きから借りる（左右対称なので文字の中心は動かない）。 */
  margin-inline: -.3rem;
}

/* 矢印はカンプも絶対配置。中の山（7×14・stroke 2px）は共通クラスの .ar と同寸なので、
   枠 24×24 との差だけ右余白で合わせる（線の中心＝左ボタン x678 / 右ボタン x1160.5）。 */
.rtl-fv__btn .ar,
.rtl-fv__btn .ar--white {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.rtl-fv__btn--apply .ar--white {
  right: clamp(1rem, 1.3889vw, 2rem); /* 20px */
}
.rtl-fv__btn--detail .ar {
  right: clamp(1rem, 1.2153vw, 1.75rem); /* 17.5px */
  /* カンプの矢印は #111111 だが黒い矢印の書き出しが無い。自作 SVG は使わない決まりなので、
     共通クラスと同じ支給素材 finduse_arrow_a.svg を mask に回して色だけ文字色に合わせる
     （.floating-cta__icon と同じやり方）。 */
  background-image: none;
  background-color: currentColor;
  -webkit-mask: url("../images/finduse_arrow_a.svg") no-repeat center / contain;
          mask: url("../images/finduse_arrow_a.svg") no-repeat center / contain;
}


/* --- FV 1199px 以下 ------------------------------------------------------- */
/* 1200px 未満は 460px のボタン2枚（＋間20）が内容幅に対して窮屈になり、
   文字サイズが下限に張り付いた時点でアイコン・矢印と文言がぶつかる。縦積みに落とす。 */
@media (max-width: 1199px) {
  .rtl-fv__cta-band {
    flex-direction: column;
    align-items: center;
  }
  .rtl-fv__btn {
    width: 100%;
    max-width: 46rem; /* カンプのボタン幅 460px を上限にする */
  }

  /* 2026-08-23 CEO 指示「タブレット幅までは PC 時の2カラムをキープすること」。
     このアイコンは「文章の右・イラストの左」の空きに立たせている絶対配置だが、
     幅が 800px を切るとその空き（イラスト左端 − サブコピー右端）が 8.75vw より狭くなり、
     イラストの線に乗る。空きに収まる大きさへ落として重なりを作らない。
     53.4861vw ＝ 100 −（イラスト幅 44.8958 ＋ 右余白 1.6181）＝ イラストの左端。
     36.1rem ＝ アイコン左端の下限 35.5rem ＋ イラストとの逃げ 6px。
     効くのは 797px 以下だけで、それより広い帯ではカンプどおりの 8.75vw のまま。 */
  .rtl-fv__icon {
    width: min(8.75vw, 12.6rem, 53.4861vw - 36.1rem);
  }
}


/* --- FV 767px 以下（SP・カンプ無し。当方設計） -----------------------------
   【768px ではなく 767px で切っている理由】2026-08-23 の CEO 指示
   「タブレット幅までは PC 時の2カラムをキープすること」により、768px は2カラム側へ残す。
   テーマ既定の SP 境界（768px）と 1px ずれるが、これはこの FV だけの意図的な例外で、
   同じファイルの他セクション（1188行の 768px）は 768px のまま触っていない。
   文字サイズが下限で止まる一方、右のイラストは幅なりに縮み続けるため、
   ここから先は「上にイラスト・下に文章」へ組み替えて、カンプの意図（右にイラスト）を保つ。 */
@media (max-width: 767px) {
  .rtl-fv__photo {
    top: 0;
    right: 0;
    width: 76vw; /* SP カンプが無いため当方設計。高さは 76 ÷ 1.5 ＝ 50.7vw */
    -webkit-mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .85) 38%);
            mask-image: linear-gradient(90deg, transparent 2%, rgba(0, 0, 0, .85) 38%);
  }
  .rtl-fv__inner {
    padding-top: 54vw; /* 上のイラストの高さ 50.7vw ＋ 3.3vw の間隔 */
  }
  /* イラストが上へ移ったので、文章は内容幅いっぱいまで使う。 */
  .rtl-fv__lead,
  .rtl-fv__note {
    width: 100%;
  }
  /* アイコンは絶対配置をやめてサブコピーの下に右寄せで置く（重なりを作らない）。 */
  .rtl-fv__icon {
    position: static;
    width: clamp(8rem, 24vw, 12.6rem);
    margin: 2rem 0 0 auto;
  }
  /* 帯の引き上げ量を控えめにして、注記との間隔を 40px 確保する。 */
  .rtl-fv__stage {
    padding-bottom: 10rem;
  }
  .rtl-fv__cta {
    margin-top: -6rem;
  }
}


/* =============================================================================
 * 10. price（国内レンタルの詳細・料金／海外レンタルの詳細・料金）2026-08-24 追加
 *
 * HTML : template-parts/under/rental-earphone/price-domestic.php
 *        template-parts/under/rental-earphone/price-abroad.php
 *
 * 【🚨 カンプが無い】2026-08-24 のケンネット様ご連絡（Novio）で、国内レンタル・海外レンタルの
 *   独立ページを作らず /rental/ 内へ集約する方針になって追加した2節。2026-08-21 の確定カンプ
 *   （node 715:4161）には存在しないため、新しい見た目は起こさず既存の確定済み部品を写している。
 *     節の骨格（上下 100px・.heading-01・sub_head 無しの下余白 50px）
 *                    … 同じファイルの 4. area（334行〜）と 3. benefit（231行〜）
 *     小見出し        … 共通クラス .heading3--2（common.css 950〜962行／Figma h3_2 node 489:10515）
 *     料金表          … あんしん補償サービスの .wty-table（assets/css/warranty.css 203〜282行）。
 *                       2列・行高75px・赤い見出し行・左列 #FFEDED・右列は赤文字で右寄せ・
 *                       税抜の数字だけ 20px、まで同値で写している。
 *                       クラス名を .rtl-price__* に起こし直しているのは、このテーマが
 *                       「1ページ1CSS・接頭辞つき」で warranty.css をこのページで読まないため
 *                       （FV 節の冒頭コメントと同じ理由）。
 *
 * 【ファイル末尾に置く理由】既存の 1〜8 節・0 節（FV）と、それぞれのメディアクエリを
 *   1文字も触らないため。この節も自分のメディアクエリごと1節にまとめてある。
 *
 * 【SP で横スクロールにしない】2026-08-21 のケンネット様のご指摘で、比較表の SP 横スクロールを
 *   廃止した経緯がある（compare.css 768px ／ warranty.css 1040行の注記）。同じ方針で、
 *   狭い幅でも2列を保ったまま列比と文字サイズを絞る。
 * ========================================================================== */

/* ページ内リンクの着地点3つ（#domestic ／ #abroad ／ #flow）。
   ヘッダーが position:fixed（common.css 156行・高さ var(--header_height)）のため、
   飛んだときに見出しがヘッダーへ潜らないよう逃げを持たせる。
   値はこのサイトの確定値（assets/css/case-study.css 271行・assets/css/product.css 457行と同じ）。
   .rtl-flow だけは既存の節（540行）に手を入れず、3つ分をここへまとめて書いている。 */
.rtl-price,
.rtl-flow {
  scroll-margin-top: calc(var(--header_height) + 2rem);
}

.rtl-price {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* 他の節と同じ 上下 100px */
}

/* 海外側だけ #F6F6F6 の全幅帯にして、白地の国内側と見分けがつくようにする
   （帯の作りは 3. benefit・7. faq と同じ）。カンプが無いためここは当方設計。 */
.rtl-price--abroad {
  background: var(--color_light); /* base_color #F6F6F6 */
}

/* この節も sub_head が無いので、common.css の .heading-01 の下余白 1.6rem を
   50px へ上書きする（4. area の .rtl-area__head と同じ扱い）。 */
.rtl-price__head {
  padding-bottom: clamp(3rem, 3.47vw, 5rem); /* 50px */
}

/* 小見出し・表・注記をそろえる列。幅はあんしん補償サービスの表 .wty-table-wrap と同じ 780px。 */
.rtl-price__block {
  max-width: 78rem; /* 固定: 表の幅 780px。コンテナの最大幅（例外1） */
  margin-inline: auto;
}

.rtl-price__block + .rtl-price__block {
  margin-top: clamp(4rem, 4.17vw, 6rem); /* ブロック間 60px（節の下余白と同じ刻み・当方設計） */
}

/* 小見出しは共通クラス .heading3--2（黒帯・18px・左右 20px・下余白 30px）。
   共通側は固定 px なので、本文が 14px まで落ちる狭い帯に合わせて
   左右の余白と文字サイズだけこのページで可変にする。帯の色・下余白は共通のまま。
   common.css → rental-earphone.css の読み込み順（functions.php 129行）でこちらが後勝ちになる。 */
.rtl-price__title {
  padding-inline: clamp(1.2rem, 1.39vw, 2rem); /* 共通の 20px を下限 12px まで可変に */
  font-size: clamp(1.5rem, 1.25vw, 1.8rem);    /* 共通の 18px を下限 15px まで可変に */
}

/* -----------------------------------------------------------------------------
 * 10-2. 料金表（.wty-table の写し）
 * -------------------------------------------------------------------------- */
.rtl-price__table {
  width: 100%;
  border-collapse: collapse; /* セル間もセル外周も罫線は 1px。重ならないよう collapse で描く */
  table-layout: fixed;
}

.rtl-price__table th,
.rtl-price__table td {
  height: clamp(5rem, 5.21vw, 7.5rem); /* 行高 75px。表のセルでは最小値として働き、文字が折り返せば行は伸びる */
  padding: 1rem clamp(1rem, 1.39vw, 2rem); /* 左右 20px。上下 1rem は折り返した文字が罫線に触れないための逃げ */
  border: 1px solid var(--color_line); /* 固定: 1px の罫線（例外2） */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* 列比 340 : 440。table-layout:fixed なので見出し行の幅が全列を決める。
   手本の warranty は 380 : 400（x330〜710〜1110）だが、この表は右列の文言が長く、
   1440px で「受信機・送信機　1日毎に追加50円（税込55円）」が1行に 376px 必要になる。
   400px の列（左右 padding 20px を引いて 360px）では入りきらず、この行だけ2行に折れて
   他の行と不ぞろいになるため、左列を 340px（最長の「15日間まで」＝88px に対し十分）へ
   詰めて右列を 440px（内側 400px）にした。実測値は headless Chrome で1行に必要な幅を
   測って決めている。 */
.rtl-price__th--term {
  width: 43.5897%; /* 340 ÷ 780 */
}

.rtl-price__th {
  background: var(--color_main); /* main_color #B80003 */
  color: #fff;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* 18px */
  letter-spacing: .05em;
}

.rtl-price__term {
  background: var(--color_main_light); /* main_color_light #FFEDED */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  letter-spacing: .05em;
}

/* 上の「th, td を中央寄せ」より詳細度を上げる必要があるため .rtl-price__table を前置きする
   （warranty.css 251行と同じ扱い）。金額の列だけ右揃え。 */
.rtl-price__table .rtl-price__amount {
  background: #fff;
  color: var(--color_main);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  letter-spacing: .05em;
  text-align: right;
}

/* 1つのセルに受信機・送信機の2行が入る（国内の「4日間まで」）。旧サイトの表と同じく行で分ける。 */
.rtl-price__line {
  display: block;
}

.rtl-price__line + .rtl-price__line {
  margin-top: .6rem; /* 2行のときの行間（当方設計・行高に対して詰まりすぎない最小値） */
}

/* 税抜の数字だけ大きい（warranty.css 260行の .wty-table__num と同値）。 */
.rtl-price__num {
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 20px */
  letter-spacing: .05em; /* 親から継承すると 16px 基準の px で固まるため自分で持つ */
  white-space: nowrap;   /* 幅が詰まっても桁区切りのカンマで改行させない */
}

/* 「（税込1,100円）」は 16px のまま。幅が詰まったときはこのかたまりごと次の行へ送る
   （数字の途中で折り返さないようにするための囲み。warranty.css 268行と同じ）。 */
.rtl-price__tax {
  white-space: nowrap;
}

.rtl-price__notes {
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 表と注記の間 20px */
}

/* 「注意事項」のブロックは表が無く小見出しの直下に注記が来るので、
   共通クラス .heading3--2 の下余白 30px だけにする（20px を足さない）。 */
.rtl-price__title + .rtl-price__notes {
  margin-top: 0;
}

.rtl-price__note {
  /* 折り返した行を「※」の次の文字にそろえる（ぶら下げインデント）。2026-08-23 の CEO 指摘で
     ※ 注記はこの扱いに統一している（warranty.css 1436行の .wty-fv__note、
     同じファイル 1501〜1507行の .rtl-fv__note-line と同じ書き方）。
     1em ぶん右へ寄せて1行目だけ戻すので、「※」は表の左端にそろう。 */
  padding-left: 1em;
  text-indent: -1em;
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 16px */
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}


/* --- price 768px 以下（SP・カンプ無し。当方設計） ---------------------------
   2026-08-21 のケンネット様のご指摘で SP の横スクロールを廃止した経緯があるため、
   ここでも2列を保ったまま列比・セルの余白・文字を絞る（横スクロールにしない）。
   手本の warranty.css 1063〜1084行は同じ場面で 13px まで落としているが、
   このファイルは冒頭の取り決めで「本文系は 1.4rem を下回らせない」としているので
   14px のまま、代わりにセルの左右余白（20px → 4px）と列比で幅を作った。
   headless Chrome で 320 / 360 / 375 / 414 / 500 / 600 / 700 / 768px を実測し、
   13px 版と同じ行数（375px で最大2行）になること・貸出期間の列が折り返さないこと・
   横スクロールが出ないことを確認済み。 */
@media (max-width: 768px) {
  /* 375px では内容幅 335px。43.59% のままだと右列が 189px しか無く、
     「受信機　1,000円（税込1,100円）」（14px で 240px）が3行に割れる。
     左列は最長の「15日間まで」が 14px で 77px なので 32%（375px で 107px）まで詰められる。 */
  .rtl-price__th--term {
    width: 32%;
  }

  .rtl-price__table th,
  .rtl-price__table td {
    height: 4.8rem;      /* 固定: 表のセルでは最小値として働く。文字が2行になれば行は伸びる（例外3） */
    padding: .8rem .4rem; /* 固定: 左右 20px → 4px。右列に幅を渡すための値（例外3） */
  }
}

/* FV のボタンから #area へ飛ぶため、固定ヘッダーに潜らない逃げを入れる（2026-08-24）。
   値は case-study.css の .cs-sec ／ product.css の .plt-unit と同じ。 */
.rtl-area {
	scroll-margin-top: calc(var(--header_height) + 2rem);
}