/* 釣果ページ（海域・海域×魚種・魚種） */

.catch-page { max-width: 960px; margin: 0 auto; padding: 0 16px; color: #333; }
.catch-page section { margin: 40px 0; }
.catch-page a { color: #1d5fa8; }

.catch-breadcrumb { font-size: 12px; color: #888; margin: 16px 0; }
.catch-breadcrumb a { color: #888; }

.catch-h1 { font-size: 26px; color: #1a3a5c; margin: 8px 0 12px; line-height: 1.4; }
.catch-h2 { font-size: 19px; color: #1a3a5c; border-left: 5px solid #7db4e6; padding-left: 10px; margin: 0 0 16px; }
.catch-lead { font-size: 15px; margin: 0 0 24px; }
.catch-lead strong { color: #2c7be5; font-size: 18px; }
.catch-note { font-size: 12px; color: #888; margin: 8px 0 0; }
.catch-empty { color: #888; }

/* AIまとめ */
.catch-summary { background: #f3f8fd; border: 1px solid #d6e6f5; border-radius: 10px; padding: 18px 22px; }
.catch-summary h2 { font-size: 17px; color: #1a3a5c; margin: 0 0 10px; }
.catch-summary p { line-height: 1.9; margin: 0; }
.catch-summary .catch-note { margin-top: 10px; }

/* 集計表 */
.catch-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.catch-table th, .catch-table td { border-bottom: 1px solid #e5e9ef; padding: 10px 8px; text-align: left; }
.catch-table th { background: #f5f7fa; font-weight: normal; color: #666; font-size: 12px; }
.catch-table .num { text-align: right; white-space: nowrap; }
.catch-table td a { font-weight: bold; }

.trend { display: inline-block; min-width: 1.6em; text-align: center; color: #888; font-weight: bold; }
.trend-up { color: #d9480f; }
.trend-down { color: #1c7ed6; }
.trend-new { color: #fff; background: #f08c00; border-radius: 3px; font-size: 10px; padding: 1px 4px; }

/* 数字のカード */
.catch-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 0 12px; }
.catch-stats div { background: #f5f7fa; border-radius: 8px; padding: 12px; text-align: center; }
.catch-stats span { display: block; font-size: 12px; color: #777; }
.catch-stats strong { font-size: 22px; color: #1a3a5c; margin-right: 4px; }

/* 釣果一覧 */
.catch-reports { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.catch-report { background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .07); padding: 14px 16px; display: flex; flex-direction: column; }
.catch-report-photo { position: relative; display: block; margin: -14px -16px 12px; height: 170px; background: #dce8f2; border-radius: 10px 10px 0 0; overflow: hidden; text-decoration: none; }
.catch-report-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.catch-report-photo.is-catch img { object-position: center; }
.catch-report-photo small { position: absolute; right: 0; bottom: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 4px 0 0 0; }
.catch-report-photo:not(.is-catch) small { display: none; }
.catch-report-photo span {display: flex; height: 100%; align-items: center; justify-content: center; font-size: 32px; }
.catch-report-meta {font-size: 12px; color: #888; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.catch-report-meta .catch-ship { font-weight: bold; color: #1a3a5c; text-decoration: none; }
.catch-report-meta .catch-sea { color: #888; }
.catch-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.catch-tag { font-size: 11px; background: #e7f1fb; color: #1d5fa8; border-radius: 10px; padding: 1px 8px; }
.catch-report-title { font-size: 14px; font-weight: bold; margin: 8px 0 4px; line-height: 1.5; }
.catch-report-text { font-size: 12px; color: #666; margin: 0 0 8px; line-height: 1.6; }
.catch-source { font-size: 12px; margin-top: auto; }

/* 船の一覧 */
.catch-ships { list-style: none; margin: 0; padding: 0; }
.catch-ships li { border-bottom: 1px solid #eef1f5; padding: 10px 4px; display: flex; gap: 12px; align-items: center; }
.catch-ship-thumb { flex: 0 0 96px; height: 60px; border-radius: 6px; overflow: hidden; background: #dce8f2; display: flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; }
.catch-ship-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.catch-ship-info { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; }
.catch-ships a { font-weight: bold; }
.catch-ship-place { font-size: 12px; color: #888; }
.catch-ship-count { font-size: 12px; color: #d9480f; }

/* リンク一覧 */
.catch-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.catch-links span { font-size: 12px; color: #888; }

@media (max-width: 640px) {
  .catch-h1 { font-size: 20px; }
  .catch-stats { grid-template-columns: repeat(2, 1fr); }
  .catch-table { font-size: 13px; }
  .catch-table th:nth-child(5), .catch-table td:nth-child(5) { display: none; }
}

/* Amazonアフィリエイト（datail.php と同じ見た目） */
.amazon-affiliate-wrap {
  max-width: 900px;
  margin: 16px auto 0;
  padding: 14px 16px 18px;
  background: #fff8e1;
  border: 1px solid #f0a500;
  border-radius: 6px;
}
.amazon-affiliate-pr {
  font-size: 11px;
  color: #999;
  margin: 0 0 4px;
  text-align: right;
}
.amazon-affiliate-title {
  font-weight: bold;
  font-size: 15px;
  margin: 0 0 12px;
  color: #c45500;
}
.amazon-affiliate-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-evenly;
}
.amazon-affiliate-list li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
}
.amazon-affiliate-list li a img {
  display: block;
  border-radius: 4px;
  border: 1px solid #ddd;
  transition: opacity 0.2s;
}
.amazon-affiliate-list li a:hover img { opacity: 0.8; }
.amazon-affiliate-label {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
  max-width: 200px;
  line-height: 1.4;
}
@media screen and (max-width: 600px) {
  .amazon-affiliate-list { gap: 8px; }
  .amazon-affiliate-list li a img { width: 130px; height: 82px; }
  .amazon-affiliate-label { font-size: 11px; max-width: 130px; }
}

/* ---------------- 釣果ナビ ---------------- */
/* 進み具合：番号の丸を線でつなぐ（今いる所はオレンジ） */
.navi-steps { list-style: none; margin: 28px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.navi-steps li { position: relative; color: #8a96a3; font-size: 13px; text-align: center; line-height: 1.4; padding-top: 40px; }
.navi-steps li::before { content: ""; position: absolute; top: 15px; left: -50%; width: 100%; height: 2px; background: #d5dde6; }
.navi-steps li:first-child::before { display: none; }
.navi-steps li span { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; width: 32px; height: 32px; line-height: 28px; border-radius: 50%; border: 2px solid #d5dde6; background: #fff; font-weight: bold; font-size: 14px; color: #8a96a3; box-sizing: border-box; }
.navi-steps li small { display: block; font-size: 11px; color: #1a3a5c; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.navi-steps li a { color: inherit; text-decoration: none; }
.navi-steps li.is-done { color: #1d5fa8; }
.navi-steps li.is-done a { text-decoration: underline; }
.navi-steps li.is-done span { border-color: #1d5fa8; color: #1d5fa8; }
.navi-steps li.is-done + li::before, .navi-steps li.is-done::before, .navi-steps li.is-current::before { background: #1d5fa8; }
.navi-steps li.is-current { color: #0f2a44; font-weight: bold; }
.navi-steps li.is-current span { background: #f08c00; border-color: #f08c00; color: #fff; }

.navi-last { background: #fff8e1; border: 1px solid #f0c36d; border-radius: 8px; padding: 12px 16px; font-weight: bold; }

/* ① エリア */
.navi-region { border: 0; margin: 0 0 22px; padding: 0; }
.navi-region legend { font-size: 16px; font-weight: bold; color: #1a3a5c; border-left: 5px solid #7db4e6; padding-left: 10px; margin-bottom: 10px; }
.navi-seas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.navi-sea { display: flex; flex-direction: column; gap: 2px; border: 2px solid #dfe6ee; border-radius: 8px; padding: 10px 12px 10px 38px; position: relative; cursor: pointer; background: #fff; }
.navi-sea input { position: absolute; left: 12px; top: 13px; width: 18px; height: 18px; }
.navi-sea:has(input:checked) { border-color: #2c7be5; background: #f0f6fe; }
.navi-sea-name { font-weight: bold; }
.navi-sea-count { font-size: 12px; color: #888; }
.navi-sea.is-quiet .navi-sea-name { color: #888; }
.navi-submit { position: sticky; bottom: 0; background: rgba(255, 255, 255, .95); padding: 12px 0; text-align: center; box-shadow: 0 -4px 12px rgba(0, 0, 0, .06); }
.navi-submit button { background: #f08c00; color: #fff; font-size: 17px; font-weight: bold; border: 0; border-radius: 30px; padding: 14px 32px; cursor: pointer; }
.navi-submit button:disabled { background: #c9ced4; cursor: default; }

/* ② 魚 */
.navi-fish { list-style: none; margin: 0 0 30px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.navi-fish a { display: block; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); overflow: hidden; text-decoration: none; color: #333; }
.navi-fish a:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.navi-fish-photo { height: 140px; background: #dce8f2; }
.navi-fish-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navi-fish-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.navi-fish-body strong { font-size: 18px; color: #1a3a5c; }
.navi-fish-body span { font-size: 13px; color: #666; }
.navi-fish-body b { color: #d9480f; font-size: 16px; }
.catch-noimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 34px; }

/* ③ 船 */
.navi-ships { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.navi-ship { display: flex; gap: 16px; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); padding: 14px; }
.navi-ship-photo { flex: 0 0 220px; height: 165px; border-radius: 8px; overflow: hidden; background: #dce8f2; }
.navi-ship-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navi-ship-body { flex: 1; min-width: 0; }
.navi-ship-body p { margin: 0; }
.navi-ship-name { font-size: 19px; font-weight: bold; }
.navi-ship-name a { color: #1a3a5c; }
.navi-ship-place { font-size: 12px; color: #888; margin-top: 2px !important; }
.navi-ship-count { font-size: 14px; margin-top: 6px !important; }
.navi-ship-count b { color: #d9480f; font-size: 17px; }
.navi-ship-latest { background: #f5f7fa; border-radius: 6px; padding: 8px 10px; margin-top: 8px; font-size: 13px; }
.navi-ship-latest time { color: #888; margin-right: 6px; }
.navi-ship-latest span { font-weight: bold; }
.navi-ship-latest p { color: #666; font-size: 12px; margin-top: 2px !important; }
.navi-ship-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.navi-btn { display: inline-block; background: #2c7be5; color: #fff !important; text-decoration: none; border-radius: 20px; padding: 8px 16px; font-size: 14px; font-weight: bold; }
.navi-btn-sub { background: #fff; color: #2c7be5 !important; border: 1px solid #2c7be5; font-weight: normal; }

@media (max-width: 640px) {
  .navi-steps { margin: 20px 0; }
  .navi-steps li { font-size: 11px; }
  .navi-seas { grid-template-columns: 1fr 1fr; }
  .navi-fish { grid-template-columns: 1fr 1fr; gap: 10px; }
  .navi-fish-photo { height: 110px; }
  .navi-ship { flex-direction: column; }
  .navi-ship-photo { flex-basis: auto; height: 200px; }
}

/* ④ 詳細ページ（釣果ナビから来たとき） */
.navi-detail { max-width: 900px; margin: 0 auto 30px; text-align: left; }
.navi-back { margin: 0 0 14px; font-weight: bold; }
.navi-detail-box { background: #fff8e1; border: 1px solid #f0c36d; border-radius: 8px; padding: 14px 16px; margin-top: 16px; }
.navi-detail-box p { margin: 0; line-height: 1.7; }

/* ---------------- トップページ ---------------- */
.top-hero { background: #0f2a44 radial-gradient(ellipse at 85% 0%, rgba(240, 140, 0, .18), transparent 55%); color: #fff; position: relative; overflow: hidden; }
.top-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 34' preserveAspectRatio='none'%3E%3Cpath d='M0 20 C150 4 300 4 450 18 S750 34 900 18 1100 6 1200 14 V34 H0Z' fill='%23f0f3f7'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat; }
.top-hero-inner { max-width: 1080px; margin: 0 auto; padding: 44px 20px 70px; display: grid; grid-template-columns: 1fr 440px; gap: 40px; align-items: center; }
.top-hero-kicker { display: inline-block; font-size: 13px; letter-spacing: .08em; color: #ffc078; border-bottom: 1px solid rgba(255, 192, 120, .5); padding-bottom: 4px; margin: 0 0 16px; }
.top-hero h1 { font-size: 44px; line-height: 1.3; margin: 0 0 18px; font-weight: 900; letter-spacing: .02em; color: #fff; }
.top-hero h1 em { font-style: normal; color: #ffc078; }
.top-hero-lead { font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, .85); margin: 0 0 26px; }
.top-hero-btn { display: inline-block; background: #f08c00; color: #fff !important; font-weight: bold; font-size: 16px; text-decoration: none; padding: 14px 34px 14px 28px; border-radius: 4px; box-shadow: 0 4px 0 #b86a00; }
.top-hero-btn::after { content: "↓"; margin-left: 10px; }
.top-hero-btn:hover { transform: translateY(1px); box-shadow: 0 3px 0 #b86a00; }
.top-hero-sub { display: inline-block; margin-left: 18px; color: #fff !important; font-size: 14px; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .5); padding-bottom: 2px; }
.top-hero-sub:hover { border-bottom-color: #ffc078; color: #ffc078 !important; }
.top-hero-stats { display: flex; margin: 34px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .15); }
.top-hero-stats div { padding: 0 22px; border-left: 1px solid rgba(255, 255, 255, .15); }
.top-hero-stats div:first-child { padding-left: 0; border-left: 0; }
.top-hero-stats dt { font-size: 11px; color: rgba(255, 255, 255, .6); margin-bottom: 2px; }
.top-hero-stats dd { margin: 0; font-size: 26px; font-weight: bold; font-family: "Helvetica Neue", Arial, sans-serif; }
.top-hero-stats dd small { font-size: 12px; margin-left: 2px; font-weight: normal; }
.top-board { background: #fff; color: #333; border-radius: 6px; padding: 14px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); transform: rotate(.6deg); }
.top-board-head { margin: 0 0 10px; font-weight: bold; color: #0f2a44; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.top-board-head small { margin-left: auto; font-weight: normal; font-size: 11px; color: #999; }
.top-board-dot { width: 8px; height: 8px; border-radius: 50%; background: #e03131; box-shadow: 0 0 0 3px rgba(224, 49, 49, .2); }
.top-board ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.top-board li a { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 3px; background: #dce8f2; text-decoration: none; }
.top-board img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.top-board li a:hover img { transform: scale(1.05); }
.top-board-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; font-size: 10px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-board-cap b { display: block; font-size: 14px; }
.top .catch-h1 { margin-top: 0; }
.top-prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px 24px; }
.top-prefs p { font-weight: bold; color: #1a3a5c; margin: 0 0 6px; font-size: 14px; }
.top-search { margin-top: 24px; }
.sp-only { display: none; }
@media (max-width: 860px) {
  .top-hero-inner { grid-template-columns: 1fr; gap: 28px; padding: 28px 16px 56px; }
  .top-board { transform: none; }
}
@media (max-width: 640px) {
  .top-hero h1 { font-size: 30px; }
  .top-hero-lead { font-size: 14px; }
  .top-hero-btn { display: block; text-align: center; }
  .top-hero-sub { display: table; margin: 14px auto 0; }
  .top-hero-stats { margin-top: 24px; }
  .top-hero-stats div { padding: 0 12px; flex: 1; }
  .top-hero-stats dd { font-size: 20px; }
  .pc-only { display: none; }
  .sp-only { display: inline; }
}

/* スマホメニュー（画面外）の行頭の点が、濃い背景の上で見えてしまうため消す */
.drawer-list { list-style: none; }

/* ページ内リンクで飛んだとき、見出しが上の固定メニューに隠れないようにする */
#area, #prefs { scroll-margin-top: 110px; }
@media (max-width: 1100px) and (min-width: 641px) { #area, #prefs { scroll-margin-top: 185px; } }  /* メニューが2段になる幅 */

/* ① エリア：地方へのページ内リンク */
.navi-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.navi-jump a { background: #fff; border: 1px solid #c9d6e3; border-radius: 4px; padding: 7px 14px; font-size: 14px; font-weight: bold; color: #1a3a5c !important; text-decoration: none; }
.navi-jump a::after { content: " ↓"; color: #f08c00; font-size: 12px; }
.navi-jump a:hover { background: #1a3a5c; border-color: #1a3a5c; color: #fff !important; }
.navi-region { scroll-margin-top: 110px; }
@media (max-width: 1100px) and (min-width: 641px) { .navi-region { scroll-margin-top: 185px; } }
@media (max-width: 640px) {
  .navi-jump { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .navi-jump a { padding: 7px 2px; font-size: 12px; text-align: center; }
  .navi-jump a::after { content: none; }
  .navi-region { scroll-margin-top: 85px; }
}
/* 地方ボタンは同じ幅にそろえる */
.navi-jump { display: grid; grid-template-columns: repeat(8, 1fr); }
.navi-jump a { text-align: center; padding: 8px 2px; white-space: nowrap; }
@media (max-width: 860px) { .navi-jump { grid-template-columns: repeat(4, 1fr); } }

/* 都道府県ページ：この県の船が出ているエリア */
.pref-catch { padding: 0; }
.pref-catch section { margin: 24px 0 36px; }
.pref-seas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pref-seas a { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 2px solid #dfe6ee; border-radius: 8px; padding: 10px 12px; text-decoration: none; }
.pref-seas a:hover { border-color: #2c7be5; }
.pref-seas strong { color: #1a3a5c; }
.pref-seas span { font-size: 12px; color: #888; }
.catch-asof { font-size: 13px; color: #666; margin: -6px 0 14px; }