/* =========================================================
   Bassin’ Heaven トップページ専用CSS
   /top/top.css
   ・このファイルはトップページ（/index.html）専用です
   ・共通の /common/site.css / header.html / footer.html は変更していません
   ・メキシコページ（2702mexico.css）は読み込みません（設計思想のみ踏襲）
   ・文字はすべてHTML側。ここでは content: に表示文字を持たせません

   ■ 仕上げ版：余白・文字サイズ・カードの最終値は末尾「2026-09-29 仕上げ」を参照。
     色の定義は「0. 色」。マーレーコッドのみ原画の座標切り出しを末尾に記録。

   ■ 元の設計箇所（下記に加えて末尾の仕上げ指定が適用されます）
   ■ 見た目を触るときの場所（小松さん・ルーカスさん用）
     ・全体の色       → すぐ下の「0. 色」ブロックだけで変わります
         暗い地   --ink / --night / --deep   （数字を下げるほど暗く重く）
         明るい地 --paper / --dusk           （黄を足すほど紙っぽく）
         差し色   --brass / --brass-lt（金）・--ochre（黄土）・--olive（オリーブ）
     ・セクションの上下余白 → 「1.」の .top-sec と .top-sec--paper,.top-sec--dusk
     ・見出しの大きさ・太さ → 「1.」の .top-h2 / .top-h3
     ・区切りのルアーと英字ラベル → 「1.」の .top-label__lure / __en / __ja
                                     ルアーの絵の入れ替えは index.html 側（#lure-○○）
     ・魚カードの大きさ     → 「4.」の .top-fish の width
     ・一覧のサムネイル     → 「5.」の .top-index__head と .top-index__thumb
     ・写真の中で見せる位置 → CSSではなくHTML側の style="--pos: 左右% 上下%"
   ========================================================= */

/* =========================================================
   飾りの英字（手書き風）Italianno
   ・ファイルは /common/fonts/italianno-latin.woff2（37KB・自前配信）
   ・外部への通信はありません
   ・使うときは font-family: var(--font-script)
   ========================================================= */
@font-face{
  font-family: "Italianno";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/common/fonts/italianno-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* =========================================================
   0. 色（この1ブロックで全体の景色が決まります）
   ========================================================= */
.top-main{
  /* --- 地の色（暗い側は真っ黒にせず、深い緑を残したまま重くする） --- */
  --ink:        #0B120E;   /* いちばん暗い地（深い森の闇） */
  --night:      #0B211B;   /* 夜（魚カード帯・これから出る釣行） */
  --deep:       #102A22;   /* 深い森 */
  --moss:       #1B3E2E;   /* 明るい緑（魚から探す）数字を上げるほど明るい */
  --dusk:       #E8DDC5;   /* 使い込んだ紙（釣行の記録） */
  --paper:      #F4EEDF;   /* 紙（アイボリー） */

  /* --- アクセント --- */
  --sea:        #14595E;   /* 深い水 */
  --sea-light:  #3E9C99;   /* 浅い水 */
  --sky:        #2F6B8F;   /* 空 */
  --brass:      #C49A4D;   /* 真鍮（共通色と同じ） */
  --brass-lt:   #DCBB72;   /* 明るい金 */
  --ochre:      #8A6420;
  --font-script: "Italianno", cursive;   /* 黄土（明るい地の主アクセント） */
  --olive:      #4C5535;   /* オリーブ（明るい地の線・小見出し） */
  --ember:      #C8621F;   /* 募集中などの強調（共通のオレンジ系） */

  /* --- 文字 --- */
  --on-dark:    #FFF7E5;
  --on-dark-2:  rgba(247,241,227,.78);
  --on-light:   #20241A;
  --on-light-2: rgba(32,36,26,.76);
}

/* =========================================================
   1. セクション共通（地の色ごとに文字色を切り替える）
   ========================================================= */
.top-main{
  background: var(--paper);
}

.top-sec{
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
  background: var(--c-bg);
  overflow: hidden;
}

/* 明るい地は間延びして見えやすいので、暗い地より上下を詰める */
.top-sec--paper,
.top-sec--dusk{
  padding-block: clamp(52px, 6.6vw, 94px);
}

/* 明るい地にごく薄い紙の質感（画像は使いません） */
.top-sec--paper::after,
.top-sec--dusk::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 92% at 50% -12%, rgba(138,100,32,.085), transparent 62%),
    repeating-linear-gradient(94deg, rgba(76,85,53,.035) 0 2px, transparent 2px 5px);
}

/* 中身は質感より前へ */
.top-sec > *{
  position: relative;
  z-index: 1;
}

/* 紙（明） */
.top-sec--paper{
  --c-bg:     var(--paper);
  --c-head:   var(--on-light);
  --c-body:   var(--on-light-2);
  --c-accent: var(--ochre);
  --c-num:    var(--ochre);
  --c-line:   rgba(76,85,53,.34);
  --c-soft:   rgba(138,100,32,.13);
}

/* 水のインク（暗） */
.top-sec--ink{
  --c-bg:     #0C1712;
  --c-head:   var(--on-dark);
  --c-body:   var(--on-dark-2);
  --c-accent: var(--sea-light);
  --c-num:    var(--sea-light);
  --c-line:   rgba(62,156,153,.42);
  --c-soft:   rgba(62,156,153,.18);
}

/* 森（暗） */
.top-sec--deep{
  --c-bg:     var(--deep);
  --c-head:   var(--on-dark);
  --c-body:   var(--on-dark-2);
  --c-accent: var(--brass-lt);
  --c-num:    var(--brass-lt);
  --c-line:   rgba(220,187,114,.42);
  --c-soft:   rgba(220,187,114,.16);
}

/* 明るい紙（渡航案内） */
.top-sec--dusk{
  --c-bg:     var(--dusk);
  --c-head:   var(--on-light);
  --c-body:   var(--on-light-2);
  --c-accent: var(--ochre);
  --c-num:    var(--ochre);
  --c-line:   rgba(76,85,53,.32);
  --c-soft:   rgba(138,100,32,.13);
}

/* 暗いセクションの上辺に細い線を1本 */
.top-sec--ink::before,
.top-sec--deep::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-line) 18%, var(--c-line) 82%, transparent);
}

