@charset "utf-8";
/* ============================================================
   heartworks_sp.css  タカノハートワークス（www.takano-hw.com）
   スマートフォン・タブレット対応（2026-10）
   ------------------------------------------------------------
   ・読み込み位置: 共通ヘッダー部品 893 の htmlheader（全テンプレート共通、<head> の末尾）
   ・PC（幅 980px 以上）の見た目は一切変えない。すべてのルールを
     @media (max-width: 979px) の中に置く（ハンバーガーの初期非表示だけ外）
   ・979px 以下 … 980px 固定幅の枠を流動化、画像ナビをハンバーガーに
   ・767px 以下 … 2カラム → 1カラム、製品カード・表・フォームを縦積み
   ・既存CSS: /css/style.css（共通）, /css/style_heartworks.css（HW専用）。
     幅は 980 / 740+40+200 / 1128（-w）で固定、@media なし
   ・JS（/js/heartworks_sp.js）が <html> に .hwsp-js を付け、ハンバーガー
     （#hwsp-menu-btn / #hwsp-nav）と表の横スクロール枠（.hwsp-scroll）を作る。
     JS が無いときは #globalNavi を3列の画像グリッドで出す
   ============================================================ */

/* JSが作る要素の初期状態（PC では常に非表示） */
#hwsp-menu-btn,
#hwsp-nav { display: none; }

/* ============================================================
   タブレット以下（979px 以下）
   ============================================================ */
