@charset "UTF-8";
/* =============================================================================
 * faq.css — サポート・FAQ（固定ページ・スラッグ faq）
 *
 * 🚨【正本のカンプはここ】2026-08-27 時点の最新は複製ファイル 1xQ18nCLrxwDBrfpr2whhx。
 *   ページ全体   under 759:3908（1440×5025）
 *   ダンプ       figma-dump/file_dupe_faq_20260827.json
 *   inspect      figma-dump/inspect/faq_20260827/faq_full.txt（ページ全体・上から順）
 *                同 faq_section.txt ／ cat_*.txt（FAQ セクションの中）
 *   カンプ       figma-dump/screenshots/faq_20260827/*.png（等倍 1440px）
 *   旧 figma-dump/inspect/under/faq.txt は 2026-08-13 時点のもの。**参照しない**
 *   （この古い方だけを見ていたため 2026-08-17 のデザイン変更を取りこぼした）。
 *
 * この版で変わったところ（2026-08-17 のデザイン変更ぶんを 2026-08-27 に反映）
 *   3. ページの目次 … 旧 page_link（罫線で仕切った文字の並び）→ 新 wrap 885:5692
 *                     （灰帯＋見出し「ページの目次」＋白いボタン3つ）。全面書き直し
 *   5. お問い合わせカード … 見出しが「お問い合わせ」1行 →「サポート窓口に／問い合わせ」2行
 *   6. FAQ（924:5694・2026-08-27 櫂作様ご依頼）
 *     書き直し … .faq-cat__list（4列→5列）／.faq-cat__btn（横並び→縦積み・矢印は下部中央）
 *     新設     … [hidden] のガード／.faq-more・.faq-more__btn・.faq-more__ar
 *                （もっと見る／閉じる）／.faq-list__em（赤字強調）／.faq-list__a-link
 *                （回答の中のリンク）／回答の中の表
 *     流用     … Q&A カード・カテゴリー見出し・キーワード検索の枠（実測が改訂前と同値）
 *   7. キーワード検索の結果表示（2026-08-28 実装）
 *     新設     … .faq-search__result（件数と0件の知らせ・カンプに無い要素）／
 *                .faq-more[hidden] のガード（検索中は件数制限ごと外すため）
 * HTML   page-faq.php ／ template-parts/under/faq/*.php
 * 読込   functions.php 104〜119行（スラッグ faq の固定ページだけで読む）
 *
 * 【約束ごと】
 *   1rem = 10px（common.css の html{font-size:62.5%}）。
 *   リキッド式は 1440px カンプ基準で「実測px ÷ 14.4 ＝ vw」。
 *   clamp の下限は SP のカンプが無いため当方設計（目安は上限の6〜7割・本文は 1.4rem 以上）。
 *   固定 px / 固定 rem は次の3つだけで、その場に理由を1行書く。
 *     (1) コンテナの max-width  (2) 1px・2px・4px の罫線と 5px 以下の角丸
 *     (3) 固定でないと整わないもの（共通クラスの矢印など）
 *   ブレイクポイントは max-width の単独指定。基本 1199 →（崩れる所だけ）1023 → SP 768。
 *   色・書体は common.css の CSS 変数だけを使う。本ページで足した変数は無い
 *   （カンプに出る色は #B80003 / #111111 / #FFFFFF / #F6F6F6 / #EAEAEA / #FFEDED /
 *     #717171 / #D2D2D2 / #7C0002 で、すべて既存の変数にある）。
 *   例外は1つだけ。2026-08-27 改訂で入った回答内の表の1列目の文字色 #333333
 *   （Figma style text_black）は common.css の変数に無く、common.css を触らない
 *   取り決めのため、その場に直に書いている（該当は1か所）。
 *
 * 【流用している既存クラス（再定義しない）】
 *   .page-title / .bread / .heading-01 / .sub-head / .btn / .ar / .ar--white /
 *   .ar--2-down / .ar--2-white
 *
 * 【並び】1 共通枠 → 2 リード文 → 3 ページの目次 → 4 困ったときは →
 *        5 お問い合わせカード（2箇所共通） → 6 FAQ → 7 お問い合わせ・サポート情報 →
 *        8 CONTACT 帯 → 9 ブレイクポイント
 * ========================================================================== */


/* =============================================================================
 * 1. 共通枠
 * ========================================================================== */

/* common.css の .section__inner は max-width 1200 の内側に左右 padding を持つため、
   1440px 表示のとき内容幅が 1121px になり、本ページのカンプの内容幅 1200px と合わない。
   .bread / .footer__inner と同じ「1200 の内容＋外側に左右余白」方式にする。
   （WEB版イヤホンガイドの .wgd-inner と同じ式・クラス名だけ本ページの接頭辞にした） */
.faq-inner {
  max-width: calc(var(--sectionWidth) + 8rem); /* 1200 + 80 = 1280 */
  margin-inline: auto;
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* 1440px で 39.6px ≒ カンプの左右余白 40px */
}

/* ページ内リンクの飛び先。ヘッダーが position:fixed（common.css 156行）のため、
   その高さぶん手前で止める。--header_height は PC 8rem / SP 8.8rem。 */
.faq-trouble,
.faq-faq,
.faq-support {
  scroll-margin-top: var(--header_height);
}


/* =============================================================================
 * 2. リード文（Figma contents_inner 759:3912 [0,382,1440,460]・下 pad20）
 * カンプは上の余白ゼロ（.bread の下 padding 40px）。下の 20px は 3. の .faq-nav が持つ。
 * ========================================================================== */
.faq-lead__text {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.8; /* Figma lh 28.8 / 16px */
  letter-spacing: .05em;
  text-align: center;
}