/* --- 見出しラベル（番号 / 英字 / 日本語） --- */
/* ルアーの絵の置き場（表示しない） */
.top-lure-defs{
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* セクション区切りのルアー（番号の代わり） */
.top-label__lure{
  flex: none;
  width: clamp(86px, 8.4vw, 116px);
  height: clamp(38px, 3.7vw, 52px);
  color: var(--c-num);
  fill: currentColor;
  stroke: currentColor;
}

.top-fields__head{
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-label__lure--sm{
  flex: none;
  width: 68px;
  height: 30px;
  color: var(--olive);
}

.top-label{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.top-label__lure + .top-label__en::before{
  content: "";
  display: inline-block;
  width: 48px;
  height: 2px;
  margin-right: 14px;
  vertical-align: middle;
  background: var(--c-num);
  opacity: .55;
}

.top-label__en{
  color: var(--c-num);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2em;
}

.top-label__ja{
  color: var(--c-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  opacity: .82;
}

/* --- 見出し・本文 --- */
.top-h2{
  color: var(--c-head);
  font-family: var(--font-serif);
  font-size: clamp(30px, 3.9vw, 54px);
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: .035em;
  line-break: strict;
  word-break: auto-phrase;
}

.top-h3{
  color: var(--c-head);
  font-family: var(--font-serif);
  font-size: clamp(21px, 2.4vw, 31px);
  font-weight: 600;
  letter-spacing: .045em;
  line-break: strict;
  word-break: auto-phrase;
}

.top-text p{
  color: var(--c-body);
  font-size: 15.5px;
  line-height: 1.95;
  letter-spacing: .03em;
}

.top-text p + p{
  margin-top: 1em;
}

.top-text__note{
  margin-top: 1em;
  color: var(--c-accent);
  font-weight: 700;
}

/* 見出し＋本文の2カラム */
.top-head{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}

.top-note{
  margin-top: clamp(24px, 3vw, 36px);
  color: var(--c-body);
  font-size: 13.5px;
  letter-spacing: .04em;
}

.top-note a{
  color: var(--c-accent);
  border-bottom: 1px solid var(--c-line);
}

.top-note a:hover{
  border-bottom-color: var(--c-accent);
}

/* --- スクロールで浮き上がる（JSなし・対応ブラウザのみ） --- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .top-reveal{
      animation: top-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 46%;
    }

    @keyframes top-rise{
      from{ opacity: 0; transform: translateY(26px); }
      to{   opacity: 1; transform: none; }
    }
  }
}


/* =========================================================
   2. HERO｜現在のメインスタッフ同行釣行
   ========================================================= */
.top-hero{
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(580px, 88vh, 900px);
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(48px, 7vw, 92px);
  background: var(--ink);
  overflow: hidden;
}

.top-hero__media{
  position: absolute;
  inset: 0;
}

.top-hero__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 45%);
}

.top-hero__veil{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(7,12,9,.95) 0%, rgba(7,12,9,.7) 36%, rgba(7,12,9,.14) 68%, rgba(7,12,9,.5) 100%),
    linear-gradient(to right, rgba(7,12,9,.8) 0%, rgba(7,12,9,.42) 36%, rgba(7,12,9,.05) 64%);
}

.top-hero[data-align="right"] .top-hero__veil{
  background:
    linear-gradient(to top, rgba(7,12,9,.95) 0%, rgba(7,12,9,.7) 36%, rgba(7,12,9,.14) 68%, rgba(7,12,9,.5) 100%),
    linear-gradient(to left, rgba(7,12,9,.86) 0%, rgba(7,12,9,.56) 36%, rgba(7,12,9,.07) 70%);
}

.top-hero__inner{
  position: relative;
  color: var(--on-dark);
}

/* 文字のかたまり。HTMLの data-align="right" で右半分へ移る */
.top-hero__copy{
  width: min(780px, 58%);
}

.top-hero[data-align="right"] .top-hero__copy{
  margin-left: auto;
}

.top-hero__brand{
  width: clamp(132px, 13vw, 176px);
  height: auto;
  margin-bottom: 18px;
}

.top-hero__tagline{
  font-family: var(--font-serif);
  font-size: clamp(18px, 1.85vw, 24px);
  letter-spacing: .16em;
  color: var(--brass-lt);
  text-shadow: 0 2px 16px rgba(0,0,0,.6);
}

/* 創業年など、タグラインの下に1行入れたい時に使う（現在HTMLでは未使用） */
.top-hero__est{
  margin-top: 6px;
  color: var(--on-dark-2);
  font-size: 11.5px;
  letter-spacing: .2em;
}

.top-hero__now{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(26px, 4vw, 46px);
}

.top-hero__nowlabel{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--on-dark-2);
}

.top-hero__status{
  padding: 5px 13px 4px;
  border-radius: 999px;
  background: var(--ember);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
}

.top-hero__title{
  margin-top: 12px;
  font-family: var(--font-serif);
  font-size: clamp(33px, 4.5vw, 64px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .04em;
  text-shadow: 0 2px 20px rgba(0,0,0,.5);
  line-break: strict;
  word-break: auto-phrase;
  max-width: 16em;
}

.top-hero__catch{
  margin-top: 14px;
  color: var(--brass-lt);
  font-family: var(--font-serif);
  font-size: clamp(16px, 1.8vw, 22px);
  letter-spacing: .08em;
  line-break: strict;
  word-break: auto-phrase;
}

.top-hero__date{
  display: block;
  width: fit-content;
  margin-top: 16px;
  padding-left: 14px;
  border-left: 3px solid var(--brass-lt);
  font-size: 15px;
  letter-spacing: .06em;
  color: var(--on-dark);
  line-break: strict;
  word-break: auto-phrase;
}

.top-hero__cta{
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin-top: clamp(26px, 3.4vw, 38px);
  padding: 16px 32px;
  border: 1px solid var(--brass-lt);
  background: rgba(179,139,69,.95);
  color: #14170F;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .1em;
  transition: background .2s ease, transform .2s ease;
}

.top-hero__cta:hover{
  background: var(--brass-lt);
  transform: translateY(-2px);
}

/* 下向きの線（スクロールの合図・文字は使わない） */
.top-hero__scroll{
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, transparent, var(--brass-lt));
}


/* =========================================================
   3. これから出る釣行（一覧はJSで /stafftour/index.html から複製）
   ========================================================= */
.top-next{
  background: var(--night);
  border-bottom: 2px solid rgba(220,187,114,.26);
  padding-block: clamp(34px, 4.4vw, 58px);
}

.top-next__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
}

.top-next__en{
  color: var(--brass-lt);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
}

.top-next__title{
  margin-top: 10px;
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.45;
}

.top-next__link{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 22px;
  border: 1px solid rgba(209,178,104,.55);
  color: var(--brass-lt);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .07em;
  transition: background .2s ease, color .2s ease;
}

.top-next__link:hover{
  background: rgba(209,178,104,.14);
  color: #E8CF8B;
}

/* 一覧（読み込めた時だけ中身が入る） */
.top-next__list{
  list-style: none;
}

.top-next__list.is-ready{
  margin-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid rgba(247,241,227,.18);
}

.top-next__item{
  border-bottom: 1px solid rgba(247,241,227,.18);
}

.top-next__row{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 18px;
  align-items: center;
  gap: 8px clamp(14px, 2.4vw, 32px);
  padding: 15px 4px;
  transition: background .2s ease;
}

.top-next__row:hover{
  background: rgba(247,241,227,.05);
}

.top-next__name{
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.9vw, 22px);
  letter-spacing: .04em;
  line-height: 1.5;
}

.top-next__date{
  color: var(--brass-lt);
  font-size: 13px;
  letter-spacing: .03em;
  line-height: 1.7;
}

