/**************************************************
サポート情報サーチ用　部品リスト対応／診断ナビ対応
main.css
Aug-27-2021 KawanoM.
**************************************************/

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, 'ヒラギノ角ゴ ProN w3',
    'Hiragino Kaku Gothic ProN w3', 'メイリオ', Meiryo, sans-serif;
  color: #333;
  background-color: steelblue;
  -webkit-text-size-adjust: 100%;
}

/* windowの中央に表示する方法 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  background-color: white;
}
.container:nth-of-type(1) {
  min-height: 700px;
  border-bottom: 1px solid white;
}
.container:nth-of-type(2) {
  border-top: 1ps solid white;
}
/* すべてのボックスサイズを枠線も含めて指定する方法 */
* {
  box-sizing: border-box;
}

/* ページyタイトルのスタイル */
#mytitle {
  width: 100%;
  background-color: #1d436a;
  margin: 0;
  padding: 20px 0;
}

h1 {
  margin: 0;
  text-align: center;
  color: white;
  line-height: 1.25;
}
/* タイトルを切りのいいところで2分割する */
.sub-title {
  display: block;
  width: auto;
  margin: 0 auto;
  padding: 0;
  font-size: 20px;
}
.main-title {
  display: block;
  width: auto;
  margin: 0 auto;
  padding: 0;
  font-size: 28px;
}

/* ページ説明文のスタイル */
#mytitle2 {
  background-color: #f2f2f2;
  padding: 10px 14px;
  text-align: left;
  border-collapse: collapse;
  width: 100%;
}

p.message {
  width: 100%;
  margin: 0 0 0.7em;
  text-align: left;
  font-size: 14px;
  line-height: 1.25;
  color: black;
}

p.message2 {
  width: 100%;
  padding-left: 1.5em;
  margin: 0 0 0.7em;
  text-align: left;
  font-size: 18px;
  line-height: 1.25;
  color: orange;
}


ul.message {
  width: 100%;
  margin: 1em 0;
  padding: 0 0 0 21px;
}
ul.message li {
  margin: 0 0 0.5em;
  font-size: 14px;
  line-height: 1.25;
}
/* 機種検索の品番入力 */
#myInput {
  display: block;
  width: 92%;
  margin: 0 auto 6px;
  padding: 12px 20px 12px 40px;
  background-image: url('../img/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  font-size: 16px;
  border: 0px solid #009cb5;
  outline: 4px solid #009cb5;
}
/* 検索結果件数 */
p#result {
  width: 92%;
  margin: 6px auto 10px;
  font-size: 14px;
  color: #009cb5;
}

/* 検索結果0件のメッセージ */
p.noresult {
  display: none;
  width: 94%;
  margin: 10px auto 50px;
  font-size: 14px;
  text-align: center;
}
p.inview {
  display: block;
}
p.noresult.inview .forPC {
  display: block;
}

/* 表の上の注意文 */
#note {
  width: 94%;
  margin: 10px auto;
  font-size: 12px;
  line-height: 1.25;
}
/* #myTbaleを入れるbox */
.scroll_table {
  display: block;
  width: 94%;
  margin: 0 auto 50px;
  padding: 0;
  overflow-x: auto;
  /* white-space: nowrap; */
  -webkit-overflow-scrolling: touch;
}
/* 機種サポート情報の一覧表 */
#myTable {
  white-space: normal;
  border-collapse: collapse;
  width: 100%;
  margin: 0;
  display: block;
}
#myTable caption {
  padding: 0em 0.5em;
  text-align: left;
  font-size: 12px;
  color: blue;
}
/* 検索初期は非表示／検索結果ありは表示 */
#myTable tr {
  background: #ffffff;
  display: none;
}
#myTable tr.inview {
  display: table-row;
}

#myTable tr:hover {
  background-color: #f8f8f8;
}

#myTable tr.header,
#myTable tr.header:hover {
  background: #e8e8e8;
  display: table-row;
}

#myTable th,
#myTable td {
  width: 10%;
  min-width: 50px;
  max-width: 150px;
  padding: 6px 4px;
  font-size: 14px;
  border: 1px solid #ddd;
  text-align: left;
  line-height: 1;
}

#myTable th:nth-child(1),
#myTable td:nth-child(1) {
  min-width: 100px;
}
#myTable th:nth-child(2),
#myTable td:nth-child(2) {
  min-width: 80px;
}
#myTable th:nth-child(3),
#myTable td:nth-child(3) {
  min-width: 60px;
}
#myTable th:nth-child(4),
#myTable td:nth-child(4) {
  min-width: 90px;
}
#myTable th:nth-child(5),
#myTable td:nth-child(5),
#myTable th:nth-child(6),
#myTable td:nth-child(6),
#myTable th:nth-child(7),
#myTable td:nth-child(7),
#myTable th:nth-child(8),
#myTable td:nth-child(8) {
  min-width: 50px;
}
#myTable th:nth-child(9),
#myTable td:nth-child(9) {
  min-width: 50px;
}
#footer {
  width: 100%;
  background: #1d436a;
  margin: 0;
  text-align: center;
  color: white;
  line-height: 6;
}