/* =============================================================================
 * 3. ページの目次（Figma wrap 885:5692 [0,460,1440,591]）
 * 2026-08-17 のデザイン変更で、旧 page_link（罫線で仕切った文字の並び）から
 * 「灰帯＋見出し＋白いボタン3つ」に変わった。実測は次のとおり。
 *   灰帯 wrap  … 画面幅いっぱい 1440×131・#F6F6F6・pad(20,0,30,0)・gap10
 *   見出し     … 「ページの目次」16px / 500 / lh28.8 / 中央
 *   page_navi  … 横並び・中央寄せ・ボタン間 20px
 *   btn6       … 200×42・白地・影 DROP_SHADOW(0,5 r=20 #591E1B@0.1)
 *                 pad(16,30,16,16)・文字 14px / 500 / 中央・矢印 ar_2 は
 *                 ABSOLUTE 配置でボタン右端から 8px・上下中央
 * 同じ部品が製品一覧にもあるため、数値・組み方は product.css の .plt-pagelink
 * （64〜121行）にそろえてある。相違は項目数（2→3）と、3つ目が2行になることだけ。
 * ========================================================================== */
/* 灰帯の上の 20px の白はリード文側の下 padding（Figma contents_inner pad 下20）。 */
.faq-nav {
  padding-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma contents_inner pad 下20 */
}

/* 灰色の帯はカンプでも 1440px いっぱい（内容枠より外へ出る）ので、幅を絞らない */
.faq-nav__band {
  padding-block: clamp(1.6rem, 1.39vw, 2rem) clamp(2rem, 2.08vw, 3rem); /* Figma pad 上20 / 下30 */
  background: var(--color_light); /* Figma #F6F6F6 */
}

.faq-nav__title {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.8; /* Figma lh 28.8 / 16px */
  letter-spacing: .05em;
  text-align: center;
}

.faq-nav__list {
  display: flex;
  flex-wrap: wrap; /* 幅が足りない時だけ折り返す */
  justify-content: center;
  gap: clamp(1.2rem, 1.39vw, 2rem); /* Figma page_navi gap 20 */
  margin-top: clamp(.8rem, .69vw, 1rem); /* Figma 見出しとの間 10px */
}

/* ボタンは図形なので padding 任せにせず幅を明示する（product.css .plt-pagelink__btn と同じ）。
   高さは min-height で持つ。3つ目は2行になるが 2行×lh1.1 ＝ 30.8px で 42px に収まり、
   カンプ（枠は 42px 固定・文字は上下中央）と同じ見え方になる。 */
.faq-nav__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(16rem, 13.89vw, 20rem); /* Figma 200px */
  min-height: clamp(3.6rem, 2.92vw, 4.2rem); /* Figma 42px */
  /* 右 30px は矢印の逃げ。下限は矢印（右8px＋幅16px＝24px）と文字がぶつからない 28px に置く */
  padding-inline: clamp(1.2rem, 1.11vw, 1.6rem) clamp(2.8rem, 2.08vw, 3rem); /* Figma 左16 / 右30 */
  background: #fff;
  box-shadow: 0 5px 20px rgba(89, 30, 27, .1); /* Figma DROP_SHADOW(0,5 r=20 #591E1B@0.1) */
  color: var(--color_dark);
  font-size: 1.4rem; /* Figma 14px。本文の最小サイズのため可変にしない */
  font-weight: 500;
  /* Figma は1行のボタンが lh19.6、2行のボタンが lh15.4。1行は枠の中で上下中央に置くので
     どちらでも見え方は変わらない。2行の側に合わせて 1.1（15.4 / 14）にそろえる */
  line-height: 1.1;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
}

.faq-nav__btn:hover {
  opacity: .65; /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
}

/* 下向き矢印は common.css の .ar--2-down（16×16・右向きを90度回転）。
   common.css 796行の注記どおり、translate と rotate は1つの transform にまとめる。 */
.faq-nav__btn .ar--2-down {
  position: absolute;
  top: 50%;
  right: .8rem; /* Figma ボタン右端から 8px */
  transform: translateY(-50%) rotate(90deg);
}


/* =============================================================================
 * 4. 困ったときは（Figma contents_inner 759:3924 [0,591,1440,1794]・pad(80,0,100,0)）
 * ========================================================================== */
.faq-trouble {
  padding-top: clamp(5rem, 5.56vw, 8rem);      /* Figma pad 上80 */
  padding-bottom: clamp(6rem, 6.94vw, 10rem);  /* Figma pad 下100 */
  background: #fff;
}

/* --- 4枚のカード（Figma Frame 453・1200×346・4列 gap24） --------------------- */
.faq-trouble__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 1.67vw, 2.4rem); /* Figma gap 24 */
}

.faq-trouble__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: clamp(2rem, 2.08vw, 3rem);   /* Figma pad 上下30 */
  padding-inline: clamp(1.4rem, 1.39vw, 2rem); /* Figma pad 左右20 */
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1) */
}

/* 薄赤の丸ごと1枚の書き出し（faq_01〜04.svg・76×76）。丸を CSS で描かない */
.faq-trouble__icon {
  width: clamp(5.6rem, 5.28vw, 7.6rem); /* Figma 76×76 */
}

/* カンプはタイトル枠が2行ぶん（56px＝20px × 行高1.4 × 2行）で固定され、
   1行のカードは上下中央に置かれている（実測 card1「音が出ない場合」の墨 944〜962 ＝ 枠 924〜980 の中央）。
   min-height を em で持たせて文字サイズと一緒に伸縮させる。 */
.faq-trouble__title {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8em;
  margin-top: .5rem; /* Figma gap 5。5px は最小の隙間なので縮めない */
  color: var(--color_main);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* Figma 20px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 28 / 20px */
  letter-spacing: .05em;
  text-align: center;
}

.faq-trouble__text {
  width: 100%;
  margin-top: .5rem; /* Figma gap 5 */
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.5; /* Figma lh 24 / 16px */
  letter-spacing: .05em;
  text-align: justify; /* Figma align=JUSTIFIED */
}

/* --- 二重の下向き矢印（Figma Frame 454・1200×60） --------------------------- */
/* 素材 faq_05.svg は 1200×60 の画布の中央に 34×20 のシェブロンが描かれている。
   img で入れて幅を伸縮させるとシェブロンまで縮むため、背景画像として原寸で中央に置く。
   background-size を 120rem × 6rem に固定しているので、画面幅が変わってもシェブロンは
   カンプどおり 34×20 のまま中央に出る（高さ 6rem＝Figma の枠 60px と同じ）。 */
