@charset "UTF-8";
/* =========================================================
   SPYDERSXサポート　レスポンシブ追加分
   2026/09/22 作成

   ・全ルールをメディアクエリの中に置いている。
     → 1240px以上（従来のPC表示）は1ピクセルも変わらない。
   ・base.css は書き換えない。このファイルを後から読み込んで上書きする。
   ・会社サイト側の /css/responsive.css とは別物。流用しないこと
     （会社サイトは1000px固定、こちらは1200px固定で作りが違う）。
   ========================================================= */

/* =========================================================
   1239px以下：1200pxで固定されている箱を可変にする
   ========================================================= */
@media screen and (max-width: 1239px) {

  /* ---- 幅が固定されている箱をまとめて可変にする ---- */
  header,
  .nav,
  #main_img,
  .category_list1, .category_list1 .parent,
  .category_list2, .category_list2 .parent,
  .text_area, .text_area1,
  #footer_list1, #footer_list2,
  .attention_area,
  .category_title_area,
  .product_list_area,
  .faq_list_area, .faq_btn_area,
  .text_area_index,
  .question_list,
  .answer_area, .answer_area_box,
  .inquiry_area,
  .text_area_support, .text_area_support_p, .text_area_support_sub,
  .text_area_faq, .text_area_faq_sub,
  .faq_area2, .faq_area2 ul,
  .text_area_answer_title, #text_area_answer, #text_area_answer .text_area_answer_sub,
  .text_area_unit, .text_area_unit_p, .text_area_unit_sub,
  .text_area_paid_request,
  .text_area_paid_accessories,
  .contact_form,
  .text_area_h1_download, .text_area_download, .download_t, .text_area_download_p,
  .question_flow-box,
  .breadcrumb,
  .text_area_download_index {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---- 高さが固定されている箱を中身なりにする ---- */
  header,
  #main_img,
  .text_area, .text_area1,
  .text_area_download_index,
  .text_area_support, .text_area_faq, .text_area_unit, .text_area_download,
  /* ↓この2つが抜けていた。実機のiPhoneで、表が下のフッターに重なって発覚。
       .text_area_paid_request  箱3550px に対し中身5823px（2273px はみ出し）
       .contact_form            箱1450px に対し中身2067px（ 617px はみ出し）
     横のはみ出し（scrollWidth）しか測っていなかったので気づけなかった。
     縦の溢れは scrollHeight - clientHeight で測ること。 */
  .text_area_paid_request,
  .contact_form {
    height: auto;
  }

  /* ---- 画像が箱からはみ出さないようにする ---- */
  img { max-width: 100%; height: auto; }

  /* ---- HTMLの style="" に直接書かれた幅を打ち消す ----
     インライン指定は外部CSSより強いため、ここだけ !important を使う。
     index.html の <div style="width:1200px; margin:100px auto; ..."> が該当。
     この1箇所のせいで、その下の全要素（表・フッター含む）が1200pxに引き伸ばされ、
     スマホで横にはみ出していた。53ページを調べて該当はここだけだが、
     他ページに同じ書き方が出てきても効くよう、値ごとまとめて指定している。
     メディアクエリの中なので、1240px以上のPC表示には影響しない。 */
  [style*="width:1200px"], [style*="width: 1200px"],
  [style*="width:1150px"], [style*="width: 1150px"],
  [style*="width:1100px"], [style*="width: 1100px"],
  [style*="width:1050px"], [style*="width: 1050px"] {
    width: auto !important;
    max-width: 100% !important;
  }

  /* ---- ヘッダーのロゴ ---- */
  header { padding: 10px 14px; text-align: left; }

  /* ---- ボタン画像を箱の中央に置く ----
     .top_flow-item の中身は <a><img></a> のボタン画像。
     スマホで箱を全幅にしたため、350pxの画像が522pxの箱の左端に寄っていた
     （「初期不良のご申告はこちら」「製品不良のご申告はこちら」「有償修理－費用はこちら」
      「よくあるご質問FAQ」が該当）。中央に揃える。
     PC（1240px以上）では箱が画像なりの幅なので、もともと中央に並んでいる。 */
  .top_flow-item { text-align: center; }
  .top_flow-item img { display: inline-block; }

  /* ---- トップのヒーロー ----
     base.css は top:-420px / left:700px で画像の右側に文字を重ねている。
     left:700px + width:500px = 1200px なので、1200px未満では必ずはみ出す。
     最初は重ねるのをやめて画像の下に流したが、PCと見た目が変わってしまうため、
     「見出しは画像の上・説明文は画像の下」に作り直した。

     ・見出しを載せる位置は画像の右上。ここは無地の明るい壁なので黒文字が読める
       （ノートや眼鏡が写っているのは画像の下半分と左側）。
     ・文字サイズは clamp() で画面幅に追従させる。そのまま比率で縮めると
       375pxでは11px相当になって読めないため、下限を決めて大きめに出す。
     ・説明文（.text2）は画像の上に載せると4行になって収まらないので、
       画像の下に本文と同じ大きさで置く。 */
  #main_img { position: relative; }
  #main_img img { display: block; width: 100%; height: auto; }
  #main_img section { padding: 14px 16px 4px; }
  #main_img .text {
    position: absolute;
    top: 11%;
    right: 3%;
    left: auto;
    /* 幅を固定すると、文字より箱のほうが広くなって左に寄って見える。
       max-content で文字の幅ぴったりにすると、右端が揃って PC と同じ位置に来る
       （PCは left:700px＝画像の58%から始まる）。
       max-width は、文字が大きくなる広い画面で行き過ぎないための上限。 */
    width: max-content;
    max-width: 58%;
    margin: 0;
    color: #000;
    font-size: clamp(18px, 5.2vw, 34px);
    line-height: 1.2;
    /* 壁の色が一定でない機種・拡大時に備えて、白いにじみで文字を浮かせる */
    text-shadow: 0 0 6px rgba(255, 255, 255, .95), 0 0 16px rgba(255, 255, 255, .75);
  }
  /* 見出しの中に style="font-size:30px" が直接書かれているため、これだけは !important で上書きする */
  #main_img .text span {
    font-size: clamp(11px, 2.9vw, 20px) !important;
    line-height: 1.45;
  }
  #main_img .text2 {
    position: static;
    top: auto;
    left: auto;
    width: auto;
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
  }

  /* ---- YouTubeの埋め込み ----
     <iframe width="550" height="309"> と直に書かれているため、
     375pxの画面では191pxはみ出していた（よくあるご質問5ページ）。
     iframe のはみ出しはページの scrollWidth に出ないので、
     53ページの横はみ出し検査では見つけられなかった。
     枠いっぱいに縮め、縦横比は 550:309 のまま保つ。 */
  iframe[src*="youtube"] {
    display: block;
    width: 100%;
    max-width: 550px;
    height: 309px;                 /* aspect-ratio が効かない古い環境向けの控え */
    margin: 10px auto;
    border: 0;
  }

  /* ---- グローバルナビ：8項目を4列×2段に折り返す ---- */
  #nav_bg { height: auto; }
  .nav {
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }
  .nav li {
    width: 25%;
    float: none;
    box-sizing: border-box;
    border-left: 0;
    border-right: 1px solid rgba(255, 255, 255, .45);
    border-bottom: 1px solid rgba(255, 255, 255, .45);
  }
  .nav li + li { border-left: 0; }
  /* 文字サイズは px で決め打ちする。base.css は em 指定（body 10.4px の1.3倍＝13.5px）で、
     2列にした際に 1.15em（＝12px）まで落としていたが、本文16.5pxとの差が大きく
     メニューだけ小さく見えてしまうため、中間の14.5pxに上げた。
     375px・2列でも「お問い合わせフォーム」「基板ユニットについて」が1行に収まることを実測済み。 */
  .nav li a {
    padding: 13px 4px 11px;
    font-size: 14.5px;
    line-height: 1.35;
    letter-spacing: 0.02em;
  }

  /* ---- 幅つきの表は、はみ出さずに横スクロールさせる ----
     .download_t は取扱説明書ダウンロードの5列表（画像／製品情報／ドライバー・アプリ／
     設定ツール／サポート情報）で、375pxの画面でも約800px必要になる。
     download系26ページすべてに入っているため、ここで一括して横スクロールにする。 */
  /* ---- 費用目安の表（.paid）と品質保証の表（.warranty） ----
     どちらも display:block にしていたが、それだと表のレイアウト計算が止まり、
     列幅の指定がきかなくなる（.download_t と同じ失敗）。表のままにする。

     .paid  ：13.5pxにすると、折り返さないのに必要な幅は308px。
              親の余白を詰めて336px確保できるので、横スクロールなしで収まる。
              全34セル中15セルが折り返していたのが0になり、表の高さは923px→585px。
     .warranty：5列。1列目に長い品名、2〜5列目は○と−だけ。
              折り返さずに並べると697px必要なので、画面には入らない。
              1列目46%・残り13.5%ずつに配分し、見出し「初期不良」は2行で見せる。
              表の高さは394px→271px。 */
  .paid {
    display: table;
    width: 100%;
    max-width: 480px;      /* タブレットで間延びしないように上限をつける */
    margin: 15px 0 30px;
  }
  .paid td, .paid th {
    box-sizing: border-box;
    font-size: 13.5px;
    padding: 7px 8px;
    line-height: 1.5;
  }

  .warranty {
    display: table;
    table-layout: fixed;
    width: 100%;
    max-width: 700px;
    margin: 15px 0 30px;
  }
  .warranty td, .warranty th { box-sizing: border-box; padding: 8px 4px; }
  /* セルの中身は <p> に入っている。<p> が16.5pxのままだったのが
     25セル全部が折り返していた主因。td だけ指定しても効かない。 */
  .warranty td, .warranty th,
  .warranty td p, .warranty th p {
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
  }
  .warranty tr:first-child > *:nth-child(1) { width: 46%; }
  .warranty tr:first-child > *:nth-child(n+2) { width: 13.5%; }
  /* 表の背景は白のまま保つ。
     ※以前ここで background: のグラデーション（一括指定）を書いたところ、
       base.css の background-color:#fff が打ち消されて透明になり、
       下の紺色が透けてグレーの文字が読めなくなった。一括指定は使わないこと。
     横スクロールできる合図は、背景に触らない内側の影で出す。 */
  /* ---- 取説表は「表のまま」にして、スクロールは親の箱に持たせる ----
     表そのものに display:block を掛けると、ブラウザは表のレイアウト計算をやめ、
     セルに書いた width を「参考値」としてしか見なくなる。
     実際、製品情報の列に 210px と書いても 60px でしか使われていなかった。
     display:table に戻して table-layout:fixed にすると、書いた幅がそのまま通る。 */
  .download_d {
    padding: 0;
    margin: 15px 0 40px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .download_t {
    display: table;
    table-layout: fixed;
    width: 818px;
    max-width: none;
    margin: 0;
    background-color: #fff;
  }
  /* セルを border-box にする。content-box のままだと、書いた幅に
     左右のパディングが足され、145と書いた列が166pxになってしまう。 */
  .download_t th, .download_t td { box-sizing: border-box; }

  /* 黒い見出しの「余計な幅」の正体。
     見出しの文字は th の中の <p class="b_kado">（黒い角丸）に入っていて、
     base.css がこれに width:210px の固定幅を与えている。
     文字は「ドライバー・アプリ」でも117pxしかないのに、
     ピルが 210px＋左右余白13px＝223px あり、列をそこまで押し広げていた。
     文字幅に合わせて縮める。 */
  .download_t .b_kado {
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.45em 0.4em;
    font-size: 12px;
    letter-spacing: 0;
  }

  /* 表の中の文字は、列ごとに 15px / 12px / 10.4px とバラついていたので揃える。
     base.css が `.download_t td.text1` のように「クラス2つ」で指定しているため、
     こちらも同じ強さ（クラス2つ）で書かないと勝てない。
     `.download_t td` だけでは負けて、揃わなかった。 */
  .download_t th,
  .download_t td,
  .download_t td.img,
  .download_t td.text,
  .download_t td.text1,
  .download_t td.text2,
  .download_t td.text3,
  .download_t th.midasi1,
  .download_t th.midasi2,
  .download_t th.midasi3 {
    font-size: 13px;
    line-height: 1.6;
  }
  .download_t td.text p { font-size: 12px; }

  /* 表の中の画像は縮めない。
     base.css は .download_t img に width:140px / margin-left:40px を指定している。
     ここに上の `img { max-width:100% }` が効くと、画像が55pxのセル幅まで潰され、
     高さ（100px固定）はそのままなので縦長に歪み、隣の列の文字と重なってしまう。
     表は横スクロールするので、中身は原寸のままでよい。 */
  .download_t img { max-width: none; }

  /* ---- 取説表の列幅を配分し直す ----
     自動配分だと製品情報の列が132pxまで痩せ、「タイプ：／ボタン型／カメラ／…」と
     8行に折り返して行がとても高くなっていた。一方で黒い見出し
     （ドライバー・アプリ／設定ツール／サポート情報）の列が230pxずつ取りすぎていた。
     製品情報を広げ、見出し側を詰めて、表全体の幅も縮める。
       変更前: 画像195 + 製品情報132 + 230×3 = 1016px
       変更後: 画像160 + 製品情報210 + 165×3 = 865px */
  .download_t img { width: 130px; height: 93px; margin: 14px 9px; }
  .download_t td.text1,
  .download_t th { padding: 14px 10px 14px 6px; }
  .download_t td.text,
  .download_t td.text2,
  .download_t td.text3,
  .download_t th.midasi1,
  .download_t th.midasi2,
  .download_t th.midasi3 { padding: 14px 10px; }

  /* 列幅は1行目のセルで決まる。1行目の先頭2つは class が付いていない
     （画像の上と製品情報の上が、ただの td / th）ので、並び順で指定する。 */
  .download_t tr:first-child > *:nth-child(1) { width: 148px; }  /* 画像130＋余白18 */
  .download_t tr:first-child > *:nth-child(2) { width: 226px; }  /* 製品情報：中身214px分。25ページ実測で21ページが折り返さない幅 */
  .download_t tr:first-child > *:nth-child(3),
  .download_t tr:first-child > *:nth-child(4),
  .download_t tr:first-child > *:nth-child(5) { width: 148px; }  /* 黒いピル118pxが1行に収まる幅 */

  /* ---- 見出しに「製品情報」と横スクロールの案内を出す ----
     この表は画面より広く、指で右に送って残りの列（ドライバー・アプリ／設定ツール／
     サポート情報）を見る作り。ところが表の途中から読み始めると、
     右に送れること自体に気づけない。
     見出し行の2番目のセル（製品情報の上）は中身が空なので、
     HTMLを触らずにCSSだけでラベルと案内文を置ける。
     148＋226＝374px なので、375pxの画面にちょうど収まる。 */
  .download_t tr:first-child > *:nth-child(2) {
    vertical-align: middle;
    text-align: center;
    padding: 12px 6px;
  }
  .download_t tr:first-child > *:nth-child(2)::before {
    content: "製品情報";
    display: inline-block;
    background: #000;
    color: #fff;
    border-radius: 1.9em;
    padding: 0.5em 1.5em;
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0;
  }
  .download_t tr:first-child > *:nth-child(2)::after {
    content: "表は右へスクロールできます →";
    display: block;
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: #2F5597;          /* サイトのナビと同じ紺 */
    font-weight: bold;
    letter-spacing: 0;
  }

  /* ---- 質問ページ（question1〜20）の見出しまわり ----
     base.css は 1200px の帯の中に、
       ・質問番号 .faq_num  … margin-left:1160px / margin-top:-55px で右端へ
       ・質問タイトル .text_area_answer_p … position:relative + left:110px / bottom:40px
     という「ズラして重ねる」置き方をしている。
     狭い画面だと番号が画面の外（x=1160）へ飛び、ページ幅が1185pxに広がっていた。
     ズラしをやめて、通常の流れに戻す。 */
  .faq_num, .faq_num1 {
    margin-left: 0;
    margin-top: 0;
    padding: 0 16px 6px;
    text-align: right;
    font-size: 28px;
    /* base.css は color:#fff。PCでは帯の紺色の部分に乗っていたが、
       狭い画面では帯の白い部分へ移動して見えなくなるため、紺に変える。 */
    color: #2f5597;
  }
  .text_area_answer_p {
    position: static;
    left: auto;
    bottom: auto;
    padding: 0 16px;
    font-size: 18px;
    line-height: 1.5;
  }
  .text_area_answer_title {
    height: auto;
    min-height: 64px;
    padding: 14px 0 6px;
    background-size: cover;
    background-position: left center;
  }
  /* 回答欄の2段組み（550px×2）は縦積みにする */
  .answer_area .left,
  .answer_area .right {
    float: none;
    width: auto;
  }
  #text_area_answer .text_area_answer_sub { padding: 20px 16px; }

  /* ---- フッター ---- */
  #footer_list2 { padding: 24px 16px; }

  /* ---- ページトップボタン ---- */
  #page_top { bottom: 12px; right: 12px; }
  #page_top a { width: 72px; padding: 24px 0; font-size: .95em; }
}

