@charset "UTF-8";
/**
 * warranty.css — あんしん補償サービス（固定ページ・スラッグ warranty）
 *
 * Figma  : 下層ページ node 655:3880 ／ 1440×7094（2026-08-21 の確定版）
 * inspect: figma-dump/inspect/confirm_20260821/warranty.txt（寸法・文言の正本）
 * カンプ : figma-dump/screenshots/confirm_20260821/warranty.png（等倍 1440px ／ 見た目の正本）
 * HTML   : page-warranty.php ／ template-parts/under/warranty/
 *          {about,price,apply,coverage,trouble,charge,faq,contact}.php
 *
 * ■ 数値の出し方
 *   - 1rem = 10px（common.css の html{font-size:62.5%}）。
 *   - リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 ＝ vw」。clamp() の上限が実測値。
 *   - clamp() の下限は SP カンプが無いため当方設計（目安は上限の6〜7割・本文は 1.4rem 以上）。
 *   - 固定 px / rem を使ったのは (1) コンテナの max-width (2) 1〜5px の線と角丸
 *     (3) 固定でないと整わない場所 の3種だけ。いずれも1行コメントで理由を添えている。
 *   - ブレイクポイントは max-width の単独指定（下の帯へ継承させる）。
 *     基本 1199px ／ 補助 1023px ／ SP 768px。
 *     例外は 14 節の FV だけで、組み替えの境目が 767px。理由はその節の見出しに書いた
 *     （2026-08-23 CEO 指示「タブレット幅までは PC 時の2カラムを保つ」）。
 *   - 字送りは 1440px カンプの文字幅から .05em。em はセクションにまとめて書くと
 *     「そのセクションの文字サイズ」で px に固まったまま子へ継承されるため、
 *     文字サイズを決めている個々の規則に書いている。
 *
 * ■ カンプ PNG を等倍で走査して補ったもの（inspect ログに出ない情報）
 *   1. about のカードの文言は +mixed。赤 #B80003 ＋太字は 1枚目「破損」・2枚目「紛失」・
 *      3枚目は2行目まるごと「万が一の負担額が心配」。ほかは黒 #111111 の wght500
 *   2. charge の見出しは四方の枠ではなく下線だけ。ログの stroke=1px #B80003 INSIDE に対し
 *      実際に描かれているのは x520〜919・y4265〜4267 の 3px だけ（左右・上辺は該当画素なし）
 *   3. 表の金額は「税抜の数字だけ 20px」。同じ行の 16px の全角字の墨が 13px、
 *      16px の数字が 11px なのに対し、税抜の数字は 15px・税込の数字は 12px だった
 *
 * ■ 依存（自分では定義しない）
 *   .page-title / .bread / .heading-01 / .sub-head / .ar / .ar--white / .btn … common.css
 *   色・書体・レイアウトの CSS 変数                                          … common.css 16〜49行
 */


/* =============================================================================
 * 0. 内容枠
 * common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため
 * 1440px 表示のとき内容幅が 1121px になる。本ページのカンプは内容幅 1200px（x120〜1320）
 * なので食い違う。そこで .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」
 * 方式にする（common.css 1166行の .bread が前例・WEB版イヤホンガイドの .wgd-inner と同式）。
 * ========================================================================== */
.wty-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280。1280px 以上で内容幅がカンプどおり 1200px になる */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}

/* head_01 のうち sub_head が続かないもの（price / apply / coverage）は
   自身の下 padding が 50px。common.css の .heading-01（下 1.6rem）を上書きする。 */
.wty-head--wide {
  padding-bottom: clamp(3rem, 3.47vw, 5rem); /* 実測 50px */
}


/* =============================================================================
 * 1. about（あんしん補償サービスとは？）
 * ログ 84〜222行 ／ Frame 4954 [120,867,1320,1682]・白地・下 padding 100
 * 見出しの上に余白は無い（直前の .bread が下 padding 40px を持つ＝カンプと一致）。
 * ========================================================================== */
.wty-about {
  padding-bottom: clamp(6rem, 6.94vw, 10rem); /* 実測 100px（Frame 4954 の下 padding） */
}

/* 導入文5行。ログ 92行: 16px / wght500 / lh25.6（＝1.6）/ 中央 / 幅1040 / 下 padding 45 */
.wty-about__lead {
  max-width: 104rem; /* 固定：カンプの本文幅 1040px（x200〜1240） */
  margin-inline: auto;
  padding-bottom: clamp(3rem, 3.13vw, 4.5rem); /* 実測 45px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}

/* 赤帯・カード3枚・注記のかたまり（ログ 93〜222行 ／ 894px 幅 x273〜1167） */
.wty-about__worry {
  max-width: 89.4rem; /* 固定：カード 282×3 ＋ 間 24×2 ＝ 894px。赤帯と注記も同じ幅 */
  margin-inline: auto;
}

/* 赤帯（ログ 94〜96行 ／ 894×49・pad(10,60,10,60)・18px 白・中央） */
.wty-about__band {
  position: relative; /* 下向きの三角の基準 */
  padding: clamp(.7rem, .69vw, 1rem) clamp(2.8rem, 4.17vw, 6rem); /* 実測 上下10px・左右60px */
  background: var(--color_main);
  color: #fff;
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 実測 18px */
  font-weight: 700;
  line-height: 1.6; /* ログ lh28.8 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
}

/* 帯の下の三角（ログ 96行 Polygon 35×25）。CSS で描いてよい図形。
   図形のため固定 px（縮めると先端が潰れる）。カードとの間 30px の中に収まる。 */
.wty-about__band::after {
  position: absolute;
  top: 100%;
  left: 50%;
  border-top: 25px solid var(--color_main);
  border-right: 17.5px solid transparent;
  border-left: 17.5px solid transparent;
  transform: translateX(-50%);
  content: "";
}

.wty-about__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.6rem, 1.67vw, 2.4rem); /* 実測 24px */
  margin-top: clamp(2rem, 2.08vw, 3rem); /* 実測 30px（Frame 4953 の gap） */
}

/* カード（ログ 97行 ／ 282×203・白地・影 0 0 20 10%・pad(30,20,30,20)） */
.wty-about__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2rem, 2.08vw, 3rem) clamp(1.4rem, 1.39vw, 2rem); /* 実測 上下30px・左右20px */
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* ログ DROP_SHADOW(0,0 r=20 #000000@0.1) */
}

/* アイコンの円（ログ 99行 Ellipse 84×84 #FFEDED）。丸バッジは CSS で描いてよい図形。 */
.wty-about__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(6rem, 5.83vw, 8.4rem); /* 実測 84px */
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color_main_light); /* 実測 #FFEDED */
}

/* 線画は円に対する割合で持たせる（実測 58÷84・54÷84・56÷84）。 */
.wty-about__icon {
  width: 69.05%;
  height: auto;
}
.wty-about__icon--02 { width: 64.29%; }
.wty-about__icon--03 { width: 66.67%; }

.wty-about__card-text {
  margin-top: clamp(.7rem, .69vw, 1rem); /* 実測 gap 10px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.5; /* ログ lh24 ÷ 16px。ほかの本文（1.6）と違うので注意 */
  letter-spacing: .05em;
  text-align: center;
}

/* PNG実測：強調は赤 #B80003 ＋太字。 */
.wty-about__accent {
  color: var(--color_main);
  font-weight: 700;
}

/* 注記2行（ログ 221〜222行 ／ 上 padding 20・左そろえ）。
   2行目の行頭の全角スペースはカンプどおり（HTML 側に入れている）。 */
.wty-about__note {
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 実測 20px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
  letter-spacing: .05em;
}