.faq-trouble__chevron {
  display: block;
  height: 6rem;
  background-image: url("../images/faq/faq_05.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 120rem 6rem;
}

.faq-trouble__lead {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.8; /* Figma lh 28.8 / 16px */
  letter-spacing: .05em;
  text-align: center;
}

/* --- 黒ボタン2本（Figma Frame 4851・btn は common.css 823行の .btn と同値） ---- */
.faq-trouble__btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.6rem, 2.08vw, 3rem); /* Figma gap 30 */
  padding-top: clamp(.8rem, .69vw, 1rem);      /* Figma pad 上10 */
  padding-bottom: clamp(3.4rem, 3.47vw, 5rem); /* Figma pad 下50 */
}

/* .btn は common.css 823行で幅 320px・折り返しなしの固定。折り返す横並びの中で
   縮むと中の文字がはみ出すので、縮ませない（本ページで .btn を使う2箇所に効かせる）。 */
.faq-trouble__btns .btn,
.faq-support__doc-row .btn {
  flex: 0 0 auto;
}

/* --- 灰枠の囲み（Figma Frame 458・1120×247・4px #EAEAEA） -------------------- */
.faq-trouble__box {
  max-width: 112rem; /* Figma 1120px。コンテナ幅なので固定 */
  margin-inline: auto;
  /* 4px は罫線。Figma は枠内ストロークなので上下 padding 50 から 4px を引いて 46 にする */
  padding-block: clamp(3rem, 3.19vw, 4.6rem);
  /* カンプの左右 padding は 0（中身が中央寄せの固定幅）。狭い画面で文字が枠に付かないよう
     左右にも余白を持たせている。1440px では中身の幅（920px）に届かないので見た目は変わらない */
  padding-inline: clamp(1.6rem, 2.08vw, 3rem);
  border: 4px solid var(--color_line);
  background: #fff;
}

.faq-trouble__box-title {
  color: var(--color_main);
  font-size: clamp(2rem, 1.88vw, 2.7rem); /* Figma 27px */
  font-weight: 700;
  line-height: 1; /* Figma lh 27 / 27px。1行で収まる幅のときはカンプどおり詰める */
  letter-spacing: .05em;
  text-align: center;
}

.faq-trouble__box-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: clamp(3rem, 5.69vw, 8.2rem); /* Figma Frame 456 gap 82 */
  row-gap: clamp(2rem, 2.08vw, 3rem);
  margin-top: clamp(2rem, 2.08vw, 3rem); /* Figma gap 30 */
}

.faq-trouble__box-text {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.6; /* Figma lh 25.6 / 16px */
  letter-spacing: .05em;
  text-align: center;
}


/* =============================================================================
 * 5. お問い合わせカード（Figma Frame 4853 / 4854・402×90）
 *   困ったときは [778,1554,1180,1644] ／ サポート情報 [329,3721,731,3811]
 * 「困ったときは」と「お問い合わせ・サポート情報」の2箇所に同じ部品が出る。
 * template-parts/under/faq/contact-card.php が両方から呼ばれる。
 * ========================================================================== */
/* 親が折り返す横並び（.faq-trouble__box-body / .faq-support__body）の中に入るので、
   width ではなく flex-basis で幅を持つ（width:100% にすると常に折り返してしまう）。 */
.faq-card-wrap {
  display: flex;
  flex: 0 1 40.2rem; /* Figma 402px。コンテナ幅なので固定 */
  flex-direction: column;
  align-items: center;
  gap: .5rem; /* Figma Frame 121 gap 5 */
  max-width: 40.2rem;
}

.faq-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(7rem, 6.25vw, 9rem); /* Figma 90px */
  /* 文字はカードの中央に置く決まりなので左右そろえる。アイコン（左30＋44＝74）が入る
     幅を確保しつつ、中の文字（150px）が入る幅（402 − 76×2 ＝ 250）も残る値にした */
  padding-inline: clamp(5.4rem, 5.28vw, 7.6rem);
  background: #fff;
  box-shadow: 0 0 20px rgba(0, 0, 0, .1); /* Figma DROP_SHADOW(0,0 r=20 #000000@0.1) */
  text-decoration: none;
  transition: var(--transition);
}

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

.faq-card__icon {
  position: absolute;
  top: 50%;
  left: clamp(1.6rem, 2.08vw, 3rem); /* Figma カード左端から30 */
  width: clamp(3.4rem, 3.06vw, 4.4rem); /* Figma 44×44 */
  transform: translateY(-50%);
}

.faq-card__txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* 行の間隔はカンプの行高だけで作る（隙間の指定を足さない）。
   カンプ 4倍書き出し（figma-dump/screenshots/faq_20260827/card_x4.png）を等倍に直した
   墨の位置は、カードの上端を0として
     サポート窓口に 15.5〜28.75 ／ 問い合わせ 31.25〜53.75 ／ フォームは… 60.75〜73.75。 */
.faq-card__title {
  color: var(--color_main);
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* Figma 24px */
  font-weight: 700;
  line-height: 1; /* Figma lh 24 / 24px */
  letter-spacing: .05em;
}

/* 見出し1行目。Figma では同じテキストの中で文字だけ小さくしてある
   （characterStyleOverrides 14px / lh14）。CSS ではブロックにして改行させる。 */
.faq-card__title-sm {
  display: block;
  font-size: clamp(1.2rem, .97vw, 1.4rem); /* Figma 14px */
  line-height: 1; /* Figma lh 14 / 14px */
}

/* カンプは「問い合わせ」の墨の下端と「フォームは…」の墨の上端が 7px 空く（4倍書き出し実測）。
   見出しの行高が 1（24px）のため CSS の行ボックスだけでは 2.75px しか空かない。差の 4px を足す。 */
.faq-card__sub {
  margin-top: .4rem;
  color: var(--color_dark);
  font-size: clamp(1.2rem, .97vw, 1.4rem); /* Figma 14px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 19.6 / 14px */
  letter-spacing: .05em;
}

/* カンプの矢印枠は 18×21 だが、共通クラス .ar は 24×24（common.css 738行）。
   矢印そのものの大きさはカンプとほぼ同じなので、枠の差ぶんだけ右の位置を寄せて
   矢印の中心がカンプと同じ位置（カード右端から41px）に来るようにしている。 */
