@charset "UTF-8";
/**
 * about.css — イヤホンガイドとは（固定ページ slug: about）
 *
 * Figma  : 下層ページ under（node 263:1003 ／ 1440×4750・2026-09-05 の FV 追加後）
 * inspect: figma-dump/inspect/about_final/00_about_under.txt
 * カンプ : figma-dump/screenshots/about_final/00_about_under.png（等倍 1440px）
 * HTML   : page-about.php ／ template-parts/under/about/*.php
 *
 * 1rem = 10px（common.css の html{font-size:62.5%}）。
 * 数値は上記 inspect の実測。リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 = vw」。
 * clamp の下限は SP のカンプが無いため当方設計（目安は上限の6〜7割・本文系は 1.4rem 以上）。
 * 固定 px / rem を使うのは (1) コンテナの最大幅 (2) 1〜2px の罫線・5px 以下の角丸
 * (3) 固定でないと整わない場合 のみ。その都度、理由を1行で書いている。
 *
 * common.css からそのまま使う既存クラス（ここでは再定義しない）
 *   .page-title / .heading-01 系 / .sub-head 系 / .ar / .ar--white / .btn
 *
 * 【図の中の文字サイズについて】メダル・STEP の図・2枚目のカードの図は
 *   「絵と文字を重ねた1つの図版」なので、中の文字を図枠の幅に対する比（cqw）で持たせている。
 *   こうすると枠が縮んでも絵と文字の大きさの関係が崩れない。
 *   cqw を解釈しない古いブラウザ向けに、直前の行に rem の値を置いてある。
 *
 * 目次
 *   1. 共通の内容枠
 *   2. 冒頭の見出し・導入文と実績帯（.abt-achieve）
 *   3. イヤホンガイドの仕組み（.abt-mechanism / .abt-step）
 *   4. 選ばれている理由（.abt-reason）
 *   5. 動画（.abt-video）
 *   6. 製品一覧ボタンと吹き出し（.abt-more）
 *   7. 誘導カードとサポート・FAQ（.abt-links）
 *   8. CONTACT 帯（.abt-contact）
 *   9. FV（.abt-fv）＝ページ最上部。2026-09-05 の追加で、既存の @media と混ぜないため末尾に置いている
 */


/* ============================================================
   1. 共通の内容枠
   common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため、
   1440px 表示のとき内容幅が 1121px になり、カンプの内容幅 1200px と食い違う。
   そこで .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」方式にする。
   1280px 以上で内容幅がカンプどおり 1200px になる。
   ============================================================ */
.abt-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280 */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}


/* ============================================================
   2. 冒頭の見出し・導入文と実績帯（Figma contents_inner ／ y382〜929）
     head_01   … 見出し＋英字ラベル y382〜472。共通 .heading-01 をそのまま使う
                 （下 16px は common.css の .heading-01 padding-bottom が持っている）
     Frame 433 … 導入文 y472〜518（文字 y472〜498 ＋ 下 20px）
     wrap      … 灰色の箱 x200〜1240・y518〜929・1040×411・fill #F6F6F6
   パンくずの直後に余白なしで見出しが始まる（カンプも bread の下端 382 と head_01 の上端が同じ）。
   ============================================================ */

/* 導入文（Figma 16px / lh25.6 / 500 / #111111 / 中央）。
   カンプでは 1440px 幅いっぱいの文字枠に置かれているが、実体は1行の中央揃えなので
   幅は持たせない（幅を持たせると字送りの分だけ折り返しが早まる）。 */
.abt-achieve__intro {
  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;
}

.abt-achieve__box {
  max-width: 104rem; /* 固定: カンプ 1040px。コンテナの最大幅は固定値で持つ（例外1） */
  margin-inline: auto;
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* 導入文の下端 498 → 箱の上端 518 ＝ 20px */
  /* 上 40px ／ 下 60px（カンプ: 箱の pad 上下40 ＋ 説明文の下の余白20） */
  padding-block: clamp(2.8rem, 2.78vw, 4rem) clamp(4rem, 4.17vw, 6rem);
  background: var(--color_light);
}
/* カンプの箱に左右 padding は無い（メダルの幅を 1040px の比で持つため箱には付けない）。
   狭くなったときに文字が箱の端に触れないよう、文字だけに左右の逃げを持たせる。 */
.abt-achieve__title,
.abt-achieve__lead {
  padding-inline: clamp(1.6rem, 2.08vw, 3rem); /* 当方設計 */
}

/* 見出し（Figma 27px / lh43.2 / 700 / #B80003 / 中央）
   下の赤い線は Figma では独立した矩形（644×2）だが、文字の幅とほぼ同じで
   文字に追従させたいので inline-block の下線として持たせている。 */
.abt-achieve__title {
  /* flex にしているのは、inline-block にすると行の下に文字の下ぶら分の隙間ができて
     下線の位置が 6px ほど下がるため。flex の子なら文字ぴったりの高さになる。 */
  display: flex;
  justify-content: center;
  color: var(--color_main);
  font-size: clamp(1.9rem, 1.88vw, 2.7rem); /* 27px */
  font-weight: 700;
  line-height: 1.6; /* 43.2 / 27 */
  letter-spacing: .05em;
  text-align: center;
}
.abt-achieve__title-txt {
  border-bottom: 2px solid var(--color_main); /* 固定: 2px の罫線（例外2）。Figma Rectangle 35 */
  /* 2026-09-24 文言を「…国内外 年間利用台数70万台の実績」に変えたところ、SP で
     「年間｜利用台数」の途中で折れるため、読点と空白の位置でだけ改行させる。
     それでも入らない狭さでは anywhere で折って、はみ出しを出さない。 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* メダル2つの並び（Figma Frame 94 ／ gap 60px・両方とも下端そろえ）
   Frame 434 の上下 padding 30px は、見出しの下余白と説明文の上余白で作っている。 */
.abt-achieve__badges {
  display: flex;
  align-items: flex-end; /* カンプは左右のメダルの下端が同じ y787 にそろう */
  justify-content: center;
  gap: 5.77%; /* 60 / 1040。箱の幅に対する比で持つとカンプと同じ間隔のまま縮む */
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma Frame 434 pad-top 30px */
}

/* メダル1つ分の枠。中身は全部この枠に対する % と cqw で置く。 */
.abt-achieve__badge {
  position: relative;
  flex: 0 0 26.15%; /* 272 / 1040 */
  container-type: inline-size; /* 中の文字を枠の幅に連動させるため */
}
.abt-achieve__badge--share { aspect-ratio: 272 / 156; } /* Figma Group 11 */
.abt-achieve__badge--users { aspect-ratio: 273 / 146; } /* Figma Group 10 */

/* 月桂樹の後ろにある白いぼかし（Figma Rectangle 28 / 27 ＝ 244×121・角丸73px・ぼかし12px）。
   灰色の地の上で文字を読みやすくするための飾り。 */
.abt-achieve__badge::before {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 50%; /* 角丸73px は 121px の高さに対して半分を超えるため、実質この形になる */
  filter: blur(12px); /* 固定: ぼかし量はカンプの実測値。縮小時も柔らかさを保ちたいため可変にしない（例外3） */
}
.abt-achieve__badge--share::before {
  top: 16.67%;   /* (521 − 495) / 156 */
  left: 5.15%;   /* (431 − 417) / 272 */
  width: 89.71%; /* 244 / 272 */
  height: 77.56%; /* 121 / 156 */
}
.abt-achieve__badge--users::before {
  top: 10.96%;   /* (521 − 505) / 146 */
  left: 5.49%;   /* (764 − 749) / 273 */
  width: 89.38%; /* 244 / 273 */
  height: 82.88%; /* 121 / 146 */
}

/* 月桂樹（about_01 / about_03・273×135） */
.abt-achieve__laurel {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
}
.abt-achieve__badge--share .abt-achieve__laurel { top: 14.10%; } /* (517 − 495) / 156 */
.abt-achieve__badge--users .abt-achieve__laurel { top: 8.22%; }  /* (517 − 505) / 146 */

/* No.1 の金文字（about_02・197×120） */
.abt-achieve__no1 {
  position: absolute;
  top: 11.54%;   /* (513 − 495) / 156 */
  left: 15.81%;  /* (460 − 417) / 272 */
  width: 72.43%; /* 197 / 272 */
  height: auto;
}

/* メダルの中の文字。左右とも枠いっぱいに置いて中央そろえにする。 */
.abt-achieve__badge-sub,
.abt-achieve__badge-main {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--color_dark);
  font-weight: 700;
  line-height: 1.1; /* 21.45 / 19.5・26.81 / 24.375 とも同じ比率 */
  letter-spacing: .05em;
  text-align: center;
}
/* 「旅行関連市場」19.5px */
.abt-achieve__badge-sub {
  top: 0;
  font-size: 1.5rem;
  font-size: 7.169cqw; /* 19.5 / 272 */
}
/* 「国内シェア」24.375px（左） */
.abt-achieve__badge--share .abt-achieve__badge-main {
  top: 14.10%; /* (517 − 495) / 156 */
  font-size: 1.9rem;
  font-size: 8.962cqw; /* 24.375 / 272 */
}
/* 「国内外年間利用数」（右）。2026-09-24 ケンネット様のご指示で「年間」を足し8文字になった。
   元の 8.928cqw（24.3752 / 273）のままだと幅が約205px になり、月桂樹の上端の葉に重なる
   （Figma about_final/00_about_under.txt の実測＝枠 x749〜1022、葉の内側 x799〜973＝枠の幅の 18.3%〜82.0%）。
   葉の内側に収まる 7.2cqw に下げ、1行のまま出す。 */
