/* =============================================================
   スクールコンパス 共通スタイル sc-common.css  20260910 便197

   なぜ作るか
     ページの中から別のページへ行くリンクが、見て分からないという指摘があった。
     実際、いまサイトの中には5つの書き方が混ざっている。
       .chips / .scw-chips / .scb-chips / .links / .bridge
     それぞれ枠の色も、押せることの見え方もちがう。
     色だけで「押せる」を伝えていて、矢印も下線もないものが多い。

     ここで全部を1つの見え方にそろえる。
       1 かならず右向きの矢印を付ける（→ が付いていれば、色が見えない人にも押せると分かる）
       2 枠と背景を付けて、押せる面であることを形で示す
       3 指を乗せたときに色が変わる
       4 タップの的を44px以上にする（スマホで押しそこねないため）
     色だけに頼らないので、色の見分けがつきにくい人にも伝わる。

   読み込み
     sc-header.js が全ページで自動的に読み込む。個々のページに書き足す必要はない。
   ============================================================= */

/* --- ページの中に置くリンクの列（チップ） --- */
.chips, .scw-chips, .scb-chips, .kt-chips, .jk-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.chips > a, .scw-chips > a, .scb-chips > a, .kt-chips > a, .jk-chips > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px 8px 14px;
  border: 1.5px solid #93c5fd;
  border-radius: 10px;
  background: #fff;
  color: #1d4ed8;
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.9;      /* ふりがな（ruby）が上に入るので、行の高さを広めに取る */
  text-decoration: none;
  transition: background .12s, border-color .12s;
}
/* ふりがなが付いた語がチップに入ると、上がつまって読みにくくなる。
   ふりがなを小さくして、語のほうを主にする。 */
.chips > a ruby, .scw-chips > a ruby, .scb-chips > a ruby,
.kt-chips > a ruby, .jk-chips > a ruby { ruby-position: over; }
.chips > a rt, .scw-chips > a rt, .scb-chips > a rt,
.kt-chips > a rt, .jk-chips > a rt {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.chips > a::after, .scw-chips > a::after, .scb-chips > a::after,
.kt-chips > a::after, .jk-chips > a::after {
  content: " →";
  margin-left: 4px;
  color: #60a5fa;
  font-weight: 700;
}
.chips > a:hover, .scw-chips > a:hover, .scb-chips > a:hover,
.kt-chips > a:hover, .jk-chips > a:hover,
.chips > a:focus-visible, .scw-chips > a:focus-visible {
  background: #eff6ff;
  border-color: #2563eb;
}

/* --- 次にやることの大きいリンク（1行1本） --- */
.bridge > a, .links > a, .next3 > a {
  position: relative;
  display: block;
  min-height: 44px;
  padding: 12px 40px 12px 15px;
  border: 1.5px solid #bfdbfe;
  border-radius: 12px;
  background: #fff;
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.7;
}
.bridge > a::after, .links > a::after, .next3 > a::after {
  content: "→";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #60a5fa;
  font-size: 18px;
  font-weight: 700;
}
.bridge > a:hover, .links > a:hover, .next3 > a:hover {
  background: #eff6ff;
  border-color: #2563eb;
}
.bridge > a > span, .links > a > span, .next3 > a > span {
  display: block;
  font-weight: 400;
  font-size: 13.5px;
  color: #475569;
  margin-top: 3px;
}

/* --- 本文の中にまぎれるリンク --- */
/* 色だけで示していたものに、下線と矢印を足す。
   ページの中のリンクだけが対象で、ヘッダー・フッター・ナビ・パンくずは除く。 */
main a[href^="/"]:not(.no-arrow):not([class]),
article a[href^="/"]:not(.no-arrow):not([class]) {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: #93c5fd;
}
main a[href^="/"]:not(.no-arrow):not([class]):hover,
article a[href^="/"]:not(.no-arrow):not([class]):hover {
  text-decoration-color: #1d4ed8;
}

/* --- 印刷のときはリンクの飾りを消す --- */
@media print {
  .chips > a::after, .scw-chips > a::after, .scb-chips > a::after,
  .bridge > a::after, .links > a::after, .next3 > a::after { content: ""; }
  .chips > a, .scw-chips > a, .bridge > a, .links > a, .next3 > a {
    border: 0; background: none; padding: 2px 0; min-height: 0;
  }
}