/* =============================================================================
 * 2. price（サービス料金）
 * ログ 223〜251行 ／ FRAME price [0,1682,1440,2449]・地 #F6F6F6・上下 pad 100（全幅の帯）
 * ========================================================================== */
.wty-price {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* 実測 上下100px */
  background: var(--color_light);
}

.wty-price__lead {
  max-width: 104rem; /* 固定：カンプの本文幅 1040px（x200〜1240） */
  margin-inline: auto;
  padding-bottom: clamp(3rem, 3.13vw, 4.5rem); /* 実測 45px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}


/* =============================================================================
 * 3. 表（price と charge で共通。ヘッダーの地色だけ違う）
 * ログ 230〜249行（料金）／ 399〜437行（負担額）。どちらも 780px 幅・列比 380 : 400。
 * ========================================================================== */
.wty-table-wrap {
  max-width: 78rem; /* 固定：表の幅 780px（x330〜1110）。コンテナ幅は固定の取り決め */
  margin-inline: auto;
}

.wty-table {
  width: 100%;
  border-collapse: collapse; /* 実測：セル間もセル外周も罫線は1px。重ならないよう collapse で描く */
  table-layout: fixed;
}

.wty-table th,
.wty-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 #EAEAEA */
  font-weight: 700; /* 実測：ヘッダー・本文とも wght=700 */
  line-height: 1.4;
  text-align: center; /* 実測：Figma の指定は align=LEFT だが auto-layout の中央寄せでセル中央に来る */
}

/* 列比 380 : 400。table-layout:fixed なのでヘッダー行の幅が全列を決める。 */
.wty-table__th--item {
  width: 48.7179%; /* 380 ÷ 780 */
}

.wty-table__th {
  background: var(--color_main); /* 実測 #B80003（サービス料金の表） */
  color: #fff;
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* 実測 18px */
  letter-spacing: .05em;
}

/* 未加入の表だけヘッダーが黒（ログ 400行・419行 fill=#111111）。 */
.wty-table--dark .wty-table__th {
  background: var(--color_dark);
}

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

/* 上の「th, td を中央寄せ」より詳細度を上げる必要があるため .wty-table を前置きする。
   実測：金額の列だけ右揃え（文字の右端が全行 1090px＝セル右端1110 − padding20 でそろう）。
   ヘッダーの「機器1台あたり（税抜）」「お客様の負担額」だけは中央（セル中央910）。 */
.wty-table .wty-table__amount {
  background: #fff;
  color: var(--color_main);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  letter-spacing: .05em;
  text-align: right;
}

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

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

.wty-table__notes {
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 実測 gap 20px */
}

.wty-table__note {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
  letter-spacing: .05em;
}


/* =============================================================================
 * 4. apply（加入方法・補償期間）
 * ログ 252〜277行 ／ Frame 4955 [120,2449,1320,2952]・上 pad 100・下 pad 60
 * ========================================================================== */
.wty-apply {
  padding-block: clamp(6rem, 6.94vw, 10rem) clamp(4rem, 4.17vw, 6rem); /* 実測 上100px・下60px */
}

/* カード3枚（ログ 257行 ／ 320×145・間隔40px・全体で1040px） */
.wty-apply__list {
  /* 矢印と番号の位置がこの2つに連動するので変数で持つ */
  --wty-step-gap: clamp(2.4rem, 2.78vw, 4rem);      /* 実測 カード間 40px */
  --wty-step-offset: clamp(1.4rem, 1.25vw, 1.8rem); /* 実測 番号のはみ出し 18px */

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--wty-step-gap);
  max-width: 104rem; /* 固定：カンプ 1040px（x200〜1240） */
  margin-inline: auto;
  /* 番号がカードの上に乗る分の逃げ。margin にすると見出しの下 padding と相殺されるため padding で持つ。 */
  padding-top: var(--wty-step-offset);
}

.wty-step {
  position: relative; /* 番号と矢印の基準 */
}

/* 番号「STEP / 01」（ログ 261行 ／ カード左端＋20px・上端より18px上・赤）。
   ログは1つの文字ボックスで size=30 と出るが、枠 36×39px に収まるのは
   1行目14px＋2行目30px の組み合わせだけ（イヤホンガイドとは の STEP と同じ作り）。 */
.wty-step__num {
  position: absolute;
  top: calc(-1 * var(--wty-step-offset));
  left: clamp(1.4rem, 1.39vw, 2rem); /* 実測 カード左端から 20px */
  display: flex;
  flex-direction: column;
  color: var(--color_main);
  font-family: var(--font_eng);
  font-weight: 500;
  line-height: .85; /* ログ lh25.5 ÷ 30px */
  letter-spacing: .05em;
}
.wty-step__num-label { font-size: clamp(1.1rem, .97vw, 1.4rem); } /* 実測 14px */
.wty-step__num-value { font-size: clamp(2.2rem, 2.08vw, 3rem); }  /* 実測 30px */

.wty-step__card {
  height: 100%; /* 3枚の高さをそろえる（本文の行数が違っても下辺が合う） */
  padding: clamp(2rem, 2.08vw, 3rem); /* 実測 pad30 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* ログ DROP_SHADOW(0,5 r=20 #000000@0.1) */
}

.wty-step__text {
  padding-top: clamp(.7rem, .69vw, 1rem); /* 実測 wrap の上 padding 10px */
  color: var(--color_dark);
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* 実測 18px */
  font-weight: 500;
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
}

/* カード間の矢印（共通 .ar 24×24・赤シェブロン）。
   実測：矢印の中心 y2764 はカード（2691〜2836）の上端から 73px ＝ 145px 中の 53.79%
   （本文の縦中央にそろっている）。 */
.wty-step__arrow {
  position: absolute;
  top: 53.79%;
  left: 100%;
  margin-left: calc(var(--wty-step-gap) / 2);
  transform: translate(-50%, -50%);
}

.wty-apply__note {
  max-width: 104rem; /* 固定：カンプの本文幅 1040px（x200〜1240） */
  margin-top: clamp(2rem, 2.08vw, 3rem); /* 実測 30px */
  margin-inline: auto;
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}


/* =============================================================================
 * 5. coverage（補償対象・適用条件）
 * ログ 278〜283行 ／ Frame 4956 [120,2952,1320,3314]・上 pad 60・下 pad 100
 * ========================================================================== */
.wty-coverage {
  padding-block: clamp(4rem, 4.17vw, 6rem) clamp(6rem, 6.94vw, 10rem); /* 実測 上60px・下100px */
}

.wty-coverage__text {
  max-width: 104rem; /* 固定：カンプの本文幅 1040px（x200〜1240） */
  margin-inline: auto;
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
  letter-spacing: .05em;
}


/* =============================================================================
 * 6. trouble（破損・故障・紛失が発生した場合）
 * ログ 284〜391行 ／ Frame 4957 [0,3314,1440,4125]・地 #F6F6F6・上下 pad 100（全幅の帯）
 * ========================================================================== */
.wty-trouble {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* 実測 上下100px */
  background: var(--color_light);
}

.wty-trouble__lead {
  max-width: 104rem; /* 固定：カンプの本文幅 1040px（x200〜1240） */
  margin-inline: auto;
  padding-bottom: clamp(2rem, 2.08vw, 3rem); /* 実測 30px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}

/* カード4枚（ログ 294行 ／ 260×293・全体で1120px x160〜1280）。
   ログの gap は 24 だが実配置は 26.67px（1120 − 260×4 ＝ 80 を3等分）。実配置に合わせる。 */
.wty-trouble__list {
  --wty-case-gap: clamp(1.6rem, 1.85vw, 2.66rem);  /* 実測 カード間 26.67px */
  --wty-case-offset: clamp(1.4rem, 1.39vw, 2rem);  /* 実測 番号のはみ出し 20px */

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wty-case-gap);
  max-width: 112rem; /* 固定：カンプ 1120px */
  margin-inline: auto;
  padding-top: var(--wty-case-offset); /* 番号がカードの上に乗る分の逃げ */
}