@supports (aspect-ratio: 1 / 1) {
  @media screen and (max-width: 1239px) {
    iframe[src*="youtube"] { height: auto; aspect-ratio: 550 / 309; }
  }
}

/* =========================================================
   767px以下：スマホ
   ========================================================= */
@media screen and (max-width: 767px) {

  /* ---- 本文の読みやすさ（全ページ共通の土台） ----
     base.css は body に font-size:65%（＝10.4px）と line-height:30px を「固定値」で
     指定していて、それが全要素に継承されている。
     固定30pxのままだと、文字を大きくしたときに行間が広がらず窮屈になり、
     逆に小さい文字のところは間延びする。そこで文字サイズ比（1.65）に置き換える。

       行間 : 30px固定 → 1.65倍   本文16.5px×1.65 ≒ 27.2px（30pxより詰まる）
       字間 : 0.1em → 0.04em      1行に入る文字数が増え、縦の長さを抑える

     本文そのものの大きさは、次のブロックで 15px → 16.5px に上げている
     （base.css が px 直接指定なので、body の % を変えても効かないため）。

     この3つを合わせることで「文字は大きく、ページは長くならない」を狙っている。
     全ページがこのCSSを読むので、ページごとの font-size を個別に触る必要はない。 */
  body {
    line-height: 1.65;
    letter-spacing: 0.04em;
  }

  /* 本文は base.css が 15px を「px直接」で14箇所に書いているため、
     body の % を変えても大きくならない。同じ顔ぶれをここで上書きする。
     16.5px（＋10%）。行間1.65・字間0.04emと組み合わせることで、
     文字が1割大きくなってもページの長さは変更前とほぼ同じに収まる。
     ・パンくず（.breadcrumb）は案内表示なので15pxのまま据え置き */
  .text_area_index,
  .text_area_support_p,
  .text_area_support_sub p,
  .text_area_faq_p,
  .text_area_faq_sub p,
  .faq_area2 li p,
  .text_area_answer_sub p,
  .text_area_unit_p,
  .text_area_unit_sub p,
  .text_area_download_p {
    font-size: 16.5px;
  }
  /* .download_t td.text1 は、ここに入れると表の中央列だけ16.5pxになり
     左右の列（12px）と揃わなくなるため外した。表の文字は上でまとめて13pxにしている。 */

  /* ---- 表を置いている箱の左右余白を詰める ----
     .text_area_support_sub は左右40pxずつ取っていて、375pxの画面では
     表に使える幅が280pxしか残らず、費用目安の表が折り返していた。
     左右12pxにすると336px使える。上下の40pxは詰めると詰まって見えるので30pxに留める。
     この箱を使うのは about_support / contact_form / paid_accessories / paid_request の4ページ。 */
  .text_area_support_sub { padding: 30px 12px; }

  /* ---- お問い合わせの6枚のカードだけ1列にする ----
     このカードは画像そのもので、説明文まで画像に焼き込まれている（360×190px）。
     2列だと154pxまで縮み、原寸の43%になって説明文が読めなかった。
     1列なら344px＝原寸の96%で出るので、画像を作り直さずに読めるようになる。

     .unit_menu-item は5ページで使い回されていて、
     トップと各種ダウンロードの商品カード（2列のままにする指示あり）も同じclass。
     そのため画像のパスで、お問い合わせの6枚だけを選んでいる。 */
  .unit_menu-item:has(img[src*="fap/fome"]) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  /* ---- カードの画像を枠の中央に置く ----
     中身は <a class="shadow_box"><img></a> で、a は inline-block。
     枠だけ広げても text-align の指定がないので左端に寄ったままだった。
     375pxの画面では画像(360px)と枠(367px)がほぼ同じなので気づけず、
     390px以上の機種で右側に余白が出て発覚した（430pxでは右に58px）。
       390px → 右に18px / 414px → 42px / 430px → 58px
     .top_flow-item には同じ指定を既に入れてある。 */
  .unit_menu-item { text-align: center; }
  .unit_menu-item > a { display: inline-block; }

  /* ---- ナビは2列×4段 ---- */
  .nav li { width: 50%; }
  .nav li a { padding: 14px 4px 12px; }

  /* ---- トップのヒーロー：スマホでは文字を少し小さく ----
     重ねを外す指定そのものは 1239px以下のブロックに置いてある */

  /* ---- 「お困りごとから探す」のカードは2列 ----
     幅を46%にすると padding と margin が外側に加算されて2枚目が入らず1列になる。
     calc で余白のぶんを引き、box-sizing も border-box にして確実に2列に収める。 */
  .top_menu-box > .top_menu-item {
    width: calc(50% - 16px);
    box-sizing: border-box;
    padding: 6px;
    margin: 5px;
  }

  /* ---- 「各種ダウンロード」の商品カードは3列 ----
     25枚と数が多く、2列だと余白が目立って縦に長くなりすぎるため。
     （小さい端末では2列に落とす。下の479px以下の指定を参照） */
  .unit_menu-box > .unit_menu-item {
    width: calc(33.333% - 10px);
    box-sizing: border-box;
    padding: 4px;
    margin: 5px;
  }

  /* ---- カード以外が同じ並びに混ざっている場合は横幅いっぱいにする ----
     .unit_menu-box の中には商品カード25枚のほかに、説明文のブロック
     （.text_area_support_p）が1つ紛れている。カードと同じ幅にすると
     1行10文字ほどで折り返されて読めなくなるため、ここだけ全幅に戻す。 */
  .unit_menu-box > :not(.unit_menu-item),
  .top_menu-box > :not(.top_menu-item) {
    width: 100%;
    box-sizing: border-box;
  }

  /* ---- カードの並び全体を中央に寄せる ---- */
  .top_menu-box, .unit_menu-box, .top_flow-box {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 4px;
  }

  /* ---- 初期不良・修理対応の流れ（STEP）は2列に ----
     :not(:only-child) を付けているのは、同じ .top_flow-item でも
     「その他ご相談はこちら」のバナーだけは箱の中に1つしかなく、
     そこまで半分にすると小さくなりすぎるため。1つだけの箱は横幅いっぱいのまま。 */
  .top_flow-box { flex-wrap: wrap; }
  .top_flow-item { margin: 6px 0; }
  .top_flow-item:not(:only-child) {
    width: calc(50% - 12px);
    box-sizing: border-box;
    margin: 6px;
  }
  .top_flow-item:only-child { width: 100%; }

  /* ---- 節と節のあいだの余白を詰める ----
     base.css は節の上下に70px（.text_area / .text_area1）・60px（.text_area_download_index）、
     見出しの上に40pxの余白を取っている。PCでは適切だが、
     スマホでは合わせて110px＝画面の1/7が空白になり、間延びして見えていた。
     半分程度に詰める。1ページあたり約250px短くなる。 */
  .text_area,
  .text_area1,
  .text_area_download_index {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  h2.area,
  h2.area1,
  h2.download_index {
    padding-top: 24px;
    padding-bottom: 14px;
  }

  /* ---- 本文まわりの余白 ---- */
  .text_area_index,
  .text_area_support_p,
  .text_area_unit_p,
  .text_area_download_p { padding-left: 16px; padding-right: 16px; }

  /* ---- 見出しの文字を詰める ---- */
  .text_area .area,
  .attention_area .title { font-size: 1.4em; padding: 24px 16px 12px; }
  .text_area .sub,
  .attention_area .sub { font-size: 1.7em; }

  /* ---- フッターのブランド一覧を縦に ---- */
  #footer_list2 ul { float: none; width: auto; padding: 8px 0; }

  /* ---- インラインの margin:100px はスマホだと空きすぎるので詰める ---- */
  [style*="margin:100px"], [style*="margin: 100px"] {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
  }
}

/* =========================================================
   480px以下：小さいスマホ
   ========================================================= */
@media screen and (max-width: 480px) {
  .nav li a { padding: 12px 3px 10px; }
  #page_top a { width: 60px; padding: 18px 0; font-size: .85em; }
}

/* =========================================================
   479px以下：スマホでは商品カードを3列→2列に戻す
   （3列だと1枚あたり約110pxになり、商品名の2行が読めなくなるため）
   ========================================================= */
@media screen and (max-width: 479px) {
  .unit_menu-box > .unit_menu-item { width: calc(50% - 14px); }

  /* ---- ボタン画像は479px以下では縦積みにする ----
     2つ並びだと枠が164pxしかなく、250pxのボタン画像が60%に縮小されて
     文字が小さく見えてしまう。縦積みにすれば枠が約352pxになり、
     画像を原寸（100%）で表示できる＝画像の中の文字がそのままの大きさで出る。 */
  .top_flow-item:not(:only-child) {
    width: 100%;
    margin: 6px 0;
  }

  /* ただし「初期不良・修理対応の流れ」の図（STEP 01〜04）は2列のままにする。
     上の指定はボタン画像（250px幅）を原寸で出すためのものだが、
     .top_flow-item はボタンと流れの図の両方に使われているため、
     図まで巻き込んで1列に戻してしまっていた（2列にとのご指示に反していた）。
     流れの図は210px幅なので、2列＝164pxでも78%で読める。 */
  .top_flow-item:has(img[src*="top/top_flow"]) {
    width: calc(50% - 12px);
    box-sizing: border-box;
    margin: 6px;
  }
}

/* =========================================================
   359px以下：かなり小さい端末だけカードを1列にする
   （375pxのiPhoneは2列のままにしたいので、閾値を480→359に下げた）
   ========================================================= */
/* ============================================================
   タブレット（768px〜1239px）
   ============================================================ */
@media screen and (min-width: 768px) and (max-width: 1239px) {
  /* 768pxちょうど（iPadの縦）で、カードが1枚ずつ縦に並んでしまっていた。
     カード360px＋左右の余白で2枚並べると、あと4pxだけ足りないため。
     余白を5.3px→2pxに詰めると2枚入る。
     800px以上では元から2枚なので、この指定で変わるのは768px付近だけ。
     商品カードのページ（トップ・各種ダウンロード・基板ユニット・付属品）は
     枚数が変わらないことを確認済み。 */
  .unit_menu-item {
    margin-left: 2px;
    margin-right: 2px;
  }

  /* ---- ヒーローの見出しは、PCと同じ「画像の58%から」に固定する ----
     狭い画面では文字が入りきらないので右端から置いているが、
     768px以上は幅に余裕があるので、PC（left:700px ÷ 画像1200px ＝ 58.3%）に揃える。
     これをしないと、画像だけが大きくなる1000px前後で67%まで右に寄ってしまう。 */
  #main_img .text {
    left: 58%;
    right: auto;
    max-width: 39%;
  }
}