@media screen and (max-width: 979px) {

  /* ---------- 基本 ---------- */
  html, body { min-width: 0 !important; }          /* トップ(891)の body{min-width:980px} を無効化 */
  body { -webkit-text-size-adjust: 100%; text-align: left; }
  img { max-width: 100%; height: auto; }            /* width/height 属性の画像も枠内に収める */

  /* 980px 固定幅の枠を流動化 */
  #header .inner, #header .inner-w,
  #globalNavi .inner, #globalNavi ul,
  #topicsPath .inner,
  #contents_wrap, #contents_sub_wrap,
  #contents-w,
  #contentsFooter .inner, #footer .inner,
  #common_footbnrs,
  #index_productslist, #index_productslist ul {
    width: auto !important;
    max-width: 100%;
  }

  /* ---------- ヘッダー ---------- */
  #header { height: auto; }
  #header .inner, #header .inner-w {
    position: relative;
    overflow: visible;
    min-height: 48px;
    padding: 10px 64px 10px 12px;
    box-sizing: border-box;
  }
  #header .logo {
    float: none;
    width: auto;
    padding: 0;
    font-size: 0;            /* h1 の行間を消す */
  }
  #header .logo img { max-width: 230px; height: auto; display: block; }

  /* JS なしのときはサブナビ・検索を縦に並べる（JS ありならドロワーに移すので隠す） */
  #head_subnavi { float: none; width: auto; overflow: visible; padding-top: 6px; }
  #head_subnavi ul.navi, #head_subnavi ul.naviDW { float: none; padding-left: 0; }
  #head_subnavi ul.navi li, #head_subnavi ul.naviDW li { padding: 4px 12px 0 0; font-size: 12px; }
  #searchBox { float: none; width: auto; height: auto; padding: 8px 0 0; }
  #searchBox span { float: none; display: inline-block; width: calc(100% - 72px); vertical-align: middle; }
  #searchBox input.btn { vertical-align: middle; }
  html.hwsp-js #head_subnavi,
  html.hwsp-js #searchBox { display: none; }

  /* ---------- グローバルナビ ---------- */
  /* JS なし: 画像ボタンを3列で並べる */
  #globalNavi { height: auto; border-bottom: 1px solid #cccccc; }
  #globalNavi .inner { height: auto; }
  #globalNavi ul { height: auto; display: flex; flex-wrap: wrap; font-size: 0; }
  #globalNavi li { width: 33.333%; margin: 0; }
  #globalNavi li a, #globalNavi li a:hover, #globalNavi li a.current { height: auto; }
  #globalNavi li img { width: 100%; height: auto; box-sizing: border-box; }
  /* JS あり: ハンバーガーに置き換える */
  html.hwsp-js #globalNavi { display: none; }

  /* ハンバーガーボタン */
  html.hwsp-js #hwsp-menu-btn {
    display: block;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 6px 0 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #hwsp-menu-btn span {
    display: block;
    width: 26px;
    height: 3px;
    margin: 0 auto 5px;
    border-radius: 2px;
    background: #783500;
    transition: transform .2s, opacity .2s;
  }
  #hwsp-menu-btn i {
    display: block;
    font-style: normal;
    font-size: 9px;
    line-height: 1;
    color: #783500;
    text-align: center;
  }
  html.hwsp-open #hwsp-menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  html.hwsp-open #hwsp-menu-btn span:nth-child(2) { opacity: 0; }
  html.hwsp-open #hwsp-menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ドロワー（JSが body 末尾に作る） */
  html.hwsp-open #hwsp-nav { display: block; }
  html.hwsp-open body { overflow: hidden; }
  #hwsp-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 100000;
    background: rgba(0, 0, 0, .45);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: left;
  }
  #hwsp-nav .hwsp-panel {
    width: 84%;
    max-width: 360px;
    min-height: 100%;
    margin: 0 0 0 auto;
    padding: 0 0 40px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, .25);
  }
  #hwsp-nav .hwsp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 8px 10px 16px;
    border-bottom: 2px solid #FFD27F;
    background: #FEE7BD;
    color: #916234;
    font-weight: bold;
    font-size: 15px;
  }
  #hwsp-nav .hwsp-close {
    width: 44px;
    height: 44px;
    border: 0;
    background: transparent;
    color: #916234;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
  #hwsp-nav ul { margin: 0; padding: 0; list-style: none; font-size: 14px; }
  #hwsp-nav li { margin: 0; padding: 0; }
  #hwsp-nav .hwsp-gnav li a {
    display: block;
    padding: 14px 36px 14px 16px;
    border-bottom: 1px solid #FFE6BD;
    color: #783500;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
  }
  #hwsp-nav .hwsp-gnav li a::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: 2px solid #FFB42D;
    border-right: 2px solid #FFB42D;
    transform: rotate(45deg);
  }
  #hwsp-nav .hwsp-gnav li a.current { background: #FFF4DF; }
  #hwsp-nav .hwsp-subnav { padding: 6px 0; border-bottom: 1px solid #FFE6BD; }
  #hwsp-nav .hwsp-subnav li a {
    display: block;
    padding: 9px 16px;
    color: #555;
    font-size: 13px;
    text-decoration: none;
  }
  #hwsp-nav .hwsp-subnav li a::before { content: "▶ "; color: #999; font-size: 10px; }
  #hwsp-nav .hwsp-search { padding: 12px 16px; border-bottom: 1px solid #FFE6BD; }
  #hwsp-nav .hwsp-search form { display: flex; align-items: center; }
  #hwsp-nav .hwsp-search span {
    display: block;
    flex: 1 1 auto;
    border: 1px solid #b6b8b8;
    overflow: hidden;
  }
  #hwsp-nav .hwsp-search input[type="text"] {
    width: 100%;
    height: 34px;
    padding: 0 8px;
    border: 0;
    box-sizing: border-box;
    font-size: 16px;
    color: #5e5e5e;
  }
  #hwsp-nav .hwsp-search input.btn { flex: 0 0 auto; margin-left: 8px; height: 24px; }
  /* 商品ラインナップ（製品ページで #side_contents のメニューを複製） */
  #hwsp-nav .hwsp-side h2 {
    margin: 0;
    padding: 12px 16px 8px;
    font-size: 14px;
    font-weight: bold;
    color: #916234;
    background: #FEE7BD;
    border-bottom: 2px dotted #F9C66D;
  }
  #hwsp-nav .hwsp-side .side_cat_pagelinks { margin: 0; }
  #hwsp-nav .hwsp-side .side_cat_pagelinks li a { padding: 11px 16px; font-size: 13px; }
  #hwsp-nav .hwsp-side .side_cat_pagelinks li.menuActive menu li a { padding: 10px 16px 10px 28px; }

  /* ---------- トップページ（892） ---------- */
  #mainVisual { overflow: hidden; }
  .flex-control-nav { width: auto !important; }
  #contents_wrap { padding: 0 10px; box-sizing: border-box; }
  #index_topics { float: none; width: auto; margin-right: 0; }
  #index_topics h2 img { max-width: 100%; }
  #index_topics dl { width: auto; padding: 6px 10px 0; margin-bottom: 25px; }
  #index_topics dt, #index_topics dd { float: none; width: auto; }
  /* 日付(dt)は PC と同じ左寄せのまま。種別の帯は 150px 幅の背景画像の右側に描かれているので padding を足さない */
  #index_topics dl dt { padding: 10px 5px 2px; font-size: 13px; color: #666; }
  #index_topics dl dt img { display: block; margin-top: 4px; }
  #index_topics dl dd { border-top: none; padding: 2px 5px 12px; }
  #index_topics dl dd div[style*="height:6em"] { height: auto !important; max-height: 6em; }
  #indexside_contents { float: none; width: auto; text-align: center; padding-bottom: 10px; font-size: 0; }
  #indexside_contents ul.side_bnrlinks li { display: inline-block; margin: 0 3px 8px; vertical-align: top; }
  #indexside_contents ul.side_bnrlinks li img { width: 200px; max-width: 44vw; height: auto; padding: 0 !important; }
  #index_contents, #index_contents-w { padding: 20px 0 10px; }
  #index_productslist { margin: 0 auto 10px; padding: 0 10px; box-sizing: border-box; }
  #index_contents h2.overlined, #index_contents-w h2.overlined {
    width: auto;
    margin: 0 -10px 20px;
    padding: 6px 15px;
    font-size: 20px;
  }
  #index_productslist ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
  #index_productslist ul li {
    width: calc(50% - 5px);
    height: auto;
    margin: 0 0 10px !important;
  }
  #index_productslist ul li a { display: block; width: auto; height: auto; }
  #index_productslist ul li img { width: 100%; height: auto; display: block; }

  /* ---------- 2カラム共通（946 系） ---------- */
  #contents_sub_outwrap { padding: 10px 0 30px; }
  #contents_sub_wrap { padding: 0 10px; box-sizing: border-box; }
  #topicsPath { margin-bottom: 10px; padding: 12px 0 5px; }
  #topicsPath .inner { font-size: 12px; line-height: 1.6; }
  #topicsPath a { font-size: 12px; }
  #topicsPath .fsa_inner, #topicsPath .login_condition { float: none; width: auto; text-align: left; padding: 5px 0 10px; }

  /* タブレット: 2カラムのまま幅だけ流動化（本文 = 残り全部、サイド 200px） */
  #contents { width: calc(100% - 230px) !important; margin-right: 30px !important; padding-bottom: 30px !important; }
  #side_contents { width: 200px !important; }

  /* 見出し */
  h2.overlined { margin: 0 -10px 20px !important; }
  h2.overlined span {
    display: block;
    padding: 6px 15px !important;
    font-size: 19px;
    line-height: 1.4;
  }
  h3 { font-size: 18px; }
  h2.product_name { font-size: 22px; padding: 5px 0; line-height: 1.3; }
  span.subcopy { font-size: 15px; }
  .product_price { width: auto; font-size: 15px; }

  /* 本文中の画像・固定幅 */
  #contents img, #contents-w img { max-width: 100%; height: auto; }
  #contents table { max-width: 100%; }
  #contents [style*="width:"][style*="px"]:not(img):not(input):not(select):not(textarea):not(td):not(th):not(table) { max-width: 100%; box-sizing: border-box; }

  /* JS が付ける横スクロール枠（幅がはみ出す表・大きい画像テーブル） */
  .hwsp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1em; }
  .hwsp-scroll > table { width: auto !important; min-width: 100%; max-width: none; }   /* 列を潰さず、はみ出た分をスクロール */
  .hwsp-scroll th, .hwsp-scroll td.specinfo_header { white-space: nowrap; }
  .hwsp-scroll-hint { font-size: 11px; color: #888; text-align: right; margin: 0 0 2px; }
  /* 動画（iframe）の比率保持枠 */
  .hwsp-video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; margin-bottom: 1em; }
  .hwsp-video > iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

  /* 商品一覧カード（商品情報トップ 947 など） */
  ul.productlist_list li {
    display: block;
    width: 100%;
    height: auto;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  ul.productlist_list li .ph_product_cat { width: 38%; padding: 8px 0; box-sizing: border-box; }
  ul.productlist_list li .ph_product_cat img { width: 100%; max-width: 150px; height: auto; }
  ul.productlist_list li .product_info { width: 62%; padding: 12px 10px 12px 0; box-sizing: border-box; }
  ul.productlist_list li .product_info p { height: auto; min-height: 0; margin-bottom: 6px; }
  ul.productlist_list li .product_info h2 { font-size: 13px; }
  ul.productlist_list li .product_info img { margin-top: 10px; max-width: 150px; }
  .link_comparison { padding: 0 0 30px; }

  /* カテゴリ配下の商品カード（968 など） */
  ul.product_udcat_itemlist { display: flex; flex-wrap: wrap; justify-content: space-between; }
  ul.product_udcat_itemlist li {
    width: calc(50% - 5px);
    margin: 0 0 10px !important;
    padding: 10px 10px 48px;
    box-sizing: border-box;
  }
  ul.product_udcat_itemlist li p.item_comment { height: auto !important; }
  div.item_over {
    position: static;
    width: auto;
    height: auto;
    margin-top: 8px;
  }
  div.item_over a {
    width: auto;
    height: 36px;
    line-height: 36px;
    background: #FFB42D;
    border-radius: 4px;
    color: #fff;
    text-align: center;
    text-indent: 0;
    font-weight: bold;
    font-size: 13px;
  }
  div.item_over a:hover { background: #FECE79; }
  ul.product_udcat_itemlist li { position: static; padding-bottom: 10px; }

  /* 比較表 */
  #comparison { width: auto; margin: 0 0 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #comparison table { min-width: 640px; }

  /* 製品詳細ページの部品 */
  ul.product_singlemain_3cols li,
  ul.product_single_option li {
    width: 48%;
    margin: 0 1% 15px !important;
  }
  ul.product_singlemain_3cols li span { width: auto; display: block; }
  .spec_box01 { width: auto; }
  .spec_info { float: none; width: auto; padding-right: 0; }
  ul.product_functionlist li { width: 100%; margin-right: 0 !important; }
  ul.product_functionlist li .ph_product_cat { width: 30%; }
  ul.product_functionlist li .ph_product_cat img { width: 100%; max-width: 110px; }
  ul.product_functionlist li .product_info { width: 70%; box-sizing: border-box; }
  ul.galleries li { margin-right: 10px; }
  ul.galleries3col li { display: inline-block; float: none; width: 48%; height: auto; margin: 0 1% 15px; vertical-align: top; }
  ul.galleries1col li { width: 100%; height: auto; margin-right: 0; }
  ul.galleries1col li a { display: block; width: auto; height: auto; }
  ul.galleries1col img { max-width: 100%; max-height: none; }

  /* 製品ページ本文でよく使われる inline の display:table / table-cell（ul/li）を縦積みに */
  #contents ul[style*="display: table"], #contents ul[style*="display:table"] { display: block !important; }
  #contents li[style*="table-cell"] { display: block !important; padding: 0 0 10px !important; }
  #contents li[style*="table-cell"] img { display: block; margin: 0 auto; }

  /* 医療従事者確認 */
  #register { width: auto; margin: 30px 0; padding: 15px 10px 25px; box-sizing: border-box; }
  #register .btn { margin: 0; padding: 15px 5px; }
  #register .btn img, #register .btn input { max-width: 46%; height: auto; padding: 6px !important; box-sizing: border-box; vertical-align: middle; }

  /* フォーム（お問い合わせ・カタログ請求・取説DL・FSA） */
  table.fsa_dl { width: 100%; }
  table.fsa_dl th, table.fsa_dl td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
  }
  table.fsa_dl th { padding: 8px 10px; }
  table.fsa_dl th br { display: none; }
  table.fsa_dl td { padding: 10px; }
  table.fsa_dl td table { width: 100%; }
  table.fsa_dl td table td { padding: 0 0 6px; background: transparent; }
  table.fsa_dl td input[type="text"], table.fsa_dl td input[type="email"], table.fsa_dl td input[type="tel"],
  table.fsa_dl td textarea, table.fsa_dl td select {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;      /* iOS の自動ズームを防ぐ */
    padding: 6px;
  }
  table.fsa_dl td input.wide, table.fsa_dl td textarea.normal, table.fsa_dl td textarea.long { width: 100% !important; }
  table.fsa_dl td input.small { width: 60% !important; }
  table.fsa_dl td input.xsmall { width: 40% !important; }
  table.fsa_dl td span { display: inline-block; margin-top: 2px; }
  table.fsa_dl td label#select { display: block; margin-top: 8px; }
  table.fsa_dl td input[type="checkbox"], table.fsa_dl td input[type="radio"] {
    width: 18px; height: 18px; margin: 0 6px 0 0; vertical-align: -3px;
  }
  table.fsa_dl td input.checkBox, table.fsa_dl td.checkBox input { width: 18px; height: 18px; }
  div.Style2 textarea { width: 100%; }
  .formsend .inner { padding: 10px; }
  .login dt { float: none; width: auto; padding-top: 10px; text-align: left; }
  .login dd { padding-left: 0; }
  .login dd input { width: 100%; box-sizing: border-box; font-size: 16px; }

  /* サポート・FAQ・ダウンロード */
  ul#fsa_member_index_list li { display: block; width: auto; margin-right: 0; }
  ul#fsa_member_index_list li h3 { display: block; width: auto; height: auto; box-sizing: border-box; }
  ul#fsa_member_index_list li p { height: auto; }
  .acMenu dt, .acMenu dd, .acMenu dt.innerq, .acMenu dd.innera { width: auto; }
  .acMenu dd.innera { margin-left: 10px; }
  span.dl_itemname { float: none; display: block; width: auto; margin-right: 0; margin-bottom: .3em; }

  /* お知らせ一覧・詳細 */
  ul.dotlines { margin: 0 5px; }
  ul.dotlines li { padding: 10px 0; }
  span.topicsdate { float: none; display: block; margin: 0 0 4px; }
  .topics_body { line-height: 1.7; }
  .topics_body img { max-width: 100%; height: auto; }

  /* サイドカラム */
  #side_contents h2 { font-size: 17px; padding: 14px 10px 8px; }
  .side_cat_pagelinks li a { font-size: 14px; padding: 12px 10px 12px 15px; }
  .side_cat_pagelinks li a.menuActive { padding: 12px 10px 12px 15px; }
  .side_cat_pagelinks li.menuActive menu li a,
  .side_cat_pagelinks li.menuActive menu li:first-child a { font-size: 13px; padding: 11px 10px 11px 28px; }
  ul.side_bnrlinks li img { max-width: 100%; }

  /* ---------- フッター ---------- */
  #common_footbnrs { height: auto; padding: 0 10px; box-sizing: border-box; }
  #common_footbnrs ul li { display: block; padding: 6px 0; }
  #contentsFooter .inner, #footer .inner { padding: 0 10px; box-sizing: border-box; }
  #contentsFooter #footNavi2 li { margin-right: 14px; line-height: 2; }
  #footer p.footer_company_info { font-size: 12px; line-height: 1.6; }
  #footer h4 { font-size: 13px; margin-top: 6px; }
  #footer li { padding: 4px 12px 0 0; }
  #footer p.copyright { font-size: 11px; }

  /* ---------- 旧 コンバーES 特設（#cones）が残っていた場合の最低限 ---------- */
  #cones h1 { font-size: 36px; }
  #cones h2 { font-size: 20px; margin: 40px auto; }
  #cones .ChangeElem_Panel h2 { width: 90%; font-size: 22px; }
  #cones ul .fadein { position: static; transform: none; opacity: 1; }
  #cones .es-tab button { width: 72px; height: 72px; }
  #cones .es-2 section img, #cones .es-2 section > span { width: 100%; padding-left: 0; }
  #cones .es-2 > section:not(:first-child) { min-height: 0; }
  #cones .es-2 section:nth-child(9) video, #cones .es-4 video { width: 100%; }
  #cones .es-5 .es5_panel_hplist, #cones .es-5 .es5_panel_hplist a, #cones .es-5 .es5_panel_hplist a > img { width: 100%; height: auto; }
  #cones .es-6 section, #cones .es-6 section:nth-child(1), #cones .es-6 section:nth-child(3), #cones .es-6 section:nth-child(4) { width: 95%; }
  #cones .es-6 td { padding: 8px; font-size: 14px; line-height: 1.6; }
  #cones .es-6 section:nth-child(4) span { flex-wrap: wrap; }
  #cones .es-6 section:nth-child(4) span p { width: 100% !important; max-width: none; }
  #cones .es-7 { width: 95%; min-width: 0; }
  #cones .es-7 span { width: 100%; min-width: 0; }
}