.abt-achieve__badge--users .abt-achieve__badge-main {
  top: 0;
  font-size: 1.6rem;
  font-size: 7.2cqw; /* 19.66 / 273 */
  white-space: nowrap;
}

/* 「70万台」。Figma は 70（109.688px）と 万台（28.0966px）の2つの文字で、
   万台が 70 に 8px 食い込み、下端が 23px 上にずれている。
   ずれ量は万台の文字サイズに対する em で持たせ、書体の幅の差で崩れないようにしている。 */
.abt-achieve__count {
  position: absolute;
  top: 13.01%; /* (524 − 505) / 146 */
  right: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center; /* カンプでも枠のほぼ中央（実測 x806 に対し中央そろえで x804） */
}
/* 書体は Roboto Condensed（--font_eng_cond）。カンプの「70」は字面 95×79px で、
   同じ 109.688px で組むと Noto Sans JP は 120×84px、Roboto Condensed は 102×80px。
   高さがほぼ一致する Roboto Condensed を採る（common.css の変数・読み込み済み）。 */
.abt-achieve__count-num {
  font-family: var(--font_eng_cond);
  font-size: 6rem;
  font-size: 40.179cqw; /* 109.688 / 273 */
  font-weight: 700;
  line-height: 1.1; /* 120.657 / 109.688 */
  /* Figma の文字グラデーション（#DB6526 → #B80003） */
  background: linear-gradient(180deg, #DB6526, #B80003);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.abt-achieve__count-unit {
  margin-bottom: .818em; /* 23 / 28.0966。70 の下端より上に置く */
  margin-left: -.285em;  /* −8 / 28.0966。70 に食い込ませる */
  color: var(--color_main);
  font-size: 1.6rem;
  font-size: 10.291cqw; /* 28.0966 / 273 */
  font-weight: 900;
  line-height: 1.1; /* 30.9 / 28.0966 */
}

/* 下の説明文（16px / lh25.6 / 中央） */
.abt-achieve__lead {
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma Frame 434 pad-bottom 30px */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 500;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
  text-align: center;
}


/* ============================================================
   3. イヤホンガイドの仕組み
   Figma contents_inner（白・y929〜1664・pad 上下100）
   ============================================================ */
.abt-mechanism {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
}

.abt-mechanism__lead {
  margin-bottom: clamp(2rem, 2.08vw, 3rem); /* Figma Frame 433 pad-bottom 30px */
  font-size: clamp(1.4rem, 1.11vw, 1.6rem);
  font-weight: 500;
  line-height: 1.8; /* 28.8 / 16 */
  letter-spacing: .05em;
  text-align: center;
}

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

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--abt-step-gap);
  max-width: 104rem; /* 固定: カンプ 1040px（例外1） */
  margin-inline: auto;
  /* 番号がカードの上に乗る分の逃げ。margin にすると導入文の下余白 30px と相殺されて
     18px 分が消えるため padding で持つ（番号はこの余白の中にはみ出して収まる）。 */
  padding-top: var(--abt-step-offset);
}

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

/* 番号「STEP / 01」（Figma 30px・lh25.5・Roboto・赤／カード左端+20px・上端より18px上）
   カンプは1つの文字ボックスで1行目だけ小さい。カンプ実測で 1行目 14px・2行目 30px。 */
.abt-step__num {
  position: absolute;
  top: calc(-1 * var(--abt-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; /* 25.5 / 30 */
  letter-spacing: .05em;
}
.abt-step__num-label { font-size: clamp(1.1rem, .97vw, 1.4rem); } /* 14px */
.abt-step__num-value { font-size: clamp(2.2rem, 2.08vw, 3rem); }  /* 30px */

/* カード本体（白地・pad 30・影 shadow01） */
.abt-step__card {
  display: flex;
  flex-direction: column;
  height: 100%; /* 3枚の高さをそろえる */
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 30 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,5 r=20 #000000@0.1) */
}

/* 図の枠（Figma flow01 226×110。カードの内容幅 260 の中で左右 17px ずつ内側） */
.abt-step__fig {
  position: relative;
  width: 86.92%; /* 226 / 260 */
  margin-inline: auto;
  aspect-ratio: 226 / 110;
  container-type: inline-size;
}

/* イラスト本体。カンプの中心座標に置いてから中央合わせで戻す（枠が縮んでも中心がずれない） */
.abt-step__illust {
  position: absolute;
  height: auto;
  transform: translate(-50%, -50%);
}
/* 01: Group 204（98×82）中心 x359 / y1398.5 */
.abt-step__fig--01 .abt-step__illust { top: 40.45%; left: 49.56%; width: 43.36%; }
/* 02: Group 209（159×85）中心 x725 / y1396 */
.abt-step__fig--02 .abt-step__illust { top: 38.18%; left: 52.21%; width: 70.35%; }
/* 03: Group 214（95×83）中心 x1075 / y1396.5 */
.abt-step__fig--03 .abt-step__illust { top: 38.64%; left: 47.79%; width: 42.04%; }

/* 角丸のラベル（Figma Frame 4943〜4946・高さ20px・pad 左右10px・角丸5px・14px 太字）
   文字幅 42px＝14px×3文字ちょうどなので字間は 0。 */
.abt-step__chip {
  position: absolute;
  padding-inline: .714em; /* 10 / 14 */
  border-radius: 5px; /* 固定: 5px の角丸（例外2） */
  background: var(--color_main_light);
  color: var(--color_dark);
  font-size: 1.4rem;
  font-size: 6.194cqw; /* 14 / 226 */
  font-weight: 700;
  line-height: 1.4; /* 19.6 / 14 */
  letter-spacing: 0;
  white-space: nowrap;
}
.abt-step__chip--on { /* 赤地に白字（Figma fill #B80003） */
  background: var(--color_main);
  color: #fff;
}
/* 01: マイク（右上）／ガイド（左下・赤）／送信機（右下） */
.abt-step__fig--01 .abt-step__chip--a { top: 1.82%;  left: 51.77%; }
.abt-step__fig--01 .abt-step__chip--b { top: 80.91%; left: 25.22%; }
.abt-step__fig--01 .abt-step__chip--c { top: 80.91%; left: 56.19%; }
/* 02: 送信機（左）／受信機（右下） */
.abt-step__fig--02 .abt-step__chip--a { top: 56.36%; left: 12.39%; }
.abt-step__fig--02 .abt-step__chip--b { top: 81.82%; left: 49.12%; }
/* 03: イヤホン（右上）／参加者（左下・赤）／受信機（右下） */
.abt-step__fig--03 .abt-step__chip--a { top: 17.27%; left: 51.77%; }
.abt-step__fig--03 .abt-step__chip--b { top: 81.82%; left: 24.78%; }
.abt-step__fig--03 .abt-step__chip--c { top: 81.82%; left: 56.19%; }

.abt-step__title {
  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;
}

/* カード間の矢印（共通 .ar 24×24・赤シェブロン）。
   カンプ実測: 中心 x540（カード間の中央）／ y1439 ＝ カード上端から 115px（240px 中 47.92%）。 */
.abt-step__arrow {
  position: absolute;
  top: 47.92%;
  left: 100%;
  margin-left: calc(var(--abt-step-gap) / 2);
  transform: translate(-50%, -50%);
}


/* ============================================================
   4. イヤホンガイドが選ばれている理由
   Figma contents_inner（灰 #F6F6F6・y1664〜3063・pad 上下100）
   ============================================================ */
.abt-reason {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
  background: var(--color_light);
}

/* 3枚のカード（330×292 ×3・間隔 24〜25px・全体で 1040px） */
.abt-reason__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 1.7vw, 2.45rem); /* カンプ実測 24px と 25px の中間 */
  max-width: 104rem; /* 固定: カンプ 1040px（例外1） */
  margin-inline: auto;
}

