@charset "utf-8";
/* 仕掛け図ページ（/yodakiica_shikakezu/ ほか）のスタイル
* 接頭辞 .sk- … 既存スタイルとは衝突させない（movies.css の .mv- と同じ方針）。
*
* このページの要は「数値が読めること」。従来は幹糸・エダス・オモリの号数が
* すべて JPG に焼き込まれていて、検索エンジンにも生成AIにも読めなかった。
* .sk-spec が図と同じ値を文字で持つ。図は残す（人には図のほうが早い）。
*/
/* ============================================================
* トップの見出し（写真に重ねる帯）
* ------------------------------------------------------------
* `.overlay-text` は base.css の共有クラスで、akasamuraidensetsu と
* reiwa3nen_yodakiicatsuri も使っている。**base.css は触らない。**
* このページでしか読まないこの CSS で上書きする。
* ============================================================ */
.sk-hero__box { width: min(72%, 840px); top: 7%; padding: 24px 34px; }
.sk-hero__ttl { font-size: clamp(3.4rem, 5.4vw, 7.0rem); line-height: 1.25;
font-weight: 700; color: #fff; margin: 0; }
.sk-hero__sub { font-size: clamp(1.5rem, 1.9vw, 2.3rem); line-height: 1.65;
font-weight: 500; color: #e6ebf0; margin: 10px 0 0; }
@media (max-width: 767px) {
.sk-hero__box { width: calc(100% - 24px); top: auto; bottom: 10px; left: 12px;
padding: 12px 14px; }
.sk-hero__sub { margin-top: 6px; }
}
/* ============================================================
* 目次
* ============================================================ */
.sk-toc { margin: 0 0 48px; padding: 22px 24px; background: #f4f7f8;
border-radius: 12px; }
.sk-toc__ttl { font-size: 1.5rem; font-weight: 700; letter-spacing: .06em;
color: #6c7784; margin: 0 0 14px; }
.sk-toc__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.sk-toc__list li { margin: 0; }
.sk-toc__list a { display: block; padding: 7px 0 7px 16px; position: relative;
font-size: 1.55rem; line-height: 1.6; color: #2b3850; text-decoration: none;
border-bottom: 1px solid #e2e9ec; }
.sk-toc__list a::before { content: ""; position: absolute; left: 2px; top: 50%;
width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
background: var(--color_red, #c8102e); }
.sk-toc__list a:hover { color: var(--color_red, #c8102e); }
/* ============================================================
* 仕掛け 1 件
* ============================================================ */
/* 右端には固定メニュー（header .fixedmenu .menu01/02、幅40px）が浮いている。
* その下に本文が潜り込むと読めないので、記事全体をその内側に収める。 */
.sk-rig { margin: 0 0 64px; scroll-margin-top: 20px; }
/* 右端の固定メニューは幅 40px。56px だとすきまが 16px しかなく詰まって見える。
* 図は左揃えなので左端は動かさず、右だけ広げる（すきま 48px） */
.sk-lead, .sk-toc, .sk-note, .sk-rig { max-width: calc(100% - 88px); }
.sk-rig__ttl { font-size: clamp(1.9rem, 2.6vw, 2.6rem); font-weight: 700;
line-height: 1.5; color: #1d2733; margin: 0 0 6px;
padding: 0 0 12px; border-bottom: 2px solid #1d2733; }
.sk-rig__q { font-size: 1.6rem; line-height: 1.8; color: #6c7784;
margin: 12px 0 22px; }
/* 図と中身を横並びに。図は縦長なので左に置く */
/* 図が左、説明が右。
* **左は固定比ではなく中身の幅（auto）にする。** 比で決めると、図が余った幅を
* 埋められず右側に空白が残る（7:3 にして実際そうなった）。
* auto なら図に必要なだけ与え、残りを説明が受け取る。 */
.sk-rig__body { display: grid; grid-template-columns: auto minmax(0, 1fr);
gap: 28px 36px; align-items: start; }
/* 1段組みに落とすとき、**`1fr` ではなく `minmax(0, 1fr)` にする。**
* `1fr` の最小値は min-content で、図が `width: max-content` なので
* 列が図の幅まで押し広げられ、右の本文が画面からはみ出す（実際そうなった）。 */
@media (max-width: 820px) {
.sk-rig__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
/* ---- スペック表。図と同じ値を文字で持つ ----
* **見出しの直下に全幅で置く（T字の横棒）。**
* 図の中や右の本文に混ぜると、項目が縦に細長く割れて読みにくい。
* 数値はここで一望でき、その下に「図（左）＋説明（右）」が来る。 */
.sk-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 1px; margin: 0 0 26px; background: #e2e9ec; border: 1px solid #e2e9ec;
border-radius: 10px; overflow: hidden; }
.sk-spec__cell { background: #fff; padding: 12px 15px; }
.sk-spec dt { font-size: 1.3rem; letter-spacing: .04em; color: #8b939c;
line-height: 1.6; margin: 0; }
.sk-spec dd { margin: 3px 0 0; font-size: 1.7rem; font-weight: 700;
color: #2b3850; line-height: 1.5; }
.sk-spec dd .sk-spec__note { display: block; font-size: 1.2rem; font-weight: 500;
color: #8b939c; line-height: 1.55; margin-top: 3px; }
/* ---- 本文 ---- */
.sk-rig__txt { font-size: 1.55rem; line-height: 1.95; color: #2b3850;
max-width: 30em; line-break: strict; overflow-wrap: anywhere; }
.sk-rig__txt p { margin: 0 0 1.1em; }
.sk-rig__txt p:last-child { margin-bottom: 0; }
.sk-rig__txt strong { font-weight: 700; color: #1d2733; }
/* ============================================================
* 導入・注記
* ============================================================ */
.sk-lead { font-size: 1.7rem; line-height: 2.0; color: #2b3850;
margin: 0 0 20px; }
.sk-lead strong { font-weight: 700; }
.sk-note { font-size: 1.4rem; line-height: 1.9; color: #6c7784;
margin: 0 0 40px; padding: 14px 18px; background: #f4f7f8; border-radius: 8px; }
/* ============================================================
* 仕掛け図（HTML で組む）
* ------------------------------------------------------------
* 従来は 400x600 の JPG で、拡大するとぼけ、焼き込んだ文字は機械に読めなかった。
* 幹糸を1本の縦線に見立て、その右に製品写真を同じ向き・同じ角度で並べる。
* ラベルは本物のテキストなので、拡大しても崩れず、検索にも AI にも読める。
*
* **段は必ず等間隔にする。** 寸法の注記を段のあいだに流し込むと間隔が崩れるので、
* 注記は幹糸の左の欄に置き、段の高さには影響させない。
* ============================================================ */
.sk-dia {
width: max-content; max-width: 100%;
overflow-x: auto;
--sk-line: 78px; /* 幹糸の位置（左端から） */
--sk-row: 76px; /* 1段の高さ。ここが等間隔の素 */
--sk-branch: 18px; /* 枝の長さ */
--sk-branch-long: 54px; /* エサ巻き（早福型）の長い枝 */
position: relative; padding: 10px 0 6px;
}
/* 幹糸。図の上端から下端まで1本 */
.sk-dia::before { content: ""; position: absolute; left: var(--sk-line); top: 0; bottom: 26px;
width: 2px; background: #4a5460; }
/* 1段。左＝注記の欄 / 右＝枝・写真・名前。高さを固定して等間隔にする */
.sk-dia__node { position: relative; display: grid;
grid-template-columns: var(--sk-line) 1fr;
align-items: center; min-height: var(--sk-row); }
/* 枝。**写真のカン（左端の環）の高さから引く。**
* 段の中央から引くと、ルアーが斜めなぶんカンとずれる。カンの高さは写真ごとに
* 違うので --kan で個別に渡す（写真の上端からの割合）。 */
.sk-dia__lure { position: relative; }
.sk-dia__lure::before { content: ""; position: absolute; right: 100%;
top: var(--kan, 88%); width: var(--sk-branch); height: 2px;
background: #4a5460; transform: translateY(-1px); }
.sk-dia__node--long .sk-dia__lure::before { width: var(--sk-branch-long); }
/* 左の欄。枝間や枝の長さをここに置く（段の高さは変えない） */
.sk-dia__gap { grid-column: 1; margin: 0; padding-right: 12px; text-align: right;
font-size: 1.2rem; line-height: 1.5; color: #6c7784; }
.sk-dia__gap b { display: block; font-weight: 700; color: #2b3850; font-size: 1.35rem; }
.sk-dia__gap small { display: block; font-size: 1.05rem; color: #9aa3ad; }
/* 右の欄。枝のぶん左に余白をとって写真を置く */
.sk-dia__body { grid-column: 2; display: flex; align-items: center; gap: 12px;
padding-left: calc(var(--sk-branch) + 6px); }
.sk-dia__node--long .sk-dia__body { padding-left: calc(var(--sk-branch-long) + 6px); }
.sk-dia__lure { margin: 0; flex: 0 0 168px; position: relative; }
.sk-dia__lure img { display: block; width: 100%; height: auto; }
.sk-dia__name { margin: 0; font-size: 1.45rem; line-height: 1.5;
color: #2b3850; font-weight: 700; white-space: nowrap; }
.sk-dia__name .sk-dia__sz { display: block; font-size: 1.2rem; font-weight: 500;
color: #8b939c; }
/* 仕掛けによって枝の出し方が違う。
* （既定） … 20〜40cm 程度の枝。玄界灘の胴付き
* --flush … 直ブラ。枝は 1cm しかないので、ほぼ幹糸に付く
* --direct … 直結。枝が無く、スッテが幹糸そのものに入る
* --nosinker … 一番下がオモリではない仕掛け（イカメタルの鉛スッテ、中オモリ）。
* 幹糸をオモリのぶんだけ下へ伸ばさない */
.sk-dia__node--flush .sk-dia__lure::before { width: 6px; }
.sk-dia__node--flush .sk-dia__body { padding-left: 12px; }
.sk-dia__node--direct .sk-dia__lure::before { display: none; }
/* 幹糸に接して置く。**0 にしてはいけない** — 写真は白背景の不透明画像なので、
* 幹糸の線の上に重なるとその区間の線が消える（実際そうなった）。 */
.sk-dia__node--direct .sk-dia__body { padding-left: 4px; }
.sk-dia--nosinker::before { bottom: 6px; }
/* 直結だけは元図どおり **縦一直線**。枝を出さず、スッテが幹糸そのものに入る。
* 写真は品名ごとに太さが違うので、同じ画布（104x420・カンを中央）に置いてある。
* 幅を揃えないと細い品ほど縦に伸びて、スッテの長さが揃わない。 */
/* 縦図は写真が幹糸の真上に載るので、左の注記の欄を広げておく。
* 既定の 78px のままだと「1〜1.5m」の右端が写真の下に潜って読めない。 */
.sk-dia--vert { --sk-line: 104px; }
.sk-dia--vert .sk-dia__gap { padding-right: 30px; }
.sk-dia--vert .sk-dia__lure { flex: 0 0 40px; }
.sk-dia--vert .sk-dia__lure::before { display: none; }
.sk-dia--vert .sk-dia__body { padding-left: 0; margin-left: -20px; } /* 幹糸の真上に載せる */
.sk-dia--vert .sk-dia__name { margin-left: 22px; }
.sk-dia--vert .sk-dia__node + .sk-dia__node { margin-top: 46px; }
/* 2〜3本しか付けない仕掛け（大型サイズ攻略・早福型連掛け・イカメタル・中オモリ）は、
* 段が少ないぶん図が詰まって見え、「間隔 1〜1.5m」のような実際の長さが伝わらない。
* 段のあいだを広げる。広さは仕掛けごとに違うので、図に --sk-space を直接渡す。 */
.sk-dia--sparse .sk-dia__node + .sk-dia__node { margin-top: var(--sk-space, 60px); }
/* オモリ。幹糸の下端に付ける */
/* オモリ。幹糸の下端に付ける。**最後のスッテとのあいだを空ける** —
* 詰めると仕掛けの下部が団子に見え、実際の距離感が出ない。 */
.sk-dia__sinker { position: relative; margin: 44px 0 0; padding-left: calc(var(--sk-line) - 42px); }
.sk-dia__sinker span { display: inline-block; background: #4a5460; color: #fff;
font-size: 1.25rem; font-weight: 700; padding: 5px 13px; border-radius: 20px; }
@media (max-width: 520px) {
.sk-dia { --sk-line: 74px; --sk-row: 56px; --sk-branch: 14px; --sk-branch-long: 40px; }
.sk-dia__lure { flex: 0 0 104px; }
.sk-dia__name { font-size: 1.25rem; }
.sk-dia__gap { font-size: 1.1rem; }
.sk-dia__sinker { margin-top: 26px; }
.sk-dia--vert { --sk-line: 92px; }
.sk-dia--vert .sk-dia__gap { padding-right: 24px; }
.sk-dia--vert .sk-dia__lure { flex: 0 0 30px; }
.sk-dia--vert .sk-dia__node + .sk-dia__node { margin-top: 28px; }
.sk-dia--vert .sk-dia__body { margin-left: -15px; }
.sk-dia--sparse .sk-dia__node + .sk-dia__node { margin-top: calc(var(--sk-space, 60px) * .55); }
}
/* ============================================================
* 元図のサムネイル（図の下）とポップアップ
* ------------------------------------------------------------
* HTML で組んだ図の下に、元になった1枚絵を「使用例イメージ」として置く。
* 図と同じ幅に揃えたいが、**`![]()
` を素直に置くと欄の幅を画像が決めてしまう**
* （max-content の計算では width:100% が auto 扱いになり、画像の実寸が効く）。
* `width: 0` で幅の主張を消し、`min-width: 100%` で後から広げる。
* こうすると欄の幅は .sk-dia だけが決め、サムネイルはそれに従う。
* ============================================================ */
.sk-rig__fig { width: max-content; max-width: 100%; }
.sk-src { width: 0; min-width: 100%; margin: 22px 0 0; }
.sk-src__ttl { margin: 0 0 7px; font-size: 1.3rem; font-weight: 700;
letter-spacing: .04em; color: #6c7784; line-height: 1.5; }
.sk-src__ttl span { display: inline-block; margin-left: 8px; font-size: 1.15rem;
font-weight: 500; color: #9aa3ad; letter-spacing: 0; }
.sk-src__link { display: block; border: 1px solid #e2e9ec; border-radius: 8px;
overflow: hidden; background: #fff; cursor: zoom-in; }
.sk-src__link:hover { border-color: #c3ced4; }
.sk-src__link img { display: block; width: 100%; height: auto; }
/* ポップアップ。