@charset "utf-8";
/* ==========================================================================
   responsive.css — added 2026-09-18
   Loaded AFTER style.css. Contains only additions; it changes no existing rule.
   Safe to delete if anything here is unwanted: the site reverts to its
   previous behaviour.
   ========================================================================== */

/* 1. Stop iOS Safari inflating text in landscape. ----------------------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* 2. Nothing may be wider than its container. --------------------------- */
img, video, iframe, embed, object, canvas, svg { max-width: 100%; }
video, iframe, embed, object { height: auto; }
pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

/* Long unbroken strings (part numbers, URLs) must wrap rather than stretch
   the page. */
td, th, p, li, dd, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* 3. Wide specification tables scroll inside their own box. -------------- */
/* Applied via the .tbl_scroll wrapper, which was added around every table
   of six or more columns. The table keeps its natural width and the box
   scrolls, so the page itself never scrolls sideways. */
.tbl_scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl_scroll > table { margin-bottom: 0; }

@media all and (max-width: 991px) {
  /* A hint that the box is scrollable, shown only where it actually is. */
  .tbl_scroll { border-right: 1px solid #d8dee7; }
  .tbl_scroll > table { min-width: 640px; }
}

/* 4. Tablet portrait, 768-1023px. --------------------------------------- */
/* The desktop navigation is still in use here (the mobile menu takes over at
   767px and below), so the dropdown panels need to fit the narrower screen. */
@media all and (min-width: 768px) and (max-width: 1023px) {
  #dropmenu li ul,
  #dropmenu li ul li ul { max-width: 100% !important; box-sizing: border-box; }
  .exp2, .exp3 { max-width: calc(100% - 30px); }
}

/* 5. Very narrow phones, 360px and below (Galaxy A/S base width). -------- */
@media all and (max-width: 360px) {
  body { font-size: 15px; }
  .tbl_scroll > table { min-width: 560px; }
}

/* 6. Tap targets. ------------------------------------------------------- */
@media all and (max-width: 767px) {
  .mean-nav a, a.lnav_btn { min-height: 44px; }
}

/* 7. Print. ------------------------------------------------------------- */
@media print {
  header, footer, #dropmenu, .mean-bar, .pagetop { display: none !important; }
  .tbl_scroll { overflow: visible; }
  .tbl_scroll > table { min-width: 0; }
  a[href]:after { content: ""; }
}

/* 8. 製品情報のドロップダウン: 項目が12件になり、既定の 410px では
   コンサルタントが青い枠からはみ出すため、製品メニューだけ高さを広げます。
   The products dropdown holds 12 items now. style.css fixes every dropdown
   at 410px, which cut off the last entry; raise it for this menu only so
   the other four menus keep their current height. ------------------------ */
@media all and (min-width: 768px) {
  #dropmenu li.gNav01:hover > ul { height: 470px !important; }
  #dropmenu li.gNav01:hover ul li ul { height: 390px !important; }
}

/* 9. カードの大きさを揃える / even up the card grids ------------------------
   対象: トップ / 製品情報 / 技術 / 会社案内 / 採用情報 / ドライバー / RCMA
   写真の高さを揃え、1行のカードをすべて同じ高さにし、見出しの予約高さで
   写真の開始位置を合わせ、「詳しくはこちら」を下端に揃えます。
   style.css と top.css は変更していません。 --------------------------------- */
.product_grid { display: grid; grid-auto-rows: 1fr;
  grid-template-columns: repeat(3, 1fr); gap: 27px 3.5%; }
.product_grid:before, .product_grid:after { display: none !important; }
.product_grid > .box_3sp { width: auto !important; margin: 0 !important;
  display: flex; float: none; }
.product_grid > .box_3sp > .box_common { width: 100%; }
.product_grid .box_common_in_top { display: flex; flex-direction: column; width: 100%; }
.product_grid .box_common_in_top .txt_cc { margin-bottom: 14px; }
.product_grid .box_common_in_top .txt_cc a { display: block; }
.product_grid .box_common_in_top .txt_cc img {
  width: 100%; height: 180px; object-fit: contain; object-position: center;
  float: none; }
.product_grid .box_common_in_top .more_link1 { margin-top: auto; }

@media all and (min-width: 992px) {
  .product_grid .box_common_in_top h3 { height: auto !important; min-height: 103px; }
}
@media all and (min-width: 769px) and (max-width: 991px) {
  .product_grid .box_common_in_top h3 { height: auto !important; min-height: 146px; }
}
@media all and (max-width: 768px) {
  .product_grid { grid-template-columns: repeat(2, 1fr); gap: 20px 4%; }
  .product_grid .box_common_in_top .txt_cc img { height: 165px; }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  .product_grid .box_common_in_top h3 { height: auto !important; min-height: 171px; }
}
@media all and (max-width: 480px) {
  .product_grid { grid-template-columns: 1fr; gap: 16px; }
  .product_grid .box_common_in_top h3 { height: auto !important; min-height: 0; }
  .product_grid .box_common_in_top .txt_cc img { height: 200px; }
}

/* 10. Bootstrap の .container は768px以上で幅970px固定のため、768〜991pxの
   画面（iPad縦768 / iPad Air 820 / iPad Pro11 834 / Galaxy Tab 800 /
   小型ノート）で最大200pxはみ出し、横スクロールが発生していました。
   Bootstrap pins .container at 970px from 768px up; make it fluid below 992. */
@media all and (max-width: 991px) {
  .container { width: auto !important; max-width: 100%; }
}

/* 11. ドライバーページ: 写真を中央に置き、説明とダウンロードリンクを
   その下に並べます（PDu100と同じ形）。
   driver page: centre the photo so the label, download link and price
   stack underneath it, matching the PDu100 block. */
.dr_unit .col-sm-4 img { float: none !important; margin: 0 auto; }
.dr_unit .col-sm-4 .txt_cc { margin-bottom: 10px; }
.dr_unit .col-sm-4 .pikachu { margin-bottom: 10px; }
/* 中央寄せのリストでは、左端に残る丸印は不要なので消します（矢印は残ります）
   drop the stray bullet on the centred download list; the icon stays */
.dr_unit .col-sm-4 ul.dl_list li { background-image: none; padding-left: 0; }