.abt-reason__card {
  padding-bottom: clamp(2rem, 2.15vw, 3.1rem); /* 本文の下 30〜32px の中間 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,5 r=20 #000000@0.1) */
}

/* カード頭の赤いアーチ。支給の SVG（about_07 / 10 / 13・330×66〜67）をそのまま置き、
   見出しをその上に重ねる。img が入ることで頭の高さが自動でカンプ比になる。 */
.abt-reason__head {
  position: relative;
}
.abt-reason__arch {
  display: block;
  width: 100%;
  height: auto;
}
.abt-reason__title {
  position: absolute;
  top: 19.4%; /* アーチの高さ 67px に対して 13px（カード上端から 13px） */
  right: 0;
  left: 0;
  color: #fff;
  font-size: clamp(1.8rem, 1.53vw, 2.2rem); /* 22px */
  font-weight: 700;
  line-height: 1.4; /* 30.8 / 22 */
  letter-spacing: .05em;
  text-align: center;
}

/* 図（178×113 相当・カードの中央） */
.abt-reason__fig {
  width: 53.94%; /* 178 / 330 */
  margin: clamp(1.1rem, 1.11vw, 1.6rem) auto 0; /* アーチとの間 15〜17px の中間 */
}
.abt-reason__fig img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2枚目だけ図が部品の集まり（話す人・聞く人たち・赤い両矢印・「100m」の文字）。
   カンプの座標を 178×113 の枠に対する % に直して置いている。 */
.abt-reason__fig--range {
  position: relative;
  aspect-ratio: 178 / 113;
  container-type: inline-size;
}
.abt-reason__fig--range img {
  position: absolute;
  width: auto;
}
.abt-reason__fig-talker {   /* about_08（66×86）: Figma Group 25 x630 / y2058 */
  top: 20.35%;  /* (2058 − 2035) / 113 */
  left: 0;
  width: 36.52%; /* 65 / 178 */
}
.abt-reason__fig-listener { /* about_09（71×65）: Figma Group 26 x737 / y2035 */
  top: 0;
  left: 60.11%; /* (737 − 630) / 178 */
  width: 39.89%; /* 71 / 178 */
}
/* 2人の間の赤い両矢印（Figma Group 67 > Vector 5 ／ node 606:4034 ／ stroke 2.69px
   #B80003 ／ 矢頭は TRIANGLE_ARROW）。位置と大きさは Figma の実描画境界
   absoluteRenderBounds [679,2073.99] 59.76×64.08（矢頭を含む実寸）を 178×113 の枠に対する
   % に直したもの。stroke 中心の枠（58×52）ではなく実描画で合わせないと矢頭が欠ける。
   重なり順はカンプどおり人物より前・「100m」より後ろ。 */
.abt-reason__fig-arrow {
  top: 34.5%;    /* (2073.99 − 2035) / 113 */
  left: 27.53%;  /* (679 − 630) / 178 */
  width: 33.71%; /* 60 / 178（書き出し SVG の viewBox 幅） */
}

.abt-reason__fig-range {    /* 「100m」18px 太字 赤: Figma x703 / y2127 */
  position: absolute;
  top: 81.42%;  /* (2127 − 2035) / 113 */
  left: 41.01%; /* (703 − 630) / 178 */
  color: var(--color_main);
  /* Roboto。カンプの「100m」は 18px で幅 47px＝Roboto の字幅（2.587em×18＝46.6px）と一致する */
  font-family: var(--font_eng);
  font-size: 1.4rem;
  font-size: 10.112cqw; /* 18 / 178 */
  font-weight: 700;
  line-height: 1.17; /* 21.09 / 18 */
  white-space: nowrap;
}

.abt-reason__text {
  margin-top: clamp(1.5rem, 1.53vw, 2.2rem); /* 図との間 21〜23px の中間 */
  font-size: clamp(1.3rem, .97vw, 1.4rem); /* 14px */
  font-weight: 500;
  line-height: 1.6; /* 22.4 / 14 */
  letter-spacing: .05em;
  text-align: center;
}
/* 赤い太字の部分（Figma の +mixed をカンプで目視して確定） */
.abt-reason__em {
  color: var(--color_main);
  font-weight: 700;
}


/* ============================================================
   5. 動画（Figma Frame 436 ／ 1038×536・白地）
   ============================================================ */
.abt-video {
  max-width: 104rem; /* 固定: カンプ 1038px。他の 1040px の箱と幅をそろえる（例外1） */
  /* Figma Frame 125 pad-bottom 70px ＝ カードの列との間 */
  margin: clamp(4.4rem, 4.86vw, 7rem) auto 0;
  /* 上 50px ／ 下 25px（カンプ実測） */
  padding-block: clamp(3.2rem, 3.47vw, 5rem) clamp(1.6rem, 1.74vw, 2.5rem);
  /* 当方設計: カンプの左右は 175px だが中身の最大幅で決まるため、狭いときだけ効く逃げ */
  padding-inline: clamp(1.6rem, 2.08vw, 3rem);
  background: #fff;
}
.abt-video__inner {
  max-width: 68.8rem; /* 固定: カンプの中身 688px（例外1） */
  margin-inline: auto;
}
.abt-video__title {
  margin-bottom: clamp(1.2rem, 1.18vw, 1.7rem); /* Figma 見出し下端2398 → 画像上端2415 */
  font-size: clamp(1.8rem, 1.6vw, 2.3rem); /* 23px */
  font-weight: 700;
  line-height: 1.4; /* 32.2 / 23 */
  letter-spacing: .05em;
  text-align: center;
}
.abt-video__media img {
  display: block;
  width: 100%;
  height: auto;
}
.abt-video__note {
  font-size: clamp(1.3rem, .97vw, 1.4rem); /* 14px */
  font-weight: 500;
  line-height: 1.8; /* 25.2 / 14 */
  letter-spacing: .05em;
  text-align: right;
}


