:root {
 --marker-base: #ffcf00; /* 通常のベースカラー */
 --marker-accent: #ff478b; /* 下端のアクセントカラー */
 --marker-line-thick: 4px;
 --hash-size: 50px;
 --hash-blue: #4fc8ff; /* 水色 */
 --hash-pink: #ff478b; /* ピンク */
 --hash-yellow: #ffcf00; /* 黄色 */

 --line-thick: 4px;
 /* stub の長さを変えたいときはここを調整 */
 --stub: 30px;
 --gap: 8px; /* 本体から離す隙間 */
 --cap: 2px; /* 白くしたい先端部分の長さ */
}

/* -----------------------------
   マーカー共通
------------------------------ */
/* =========================================================
   マーカー（＃）本体  ―― ここから追加／置換
   ========================================================= */
/*
.marker {
    position: fixed;
    top: calc(var(--header-height) + 50px);
    left: 16px;
    pointer-events: none;
    z-index: 50;
}
    */

.marker {
 position: absolute; /* セクション内で絶対配置 */
 top: 50px; /* ヘッダーの下に相当する位置 */
 left: 16px;
 pointer-events: none;
 z-index: 5; /* セクション内であれば十分 */
}

.marker__hash {
 position: relative;
 width: var(--hash-size);
 height: var(--hash-size);
}

.marker__hash-line {
 position: absolute;
 /* background: var(--marker-base);*/
 background: transparent;
}

/* ──縦 2 本── */
.marker__hash-line.vert {
 width: var(--line-thick);
 height: 100%;
 top: 0;
}

.marker__hash-line.left {
 left: 2px;
}

.marker__hash-line.right {
 right: 2px;
}
/* ─ 横線（25%/75% に置くと “＃” らしい間隔） */
.marker__hash-line.horiz {
 height: var(--line-thick);
 width: 100%;
 left: 0;
}

.marker__hash-line.top {
 top: 25%;
}
/* 25% でバランス良い＃ */
.marker__hash-line.bottom {
 top: 75%;
}

.marker__hash-line.vert.left {
 /* 左縦線は水色のままなら var(--hash-blue) */
 left: 13px;
 background: var(--marker-base);
 border-radius: 9999px;
}

/* ２）stub 全体（丸めあり） */
.marker__hash-line.vert.left::before {
 content: "";
 position: absolute;
 /* stub長(30)＋gap(8) を上にずらす */
 top: calc(-1 * (var(--stub) + var(--gap)) + 30px);
 left: 0;
 width: var(--line-thick);
 height: 30px;
 background: var(--marker-base);
 border-radius: 9999px; /* stub全体は丸め */
 z-index: 1;
}

/* ３）下端の cap 部分(白)だけ（丸めナシ） */
.marker__hash-line.vert.left::after {
 content: "";
 position: absolute;
 /* stub の下端(親の top から −gap) から var(--cap)分 上げて開始 */
 top: 11px;
 left: 0;
 width: var(--line-thick);
 height: 2px;
 background: white;
 border-radius: 0; /* 角なし */
 z-index: 2; /* stubの上に表示 */
}

.marker__hash-line.horiz.bottom {
 /* 下横線の stub 部分をピンクに */
 top: 30px;
 background: var(--hash-pink);
 border-radius: 9999px;
}

/* 上横線は半分青→半分ピンク */
.marker__hash-line.horiz.top {
 border-radius: 9999px;
 z-index: 3;
 background: linear-gradient(to right, var(--hash-blue) 10%, var(--hash-pink) 90%);
}

/* 2）stub 全体（丸角つき） */
.marker__hash-line.horiz.top::before {
 content: "";
 position: absolute;
 top: 0;
 left: 36px; /* 本体右端から gap だけオフセット */
 width: 15px; /* stub 全長 */
 height: var(--line-thick);
 background: var(--marker-base); /* 元のベース色 */
 border-radius: 9999px; /* stub 全体は丸角 */
 z-index: 1;
}

/* 3）stub の末端 cap 部分だけ白（角丸なし） */
.marker__hash-line.horiz.top::after {
 content: "";
 position: absolute;
 top: 0;
 /* stub の右端手前 cap 分だけずらして開始 */
 left: 36px;
 width: var(--cap); /* 白くする長さ */
 height: var(--line-thick);
 background: white; /* 角丸なしでキリッと白 */
 border-radius: 0;
 z-index: 2; /* stub の上に表示 */
}

/* 右縦線は半分ピンク→半分青 */
.marker__hash-line.vert.right {
 left: 32px;
 border-radius: 9999px;
 background: linear-gradient(to bottom, var(--hash-pink) 10%, var(--hash-blue) 90%);
}

/* （他の位置・サイズ指定はそのまま） */
.marker__hash {
 position: relative;
 width: var(--hash-size);
 height: var(--hash-size);
 border-radius: 9999px;
}

.marker__hash-line.vert {
 width: var(--line-thick);
 height: 100%;
 top: 0;
}

.marker__hash-line.horiz {
 height: var(--line-thick);
 width: 100%;
 left: 0;
}

.marker__hash-line.top {
 top: 25%;
}

.marker__hash-line.bottom {
 top: 75%;
}

/* 伸ばす縦線・横線（初期は 0） */
.marker__vertical {
 position: absolute;
 /* ハッシュ底の中央 (= 24px - 2px) に合わせる */
 top: calc(var(--hash-size) - var(--line-thick) / 2 - 30px);
 left: calc(var(--line-thick) / 2 + 11px); /* 左縦線中央 */
 width: var(--line-thick);
 height: 0;
 background: linear-gradient(to bottom, var(--marker-base) 0, var(--marker-base) calc(100% - var(--stub)), var(--marker-accent) calc(100% - var(--stub)), var(--marker-accent) 100%);
 transform-origin: top;
}

.marker__horizontal {
 /* ← 横線はハッシュ中央に */
 position: absolute;
 top: 30px;
 left: calc(var(--hash-size) - 33px);
 height: var(--line-thick);
 width: 0;
 transform-origin: left;
 background: linear-gradient(to right, white 0px, white 2px, var(--marker-base) 2px, var(--marker-base) calc(100% - var(--stub)), var(--marker-accent) calc(100% - var(--stub)), var(--marker-accent) 100%);
}

/*

main > section:first-of-type .marker {

    --marker-base: #fff;
}
*/
/* あるいはクラス名で */
.hero .marker {
 --marker-base: #ffcf00;
}

/* =========================================================
   マーカー ―― ここまで
   ========================================================= */