.wty-trouble__item {
  position: relative; /* 番号と矢印の基準 */
}

/* 番号「01」（ログ 310行 ／ カード左端＋20px・上端より20px上・赤 30px） */
.wty-trouble__num {
  position: absolute;
  top: calc(-1 * var(--wty-case-offset));
  left: clamp(1.4rem, 1.39vw, 2rem); /* 実測 カード左端から 20px */
  color: var(--color_main);
  font-family: var(--font_eng);
  font-size: clamp(2.2rem, 2.08vw, 3rem); /* 実測 30px */
  font-weight: 500;
  line-height: 1.4; /* ログ lh42 ÷ 30px */
  letter-spacing: .05em;
}

.wty-trouble__card {
  height: 100%; /* 4枚の高さをそろえる */
  padding: clamp(2rem, 2.08vw, 3rem); /* 実測 pad30 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* ログ DROP_SHADOW(0,5 r=20 #000000@0.1) */
}

/* 線画の枠（ログ 295〜296行 ／ 200×100 ＝ カードの内容幅いっぱい）。 */
.wty-trouble__fig {
  width: 100%;
  aspect-ratio: 2 / 1; /* 実測 200×100。素材が届く前も高さが変わらないよう枠で確保する */
}

.wty-trouble__fig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.wty-trouble__title {
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 実測 wrap の上 padding 20px */
  color: var(--color_main);
  font-size: clamp(1.4rem, 1.25vw, 1.8rem); /* 実測 18px。1199px 以下でカードが狭くなるため下限は 1.4rem */
  font-weight: 700;
  line-height: 1.4; /* ログ lh25.2 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
}

.wty-trouble__text {
  margin-top: clamp(.7rem, .69vw, 1rem); /* 実測 gap 10px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6; /* ログ lh25.6 ÷ 16px */
  letter-spacing: .05em;
}

/* カード間の矢印（共通 .ar 24×24）。実測：矢印の中心 y3823.5 はカード（3676〜3969）の
   上端から 147.5px ＝ 293px 中の 50.34%（ほぼ縦中央）。 */
.wty-trouble__arrow {
  position: absolute;
  top: 50.34%;
  left: 100%;
  margin-left: calc(var(--wty-case-gap) / 2);
  transform: translate(-50%, -50%);
}

.wty-trouble__closing {
  max-width: 104rem; /* 固定：カンプの本文幅 1040px（x200〜1240） */
  margin-top: clamp(2rem, 2.08vw, 3rem); /* 実測 30px */
  margin-inline: auto;
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}


/* =============================================================================
 * 7. charge（未加入の場合のお客様負担額）
 * ログ 392〜439行 ／ Frame 432 [200,4125,1240,5216]・白地・上下 pad 100
 * ========================================================================== */
.wty-charge {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* 実測 上下100px */
}

.wty-charge__body {
  max-width: 104rem; /* 固定：カンプの内容幅 1040px（x200〜1240） */
  margin-inline: auto;
}

/* 見出し（ログ 394〜395行 ／ 28px・pad(0,10,4,10)）。
   PNG実測：枠は四方ではなく下線だけ・太さ 3px（x520〜919 の y4265〜4267 が #B80003）。
   文字幅に合わせたいので width は fit-content。 */
.wty-charge__title {
  width: fit-content;
  margin-inline: auto;
  padding: 0 clamp(.7rem, .69vw, 1rem) clamp(.3rem, .28vw, .4rem); /* 実測 左右10px・下4px（上は0） */
  border-bottom: 3px solid var(--color_main); /* 固定：3px の罫線 */
  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;
}

.wty-charge__lead {
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* 実測 45px（見出しの枠の下 padding） */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
  text-align: center;
}

.wty-charge .wty-table-wrap {
  margin-top: clamp(2rem, 2.08vw, 3rem); /* 実測 30px（導入文の下 padding） */
}


/* =============================================================================
 * 8. faq（よくある質問）
 * ログ 440〜507行 ／ FRAME faq [0,5216,1440,6152]・地 #F6F6F6・上下 pad 100（全幅の帯）
 * カード高は Figma 実測で 閉じ 64px（20＋24＋20）／開き 128px（20＋24＋20＋線＋20＋24＋20）。
 * 開閉は HTML 標準の <details>/<summary>。このページ用の JS は無く、
 * common.js（編集禁止）にもアコーディオンの仕組みが無いため。
 * ========================================================================== */
.wty-faq {
  --wty-faq-badge: clamp(2rem, 1.67vw, 2.4rem); /* 実測 Q/A の丸バッジ 24×24。行の高さもこの値で決まる */

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

.wty-faq__list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* 実測 gap 20px */
  max-width: 104rem; /* 固定：カンプの枠 1040px（x200〜1240） */
  margin-inline: auto;
}

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

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

/* 回答の原稿が未支給の設問は <div> で同じ見た目にしている。押せる見た目にしない。 */
.wty-faq__q--static {
  cursor: default;
}

/* Q / A の丸バッジ（実測 24×24。Q＝赤地に白文字・A＝#FFEDED 地に赤文字）。
   丸バッジは CSS で描いてよい図形。 */
.wty-faq__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--wty-faq-badge);
  height: var(--wty-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;
}
.wty-faq__badge--q {
  background: var(--color_main);
  color: #fff;
}
.wty-faq__badge--a {
  background: var(--color_main_light);
  color: var(--color_main);
}

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

/* 開閉の矢印。共通の .ar（24×24）・.ar--2（16×16）は絵柄も線の太さも別物のため流用できない。
   カンプの矢印（ログ 455〜456行 ／ 枠18×18・線11×6・2px #B80003・角は square）は
   イヤホンガイドの購入ページの FAQ と同じコンポーネントで、同じ絵柄の書き出しが
   assets/images/purchase/purchase_faq_arrow.svg にあるのでそれを使っている。
   書き出し時点で下向きなので、閉じているときは回転させない。 */
.wty-faq__ar {
  flex: 0 0 auto;
  width: 1.8rem; /* 固定：カンプの矢印枠 18×18（書き出し素材と同寸で置く） */
  height: 1.8rem;
  margin-left: clamp(.4rem, .42vw, .6rem); /* 上の gap 14 と合わせて実測の 20px にする */
  background-image: url("../images/purchase/purchase_faq_arrow.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.8rem 1.8rem;
  transition: transform .3s ease;
}
.wty-faq__item[open] .wty-faq__ar {
  transform: rotate(180deg); /* 開いているときは上向き（カンプの1問目） */
}

.wty-faq__a {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, .97vw, 1.4rem); /* 実測 バッジと文字の gap 14px */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 実測 設問の下端 → 区切り線 が 20px */
  padding-top: clamp(1.4rem, 1.32vw, 1.9rem); /* 実測 区切り線 → 回答 が 20px（1px の線を含む） */
  border-top: 1px solid var(--color_line); /* 固定：1px の罫線 */
}


/* -----------------------------------------------------------------------------
 * 黒ボタン2本（ログ 508〜516行 ／ Frame 4851 [120,6152,1320,6352]）
 * 灰色の帯（FRAME faq）の外側・白地の上に置かれている。上60px・下80px。
 * ボタンは共通クラス .btn（common.css 834行）がカンプの btn 320×60 と同値。
 * -------------------------------------------------------------------------- */