.faq-card__ar {
  position: absolute;
  top: 50%;
  right: clamp(1.6rem, 2.01vw, 2.9rem);
  transform: translateY(-50%);
}

.faq-card__note {
  color: var(--color_dark);
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* Figma 13px */
  font-weight: 500;
  line-height: 1.2; /* Figma lh 15.6 / 13px */
  letter-spacing: .05em;
  text-align: center;
}


/* =============================================================================
 * 6. FAQ（Figma contents_inner 924:5694 [0,1794,1440,3373]・地色 #F6F6F6）
 * ========================================================================== */
.faq-faq {
  padding-top: clamp(5rem, 5.56vw, 8rem);      /* Figma pad 上80 */
  padding-bottom: clamp(6rem, 6.94vw, 10rem);  /* Figma pad 下100 */
  background: var(--color_light);
}

/* 🚨 表示・非表示は hidden 属性だけで切り替える（faq.js が付け外しする）。
   ブラウザ既定の [hidden]{display:none} は、あとから display を書いた指定に
   負けることがあるため、ここで明示しておく。
   ・.faq-panel[hidden]      … 選ばれていないカテゴリのひとかたまり
   ・.faq-list__item[hidden] … 10件を超えるカテゴリの11件目以降（もっと見るで開く）
   ・.faq-more[hidden]       … 検索中（10件の制限ごと外すのでボタン自体を出さない）
   ・.faq-search__result[hidden] … 検索していない時（件数も0件の知らせも出さない） */
.faq-panel[hidden],
.faq-list__item[hidden],
.faq-more[hidden],
.faq-search__result[hidden] {
  display: none;
}

/* --- カテゴリー検索の白いパネル（Figma Frame 461・1040×300） ----------------- */
.faq-cat {
  max-width: 104rem; /* Figma 1040px。コンテナ幅なので固定 */
  margin-inline: auto;
  padding: clamp(2rem, 2.08vw, 3rem); /* Figma pad 上下30・中身は左右とも30 内側から始まる */
  background: #fff;
}

.faq-cat__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(.8rem, .69vw, 1rem); /* カンプ実測：虫眼鏡の右端655 → 文字の左端666 */
}

.faq-cat__head-icon {
  width: clamp(2rem, 1.67vw, 2.4rem); /* 素材 faq_07.svg の原寸 24×25 */
  height: auto;
}

.faq-cat__head-text {
  color: var(--color_main);
  font-size: clamp(1.6rem, 1.39vw, 2rem); /* Figma 20px */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 28 / 20px */
  letter-spacing: .05em;
}

/* 9個のボタン（改訂カンプ Figma Frame 438・980×112・5列×2段 gap12。
   2段目は4個で左そろえ＝grid の自然な並びと同じ）。
   2026-08-27 改訂：カテゴリが8→9個に増え、カンプも4列から5列に組み替わった。 */
.faq-cat__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.8rem, .83vw, 1.2rem); /* Figma gap 12 */
  margin-top: 1rem; /* カンプ実測：見出しの下端326 → ボタン列の上端336 */
}

/* 改訂カンプは「文字の下に矢印」の縦積み（旧カンプは横並びで右に矢印）。
   Figma 186×50・外枠 pad 上12/下9・gap4・内側の文字枠 pad 左10/右16。
   ただし Figma の文字の箱は字面の 12px、CSS の行ボックスは 16px（font-size×
   line-height 1）で 4px 大きい。合計を 50px に合わせるため、上 padding を 12→10、
   gap を 4→2 に詰めてある（結果、文字の墨は上から 12px、矢印は上から 28px で
   カンプと同じ位置に来る）。左右の 10/16 は文字枠だけが持ち、矢印は枠の中央。 */
.faq-cat__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem; /* 上のコメントの詰め幅。2px は固定（5px 以下） */
  width: 100%;
  min-height: clamp(4.4rem, 3.47vw, 5rem); /* Figma 50px */
  /* 左右は button の既定 padding（Chrome は 1px 6px）を消すため 0 を明示する */
  padding: clamp(.8rem, .69vw, 1rem) 0 clamp(.7rem, .63vw, .9rem);
  border: 0;
  background: var(--color_light);
  color: var(--color_dark);
  font-family: var(--font_jp);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  cursor: pointer;
  transition: var(--transition);
}

/* 背景の差がほぼ無い（#F6F6F6 → #F2F2F2）ため文字色も主色にする。2026-08-20 実測により追加。 */
.faq-cat__btn:hover {
  background: var(--color_base2);
  color: var(--color_main);
}

/* キーボード操作でも押せる場所が分かるようにする（見た目はホバーと同じ＋外枠） */
.faq-cat__btn:focus-visible {
  outline: 2px solid var(--color_main);
  outline-offset: 2px;
}

/* 選ばれているカテゴリ（初期はレンタル）。改訂カンプの文字は太字ではなく 500。 */
.faq-cat__btn.is-current {
  background: var(--color_main);
  color: #fff;
}

.faq-cat__btn.is-current:hover {
  background: var(--color_main_dark);
  color: #fff; /* 選択中は赤地・白文字。上の文字色変更を打ち消して読めなくならないようにする */
}

.faq-cat__btn-text {
  width: 100%;
  padding-right: clamp(1.2rem, 1.11vw, 1.6rem); /* Figma 文字枠 pad 右16 */
  padding-left: clamp(.8rem, .69vw, 1rem);      /* Figma 文字枠 pad 左10 */
  text-align: center;
}

/* カンプの矢印枠は 13×13（中の山は 8×4）。専用の書き出しが無いため、共通の
   .ar--2 系（16×16・中の山 10×5）を 13px に縮めて使う。
   共通クラスの矢印は「固定でないと整わないもの」として固定（冒頭の約束ごと(3)）。 */
.faq-cat__ar {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  background-size: 1.3rem 1.3rem;
}

