/* 上の帯（r80・2026-10-19）：10/19 に決めた原稿の帯。kit/base.css・common.css（r79 の写し・そのまま）の後に読み、帯の所だけを上書きする。
   - 帯：Services／Projects／Journal／About（英語の札が主。日本語の名前は同じリンクの中。PC では見えない字にして読み上げと検索に残す）＋時刻＋Contact（青）。
     スマホはメニューのボタン（pixelarticons の menu・close）。メニューの中にも Contact と「LINE で相談する」。
   - blubone symbol：押すと歩く（r60 の土台の写し。bar_actor/）。最初の画面では出さず、大きなロゴが画面から出たら出る（hero.js の html.is-sym）。
   - ページの先頭へは帯の外の印（pixelarticons の arrow-bar-up）。映像が画面に入っている間は出さない（映像と Google の印に重ねない）。
   - 切り替え（bar.js が html の data- に書く）：
       data-barfont   帯の字の書体 geist（今）・departure・jersey・vt323・pixelop
                      10/19 夜に足した物：実直な等幅 plex（IBM Plex Mono）・jetbrains（JetBrains Mono）・fragment（Fragment Mono）・martian（Martian Mono）、
                      Pixel Operator に近いドット pixopm（Pixel Operator Mono の 16 の版）・pixop8b（Pixel Operator Mono 8 Bold）・spleen（Spleen 6x12）
       data-bigfont   スマホの全面のメニューの大きな字（英語の札と Contact）の書体 same（帯の字と同じ。前の形）・fragment・geist・plex
                      （10/19 夜。Tomo さん「スマホでメニューを開いた時の雰囲気が決定打」「Fragment Mono が上品」「小さく使う分には pixel 系の良さがある」。
                       小さな字はドット・大きな字は Fragment Mono のように、大きさで書体を分けられるようにした。小窓のメニューと PC の帯は data-barfont のまま）
       data-symsize / data-symground / data-symout   symbol の大きさ（22・28）・地面（in 帯の中／edge 帯の下の端）・帯の外へ出る芝居（0・1）
       data-barhide   帯の出入り march（3 月の値）・none（隠れない。今の形）
       data-spmenu    スマホのメニュー full（全面）・small（今の小窓）
       data-spja      全面のメニューの日本語の名前の置き場 near（英語の札のすぐ後）・apart（左右の端。直す前の形）
     data-symsize は「効く大きさ」：28 を選んでいても、幅 360px より狭い画面では 22（bar.js。時刻までの空きが 4px ほどしかなく、芝居が歩くだけになるため）
   - 状態（html の class）：is-barhide（帯が隠れている）・is-menuopen（全面のメニューが開いている）・is-actbusy（symbol が芝居をしている）・is-totop（先頭への印を出す）・is-hopair（hop の形で帯の中と帯の下の端の間を跳んでいる）・bar-actor-on
   - 動きの値は 3 月の本番のまま（~/CLAUDE.md H1）：帯が出る 1s cubic-bezier(0.05,0.7,0.1,1)・隠れる 0.3s cubic-bezier(0.25,0,0.6,0.2)、
     全面のメニューが出る 0.8s（同じ「もったいぶって」）・項目は 0.9s で 0.12s ずつ・閉じる 0.15s ease-out・☰→× 0.6s cubic-bezier(0.22,1.2,0.36,1)。 */

@font-face{font-family:"Departure Mono";src:url(fonts/DepartureMono-Regular.woff2) format("woff2");font-display:swap}            /* OFL 1.1（fonts/DepartureMono-LICENSE.txt） */
@font-face{font-family:"Pixel Operator Mono 8";src:url(fonts/PixelOperatorMono8.woff2) format("woff2");font-display:swap}       /* CC0 1.0（fonts/PixelOperator-CC0.txt） */
/* 10/19 夜に足したドットの書体（出どころと使用許諾は notes.json の switches の font）。Pixel Operator の 2 本は作者の配布（Font Library）の TTF を woff2 に替えただけ（CC0）。
   Spleen は作者の GitHub の配布（2.2.0）の woff2 そのまま（BSD 2-Clause。fonts/Spleen-LICENSE.txt を一緒に置く） */