/* 共通の状態バッジを、この帯の中だけ小さく使う */
.top-next .top-next__status{
  min-width: 0;
  min-height: 0;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
}

.top-next__arrow{
  position: relative;
  width: 18px;
  height: 18px;
}

.top-next__arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 7px;
  height: 7px;
  border-top: 1.4px solid var(--brass-lt);
  border-right: 1.4px solid var(--brass-lt);
  transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   4. 魚カード（横スクロール）
   ========================================================= */
.top-strip{
  position: relative;
  margin-top: 0;
  padding-block: clamp(30px, 4vw, 52px);
  background: var(--night);
  border-top: 2px solid rgba(220,187,114,.3);
  border-bottom: 2px solid rgba(220,187,114,.3);
}

.top-strip::before,
.top-strip::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(18px, 4vw, 70px);
  pointer-events: none;
  z-index: 2;
}

.top-strip::before{
  left: 0;
  background: linear-gradient(to right, var(--night), transparent);
}

.top-strip::after{
  right: 0;
  background: linear-gradient(to left, var(--night), transparent);
}

.top-strip__track{
  display: flex;
  gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 24px;
  padding-inline: max(24px, calc((100% - var(--maxw)) / 2 + 24px));
  padding-bottom: 18px;
  list-style: none;
  scrollbar-color: var(--brass) rgba(247,241,227,.12);
  scrollbar-width: thin;
  overscroll-behavior-x: contain;
}

.top-strip__track::-webkit-scrollbar{
  height: 8px;
}

.top-strip__track::-webkit-scrollbar-track{
  background: rgba(247,241,227,.1);
}

.top-strip__track::-webkit-scrollbar-thumb{
  background: var(--brass);
  border-radius: 99px;
}

.top-fish{
  flex: 0 0 auto;
  width: clamp(320px, 33vw, 470px);
  scroll-snap-align: start;
  background: #16211A;
  border: 1px solid rgba(220,187,114,.2);
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.top-fish:hover{
  border-color: rgba(220,187,114,.5);
  box-shadow: 0 14px 32px rgba(0,0,0,.44);
}

/* 魚は横長なので、カードの写真枠も横長（1:2） */
.top-fish__media{
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}

.top-fish__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  transition: transform .5s ease;
}

.top-fish__media::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(8,13,9,.5), transparent 44%);
}

.top-fish:hover .top-fish__media img{
  transform: scale(1.04);
}

.top-fish__no{
  position: absolute;
  z-index: 1;
  top: 9px;
  left: 12px;
  color: var(--brass-lt);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  text-shadow: 0 1px 10px rgba(0,0,0,.85);
}

.top-fish__body{
  padding: 16px 16px 18px;
}

.top-fish__name{
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: .05em;
  line-height: 1.4;
}

.top-fish__en{
  margin-top: 5px;
  color: var(--sea-light);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

.top-fish__lead{
  margin-top: 11px;
  color: var(--on-dark-2);
  font-size: 13px;
  line-height: 1.8;
}

/* --- 行き先リンク（カード内・一覧内で共通） --- */
.top-dests{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 13px;
  list-style: none;
}

.top-dest{
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-height: 42px;
  padding: 6px 11px;
  border: 1px solid rgba(62,156,153,.55);
  background: rgba(20,89,94,.3);
  transition: background .2s ease, border-color .2s ease;
}

.top-dest:hover{
  background: rgba(62,156,153,.4);
  border-color: var(--sea-light);
}

.top-dest__en{
  color: var(--sea-light);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
}

.top-dest__ja{
  color: var(--on-dark);
  font-size: 12px;
  letter-spacing: .03em;
  line-height: 1.5;
}

.top-strip__hint{
  margin-top: 14px;
  color: var(--c-body);
  font-size: 12px;
  letter-spacing: .1em;
}

/* --- 矢印（JSで追加。文字は持たない） --- */
.top-strip__arrow{
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  border: 1px solid rgba(209,178,104,.6);
  border-radius: 50%;
  background: rgba(10,13,11,.72);
  cursor: pointer;
  transition: background .2s ease;
}

.top-strip__arrow:hover{
  background: rgba(179,139,69,.4);
}

.top-strip__arrow::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-top: 1.6px solid var(--brass-lt);
  border-right: 1.6px solid var(--brass-lt);
}

.top-strip__arrow--next::before{
  transform: translate(-60%, -50%) rotate(45deg);
}

.top-strip__arrow--prev::before{
  transform: translate(-40%, -50%) rotate(-135deg);
}

.top-strip__arrow--prev{
  left: clamp(6px, 1.4vw, 18px);
}

.top-strip__arrow--next{
  right: clamp(6px, 1.4vw, 18px);
}


/* =========================================================
   5. 魚の全一覧（16棚・探すための一覧）
   ========================================================= */
.top-index{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.3vw, 16px);
  margin-top: clamp(16px, 2vw, 24px);
  list-style: none;
}

.top-index__item{
  position: relative;
  padding: 0;
  overflow: hidden;
  background: #FBF7EA;
  border: 1px solid rgba(32,36,26,.16);
  border-top: 3px solid var(--ochre);
  box-shadow: 0 2px 0 rgba(32,36,26,.05);
  transition: background .2s ease, border-color .2s ease;
}

.top-index__item:hover{
  background: #fff;
  border-color: rgba(138,100,32,.4);
  border-top-color: var(--ochre);
}

/* 写真は枠いっぱい。魚名は写真の上に乗せる
   ・写真の高さ   → .top-index__thumb の aspect-ratio（2 / 1）
   ・見せる位置   → CSSではなくHTML側の style="--pos: 左右% 上下%"
   ・帯の濃さ     → .top-index__label の rgba(...) の最後の数字 */
.top-index__head{
  position: relative;
  display: block;
}

.top-index__thumb{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  border: 0;
}

/* 写真の下半分に敷く暗い帯（文字を読ませるため） */
.top-index__label{
  position: absolute;
  inset: auto 0 0 0;
  padding: 22px 12px 9px;
  background: linear-gradient(0deg,
    rgba(6,18,13,.92) 0%, rgba(6,18,13,.74) 42%, rgba(6,18,13,.28) 78%, rgba(6,18,13,0) 100%);
  pointer-events: none;
}

.top-index__name{
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .03em;
  line-height: 1.3;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

.top-index__en{
  margin-top: 2px;
  color: var(--brass-lt);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-shadow: 0 1px 5px rgba(0,0,0,.7);
}

/* 一覧側の行き先リンクは明るい地に合わせる */
.top-dests--compact{
  padding: 10px 11px 12px;
  gap: 6px;
  margin-top: 11px;
}

.top-dests--compact .top-dest{
  min-height: 40px;
  padding: 5px 10px;
  border-color: rgba(76,85,53,.42);
  background: rgba(138,100,32,.1);
}

.top-dests--compact .top-dest:hover{
  background: rgba(138,100,32,.2);
  border-color: var(--ochre);
}

.top-dests--compact .top-dest__en{
  color: var(--ochre);
  font-size: 9.5px;
  font-weight: 800;
}

.top-dests--compact .top-dest__ja{
  color: var(--on-light);
  font-size: 11.5px;
}


/* =========================================================
   6. 個別手配
   ========================================================= */
.top-arrange{
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 4.5vw, 72px);
  align-items: center;
}