/* ============================================================
   6. 製品一覧ボタンと「更に詳しく見る」の吹き出し
   Figma Frame 437（btn 320×60 ＝ common.css の .btn とそのまま同じ）
   吹き出しは Group 95（165×37・about_15.svg）で、ボタンの上端に 18px 重なる。
   ============================================================ */
.abt-more {
  margin-top: clamp(3.2rem, 3.47vw, 5rem); /* 動画の箱の下端 2852 → ボタン上端 2902 */
  text-align: center;
}
.abt-more__wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
/* 固定 rem の理由: 中の .btn が common.css で 320×60 の固定サイズのため、
   その上に乗る吹き出しも固定にしないと重なり量（18px）がずれる（例外3）。 */
.abt-more__balloon {
  position: absolute;
  bottom: calc(100% - 1.8rem); /* ボタンの上端に 18px 重ねる */
  left: 50%;
  z-index: 1; /* .btn は position:relative なので、指定しないと吹き出しが下に隠れる */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 16.5rem;
  height: 3.7rem;
  transform: translateX(-50%);
  background: url("../images/about/about_15.svg") no-repeat center / 100% 100%;
}
.abt-more__balloon-txt {
  color: var(--color_main);
  font-size: 1.6rem; /* 固定: 吹き出しの絵が固定サイズのため文字も固定（例外3） */
  font-weight: 700;
  line-height: 1.6; /* 25.6 / 16 */
  letter-spacing: .05em;
}


/* ============================================================
   7. 誘導カード4枚とサポート・FAQ の行
   Figma Frame 4929（白・y3063〜3483・pad 上下100）
   カード 282×120 ×4・間隔 24px・全体で 1200px
   ============================================================ */
.abt-links {
  padding-block: clamp(6rem, 6.94vw, 10rem); /* Figma 上下 100px */
}

.abt-links__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 1.67vw, 2.4rem); /* カード間 24px */
}
.abt-links__item {
  display: flex; /* カードを枠の高さいっぱいに伸ばす */
}
.abt-links__card {
  /* 矢印の右余白 16px。カードの左右 padding もこれに連動させる */
  --abt-links-ar-right: clamp(1.2rem, 1.11vw, 1.6rem);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(9rem, 8.33vw, 12rem); /* Figma 120px */
  padding-block: 1.6rem;
  /* 右は「矢印の右余白＋矢印24px」＝矢印に文字が重ならない最小値（1440px で 40px）。
     左はそれより 16px 狭くして、文字の中心をカンプと同じ位置（カード左端から133px）に置く。
     カンプの実測は左30／右46 だが、Figma は和文を詰めて描いており、ブラウザの標準の
     字送りだと2枚目の1行目「利用期間や台数に合わせた導入方法を」が入らず3行に折れる。
     矢印に触れない範囲まで広げてカンプと同じ2行に収めている。 */
  padding-right: calc(var(--abt-links-ar-right) + 2.4rem);
  padding-left: calc(var(--abt-links-ar-right) + .8rem);
  background: #fff;
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,5 r=20 #000000@0.1) */
  color: var(--color_dark);
  text-decoration: none;
  transition: var(--transition);
}
/* hover はトップの同じ形のカード（top.css 490行・Figma node 569:5013）に合わせる */
.abt-links__card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, .1), inset 0 0 0 2px var(--color_main);
}
.abt-links__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.2rem, 1.11vw, 1.6rem); /* Figma txt gap 16px */
  text-align: center;
}
.abt-links__title {
  color: var(--color_main);
  font-size: clamp(1.5rem, 1.18vw, 1.7rem); /* 17px */
  font-weight: 700;
  line-height: 1; /* Figma lh 17 / 17px。4列を保つ 1024px でも最長の見出しが1行に収まる */
  letter-spacing: .05em;
}
/* 12px。カンプの実寸どおり。これ以上小さくすると読めないので縮めない（例外3）
   font-feature-settings: palt — カンプは「、」「・」を詰めて組まれており（4枚目の1行目
   「工場・施設見学、研修・視察、イベント」がカンプ実測 207px）、ブラウザ既定の
   全角のままだと 227px になって1行に収まらず3行に折れる。詰め組みを指定して
   カンプと同じ2行にそろえている。ここだけに効かせ、他ページの組み方は変えない。 */
.abt-links__desc {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.4; /* 16.8 / 12 */
  letter-spacing: .05em;
  font-feature-settings: "palt" 1;
}
.abt-links__card .ar {
  position: absolute;
  top: 50%;
  right: var(--abt-links-ar-right); /* Figma 右端から 16px */
  transform: translateY(-50%);
}

.abt-links__support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(2.4rem, 3.47vw, 5rem); /* Figma gap 50px */
  margin-top: clamp(2.4rem, 2.78vw, 4rem); /* Figma Frame 4929 gap 40px */
}
.abt-links__support-txt {
  color: var(--color_main);
  font-size: clamp(1.8rem, 1.6vw, 2.3rem); /* 23px */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
  text-align: center;
}


/* ============================================================
   8. CONTACT 帯（Figma contact ／ y3483〜3909・1440×426）
   形はトップの contact と同じ（左カラム＋ボタン2本）。
   .top-contact の CSS は top.css にあり本ページでは読まれないため、
   クラスを abt-contact__* で作り直し、数値は top.css 1934〜2100行から転記している。
   ============================================================ */
.abt-contact {
  /* 上下は top.css 1935行と同値（Figma pad(80,276,80,276) の上下）。
     左右は .section__inner を使わない取り決めのためここで持つ（値は共通枠と同じ）。 */
  padding-block: 8rem;
  padding-inline: clamp(2rem, 2.75vw, 4rem);
  background: var(--gradient); /* Figma cta_gr。top.css 1936行は同じ値を直書き */
  color: #fff;
}
.abt-contact__inner {
  display: flex;
  align-items: center;
  gap: clamp(4rem, 6.94vw, 10rem); /* top.css 1943行 10rem。1024px 付近で右を潰さないよう縮む側にした */
  max-width: 100rem; /* top.css 1944行。Figma 実配置 220〜1220px */
  min-height: 26.6rem; /* top.css 1945行。Figma title-wrap 266px（426 − 上下 padding 160） */
  margin-inline: auto;
}

/* 左カラム（top.css 1949〜2024行の転記） */
.abt-contact__intro {
  flex: 0 0 30rem; /* top.css 1950行 */
  align-self: stretch; /* カンプは左カラムだけ上寄せ（266px 枠の上端から始まる） */
}
.abt-contact__label {
  display: flex; /* top.css 1955行 */
  align-items: center;
  gap: .4rem; /* Figma 丸マーク右端234 → 文字左端238 */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.abt-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1965行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}
.abt-contact__title {
  font-family: var(--font_eng); /* top.css 1974行は "Roboto", sans-serif 直書き。変数の中身は同じ */
  font-size: clamp(4.4rem, 4.17vw, 6rem); /* 上限 top.css 1975行 6rem / 下限 同 2336行 4.4rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 84 */
  letter-spacing: 0; /* top.css 1978行。CONTACT だけ字間を空けない */
}
.abt-contact__point {
  display: block; /* top.css 1982行。Figma point 68×4 */
  width: 6.8rem;
  height: .4rem;
  margin: 2rem 0;
  background: #fff;
}
.abt-contact__tel-label {
  font-size: 1.5rem; /* top.css 1990行 */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}
