/* ══════════════════════════════════════════════════════════════════════
   共通の足元（トップ index.html の #sec-line をそのまま写したもの・2026-10-22）
   ジャーナルの足元を文字とCSSで組み直していたら、書体・大きさ・ボタン幅・アイコンが
   トップと少しずつ違い「トップから繋がる足元になっていない」と本人指摘。
   絵（b23-line-art.png）も文字の位置も、トップと同じ値を使う。値を変えるときは index.html と両方を直す。
   幅は本文カラムに合わせて伸びる（cqw）。
   ══════════════════════════════════════════════════════════════════════ */
.sf{position:relative;container-type:inline-size;font-family:var(--f-display,"dnp-shuei-mgothic-std","Hiragino Maru Gothic ProN",sans-serif);
  /* 下層ページ（pages.css）の body の字組みを受け継がない。トップの版下と同じ描き方に戻す
     （palt・和欧間のすき間・細い描き方を受けると、字が細く・詰まり・「公式 LINE で」に余計なすき間が出た） */
  font-feature-settings:normal;text-autospace:no-autospace;-webkit-font-smoothing:auto}
.sf .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sf .blk{position:relative;overflow:hidden;margin:0}   /* pages.css の段落間の余白（16px）を打ち消す */
.sf .blk > img{display:block;width:100%;height:auto;max-width:none}
.sf .t{
  position:absolute;margin:0;white-space:nowrap;
  left:calc(var(--x) * 1cqw); top:calc(var(--y) * 1cqw);
  width:calc(var(--w) * 1cqw);
  text-align:var(--ta,left);
  font-size:calc(var(--fs) * 1cqw);
  line-height:var(--lh,1.5);
  letter-spacing:var(--ls,0em);
  font-weight:var(--fw,400);
  color:var(--c,#5F4948);
  z-index:4;
}
.sf .btn{
  position:absolute;left:20%;top:var(--y);width:60%;height:15.1875cqw;
  display:flex;align-items:center;justify-content:center;
  border-radius:100px;text-decoration:none;background:var(--line-cream,#FAF8EF);
}
.sf .btn img{width:46.875cqw;height:auto;max-width:none}
.sf .btn:focus-visible{outline:3px solid #2F4239;outline-offset:3px}
.sf .hit{position:absolute;display:block;border-radius:50%;
  left:var(--x);top:var(--y);width:var(--w);height:var(--h)}
.sf .hit::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,48px);height:max(100%,48px);border-radius:inherit}
.sf .hit:focus-visible{outline:3px solid var(--line-cream,#FAF8EF);outline-offset:3px}

/* つまみ（「買う前に、ひとつだけ。」の面）は、上の面と同じ色にする（2026-10-22 本人指摘）。
   絵ではクリーム（#FAF8EF）で描いてあり、トップでは上の区画もクリームなのでつながって見えるが、
   上が白いページではつまみだけ色が付いて浮く。絵のつまみの上に、上の面の色で同じ形を重ねる。
   形は絵から実測（480基準で x96〜384・高さ46・下の角の丸み40）。縁の色残りを出さないよう1pxずつ大きく。
   上の面の色は --above で渡す（既定＝下層ページの地。白い面の上に置くときは white） */
.sf{--above:var(--ground,#FCF8F0)}
.sf .tab-bg{position:absolute;z-index:1;left:19.7917cqw;top:0;width:60.4167cqw;height:9.7917cqw;
  border-radius:0 0 8.5417cqw 8.5417cqw;background:var(--above);pointer-events:none}
@media (min-width:1024px){ .sf{--above:var(--white,#fff)} }
@media (min-width:1024px){ main:has(> .g-after) + .sf{--above:var(--ground,#FCF8F0)} }   /* PCの記事は、終わりの面がクリームなのでつまみもクリーム（トップと同じ組み） */   /* PCは本文カラムが白。スマホは記事の終わりもクリームの地にしたので、どのページも地と同じ色（2026-10-23 夜） */

/* ボタンはトップと同じ形（2026-10-23）：角が丸い・高さ48px・太字・矢印なし。値は index.html の「ボタン」の節と両方を直す */
.sf .btn{left:14%;width:72%;height:48px;top:calc(var(--y) + (15.1875cqw - 48px) * .5);border-radius:100px}
.sf .btn .bt-l{font-family:var(--f-display,"dnp-shuei-mgothic-std",sans-serif);font-weight:700;font-size:15px;letter-spacing:.04em;line-height:1;color:var(--line-dark,#317831)}

/* つまみの「買う前に、ひとつだけ。」は、下の本文（20px）とほぼ同じ19〜21pxで大きく見えた（2026-10-23 本人）→ スマホ14px・PC16pxに。つまみの縦の真ん中（4.9cqw）にそろえる */
.sf .t.t-tab{font-size:clamp(14px,3.3333cqw,16px);top:calc(4.8958cqw - .5em)}