@charset "utf-8";
/* /yodakiica-tsurikata/ 専用。接頭辞は yt-。
 * keystone2024.css / import.css / shikakezu.css の上に載せる差分だけを書く。
 *
 * ⚠ このサイトは base.css で html { font-size: 62.5% }＝ **1rem = 10px**。
 *   本文は 1.65rem = 16.5px。16px 基準のつもりで 1rem と書くと 10px になる。
 *
 * 【方針】2026-09-15
 *   兄弟ページ /budouica/（budouica.css・接頭辞 bd-）と同じ夜焚きの解説なので、
 *   色・書体・見出しの帯・目次・章の組み方は **ブドウイカに揃える**（ページを移っても迷わない）。
 *   ブドウイカ専用の「ぶどう色」は持ち込まず、強い色は漁火 --yt-lamp の1色だけ。
 *   このページの目玉は1つ：仕掛け図とフォールの動きを **夜の海の帯** の上に置くこと。
 *   製品写真は白地の画像なので、帯にじかに置くと白い箱が浮く。帯の中に白い「図の台」を置く。
 *   ほかの章には枠も影も付けない（飾りは帯の1か所に絞る）。
 */

.yt {
  --yt-night: #0C1A2B;   /* 夜の海（ブドウイカと同じ） */
  --yt-deep:  #16304D;   /* 船縁の影 */
  --yt-lamp:  #F2C14E;   /* 漁火。このページで唯一の強い色 */
  --yt-paper: #FBFAF7;   /* 本文の地 */
  --yt-ink:   #1B2430;   /* 本文の字 */
  --yt-mute:  #5B6675;   /* 添え字 */
  --yt-rule:  #E3DED4;   /* 罫 */
  --yt-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;

  background: var(--yt-paper);
  color: var(--yt-ink);
}

