@charset "utf-8";
/* =========================================================
   オンスクエア公式サイト スマホ・タブレット用スタイル
   ・画面幅 999px 以下のときだけ効く（PC表示は一切変わらない）
   ・base.css の後に読み込む
   2026/09/17 試作
   ========================================================= */

@media screen and (max-width: 999px) {

  /* ---------- 全体 ---------- */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 14px; line-height: 1.7; }
  img { max-width: 100%; height: auto; }
  iframe { max-width: 100%; }
  #wrapper { overflow-x: hidden; }

  /* 固定幅の枠をすべて画面幅に */
  #header_area,
  #contents_wrapper,
  #footer_area,
  #left_contents,
  #right_contents,
  .sub_title_area,
  .btn_area,
  .tb_box, .tb_box_b, .att_tb_box,
  #information_area, #info_area,
  .information,
  .shop_name_area,
  .tokucho_area,
  .tab_contents .tab_box,
  .catalog_area,
  .payment_bg,
  .btn_repair_area,
  .btn_area_support,
  #company,
  .item_title1, .item_title2, .item_title3, .item_title4, .item_title5, .item_title6,
  .item_title7, .item_title8, .item_title9, .item_title10, .item_title11, .item_title12 {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  #contents_wrapper { padding: 0 12px; margin-bottom: 30px; }
  #left_contents,
  #right_contents { float: none; margin: 20px 0 0; }

  /* ---------- ヘッダー ---------- */
  header { height: auto; overflow: hidden; }
  #header_area { padding: 6px 12px; overflow: hidden; }
  #header_area_left { float: none; height: auto; }
  #header_area_left ul { display: flex; align-items: center; gap: 4px; margin: 0; }
  #header_area_left li { float: none; }
  #header_area_left li:first-child img { width: 96px; }
  #header_area_left li:nth-child(2) img { width: 180px; }
  #header_area_left h1 { margin: 0; }
  #header_area_right { float: none; height: auto; }
  #header_area_right ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; }
  #header_area_right li { float: none; }
  #header_area_right li img { height: 26px; width: auto; }
  #header_area_right br { display: none; }
  .header_transrate { float: none; margin: 6px 0 0; }

  /* ---------- グローバルメニュー（画像→文字ボタン） ---------- */
  nav { margin: 8px 0; }
  nav ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0; padding: 0; }
  nav ul li { float: none; }
  nav ul li a {
    width: auto; height: auto;
    background: #fff !important;
    border: 1px solid #ccc; border-radius: 4px;
    color: #333; text-align: center; text-decoration: none;
    padding: 10px 2px; font-size: 13px; font-weight: bold; line-height: 1.3;
  }
  nav ul li a:hover { text-decoration: none; color: #EA3C4A; }
  nav ul li a[class$="_on"] { background: #EA3C4A !important; border-color: #EA3C4A; color: #fff; }
  nav .text { display: block; }

  /* ---------- トップのスライド（JSが1000px固定を指定するので上書き） ---------- */
  #slide { width: auto; height: 26vw; max-height: 260px; overflow: hidden; }
  #slide ul { margin: 0; padding: 0; }
  #slide ul li { width: 100% !important; height: 100% !important; }
  #slide img { width: 100%; height: auto; }
  .slide-container-vertical { width: 100%; height: auto; aspect-ratio: 736 / 209; }
  .slide-wrapper-vertical img { width: 100%; height: auto; aspect-ratio: 736 / 209; }

  /* ---------- お知らせ ---------- */
  #information_area { height: 260px; -webkit-overflow-scrolling: touch; border: 1px solid #ddd; }
  .information { padding: 10px 8px; }
  .info_day { float: none; width: auto; font-weight: bold; color: #EA3C4A; }
  .info_text { float: none; width: auto; }

  /* ---------- バナー・ボタン（3列→2列/1列） ---------- */
  .btn_area {
    height: auto; margin-bottom: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 12px;
  }
  .btn_area > ul { grid-column: 1 / -1; margin-bottom: 16px; }
  .btn_area ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; }
  .btn1, .btn2, .btn3 { float: none; width: auto; margin: 0; }
  .btn1_box, .btn2_box, .btn3_box {
    float: none; width: auto; margin: 0 0 18px;
    font-size: 13px; line-height: 1.6;
  }
  .btn1_box img, .btn2_box img, .btn3_box img { display: block; width: 100%; margin-bottom: 4px; }

  /* ---------- 右側のバナー列 ---------- */
  #right_contents ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0; padding: 0; }
  #right_contents li { margin: 0; text-align: center; }
  #right_contents li img { width: 100%; }
  #right_contents br { display: none; }
  #right_contents a[href*="instagram"] img,
  #right_contents a[href*="twitter"] img,
  #right_contents a[href*="tiktok"] img,
  #right_contents a[href*="line.me"] img { width: 22%; }

  /* ---------- 製品一覧 ---------- */
  .item_list_area { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .item_list_box, .item_list_box_end,
  .item_list_box2, .item_list_box_end2 {
    float: none; width: auto; height: auto; margin: 0; padding: 10px;
  }
  .item_list_area ul { margin: 0; padding: 0; }
  .item_coming_soon { margin: 30px 0; }
  .item_end { background-position: right top; background-size: 40px auto; }
  .item_title_text { padding: 16px 12px; font-size: 14px; }
  .item_title1, .item_title2, .item_title3, .item_title4, .item_title5, .item_title6,
  .item_title7, .item_title8, .item_title9, .item_title10, .item_title11, .item_title12 {
    height: auto; min-height: 50px; overflow: hidden; background-size: cover;
  }

  /* ---------- 製品詳細 ---------- */
  .tokucho_area { padding: 0; margin-bottom: 30px; }
  .tokucho_left, .tokucho_right { float: none; width: auto; margin: 0 0 16px; }
  .tb_box, .att_tb_box { display: block; padding: 8px 10px; }
  .tb_list, .left_text2, .left_text3 { float: none; }
  .tb_list2 { display: block; }
  .left_text, .left_text2, .left_text3 { width: auto; font-weight: bold; padding: 4px 0; text-align: left; }
  .right_text, .right_text2, .right_icon, .mid1_text, .mid2_text {
    width: auto; border-left: 0; padding: 2px 0 6px; text-align: left;
  }
  .shop_name_area { display: block; height: auto; padding: 10px; }
  .shop_btn_box, .shop_btn_box_end { width: calc(33.3% - 8px); height: auto; aspect-ratio: 1; box-sizing: border-box; margin: 0 8px 8px 0; }
  .tab_contents label { margin-top: 8px; }
  .tab_contents .tab_box { padding: 12px 10px 0; }

  /* 表は横スクロール */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- その他のページ ---------- */
  .pdf_left, .pdf_right { float: none; width: auto; }
  .catalog1, .catalog2, .catalog3 { float: none; width: auto; margin: 0 0 16px; }
  .inquiry_box1, .inquiry_box2 { float: none; display: block; width: auto; margin: 0 0 20px; box-sizing: border-box; }
  .btn_inquiry a, .btn_support a { display: block; width: auto; height: auto; }
  .btn_support { margin: 0; }
  .btn_repair_area .left, .btn_repair_area .right { float: none; margin: 0 0 10px; }
  .faq_btn_l, .faq_btn_r { float: none; margin: 0 0 12px; }
  .faq_list_arrow { float: none; display: block; width: auto; }
  .sitemap_list { width: 45%; margin: 0 0 10px 3%; }
  .list ol { margin: 10px 0 0; padding: 0; overflow: hidden; }
  .list li { margin-bottom: 8px; }

  /* ---------- フッター ---------- */
  #footer_area { padding: 0 16px 30px; }
  .footer_company, .footer_link { float: none; width: auto; margin: 24px 0 0; }
  .footer_link ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; padding: 0; }
  .footer_link_category { grid-column: 1 / -1; }
  .footer_link li { margin: 8px 0 0; }
  #copyright { float: none; margin: 24px 0 0; text-align: center; font-size: 11px; }

  /* ページトップボタンを小さく */
  #page_top { right: 12px; bottom: 12px; font-size: 11px; }
  #page_top a { width: 56px; padding: 12px 0; border-radius: 28px; line-height: 1.3; }
}

/* ---------- スマホ（縦） ---------- */
@media screen and (max-width: 600px) {
  .btn_area { grid-template-columns: 1fr; }
  .btn_area ul { grid-template-columns: 1fr 1fr; }
  /* 製品カテゴリ：画像左・説明右の横並び */
  .btn1_box, .btn2_box, .btn3_box {
    display: grid; grid-template-columns: 42% 1fr; gap: 10px; align-items: start;
    margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #eee;
    font-size: 12.5px;
  }
  .btn1_box br, .btn2_box br, .btn3_box br,
  .btn1_box a:empty, .btn2_box a:empty, .btn3_box a:empty { display: none; }
  .btn1_box img, .btn2_box img, .btn3_box img { margin: 0; }
  nav ul li a { font-size: 12px; padding: 10px 1px; }
  .item_list_area { grid-template-columns: repeat(2, 1fr); }
  #right_contents ul { grid-template-columns: 1fr 1fr; }
  #slide { height: 26vw; }
}