.top-arrange__media img{
  width: 100%;
  height: 100%;
  min-height: clamp(280px, 27vw, 430px);
  max-height: 560px;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
  border: 1px solid rgba(62,156,153,.42);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

/* --- リンクの並び（共通） --- */
.top-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 34px);
  list-style: none;
}

.top-link{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  border: 1px solid var(--c-line);
  color: var(--c-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .07em;
  transition: background .2s ease, border-color .2s ease;
}

.top-link:hover{
  border-color: var(--c-accent);
  background: var(--c-soft);
}


/* =========================================================
   7. 釣行の記録（遠征報告・note・動画）
   ========================================================= */
.top-records{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
  list-style: none;
}

.top-record{
  background: #FCF8EC;
  border: 1px solid rgba(32,36,26,.16);
  box-shadow: 0 2px 0 rgba(32,36,26,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.top-record:hover{
  transform: translateY(-3px);
  border-color: rgba(138,100,32,.42);
  box-shadow: var(--shadow);
}

.top-record > a{
  display: block;
  padding-bottom: 20px;
}

/* ▼ 遊び：3枚をごく僅かに傾ける（不要ならこのブロックごと削除してください） */
@media (min-width: 768px){
  .top-record:nth-child(1){ transform: rotate(-.45deg); }
  .top-record:nth-child(2){ transform: rotate(.3deg); }
  .top-record:nth-child(3){ transform: rotate(-.25deg); }

  .top-record:nth-child(1):hover,
  .top-record:nth-child(2):hover,
  .top-record:nth-child(3):hover{
    transform: translateY(-3px) rotate(0deg);
  }
}

.top-record__media{
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.top-record__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

.top-record__kind{
  margin: 15px 18px 0;
  color: var(--ochre);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
}

.top-record__title{
  margin: 7px 18px 0;
  color: var(--on-light);
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .04em;
}

.top-record__ext{
  margin-left: 6px;
  color: var(--ochre);
  font-size: 12px;
}

.top-record__text{
  margin: 8px 18px 0;
  color: var(--on-light-2);
  font-size: 13px;
  line-height: 1.85;
}

/* --- その他の動画・レポート --- */
.top-more{
  margin-top: clamp(20px, 2.4vw, 30px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--c-line);
}

.top-more__label{
  color: var(--c-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.top-more__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px clamp(20px, 3vw, 48px);
  margin-top: 14px;
  list-style: none;
}

.top-more__list a{
  display: inline-block;
  padding: 7px 0;
  color: var(--c-head);
  font-size: 13.5px;
  letter-spacing: .03em;
  border-bottom: 1px solid transparent;
}

.top-more__list a:hover{
  color: var(--ochre);
  border-bottom-color: var(--c-line);
}

.top-more__list span{
  margin-left: 6px;
  color: var(--ochre);
  font-size: 11px;
}


/* =========================================================
   8. 小松勇介 ／ Bassin’ Heaven
   ========================================================= */
.top-guide{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 4.5vw, 72px);
  align-items: center;
}

.top-guide__media img{
  width: 100%;
  height: 100%;
  min-height: clamp(320px, 30vw, 500px);
  max-height: 620px;
  object-fit: cover;
  object-position: var(--pos, 50% 40%);
  border: 1px solid rgba(220,187,114,.42);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}

.top-guide__role{
  margin-bottom: 4px;
  color: var(--c-accent);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
}

.top-guide__quote{
  margin-top: 14px;
  margin-bottom: 18px;
  color: var(--brass-lt);
  font-family: var(--font-serif);
  font-size: clamp(15px, 1.6vw, 19px);
  letter-spacing: .05em;
  line-height: 1.85;
  line-break: strict;
  word-break: auto-phrase;
}


/* =========================================================
   9. 渡航のご案内（ESTA / eTA / 約款）
   ========================================================= */
.top-info{
  margin-top: clamp(14px, 1.6vw, 22px);
  border-top: 1px solid var(--c-line);
}

.top-info__row{
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 8px 24px;
  padding-block: 18px;
  border-bottom: 1px solid var(--c-line);
}

.top-info dt{
  color: var(--c-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}

.top-info dd{
  color: var(--c-body);
  font-size: 14px;
  line-height: 1.72;
  letter-spacing: .02em;
}

.top-info dd a{
  color: var(--c-accent);
  font-weight: 700;
  border-bottom: 1px solid var(--c-line);
}

.top-info dd a:hover{
  border-bottom-color: var(--c-accent);
}

.top-info dd span{
  margin-left: 4px;
  font-size: 11px;
}

/* --- 関連サイト --- */
.top-sites{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: clamp(14px, 1.6vw, 20px);
  list-style: none;
}

.top-sites a{
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-head);
  font-size: 13px;
  letter-spacing: .06em;
  transition: border-color .2s ease, background .2s ease;
}

.top-sites a:hover{
  border-color: var(--c-accent);
  background: var(--c-soft);
}


/* =========================================================
   9-2. フィールドから探す（暫定・控えめな文字リンクのみ）
   ========================================================= */
.top-fields{
  padding-block: clamp(44px, 5.5vw, 76px);
  background: var(--paper);
  border-top: 1px solid rgba(32,36,26,.16);
}

.top-fields__en{
  color: rgba(32,36,26,.5);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
}

.top-fields__title{
  margin-top: 8px;
  color: var(--on-light);
  font-family: var(--font-serif);
  font-size: clamp(17px, 1.8vw, 21px);
  font-weight: 500;
  letter-spacing: .06em;
}

.top-fields__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.6vw, 34px) clamp(20px, 3vw, 48px);
  margin-top: clamp(12px, 1.4vw, 18px);
}

.top-fields__area{
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(76,85,53,.34);
  color: var(--olive);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
}

.top-fields__group ul{
  margin-top: 8px;
  list-style: none;
}

.top-fields__group a{
  display: inline-block;
  padding: 5px 0;
  color: rgba(32,36,26,.82);
  font-size: 13px;
  letter-spacing: .02em;
  border-bottom: 1px solid transparent;
}

.top-fields__group a:hover{
  color: var(--ochre);
  border-bottom-color: rgba(138,100,32,.45);
}


/* =========================================================
   10. お問い合わせ
   ========================================================= */
.top-cta{
  position: relative;
  padding-block: clamp(72px, 10vw, 136px);
  background: var(--ink);
  overflow: hidden;
}

.top-cta__media{
  position: absolute;
  inset: 0;
}

.top-cta__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 50% 62%);
}

.top-cta__veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(9,15,11,.84), rgba(9,15,11,.56) 48%, rgba(9,15,11,.93));
}

.top-cta__inner{
  position: relative;
  text-align: center;
}

.top-cta__en{
  color: var(--brass-lt);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .24em;
}