@media screen and (max-width: 359px) {
  .top_menu-box > .top_menu-item,
  .unit_menu-box > .unit_menu-item { width: 92%; }

  /* 320px級の小型端末では「表は右へスクロールできます →」の末尾が
     画面の外に出てしまうので、短い言い回しにする。 */
  .download_t tr:first-child > *:nth-child(2)::after {
    content: "右へスクロール →";
    font-size: 11px;
  }

  /* 320px級の小型端末では、14.5pxだと「基板ユニットについて」
     「お問い合わせフォーム」が2行に折り返すため、ここだけ13pxに落とす。 */
  .nav li a { font-size: 13px; letter-spacing: 0; padding: 12px 2px 10px; }
}

/* =========================================================
   紺色の帯の上の文字を白にする（1239px以下だけ）

   ★経緯（同じ失敗を繰り返さないための記録）
     .text_area_download_index は背景が紺（#2f5597）なのに、中の文字色が
     #666（濃いグレー）のままで読めなかったため、文字を白にした。
     ところがこの指定を「幅に関係なく全サイズ」に書いてしまい、
     PC表示で「サポート体制」の節がまるごと消えた。

   ★なぜPCで消えたか
     base.css は .text_area_download_index に height:1650px の固定値を与えている。
     PCでは中身がそれより高く、「サポート体制」と「保証対象の早見表」は
     **紺の箱の外（＝白い背景）にはみ出して**表示されている。
     そこに「文字は白」を当てたので、白地に白文字になって見えなくなった。
     1239px以下では .text_area_download_index を height:auto にしてあり、
     紺が中身の最後まで伸びるので、白文字で正しい。

   ★教訓：背景の指定が効いている範囲と、文字色を変える範囲は必ず一致させる。
     固定の高さが入っている箱は、中身がその外へはみ出していないかを先に確かめる。

   ★対象を絞っている理由：
     このページはHTMLのdivが閉じきれておらず、フッターまで紺ブロックの中に
     入っている。`.text_area_download_index *` のように一律で白にすると、
     白背景のフッターが「白地に白文字」になって消える。
   ========================================================= */
@media screen and (max-width: 1239px) {
  .text_area_download_index .text_area_index,
  .text_area_download_index .text_area_index * {
    color: #fff;
  }
  .text_area_download_index .warranty th,
  .text_area_download_index .warranty td {
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
  }
  /* 白背景のボタンが中にある場合は、そこだけ元の色に戻す */
  .text_area_download_index .text_area_index .shadow_box,
  .text_area_download_index .text_area_index a img {
    color: inherit;
  }
}