.abt-contact__tel {
  display: flex; /* top.css 1997行 */
  align-items: center;
  gap: .4rem;
}
.abt-contact__tel-icon {
  flex: 0 0 3.2rem; /* top.css 2002行。Figma icon 32×32 */
  width: 3.2rem;
  height: 3.2rem;
}
.abt-contact__tel a {
  font-family: var(--font_eng); /* top.css 2008行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2009行 3.4rem / 下限 同 2340行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
  color: inherit;
}
.abt-contact__hours {
  margin-top: .8rem; /* top.css 2017行。Figma gap 8 */
  padding: .7rem; /* top.css 2018行。Figma 34px = border 1px + 7px + 本文 18.2px + 7px + border 1px */
  border: 1px solid var(--color_line); /* top.css 2019行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2020行 1.3rem / 下限 同 2344行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* 右カラム＝ボタン2本（top.css 2029〜2100行の転記） */
.abt-contact__btns {
  display: flex;
  flex: 0 1 60rem; /* Figma ボタン 600px。1024px 付近では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* Figma ボタン間 20px */
  min-width: 0;
}
.abt-contact__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2041行と同値（Figma 120px） */
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  text-decoration: none;
  transition: var(--transition);
}
.abt-contact__btn--rental {
  background: var(--color_main_dark); /* Figma #7C0002 */
  color: #fff;
}
.abt-contact__btn--inquiry {
  background: #fff;
  color: var(--color_main);
}
/* hover はフローティング CTA（common.css 1716行）と同じ語彙。白地は内側 2px の赤枠、
   濃い赤地はその白枠版。box-shadow は1プロパティなので既存の外影を併記して維持する。
   2026-08-20 CEO 指示により opacity: .85 から変更（薄くなるだけで分からなかったため）。 */
.abt-contact__btn--rental:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px #fff;
}

.abt-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}
.abt-contact__btn-icon {
  position: absolute; /* top.css 2060行。Figma 64×64・ボタン左端から40px */
  top: 50%;
  left: 4rem;
  width: 6.4rem;
  height: 6.4rem;
  transform: translateY(-50%);
}
.abt-contact__btn-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem; /* top.css 2070行 */
  text-align: center;
}
.abt-contact__btn-main {
  font-size: 2.4rem; /* top.css 2074行。Figma 24px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.abt-contact__btn-sub {
  font-size: 1.5rem; /* top.css 2081行。Figma 15px */
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}
.abt-contact__btn .ar {
  position: absolute; /* top.css 2092行。Figma 24×24・ボタン右端から20px */
  top: 50%;
  right: 2rem;
  transform: translateY(-50%);
}


/* ============================================================
   XL 帯だけの調整（1024〜1199px）
   2026-08-14 CEO 指示。この帯だけに効かせ、LG（1023px 以下）へは引き継がない。
   そのため max-width 単独ではなく min-width との併記にしている。
   ============================================================ */
@media (max-width: 1199px) and (min-width: 1024px) {

  /* 「離れていても安心」の図。部品の % 指定（36.52 / 39.89 / 33.71）は
     .abt-reason__fig--range img { width: auto } のほうが詳細度が高く効いておらず、
     図だけがカンプ実寸の固定px（66 / 71 / 60）で描かれていた。
     枠が縮む XL 帯では、枠幅に比例して縮む「100m」（10.112cqw）だけが小さくなり、
     図と文字が重なる。ここで % を効かせて図全体を枠に比例させる。 */
  .abt-reason__fig--range .abt-reason__fig-talker {
    width: 36.52%; /* 65 / 178 */
  }
  .abt-reason__fig--range .abt-reason__fig-listener {
    width: 39.89%; /* 71 / 178 */
  }
  .abt-reason__fig--range .abt-reason__fig-arrow {
    width: 33.71%; /* 60 / 178（書き出し SVG の viewBox 幅） */
  }

  /* 誘導カードの説明文は改行を取る。 */
  .abt-links__desc br {
    display: none;
  }
}


/* ============================================================
   1023px 以下（SP カンプ無し・当方設計）
   ============================================================ */
@media (max-width: 1023px) {
  /* 仕組みの3枚は縦1列にする。3列のままだと図の枠が 190px を割り、
     図の中のラベル（カンプ14px）が 11px 相当まで小さくなって読めなくなるため。
     WEB版イヤホンガイドの flow（_wgd/30_flow.css 121行）と同じ落とし方。 */
  .abt-mechanism__list {
    grid-template-columns: 1fr;
    max-width: 34rem; /* 固定: 縦1列でもカードが横に伸びきらないようにする上限 */
    /* 矢印を下に置くので、カード間を矢印1個分（24px）＋上下の余白まで広げる */
    --abt-step-gap: clamp(4rem, 5.86vw, 6rem);
  }
  /* 下向きの矢印。common.css の .ar--down は transform: rotate(90deg) を持ち
     ここの translate と上書きし合うため、common.css 772行の注記どおり
     translate と rotate を1つの transform にまとめてこちらで持つ。 */
  .abt-step__arrow {
    top: 100%;
    left: 50%;
    margin-top: calc(var(--abt-step-gap) / 2);
    margin-left: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* 769px 付近で3列のカードが 1枚 231px になり、本文の最長行（17文字・13px で 232px）が
     1文字だけ折り返す。カード間を詰めて1行に収める（カード 234px）。 */
  .abt-reason__list {
    gap: clamp(1.2rem, 1.7vw, 2.45rem);
  }

  /* 誘導カードは4列だと1枚 229px を割り、説明文（最長 18文字）が3行に折れて
     カードの高さが不ぞろいに見えるため2列にする。 */
  .abt-links__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CONTACT は2カラムのままだと右カラムが 596px を下回り、ボタンの中の文字
     （最長 21文字）と左右のアイコン・矢印が競うため縦積みにする。 */
  .abt-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }
  .abt-contact__intro,
  .abt-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem; /* カンプのボタン幅 600px に左右をそろえる */
    margin-inline: auto;
  }
}


/* ============================================================
   768px 以下（SP カンプ無し・当方設計／PC の構造を1カラムへ落とす）
   ============================================================ */
@media (max-width: 768px) {
  /* メダル2つは横並びのままだと1つ 130px 以下になり、中の「国内シェア」が
     11px 相当まで小さくなるため縦積みにする。 */
  .abt-achieve__badges {
    flex-direction: column;
    align-items: center;
    gap: clamp(2.4rem, 4.17vw, 4rem);
  }
  .abt-achieve__badge {
    flex: 0 0 auto;
    width: 100%;
    max-width: 24rem; /* 固定: 縦積みでメダルが大きくなりすぎないようにする上限 */
  }

  /* 選ばれている理由の3枚も縦1列にする。3列のままだと1枚 230px を割り、
     本文（最長 17文字）が折り返してカードの高さがそろわなくなるため。 */
  .abt-reason__list {
    grid-template-columns: 1fr;
    max-width: 34rem; /* 固定: 縦1列でもカードが横に伸びきらないようにする上限 */
    margin-inline: auto;
  }

  /* 誘導カードは2列だと1枚 160px 前後になり、説明文が5行に折れるため1列にする。 */
  .abt-links__list {
    grid-template-columns: 1fr;
    max-width: 40rem; /* 固定: 1列でもカードが横に伸びきらないようにする上限 */
    margin-inline: auto;
  }

  /* 「お困りの方は〜」とボタンは横に並べると 700px 必要なので縦積みにする。 */
  .abt-links__support {
    flex-direction: column;
    gap: 2.4rem;
  }
  .abt-links__support-txt {
    text-align: center;
  }

  .abt-contact {
    padding-block: 6rem; /* top.css 2320行 */
  }
  .abt-contact__inner {
    gap: 4rem; /* top.css 2326行 */
  }
  .abt-contact__btn {
    height: auto; /* top.css 2350行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem;
  }
  .abt-contact__btn-icon {
    left: 1.6rem; /* top.css 2356行 */
    width: 5.6rem;
    height: 5.6rem;
  }
  /* 1行に収める（top.css 2361行と同じ理由）。最長の「お問い合わせ・見積相談」は
     19px だと 219px 必要で入る幅が 203px しかなく折り返していた。17px なら 196px で収まる。 */
  .abt-contact__btn-main {
    font-size: 1.7rem;
  }
  .abt-contact__btn-sub {
    font-size: 1.3rem; /* top.css 2367行 */
    line-height: 1.4;
  }
  .abt-contact__btn .ar {
    right: 1.2rem; /* top.css 2373行 */
  }
}


