@charset "UTF-8";
/* =====================================================================
   文字と余白の調整（2026-11-09 おじさん判断）
   ・既存CSS（add.css・line-hero.css）の後ろに読み込む上書き。既存ファイルは触らない。
   ・文字の色（#000）と太さ（font-weight・太字）は変えない（「太く見えるのは別にいい」）。
   ・トップのMV（#top_mv.mv_v2）は変えない：見出し向けの指定は :not(#top_mv *) で外し、
     body から受け継ぐ値（大きさ・行間・字間）は #top_mv で今の値に戻す。
   ・元の案：musen-kaitori-tasks/2026-11-09_文字と余白/改善案.md
   ===================================================================== */

/* ---------------------------------------------------------------------
   0. 物差し
   --------------------------------------------------------------------- */
:root {
  --mk-lh: 1.8;             /* 本文の行間（1.6 → 1.8） */
  --mk-ls: 0.04em;          /* 本文の字間（0 → 0.04em） */
  --mk-gap-head: 16px;      /* 見出し → 本文 */
  --mk-gap-btn: 32px;       /* 文・見出し → ボタン */
  --mk-gap-btn-sub: 24px;   /* ボタン → 補足のリンク・注記 */
  --mk-band-y: 56px;        /* 色の帯の上下の内側余白 */
}
@media (max-width: 640px) {
  :root {
    --mk-gap-head: 12px;
    --mk-gap-btn: 24px;
    --mk-gap-btn-sub: 20px;
    --mk-band-y: 40px;
  }
}

/* ---------------------------------------------------------------------
   1. 本文の基本（全ページ）：行間・字間、スマホは 16px・左右 16px
   --------------------------------------------------------------------- */
body {
  line-height: var(--mk-lh);
  letter-spacing: var(--mk-ls);
}
@media (max-width: 640px) {
  body { font-size: 16px; }            /* スマホの本文 14px → 16px */
  /* スマホの左右の余白 10px → 16px。写真が並ぶ一覧（事例・メーカー・機器）とヘッダーは今の幅のまま */
  .container_large:not(header *, .sell_case *, .pt_sell_brand *, .pt_device *),
  .container_medium,
  .container_small { width: calc(100% - 32px); padding-left: 16px; padding-right: 16px; }   /* 上下の余白は各ページの指定のまま（padding の一括指定にすると .column_two の上の 100px が消える） */
  /* 2カラムのページ（事例一覧など）で外側が 16px になっても、中の事例の写真一覧は今の幅のまま */
  .column_two .column_main > .sell_case { margin-left: -6px; margin-right: -6px; }
}