@font-face{font-family:"Pixel Operator Mono 8";src:url(fonts/PixelOperatorMono8-Bold.woff2) format("woff2");font-weight:700;font-display:swap}  /* CC0 1.0 */
@font-face{font-family:"Pixel Operator Mono";src:url(fonts/PixelOperatorMono.woff2) format("woff2");font-display:swap}          /* CC0 1.0（16 の版。1em＝16 ドット・大文字 9 ドット） */
@font-face{font-family:"Spleen 6x12";src:url(fonts/spleen-6x12.woff2) format("woff2");font-display:swap}                        /* BSD 2-Clause（fonts/Spleen-LICENSE.txt） */

:root{
  /* 帯の字（書体ごとに、ドットが画素にそろう大きさ。ドットの書体は字間を整数の px にする） */
  /* --bf-mid（全面のメニューの中の Contact）は、大きな英語の札の大文字の高さの 2/3 ほどにそろえる（10/19 夜。Geist Mono の 14px は札の 32px に比べて小さかった：Tomo さん）。
     ドットの書体は、札を 1 点＝3px、Contact を 1 点＝2px にして、点を画素にそろえたまま 2/3 にする */
  --bf:var(--mono);--bf-w:500;--bf-size:11px;--bf-lh:16px;--bf-ls:.08em;--bf-big:32px;--bf-big-w:500;--bf-big-ls:.02em;--bf-mid:20px;--bf-mid-ls:.08em;
  /* blubone symbol（帯の中の寝た形の高さ。--sym-k＝1u の px） */
  --sym-h:22px;--sym-k:.218771;
  --dust:#CBC3AE;--board:#2B2F33;--wheel:#8A8F95;   /* r60 の舞台の色（土ぼこり・スケボー） */
}
html[data-barfont="departure"]{--bf:"Departure Mono",var(--mono);--bf-w:400;--bf-size:11px;--bf-ls:1px;--bf-big:33px;--bf-big-w:400;--bf-big-ls:0px;--bf-mid:22px;--bf-mid-ls:1px}
/* Jersey 10：全面のメニューの Contact は札と同じ 37.33px（1 点＝2px）。1 点＝1px（18.67px）では札の大文字の半分で小さかった（10/19 夜）。札を 3px にすると 56px で大きすぎる */
html[data-barfont="jersey"]{--bf:"Jersey 10",var(--mono);--bf-w:400;--bf-size:18.6667px;--bf-lh:20px;--bf-ls:1px;--bf-big:37.3333px;--bf-big-w:400;--bf-big-ls:1px;--bf-mid:37.3333px;--bf-mid-ls:2px}
/* VT323：書体の単位 1000 のうち、点の格子は縦 80（1 行）・横 40（点の半分のずらし。DEC の端末の字の作り）。12.5px で 1 点＝1px（帯の字）、
   37.5px で 3px（全面のメニューの札）、25px で 2px（メニューの中の Contact）。点の半分のずらしと斜めのなめらかさは字の形そのものなので、
   画素 1 倍の画面では一部がにじむ（画素 2 倍の画面では 12.5px で点の半分も画素にそろう）。r80 の直す係（10/19）が 16px から直した */