/* ============================================================
   9. FV（ファーストビュー・2026-09-05 追加）

   Figma  : PC 1120:6128（1440×725）／ SP 1120:6182（375×500）
            複製 gJAi4WHiKVwmNuPPPvSUY5（原本 FIl3AaVugUJ1IVQUjrTtM5）
   カンプ : figma-dump/screenshots/about_fv_20260905/fv_pc.png ／ fv_sp.png
   HTML   : template-parts/under/about/fv.php

   ページの最上部に入るが、既存の 1〜8 節と @media を混ぜないため末尾へ追記している
   （WEB版イヤホンガイドの assets/css/_wgd/05_fv.css と同じ持ち方）。

   【切替】769px 以上は PC カンプ（1440 基準・実測px ÷ 14.4 = vw）、
     768px 以下は SP カンプ（375 基準・実測px ÷ 3.75 = vw）。
     タブレット帯（769〜1199）は PC の構図のまま比例縮小する。

   【1440px を超えたとき】送信機・イラスト・文字は「中央に置いた 1440px のカンプ」の
     位置で止める。max(◯vw, calc(50% - 72rem + ◯rem)) は、1440px までは vw で比例、
     1440px を超えたら中央そろえの座標に切り替わる書き方（1440px でちょうど一致する）。
     背景の2枚（右上の線画・左下の波）だけは画面の端に付けたままにする。カンプの時点で
     枠に切られている絵なので、中央へ寄せると切り口が画面の途中に縦線となって見えるため。

   【縦の構造】stage（背景・PC 640 / SP 430）の下端に CTA 帯が重なり、
     PC は 86px、SP は 60px 下へはみ出して FV 全体が PC 726 / SP 490 になる。
     帯は stage の外に置き、負の margin-top で引き上げる（stage の overflow: hidden に
     帯の影を切られないため）。
   ============================================================ */

.abt-fv {
  position: relative;
  max-width: 192rem; /* 1920px。これ以上は横に伸ばさない（他ページの FV と同じ扱い） */
  margin-inline: auto;
  /* 右上の線画がカンプの時点で枠をわずかに越えるため、横スクロールを出さない。
     hidden にすると CTA 帯の影が縦にも切られるので clip を使う。 */
  overflow-x: clip;
}

.abt-fv__stage {
  position: relative;
  overflow: hidden;
  min-height: min(44.4444vw, 64rem); /* カンプ 640px */
  background: #FFFFFF;
}

/* --- 右上の街並みの線画（カンプ Frame 5013・842×420 の枠で切り取る） --------- */
.abt-fv__scene {
  position: absolute;
  top: 0;
  /* カンプでは右端ぴったり（598 + 842 = 1440）。1440px を超えても右端に付けたままにする。
     中央そろえにすると、枠で切った線画の右端が画面の途中に縦線となって出てしまう。 */
  right: 0;
  width: min(58.4722vw, 84.2rem);  /* 842px */
  height: min(29.1667vw, 42rem);   /* 420px */
  overflow: hidden;
}

/* 枠より大きい絵を左上へずらして置く（カンプ相対 x−26,y−123,968×543・不透明度47%）。
   絵自体はさらに右づめの切り抜き（object-position）で、カンプと同じ範囲が出る。
   🚨 max-width: none が要る。common.css の img{max-width:100%} が効くと枠まで縮む。 */
.abt-fv__scene-img {
  position: absolute;
  top: max(-8.5417vw, -12.3rem);  /* −123px */
  left: max(-1.8056vw, -2.6rem);  /* −26px */
  width: min(67.2222vw, 96.8rem); /* 968px */
  height: min(37.7083vw, 54.3rem); /* 543px */
  max-width: none;
  object-fit: cover;
  object-position: 100% 0;
  opacity: .47;
}

/* 線画の中ほどを白く飛ばすぼかし（カンプ Ellipse 51・白 55%・ぼかし 27）。
   書き出した SVG がぼかしごと持っているので、位置と大きさだけ当てる。
   カンプ相対 x202,y82,550×371（ぼかしのにじみを含んだ実寸）。 */
.abt-fv__scene-fade {
  position: absolute;
  top: min(5.6944vw, 8.2rem);    /* 82px */
  left: min(14.0278vw, 20.2rem); /* 202px */
  width: min(38.1944vw, 55rem);  /* 550px */
  height: auto;
  max-width: none;
}

/* --- 背景のグラデーション（カンプ Rectangle 240・1440×640） ------------------
   カンプでは線画の上に重なり、右上が透明なので線画が透ける。
   角度・位置は Figma の gradientHandlePositions を枠の実寸に掛けた実測値。 */
.abt-fv__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(239.6237deg, rgba(255, 255, 255, 0) 19.785%, #FFEDED 64.728%);
}

/* --- 左下の赤い波（カンプ deco・807×416 を −1.78 度） ----------------------- */
.abt-fv__deco {
  position: absolute;
  top: min(12.7396vw, 18.345rem);  /* 傾ける前の位置 183.45px（カンプの枠 171 + 中央そろえ分 12.45） */
  /* −8.73px。線画と同じ理由で、1440px を超えても左端に付けたままにする
     （中央そろえにすると波の切り口が画面の途中に出る）。 */
  left: max(-0.6063vw, -0.873rem);
  width: min(56.0705vw, 80.7415rem); /* 807.415px */
  height: auto;
  max-width: none;
  transform: rotate(-1.78deg);
}

/* --- 白いぼかし（カンプではイラストと送信機の後ろに同じ大きさの白い矩形を敷く） ---
   書き出すと真っ白な矩形の画像になるだけなので、画像を置かず CSS で作る。 */
.abt-fv__haze {
  position: absolute;
  display: block;
  background: #FFFFFF;
}
.abt-fv__haze--device {
  top: min(9.8611vw, 14.2rem);   /* 142px */
  left: max(35.2778vw, calc(50% - 72rem + 50.8rem)); /* 508px */
  width: min(12.0833vw, 17.4rem); /* 174px */
  height: min(21.5278vw, 31rem);  /* 310px */
  filter: blur(2.5px); /* 固定: ぼかし量はカンプの実測値。縮小時も柔らかさを保つため可変にしない */
  opacity: .44;
}
.abt-fv__haze--illust {
  top: min(7.7778vw, 11.2rem);   /* 112px */
  left: max(53.3333vw, calc(50% - 72rem + 76.8rem)); /* 768px */
  width: min(40vw, 57.6rem);     /* 576px */
  height: min(26.6667vw, 38.4rem); /* 384px */
  filter: blur(4.5px); /* 固定: 同上 */
  opacity: .2;
}

/* --- 送信機2台（カンプ相対 x505,y139,174×310） ------------------------------ */
.abt-fv__device {
  position: absolute;
  top: min(9.6528vw, 13.9rem);   /* 139px */
  left: max(35.0694vw, calc(50% - 72rem + 50.5rem)); /* 505px */
  width: min(12.0833vw, 17.4rem); /* 174px */
  height: auto;
  max-width: none;
}

/* --- ガイドと参加者のイラスト（カンプ相対 x768,y112,576×384） --------------- */
.abt-fv__illust {
  position: absolute;
  top: min(7.7778vw, 11.2rem);   /* 112px */
  left: max(53.3333vw, calc(50% - 72rem + 76.8rem)); /* 768px */
  width: min(40vw, 57.6rem);     /* 576px */
  height: auto;
  max-width: none;
}

/* --- 見出し・リード・実績の円 ---------------------------------------------- */
/* 内容枠は他セクションと同じ .abt-inner（1440px で内容 1200px＝カンプと同じ）。 */
.abt-fv__inner {
  position: relative;
  z-index: 2; /* 線画・波・イラストより前 */
  padding-top: min(4.9306vw, 7.1rem); /* 見出し上端 y71 */
}