/* ── ヒーロー ───────────────────────────────────────── */
.yt-hero {
  position: relative;
  min-height: min(78vh, 620px);
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.yt-hero::after {           /* 集魚灯の写真の上に夜の海を薄く敷いて字を読ませる */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 43, 0.10) 0%, rgba(12, 26, 43, 0.78) 70%, rgba(12, 26, 43, 0.94) 100%);
}
.yt-hero__in {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.4vw, 56px) 56px;
}
.yt-hero__meta {
  margin: 0 0 14px;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: var(--yt-lamp);
}
.yt-hero__ttl {
  margin: 0 0 18px;
  font-family: var(--yt-serif);
  font-size: clamp(3.4rem, 7.4vw, 6.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #fff;
}
.yt-hero__sub {
  max-width: 30em;
  margin: 0;
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  line-height: 1.95;
  color: #DDE5EE;
}

/* ── 本文の器 ───────────────────────────────────────── */
/* 器は広めに取る。1040px の中央に 34em の1列を置くと、広い画面で中身が真ん中の細い帯に固まり
 * 右半分が空く（2026-09-15「中央寄せ過ぎ」と指摘）。文と写真は下の .yt-pair で左右に並べる。 */
.yt-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4.4vw, 56px) 90px;
}
.yt-lead { margin: 52px 0 12px; }
.yt-lead p {
  max-width: 32em;
  margin: 0 0 20px;
  font-size: clamp(1.7rem, 2.2vw, 2.0rem);
  line-height: 2.0;
}
.yt-lead a,
.yt-sec a {
  color: var(--yt-deep);
  text-decoration: underline;
  text-decoration-color: var(--yt-lamp);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.yt-lead a:hover,
.yt-sec a:hover { color: var(--yt-night); }
.yt-lead a:focus-visible,
.yt-sec a:focus-visible,
.yt-toc__list a:focus-visible { outline: 2px solid var(--yt-lamp); outline-offset: 3px; }

/* ── 目次 ──────────────────────────────────────────── */
/* 11章をただ並べると、どれも同じ重みに見えて読む前の地図にならない。
 * 章の並び（道具 → 釣り方 → 時間と棚 → 色と大型 → 早福型 → 備え）で区切る。
 * 番号は振らない（どこから読んでもよい）。 */
.yt-toc {
  margin: 44px 0 64px;
  padding: 30px 0 34px;
  border-top: 2px solid var(--yt-night);
  border-bottom: 1px solid var(--yt-rule);
}
.yt-toc__ttl {
  margin: 0 0 26px;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--yt-mute);
}
.yt-toc__grp {
  display: grid;
  grid-template-columns: 8.5em 1fr;
  gap: 0 28px;
  padding: 0 0 20px;
}
.yt-toc__grp + .yt-toc__grp { padding-top: 20px; border-top: 1px dashed var(--yt-rule); }
.yt-toc__grp:last-child { padding-bottom: 0; }
.yt-toc__name {
  margin: 0;
  padding-top: 0.3em;
  font-family: var(--yt-serif);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--yt-deep);
}
.yt-toc__list {
  margin: 0;
  padding: 0 0 0 20px;
  list-style: none;
  border-left: 2px solid var(--yt-lamp);
}
.yt-toc__list li { margin: 0 0 9px; }
.yt-toc__list li:last-child { margin-bottom: 0; }
.yt-toc__list a {
  font-family: var(--yt-serif);
  font-size: 1.7rem;
  line-height: 1.65;
  color: var(--yt-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.yt-toc__list a:hover { border-bottom-color: var(--yt-lamp); }

/* ── 章 ─────────────────────────────────────────────── */
.yt-sec { margin: 0 0 76px; scroll-margin-top: 24px; }
.yt-sec > h2 {
  position: relative;
  margin: 0 0 28px;
  padding-left: 22px;
  font-family: var(--yt-serif);
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--yt-night);
}
.yt-sec > h2::before {     /* 漁火の縦罫。太い帯ではなく細い線 */
  content: "";
  position: absolute;
  left: 0; top: 0.22em; bottom: 0.22em;
  width: 3px;
  background: var(--yt-lamp);
}
/* base.css の .base h2 の下線（赤と黒の二色罫）はこのページでは使わない */
.yt-sec > h2::after { content: none; }
.yt-sec p {
  max-width: 34em;
  margin: 0 0 22px;
  font-size: 1.65rem;
  line-height: 2.05;
}
.yt-sec strong { font-weight: 700; }

/* ── 図版（写真） ───────────────────────────────────── */
.yt-fig { margin: 36px 0 44px; max-width: 34em; }
.yt-fig img { display: block; width: 100%; height: auto; border-radius: 4px; }
.yt-fig figcaption {
  margin: 12px 0 0;
  padding-left: 14px;
  border-left: 2px solid var(--yt-rule);
  font-size: 1.35rem;
  line-height: 1.8;
  color: var(--yt-mute);
}

/* ── 文と写真の組 ────────────────────────────────── */
/* 広い画面では左に文（読みやすい 36em まで）、右に写真。写真は文の頭に揃える。
 * 仕掛け図の帯（.yt-band）は組に入れず、これまでどおり横幅いっぱい。 */
@media screen and (min-width: 1024px) {
  .yt-pair {
    display: grid;
    grid-template-columns: minmax(0, 36em) minmax(0, 1fr);
    gap: 0 clamp(36px, 4.4vw, 64px);
    align-items: start;
    margin: 0 0 34px;
  }
  .yt-pair__txt p { max-width: none; }
  .yt-pair > .yt-fig { margin: 8px 0 0; max-width: 560px; }
  .yt-pair .yt-lead { margin-top: 0; }
  .yt-pair--lead { margin-top: 52px; }
}

/* ── 夜の海の帯（このページの目玉：仕掛け図とフォールの動き） ── */
.yt-band {
  margin: 38px 0 46px;
  padding: 34px 30px 30px;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(242, 193, 78, 0.16) 0%, rgba(242, 193, 78, 0) 46%),
    var(--yt-night);
  border-radius: 4px;
}
/* 白い図の台。製品写真は白地なので、台の上でだけ図を組む */
.yt-band__plate {
  background: #fff;
  border-radius: 3px;
  padding: 26px 26px 24px;
  box-shadow: 0 0 0 1px rgba(242, 193, 78, 0.35);
}
.yt-band .sk-spec { margin: 0 0 22px; }
.yt-band .sk-dia { margin: 0 auto; --sk-line: 96px; }  /* 左の注記「↓ ゆっくり」が 78px の欄で「ゆっ／くり」と割れたので広げる */
/* 注記は語の途中で折り返さない。欄が足りない所で「ゆっく／り」と割れるより、2行に分けて書く（HTML 側）。 */
.yt-band .sk-dia__gap { white-space: nowrap; }
/* 台の下の短い説明（図が何を表すか）。帯の上なので明るい字 */
.yt-band__cap {
  margin: 16px 2px 0;
  max-width: 44em;
  font-size: 1.35rem;
  line-height: 1.85;
  color: #C9D3DE;
}

/* ── 狭い画面 ───────────────────────────────────────── */
@media screen and (max-width: 767px) {
  .yt-hero { min-height: 64vh; }
  .yt-hero__in { padding: 0 20px 40px; }
  .yt-body { padding: 0 20px 64px; }
  .yt-lead { margin: 36px 0 8px; }
  .yt-toc { margin: 36px 0 48px; padding-top: 24px; }
  .yt-toc__grp { grid-template-columns: 1fr; gap: 10px 0; }
  .yt-toc__name { padding-top: 0; font-size: 1.45rem; }
  .yt-toc__list a { font-size: 1.6rem; }
  .yt-sec { margin-bottom: 56px; }
  .yt-fig { margin: 28px 0 36px; }
  .yt-band { margin: 30px -8px 38px; padding: 18px 10px 16px; }
  .yt-band__plate { padding: 16px 12px 16px; }
}
/* 狭い画面では shikakezu.css が幹糸を左から 74px に寄せるので、左の注記の欄が狭く
 * 「リーダー」が「リーダ／ー」に割れる（2026-09-15 に実際そうなった）。帯の中だけ欄を広げる。 */
@media (max-width: 520px) {
  .yt-band .sk-dia { --sk-line: 92px; }
  .yt-band .sk-dia__gap { font-size: 1.05rem; padding-right: 8px; }
  .yt-band .sk-dia__gap b { font-size: 1.2rem; }
}