.auto-style1 {
  text-decoration: underline;
}
/* PAV部品リストの表示ボタン サポート情報の表の2行目はdummyです*/

.partslist {
  display: block;
  width: 6em;
  margin: 4px 0;
  padding: 0.5em 0;
  border: 0px solid deepskyblue;
  background-color: deepskyblue;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1;
  color: white;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
}
#myTable tr:nth-child(2) .partslist {
  background-color: gainsboro;
  color: black;
  cursor: default;
}
/* 診断ナビへのリンクボタン サポート情報の表の2行目はdummyです */
.doctornavi {
  display: block;
  width: 5em;
  margin: 4px 0;
  padding: 0.4em 0;
  border: 0px solid deepskyblue;
  background-color: deepskyblue;
  border-radius: 5px;
  font-size: 14px;
  line-height: 1;
  color: white;
  font-weight: normal;
  text-align: center;
  cursor: pointer;
}
#myTable tr:nth-child(2) .doctornavi {
  background-color: gainsboro;
  color: black;
  cursor: default;
}

/* メッセージ文中のボタンの凡例 */
.sample {
  width: 6em;
  margin: 2px 0.5em;
  padding: 0.4em 0;
  border: 0px solid deepskyblue;
  background-color: deepskyblue;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1;
  color: white;
  font-weight: normal;
  text-align: center;
}
@media screen and (min-width: 480px) {
  /**************************************************

  Stylesheet：480px以上の場合に適用

  **************************************************/
  h1 .sub-title {
    display: inline-block;
    font-size: 24px;
    margin-right: 14px;
  }
  h1 .main-title {
    display: inline-block;
    font-size: 24px;
  }
}
@media screen and (min-width: 600px) {
  /**************************************************

  Stylesheet：600px以上の場合に適用

  **************************************************/
  .container:nth-of-type(1) {
    min-height: 600px;
  }
  #myTable th:nth-child(1),
  #myTable td:nth-child(1) {
    min-width: 110px;
  }
  #myTable th:nth-child(2),
  #myTable td:nth-child(2) {
    min-width: 100px;
  }
  #myTable th:nth-child(3),
  #myTable td:nth-child(3) {
    min-width: 60px;
  }
  #myTable th:nth-child(4),
  #myTable td:nth-child(4) {
    min-width: 110px;
  }
}
@media screen and (min-width: 960px) {
  /**************************************************

  Stylesheet：960px以上の場合に適用

  **************************************************/
  .container:nth-of-type(1) {
    min-height: 640px;
  }

  h1 .sub-title {
    display: inline-block;
    font-size: 28px;
    margin-right: 14px;
  }
  h1 .main-title {
    display: inline-block;
    font-size: 28px;
  }

  #mytitle2 {
    padding: 30px;
    /* width: 80%; */
  }
  p.message {
    font-size: 16px;
    line-height: 1.25;
  }
  ul.message li {
    margin: 0 0 0.5em;
    font-size: 16px;
    line-height: 1.25;
  }

  #myInput {
    width: 95%;
    margin: 0 auto 6px;
  }
  p#result {
    width: 95%;
  }
  p.noresult {
    width: 95%;
    font-size: 16px;
  }
  p.noresult.inview .forPC {
    display: inline;
  }
  #note {
    width: 96%;
    margin: 10px auto;
    font-size: 14px;
  }
  .scroll_table {
    width: 96%;
  }
  #myTable caption {
    font-size: 14px;
  }
  #myTable th,
  #myTable td {
    font-size: 16px;
    padding: 8px 6px;
  }
  #myTable th:nth-child(1),
  #myTable td:nth-child(1) {
    min-width: 150px;
  }
  #myTable th:nth-child(2),
  #myTable td:nth-child(2) {
    min-width: 150px;
  }
  #myTable th:nth-child(3),
  #myTable td:nth-child(3) {
    min-width: 30px;
  }
  #myTable th:nth-child(4),
  #myTable td:nth-child(4) {
    min-width: 100px;
  }
}
@media screen and (min-width: 1280px) {
  /**************************************************

  Stylesheet：1280px以上の場合に適用

  **************************************************/
  body {
    padding-bottom: 16px;
  }
  .container:nth-of-type(1) {
    margin-top: 4px;
  }
  .container:nth-of-type(2) {
    margin-bottom: 16px;
  }
}
/**************************************************
end of main.css
**************************************************/