/* 見出し 50px / lh70 / wght700 / cta_gr のグラデーション文字。
   グラデの端をカンプ（文字幅 469px の中で #DA3106→#B80003）に合わせるため幅を文字なりにする。
   background-clip が効かない環境では単色 #B80003 で出る。 */
.abt-fv__title {
  width: -moz-fit-content;
  width: fit-content;
  color: var(--color_main);
  font-size: clamp(3.2rem, 3.4722vw, 5rem); /* SP 32px → PC 50px */
  font-weight: 700;
  line-height: 1.4; /* 70 / 50 */
  letter-spacing: .05em; /* カンプ tracking 2.5px */
  background: var(--gradient);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* リード 28px / lh39.2 / 2行。カンプ相対 y151（見出し下端 141 の 10px 下）。 */
.abt-fv__sub {
  margin-top: min(0.6944vw, 1rem); /* 10px */
  color: var(--color_dark);
  font-size: clamp(1.6rem, 1.9444vw, 2.8rem); /* SP 16px → PC 28px */
  font-weight: 700;
  line-height: 1.4; /* 39.2 / 28 */
  letter-spacing: .05em;
}

/* 実績の円2つ。カンプ相対 y263・165×165・間 20px（x120 と x305）。 */
.abt-fv__badges {
  display: flex;
  gap: min(1.3889vw, 2rem);        /* 20px */
  margin-top: min(2.3611vw, 3.4rem); /* リード下端 229 → 円の上端 263 */
}

/* 中の文字と「No.1」は円の幅に対する比（cqw・%）で持つので、円が縮んでも配置が崩れない。
   cqw を解釈しない古いブラウザ向けに、直前の行に rem の値を置いてある（実績帯と同じ考え方）。 */
.abt-fv__badge {
  container-type: inline-size;
  position: relative;
  width: min(11.4583vw, 16.5rem);  /* 165px */
  height: min(11.4583vw, 16.5rem);
}
/* 白丸と赤い輪。🚨 枠線を .abt-fv__badge 自身に持たせない。
   container-type が測るのは枠線の内側なので、枠線を持たせると中の文字の基準が
   165px ではなく 161px になり、文字がカンプより 2.4% 小さく出る（実測で確認）。 */
.abt-fv__badge::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--color_main); /* カンプ stroke 2.2px INSIDE。細線なので固定 */
  border-radius: 50%;
  background: #FFFFFF;
}

.abt-fv__badge-sub,
.abt-fv__badge-main {
  position: absolute;
  right: 0;
  left: 0;
  color: var(--color_dark);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .05em;
  text-align: center;
}
/* 「旅行関連市場」「国内外」17.553px（カンプ y289.92） */
.abt-fv__badge-sub {
  top: 16.32%;  /* (289.92 − 263) / 165 */
  font-size: 1.7rem;
  font-size: 10.638cqw; /* 17.553 / 165 */
}
/* 「国内シェア」「年間利用台数」23.404px（1行目の下） */
.abt-fv__badge-main {
  top: 29.08%;  /* (310.98 − 263) / 165 */
  font-size: 2.3rem;
  font-size: 14.184cqw; /* 23.404 / 165 */
}

/* 「No.1」の飾り文字（カンプ相対 x153.35,y344.91,98.81×51.45） */
.abt-fv__badge-no1 {
  position: absolute;
  top: 49.64%;  /* (344.91 − 263) / 165 */
  left: 20.21%; /* (153.35 − 120) / 165 */
  width: 59.88%; /* 98.81 / 165 */
  height: auto;
}

/* 「70万台」。カンプは 70（70.213px）と 万台（21.064px）の2つの文字で、
   下端が 12.5px ずれている。
   🚨 中央そろえにしない。カンプの「70」は字間を −0.05em 詰めており、Figma は最後の1字の
   あとの詰めを幅に数えないが CSS は数えるため、中央そろえにすると「70」と「万」が
   カンプより 2px 近づいて字がくっついて見える（2026-09-05 CEO 指摘）。
   カンプの左端（円の左から 29.25px）に置き、万台は em で送り量を持たせる。 */
.abt-fv__count {
  position: absolute;
  top: 43.26%;  /* (334.38 − 263) / 165 */
  left: 17.73%; /* (334.25 − 305) / 165 */
  display: flex;
  align-items: flex-end;
}
/* 書体は Roboto Condensed（--font_eng_cond）。実績帯の「70」と同じ扱い。 */
.abt-fv__count-num {
  color: var(--color_main);
  font-family: var(--font_eng_cond);
  font-size: 4.2rem;
  font-size: 42.553cqw; /* 70.213 / 165 */
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.05em; /* カンプ tracking −3.5106px */
}
.abt-fv__count-unit {
  margin-bottom: .593em; /* 12.5 / 21.064。70 の下端より上に置く */
  margin-left: .075em;   /* カンプの万台の左端 399.79px に合わせる送り量 */
  color: var(--color_main);
  font-size: 1.3rem;
  font-size: 12.766cqw; /* 21.064 / 165 */
  font-weight: 900;
  line-height: 1.1;
}

/* --- CTA 帯（カンプ相対 y516・1200×210） ----------------------------------- */
.abt-fv__cta {
  position: relative;
  z-index: 3; /* 影を stage の上に出す */
  /* 🚨 負の値なので max()。min() だと 1440px を超えたときに引き上げ量が増え続け、
     FV の高さがカンプの 726px より縮んでしまう。 */
  margin-top: max(-8.6111vw, -12.4rem); /* −124px */
}

.abt-fv__cta-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(14.5833vw, 21rem); /* 210px */
  padding-block: min(3.1250vw, 4.5rem); /* カンプ pad 上下45 */
  background: var(--gradient); /* Figma cta_gr */
}

/* 白ボタン 600×120・影 0 10 30 #860D08@0.3（CONTACT 帯のボタンと同値）。 */
.abt-fv__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(41.6667vw, 60rem);     /* 600px */
  min-height: min(8.3333vw, 12rem); /* 120px */
  /* 左右とも 104px にすると、文字の中心がボタンの中心（カンプ 300px）に来て、かつ
     左のアイコン（左40＋64）と右の矢印（右20＋24）に文字が重ならない。 */
  padding-inline: min(7.2222vw, 10.4rem);
  background: #FFFFFF;
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3);
  color: var(--color_main);
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
}
/* hover は同ページの CONTACT 帯（.abt-contact__btn--inquiry）と同じ内側 2px の赤枠。 */
.abt-fv__btn:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
}

/* メールアイコン 64×64。カンプ相対でボタン左端から 40px。 */
.abt-fv__btn-icon {
  position: absolute;
  top: 50%;
  left: min(2.7778vw, 4rem);
  width: min(4.4444vw, 6.4rem);
  height: auto;
  transform: translateY(-50%);
}

.abt-fv__btn-txt {
  display: flex;
  flex-direction: column;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .05em;
}

/* 🚨 カンプは1つのテキストだが、行ごとに大きさが違う（PC 1行目 20px ／ 2行目 24px。
   SP は 14px ／ 18px）。1行目を 24px で組むとアイコンと矢印に文字がぶつかる。 */
.abt-fv__btn-lead {
  font-size: clamp(1.6rem, 1.3889vw, 2rem); /* カンプ 20px */
}
.abt-fv__btn-main {
  font-size: clamp(1.8rem, 1.6667vw, 2.4rem); /* カンプ 24px */
}

/* 右の矢印 24×24。common.css の .ar をそのまま使い、位置だけ決める。 */
.abt-fv__btn .ar {
  position: absolute;
  top: 50%;
  right: min(1.3889vw, 2rem); /* 20px */
  transform: translateY(-50%);
}