/* 🚨 矢印は HTML 側で全ボタンとも .ar--2-down（赤・90度回転済み）を出しており、
   faq.js は is-current と aria-pressed しか触らない。現在地の白い矢印は、
   common.css の .ar--2-white と同じ画像をここで背景だけ差し替えて作る
   （common.css は1行も触らない。回転は .ar--2-down のものをそのまま使う）。 */
.faq-cat__btn.is-current .faq-cat__ar {
  background-image: url("../images/usecases_arrow2_white_a.svg");
}

/* --- キーワード検索（Figma Group 126・442×52） ------------------------------- */
/* 🚨 見た目だけ。検索の動作は今回の担当範囲外（HTML 側にも同じ注記あり）。 */
.faq-search {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.2rem, 1.18vw, 1.7rem);  /* Figma gap 17 */
  padding-top: clamp(1.2rem, 1.18vw, 1.7rem); /* Figma gap 17（区切り線の下） */
  border-top: 1px solid var(--color_line); /* Figma Vector 46・1px #EAEAEA */
}

.faq-search__input {
  flex: 1 1 35.7rem;
  min-width: 0;
  max-width: 35.7rem; /* Figma 入力枠 499〜856 ＝ 357px。コンテナ幅なので固定 */
  min-height: clamp(4.4rem, 3.61vw, 5.2rem); /* Figma 52px */
  padding-inline: clamp(1.4rem, 1.39vw, 2rem); /* Figma 文字の左端が枠から20 */
  border: 1px solid var(--color_muted); /* Figma stroke 1px #717171 */
  border-right: 0; /* 右は検索ボタンが接する（Figma も枠が続いて見えない） */
  border-radius: 2px 0 0 2px; /* Figma r=2。5px 以下の角丸は固定 */
  appearance: none; /* iOS の内側の影と勝手な角丸を消す */
  background: #fff;
  color: var(--color_dark);
  font-family: var(--font_jp);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 700;
  letter-spacing: .05em;
}

.faq-search__input::placeholder {
  color: var(--color_gray); /* Figma #D2D2D2 */
}

.faq-search__btn {
  flex: 0 0 auto;
  width: clamp(6.4rem, 5.9vw, 8.5rem); /* Figma 85px */
  min-height: clamp(4.4rem, 3.61vw, 5.2rem); /* Figma 52px */
  border: 0;
  border-radius: 0 2px 2px 0; /* Figma r=(0,2,2,0) */
  background: var(--color_main);
  color: #fff;
  font-family: var(--font_jp);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 700;
  letter-spacing: .05em;
  cursor: pointer;
  transition: var(--transition);
}

.faq-search__btn:hover {
  background: var(--color_main_dark);
}

/* 検索結果の件数・0件の知らせ（カンプに無い要素なので、検索枠の下に小さく置くだけ）。 */
.faq-search__result {
  margin-top: clamp(1rem, .97vw, 1.4rem);
  color: var(--color_dark);
  font-family: var(--font_jp);
  font-size: clamp(1.3rem, 1.04vw, 1.5rem);
  font-weight: 700;
  letter-spacing: .05em;
  text-align: center;
}

/* --- カテゴリー見出し（Figma Frame 479） ------------------------------------- */
.faq-faq__cat-title {
  padding-top: clamp(2.6rem, 2.78vw, 4rem);   /* Figma pad 上40 */
  padding-bottom: clamp(1.4rem, 1.39vw, 2rem); /* Figma pad 下20 */
  color: var(--color_dark);
  font-size: clamp(2rem, 1.88vw, 2.7rem); /* Figma 27px */
  font-weight: 700;
  line-height: 1.45; /* Figma lh 39.096 / 27px */
  letter-spacing: .05em;
  text-align: center;
}

/* --- Q&A（Figma Frame 4852・1040幅・gap20） --------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1.39vw, 2rem); /* Figma gap 20 */
  max-width: 104rem; /* Figma 1040px。コンテナ幅なので固定 */
  margin-inline: auto;
}

.faq-list__item {
  padding-inline: clamp(1.6rem, 1.81vw, 2.6rem); /* Figma pad 左26 / 右27 */
  background: #fff;
}

/* <summary> の既定の三角は消す。開閉しない項目（回答の原稿が無いもの）は
   .faq-list__q--static を足して指の形にしない。 */
.faq-list__q {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .97vw, 1.4rem); /* Figma Frame 468 gap 14 */
  padding-block: clamp(1.4rem, 1.39vw, 2rem); /* Figma pad 上下20 */
  cursor: pointer;
  list-style: none;
}

.faq-list__q::-webkit-details-marker {
  display: none;
}

.faq-list__q--static {
  cursor: default;
}

/* Q・A の丸バッジ（Figma Ellipse 26 / 28・24×24） */
.faq-list__badge {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: clamp(2rem, 1.67vw, 2.4rem);
  height: clamp(2rem, 1.67vw, 2.4rem);
  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.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 700;
  line-height: 1;
}

.faq-list__badge--q {
  background: var(--color_main);
  color: #fff;
}

.faq-list__badge--a {
  background: var(--color_main_light);
  color: var(--color_main);
}

/* 行高はカンプの行 24px（バッジと同じ高さ）に合わせる。
   Figma のスタイル値 25.6 をそのまま使うと質問の行が 1.6px 高くなる。 */
.faq-list__q-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

/* カンプの矢印枠は 18×18（中の山は 11×6）。共通の .ar--2 系（16×16）を 18px に
   広げると中の山が 11×6 になり、カンプと一致する。 */
.faq-list__ar {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin-left: clamp(.4rem, .42vw, .6rem); /* バッジ〜文字は14、文字〜矢印は20 なので差の6を足す */
  background-size: 1.8rem 1.8rem;
  transition: transform .3s ease;
}

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

/* 回答。上の1px は Figma Vector 34（区切り線）。
   上下の余白はカンプ実測から逆算した値（区切り線2481／1行目の墨2499／
   2行目の墨の下端2540／項目の下端2559）。Figma のログの gap 20 をそのまま使うと
   項目が14px 高くなるため、実測に合わせている。 */
.faq-list__a {
  display: flex;
  align-items: center;
  gap: clamp(1rem, .97vw, 1.4rem); /* Figma Frame 473 gap 14 */
  padding-block: clamp(1rem, .97vw, 1.4rem);
  border-top: 1px solid var(--color_line);
}