.wty-faq-links {
  padding-block: clamp(4rem, 4.17vw, 6rem) clamp(5rem, 5.56vw, 8rem); /* 実測 上60px・下80px */
}

/* 1本目「イヤホンガイドのレンタルを見る」は15文字＝252px 必要で、共通 .btn の
   内容幅（320 − 左30 − 右50 ＝ 240px）に 12px 入らない。カンプでは Figma の
   auto-layout が溢れを左右へ均等に配って文字が左から25pxの位置に来ている
   （ログ 510行 [410,6203,660,6215] とボタン [385,6179,705,6239] の差）。
   共通クラスは書き換えず、この2本だけ左右の padding をカンプの実配置に合わせる。 */
.wty-faq-links .btn {
  padding-inline: 2.5rem 4.5rem;
}

.wty-faq-links__btns {
  display: flex;
  flex-wrap: wrap; /* .btn は 32rem 固定なので、入らない幅では自動で縦に積む */
  justify-content: center;
  gap: clamp(2rem, 2.08vw, 3rem); /* 実測 gap 30px */
}


/* =============================================================================
 * 9. contact（CONTACT 帯）
 * ログ 517〜555行 ／ FRAME contact [0,6352,1440,6778]・pad(80,276,80,276)・gap100・地 cta_gr
 * 「1ボタン＋吹き出し」型。左カラムの数値は assets/css/top.css 2014〜2100行
 * （.top-contact 系）からの転記で、各宣言に転記元の行を書いてある。
 * top.css はトップ限定読み込みのため本ページでは効かず、クラスも別（wty-contact__*）。
 * 右カラムの組み方は assets/css/_wgd/70_contact.css が手本（違いは下の注記のとおり）。
 * ========================================================================== */
.wty-contact {
  /* 上下は top.css 2015行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ（値は .wty-inner と同じ）。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 2016行は同じ値を直書き */
  color: #fff;
}

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

/* -----------------------------------------------------------------------------
 * 左カラム（top.css 2029〜2100行の転記。2026-08-13 版から変更なし）
 * -------------------------------------------------------------------------- */
.wty-contact__intro {
  flex: 0 0 30rem; /* top.css 2030行 */
  align-self: stretch; /* top.css 2031行。カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}

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

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

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

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

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

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

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

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

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

/* -----------------------------------------------------------------------------
 * 右カラム（ログ 543〜555行）
 *   説明文2行  x620〜1220・y6448〜6482（16px / lh22.4 / wght700 / 左そろえ）
 *   ボタン     x620〜1219（600px）・y6562〜6682（120px）・#7C0002・影 0 10 30 #860D08@30%
 *   吹き出し   x632〜1208（576px）・y6514〜6567（53px）・白地・角丸5px・影 0 10 20 #000@10%
 *   三角       35×25・中心 x920.5（吹き出し下端 6567 から 13px はみ出す）
 *   説明文とボタンの間は 80px、ボタンの上端に吹き出しの下端が 5px 重なる。
 * 吹き出しは Figma でもボタンの外に絶対配置。流し込みにするとボタンの中心が
 * 帯の中心からずれるため、CSS でも絶対配置にしている（_wgd/70_contact.css と同じ）。
 * -------------------------------------------------------------------------- */
.wty-contact__action {
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  min-width: 0;
}

.wty-contact__note {
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh22.4 ÷ 16px */
  letter-spacing: .05em;
}

.wty-contact__btn-wrap {
  position: relative; /* 吹き出しの基準 */
  margin-top: clamp(4rem, 5.56vw, 8rem); /* Figma wrap の gap 80px */
}

.wty-contact__balloon {
  position: absolute;
  bottom: calc(100% - .5rem); /* ボタン上端に 5px 重ねる */
  left: 50%;
  z-index: 1; /* 後ろに来るボタン（position:relative）より前に置き、三角を隠されないようにする */
  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; /* Figma fill=#FFFFFF（WEB版イヤホンガイドは黒地・ここが違う） */
  box-shadow: 0 10px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,10 r=20 #000000@0.1) */
  color: var(--color_dark);
  font-size: clamp(1.5rem, 1.25vw, 1.8rem); /* Figma 18px */
  font-weight: 700;
  line-height: 1.3; /* Figma lh23.4 ÷ 18px */
  letter-spacing: .05em;
  text-align: center;
  transform: translateX(-50%);
}

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

.wty-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2120行と同値（Figma 120px） */
  /* 左右とも 10.8rem。文字（384px 枠）の中心がボタンの中心（Figma x920）に来て、
     かつ左のアイコン（左40px＋64px）と右の矢印（右20px＋24px）に文字が重ならない。 */
  padding-inline: 10.8rem;
  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, all .3s ease);
}

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

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

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

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


/* =============================================================================
 * 10. feature（あんしん補償サービスの特徴）
 * 🚨 2026-08-19 の確定版カンプに存在しないセクション。page-warranty.php からの
 *    読み込みを外しているので現在は使われていない（template-parts/under/rental/flow.php と
 *    rental.css の flow セクションと同じ扱い＝1行で戻せるよう残してある）。
 *    ログの出典は旧版 figma-dump/inspect/under/warranty.txt 184〜241行。
 * ========================================================================== */
.wty-feature {
  padding-block: clamp(3rem, 3.47vw, 5rem) clamp(6rem, 6.94vw, 10rem); /* 旧実測 上50px・下100px */
}

.wty-feature__box {
  max-width: 104rem; /* 固定：旧カンプの灰箱 1040px */
  margin-inline: auto;
  padding-block: clamp(4rem, 4.17vw, 6rem); /* 旧実測 上下60px */
  padding-inline: clamp(2rem, 2.08vw, 3rem); /* 当方設計：幅が詰まった時にカードが箱の縁に接しないよう確保 */
  background: var(--color_light);
}

.wty-feature__box-title {
  color: var(--color_dark);
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 旧実測 24px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

.wty-feature__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 2.08vw, 3rem); /* 旧実測 30px */
  max-width: 83rem; /* 固定：カード400×2 ＋ 間30 ＝ 830px */
  margin-inline: auto;
  padding-block: clamp(3rem, 3.13vw, 4.5rem) clamp(2rem, 2.08vw, 3rem); /* 旧実測 上45px・下30px */
}

.wty-feature__card {
  /* 赤い天板ぶんを上の余白から引く（Figma の INSIDE ストロークと同じ見え方）。 */
  --wty-plate: clamp(.5rem, .56vw, .8rem); /* 旧PNG実測 8px：上端の赤い帯 */
  --wty-pad: clamp(2rem, 2.08vw, 3rem);    /* 旧実測 30px：カードの内側余白 */

  display: flex;
  flex-direction: column;
  gap: var(--wty-pad);
  padding: calc(var(--wty-pad) - var(--wty-plate)) var(--wty-pad) var(--wty-pad);
  border-top: var(--wty-plate) solid var(--color_main); /* 左右・下辺に線は無い */
  background: #fff;
}

.wty-feature__img {
  width: 100%;
  max-width: 34rem; /* 固定：イラスト原寸 340px。1列表示でも引き伸ばさない */
  margin-inline: auto;
}

.wty-feature__img img {
  display: block;
  width: 100%;
  height: auto;
}

.wty-feature__title {
  color: var(--color_main);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* 旧実測 20px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}

.wty-feature__text {
  margin-top: clamp(.7rem, .69vw, 1rem); /* 旧実測 gap 10px */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* 旧実測 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}


