/* ============================================================
   那須電機工業株式会社様 スマートフォン対応CSS
   （見本で追加したのは このファイルと mihon.css の2枚だけ）

   既存のデザイン・HTML・画像には手を入れず、
   画面が狭いときだけ表示を組み替える。

   現行サイトは横1088px固定で作られているため、
   ・1088px以上（パソコン）＝ 現行のデザインをそのまま表示
   ・1087px以下（スマホ・タブレット）＝ 縦積みに組み替え
   という切り替えにしている。
   ※現行サイトはタブレット（横1024px）でも横スクロールが出るため、
     そこも一緒に解消している。
   ============================================================ */
@media screen and (max-width: 1087px) {
  /* --- 全体：固定幅1078pxの解除 --- */
  body {
    padding-bottom: 58px; /* 画面下の電話バーに文章が隠れないように */
  }

  #container {
    width: auto !important;
    background-size: 100% 5px; /* 1088px幅の帯画像を画面幅に合わせる */
  }

  #header,
  #footer {
    width: auto !important;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  /* PCで余白を作るための改行の連打は、スマホでは畳む（改行1つは残している） */
  .pc-spacer {
    display: none;
  }

  /* --- ヘッダー：重ね置き（絶対配置）をやめて縦に並べる --- */
  #header {
    height: auto !important;
    padding: 10px 12px 12px;
    text-align: center;
  }

  #header p1,
  #header p2,
  #header p3,
  #header p4,
  #header p5,
  #header p6,
  #header p7,
  #header p8,
  #header p9 {
    position: static !important;
    display: inline;
    top: auto !important;
    left: auto !important;
  }

  #header p2 {
    font-size: 30px;
    line-height: 1.2;
  }

  #header p3 {
    font-size: 15px;
  }

  /* PCでは「Tel.」と番号が離して置かれているので、スマホでも間をあける */
  #header p5 {
    margin-right: 4px;
  }

  #header p6 {
    font-size: 24px;
  }

  #header p8 {
    letter-spacing: normal !important;
  }

  /* 社名と電話のかたまりの間に、少しだけ間をあける */
  #header p4 {
    display: inline-block;
    margin-top: 8px;
  }

  /* --- メニュー：横1列8個 → 4列×2段 --- */
  ul#menu {
    width: auto !important;
    height: auto !important;
    padding-left: 0 !important;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
  }

  ul#menu li {
    float: none !important;
    flex: 1 0 25%;
    max-width: 25%;
    display: flex;
  }

  nav#g_navi li {
    display: flex;
  }

  nav#g_navi ul {
    height: auto !important;
  }

  nav#g_navi li strong,
  nav#g_navi li a {
    width: auto !important;
    height: auto !important;
    flex: 1;
    padding: 10px 4px 8px !important;
    font-size: 11px;
    line-height: 1.4;
    box-sizing: border-box;
  }

  /* --- スライドショー：1078×250 を画面幅に追従させる --- */
  #mainimg {
    width: auto !important;
    height: 0 !important;
    padding-bottom: 23.19% !important; /* 1078:250 の比率を保つ */
    overflow: hidden;
  }

  #slide_image,
  #slide_image2 {
    width: 100% !important;
    height: auto !important;
  }

  /* --- 2カラム（本文810px＋サイド220px）を縦積みに --- */
  #main,
  #side {
    float: none !important;
    width: auto !important;
    display: block !important;
    margin-left: 0 !important;
    padding: 10px 12px 20px !important;
  }

  /* --- 見出し：幅790px固定を解除し、文字が2行になっても収まるように --- */
  #main h2 {
    width: auto !important;
    height: auto !important;
    line-height: 1.5 !important;
    padding: 8px 10px !important;
  }

  /* --- トップページ：更新情報の枠 --- */
  #main dl.new {
    width: auto !important;
    height: auto !important;
    max-height: 260px;
    padding-left: 0 !important;
  }

  /* --- トップページ：新着商品の箱（写真＋説明の横並びを縦積みに） --- */
  .top-box {
    width: auto !important;
    float: none !important;
    margin: 0 0 10px !important;
  }

  .top-box table,
  .top-box table tbody,
  .top-box table tr {
    display: block;
    width: 100%;
  }

  .top-box table td.le,
  .top-box table td.ri {
    display: block;
    width: auto !important;
    height: auto !important;
    padding: 0 0 8px !important;
  }

  .top-box img {
    width: 150px;
    height: 150px;
    float: none !important;
    display: block;
    margin: 0 auto 8px;
  }

  /* --- トップページ：ご案内の4つの箱（重ね置きをやめて縦に並べる） --- */
  .top-box2,
  .top-box3,
  .top-box4 {
    position: static !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 86px;
    margin: 10px 0 0 !important;
    background-size: cover !important;
  }

  .top-box2 table,
  .top-box2 table tbody,
  .top-box2 table tr {
    display: block;
    width: 100%;
  }

  .top-box2 table td.one,
  .top-box2 table td.two {
    display: block;
    width: auto !important;
    height: auto !important; /* PCの固定高さ(85px)のままだと電球の絵が枠からはみ出す */
    text-align: center;
  }

  .top-box2 {
    padding-bottom: 6px;
  }

  .top img.a {
    position: static !important;
    float: none !important;
    display: block;
    width: 100% !important;
    max-width: 320px;
    height: auto !important;
    margin: 12px auto 0 !important;
  }

  .top img.c {
    width: auto !important;
    height: auto !important;
    max-width: 130px;
  }

  /* 大きな飾り文字は画面幅からはみ出すので少し詰める */
  .top span.d {
    font-size: 20px;
    letter-spacing: 4px;
  }

  .top span.e {
    font-size: 19px;
  }

  .top span.f {
    font-size: 14px;
  }

  .top span.g {
    font-size: 22px;
  }

  .top span.h {
    display: block;
    margin-top: 14px;
  }

  /* --- 会社概要の表：項目名と中身を縦積みに --- */
  .company table,
  .company table tbody,
  .company table tr {
    display: block;
    width: 100%;
  }

  .company table tr td {
    display: block;
    width: auto !important;
    box-sizing: border-box;
    border-right: none;
  }

  .company table td.le {
    padding: 4px 10px !important;
  }

  .company table td.ri {
    padding: 10px !important;
  }

  /* --- お問い合わせフォーム：項目名と入力欄を縦積みに --- */
  .formstyle hr {
    width: auto !important;
  }

  .formstyle table,
  .formstyle table tbody,
  .formstyle table tr {
    display: block;
    width: 100%;
  }

  .formstyle table tr td {
    display: block;
    width: auto !important;
    height: auto !important;
    box-sizing: border-box;
    border-right: none;
  }

  .formstyle input.text,
  .formstyle input.text1,
  .formstyle input.text2,
  .formstyle select,
  .formstyle textarea {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* 16px以上にすると、iPhoneでタップしたときの勝手な拡大を防げる */
    padding: 6px;
  }

  .formstyle input.text,
  .formstyle input.text1,
  .formstyle input.text2 {
    height: 34px;
  }

  .formstyle select {
    height: 38px;
  }

  .formstyle textarea {
    height: 140px;
  }

  .formstyle input[type="radio"] {
    margin-left: 0 !important;
    margin-right: 4px;
  }

  .formstyle input[type="submit"] {
    margin-left: 0 !important;
  }

  .submit_btn {
    width: 46%;
    font-size: 16px;
    padding: 10px 0;
  }

  /* --- サイド：「節電に興味がある方」など4つの丸アイコン --- */
  /* PCでは重ね置き（絶対配置）＋改行で位置を作っているので、並べ直す */
  .side > br,
  .side > .pc-spacer {
    display: none;
  }

  .side-box,
  .side-box2 {
    position: static !important;
    float: none !important;
    display: inline-block;
    vertical-align: top;
    width: 46% !important;
    height: auto !important;
    min-height: 130px;
    margin: 0 1% 10px !important;
  }

  /* --- サイド：問い合わせメニュー・採用情報 --- */
  #side .sidemenu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #side .sidemenu li {
    flex: 1 0 46%;
  }

  #side .sidemenu a {
    display: block;
    box-sizing: border-box;
  }

  /* --- フッターメニュー：4つが1行に収まらないので折り返す --- */
  ul#footermenu li {
    display: inline-block;
    padding: 4px 8px;
  }

  #pageTop {
    padding: 16px 0 !important;
  }

  /* --- スマホ用：タップで電話（見本で追加した導線） --- */
  .sp-call {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    background: #ec6800;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    padding: 13px 8px;
  }
}

/* ============================================================
   タブレット・小さめのノートパソコン（769px〜1087px）
   横幅に余裕があるので、メニューは現行と同じ横1列8個に戻す
   ============================================================ */
@media screen and (min-width: 769px) and (max-width: 1087px) {
  ul#menu li {
    flex: 1 0 12.5%;
    max-width: 12.5%;
  }

  nav#g_navi li strong,
  nav#g_navi li a {
    font-size: 12px;
    padding: 12px 4px 6px !important;
  }

  /* 中身が横に広がりすぎないよう、読みやすい幅で中央に置く */
  #main > .top,
  #main > .company,
  #main > .contact {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
  }

  /* 4つの丸アイコンが間延びしないよう幅を抑える */
  .side-box,
  .side-box2 {
    width: 160px !important;
    margin: 0 6px 10px !important;
  }
}