html[data-barfont="vt323"]{--bf:"VT323",var(--mono);--bf-w:400;--bf-size:12.5px;--bf-lh:16px;--bf-ls:1px;--bf-big:37.5px;--bf-big-w:400;--bf-big-ls:0px;--bf-mid:25px;--bf-mid-ls:1px}
html[data-barfont="pixelop"]{--bf:"Pixel Operator Mono 8",var(--mono);--bf-w:400;--bf-size:8px;--bf-lh:12px;--bf-ls:1px;--bf-big:24px;--bf-big-w:400;--bf-big-ls:0px;--bf-mid:16px;--bf-mid-ls:1px}
/* 10/19 夜に足した物。実直な等幅（Google Fonts）：11px（Martian Mono は字の幅が広いので 10px）。札 32px（Martian 28px）・Contact 20px（18px） */
html[data-barfont="plex"]{--bf:"IBM Plex Mono",var(--mono);--bf-w:500;--bf-ls:.06em;--bf-big-w:500;--bf-big-ls:0px}
html[data-barfont="jetbrains"]{--bf:"JetBrains Mono",var(--mono);--bf-w:500;--bf-ls:.06em;--bf-big-w:500;--bf-big-ls:0px}
html[data-barfont="fragment"]{--bf:"Fragment Mono",var(--mono);--bf-w:400;--bf-ls:.06em;--bf-big-w:400;--bf-big-ls:0px}
html[data-barfont="martian"]{--bf:"Martian Mono",var(--mono);--bf-w:400;--bf-size:10px;--bf-ls:.04em;--bf-big:28px;--bf-big-w:400;--bf-big-ls:0px;--bf-mid:18px;--bf-mid-ls:.04em}
/* ドット（1 点＝1px の大きさ。字間は整数の px）。Pixel Operator Mono（16 の版）：16px・大文字 9px・字間 0（字の箱が 8 点で、字の間がもう 2〜3 点ある。1px 足すと 8 の版のように間が広すぎた）。札 48px（1 点＝3px）・Contact 32px（2px） */
html[data-barfont="pixopm"]{--bf:"Pixel Operator Mono",var(--mono);--bf-w:400;--bf-size:16px;--bf-lh:20px;--bf-ls:0px;--bf-big:48px;--bf-big-w:400;--bf-big-ls:0px;--bf-mid:32px;--bf-mid-ls:2px}
/* 幅 360px より狭い画面では札を 1 点＝2px（32px）に。48px のままでは 320×568 で「LINE で相談する」が画面の下で切れた（10/19 夜の 1 巡目。Contact は 32px のまま＝札と同じ高さ） */
@media (max-width:359px){html[data-barfont="pixopm"]{--bf-big:32px}}
/* Pixel Operator Mono 8 Bold：今の Pixel Operator Mono 8 と同じ大きさで、線が 2 点の太さ */
html[data-barfont="pixop8b"]{--bf:"Pixel Operator Mono 8",var(--mono);--bf-w:700;--bf-size:8px;--bf-lh:12px;--bf-ls:1px;--bf-big:24px;--bf-big-w:700;--bf-big-ls:0px;--bf-mid:16px;--bf-mid-ls:1px}
/* Spleen 6x12：12px・大文字 8px・1 字 6px。札 36px（3px）・Contact 24px（2px） */
html[data-barfont="spleen"]{--bf:"Spleen 6x12",var(--mono);--bf-w:400;--bf-size:12px;--bf-lh:16px;--bf-ls:1px;--bf-big:36px;--bf-big-w:400;--bf-big-ls:0px;--bf-mid:24px;--bf-mid-ls:2px}
/* スマホの全面のメニューの大きな字（--bb…）。same（指定なし）は帯の字の値のまま。ほかは帯の字の書体を何にしていても、その書体の札・Contact の値にする
   （値は上の data-barfont の同じ書体と同じ：札 32px・Contact 20px＝大文字の高さの 2/3 ほど。Fragment Mono は 400 だけの書体） */
:root{--bb:var(--bf);--bb-w:var(--bf-big-w);--bb-big:var(--bf-big);--bb-big-ls:var(--bf-big-ls);--bb-mid-w:var(--bf-w);--bb-mid:var(--bf-mid);--bb-mid-ls:var(--bf-mid-ls)}
html[data-bigfont="fragment"]{--bb:"Fragment Mono",var(--mono);--bb-w:400;--bb-big:32px;--bb-big-ls:0px;--bb-mid-w:400;--bb-mid:20px;--bb-mid-ls:.08em}
html[data-bigfont="geist"]{--bb:var(--mono);--bb-w:500;--bb-big:32px;--bb-big-ls:.02em;--bb-mid-w:500;--bb-mid:20px;--bb-mid-ls:.08em}
html[data-bigfont="plex"]{--bb:"IBM Plex Mono",var(--mono);--bb-w:500;--bb-big:32px;--bb-big-ls:0px;--bb-mid-w:500;--bb-mid:20px;--bb-mid-ls:.08em}
html[data-symsize="28"]{--sym-h:28px;--sym-k:.278435}