/* =============================================================================
 * 11. 1199px 以下（SP カンプ無し・当方設計）
 * 横並びのカードの間隔を詰めて、カード1枚あたりの内容幅を確保する。
 * 数値はいずれも「1440px の値 → 1199px で何 px になるか」を計算して決めている。
 * ========================================================================== */
@media (max-width: 1199px) {

  /* 3枚のカード。1199px で 33px → 26px。カード幅が 324px → 329px になる。 */
  .wty-apply__list {
    --wty-step-gap: clamp(1.6rem, 2.2vw, 3rem);
  }

  /* 4枚のカード。1199px で 22px → 18px。カード幅が 263px → 266px になる。
     769px では 14px まで詰まり、カード幅 171px を確保できる。 */
  .wty-trouble__list {
    --wty-case-gap: clamp(1.2rem, 1.5vw, 2rem);
  }

  /* 不安カード3枚。1199px で 20px → 17px。 */
  .wty-about__cards {
    gap: clamp(1.2rem, 1.4vw, 2rem);
  }
}


/* =============================================================================
 * 12. 1023px 以下（SP カンプ無し・当方設計）
 * ここで閉じているのは CONTACT 帯だけ。2カラムのままだと右カラムが 600px を切り、
 * ボタンの中の文字（「レンタルを申し込む・相談をする」＝約 377px）と
 * 左右のアイコン・矢印（合わせて 148px）が競って折り返しが増えるため。
 * WEB版イヤホンガイドの CONTACT 帯（_wgd/70_contact.css）と同じ切り替え位置にそろえた。
 * ========================================================================== */
