/* ============================================================
   カテゴリ一覧（/category-list）第3版（2026-10-16）
   inc/category-list.php が、このページでだけ読み込む（THE THOR の CSS の後ろ）。
   見た目はサイト全体（THE THOR・style-user.css）と同じにする。書体・見出し・リンク色・背景・囲みには触らない。
   ここに置くのは、次のものだけ（第3版の仕様書）：
   ・「よく読まれている記事」の小見出しと3本の間隔
   ・押せる範囲を 44px 以上にする指定
   ・見出しの中のカテゴリ名を、本文のリンクと同じ色・下線にする（ミエナの決定。THE THOR 標準では見出しと同じ黒になり、押せると分からない）
   本文内の指定は .content .cl-page から始める（THE THOR の .content p などに負けないため）。
   ============================================================ */

/* ---------- よく読まれている記事（[miena_catlist_pick]、THE THOR の記事カード） ---------- */
.content .cl-page .cl-picks__label {
  margin-bottom: 0;
}
.content .cl-page .cl-picks__list {
  margin-top: 8px;
}

/* ---------- 押せる範囲（44px 以上） ---------- */
/* 文の中のリンク（カテゴリ名・サブカテゴリ名・ほかの探し方）は、行の高さを変えずに上下へ押せる範囲を広げる */
.content .cl-page h3 a,
.content .cl-page .cl-narrow a,
.content .cl-page .cl-others a {
  padding-block: 14px;
}
/* 記事カードのタイトル（1行のときは 30〜42px になる）も 44px 以上にする。
   THE THOR の .heading a は inline-block。ブロックにして、タイトルの行の横幅いっぱいを押せるようにする */
.content .cl-page .cl-picks__list .heading a {
  display: block;
  min-height: 44px;
  box-sizing: border-box;
  padding-block: 8px;
}

/* ---------- 見出し（・カテゴリ名）の中のカテゴリ名 ---------- */
/* サイトの本文のリンクと同じ色（THE THOR の設定 .content a { color: #006bb3 }）と下線にする（ミエナの決定） */
.content .cl-page h3 a {
  color: #006bb3;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 余白（サイト全体の決まりにそろえる） ---------- */
/* THE THOR と同じく、見出し（h2・h3）の前は 4rem、それ以外の要素の間は 2rem（rem はスマホ12px・PC11px）。
   小見出しと中身の間は 8px。テーマとカテゴリの見出しはグループの先頭にあり、THE THOR の見出し前の余白が
   付かないので、グループ側で付ける */
.content .cl-page .cl-phase,
.content .cl-page .cl-card {
  margin-top: 4rem;
}

/* ---------- 今のあなたに近いものから（各テーマ #step1〜#step4・#support へのページ内リンク） ---------- */
/* 枠は THE THOR 標準の .ep-box。背景はサイトの薄い黄緑（THE THOR の主ボタンと同じ #ddefe0）にする。
   カスタムHTMLのブロックには段落の上の余白が付かないので、本文の段落と同じ 2rem を付ける */
.content .cl-page .cl-near {
  margin-top: 2rem;
  background-color: #ddefe0;
}
.content .cl-page .cl-near__title {
  margin: 0 0 8px;
  font-size: 1.1em;
  font-weight: 700;
}
/* THE THOR の箇条書きの装飾（背景・枠・行頭の記号）を、この枠の中だけ外し、ボタンを縦に離して並べる */
.content .cl-page .cl-near__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  list-style: none;
}
.content .cl-page .cl-near__list li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.content .cl-page .cl-near__list li::before {
  content: none;
  display: none;
}
/* 1つずつのボタン：白い地にサイトの緑の枠線。高さは 44px 以上。
   右端の矢印で「押すと進む」ことを伝える。矢印は THE THOR の主ボタン（.btn__link-primary::before）と同じ
   5px・線2px の右向きの形にそろえる（下向きだと開閉する部品に見えるため）。2行になるときは文節の切れ目で、上下をそろえて折り返す */
.content .cl-page .cl-near__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  padding: 10px 12px;
  box-sizing: border-box;
  border: 1px solid #01a630;
  border-radius: 5px;
  background: #fff;
  color: #191919;
  text-decoration: none;
  word-break: auto-phrase;
  text-wrap: balance;
}
.content .cl-page .cl-near__list a::after {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-right: 4px;
  border-top: 2px solid #01a630;
  border-right: 2px solid #01a630;
  transform: rotate(45deg);
}
.content .cl-page .cl-near__list a:hover {
  background: #f4faf5;
  color: #191919;
}
/* 飛んだ先の見出しが画面の上端に張り付かないように */
.content .cl-page h2[id] {
  scroll-margin-top: 12px;
}