/* ── 帯そのもの ── */
header.bar{font:var(--bf-w) var(--bf-size)/var(--bf-lh) var(--bf);letter-spacing:var(--bf-ls);font-synthesis:none;font-variant-numeric:tabular-nums}
/* 左右の余白を整数の px に丸める（G は画面の幅に比例して端数が出る。ドットの書体は端数の位置に置くと等倍の画面でにじむ。丸めの差は 0.5px まで） */
@supports (padding-inline:round(1.5px,1px)){header.bar{padding-inline:round(var(--g),1px)}}
header.bar.is-open{z-index:60}                       /* 開いたメニューを映像より前に（r79 の不具合：スクロール 0 で下の 2 項目が映像の下に隠れた） */
html.is-actbusy header.bar{z-index:40}               /* 帯の外へ出る芝居を本文より前に */
/* 帯の出入り（3 月の値）：下へ 8px より大きくスクロールすると隠れ、上へ 1px でも戻すと出る。上から 50px までは出したまま（bar.js） */
html[data-barhide="march"] header.bar{will-change:transform;backface-visibility:hidden;transform:translateY(.01px);
  transition:background-color .3s var(--ease-hide),box-shadow .3s var(--ease-hide),transform 1s var(--ease-show)}
html[data-barhide="march"].is-barhide header.bar{transform:translateY(calc(-100% - 2px));
  transition:background-color .3s var(--ease-hide),box-shadow .3s var(--ease-hide),transform .3s var(--ease-hide)}

