@charset "UTF-8";
/*各カテゴリページで変わる可能性のある色*/
:root {
  --main-key-cl:#004896;
  --main-key-cl-2:#006DCC;
  --color-text: #adbdb7;
}

body {
  overflow-x: visible;
}

em {
  font-weight: bold;
  font-style: normal;
  color: #f04400;
}

.page-title {
  font-size: 18px;
  color: #464646;
}

h1, h2, h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  color: #333333;
  font-weight: normal;
  /*&[id]{
    padding-top: 1.5em;
  }*/
}

h1, h2 {
  font-size: 2rem;
}

h2 {
  border-bottom: solid 1px #DDDDDD;
}

h3 {
  margin-top: 2.5em;
  font-size: 1.5rem;
}

.use-box table th {
  font-size: 0.9em;
  line-height: 1.5em;
}
.use-box table td {
  width: 70%;
  padding: 10px 20px;
  text-align: left;
}
.use-box table td div {
  margin: 1em 0 2em;
}

main .container.d-flex {
  gap: 30px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
main .container.d-flex > * {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
main .container.d-flex .main-container {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
}
main .container.d-flex .navi-container {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 30%;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  position: -webkit-sticky;
  position: sticky;
  top: 25px;
  font-size: 1rem;
  background-color: #E5ECF1;
  border-radius: 20px;
}

.use-box {
  padding: 30px;
}

ol.page-navi {
  border-radius: 8px;
  line-height: 1.5;
  list-style: none;
  overflow: auto;
  padding: 16px;
}
ol.page-navi::before {
  background-color: #999999;
  content: "";
  height: calc(100% - 160px);
  position: absolute;
  top: 90px;
  width: 1px;
}
ol.page-navi::before {
  height: calc(100% - 220px);
}

.navilsit-item {
  color: var(--color-text-p-secondary);
  margin-bottom: 1rem;
  padding-left: 25px;
  position: relative;
}
.navilsit-item::before {
  background-color: #999999;
  border: 3px solid #E5ECF1;
  border-radius: 50%;
  content: "";
  height: 6px;
  position: absolute;
  left: -5.5px;
  top: 6px;
  -webkit-transition: background-color 0.3s;
  transition: background-color 0.3s;
  width: 6px;
}
.navilsit-item:hover::before {
  background-color: #004896;
  border: 3px solid #006DCC;
}

.main-container {
  min-height: 600px;
  border: 1px solid #aaaaaa;
  font-size: 1rem;
  line-break: strict;
  line-height: 200%;
  overflow-wrap: anywhere;
}
.main-container p, .main-container ul, .main-container ol, .main-container img {
  margin-bottom: 2em;
}
.main-container img.va-mid {
  margin: 0 10px;
}
.main-container a {
  text-decoration: underline;
  color: #004896;
}
.main-container a:hover {
  background-color: #004896;
  color: #fff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.main-container ul li {
  list-style-type: disc;
}
.main-container ul.list-1stline > li, .main-container ol.list-1stline > li {
  margin-bottom: 1em;
  font-weight: bold;
}
.main-container ul.list-1stline > li div, .main-container ul.list-1stline > li p, .main-container ol.list-1stline > li div, .main-container ol.list-1stline > li p {
  margin-right: 30px;
  font-weight: normal;
}
.main-container ol li img.fl_right {
  display: block;
  max-width: 250px;
}
.main-container table {
  width: 90%;
}

.os7caution {
  margin: 25px;
  padding-left: 60px;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.8em;
  background: url("/shop_img/caution.gif") left center no-repeat;
}

/*3年延長保証のページのみ適用*/
table.ex_guara * {
  font-size: 1.2em;
}
table.ex_guara caption {
  background-color: #666;
  color: #F6F9FE;
  line-height: 2em;
}
table.ex_guara th {
  width: 55%;
  font-size: 0.8em;
  font-weight: normal;
}
table.ex_guara td {
  line-height: 2.5em;
  color: #483C34;
}

ul.naiyou {
  width: 80%;
  display: block;
  margin: 0 auto;
}
ul.naiyou li {
  display: block;
  margin: 15px auto 0 auto;
  padding: 1.5em 0;
  list-style: none;
  color: #f6f9fe;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  line-height: 2.2em;
  letter-spacing: 2px;
  background-color: #f09145;
  background-image: -webkit-gradient(linear, left bottom, left top, from(#F05A28), to(#f09145));
  background-image: -webkit-linear-gradient(bottom, #F05A28 0%, #f09145 100%);
  background-image: linear-gradient(to top, #F05A28 0%, #f09145 100%);
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px 0;
          box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px 0;
  border: 5px solid #fff0eb;
  border-radius: 12px;
}
ul.naiyou li strong {
  font-size: 2em;
  vertical-align: middle;
}

.sm-wrapper { /*サイトマップ用*/
  border: 1px solid #DDDDDD;
  border-radius: 10px;
  padding: 20px 30px;
}
.sm-wrapper > h3 {
  margin-top: 5px;
}
.sm-wrapper > ul {
  margin-left: 20px;
}
@media (max-width: 991px) {
  .sm-wrapper {
    padding: 10px;
  }
  .sm-wrapper > ul {
    margin-bottom: 0;
  }
}

.clm2 > * {
  width: calc((100% - 10px * (2 - 1)) / 2);
}
@media (max-width: 991px) {
  .clm2 > * {
    width: 100%;
  }
}

.parts-clm ul li {
  list-style: none;
}
.parts-clm ul li ul {
  margin: 0.5em 0 1em 10px;
}
.parts-clm ul li ul li {
  margin-bottom: 5px;
  font-weight: normal;
  list-style: square inside;
}
.parts-clm ul li ul li ul li {
  margin-left: 20px;
  list-style: disc inside;
}

/*サポート（winインスト案内など）*/
a.btn {
  display: inline-block;
  margin: 0 15px 20px 0;
  padding: 55px 20px 10px;
  height: 90px;
  font-size: 0.9em;
  text-align: center;
  background: center 15px no-repeat;
  border: 1px solid #DDDDDD;
  border-radius: 4px;
}
a.btn:hover {
  background-color: #f5f5f5;
  color: #004896;
  -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px 0 inset;
          box-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px 0 inset;
}
a.btn.asrock {
  background-image: url("/shop_img/sup_asrock_logo.gif");
}
a.btn.asus {
  background-image: url("/shop_img/sup_asus_logo.gif");
}
a.btn.gigab {
  background-image: url("/shop_img/sup_gigab_logo.gif");
}

.caution {
  padding-left: 60px;
  background: url("/shop_img/caution.gif") left center no-repeat;
}

h1 .makerlogo {
  margin: 0 35px 10px 0;
  vertical-align: middle;
}

@media (max-width: 991px) {
  main {
    margin-top: 120px;
  }
  main.container.d-flex {
    gap: 10px;
  }
  .main-container img {
    max-width: 100%;
  }
  .navi-container .use-box {
    padding: 30px 20px;
  }
  ol.page-navi {
    padding-left: 6px;
  }
  ol.page-navi::before {
    top: 85px;
  }
  .navilsit-item {
    font-size: 0.8rem;
  }
  .navilsit-item::before {
    top: 2px;
  }
}
@media (max-width: 767px) {
  main .container.d-flex {
    display: block;
  }
  h1, h2 {
    font-size: 18px;
  }
  h3 {
    font-size: 16px;
  }
  .use-box {
    padding: 0;
  }
  .main-container {
    border: none;
  }
  .main-container ul[class*=ml-], .main-container ol[class*=ml-] {
    margin-left: 20px;
  }
  .main-container ul.list-1stline > li div, .main-container ul.list-1stline > li p, .main-container ol.list-1stline > li div, .main-container ol.list-1stline > li p {
    margin-right: 0;
  }
  .main-container table {
    width: 100%;
  }
}
header .topic-path {
  display: none;
}

.fa-phone::before {
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 806.94 806.93'%3E%3Cpath d='M806.93,637.29c0,20.63-9.17,60.75-17.77,79.66-12.04,28.08-44.13,46.42-69.92,60.75-33.81,18.34-68.2,29.23-106.6,29.23-53.3,0-101.44-21.78-150.15-39.55-34.96-12.61-68.77-28.08-100.29-47.57-97.43-60.18-214.91-177.66-275.09-275.09-19.49-31.52-34.96-65.33-47.57-100.29C21.78,295.72,0,247.58,0,194.28c0-38.4,10.89-72.78,29.23-106.6,14.33-25.79,32.67-57.88,60.75-69.92C108.89,9.17,149.01,0,169.64,0c4.01,0,8.02,0,12.04,1.72,12.04,4.01,24.64,32.09,30.38,43.56,18.34,32.67,36.1,65.91,55.02,98,9.17,14.9,26.36,33.24,26.36,51.01,0,34.96-103.73,85.97-103.73,116.91,0,15.47,14.33,35.53,22.35,49.29,57.88,104.31,130.1,176.52,234.4,234.4,13.75,8.02,33.81,22.35,49.29,22.35,30.95,0,81.95-103.73,116.91-103.73,17.77,0,36.1,17.19,51.01,26.36,32.09,18.91,65.34,36.68,98,55.02,11.46,5.73,39.55,18.34,43.56,30.38,1.72,4.01,1.72,8.02,1.72,12.04h0Z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 15.2px;
  height: 15.2px;
}

.fa-envelope2::before {
  content: url("/shop_img/icon/ico_message.png");
  width: 15.2px;
  height: 15.2px;
}

h1 {
  margin: 0 0 20px;
}

main .container.d-flex .navi-container {
  min-width: 350px;
}

.main-container h2 {
  background: #a9defc;
  padding: 10px;
  margin: 0 0 20px;
  font-size: 24px;
  border: none;
}
.main-container .case-flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.main-container .case-image {
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 440px;
  height: 440px;
}
.main-container .case-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border: 1px solid #ccc;
  display: block;
}
.main-container .case-description {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 0%;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  padding-top: 10px;
  line-height: 1.6;
  min-width: 200px;
}
.main-container .case-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.main-container .case-table > * {
  width: 100%;
}
.main-container .case-table th, .main-container .case-table td {
  border: 1px solid #ccc;
  padding: 10px;
}
.main-container .case-table th {
  background-color: #d9f2ff;
  white-space: nowrap;
}
.main-container .case-table th .mob_br {
  display: block;
}
.main-container .case-table td:nth-child(even) {
  width: 32%;
}
.main-container .case-link {
  margin-top: 20px;
  text-align: center;
}
.main-container .case-button {
  background: #ffc107;
  color: #483C34;
  text-decoration: none;
  padding: 15px 30px;
  font-weight: bold;
  display: inline-block;
  border-radius: 10px;
  border: 1px solid #999999;
}

.mobile-navi {
  display: none;
}

/* 各セクション */
.filter-section {
  margin-bottom: 15px;
}
.filter-section h2 {
  font-size: 18px;
  margin: 0 auto 15px;
  color: #0077c2;
}

/* ラベルとセレクトボックス */
.filter-group {
  gap: 5px;
  font-size: 14px;
  /* select や input に対する共通スタイル */
}
.filter-group label {
  width: 100%;
}
.filter-group select,
.filter-group input[type=text] {
  padding: 10px;
  margin: 5px 0 10px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  width: 100%;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-color: white;
}
.filter-group.size-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.filter-group.size-box label {
  width: calc((100% - 10px) / 3);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-flow: column;
      -ms-flex-flow: column;
          flex-flow: column;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 3px;
  font-size: 14px;
}
.filter-group.size-box label span {
  white-space: nowrap;
}

/* 検索ボタン */
.filter-button {
  text-align: center;
  margin-top: 20px;
}
.filter-button button {
  background: #006DCC;
  color: #fff;
  padding: 15px 50px;
  font-size: 18px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}
.filter-button button:hover {
  background: #004896;
}

/* 検索結果 */
.filter-result {
  margin-top: 20px;
  font-size: 18px;
  text-align: center;
}

a.clear {
  color: #006DCC;
  text-decoration: underline;
  display: block;
  text-align: right;
}

@media (max-width: 991px) {
  main {
    margin-top: 0;
  }
}
@media screen and (max-width: 930px) {
  .navi-container {
    display: none;
  }
  .mobile-navi {
    display: block;
  }
}
@media screen and (max-width: 767px) {
  .main-container h1, .main-container h2 {
    font-size: 18px;
    font-weight: bold;
  }
  .main-container .case-button {
    width: 100%;
    font-size: 16px;
  }
  .main-container .case-table {
    display: block;
    width: 100%;
    overflow: hidden;
  }
  .main-container .case-table tr {
    display: block;
  }
  .main-container .case-table th, .main-container .case-table td {
    display: block;
    width: 100%;
    border: none;
    padding: 8px 10px;
  }
  .main-container .case-table th {
    background: #f0f0f0;
    font-weight: bold;
  }
  .main-container .case-table th .mob_br {
    display: none;
  }
  .main-container .case-table td {
    font-size: 13px;
  }
  .main-container .case-table td:nth-child(even) {
    width: 100%;
  }
  .main-container .case-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .main-container .case-image {
    width: 100%;
    height: auto;
  }
  .main-container .case-image img {
    width: 100%;
    height: auto;
  }
  .main-container .case-description {
    padding-left: 0;
  }
  .main-container .filter-container {
    padding: 20px;
  }
  .main-container .filter-button button {
    width: 100%;
    font-size: 20px;
    padding: 18px;
  }
}