/* --- 1199px 以下：ボタンだけ帯の内側いっぱいまで広げる ----------------------
   カンプのボタンは 600px（帯 1200px の半分）だが、文字サイズが clamp の下限で
   止まる一方ボタンは vw で縮み続けるため、900px を下回るとアイコン・矢印と
   文言がぶつかる。WEB版イヤホンガイドの FV と同じ対処。1200px 以上は変わらない。 */
@media (max-width: 1199px) {
  .abt-fv__btn {
    width: 100%;
    max-width: 60rem; /* カンプのボタン幅 600px */
  }
}


/* ==========================================================================
   SP（768px 以下）— カンプ 1120:6182（375×500）。実測px ÷ 3.75 = vw。

   🚨 vw をそのまま使うと 768px で 375 のカンプが2倍に伸び、FV だけで
   1000px を超える高さになる。そこで全ての値を「480px 相当」で頭打ちにし
   （min()/max() の第2引数＝実測px × 480 ÷ 375 ÷ 10 rem）、内容の枠も
   .abt-fv__inner で 480px に留めて中央に置く。375px では従来どおり
   カンプの実測値がそのまま出る（頭打ちが効き始めるのは 480px から）。

   🚨 480px を超える帯（〜768px）では、文字と円は 480px の枠に入れて中央へ寄せる。
   絵（線画・イラスト・送信機）も同じ枠に合わせないと、絵だけ画面左に張り付いて円と重なる。
   そこで横位置は「カンプ 375px の中心 187.5 からの差 × 1目盛り」で置く。
   1目盛り --sp-fv-u は 375px で 1px・480px 以上で 1.28px（＝ここで頭打ち）。
   これで 375px ではカンプの実測値がそのまま出て、広がっても絵と文字の関係が崩れない。

   SP のカンプには赤い波（deco）と線画のぼかし（fade）が無いので出さない。
   背景のグラデーションは PC と逆で、線画より下に敷く（不透明な白→ピンク）。
   ========================================================================== */
@media (max-width: 768px) {

  .abt-fv {
    --sp-fv-u: min(0.2667vw, 0.128rem); /* 横位置の1目盛り。375px で 1px・480px 以上は 1.28px で頭打ち */
  }

  .abt-fv__stage {
    min-height: min(114.6667vw, 55.04rem); /* 430px */
    background: linear-gradient(254.5189deg, #FFFFFF 0%, #FFEDED 57.325%); /* 枠 375×430 での実測角度 */
  }

  /* SP は背景を stage 側に持たせ、線画をその上に重ねる（カンプの重ね順どおり）。 */
  .abt-fv__wash,
  .abt-fv__scene-fade,
  .abt-fv__deco {
    display: none;
  }

  /* カンプ相対 x−5,y24,386×216。切り抜き方（右づめ）は PC と同じ。 */
  .abt-fv__scene {
    top: min(6.4vw, 3.07rem);        /* 24px */
    right: auto;
    left: calc(50% - 192.5 * var(--sp-fv-u)); /* カンプ x−5（375px 幅の中心 187.5 からの差で置く） */
    width: min(102.9333vw, 49.41rem); /* 386px */
    height: min(57.6vw, 27.65rem);    /* 216px */
  }
  .abt-fv__scene-img {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .32;
  }

  /* カンプ相対 x243,y195,97×173（白いぼかしは 1.7px ずらして敷く）。 */
  .abt-fv__device {
    top: min(52vw, 24.96rem);        /* 195px */
    left: calc(50% + 55.5 * var(--sp-fv-u)); /* カンプ x243 */
    width: min(25.9037vw, 12.434rem); /* 97.139px */
  }
  .abt-fv__haze--device {
    top: min(52.4267vw, 25.165rem);  /* 196.6px */
    left: calc(50% + 57.22 * var(--sp-fv-u)); /* カンプ x244.72 */
    width: min(25.9037vw, 12.434rem);
    height: min(46.1907vw, 22.172rem); /* 173.215px */
    filter: blur(1.548px);
  }

  /* カンプ相対 x111,y132,171×114。 */
  .abt-fv__illust,
  .abt-fv__haze--illust {
    top: min(35.2vw, 16.896rem);      /* 132px */
    left: calc(50% - 76.5 * var(--sp-fv-u)); /* カンプ x111 */
    width: min(45.6vw, 21.888rem);    /* 171px */
  }
  .abt-fv__haze--illust {
    height: min(30.4vw, 14.592rem);   /* 114px */
    filter: blur(2px);
  }

  /* 内容は 480px までで頭打ちにして中央へ（左右の余白は .abt-inner の 20px のまま）。 */
  .abt-fv__inner {
    max-width: 52rem; /* 480 + 左右20×2 */
    margin-inline: auto;
    padding-top: min(8vw, 3.84rem); /* 見出し上端 y30 */
  }

  /* 🚨 SP の文字は clamp の下限（＝PC 用の固定値）ではなく画面幅なりに縮める。
     固定にすると 320px で見出し・ボタン文言が折り返してカンプの行数と変わる。 */
  .abt-fv__title {
    width: 100%;
    font-size: min(8.5333vw, 4.096rem); /* 375px で 32px */
    text-align: center;
    white-space: nowrap; /* カンプは1行。文字が画面幅なりに縮むのでどの幅でも収まる */
  }

  .abt-fv__sub {
    margin-top: min(1.12vw, 0.538rem); /* 見出し下端 74.8 → リード上端 79 */
    font-size: min(4.2667vw, 2.048rem); /* 375px で 16px */
    text-align: center;
  }

  /* カンプ相対 x22,y254.78・円 102.171・間 8.39px。 */
  .abt-fv__badges {
    gap: min(2.2373vw, 1.074rem);      /* 8.39px */
    margin-top: min(34.928vw, 16.765rem); /* リード下端 123.8 → 円の上端 254.78 */
    margin-left: min(0.5333vw, 0.256rem); /* カンプの円の左端 x22（.abt-inner の左余白 20px との差） */
  }
  .abt-fv__badge {
    width: min(27.2456vw, 13.078rem);  /* 102.171px */
    height: min(27.2456vw, 13.078rem);
  }

  /* カンプ相対 y380・帯 355×110。stage（430）へ 50px 重ね、60px 下へはみ出す。 */
  .abt-fv__cta {
    margin-top: max(-13.3333vw, -6.4rem); /* −50px */
  }
  /* 帯だけは内容枠より外へ広い（カンプ x10・幅355）。 */
  .abt-fv__cta .abt-inner {
    max-width: 50rem; /* 480 + 左右10×2 */
    margin-inline: auto;
    padding-inline: min(2.6667vw, 1rem); /* 10px */
  }
  .abt-fv__cta-band {
    min-height: min(29.3333vw, 14.08rem); /* 110px */
    padding: min(5.3333vw, 2.56rem);      /* カンプ pad 20px */
  }

  /* カンプ相対 x30,y400,315×70。文字は中央そろえ（カンプ実測でも枠の中央）。 */
  .abt-fv__btn {
    width: 100%;
    min-height: min(18.6667vw, 8.96rem); /* 70px */
    padding-inline: min(12vw, 5.76rem);  /* 45px。アイコン（左12＋31）と矢印（右15＋18）を避ける */
  }
  .abt-fv__btn-icon {
    left: min(3.2vw, 1.536rem);      /* 12px */
    width: min(8.2667vw, 3.968rem);  /* 31px */
  }
  .abt-fv__btn-lead {
    font-size: min(3.7333vw, 1.792rem); /* カンプ 14px */
  }
  .abt-fv__btn-main {
    font-size: min(4.8vw, 2.304rem);    /* カンプ 18px */
  }
  .abt-fv__btn .ar {
    right: min(4vw, 1.92rem);        /* 15px */
    width: min(4.8vw, 2.304rem);     /* 18px */
    height: min(4.8vw, 2.304rem);
    background-size: contain;
  }
}