@charset "UTF-8";

/*
 * base.css — デザイントークン、リセット、タイポグラフィ
 *
 * 配色の方針:
 *   明るいシアン(--neon #00FFFF / --bright #00BFFF)は白背景でのコントラスト比が
 *   それぞれ約 1.2:1 / 2.4:1 しかなく、そのまま文字色にすると読めない。
 *   そのため以下の使い分けを徹底する。
 *     --neon   … 濃紺(--navy)の上でのみ使う
 *     --bright … 白地では「濃い文字を載せた塗り」としてのみ使う
 *     --link   … 白地の文字色・リンク色（コントラスト確保用の濃い青）
 */

:root {
  /* 地と文字 */
  --page: #f5fbfd;
  --surface: #ffffff;
  --ink: #10222b;
  --muted: #5b7079;
  --meta: #8ba0a8;
  --line: #e4eef2;

  /* 濃色（ヘッダー・動画セクション・フッター） */
  --navy: #062733;
  --navy-soft: #0d3b4a;
  --on-navy: #ffffff;
  --on-navy-muted: #7fc6d8;
  --on-navy-soft: #cdeaf3;

  /* アクセント */
  --neon: #00ffff;
  --bright: #00bfff;
  --aqua: #1ac1dd;
  --link: #0079a6;
  --link-hover: #005a7d;

  /* 淡いシアンの面と罫 */
  --tint: #f0fafd;
  --tint-line: #bfe9f5;

  /* 画像プレースホルダー（アイキャッチ未設定時） */
  --ph-bg: #e2f4fa;
  --ph-fg: #9ccfe0;

  /* 外部サービス */
  --youtube: #d3252b;
  --rakuten: #bf0000;
  --amazon: #f7a800;

  /* 注意喚起（青一色に埋もれないよう暖色を残す） */
  --warn-bg: #fdf6e9;
  --warn-line: #eddcbb;
  --warn-title: #8a5f16;
  --warn-text: #6b4f1c;

  /* 寸法 */
  --container: 1280px;
  --gutter: 32px;
  --aside-width: 320px;
  --column-gap: 40px;

  /* 書体 */
  --font-jp: "Zen Kaku Gothic New", "游ゴシック体", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-en: "Barlow Condensed", "Arial Narrow", sans-serif;
}

@media screen and (max-width: 767px) {
  :root {
    --gutter: 14px;
    --column-gap: 0px;
  }
}

/* ---------------------------------------------------------------- リセット */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  font-family: var(--font-jp);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  background: var(--page);
}

/* 画像は width/height 属性を残したうえで可変にする。
   属性を残すのはブラウザに縦横比を伝えて CLS を防ぐため。 */
img {
  display: block;
  max-width: 100%;
  height: auto;
  border: none;
}

a {
  color: var(--link);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  transition: color .2s linear, opacity .2s linear, background-color .2s linear;
}

a:hover {
  color: var(--link-hover);
}

/* 濃色面の中のリンクは個別に色を持つため、既定色を打ち消す */
.is-onNavy a,
.is-onNavy a:hover {
  color: inherit;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.45;
}

/* キーボード操作時のフォーカスは必ず見えるようにする */
:focus-visible {
  outline: 3px solid var(--bright);
  outline-offset: 2px;
}

/* 読み上げのみ（スキップリンクなど） */
.screenReaderText {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.screenReaderText:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  width: auto;
  height: auto;
  margin: 0;
  padding: 12px 20px;
  clip: auto;
  font-weight: 700;
  color: var(--navy);
  background: var(--neon);
}

/* ----------------------------------------------------------- 共通の小部品 */

/* 英字のラベル（FISHING LOG / RANKING など） */
.enLabel {
  font-family: var(--font-en);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--link);
}

/* 日付・件数などの補助情報 */
.meta {
  font-family: var(--font-en);
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--meta);
}

/* カテゴリ（コンテンツ種別）のラベル。濃紺地にシアン文字。 */
.termLabel {
  display: inline-block;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  color: var(--neon);
  background: var(--navy);
}

.termLabel.-tackle {
  color: #052a33;
  background: var(--aqua);
}

/* 塗りを持たない版。カードが小さく、塗りが強すぎる場所で使う。 */
.termLabel.-plain,
.termLabel.-plain.-tackle {
  padding: 0;
  font-size: 11px;
  color: var(--link);
  background: transparent;
}

/* 魚種・エリアのタグ。白地なので文字は濃い青にする。 */
.termChip {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--link);
  background: var(--tint);
  border: 1px solid var(--tint-line);
}

.termChip:hover {
  color: var(--navy);
  background: var(--bright);
  border-color: var(--bright);
}

.termChip.-current {
  font-weight: 700;
  color: var(--navy);
  background: var(--bright);
  border-color: var(--bright);
}

/* アイキャッチが無い記事に出す代替表示 */
.thumbFallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--ph-fg);
  background: var(--ph-bg);
}

.thumbFallback svg {
  width: 44%;
  max-width: 84px;
  height: auto;
}