/* MV は変えない：body から受け継ぐ値を今の値に戻す */
#top_mv { line-height: 1.6; letter-spacing: normal; }
@media (max-width: 640px) { #top_mv { font-size: 14px; } }
/* ヘッダー（ロゴ・メニュー）も今の値のまま。行間が受け継がれるとパソコンでヘッダーが約4px高くなり、MVの位置がずれるため */
header { line-height: 1.6; }
@media (max-width: 640px) { header { font-size: 14px; } }

/* 見出し：行間を少し詰め、言葉の切れ目で折り返す・最後の数文字だけの行を作らない（MVの中は除く） */
/* （:not の中は :where で包み、ID の強さを持ち込まない＝各ページで個別に決めた見出しの指定はそのまま勝つ） */
:is(h1, h2, h3):not(:where(#top_mv *)) { line-height: 1.45; word-break: auto-phrase; text-wrap: balance; }

/* 字間は「文章」にだけ。見出し・写真の下の短い名前・一覧・メニュー・ボタンは今のまま */
h1, h2, h3, h4,
.case_list_wrap, .brand_list_wrap, .device_list_wrap, .point_list,
.faq_nav, .ft_main, .ft_bottom, .float_ft, header, .breadcrumb_list,
.column_side, .btn_green, .wrap_btn, .case_cta_btns, .maker_cta_btns,
.ft_satei_set, .sell-intro__strengths, .sell-intro__reasons, .lh-hero, .mef-form,
.photo_point_wrap { letter-spacing: normal; }

/* トップの導入文「2010年から〜」：改行位置を決めてある短い文なので字間は今のまま。
   スマホは左右も今の 10px のまま（16px にすると「専門買取を」の「を」だけが次の行に落ちる） */
.top_about p { letter-spacing: normal; }
@media (max-width: 640px) {
  .top_about .container_small { width: calc(100% - 20px); padding-left: 10px; padding-right: 10px; }
}
/* 写真の下の事例名（事例一覧・事例ページ・メーカー別の一覧）：短い名前なのでスマホも今の 14px のまま（16px だと3行に折り返す） */
@media (max-width: 640px) {
  .case_list_wrap .case h3 { font-size: 14px; }
}
/* トップ「アマチュア無線機や受信機〜」：大きさを指定していない見出しなので、スマホ本文16pxにつられて大きくならないよう今の21pxで止める */
@media (max-width: 640px) {
  .top_about .midashi_about { font-size: 21px; }
}

/* ---------------------------------------------------------------------
   2. 買取の流れ（step）：見出しと本文の差・見出し → 本文・本文 → ボタン
   --------------------------------------------------------------------- */
.pt_sell_flow .flow_box .txt_l { font-size: 22px; line-height: 1.5; padding-top: 12px; }
.pt_sell_flow .flow_box .txt   { padding-top: var(--mk-gap-head); }
@media (max-width: 640px) {
  .pt_sell_flow .flow_box .txt_l { font-size: 19px; }
}
.pt_sell_flow .flow_box .wrap_btn { padding-top: var(--mk-gap-btn); }   /* 15px → 32px（スマホ 24px）。下側は今のまま */

/* ---------------------------------------------------------------------
   3. よくある質問：答えの1行を長くしすぎない（40字前後）・1〜2文字だけの行を作らない
   --------------------------------------------------------------------- */
.faq_wrap .question { line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
/* 答えの文字の幅を 42em（字間込みで約40字）まで。元の案の calc(40em + 90px) は左右の余白を足したつもりが、
   幅は余白を含まない数え方のため約43字になり「くださ／い。」が残ったので改める。最後の行が1〜2字だけにならないよう text-wrap: pretty も */
.faq_wrap .answer   { max-width: 42em; padding-top: 18px; text-wrap: pretty; }
@media (max-width: 640px) {
  .faq_wrap .question { font-size: 17px; }
  .faq_wrap .faq_nav a { font-size: 15px; }
}
@media (max-width: 414px) {
  .faq_wrap .faq_nav a { font-size: 14px; }
}

/* ---------------------------------------------------------------------
   4. 小さすぎる注記の下限（スマホ 12px）
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .pt_point .txt_s,
  .sell-intro__note { font-size: 12px; }
  .pt_sell_flow .flow_box .txt_s { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   5. ボタンのまわりの余白
   --------------------------------------------------------------------- */
/* 5-1 フッターの申込の帯「無線機の無料査定はこちら」：帯の上下 56/40、見出し → ボタン 28/20、ボタン → リンク 24/20 */
.ft_satei_wrap { padding: var(--mk-band-y) 0; }
.ft_satei_wrap h3 { margin-bottom: 28px; line-height: 1.4; }
.ft_satei_wrap .ft_first { margin-top: var(--mk-gap-btn-sub); }
@media (max-width: 640px) {
  .ft_satei_wrap h3 { margin-bottom: 20px; }
  .ft_satei_set .bt_wt_web { margin-bottom: 12px; }
}
/* 5-2 事例・メーカーの相談の枠：文 → ボタン 32/24、枠の内側 上32・下36（スマホ 28） */
.case_cta,
.maker_about .maker_cta { padding: 32px 24px 36px; }
.case_cta_btns,
.maker_about .maker_cta_btns { margin-top: var(--mk-gap-btn); }
@media (max-width: 640px) {
  .case_cta,
  .maker_about .maker_cta { padding: 28px 16px 28px; }
  .case_cta_btns,
  .maker_about .maker_cta_btns { gap: 12px; }
}
/* 5-3 スマホのボタンの文字の大きさをそろえる（13〜14px → 16px） */
@media (max-width: 640px) {
  .sell_case .btn_green a,
  .sell_case .case_more_btns .btn_green a,
  .pt_sell_flow .flow_box .btn_web a,
  .pt_sell_flow .flow_box .btn_line a,
  .case_cta_btns a,
  .case_more_btns a,
  .maker_about .maker_cta_btns a { font-size: 16px; }
}

/* ---------------------------------------------------------------------
   6. ボタンの中身を真ん中に（アイコン＋文字をひとまとまりで中央へ）
   原因：アイコンを「絶対位置」で左に置き、文字だけを中央にしていたため、まとまりが左に寄っていた。
   直し：アイコンを文字の前に並べる（position: static）。右端の「›」は今のまま右に置き、左右の内側余白を同じにする。
   マークアップは変えない（a の中は文字だけ・アイコンは ::before）。
   --------------------------------------------------------------------- */
/* 6-1 フッターの申込の帯 */
.ft_satei_set .bt_wt_web a,
.ft_satei_set .bt_wt_line a { padding: 0 44px; box-sizing: border-box; }
.ft_satei_set .bt_wt_web a::before,
.ft_satei_set .bt_wt_line a::before {
  position: static; translate: none; flex: none; margin-right: 12px;
}
.ft_satei_set .bt_wt_web a::after,
.ft_satei_set .bt_wt_line a::after { right: 22px; }
/* 6-2 画面下の固定帯 */
.float_ft .bt_web a,
.float_ft .bt_line a { padding-left: 0 !important; padding-right: 0; }
.float_ft .bt_web a::before,
.float_ft .bt_line a::before {
  position: static; translate: none; flex: none; margin-right: 8px;
}
/* 6-3 ヘッダー（パソコン） */
.header_inner .wrap_info_pc .btn_web a,
.header_inner .wrap_info_pc .btn_line a {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 16px; box-sizing: content-box; width: calc(100% - 32px);
}
.header_inner .wrap_info_pc .btn_web a::before,
.header_inner .wrap_info_pc .btn_line a::before {
  position: static; translate: none; flex: none; margin-right: 8px;
}
/* 6-4 ヘッダー（スマホ）の LINE査定：左10／右14 で 2px 左に寄っていたのを、アイコンと文字を 2px 右へ */
@media (max-width: 640px) {
  .wrap_info_sp .btn_line a { padding-left: 37px; padding-right: 8px; }
  .wrap_info_sp .btn_line a::before { left: 12px; }
}