.top-cta__title{
  margin-top: 14px;
  color: var(--on-dark);
  font-family: var(--font-serif);
  font-size: clamp(28px, 3.8vw, 50px);
  font-weight: 600;
  letter-spacing: .045em;
  line-height: 1.4;
  line-break: strict;
  word-break: auto-phrase;
}

.top-cta__text{
  margin-top: 14px;
  color: var(--on-dark-2);
  font-size: 15px;
  line-height: 1.82;
  letter-spacing: .03em;
}

.top-cta__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: clamp(20px, 2.4vw, 30px);
}

.top-cta__button{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 44px;
  background: var(--brass);
  border: 1px solid var(--brass-lt);
  color: #14170F;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .12em;
  transition: background .2s ease, transform .2s ease;
}

.top-cta__button:hover{
  background: var(--brass-lt);
  transform: translateY(-2px);
}

.top-cta__mail{
  color: var(--brass-lt);
  font-size: 14px;
  letter-spacing: .06em;
  border-bottom: 1px solid rgba(209,178,104,.4);
}

.top-cta__license{
  margin-top: clamp(22px, 2.8vw, 32px);
  color: rgba(247,241,227,.6);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .03em;
}


/* =========================================================
   11. タブレット（〜1023px）
   ========================================================= */
@media (max-width: 1023px){
  .top-head{
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .top-arrange,
  .top-guide{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .top-arrange__media img,
  .top-guide__media img{
    max-height: 420px;
  }

  .top-index{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .top-next__head{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .top-fields__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =========================================================
   12. スマートフォン（〜767px）
   ========================================================= */
@media (max-width: 767px){
  .top-hero{
    min-height: 0;
    height: auto;
    align-items: stretch;
    flex-direction: column;
    padding-top: var(--header-h);
    padding-bottom: 34px;
    background: var(--night);
  }

  /* スマホは「写真 → 文字」の縦積み（文字が魚に重ならないように） */
  /* スマホ用写真は 4:3（1200×900）。メキシコ個別ページと同じ規格 */
  .top-hero__media{
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
  }

  .top-hero__img{
    object-position: var(--pos-sp, 50% 45%);
  }

  .top-hero__veil{
    background: linear-gradient(to top, var(--night) 2%, rgba(6,9,7,.42) 38%, rgba(6,9,7,.12) 70%, rgba(6,9,7,.34) 100%);
  }

  .top-hero__inner{
    margin-top: -26px;
  }

  /* スマホは写真の下に文字が来るので、左右の振り分けはしない */
  .top-hero__copy,
  .top-hero[data-align="right"] .top-hero__copy{
    width: 100%;
    margin-left: 0;
  }

  .top-hero__brand{
    width: 124px;
    margin-bottom: 14px;
  }

  .top-hero__tagline{
    font-size: 16px;
    letter-spacing: .12em;
  }

  .top-hero__now{
    margin-top: 20px;
  }

  .top-hero__title{
    font-size: 29px;
    line-height: 1.42;
  }

  .top-hero__date{
    font-size: 13px;
  }

  .top-hero__cta{
    width: 100%;
    justify-content: center;
    padding: 15px 20px;
  }

  .top-hero__scroll{
    display: none;
  }

  .top-hero__catch{
    font-size: 15px;
  }

  .top-next__link{
    width: 100%;
    justify-content: center;
  }

  /* 釣行1本を2行に：釣行名＋日付／状況 */
  .top-next__row{
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 14px 2px;
  }

  .top-next__name{
    grid-column: 1 / -1;
    font-size: 16px;
  }

  .top-next__date{
    font-size: 12.5px;
  }

  .top-next__arrow{
    display: none;
  }

  .top-fields__grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .top-label{
    gap: 9px;
    margin-bottom: 16px;
  }

  .top-label__lure{
    width: 76px;
    height: 34px;
  }

  .top-label__lure + .top-label__en::before{
    width: 28px;
    margin-right: 10px;
  }

  .top-label__en{
    font-size: 11.5px;
    letter-spacing: .17em;
  }

  .top-label__ja{
    font-size: 12.5px;
  }

  .top-text p{
    font-size: 14px;
    line-height: 1.95;
  }

  /* 魚カードは指でスワイプ */
  .top-fish{
    width: 84vw;
    max-width: 400px;
  }

  .top-strip__track{
    padding-inline: 16px;
    scroll-padding-inline: 16px;
  }

  .top-strip__arrow{
    display: none;
  }

  /* 全一覧はスマホ2列 */
  .top-index{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .top-index__name{
    font-size: 15.5px;
  }

  .top-dests{
    flex-direction: column;
  }

  .top-dest{
    width: 100%;
  }

  .top-records{
    grid-template-columns: 1fr;
  }

  .top-more__list{
    grid-template-columns: 1fr;
  }

  .top-links{
    flex-direction: column;
  }

  .top-link{
    justify-content: center;
  }

  .top-info__row{
    grid-template-columns: 1fr;
    gap: 6px;
    padding-block: 15px;
  }

  .top-info dd{
    font-size: 13.5px;
  }

  .top-cta__button{
    width: 100%;
    justify-content: center;
    padding: 16px 20px;
  }

  .top-cta__license{
    font-size: 11.5px;
  }
}

/* PCでは強制改行用の br を使わない（site.css の .br-sp と対） */

/* =========================================================
   2026-09-29 仕上げ：旅の紙面・写真・強い見出し
   共通パーツには影響しない。写真の位置はHTMLの --pos を保持。
   ========================================================= */
.top-main{--font-serif:"BH Mincho","Yu Mincho","Hiragino Mincho ProN",serif}
.top-main .container{max-width:1280px;padding-inline:40px}
.top-h2{font-size:clamp(34px,4.7vw,68px);font-weight:900;letter-spacing:.015em;line-height:1.35}
.top-h3{font-weight:900;font-size:clamp(24px,2.5vw,34px)}
.top-label__lure{width:116px;height:52px}.top-label__en{letter-spacing:.22em}.top-label{margin-bottom:12px}
.top-sec{padding-block:46px}.top-sec--paper,.top-sec--dusk{padding-block:38px}
.top-sec--paper::after,.top-sec--dusk::after{opacity:.6;background:radial-gradient(ellipse at 0 0,rgba(138,100,32,.15),transparent 55%)}
.top-hero{min-height:640px;height: min(770px,85vh);padding-bottom:58px}
.top-hero__copy{width:53%;position:relative}
.top-hero__brand{display:none}
.top-hero__tagline{font-size:22px;font-weight:800;color:var(--brass-lt);letter-spacing:.08em}
.top-hero__now{margin-top:24px}
.top-hero__title{font-size:clamp(38px,4.2vw,62px);font-weight:900;line-height:1.45;letter-spacing:.015em;max-width:none;word-break:normal}
.top-hero__catch{font-weight:700;font-size:23px}.top-hero__date{font-size:14px;line-height:1.8}
.top-hero[data-align="right"] .top-hero__veil{background:linear-gradient(90deg,rgba(4,17,13,.03) 0%,rgba(4,17,13,.05) 32%,rgba(4,17,13,.65) 57%,rgba(4,17,13,.88) 100%),linear-gradient(0deg,var(--night),transparent 35%)}
.top-compass{
  position:absolute;
  width:clamp(165px,14vw,205px);
  height:auto;
  right:-8px;
  bottom:-4px;
  opacity:.94;
  pointer-events:none;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.38));
}
.top-hero__cta,.top-cta__button{background:linear-gradient(115deg,var(--brass-lt),var(--brass));box-shadow:0 4px 18px #0003;border-radius:3px;color:var(--ink);font-weight:800}
/* 「これから出る釣行」の背景写真
   ・写真を替える → /top/images/top-next-bg.jpg を同じ名前で上書き
   ・見せる高さ   → 下の 50% 66% の 2つめの数字（小さいほど上が見える）
   ・暗さ         → rgba(...) の最後の数字（大きいほど暗い） */
.top-next{position:relative;background:linear-gradient(180deg,rgba(8,29,22,.18) 0%,rgba(8,29,22,.24) 48%,rgba(8,29,22,.66) 100%),linear-gradient(104deg,rgba(8,29,22,.88) 0%,rgba(8,29,22,.62) 46%,rgba(8,29,22,.32) 100%),url('/top/images/top-next-bg.jpg') 50% 66%/cover;padding-block:22px 28px}
.top-next__title{font-size:32px;font-weight:900}.top-next__row{padding-block:14px}.top-next__name{font-weight:700}
.top-next::after,.top-strip::after{content:"";position:absolute;inset:auto 0 -1px;height:20px;background:url('/top/images/paper-edge.svg') center/100% 100%;width:100%;z-index:2}
.top-world{padding-top:36px;background:var(--paper)}

.top-world .top-head{position:relative;margin-bottom:0}
.top-world .top-head .top-h2{max-width:650px}.top-world .top-text{padding-top:12px}
.top-strip{margin-top:0;padding-block:16px 22px;background:linear-gradient(135deg,var(--deep),var(--night));border-top:1px solid var(--brass);position:relative}
.top-strip::before{display:none}
.top-strip__track{gap:22px;padding-inline:max(24px,calc((100vw - 1200px)/2));padding-block:5px 14px}
.top-fish{width:380px;border:1px solid var(--brass);border-radius:6px;box-shadow:0 10px 24px #0005;background:var(--deep)}
.top-fish__media{aspect-ratio:2/1}.top-fish__name{font-size:25px;font-weight:900}.top-fish__body{padding:17px 20px 22px}.top-fish__en{color:var(--brass-lt)}
.top-fish__media img[src*="murraycod"]{object-position:65% 100%;transform:scale(1.35);transform-origin:65% 95%}
.top-index__thumb[src*="murraycod"]{object-position:65% 100%}
.top-index{gap:8px}.top-index__item{border-top:1px solid var(--brass);border-radius:4px;background:rgba(255,253,246,.9);box-shadow:0 3px 8px #4430150c}
.top-index__name{font-weight:900;font-size:16px;letter-spacing:0;white-space:nowrap}.top-index__en{font-size:8.5px;letter-spacing:.1em}
.top-dests--compact{gap:4px}.top-dests--compact .top-dest{padding:4px 6px;min-height:34px}.top-dests--compact .top-dest__ja{font-size:11px}
.top-record{padding:8px;border:1px solid var(--brass-lt);box-shadow:0 8px 22px #33261424}.top-record:nth-child(1){transform:rotate(-1.4deg)}.top-record:nth-child(2){transform:rotate(.8deg)}.top-record:nth-child(3){transform:rotate(-.7deg)}
.top-record__title{font-weight:900}.top-records{gap:18px}.top-more{margin-top:18px}
.top-sec--deep{background:linear-gradient(90deg,rgba(10,34,26,.92),rgba(10,34,26,.97)),url('/top/images/top-landscape.jpg') center/cover}
.top-guide{grid-template-columns:1.1fr 1fr;gap:52px}.top-guide__media{transform:rotate(-2deg);padding:9px;background:var(--paper);box-shadow:0 14px 28px #0005}.top-guide__media img{min-height:0;height:344px;object-position:var(--pos,55% 40%);border:0}.top-guide .top-h2{font-size:42px;font-weight:700}.top-guide__quote{font-size:21px}
.top-sec--ink{background:var(--night) url('/top/images/compass.svg') no-repeat 95% 100%/300px}
.top-arrange{grid-template-columns:1.05fr 1fr;gap:48px}.top-arrange__media{padding:8px;background:#FFFDF7;border:1px solid rgba(32,36,26,.14);transform:rotate(2deg);box-shadow:0 12px 26px rgba(52,40,20,.2)}.top-arrange__media img{height:286px;min-height:0;border:0}.top-arrange .top-h2{font-size:44px;font-weight:900}
.top-info__row{padding-block:9px}.top-fields{padding-block:40px}.top-fields__grid{gap:13px 36px}.top-fields__title{font-weight:900;font-size:28px}
.top-cta{padding-block:54px;min-height:300px}.top-cta__media img{object-position:var(--pos,50% 68%)}.top-cta__veil{background:linear-gradient(90deg,rgba(6,22,16,.86),rgba(6,22,16,.55),rgba(6,22,16,.7))}.top-cta__title{font-weight:700;font-size:48px}.top-cta__license{margin-top:16px}
@media(min-width:768px) and (max-width:1100px){.top-index{grid-template-columns:repeat(3,minmax(0,1fr))}.top-guide,.top-arrange{gap:32px}.top-hero__copy{width:58%}.top-guide .top-h2{font-size:38px;font-weight:700}}
@media(max-width:767px){
.top-main .container{padding-inline:20px}.top-sec,.top-sec--paper,.top-sec--dusk{padding-block:26px}.top-h2{font-size:34px}.top-label__lure{width:74px;height:33px}.top-label__en{font-size:10px}.top-label__ja{font-size:11px}
.top-hero{height:auto;min-height:0;padding-bottom:28px}.top-hero__media{aspect-ratio:4/3}.top-hero[data-align="right"] .top-hero__veil{background:linear-gradient(0deg,var(--night),transparent 40%)}.top-hero__inner{margin-top:-5px}.top-hero__copy{width:100%}.top-hero__tagline{font-size:17px}.top-hero__now{margin-top:20px}.top-hero__title{font-size:32px;line-height:1.4}.top-hero__catch{font-size:18px}.top-hero__date{font-size:12px}.top-compass{width:108px;height:auto;right:0;bottom:88px;opacity:.90}
.top-next{padding-block:22px 28px}.top-next__title{font-size:26px}.top-next__name{font-size:16px}
.top-world>.container:first-child{padding-inline:20px;padding-bottom:38px}.top-world .top-head{gap:16px}.top-world .top-text{padding:0}.top-strip{padding-block:14px 18px}.top-fish{width:84vw}.top-fish__name{font-size:24px}.top-index{gap:7px}.top-index__name{font-size:14.5px}.top-index__en{font-size:8px}.top-dests--compact .top-dest{padding:4px 6px}
.top-records{gap:16px}.top-record:nth-child(n){transform:none}.top-guide,.top-arrange{grid-template-columns:1fr;gap:22px}.top-guide__media{transform:rotate(-1deg)}.top-guide__media img{height:258px}.top-guide .top-h2{font-size:32px;font-weight:700}.top-guide__quote{font-size:18px}.top-arrange .top-h2{font-size:31px}.top-arrange__media img{height:210px}.top-cta{padding-block:36px}.top-cta__title{font-size:32px}.top-cta__media img{object-position:var(--pos-sp,var(--pos,50% 68%))}.top-cta__veil{background:rgba(6,22,16,.72)}
}

.top-main{font-family:"Noto Sans JP",sans-serif}

/* 最終表示調整 */
.top-hero__title{font-size:clamp(36px,3.3vw,48px)}

.top-world .top-text{color:var(--on-light);text-shadow:0 1px 7px var(--paper)}
.top-next::after,.top-strip::after{height:8px}
.top-sec--paper::after,.top-sec--dusk::after{background:radial-gradient(ellipse at 0 0,rgba(138,100,32,.1),transparent 55%)}
.top-arrange .top-h2{font-size:40px;word-break:normal;line-break:strict}
.top-sec--ink{background-image:none}
.top-index__crop{width:100%;overflow:hidden;display:block}
.top-index__crop img{width:100%;height:100%;object-fit:cover;object-position:65% 100%;transform:scale(1.35);transform-origin:65% 95%}
@media(max-width:767px){.top-hero__title{font-size:30px}.top-arrange .top-h2{font-size:29px}}

/* マーレーコッド：原画を保ち、上下段とも同じ魚の範囲を表示 */
.top-hero__nowlabel{font-family:"Noto Sans JP",sans-serif}
.top-fish__media:has(img[src*="murraycod"]),.top-index__crop{position:relative;overflow:hidden;aspect-ratio:2/1}
.top-index__crop{height:auto}
.top-fish__media img[src*="murraycod"],.top-index__crop img{position:absolute;width:146.2857%;height:219.4286%;max-width:none;left:-35.7143%;top:-114.2857%;object-fit:fill;transform:none}


/* =========================================================
   世界地図（01 世界の釣り）— 背景として敷いています
   ・濃さを変える → /top/images/world-map.svg の中の fill / stroke
   ・位置と大きさ → 下の background の値
   ・飾りの英字   → .top-script
   ========================================================= */
.top-world > .container:first-child{
  position: relative;
  padding-bottom: clamp(24px, 3.2vw, 50px);
  background:
    url("/top/images/world-map.svg") no-repeat
    right -2% center / min(880px, 74%) auto;
}

.top-script{
  color: var(--ochre);
  font-family: var(--font-script);
  font-size: clamp(38px, 5vw, 72px);
  line-height: .9;
  opacity: .9;
  margin-top: clamp(8px, 1.4vw, 18px);
}

@media (min-width: 900px){
  .top-world > .container:first-child{
    min-height: 250px;
  }
  .top-script{
    position: absolute;
    right: max(24px, calc((100% - 1200px) / 2 + 24px));
    bottom: clamp(18px, 2.6vw, 38px);
    margin-top: 0;
  }
}

@media (max-width: 767px){
  .top-world > .container:first-child{
    background-size: 150% auto;
    background-position: 62% 88%;
    padding-bottom: 26px;
  }
  .top-script{
    font-size: 40px;
    margin-top: 14px;
  }
}


/* =========================================================
   04 渡航のご案内：見出しの横に写真
   ・写真を替える → /top/images/top-before.jpg を同じ名前で上書き
   ・見せる位置   → HTML側の style="--pos: 左右% 上下%"
   ========================================================= */
.top-info-head{
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .74fr);
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}

/* 写真と並ぶので、全幅の見出しより一段小さく */
.top-info-head .top-h2{
  font-size: clamp(30px, 3.5vw, 50px);
  line-height: 1.3;
}

.top-info-media{
  padding: 9px;
  background: var(--paper);
  border: 0;
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
  transform: rotate(-1.4deg);
}

.top-info-media img{
  display: block;
  width: 100%;
  height: clamp(176px, 16.5vw, 242px);
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}

@media (max-width: 767px){
  .top-info-head{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .top-info-media{ transform: rotate(-1deg); }
  .top-info-media img{ height: 180px; }
}


/* =========================================================
   フィールドから探す：見出しを写真の帯にする
   ・写真を替える → /top/images/top-fields-bg.jpg を同じ名前で上書き
   ・見せる高さ   → 下の 50% 52% の2つめの数字
   ========================================================= */
.top-fields{
  padding-block: 0 clamp(20px, 2.4vw, 34px);
  border-top: 0;
}

.top-fields__banner{
  position: relative;
  padding-block: clamp(22px, 2.6vw, 36px) clamp(26px, 3.2vw, 44px);
  margin-bottom: clamp(26px, 3.2vw, 44px);
  background:
    linear-gradient(180deg, rgba(8,29,22,.14) 0%, rgba(8,29,22,.18) 50%, rgba(8,29,22,.52) 100%),
    linear-gradient(104deg, rgba(8,29,22,.84) 0%, rgba(8,29,22,.46) 48%, rgba(8,29,22,.18) 100%),
    url("/top/images/top-fields-bg.jpg") 50% 52%/cover;
}

/* 下辺をちぎった紙に（他の帯と同じ見せ方） */
.top-fields__banner::after{
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 20px;
  width: 100%;
  z-index: 2;
  background: url("/top/images/paper-edge.svg") center/100% 100%;
}

.top-fields__banner .top-fields__en{ color: var(--brass-lt); }
.top-fields__banner .top-label__lure--sm{ color: var(--brass-lt); }

.top-fields__banner .top-fields__title{
  margin-top: 10px;
  color: var(--on-dark);
  font-size: clamp(24px, 3vw, 40px);
  letter-spacing: .04em;
}

@media (max-width: 767px){
  .top-fields__banner{
    padding-block: 18px 26px;
    margin-bottom: 16px;
    background-position: 50% 52%, 50% 52%, 58% 52%;
  }
}


/* =========================================================
   明暗の並び（2026/10/1）
   HERO 暗 → これから出る釣行 紙 → 世界の釣り 暗
   → 魚から探す 明るい緑 → これまでの釣行 濃い紙
   → 出発前に 暗（黄色いボート） → 個別手配 濃い紙
   → フィールドから探す 暗 → 小松 暗 → 問い合わせ 暗
   ※ 魚から探すの地だけ --moss（明るい緑）にしています。
   ・地の色はセクションのクラス（--paper / --dusk / --ink / --deep）で決まります
   ・ここから下は、その入れ替えに伴って色を合わせ直したぶんです
   ========================================================= */

/* ---- 1) これから出る釣行：紙 ＋ 世界地図 ----
   地図は Equal Earth（正積図法／2026年9月に国連が採用）で描き直したものです。
   縦横比が変わったので、下の min(660px, 58%) で全体が入る大きさにしています。
   大きさを変える → その数字。濃さを変える → world-map.svg の中の fill / stroke */
.top-next{
  background:
    url("/top/images/world-map.svg") no-repeat center center / min(660px, 58%) auto,
    var(--paper);
  border-bottom: 0;
}

/* 下の「世界の釣り」が暗いので、破れた縁は暗い色でちぎる */
.top-next::after{
  background: #0C1712;
  -webkit-mask: url("/top/images/paper-edge.svg") center/100% 100% no-repeat;
          mask: url("/top/images/paper-edge.svg") center/100% 100% no-repeat;
}

.top-next__en{ color: var(--ochre); }
.top-next__title{ color: var(--on-light); }

.top-next__link{
  border-color: rgba(138,100,32,.55);
  color: var(--ochre);
}
.top-next__link:hover{
  background: rgba(138,100,32,.12);
  color: #6E4E16;
}

.top-next__list.is-ready{ border-top-color: rgba(32,36,26,.2); }
.top-next__item{ border-bottom-color: rgba(32,36,26,.2); }
.top-next__row:hover{ background: rgba(32,36,26,.05); }
.top-next__name{ color: var(--on-light); }
.top-next__date{ color: #7A5A1E; }
.top-next__arrow::before{ border-color: var(--ochre); }

/* ---- 2) ルアーで楽しむ、世界の釣り：暗 ＋ 飛行機 ---- */
.top-world > .container:first-child{
  max-width: none;
  padding-inline: max(40px, calc((100vw - 1200px) / 2));
  padding-bottom: clamp(24px, 3.2vw, 50px);
  background:
    linear-gradient(104deg, rgba(8,29,22,.90) 0%, rgba(8,29,22,.62) 46%, rgba(8,29,22,.34) 100%),
    url("/top/images/top-next-bg.jpg") 50% 62%/cover no-repeat;
}

/* 飾りの英字は暗い地なので金へ */
.top-world .top-script{ color: var(--brass-lt); }

/* 魚カード帯の下は「魚から探す」（同じ暗い地）なので、破れた縁は消す */
.top-world .top-strip::after{ display: none; }

/* 「魚から探す」16マスを暗い地のカードへ */
.top-index__item{
  background: rgba(22,36,27,.72);
  border: 1px solid rgba(220,187,114,.2);
  border-top: 3px solid var(--brass);
  box-shadow: 0 6px 16px rgba(0,0,0,.28);
}
.top-index__item:hover{
  background: rgba(30,48,36,.86);
  border-color: rgba(220,187,114,.5);
  border-top-color: var(--brass-lt);
}
.top-index__name{ color: var(--on-dark); }
.top-index__en{ color: var(--brass-lt); }

.top-dests--compact .top-dest{
  border-color: rgba(62,156,153,.45);
  background: rgba(20,89,94,.28);
}
.top-dests--compact .top-dest:hover{
  background: rgba(62,156,153,.4);
  border-color: var(--sea-light);
}
.top-dests--compact .top-dest__en{ color: var(--sea-light); }
.top-dests--compact .top-dest__ja{ color: var(--on-dark); }

/* ---- 2-2) 魚から探す：少し明るい緑 ＋ 背景写真 ----
   ・明るさを変える → 上の「0. 色」の --moss
   ・写真を替える   → /top/images/top-index-bg.jpg を同じ名前で上書き
   ・写真の見え方   → 下の rgba(...) の最後の数字（大きいほど写真が消える） */
.top-world > .top-strip ~ .container{
  max-width: none;
  padding-inline: max(40px, calc((100vw - 1200px) / 2));
  background: var(--moss);
}

.top-world > .top-strip ~ .top-indexwrap{
  padding-block: clamp(20px, 2.4vw, 32px) clamp(26px, 3.2vw, 44px);
  background:
    linear-gradient(180deg, rgba(27,62,46,.90) 0%, rgba(27,62,46,.84) 46%, rgba(27,62,46,.93) 100%),
    url("/top/images/top-index-bg.jpg") center/cover no-repeat,
    var(--moss);
}

/* 地が明るくなったぶん、16マスのカードは濃い無地に */
.top-world .top-index__item{
  background: #0E2419;
}
.top-world .top-index__item:hover{
  background: #16351F;
}

/* ---- 3) フィールドから探す：暗 ---- */
.top-fields{
  background: var(--deep);
  border-top: 0;
}

/* 帯の写真を、そのまま下の暗い地へ溶かす */
.top-fields__banner{
  margin-bottom: clamp(16px, 2vw, 26px);
  background:
    linear-gradient(180deg, rgba(20,32,23,.12) 0%, rgba(20,32,23,.30) 46%, var(--deep) 100%),
    linear-gradient(104deg, rgba(20,32,23,.84) 0%, rgba(20,32,23,.46) 48%, rgba(20,32,23,.18) 100%),
    url("/top/images/top-fields-bg.jpg") 50% 52%/cover;
}
.top-fields__banner::after{ display: none; }

.top-fields__area{
  color: var(--brass-lt);
  border-bottom-color: rgba(220,187,114,.28);
}
.top-fields__group a{ color: rgba(247,241,227,.82); }
.top-fields__group a:hover{
  color: var(--brass-lt);
  border-bottom-color: rgba(220,187,114,.45);
}

/* ---- 4) 小松勇介：緑（暗）----
   セクションのクラスは index.html の top-sec--ink です
   写真の白フチ・引用の金色は、もとの指定のままで暗い地に成立します */

/* ---- 5) 個別手配：これまでの釣行と同じ濃い紙（dusk）----
   セクションのクラスは index.html の top-sec--dusk です
   写真の白フチは「仕上げ」の .top-arrange__media 側で濃い紙用にしています */

/* ---- 6) 出発前に、確認すること：緑（暗）＋ 黄色いボート ----
   ・写真を替える → /top/images/top-before-bg.jpg を同じ名前で上書き
   ・見せる高さ   → 下の 50% 66% の2つめの数字（小さいほど上が見える）
   ・暗さ         → rgba(...) の最後の数字（大きいほど暗い）
   ※元が1000pxなので、もっと大きい元データがあれば差し替えると高精細になります */
.top-sec--ink.top-before{
  background:
    linear-gradient(180deg, rgba(8,29,22,.74) 0%, rgba(8,29,22,.70) 38%, rgba(8,29,22,.86) 100%),
    url("/top/images/top-before-bg.jpg") 50% 50%/cover no-repeat,
    var(--night);
}

/* スマホは縦に細長いので、写真は上に帯で敷いてボート10艇を全部見せる */
@media (max-width: 767px){
  .top-sec--ink.top-before{
    background:
      linear-gradient(180deg, var(--night) 0%, rgba(8,29,22,.62) 12%, rgba(8,29,22,.80) 46%, var(--night) 70%),
      url("/top/images/top-before-bg.jpg") 50% 34px/100% auto no-repeat,
      var(--night);
  }
}