/* 表を入れる回答（WEB版「推奨OSや推奨機器は？」）があるため、HTML 側は p ではなく div。 */
.faq-list__a-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.6; /* Figma lh 25.6 / 16px */
  letter-spacing: .05em;
}

/* 回答の中の赤字強調（カンプ #B80003。例：操作・機能「雨や雪の中で使えますか？」） */
.faq-list__em {
  color: var(--color_main);
}

/* 回答の中のリンク（カンプは本文色のまま下線。例：操作・機能「イヤホンはどんな種類が…」の
   「こちら」、返却「返却が遅れそうな場合は？」の「あんしん補償サービスについて」） */
.faq-list__a-link {
  color: inherit;
  text-decoration: underline;
  transition: var(--transition);
}

.faq-list__a-link[href]:hover,
.faq-list__a-link[href]:focus-visible {
  color: var(--color_main);
}

/* --- 回答の中の表（WEB版「推奨OSや推奨機器は？」・Figma Frame 79 820×332） ---- */
/* inspect: figma-dump/inspect/faq_20260827/cat_web.txt 173〜198行が実測の出どころ。
   罫線は外周・内側とも 1px #EAEAEA。見出し行の地色は #F6F6F6。
   許可タグに thead が無いため見出し行も tbody の中にあり、見出し行が th[scope=col]、
   1列目が th[scope=row]。
   上の余白 20px は Figma Frame 217 の gap（原稿に改行は入っていない）。
   列幅は Figma 実測 160 / 360 / 300（合計 820）の比。
   行の高さは見出し50・本文94 でそろっているので、padding 任せにせず高さを持たせて
   中身を上下中央に置く（表の height は最小値として働くので、幅が狭まれば伸びる）。 */
.faq-list__a-text table {
  width: 100%;
  max-width: 82rem; /* Figma 820px。表の幅なので固定 */
  margin-top: clamp(1.4rem, 1.39vw, 2rem); /* Figma Frame 217 gap 20 */
  border-collapse: collapse;
  table-layout: fixed;
}

.faq-list__a-text th,
.faq-list__a-text td {
  padding: clamp(.6rem, .56vw, .8rem) clamp(.6rem, .69vw, 1rem);
  border: 1px solid var(--color_line); /* Figma stroke 1px #EAEAEA */
  font-size: clamp(1.3rem, 1.11vw, 1.6rem); /* Figma 16px */
  line-height: 1.2; /* Figma lh 19.2 / 16px */
  letter-spacing: .05em;
  text-align: center;
  vertical-align: middle;
}

.faq-list__a-text th {
  font-weight: 700;
}

/* 1列目だけ文字色が違う（Figma 実測：種別・iPhone・iPad・Android が text_black #333333、
   推奨機種・OSバージョン・本文セルが txt_color #111111）。
   #333333 は common.css の変数に無く、common.css は触らない取り決めのため、
   このページ限りの色として直に書いている。 */
.faq-list__a-text tr > :first-child {
  color: #333;
}

/* 1行目＝見出し行。地色が付き、行の高さも本文行より低い（Figma 50 / 94）。 */
.faq-list__a-text tr:first-child {
  height: clamp(4.4rem, 3.47vw, 5rem); /* Figma 50px */
}

.faq-list__a-text tr:first-child th {
  background: var(--color_light); /* Figma fill #F6F6F6 */
}

.faq-list__a-text tr + tr {
  height: clamp(7rem, 6.53vw, 9.4rem); /* Figma 94px */
}

.faq-list__a-text tr > :nth-child(1) {
  width: 19.5%; /* Figma 160 / 820 */
}

.faq-list__a-text tr > :nth-child(2) {
  width: 44%;   /* Figma 360 / 820 */
}

.faq-list__a-text tr > :nth-child(3) {
  width: 36.5%; /* Figma 300 / 820 */
}

/* --- もっと見る／閉じる（Figma COMPONENT もっと見る 924:7715・外枠1040×80） ---- */
/* 10件を超えるカテゴリだけ HTML 側が出力する。ボタンは 240×50・中央・上余白30。 */
.faq-more {
  display: flex;
  justify-content: center;
  max-width: 104rem; /* Figma 1040px。コンテナ幅なので固定 */
  margin-inline: auto;
  padding-top: clamp(2rem, 2.08vw, 3rem); /* Figma pad 上30 */
}

/* 縦積み・下部中央に矢印。上下の詰め方はカテゴリーボタン（.faq-cat__btn）と同じ理由。 */
.faq-more__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: clamp(18rem, 16.67vw, 24rem); /* Figma 240px */
  min-height: clamp(4.4rem, 3.47vw, 5rem); /* Figma 50px */
  /* 左右は button の既定 padding（Chrome は 1px 6px）を消すため 0 を明示する */
  padding: clamp(.8rem, .69vw, 1rem) 0 clamp(.7rem, .63vw, .9rem);
  border: 0;
  background: var(--color_main);
  color: #fff;
  font-family: var(--font_jp);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1;
  letter-spacing: .05em;
  cursor: pointer;
  transition: var(--transition);
}

.faq-more__btn:hover {
  background: var(--color_main_dark);
}

.faq-more__btn:focus-visible {
  outline: 2px solid var(--color_main);
  outline-offset: 2px;
}

/* 矢印は白の右向き（.ar--2-white）をここで90度回して下向きにする。common.css は触らない。
   カンプの矢印枠は 13×13（.faq-cat__ar と同値）。 */
.faq-more__ar {
  flex: 0 0 auto;
  width: 1.3rem;
  height: 1.3rem;
  background-size: 1.3rem 1.3rem;
  transform: rotate(90deg);
  transition: transform .3s ease;
}

/* 開いている間（文言が「閉じる」のとき）は上向き。faq.js がボタンに is-open を付ける。 */
.faq-more__btn.is-open .faq-more__ar {
  transform: rotate(-90deg);
}