@media (max-width: 1023px) {
  .wty-contact__inner {
    flex-direction: column;
    align-items: stretch;
    /* 6rem。吹き出し（53px）がボタンの外へ出るため、4rem だと営業時間の枠との間が
       4px しか空かない。768px 以下は吹き出しを流れの中に戻すので 4rem に落とす。 */
    gap: 6rem;
    min-height: 0;
  }

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


/* =============================================================================
 * 13. 768px 以下（SP カンプ無し・当方設計）
 * 横並びのカードを縦積みにし、表は2列を保ったまま文字とセル余白を絞る。
 * 表を横スクロールにはしない（先方が SP の横スクロールを嫌っているため）。
 * ========================================================================== */
@media (max-width: 768px) {

  /* about ------------------------------------------------------------------
     3列のままだと 768px でカード1枚の内容幅が 200px を割り、2行の文言が3行に増える。 */
  .wty-about__cards {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2rem;
  }

  .wty-about__card {
    width: 100%;
    max-width: 32rem; /* 固定：カンプのカード原寸 282px に近い上限。縦1列でも横に伸ばしきらない */
  }

  /* 表（price / charge） ----------------------------------------------------
     375px のとき内容幅は 335px。48.7:51.3 のままだと右列が 172px しかなく
     「10,000円（税込11,000円）」（この設定で約 182px）が折り返す。
     左列の品名は元から2行になる幅なので、右列へ配分を寄せて金額を1行に収める。 */
  .wty-table__th--item {
    width: 40%;
  }

  .wty-table th,
  .wty-table td {
    height: 4.8rem; /* 表のセルでは最小値として働く。文字が2行になれば行は伸びる（当方設計） */
    padding: .8rem .6rem; /* 実測20px → 6px。375px で右列に 189px 使えるようにするための値 */
  }

  .wty-table__th {
    font-size: 1.4rem; /* 実測18px → 14px。「機器1台あたり（税抜）」が 1行（162px）で収まる */
  }

  .wty-table__item,
  .wty-table .wty-table__amount {
    font-size: 1.3rem; /* 実測16px → 13px */
  }

  .wty-table__num {
    font-size: 1.5rem; /* 実測20px → 15px。上の 13px と合わせて金額の実幅は約 182px */
  }

  /* apply ------------------------------------------------------------------ */
  .wty-apply__list {
    grid-template-columns: 1fr;
    max-width: 32rem; /* 固定：縦1列でもカードが横に伸びきらないようにする上限 */
    /* 矢印を下に置くので、カード間を矢印1個分（24px）＋上下の余白まで広げる */
    --wty-step-gap: clamp(4rem, 5.86vw, 6rem);
  }

  /* 下向きの矢印。common.css の .ar--down は transform: rotate(90deg) を持ち
     ここの translate と上書きし合うため、common.css 782行の注記どおり
     translate と rotate を1つの transform にまとめてこちらで持つ。 */
  .wty-step__arrow {
    top: 100%;
    left: 50%;
    margin-top: calc(var(--wty-step-gap) / 2);
    margin-left: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* trouble ---------------------------------------------------------------- */
  .wty-trouble__list {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: 30rem; /* 固定：縦1列でもカードが横に伸びきらないようにする上限 */
    --wty-case-gap: clamp(4rem, 5.86vw, 6rem); /* 矢印1個分（24px）＋上下の余白 */
  }

  .wty-trouble__item {
    width: 100%;
  }

  .wty-trouble__arrow {
    top: 100%;
    left: 50%;
    margin-top: calc(var(--wty-case-gap) / 2);
    margin-left: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* faq -------------------------------------------------------------------- */
  .wty-faq__item {
    padding-inline: 1.6rem; /* 実測26px → 16px。設問の文字が使える幅を確保する */
  }

  /* contact（top.css 2419〜2472行の SP を手本・当方設計の追記あり） ------------ */
  .wty-contact {
    padding-block: 6rem; /* top.css 2420行 */
  }

  .wty-contact__inner {
    gap: 4rem; /* top.css 2426行 */
  }

  /* 説明文とボタンの間はカンプで 80px だが、吹き出しを流れの中に戻すぶん
     ここは詰める（80px のままだと説明文と吹き出しの間が空きすぎる）。 */
  .wty-contact__btn-wrap {
    margin-top: 3rem;
  }

  /* 吹き出しを絶対配置のままにすると、文字が折り返して2行になった時に
     上の説明文へかぶる。SP だけ通常の流れに置き、5px の重なりは
     負のマージンで作る（当方設計・_wgd/70_contact.css と同じ手当て）。 */
  .wty-contact__balloon {
    position: relative;
    bottom: auto;
    left: auto;
    margin: 0 auto -.5rem;
    transform: none;
  }

  .wty-contact__btn {
    height: auto; /* top.css 2448行 */
    min-height: 10rem;
    /* 左 6rem（アイコン左 .8rem ＋ 4.4rem ＋ 余白 .8rem）／右 4rem（矢印 .8rem ＋ 2.4rem ＋ 余白 .8rem）。
       375px のとき文字に使える幅は 335 − 100 ＝ 235px。 */
    padding: 2rem 4rem 2rem 6rem;
  }

  .wty-contact__btn-icon {
    left: .8rem;
    width: 4.4rem;
    height: 4.4rem;
  }

  /* 「レンタルを申し込む・相談をする」は 15文字。375px で使える幅は 235px なので
     16px（252px 必要）では 1行に収まらない。14px なら 220px で収まる。
     トップ・購入ページも SP でボタン内の文字を落としている（top.css 2462行）。 */
  .wty-contact__btn-txt {
    font-size: 1.4rem;
  }

  .wty-contact__btn .ar--white {
    right: .8rem; /* top.css 2471行は 1.2rem。文字の幅を優先して詰めた */
  }

  /* feature（現在は読み込んでいない。戻したときのために残す） -------------------- */
  .wty-feature__list {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .wty-feature__card {
    width: 100%;
    max-width: 40rem; /* 固定：旧カンプのカード原寸 400px */
  }
}


/* =============================================================================
 * 14. FV（メインビジュアル）
 *
 * ログ 33〜79行 ／ FRAME FV [0,80,1440,720]＝1440×640。以下 y は「FV 内の相対値」
 * （＝ログの絶対 y − 80）で書く。カンプ画像は screenshots/fv_20260822/fv_warranty.png。
 *
 * ■ この節をこのファイルに置く理由
 *   本テーマは「1ページ1CSS・接頭辞つき」（.wty- / .rtl- / .cmp- …）で、共通の fv.css は作らない。
 *   あんしん補償とイヤホンガイドのレンタルで似た記述が重複するが、ページ単位で差し替えられる
 *   ことと、2ページを同時に別担当が触っても衝突しないことを優先した（2026-08-22 実装指示書）。
 *   同じ理由で、この節の 1199 / 1023 / 768px の指定も 11〜13 節ではなくここにまとめている。
 *
 * ■ カンプ PNG を等倍（2倍画像）で走査して補ったもの（inspect ログに出ない情報）
 *   1. 背景のグラデーションの向き＝左下 #FFEDED → 右上 #FFFFFF。走査値から傾き
 *      dG/dx=+0.0162・dG/dy=−0.0112（G値/px）→ 進行方向は水平から約35度上向き＝CSS 55deg。
 *      #FFEDED に飽和する位置がグラデーション線の 40% だったので停止位置もその値にした。
 *   2. リボンは左右の端が内側へ三角に切り込んだ帯。走査値＝上下端 x120/340.5、
 *      上下中央 x131/330 ＝ 切り込みの深さ 11px（幅 221 の 5%）。
 *   3. キャッチ2行目は +mixed。走査した墨の高さ（28px の「負」が 25px）を基準に
 *      「負担額を」28px 黒／「100」50px／「％」28px／「免除。」36px（赤）。
 *      下線は 3px #B80003 で x120〜472（＝行の送り幅そのまま。末尾「。」の右アキを含む）。
 *   4. 右ボタンの影は2枚重ね。ログの Frame 122（0,10 r30 #000000@0.3）と
 *      その中の Frame 4853（0,10 r30 #860D08@0.3）が両方掛かる。ボタン直下の実測
 *      (146,11,4)（帯の地は (193,14,3)）は2枚重ねの計算値 146.3 と一致した。左ボタンは1枚。
 *   5. 右のイラストは枠 729×410 の中に「収める」配置で、実際に描かれているのは
 *      614.4×409.6（相対 x747.5・y72.5）。素材 1536×1024 をそのまま置くと合わない。
 *   6. ログの Mask group（#FFFFFF@0→#FFFFFF）はカンプ画像上では効いていない。
 *      イラスト全域で「素材＋背景」の合成値とカンプの差が平均 1/255 未満（白が 20% 乗れば
 *      +35/255 になるはず）。カンプの見た目を正としたので白のフェードは掛けていない。
 *
 * ■ 依存（自分では定義しない）
 *   .ar / .ar--white … common.css 734〜780行（24×24 の矢印）
 *   --gradient（cta_gr）/ --color_main / --color_main_dark / --color_dark … common.css
 * ========================================================================== */

/* FV 本体。カンプは高さ 640px だが、CTA 帯（相対 y515〜685）が下へ 45px はみ出すため
   節全体の高さは 685px になる。背景は ::before で「下 45px を除いた 640px」に敷く。 */
/* 2026-08-23 CEO 指示「ピンクのグラデーション背景は 1920px で止めて」。
   節を 1920px（192rem）で止めて中央に置く。背景（::before）も左下の波もこの箱の中に
   収まるので、1920px を超えても波がこれ以上左へ行かない。右のイラストは箱の中で
   さらに中央 1440px の位置に止めてある（.wty-fv__photo の right 参照）。
   overflow-x: clip は、箱の左外へ 17px 出る波を地の端で切るため。縦は visible のままなので
   CTA ボタンの影（0 10px 30px）は従来どおり残る（hidden にすると 1278px 以下で影が欠ける）。
   1920px 以下は 1px も変わらない。 */
.wty-fv {
  position: relative;
  isolation: isolate; /* 中の重ね順（背景0→波1→写真2→文字3→CTA4）をこの節の中だけで完結させる */
  max-width: 192rem;
  margin-inline: auto;
  overflow-x: clip;
  overflow-y: visible; /* 明示。clip と visible の組み合わせは片側が auto に変わらないので影は残る */
  padding-top: clamp(3rem, 3.13vw, 4.5rem); /* 実測 45px（リボンの上端） */
}

.wty-fv::before {
  position: absolute;
  inset: 0 0 clamp(3rem, 3.13vw, 4.5rem) 0; /* 下 45px＝CTA 帯のはみ出しぶんは背景を敷かない */
  z-index: 0;
  background: linear-gradient(55deg, #FFEDED 40%, #FFFFFF 100%); /* 走査値から算出（節の冒頭2の1） */
  content: "";
}

/* 左下の赤い波（ログ 34行 IMG deco [-13,249,807,690]＝相対 x−13・y169・w820・h441）。
   枠は h441 だが素材の縦横比（1747:900）は保たれていて、実描画は 820×422.4。
   上端はログの枠の上下中央（178）ではなく 184。カンプ画像の左端 x0〜115 の縦の色の並びを
   当方の描画と突き合わせ、ずれと伸縮を総当たりで最小にした位置（差の二乗和が 1/18 に減る）。
   大きさは 1440px を超えたら実寸で止める。位置は箱（1920px で止まる）の左端が基準なので、
   1920px を超えるとこれ以上左へ行かず、ピンクの地の左端で切れる。 */
.wty-fv__deco {
  position: absolute;
  top: clamp(12.4rem, 12.78vw, 18.4rem); /* 実測 184px */
  left: -0.9%; /* −13 / 1440。箱の幅に対する割合なので 1920px で止まる */
  z-index: 1;
  width: 56.94%; /* 820 / 1440 */
  max-width: 82rem;
}

/* 文字と CTA 帯の内容枠。.wty-inner と同式（1200 の内容＋外側に左右余白）。 */
.wty-fv__inner,
.wty-fv__cta-wrap {
  position: relative;
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}

.wty-fv__inner {
  z-index: 3; /* イラストより上。狭い幅で寄ってきても本文が読める */
}

.wty-fv__cta-wrap {
  z-index: 4;
}

/* 文字のかたまり。カンプの本文・注記の幅は 604px（x120〜724）。
   右のイラストが画面幅に追従して寄ってくるため、文字の幅も同じ割合で連れて縮める
   （604 ÷ 14.4 ＝ 41.94vw）。これで両者の間は常にカンプと同じ 1.64vw ぶん空く。 */
.wty-fv__body {
  width: 41.94vw;
  max-width: 60.4rem; /* 1440px 以上ではカンプの実寸 604px で止める */
}

/* リボン「加入推奨」（ログ 71〜78行 Group 229 [120,125,341,175]＝相対 y45・221×50）。
   左右の端が内側へ三角に切り込む形。切り込み 11px は幅 221 の 5% なので % で書く
   （幅を変えても形が崩れない）。 */
.wty-fv__ribbon {
  display: flex;
  align-items: center;
  width: clamp(15rem, 15.35vw, 22.1rem); /* 実測 221px */
  height: clamp(3.6rem, 3.47vw, 5rem); /* 実測 50px */
  padding-left: clamp(2.2rem, 2.36vw, 3.4rem); /* 実測 34px（帯の左端からアイコンまで） */
  gap: clamp(.3rem, .28vw, .4rem); /* 実測 4px */
  background: var(--gradient); /* Figma cta_gr（#DA3106→#B80003・水平） */
  clip-path: polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);
}

.wty-fv__ribbon-icon {
  flex: 0 0 auto;
  width: clamp(2.6rem, 2.5vw, 3.6rem); /* 実測 36px */
  height: auto;
}

.wty-fv__ribbon-txt {
  color: #fff;
  font-size: clamp(1.7rem, 1.67vw, 2.4rem); /* 実測 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

/* 見出し（ログ 51行 [116,181,639,251]＝相対 y101・size50 / lh70 / wght700・cta_gr の文字）。
   グラデーションを文字幅ぶんだけ掛けるため fit-content にする（ブロック幅に伸ばすと
   右端の色がカンプより明るくなる）。 */
.wty-fv__title {
  width: fit-content;
  margin-top: clamp(.4rem, .42vw, .6rem); /* 実測 6px（リボンの下端から） */
  margin-left: -.08em; /* 実測：カンプは文字の左脇アキ 4px ぶん外へ出して本文の墨と頭を揃えている */
  color: var(--color_main); /* グラデーション文字が効かない環境用の色 */
  font-size: clamp(2.8rem, 3.47vw, 5rem); /* 実測 50px */
  font-weight: 700;
  line-height: 1.4; /* 70 / 50 */
  letter-spacing: .05em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wty-fv__title {
    background-image: var(--gradient); /* Figma cta_gr */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* キャッチ1行目（ログ 63〜70行 Group 226 [120,273,579,312]＝相対 y193）。
   「万が一の」＋赤タグ3つ（間に赤い中黒）＋「に。」。 */
.wty-fv__catch1 {
  margin-top: clamp(1.4rem, 1.53vw, 2.2rem); /* 実測 22px（見出しの行送りの箱の下端から） */
  color: var(--color_dark);
  font-size: clamp(1.8rem, 1.94vw, 2.8rem); /* 実測 28px */
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
  letter-spacing: .05em;
}

/* タグ3つのかたまり（ログ 65行 Frame 4965 [244,273,514,312]）。
   前後の「万が一の」「に。」との間はカンプ実測 6.4px。 */
.wty-fv__tags {
  margin-inline: .2286em; /* 実測 6.4px */
}

/* 赤タグ（ログ 66・68・70行 78×39・地 #B80003・左右 padding 10・白文字）。
   図形なので幅を明示する。em で書くのは、文字サイズが clamp で縮むときに
   中の2文字がはみ出さないよう連動させるため（78 ÷ 28 ＝ 2.7857em）。 */
.wty-fv__tag {
  display: inline-block;
  width: 2.7857em;
  background: var(--color_main);
  color: #fff;
  text-align: center;
}

/* タグの間の「・」（ログ 67・69行 28px #B80003・幅28）。
   Frame 4965 の gap が −5px なので左右に食い込ませる。 */
.wty-fv__tag-dot {
  display: inline-block;
  width: 1em;
  margin-inline: -.1786em; /* 実測 −5px */
  color: var(--color_main);
  text-align: center;
}

/* キャッチ2行目（ログ 61〜62行 Frame 4967 [120,309,473,376]＝相対 y229〜296）。
   1行目の行送りの箱と 3px 重なる位置から始まる。 */
.wty-fv__catch2 {
  margin-top: .607em; /* 実測 17px（28px 基準）。1行目の行送りの箱の下端から */
  color: var(--color_dark);
  font-size: clamp(1.8rem, 1.94vw, 2.8rem); /* 実測 28px */
  font-weight: 700;
  line-height: 1em; /* px に固めて子へ継がせる（数値のままだと 50px の「100」で行が伸びる） */
  letter-spacing: .05em;
}

/* 下線つきの帯（ログ Frame 4967 の stroke=3px #B80003 INSIDE ＝下辺だけ）。
   下線は線なので 3px 固定（1〜5px の線の例外）。 */
.wty-fv__catch2-line {
  display: inline-block;
  padding-bottom: .239em; /* 実測：文字の足元から下線まで 6.7px */
  border-bottom: 3px solid var(--color_main);
}

.wty-fv__catch2-num {
  color: var(--color_main);
  font-size: 1.7857em; /* 実測 50px（28px 基準） */
}

.wty-fv__catch2-pct {
  color: var(--color_main);
}

.wty-fv__catch2-free {
  color: var(--color_main);
  font-size: 1.2857em; /* 実測 36px（28px 基準） */
}

/* 本文（ログ 52行 [120,407,724,485]＝相対 y327・幅604・16px / lh25.6 / wght500） */
.wty-fv__lead {
  margin-top: clamp(2rem, 2.15vw, 3.1rem); /* 実測 31px */
  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;
}

/* 注記（ログ 53〜54行 Frame 4966 [120,508,724,550]＝相対 y428・604×42・白地・角丸5・
   padding 10・中は 14px / lh22.4 / wght700 / #7C0002） */
.wty-fv__note {
  /* 実測 23px ＋ 1px。上の本文3行（16px × lh1.6）の行の高さが小数で丸まるぶんだけ
     以降が 1px 上に来るため、ここで足して CTA 帯の上端をカンプの y515 に合わせている。 */
  margin-top: clamp(1.7rem, 1.67vw, 2.4rem);
  padding: clamp(.8rem, .69vw, 1rem); /* 実測 10px */
  /* 折り返した行を「※」の次の文字にそろえる（ぶら下げインデント）。2026-08-23 CEO 指摘。
     幅を狭めると2行目が行頭へ戻り、体裁が崩れていた。 */
  padding-left: calc(clamp(.8rem, .69vw, 1rem) + 1em);
  text-indent: -1em;
  border-radius: 5px; /* 角丸は 1〜5px の例外 */
  background: #fff;
  color: var(--color_main_dark); /* Figma main_color_dark #7C0002 */
  font-size: clamp(1.2rem, .97vw, 1.4rem); /* 実測 14px */
  font-weight: 700;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
}

/* 右のイラスト（ログ 76〜79行）。枠 729×410 に収めた実描画 614.4×409.6・相対 x747.5・y72.5。
   右端からの余白 78px（＝5.42%）で画面幅に追従させ、1440px を超えたら実寸で止める。
   位置も 1440px の位置で止める（2026-08-23 CEO 指示「右（イラスト）は止めて」）。 */
.wty-fv__photo {
  position: absolute;
  top: clamp(4rem, 5.03vw, 7.25rem); /* 実測 72.5px */
  /* (1440 − 1361.9) / 1440。1440px 以下は従来どおり 5.42% で画面幅に追従する。
     1440px を超えたら、中央に置いた見えない 1440px の画布の右端から 78px の位置で止める。
     50% は節（1920px で止まる箱）の半分。2つの値が入れ替わるのは 1440.1px で、差は 0.05px。 */
  right: max(5.42%, calc(50% - 72rem + 7.8rem));
  z-index: 2;
  width: 42.67%; /* 614.4 / 1440 */
  max-width: 61.44rem; /* 1440px を超えたら実寸で止める（文字は 1280 で止まるため） */
}

/* CTA 帯（ログ 35行 Frame 4961 [120,595,1320,765]＝相対 y515・1200×170・
   地 cta_gr・左右 padding45・ボタン間 20・上下中央にボタン2本） */
.wty-fv__cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* 実測 20px */
  margin-top: clamp(3rem, 3.13vw, 4.5rem); /* 実測 45px（注記の下端から） */
  padding: clamp(3rem, 3.13vw, 4.5rem); /* 実測 上下左右 45px */
  background: var(--gradient); /* Figma cta_gr */
}

.wty-fv__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 実測 460px。下限 32rem（320px）は、文字が下限の 1.4rem で止まったあとも
     カンプの比率「ボタン幅に対する文字幅 54.8%（252 / 460）」を保てる最小幅
     （176.4 ÷ 0.548 ＝ 322px）から採った。30rem（300px）だと 830〜990px で
     文字の左端がアイコン（下限 3.2rem）の枠に 4px 食い込む。 */
  width: clamp(32rem, 31.94vw, 46rem);
  height: clamp(6rem, 5.56vw, 8rem); /* 実測 80px */
  text-decoration: none;
  transition: var(--transition, all .3s ease);
}

.wty-fv__btn--apply {
  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;
}

/* hover は濃い赤の面の共通語彙＝内側 2px の白枠（common.css 1742行・warranty.css 873行）。
   box-shadow は1プロパティなので外影を併記して維持する。 */
.wty-fv__btn--apply:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

/* 影2枚は Figma の入れ子（Frame 122 と Frame 4853）どおり。先に書いたほうが上に乗る。 */
.wty-fv__btn--price {
  background: #fff;
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), 0 10px 30px rgba(0, 0, 0, .3);
  color: var(--color_dark);
}

/* hover は白〜薄い面の共通語彙＝地を少し落として主色の内側枠（common.css 866行）。 */
.wty-fv__btn--price:hover {
  background: var(--color_base2);
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), 0 10px 30px rgba(0, 0, 0, .3), inset 0 0 0 2px var(--color_main);
}

.wty-fv__btn-txt {
  font-size: clamp(1.4rem, 1.39vw, 2rem); /* 実測 20px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

/* ボタン左の無線機アイコン（ログ 40行 FRAME icon [302,659,345,702]＝43×43・
   ボタン左端から 52px・上下中央） */
.wty-fv__btn-icon {
  position: absolute;
  top: 50%;
  left: clamp(2rem, 3.61vw, 5.2rem); /* 実測 52px */
  width: clamp(3.2rem, 2.99vw, 4.3rem); /* 実測 43px */
  height: auto;
  transform: translateY(-50%);
}

/* 矢印（ログ 37・47行 ar 24×24・ボタン右端から 20px・上下中央） */
.wty-fv__btn .ar,
.wty-fv__btn .ar--white {
  position: absolute;
  top: 50%;
  right: clamp(1.2rem, 1.39vw, 2rem); /* 実測 20px */
  transform: translateY(-50%);
}


/* --- 768〜1199px（タブレット帯・当方設計） ----------------------------------
   この帯は PC と同じ2カラム（左に文章・右にイラスト）のまま。文字の幅・イラスト・
   CTA 帯はいずれも vw 連動なので、帯ごとに当てる指定は持たない。実測は次のとおり。
     文字とイラストの間  … 1440px で 24px ／ 1199px で 87px ／ 1024px で 74px ／
                            900px で 65px ／ 800px で 58px ／ 768px で 56px
     ボタン2本＋間の合計 … 768px で 654px（帯の内側 666px）＝横並びのまま収まる
     文字の折り返し      … 見出し・キャッチ2行はどの幅でも1行。本文は 768px で5行
   例外は波（.wty-fv__deco）だけで、次のブロックで置き方を上端基準から下端基準に替える。
   768px を割ると 14 節末尾の @media (max-width: 767px) で縦積みへ組み替える。 */

/* 波の置き方だけ、上端基準から「CTA 帯の裏」を保つ下端基準へ替える。
   ■ なぜ必要か（実測）
     本文は 1261px を割ると文字が下限 14px で止まり、以降は幅が狭まるぶん行数だけが増える
     （1440px で3行 → 768px で5行）。一方で波は幅に連れて縮み続けるため、素材の濃い赤
     （画像の下半分・左寄り）が本文の帯へ上がってくる。1440px では濃い赤の上端が本文の
     行送りの箱の下端（y404）とほぼ同じ y395 で、本文には掛からない。768px では上端が
     y236 まで上がり、本文（y210〜322）の真下に濃い赤が入る。実測のコントラスト比は
     1440px 11.41:1 に対して 900px 3.34:1・768px 2.13:1 で、本文が読めない。
   ■ 直し方
     あしらいは消さず、大きさもそのまま。カンプ 1440px の「濃い赤は本文より下、
     波の下半分は CTA 帯の裏」という関係を、FV の下端からの距離で言い直しただけ。
     1440px の実測は FV 下端から 78.6px（78.6 ÷ 14.4 ＝ 5.46vw）で、1280px の 70px とも
     一致する。1199px 以下だけに当てるので 1200px 以上（1440・1280 を含む）は一切動かない。 */
@media (max-width: 1199px) {
  .wty-fv__deco {
    top: auto;
    bottom: 5.46vw; /* 実測 78.6px（1440px 時の FV 下端から波の下端まで） */
    /* 下端で止めるだけだと波が CTA 帯の裏へ潜りすぎて、あしらいが痩せて見える。
       966px を割ったら幅を 550px で止め、CTA 帯の上に出る高さを確保する
       （1440px の「CTA 帯より上に見える波の高さ ÷ 帯より上の FV の高さ」＝52% に対し、
       550px 止めで 768px 時も 48%。56.94% のままだと 35% まで痩せる）。
       966px 以上では 56.94% のほうが大きいので値は変わらない＝1200px 境界で段差なし。 */
    width: max(56.94%, 55rem);
  }
}


/* --- 767px 以下（SP カンプ無し・当方設計） ----------------------------------
   ■ 本テーマ既定の SP 境界（768px）と 1px ずらしている理由
     2026-08-23 CEO 指示「タブレット幅までは PC 時のレイアウト（左に文章・右にイラストの
     2カラム）を保つ」。768px は iPad 縦の幅で、ここで組み替わると先方の確認機で崩れて
     見えるため、FV の組み替えだけを 767px 以下へ下げた。ページ内の他の節（13 節）と
     common.css は既定の 768px のままで、この節だけがこの 1px の例外を持つ。 */
@media (max-width: 767px) {
  /* 文字は全幅に戻し、イラストは消さずに注記と CTA 帯の間へ流し込む。
     375px では文字の右にイラストを置ける幅が残らないため（文字だけで 335px 必要）。 */
  .wty-fv__body {
    width: auto;
    max-width: none;
  }

  .wty-fv__photo {
    /* static ではなく relative。static に戻すと背景の ::before（z-index 0・絶対配置）の
       下へ潜って見えなくなる。relative なら流れの中に戻りつつ重ね順の指定が効く。 */
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: 40rem; /* 固定：SP でイラストが間延びしない上限。カンプ実寸 614px の 65% */
    margin: 2.4rem auto 0;
    padding-inline: clamp(2rem, 2.75vw, 4rem); /* 文字と同じ左右余白に揃える（box-sizing は border-box） */
  }

  /* ボタン2本は横に並ばない（375px で帯の内側が 295px）。縦積みにする。 */
  .wty-fv__cta {
    flex-direction: column;
    padding-inline: clamp(1.6rem, 5.33vw, 2rem);
  }

  .wty-fv__btn {
    width: 100%;
    max-width: 46rem;
  }

  /* 波は文字の下に敷いたままだと縦長の SP で間延びするため、
     下（CTA 帯のうしろ）へ寄せる。右へはみ出すと横スクロールが出るので
     左へだけ出す（left −10% ＋ 幅 105% ＝ 右端は画面内の 95%）。 */
  .wty-fv__deco {
    top: auto;
    bottom: 0;
    left: -10%;
    width: 105%;
    max-width: none;
  }
}