/* ==========================================================================
   コラム記事ページ（single-column.php）1カラム表示
   本文の見た目は style.css の .p-column__content .c-wp ... のまま。
   ここではレイアウト（1カラム化）と、記事下のブロックだけを指定する。
   ========================================================================== */
.p-column--single .p-column__row {
  display: block;
  width: auto;
  max-width: 740px;
  margin: 0 auto;
}
.p-column--single .p-column__col-body {
  width: auto;
}

/* タイトル下のカテゴリー：2つ以上並ぶときに 1.5文字分あける */
.p-column--single .c-single__cat {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 1.5em;
}

/* ==========================================================================
   パンくず（スマホ）
   スマホでは .c-breadcrumb が position:absolute で固定位置に置かれるため、
   記事タイトルが長いと2行になって上の見出しに重なる。
   → 最後の「記事タイトル」だけ出さず、「ホーム ＞ カテゴリー」までにする。
   構造化データ（BreadcrumbList）は HTML とは別に出ているので、検索エンジン側の
   パンくず表示には影響しない。
   ========================================================================== */
@media only screen and (max-width: 768px) {
  .p-column-crumb .c-breadcrumb__item:last-child {
    display: none;
  }

  /* --- 別の見せ方にしたいときは、上の指定を消して以下のどれかを使う ---

  【A】パンくずごと消す
  .p-column-crumb { display: none; }

  【B】1行に収めて、あふれた分を「…」で省略する
  .p-column-crumb .c-breadcrumb__list { width: calc(100vw - 26px); }
  .p-column-crumb .c-breadcrumb__item:last-child {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  【C】1行のまま横スクロールで全部読めるようにする
  .p-column-crumb .c-breadcrumb__list {
    width: calc(100vw - 26px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .p-column-crumb .c-breadcrumb__list::-webkit-scrollbar { display: none; }
  .p-column-crumb .c-breadcrumb__item { white-space: nowrap; }

  --- */
}

/* ==========================================================================
   記事下のブロック（よく読まれている記事／最新の記事／カテゴリー）
   ========================================================================== */
.p-column-foot {
  margin: 80px 0 0;
  padding: 40px 0 0;
  border-top: 1px solid #e6e6e6;
}
.p-column-foot__block + .p-column-foot__block {
  margin-top: 50px;
}
.p-column--single .p-column-foot__head {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  margin: 0 0 18px;
  padding: 0 0 0 26px;
  position: relative;
}
.p-column--single .p-column-foot__head::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #8fb7c9;
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -8px;
}
.p-column--single .p-column-foot__note {
  font-size: 14px;
  line-height: 1.6;
  color: #5f6368;
  margin: -8px 0 18px;
}

/* よく読まれている記事（順位つき） */
.p-column--single .p-column-rank,
.p-column--single .p-column-list,
.p-column--single .p-column-cats {
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-column--single .p-column-rank__item,
.p-column--single .p-column-list__item {
  list-style: none;
  margin: 0;
  border-top: 1px solid #ededed;
}
.p-column--single .p-column-rank__item:last-child,
.p-column--single .p-column-list__item:last-child {
  border-bottom: 1px solid #ededed;
}
.p-column--single .p-column-list__item:first-child {
  border-top: 1px solid #ededed;
}
.p-column-rank__link,
.p-column-list__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  color: #212121;
  text-decoration: none;
  transition: background-color 0.2s;
}
.p-column-rank__link:hover,
.p-column-list__link:hover {
  background: #fafafa;
  color: #212121;
}
.p-column-rank__num {
  flex: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #212121;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.p-column-rank__item:nth-child(1) .p-column-rank__num {
  background: #ec674b;
}
.p-column-rank__item:nth-child(2) .p-column-rank__num {
  background: #17a1e1;
}
.p-column-rank__item:nth-child(3) .p-column-rank__num {
  background: #8fb7c9;
}
.p-column-rank__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.p-column-rank__title,
.p-column-list__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.p-column-rank__date,
.p-column-list__date {
  font-size: 13px;
  color: #5f6368;
}
.p-column-list__link {
  justify-content: space-between;
}
.p-column-list__date {
  flex: none;
}

/* カテゴリー */
.p-column--single .p-column-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.p-column--single .p-column-cats__item {
  list-style: none;
  margin: 0;
}
.p-column-cats__link {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid #ccc;
  background: #fff;
  color: #212121;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s;
}
.p-column-cats__link:hover {
  background: #f5f5f5;
  border-color: #999;
  color: #212121;
}

@media only screen and (max-width: 1024px) {
  .p-column-foot {
    margin-top: 50px;
    padding-top: 30px;
  }
  .p-column-foot__block + .p-column-foot__block {
    margin-top: 36px;
  }
  .p-column--single .p-column-foot__head {
    font-size: 18px;
  }
  .p-column-list__link {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-column-rank__link,
  .p-column-list__link,
  .p-column-cats__link {
    transition: none;
  }
}