/* =============================================================================
 * 7. お問い合わせ・サポート情報（Figma contents_inner 759:4032 [0,3373,1440,4283]）
 * 🚨 カンプはこの中に同名・同 padding の contents_inner 818:5428 [0,3453,1440,4183] が
 *    もう1枚あり、上下の余白が二重（上160／下200）になっている。子が1枚だけの入れ子で、
 *    同じファイルの他の入れ子（402:2441・472:3218）は外枠の padding が 0 のため、
 *    デザイン側の重複枠と判断して実装は 1枚ぶん（上80／下100）のままにしてある。
 *    意図的な余白であれば、下の padding を倍にするだけで合う。
 * 電話まわりの数値は assets/css/top.css 1989〜2025行（.top-contact 系）の転記。
 * 本ページでは top.css を読まないため、クラスを作り直している。
 * 文字色だけカンプに合わせて白→黒／番号は赤にした。
 * ========================================================================== */
.faq-support {
  padding-top: clamp(5rem, 5.56vw, 8rem);      /* Figma pad 上80 */
  padding-bottom: clamp(6rem, 6.94vw, 10rem);  /* Figma pad 下100 */
  background: #fff;
}

.faq-support__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start; /* カンプはカードと電話が同じ高さから始まる */
  justify-content: center;
  column-gap: clamp(3rem, 5.56vw, 8rem); /* Figma Frame 477 gap 80 */
  row-gap: clamp(2.4rem, 2.78vw, 4rem);
  padding-bottom: clamp(2rem, 2.08vw, 3rem); /* Figma pad 下30 */
}

.faq-support__tel-wrap {
  flex: 0 1 30rem; /* Figma Group 122 の 300px。コンテナ幅なので固定 */
  max-width: 30rem;
}

.faq-support__tel-label {
  color: var(--color_dark);
  font-size: clamp(1.3rem, 1.04vw, 1.5rem); /* top.css 1991行 1.5rem */
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .05em;
}

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

.faq-support__tel-icon {
  flex: 0 0 clamp(2.6rem, 2.22vw, 3.2rem); /* top.css 2003行 3.2rem。Figma 32×32 */
  width: clamp(2.6rem, 2.22vw, 3.2rem);
}

.faq-support__tel a {
  color: var(--color_main); /* カンプはトップと違い赤（トップは白地の帯なので白） */
  font-family: var(--font_eng); /* top.css 2009行 */
  font-size: clamp(2.8rem, 2.36vw, 3.4rem); /* 上限 top.css 2010行 3.4rem / 下限 同 2341行 2.8rem */
  font-weight: 700;
  line-height: 1.4; /* Figma lh 47.6 */
  letter-spacing: .05em;
  text-decoration: none;
}

.faq-support__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行。Figma 34px = 罫線1px + 7px + 本文18.2px + 7px + 罫線1px */
  border: 1px solid var(--color_line);
  color: var(--color_dark);
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem / 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* --- 灰色の箱（Figma Frame 125・1040×220） ---------------------------------- */
.faq-support__doc {
  max-width: 104rem; /* Figma 1040px。コンテナ幅なので固定 */
  margin-inline: auto;
  padding-block: clamp(2rem, 2.08vw, 3rem); /* Figma pad 上下30 */
  /* カンプの左右 padding は 0（中身が中央寄せの固定幅）。狭い画面で文字が箱に付かないよう
     左右にも余白を持たせている。1440px では中身の幅（830px）に届かないので見た目は変わらない */
  padding-inline: clamp(1.6rem, 2.08vw, 3rem);
  background: var(--color_light);
}

.faq-support__doc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between; /* Figma は説明文と btn が両端（830 の中に 351 と 320） */
  gap: clamp(1.6rem, 2.08vw, 3rem);
  max-width: 83rem; /* Figma Frame 483 / 484 の 830px。コンテナ幅なので固定 */
  margin-inline: auto;
}

.faq-support__doc-text {
  color: var(--color_dark);
  font-size: clamp(1.4rem, 1.11vw, 1.6rem); /* Figma 16px */
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .05em;
}

/* 2px は罫線。カンプは箱の中で行より広い 900px（Figma Vector 45・270〜1170） */
.faq-support__doc-line {
  max-width: 90rem;
  margin: clamp(1.4rem, 1.39vw, 2rem) auto; /* Figma gap 20 */
  border: 0;
  border-top: 2px solid var(--color_line);
}


/* =============================================================================
 * 8. CONTACT 帯（Figma contact 759:4075 [0,4283,1440,4709]・1440×426）
 * トップの contact（node 170:922）と同じ形。数値は assets/css/top.css
 * 1935〜2097行の転記で、各宣言に転記元の行を書いてある。SP は同 2320〜2374行が手本。
 * top.css はトップ限定読み込みのため本ページでは効かず、クラスも別（.faq-contact__*）。
 * ========================================================================== */
.faq-contact {
  padding-block: 8rem; /* top.css 1936行と同値（Figma pad(80,276,80,276) の上下） */
  padding-inline: clamp(2rem, 2.75vw, 4rem); /* .section__inner を使わない取り決めのためここで持つ */
  background: var(--gradient); /* Figma cta_gr。top.css 1937行は同じ値を直書き */
  color: #fff;
}

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

/* --- 左カラム（top.css 1950〜2025行の転記） --------------------------------- */
.faq-contact__intro {
  flex: 0 0 30rem; /* top.css 1951行 */
  align-self: stretch; /* top.css 1952行。カンプは左カラムだけ上寄せ */
}

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

/* 3px は印そのものの線幅なので固定（top.css 1969行と同値） */
.faq-contact__label-mark {
  flex: 0 0 1.4rem; /* top.css 1966行。Figma Ellipse 14×14・stroke 3px INSIDE */
  width: 1.4rem;
  height: 1.4rem;
  border: 3px solid #fff;
  border-radius: 50%;
}

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

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

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

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

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

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

.faq-contact__hours {
  margin-top: .8rem; /* top.css 2018行。Figma gap 8 */
  padding: .7rem; /* top.css 2019行 */
  border: 1px solid var(--color_line); /* top.css 2020行は #EAEAEA 直書き */
  font-size: clamp(1.2rem, .9vw, 1.3rem); /* 上限 top.css 2021行 1.3rem / 下限 同 2345行 1.2rem */
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .05em;
}

