/* =========================
   Article Section 2025.10.21追加
   ========================= */
.main-article{ padding-top: 82.6px; }/*2026.01.09追加*/
/* 記事一覧（一部共通） */
.article-section,
.article-details {
  padding: 96px 0;
}
.article-section__inner,
.article-details__inner {
  padding: 0 16px;
  max-width: 1210px;
}
.article-list {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 60px 5.7%;
}
.article-list article {
  border: 10px solid #04b166;
  border-radius: 10px;
  display: flex;
  max-width: 570px;
  width: 47.1%;
}
.article-detailsLink {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.article-thumbnail { aspect-ratio: 1 / 0.5272727272727272; }
.article-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-info {
  padding: 4.18% 7.27%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: var(--bg);
  justify-content: center;
}
.article-info__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  justify-content: space-between;
}
.article-info__time,
.article-cat__box li {
  border-radius: 5px;
  font-size: 12px;
  font-weight: var(--bold);
}
.article-info__time {
  border: 1px solid #000;
  padding: 2px 6px;
  color: var(--text);
}
.article-cat__box ul {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 5px;
}
.article-cat__box li {
  padding: 3px 8px;
  width: fit-content;
  color: #fff;
  background-color: #000;
}
.article-tag__box {
  margin-top: 5px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 5px;
}
.article-tag__box p {
  width: fit-content;
  color: #1a8758;
}
/* ページネーション */
.pagenation{
  margin: 120px auto 0;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  box-sizing: content-box;
  gap: 10px 10px;
}
.page-numbers-ul{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 10px;
}
.page-numbers{
  border: 3px solid #04b166;
  border-radius: 50%;
  display: flex;
  min-width: 45px;
  width: 2.604166666666667vw;
  min-height: 45px;
  height: 2.604166666666667vw;
  font-size: 18px;
  background-color: #fff;
  align-items: center;
  justify-content: center;
}
.current{
  color: #fff;
  background-color: #04b166;
  pointer-events: none;
}
.prev,
.next{
  border-radius: 25px;
  min-width: 60px;
  width: 3.90625vw;
}
.dots{ pointer-events: none; }
/* 記事詳細 */
.article-details__breadcrumbs { height: auto; }
.article-details__breadcrumbs .breadcrumbs__list { flex-wrap: wrap; }
.article-details__inner__flex {
  display: flex;
  justify-content: space-between;
  gap: 0 24px;
}
.article {
  max-width: 780px;
  width: 70%;
}
.article-details__title {
  border-bottom: 5px solid #04b166;
  padding-bottom: 24px;
  font-size: 25px;
  font-weight: var(--bold);
  color: #04b166;
}
.article-details__info {
  padding: 24px 0;
  height: auto;
  background-color: transparent;
}
.article-details__info .article-info__time {
  padding: 1px 4px;
  font-size: 16px;
}
.article-details__info .article-cat__box li {
  padding: 4px 10px;
  font-size: 14px;
}
.article-details__content p {
  padding: 40px 0;
  line-height: 2.188;
  font-weight: var(--regular);
}
.wp-block-image {
  margin: 0 auto;
  width: 100%;
}
.wp-block-image img { width: 100%; }
.article-details__content p:first-of-type { padding-top: 0; }
.article-details__content p:last-of-type { padding-bottom: 0; }
.article-details__headline {
  padding: 20px 0 20px;
  font-size: 22px;
}
.article-details__headline__text { padding: 0 0 40px !important; }
/* サイド */
.article-aside{
  display: flex;
  flex-direction: column;
  max-width: 350px;
  width: 32%;
  gap: 40px 0;
}
.article-aside__box {
  border-radius: 10px;
  overflow: hidden;
}
.article-aside__title {
  padding: 7px 20px;
  font-size: 20px;
  color: #fff;
  background-color: #04b166;
}
.article-aside__content{
  padding: 20px 0;
  background-color: var(--green-light);
}
.article-aside__narrowDown__content .article-aside__inner,
.article-aside__link__content .article-aside__inner {
  margin: 0 auto;
  max-width: 300px;
  width: 90%;
}
/* 検索 */
.article-aside__search { display: flex; }
.article-aside__search__inner {
  margin: 0 auto;
  border: 1px solid #d5dac6;
  border-radius: 10px;
  display: flex;
  max-width: 300px;
  width: 90%;
  justify-content: space-between;
  overflow: hidden;
}
.article-aside__input {
  border: none;
  padding: 10px 14px;
  width: 100%;
  font-size: 16px;
}
.article-aside__icon {
  width: 45px;
  background: #04b166 url(img/article/search-icon.png) no-repeat center center;
  background-size: auto;
  background-size: 21px;
}
.article-aside__icon button {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.article-aside__input::placeholder { color: #c5c9bb; }
/* 関連・最新記事 */
.article-aside__link__list li { border-bottom: 1px solid #c5c9bb; }
.article-aside__link__list li:last-of-type { border-bottom: initial; }
.article-aside__link {
  padding: 24px 0;
  display: flex;
  gap: 10px 10px;
}
.article-aside__link__list li:first-of-type .article-aside__link { padding-top: 0; }
.article-aside__link__list li:last-of-type .article-aside__link { padding-bottom: 0; }
.article-aside__thumbnail {
  border-radius: 10px;
  aspect-ratio: 1 / 0.6666666666666666;
  overflow: hidden;
  max-width: 120px;
}
.article-aside__thumbnail img {
  width: 100%;
  height: 100%;
}
.article-aside__link__title {
  margin-top: 4px;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.article-aside__noRelatedArticles { font-size: 14px; }
/* メーカー・ブランドから探す */
.article-aside__narrowDown li {
  border-bottom: 1px solid #c9c9c9;
  width: 50%;
}
.article-aside__narrowDown a {
  color: #000;
  text-decoration: none;
  padding: 16px 0;
  display: block;
  width: 100%;
  font-size: 14px;
}
.article-aside__narrowDown label {
  font-size: .8125rem;
  margin-top: 15px;
  font-weight: bold;
  cursor: pointer;
  display: block;
  position: relative;
  border-radius: 10px;
  padding: 11px 24px;
  font-size: 14px;
  text-align: left;
  background-color: #fff;
}
.article-aside__narrowDown label::after,
checked + .article-aside__narrowDown label::after {
  position: absolute;
  top: 50%;
  right: 24px;
  line-height: 1;
  font-size: 18px;
  font-weight: 900;
  color: #04b166;
  transform: translateY(-50%) translateX(0%);
  -webkit-transform: translateY(-50%) translateX(0%);
}
.article-aside__narrowDown label::after { content: "＋"; }
checked + .article-aside__narrowDown label::after { content: "－"; }
.article-aside__narrowDown input { display: none; }
.article-aside__brand {
  /* height: 330px; */
  height: 110px;/*カテゴリーが12個以上になったら330pxを適用*/
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}
.article-aside__narrowDown input:checked ~ .article-aside__brand { height: auto; }
.article-aside__narrowDown {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.article-aside__narrowDown__br { display: none; }
/* 前後・一覧ボタン */
.article-aside__otherLink__box {
  margin-top: 100px;
  display: flex;
  gap: 12px 24px;
  justify-content: space-between;
}
.article-aside__btn {
  border-radius: 10px;
  max-width: 340px;
  width: 80%;
}
.article-aside__prev,
.article-aside__next {
  background-color: var(--yellow);
}
.article-aside__btn__noLink { background-color: #b6b6b6; }
.article-aside__back { background-color: #04b166; }
.article-aside__btn a,
.article-aside__btn__noLink p {
  position: relative;
  padding: 24px 0;
  display: block;
  font-size: 20px;
  color: var(--text);
  text-align: center;
}
.article-aside__btn__noLink p { color: #fff; }
.article-aside__btn a::before,
.article-aside__btn__noLink p::before{
  content: "";
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--text);
  border-right: 2px solid var(--text);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.article-aside__back a::before,
.article-aside__btn__noLink p::before {
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.article-aside__back a { color: #fff; }
/* キーワード検索 → 記事がない */
.noArticle { width: 100%; }
.noArticle p {
  font-size: 18px;
  font-weight: var(--medium);
  color: var(--text);
  text-align: center;
}
.noArticle__back {
  margin: 120px auto 0;
  border-radius: 10px;
  max-width: 340px;
  width: 80%;
  background-color: var(--yellow);
}
.noArticle__back a {
  position: relative;
  padding: 24px 0;
  display: block;
  font-size: 20px;
  color: var(--text);
  text-align: center;
}
.noArticle__back a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 30px;
  bottom: 0;
  margin: auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--text);
  border-right: 2px solid var(--text);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
@media (width <= 1250px) {/*2026.01.09追加*/
  .main-article{ padding-top: 80.6px; }
}
@media (width <= 1200px) {
  /* 記事詳細 */
  /* .article-details__inner {
    flex-direction: column;
  } */
  /* サイド */
  .article-aside__link { flex-wrap: wrap; }
  .article-aside__thumbnail { max-width: initial; }
  .article-aside__narrowDown a { font-size: clamp(13px ,1.1666666666666667vw, 14px); }
  .article-aside__narrowDown__br { display: block; }
}
@media (width <= 765px) {
  /* 記事一覧 */
  .article-section { padding: 64px 0; }
  .article-list article {
    max-width: initial;
    width: 100%;
  }
  .article-info { padding: 24px 4.47%; }
  .article-info__time { padding: 0px 6px; }
  .article-cat__box li { padding: 1px 6px; }
  /* ページネーション */
  .pagination {
    margin: 72px auto 0;
    width: 90%;
    font-size: 14px;
    gap: 8px;
  }
  .page-numbers{
    border: 2px solid #04b166;
    font-size: 14px;
  }
  /* 記事詳細 */
  .article-details__inner__flex { flex-direction: column; }
  .article,
  .article-aside {
    max-width: initial;
    width: 100%;
  }
  .article-details__title {
    padding-bottom: 16px;
    font-size: 20px;
  }
  .article-details__info { padding: 16px 0; }
  .article-details__info .article-info__time { font-size: 14px; }
  .article-details__info .article-cat__box li { padding: 2px 8px; }
  .article-details__text {
    padding: 24px 0;
    line-height: 1.875;
  }
  .article-details__headline { font-size: 20px; }
  /* サイド */
  .article-aside{
    margin-top: 40px;
    gap: 24px 0;
  }
  /* 共通 */
  .article-aside__search__inner,
  .article-aside__narrowDown__content .article-aside__inner,
  .article-aside__link__content .article-aside__inner {
    max-width: initial;
    width: 92%;
  }
  /* 関連・最新記事 */
  .article-aside__link {
    flex-wrap: initial;
    gap: 10px 16px;
  }
  .article-aside__thumbnail { max-width: 130px; }
  /* メーカー・ブランドから探す */
  .article-aside__brand {
    /* height: 320px; *//*カテゴリーが12個以上になったら320pxを適用*/
    height: 107px;
  }
  .article-aside__narrowDown__br { display: none; }
  /* 前後・一覧ボタン */
  .article-aside__otherLink__box {
    margin-top: 64px;
    gap: 12px 8px;
  }
  .article-aside__btn a,
  .article-aside__btn__noLink p {
    padding: 16px 0;
    font-size: 14px;
  }
  .article-aside__btn a::before { right: 12px; }
  /* キーワード検索 → 記事がない */
  .noArticle__back { margin: 80px auto 0; }
  .noArticle__back a {
    padding: 16px 0;
    font-size: 14px;
  }
}
@media (width <= 400px) {
  /* 関連・最新記事 */
  .article-aside__thumbnail { max-width: 110px; }
  .article-aside__narrowDown__br { display: block; }
  /* 前後・一覧ボタン */
  .article-aside__otherLink__box { flex-direction: column; }
  .article-aside__btn {
    max-width: initial;
    width: 100%;
  }
  /* キーワード検索 → 記事がない */
  .noArticle__back a {
    max-width: initial;
    width: 100%;
  }
}