/* ── blubone symbol（押すと歩く）── */
header.bar .bar-sym{position:relative;height:var(--sym-h);width:calc(var(--sym-h) * 1.413761);aspect-ratio:auto;align-self:center}
html[data-symground="edge"] header.bar .bar-sym{align-self:flex-end}          /* 地面＝帯の下の端（寝た形が帯の下の線に乗る） */
html.is-actbusy header.bar .bar-sym{opacity:1;visibility:visible;transform:none;transition:none}  /* 芝居の途中で消さない */
.bar-sym-btn{position:absolute;inset:-6px;display:block;padding:6px;margin:0;border:0;background:none;cursor:pointer;border-radius:8px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
header.bar .bar-sym .bar-sym-still{display:block;width:100%;height:100%;fill:var(--blue)}
html.bar-actor-on header.bar .bar-sym .bar-sym-still{visibility:hidden}
html.is-actbusy .bar-sym-btn{cursor:default}
/* 押した時の形（html の data-symclick。10/21 注釈 4）：home・hop では押すとトップへ（芝居中も指の形）、長押しで芝居をするので長押しのメニューと字の選択を止める */
html[data-symclick="home"] .bar-sym-btn,html[data-symclick="hop"] .bar-sym-btn{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html[data-symclick="home"].is-actbusy .bar-sym-btn,html[data-symclick="hop"].is-actbusy .bar-sym-btn{cursor:pointer}
html[data-symclick="home"].is-actbusy .bar-actor .bone,html[data-symclick="hop"].is-actbusy .bar-actor .bone{pointer-events:visiblePainted;cursor:pointer}  /* 芝居で歩いている体も押せる（押すとトップへ。bar.js） */
/* hop：押すと その場で小さく跳ねてからトップへ（0.38 秒）。体（.bar-hop）は寝た形の下の真ん中を軸に、縮む→伸びて浮く→着いて縮む→戻る（往年のカートゥーンの縮みと伸び）。
   影（.shadow）は地面に残し、体が浮く間だけ細くなる。単位は舞台の u（帯の 28px で 1u＝0.28px） */
@keyframes barSymHop{0%{translate:0 0;scale:1 1}
  20%{translate:0 0;scale:1.12 .84;animation-timing-function:cubic-bezier(.2,.7,.4,1)}
  48%{translate:0 -38px;scale:.94 1.08;animation-timing-function:linear}
  56%{translate:0 -37px;scale:.95 1.06;animation-timing-function:cubic-bezier(.55,0,.85,.4)}
  72%{translate:0 -3px;scale:.93 1.1;animation-timing-function:cubic-bezier(.3,.6,.4,1)}
  79%{translate:0 0;scale:1.12 .86}
  90%{translate:0 0;scale:.98 1.03}
  100%{translate:0 0;scale:1 1}}
@keyframes barSymHopSh{0%{scale:1 1}20%{scale:1.1 1}48%,56%{scale:.6 .8}72%{scale:.92 .96}79%{scale:1.1 1}100%{scale:1 1}}
html.is-symhop header.bar .bar-actor .bar-hop{animation:barSymHop .38s ease-in-out both;transform-box:fill-box;transform-origin:50% 100%}
html.is-symhop header.bar .bar-actor .shadow{animation:barSymHopSh .38s ease-in-out both;transform-box:fill-box;transform-origin:50% 50%}
/* 歩く舞台（r60 の土台が描く）。体の単位 u：寝た形の高さ 100.56u＝--sym-h。舞台は家（寝た形の左の端）から左へ 60u・上へ 128u・高さ 250u（r60 の既定） */
header.bar .bar-sym svg.bar-actor{position:absolute;left:calc(var(--sym-k) * -60px);top:calc(var(--sym-k) * -128px);height:calc(var(--sym-k) * 250px);width:var(--actor-w,320px);
  overflow:visible;pointer-events:none;fill:var(--blue)}
.bar-actor .bone{fill:var(--blue)}
.bar-actor .ground{display:none}                     /* r60 の舞台の地面の線は帯では描かない（帯の下の線が地面） */
html.is-actout .bar-actor .ground{display:inline;stroke:var(--line);stroke-width:1px;vector-effect:non-scaling-stroke}  /* 帯の外へ降りている間だけ、下の地面の線を引く */
.bar-actor .shadow{fill:var(--ink)}
html.is-hopair .bar-actor .shadow{opacity:0!important}   /* hop：帯の中と帯の下の端の間を跳んでいる間は影を消す（土台は影に inline の opacity を書くので !important。bar.js） */
.bar-actor .puff{fill:var(--dust)}
.bar-actor .board{fill:var(--board)}.bar-actor .wheel{fill:var(--wheel)}.bar-actor .prop{fill:var(--metal)}

/* ── メニュー（PC）：英語の札が主。日本語の名前は同じリンクの中に、見えない字で（display:none にしない）── */
header.bar .bar-list{display:flex;align-items:center;gap:32px;margin:0;padding:0;list-style:none}
@media (max-width:1099px){header.bar .bar-list{gap:16px}}
header.bar .bar-list .ja{display:inline;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
header.bar .bar-nav-cta{display:none}
header.bar .bar-list .ja .lat{font-family:var(--lat);font-weight:500;font-size:1.06em;letter-spacing:0}   /* 日本語の名前の中の欧文（blubone.studio）は欧文の書体で（10/19 夜の講評。LINE で相談する の LINE と同じ扱い） */

/* ── 時刻：字は灰・点だけ青。幅を固定（数字が変わっても横に揺れない。--clock-w は bar.js が書体ごとに測る）。読み上げと検索から外す（HTML の aria-hidden・data-nosnippet）── */
header.bar .bar-time{display:inline-block;min-width:var(--clock-w,auto);white-space:nowrap}
/* PC：時刻の前を、メニューの項目どうしの間より広く空ける（時刻がメニューの 5 つ目の項目に見えないように。TYPOGRAPHY_RULES 1-3「関係の薄いものは離す」）。
   帯の間（24px・16px）＋メニューの間（32px・16px）＝ 56px・32px */
@media (min-width:768px){header.bar .bar-clock{margin-left:16px}}
@media (min-width:1100px){header.bar .bar-clock{margin-left:32px}}
html.is-stopped header.bar .dot{animation:none}       /* 「動きを止める」で点の輪も止める */

/* ── Contact（青）── */
header.bar .bar-cta{font:var(--bf-w) var(--bf-size)/1 var(--bf);letter-spacing:var(--bf-ls);text-transform:uppercase;font-synthesis:none}
/* メニューの中の Contact：base.css の「.bar-nav a」（字が墨・載せると青）に負けないように */
header.bar .bar-nav .bar-cta{display:inline-flex;align-items:center;height:36px;padding:0 16px;color:var(--on-blue)}
header.bar .bar-nav .bar-cta:hover{color:var(--on-blue)}

/* ── メニューのボタン（スマホ）：pixelarticons の menu・close。☰→× は 3 月の 0.6s cubic-bezier(0.22,1.2,0.36,1) ── */
.bar-menubtn{display:none;position:relative;flex:none;width:40px;height:40px;margin-right:-8px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;place-items:center;border-radius:8px}
.bar-menubtn svg{grid-area:1/1;width:24px;height:24px;fill:currentColor;transition:transform .6s cubic-bezier(0.22,1.2,0.36,1),opacity .6s cubic-bezier(0.22,1.2,0.36,1)}
.bar-menubtn .ic-close{opacity:0;transform:rotate(-90deg) scale(.4)}
header.bar.is-open .bar-menubtn .ic-menu{opacity:0;transform:rotate(90deg) scale(.4)}
header.bar.is-open .bar-menubtn .ic-close{opacity:1;transform:none}

@media (max-width:767px){
  header.bar .bar-menubtn{display:inline-grid}
  header.bar .bar-list .ja{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;display:block;
    font:500 12px/1.4 var(--jp);letter-spacing:.02em;text-transform:none;color:var(--sub)}

  /* 今の小窓（r79 の形のまま。不具合 3 つは直した：映像の下に隠れる・Tab が項目に入らない・外を押しても閉じない） */
  html[data-spmenu="small"] header.bar .bar-list{flex-direction:column;align-items:stretch;gap:0}
  html[data-spmenu="small"] header.bar .bar-list a{display:grid;gap:2px;padding:10px 18px}
  html[data-spmenu="small"] header.bar .bar-nav-cta{display:grid;gap:8px;padding:10px 18px 12px;border-top:1px solid var(--line);margin-top:6px}
  html[data-spmenu="small"] header.bar .bar-nav-cta .bar-cta{justify-content:center}
  html[data-spmenu="small"] header.bar .bar-line{display:inline-flex;align-items:center;justify-content:space-between;gap:.6em;min-height:36px;padding:0 14px 0 16px;border:1.5px solid var(--ink);border-radius:99px;
    color:var(--ink);text-decoration:none;font:700 12.5px/1.2 var(--jp);letter-spacing:.03em;text-transform:none}

  /* 全面（3 月の「全画面メニューがいい」）。帯の行（symbol・時刻・閉じるボタン）は前に残し、その後ろに幕を敷く */
  html[data-spmenu="full"] header.bar .bar-nav{display:flex;position:absolute;top:0;left:0;right:0;height:100svh;z-index:-1;min-width:0;flex-direction:column;align-items:stretch;
    padding:calc(var(--bar-h) + 24px) var(--g) calc(var(--g) + env(safe-area-inset-bottom,0px));gap:0;overflow-y:auto;overscroll-behavior:contain;
    background:rgba(242,242,239,.95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:0;border-radius:0;box-shadow:none;
    opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease-out,visibility 0s linear .15s}
  html[data-spmenu="full"] header.bar.is-open .bar-nav{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .8s var(--ease-show),visibility 0s}
  html[data-spmenu="full"] header.bar .bar-list{flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--line)}
  html[data-spmenu="full"] header.bar .bar-list li{border-bottom:1px solid var(--line)}
  html[data-spmenu="full"] header.bar .bar-list a,html[data-spmenu="full"] header.bar .bar-nav-cta{opacity:0;transform:translateY(2rem);will-change:transform,opacity;backface-visibility:hidden;
    transition:opacity .15s ease-out,transform 0s linear .15s}
  html[data-spmenu="full"] header.bar .bar-list a{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0 16px;
    font:var(--bb-w) var(--bb-big)/1 var(--bb);letter-spacing:var(--bb-big-ls)}   /* 大きな字の書体（data-bigfont。same なら帯の字の値） */
  html[data-spmenu="full"] header.bar .bar-list .ja{font-size:13px;text-align:right;white-space:nowrap}
  /* 日本語の名前の置き場（data-spja）：near＝英語の札のすぐ後（TYPOGRAPHY_RULES 2.4「見出しとその訳語は近づけ、次の要素との間は広げる」。入らない幅では札の下へ回る）・
     apart＝左右の端（直す前の形） */
  html[data-spmenu="full"][data-spja="near"] header.bar .bar-list a{justify-content:flex-start;flex-wrap:wrap;column-gap:14px;row-gap:6px}
  html[data-spmenu="full"][data-spja="near"] header.bar .bar-list .ja{text-align:left}
  html[data-spmenu="full"] header.bar.is-open .bar-list a,html[data-spmenu="full"] header.bar.is-open .bar-nav-cta{opacity:1;transform:none;
    transition:opacity .9s var(--ease-show) calc(var(--i,0) * .12s),transform .9s var(--ease-show) calc(var(--i,0) * .12s)}
  html[data-spmenu="full"] header.bar .bar-list li:nth-child(2) a{--i:1}
  html[data-spmenu="full"] header.bar .bar-list li:nth-child(3) a{--i:2}
  html[data-spmenu="full"] header.bar .bar-list li:nth-child(4) a{--i:3}
  html[data-spmenu="full"] header.bar .bar-nav-cta{--i:4;display:grid;gap:12px;margin-top:32px}
  html[data-spmenu="full"] header.bar .bar-nav-cta .bar-cta{height:52px;justify-content:center;font:var(--bb-mid-w) var(--bb-mid)/1 var(--bb);letter-spacing:var(--bb-mid-ls)}
  html[data-spmenu="full"] header.bar .bar-line{display:flex;align-items:center;justify-content:space-between;gap:.7em;min-height:52px;padding:0 22px 0 24px;border:1.5px solid var(--ink);border-radius:99px;
    color:var(--ink);text-decoration:none;font:700 15px/1.3 var(--jp);letter-spacing:.03em;text-transform:none}
  html[data-spmenu="full"] header.bar.is-open .bar-cta-bar{visibility:hidden}   /* 開いている間は、メニューの中の Contact だけにする（同じ物を 2 つ並べない） */
  html.is-menuopen{overflow:hidden}
  header.bar .bar-line .lat{font-family:var(--lat);font-weight:600;font-size:1.06em;letter-spacing:0}
  header.bar .bar-line .btn-arrow{flex:none}
  header.bar .bar-line:hover{border-color:var(--blue);color:var(--blue)}
}

/* ── ページの先頭へ（帯の外・右下）。映像が画面から出てから出す（bar.js の html.is-totop）── */
.to-top{position:fixed;right:calc(var(--g) + env(safe-area-inset-right,0px));bottom:calc(var(--g) + env(safe-area-inset-bottom,0px));z-index:30;
  width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(242,242,239,.92);color:var(--ink);cursor:pointer;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--ease-hide),transform .3s var(--ease-hide),visibility 0s linear .3s,color .2s,border-color .2s}
html.is-totop .to-top{opacity:1;visibility:visible;transform:none;transition:opacity 1s var(--ease-show),transform 1s var(--ease-show),visibility 0s,color .2s,border-color .2s}
.to-top:hover{color:var(--blue);border-color:var(--blue)}
.to-top svg{width:24px;height:24px;fill:currentColor}   /* pixelarticons の 24 の格子のまま（20px では 0.83 倍の端数で、矢じりの階段がにじんだ） */

@media (prefers-reduced-motion:reduce){
  header.bar,html[data-barhide="march"] header.bar,html[data-barhide="march"].is-barhide header.bar,
  header.bar .bar-nav,header.bar.is-open .bar-nav,header.bar .bar-list a,header.bar .bar-nav-cta,header.bar.is-open .bar-list a,header.bar.is-open .bar-nav-cta,
  .bar-menubtn svg,.to-top,html.is-totop .to-top{transition:none!important}
}