/* 作成者名:KOTARO SATO  */
:root {
  --black: #000;
  --white: #fff;
  --navy: #1d4763;
  --red: #b40019;
  --skyblue: #7ac8d0;
  --pink: #f9cebf;
  --green: #bfe2db;

  --NotoSans: "Noto Sans JP", sans-serif;
  /* Regular 400 Medium 500 SemiBold 600 Bold 700 Black 900 */
  --NotoSerif: "Noto Serif JP", serif;
  /* Regular 400 Medium 500 Bold 700 */
}

body {
  background-color: var(--green);
}

.devices_sec {
  padding: 6.5rem 11rem 10.3rem;
  max-width: 128rem;
  margin: auto;
}

.devices_wrap {
  display: flex;
  gap: 6rem 6rem;
  flex-wrap: wrap;
  margin: 0 auto;
}

.device_item {
  width: 31.3rem;
  height: 47.4rem;
  background-color: var(--white);
  border-radius: 3.6rem;
  text-align: center;
}

.device_item_wrap {
  padding: 0 3.3rem;
  padding-top: 1rem;
}

.device_thumbnail_wrap {
  max-width: 24.8rem;
  width: 100%;
  height: 19.1rem;
  margin: 3.6rem auto 1.4rem;
}

.device_thumbnail {
  width: 24.8rem;
  height: 19.1rem;
  object-fit: cover;
  vertical-align: middle;
}

.device_title {
  display: block;
  margin: 1.4rem 0 2.2rem 0;
  text-align: left;
  /* height: 2.1rem; */
  color: var(--navy);
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
}

.device_title a {
  color: var(--navy);
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: bold;
  display: block;
}

.device_text_wrap {
  text-align: left;
  font-family: var(--NotoSans);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy);
  line-height: calc(27/15);
}

.no_post {
  font-family: var(--NotoSans);
  font-size: 2rem;
  font-weight: 500;
  color: var(--navy);
  text-align: center;
  margin-top: 10rem;
}

/* ページネーション */
/* 横並びにする */
.nav-links .page-numbers {
  width: 66rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}

.nav-links span.page-numbers {
  display: none;
}

.nav-links a.page-numbers {
  display: none;
}

.nav-links a.prev {
  display: block;
  padding-left: 5.3rem;
}

.nav-links a.next {
  display: block;
  padding-left: 2.1rem;
}

/*  ページタブの共通スタイル */
.nav-links a.page-numbers,
.nav-links .current,
.nav-links a.prev,
.nav-links a.next,
.nav-links .dots {
  width: 9.3rem;
  height: 4.2rem;
  background: var(--red);
  color: var(--white);
  border-radius: 3.1rem;
  margin-right: 1rem;
  margin-bottom: 8.413rem;
  font-size: 2rem;
  line-height: 4.2rem;
}

/* 
 マウスが乗った時の、ボタンの背景の色と文字の色 */
.nav-links a.page-numbers:hover {
  color: var(--red);
  background-color: var(--white);
}

/*  現在のページのタブ  */
.nav-links .current {
  background: var(--white);
  color: var(--red);
  padding: 0;
}

/* 前への「＜」、次への「＞」 */
.nav-links a.prev,
.nav-links a.next {
  color: var(--white);
  position: relative;
  /* display: inline-block; */
}

/*  「次へ」の前の縦線位置 */
.nav-links .next::before {
  left: -0.5rem;
}

/* 「前へ」の後の縦線位置 */
.nav-links .prev::after {
  right: -0.5rem;
}

/*  数字省略の「・・・」 */
.nav-links .dots {
  background: transparent;
  border: none;
}

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

  .devices_sec {
    padding: 1.5rem 1.5rem 8.9rem;
  }

  .devices_wrap {
    gap: 4rem 2rem;
  }

  .device_item_wrap {
    padding: 2.6rem 0.8rem;
  }

  .device_item {
    width: 16.2rem;
    height: 24.6rem;
  }

  .device_thumbnail_wrap {
    height: 9.6rem;
    margin: 0 auto;
  }

  .device_thumbnail {
    width: 14.6rem;
    height: 100%;
  }

  .device_title {
    font-size: 1rem;
    padding: 0 1rem;
    margin: 1.2rem 0 0.9rem 0;
  }

  .device_title a {
    font-size: 1rem;
  }

  .device_text_wrap {
    padding: 0 1rem;
    font-size: 0.8rem;
  }

  .device_text_wrap > p{
    font-weight: 500;
  }

  .no_post {
    font-size: 1.5rem;
    margin-top: 5rem;
  }

  .nav-links .page-numbers {
    width: 31.11rem;
    justify-content: space-between;
  }

  /* .nav-links a.prev,
  .nav-links a.next {
    padding-left: 2rem;
  } */

  .nav-links a.page-numbers,
  .nav-links .current,
  .nav-links a.prev,
  .nav-links a.next,
  .nav-links .dots {
    width: 9.3rem;
    height: 4.202rem;
    font-size: 2rem;
    line-height: 4.202rem;
    margin-bottom: 13.998rem;
    margin-right: 0;
  }

}