/* ============================================================
   スマートフォン（767px 以下）: 1カラム化
   ============================================================ */
@media screen and (max-width: 767px) {
  #contents, #side_contents, #indexside_contents {
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
  }
  #contents { padding-bottom: 24px !important; }
  #side_contents {
    margin-top: 10px;
    padding-top: 24px;
    border-top: 2px solid #FFD27F;
  }
  #side_contents ul.side_bnrlinks { text-align: center; }
  #side_contents ul.side_bnrlinks li { display: inline-block; margin: 0 4px 10px; vertical-align: top; }
  #side_contents ul.side_bnrlinks li img { width: 200px !important; max-width: 46vw; }

  #header .logo img { max-width: 200px; }
  #globalNavi li img { border-left: 0; }

  h2.overlined span { font-size: 17px; }
  h3 { font-size: 17px; }
  h2.product_name { font-size: 20px; }

  /* 比較表・諸元表は横スクロール（JSの .hwsp-scroll と二重でも害なし） */
  table.specinfo { font-size: 13px; }
  table.specinfo td { padding: 6px; }

  /* 2列カードは幅が足りないときは1列 */
  ul.product_udcat_itemlist li { width: 100%; }
  ul.product_singlemain_3cols li, ul.product_single_option li, ul.galleries3col li { width: 100%; margin: 0 0 15px !important; }

  /* トップの商品カテゴリ画像（310px）は2列のまま */
  #index_topics dl dd { font-size: 13px; }

  /* フッターのサイトリンクは2列 */
  #footer ul.footer_sitelinks { display: flex; flex-wrap: wrap; }
  #footer ul.footer_sitelinks li { width: 50%; box-sizing: border-box; padding: 6px 6px 0 10px; }
}

/* 小さい端末（360px 以下） */
@media screen and (max-width: 360px) {
  #header .logo img { max-width: 170px; }
  #hwsp-nav .hwsp-panel { width: 90%; }
}