/* --- 右カラム（top.css 2028〜2097行の転記） --------------------------------- */
.faq-contact__btns {
  display: flex; /* top.css 2029行 */
  flex: 0 1 60rem; /* Figma ボタン 600px。狭い画面では縮む側にする */
  flex-direction: column;
  gap: 2rem; /* top.css 2033行。Figma ボタン間 20 */
  min-width: 0;
}

.faq-contact__btn {
  position: relative; /* top.css 2037行 */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 12rem; /* top.css 2041行。Figma 120px */
  /* top.css には無い指定。トップは 768px まで2カラムを保つため 900px 付近で
     ボタンが縮むと中の文字が左のアイコンに重なる。左右を同じだけ空けることで
     文字の中心はカンプどおりボタンの中心に来たまま、アイコン（左40＋64＝104）と
     矢印（右20＋24＝44）に文字がかからない。 */
  padding-inline: 10.4rem;
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3); /* top.css 2042行。Figma DROP_SHADOW(0,10 r=30 #860D08@0.3) */
  text-decoration: none;
  transition: var(--transition);
}

.faq-contact__btn--rental {
  background: var(--color_main_dark); /* top.css 2048行 #7C0002 */
  color: #fff;
}

.faq-contact__btn--inquiry {
  background: #fff; /* top.css 2053行 */
  color: var(--color_main);
}

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

.faq-contact__btn--inquiry:hover {
  box-shadow: 0 10px 30px rgba(134, 13, 8, .3), inset 0 0 0 2px var(--color_main);
  opacity: .65; /* 2026-08-26 CEO 指示: ホバーが効いているか分かるよう .8/.85 → .65 に統一 */
}

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

.faq-contact__btn-txt {
  display: flex; /* top.css 2071行 */
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.faq-contact__btn-main {
  font-size: clamp(1.8rem, 1.67vw, 2.4rem); /* 上限 top.css 2079行 2.4rem / 下限 同 2363行 1.7rem を丸めた 1.8rem */
  font-weight: 700;
  line-height: 1; /* top.css 2081行 */
  letter-spacing: .05em;
}

.faq-contact__btn-sub {
  font-size: clamp(1.3rem, 1.04vw, 1.5rem); /* 上限 top.css 2086行 1.5rem / 下限 同 2367行 1.3rem */
  font-weight: 700;
  line-height: 1.4; /* top.css は 1（PC）／1.4（SP）。折り返しても詰まらない 1.4 に寄せた */
  letter-spacing: .05em;
}

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


/* =============================================================================
 * 9. ブレイクポイント（SP のカンプが無いため、以下はすべて当方設計）
 * max-width の単独指定だけを使い、下の帯へ継承させる。
 * ========================================================================== */

/* -----------------------------------------------------------------------------
 * 1199px 以下
 * カード4列のままリキッドで縮む。ここで閉じる必要のある崩れは無い。
 * -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
 * 1023px 以下
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

  /* 困ったときは：4列だとカード内の文字幅が 184px を切り、本文が1行4〜5文字になる。2列へ */
  .faq-trouble__list {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CONTACT 帯：2カラムのままだとボタンが 600px を大きく割り、ボタン内の
     2行（最長 384px）と左右のアイコン・矢印が競る。1本600px を保てる縦積みにする */
  .faq-contact__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 4rem;
    min-height: 0;
  }

  .faq-contact__intro,
  .faq-contact__btns {
    flex: 0 0 auto;
    width: 100%;
    max-width: 60rem; /* 帯いっぱいに伸ばさず、カンプのボタン幅にそろえる */
    margin-inline: auto;
  }
}

/* -----------------------------------------------------------------------------
 * 768px 以下（SP）
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* 困ったときは：2列だと 375px でカード内の文字幅が 120px を切る。1列へ */
  .faq-trouble__list {
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .faq-trouble__card {
    width: 100%;
    max-width: 34rem;
    margin-inline: auto;
  }

  /* 1行に収まらなくなる幅なので行間を空ける（1440px では1行でカンプどおり詰まる） */
  .faq-trouble__box-title {
    line-height: 1.5;
  }

  /* .btn の 320px は 375px 幅の画面に入らない（枠の左右余白を引くと 303px 残り）。
     入る幅まで縮め、左右の padding を詰めて文字（最長 235px）が収まるようにする */
  .faq-trouble__btns .btn,
  .faq-support__doc-row .btn {
    width: 100%;
    max-width: 32rem;
    padding-inline: 2rem 4.4rem;
  }

  /* 資料の箱：説明文とボタンが1行に並ばなくなるので、両端寄せをやめて中央にそろえる */
  .faq-support__doc-row {
    justify-content: center;
  }

  .faq-support__doc-text {
    text-align: center;
  }

  /* カテゴリー検索：ボタンが9個になったので 3列にすると 3×3 でちょうど埋まる
     （2列だと最後の1個だけが next 行に残って半端になる）。
     PC の5列は 769px でも崩れない（実測：ボタン 130.9px・文字の余地 110.9px に対し
     最長ラベル「納期・配送」が 14px で 73.5px。折り返しゼロ）。ここで3列にするのは
     崩れたからではなく、SP は指の当たり判定を広く取るため。
     3列での実測：768px でボタン 224px、375px で 93px。 */
  .faq-cat__list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* 文字枠の左右（PC はカンプどおり 左10／右16）のままだと、375px で最長ラベルが
     0.5px はみ出して2行になる。SP だけ左右そろえて 4px に詰める（余地 85px）。 */
  .faq-cat__btn-text {
    padding-inline: .4rem;
  }

  /* CONTACT 帯（top.css 2320〜2374行が手本） */
  .faq-contact {
    padding-block: 6rem; /* top.css 2321行 */
  }

  .faq-contact__btn {
    height: auto; /* top.css 2349行 */
    min-height: 10rem;
    padding: 2rem 4.4rem 2rem 8.8rem; /* top.css 2351行 */
  }

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

  .faq-contact__btn-txt {
    align-items: flex-start;
    text-align: left; /* 左のアイコンぶん中心がずれるため、SP は左そろえにする */
  }

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