/* 現代サムライ：墨と生成り。色は使わず、濃淡と罫と明朝で組む。写真だけが色を持つ */
:root {
  --sumi: #141414; --ink: #1d1d1d; --ink2: #3d3d3d; --mute: #6e6e6e; --line: #d6d3cc; --line2: #b9b5ac;
  --paper: #f5f3ee; --card: #fbfaf7; --usuzumi: #ebe8e1;
  --mincho: "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 17px; line-height: 2; letter-spacing: .02em; -webkit-text-size-adjust: 100%; font-feature-settings: "palt" 0; }
a { color: var(--ink); text-decoration-color: var(--line2); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }

.draft-bar { background: var(--usuzumi); color: var(--ink2); font-family: var(--sans); font-size: 12px; text-align: center; padding: 5px 16px; letter-spacing: .05em; }

/* 見出し帯：紙の地に墨の字、下に二重の罫。ロゴの横に「侍」の角印 */
.hd { background: var(--paper); color: var(--ink); position: sticky; top: 0; z-index: 20; border-bottom: 3px double var(--sumi); }
.hd-in { max-width: 1160px; margin: 0 auto; padding: 0 16px; height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.logo { color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 12px; }
/* ロゴ：墨の角印ごと S をひと太刀で斬った形（2026-10-25 本人がA案に決定。static/logo.svg、作り方は tools/make-logo.js） */
.logo-mark { display: block; width: 32px; height: 32px; flex-shrink: 0; }
.seal { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 1.5px solid var(--sumi); font-family: var(--mincho); font-weight: 800; font-size: 19px; line-height: 1; letter-spacing: 0; }
.logo-j { font-family: var(--mincho); font-weight: 800; font-size: 21px; letter-spacing: .14em; }
.logo-e { font-family: var(--sans); font-size: 10px; letter-spacing: .32em; color: var(--mute); }
.hd-nav { display: flex; gap: 22px; font-family: var(--mincho); font-size: 15px; letter-spacing: .12em; }
.hd-nav a { color: var(--ink2); text-decoration: none; }
.hd-nav a:hover { color: var(--ink); text-decoration: underline; }
.progress { position: sticky; top: 61px; height: 2px; z-index: 19; }
.progress span { display: block; height: 100%; width: 0; background: var(--sumi); }

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; }
.main { min-width: 0; max-width: 740px; }
.crumb { font-family: var(--sans); font-size: 12px; color: var(--mute); margin: 22px 0 10px; letter-spacing: .05em; }
.crumb a { color: var(--mute); }

/* 表題：明朝の大きな字、上下に二重の罫 */
.ah { padding: 18px 0 16px; border-top: 3px double var(--sumi); border-bottom: 1px solid var(--sumi); margin-bottom: 24px; }
.kicker { margin: 0; font-family: var(--sans); font-size: 11px; letter-spacing: .35em; color: var(--mute); }
.ah h1 { font-family: var(--mincho); font-weight: 800; font-size: 38px; line-height: 1.45; margin: 10px 0 14px; letter-spacing: .04em; }
.meta { font-family: var(--sans); font-size: 12px; color: var(--mute); margin: 0; letter-spacing: .04em; }
.lead { font-size: 18px; line-height: 2.1; }
.lead p:first-child::first-letter { font-family: var(--mincho); font-weight: 800; font-size: 2.6em; float: left; line-height: 1; margin: 6px 10px 0 0; }

.sub-h { font-family: var(--mincho); font-weight: 700; font-size: 21px; letter-spacing: .2em; margin: 56px 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--sumi); }

/* ひと目で：白い升目、数字は明朝 */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--sumi); border-inline-start: 1px solid var(--line); }
.stat { background: var(--card); border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 16px 14px; }
.stat-v { margin: 0; font-family: var(--mincho); font-size: 28px; font-weight: 800; line-height: 1.3; letter-spacing: .02em; }
.stat-l { margin: 8px 0 0; font-family: var(--sans); font-size: 12.5px; line-height: 1.7; color: var(--ink2); }

.timeline ol { list-style: none; margin: 0; padding: 0; border-inline-start: 1px solid var(--sumi); }
.timeline li { position: relative; padding: 0 0 14px 22px; display: grid; grid-template-columns: 64px 1fr; gap: 8px; font-size: 15px; line-height: 1.8; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -4px; top: 11px; width: 7px; height: 7px; background: var(--sumi); transform: rotate(45deg); }
.tl-y { font-family: var(--mincho); font-weight: 800; font-variant-numeric: tabular-nums; }

.rel { margin: 0; }
.rel svg { width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); }
.rel line { stroke: var(--line2); stroke-width: 1.2; }
.rel .el { font-family: var(--sans); font-size: 12px; fill: var(--mute); text-anchor: middle; paint-order: stroke; stroke: var(--card); stroke-width: 4px; }
.rel .nd rect { fill: var(--card); stroke: var(--sumi); stroke-width: 1.2; }
.rel .nd-c rect { fill: var(--card); stroke: var(--sumi); stroke-width: 3; }
.rel .nd text { font-family: var(--mincho); font-size: 16px; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.rel .nd .ns { font-family: var(--sans); font-size: 11px; font-weight: 400; fill: var(--mute); }
.rel-list { display: none; }
.rel figcaption, .fig figcaption { font-family: var(--sans); font-size: 12.5px; color: var(--mute); margin-top: 8px; line-height: 1.7; }

/* 章：区切りの菱、縦に読める章番号、明朝の章題 */
.ch { margin-top: 88px; position: relative; }
.ch::before { content: "◆"; display: block; text-align: center; font-size: 10px; color: var(--sumi); margin: -48px 0 32px; background: linear-gradient(var(--line2), var(--line2)) center / 100% 1px no-repeat; }
.ch h2 { font-family: var(--mincho); font-weight: 800; font-size: 30px; line-height: 1.5; letter-spacing: .04em; margin: 0 0 22px; padding: 0 0 14px; border-bottom: 3px double var(--sumi); display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.ch-no { writing-mode: vertical-rl; font-size: 15px; letter-spacing: .3em; font-weight: 700; color: var(--ink2); border-inline-end: 1px solid var(--line2); padding-inline-end: 10px; line-height: 1.2; }
.ch h3 { font-family: var(--mincho); font-weight: 700; font-size: 21px; letter-spacing: .05em; margin: 44px 0 10px; line-height: 1.55; display: flex; align-items: baseline; gap: 12px; }
.ch h3::before { content: ""; flex: 0 0 22px; height: 1px; background: var(--sumi); transform: translateY(-6px); }

.points { background: var(--card); border: 1px solid var(--line); border-inline-start: 3px solid var(--sumi); padding: 12px 18px; margin: 0 0 26px; }
.points-tag, .analysis-tag { margin: 0; font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .3em; color: var(--ink2); }
.points ul { margin: 4px 0 0; padding-inline-start: 1.2em; font-family: var(--sans); font-size: 14.5px; line-height: 1.8; }
.analysis { position: relative; background: var(--usuzumi); padding-block: 14px 12px; padding-inline: 64px 20px; margin: 30px 0; }
.analysis::before { content: "考"; position: absolute; inset-inline-start: 16px; top: 16px; width: 32px; height: 32px; display: grid; place-items: center; border: 1.5px solid var(--sumi); font-family: var(--mincho); font-weight: 800; font-size: 17px; line-height: 1; }
.analysis-tag { display: none; }
.analysis p { margin: 4px 0 8px; }
blockquote { margin: 22px 0; padding: 4px 20px; border-inline-start: 1px solid var(--sumi); color: var(--ink2); font-family: var(--mincho); }
.fn { font-family: var(--sans); font-size: 10.5px; line-height: 0; margin-inline-start: 1px; }
.fn a { text-decoration: none; color: var(--mute); padding: 0 1px; }
.fn a::before { content: "["; } .fn a::after { content: "]"; }
.fn a:hover { color: var(--ink); }

.fig { margin: 32px 0; }
.fig img { width: 100%; background: var(--usuzumi); }
.credit { display: block; font-size: 11px; color: var(--mute); }
.credit a { color: var(--mute); }

.table-wrap { overflow-x: auto; margin: 22px 0 6px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 13.5px; line-height: 1.65; background: var(--card); border-top: 2px solid var(--sumi); border-bottom: 2px solid var(--sumi); }
caption { text-align: start; font-size: 12.5px; color: var(--mute); padding-bottom: 6px; }
th, td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: start; vertical-align: top; }
thead th { font-family: var(--mincho); font-weight: 800; letter-spacing: .1em; white-space: nowrap; border-bottom: 1px solid var(--sumi); }
tbody th { font-family: var(--mincho); font-weight: 700; white-space: nowrap; }
td:nth-child(2), td:nth-child(3) { white-space: nowrap; }
.table-note { font-family: var(--sans); font-size: 12px; color: var(--mute); margin: 0 0 20px; }

.sources ol { padding-inline-start: 1.8em; font-family: var(--sans); font-size: 12.5px; line-height: 1.7; }
.sources li { margin-bottom: 8px; overflow-wrap: anywhere; }
.sources li:target { background: var(--usuzumi); }
.src-t { display: block; }
.src-m, .src-k, .src-a { color: var(--mute); margin-inline-end: 8px; font-size: 11.5px; }
.src-k { border: 1px solid var(--line2); padding: 0 6px; }
.src-note, .about-img p { font-family: var(--sans); font-size: 12.5px; color: var(--mute); }

/* 目次：漢数字、今の章に墨の縦線 */
.side { padding-top: 70px; }
.toc { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow: auto; border-top: 3px double var(--sumi); padding-top: 10px; }
.side-h { font-family: var(--mincho); font-size: 14px; font-weight: 800; letter-spacing: .4em; color: var(--ink); margin: 0 0 8px; }
.toc ol, .mtoc ol { list-style: none; margin: 0; padding: 0; font-size: 13.5px; line-height: 1.6; }
.toc a, .mtoc a { display: flex; gap: 10px; padding: 7px 8px; color: var(--ink2); text-decoration: none; border-inline-start: 2px solid transparent; }
.toc a span, .mtoc a span { font-family: var(--mincho); font-weight: 800; color: var(--mute); min-width: 1.4em; }
.toc a.on { border-inline-start-color: var(--sumi); color: var(--ink); font-weight: 700; background: var(--card); }
.toc a.on span { color: var(--ink); }
.mtoc { display: none; }

.more { border-top: 3px double var(--sumi); margin-top: 88px; background: var(--card); }
.more-in { max-width: 1160px; margin: 0 auto; padding: 30px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: 15px; }
.more ul { margin: 0; padding-inline-start: 1.2em; }
.soon { font-family: var(--sans); font-size: 11px; color: var(--mute); border: 1px solid var(--line2); padding: 0 6px; margin-inline-start: 8px; }
.ft { background: var(--paper); color: var(--mute); font-family: var(--sans); font-size: 12.5px; border-top: 1px solid var(--sumi); }
.ft-in { max-width: 1160px; margin: 0 auto; padding: 32px 16px; }
.ft a { color: var(--ink2); }
.ft .logo-j { color: var(--ink); margin: 0 0 6px; font-size: 18px; }

.fig-small { max-width: 420px; margin-inline-start: auto; margin-inline-end: auto; }
.fig-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 32px 0; }
.fig-row .fig { margin: 0; }
.fig-row img { aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 960px) {
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side { display: none; }
  .mtoc { display: block; position: sticky; top: 61px; z-index: 18; background: var(--paper); border-bottom: 1px solid var(--sumi); }
  .mtoc summary { list-style: none; cursor: pointer; padding: 10px 16px; font-family: var(--mincho); font-size: 14px; font-weight: 800; display: flex; justify-content: space-between; }
  .mtoc summary::-webkit-details-marker { display: none; }
  .mtoc-btn { font-family: var(--sans); font-weight: 400; color: var(--mute); font-size: 12px; white-space: nowrap; flex-shrink: 0; }
  .mtoc-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-inline-end: 12px; }
  .mtoc ol { padding: 0 8px 10px; max-height: 60vh; overflow: auto; }
}
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.95; }
  .hd-nav { display: none; }
  .logo-e { display: none; }
  .ah h1 { font-size: 27px; }  .lead { font-size: 17px; }
  .ch h2 { font-size: 23px; gap: 12px; }
  .ch-no { font-size: 13px; }
  .ch h3 { font-size: 19px; }
  .ch h3::before { flex-basis: 14px; }
  .analysis { padding-inline-start: 54px; }
  .analysis::before { inset-inline-start: 12px; width: 28px; height: 28px; font-size: 15px; }
  .rel svg { display: none; }
  .rel-list { display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.8; background: var(--card); border: 1px solid var(--line); padding: 10px 10px 10px 28px; margin: 0; }
  .timeline li { grid-template-columns: 52px 1fr; }
  .more-in { grid-template-columns: 1fr; }
  .fig-row { gap: 8px; }
  .fig-row figcaption { font-size: 11px; }
}

/* 背景画の帯（トップと記事の上）。2026-10-25 本人指定の Pixabay の武士の絵を白黒にして敷き、下ほど暗くして文字を読ませる */
.kv { position: relative; overflow: hidden; color: #f4f2ec; background: #1c1c1c; border-bottom: 3px double var(--sumi); }
.kv::before { content: ""; position: absolute; inset: 0; background: url(/_s/img/pb-bushi.jpg) center 58% / cover no-repeat; filter: grayscale(1) contrast(1.06) brightness(.82); }
.kv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .78) 100%); }
.kv-in { position: relative; z-index: 1; max-width: 1160px; margin: 0 auto; padding: 22px 16px 34px; min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end; }
.kv .crumb { margin: 0 0 auto; color: rgba(244, 242, 236, .75); }
.kv .crumb a { color: rgba(244, 242, 236, .8); }
.kv .kicker { color: #cfcbc2; }
.kv h1 { font-family: var(--mincho); font-weight: 800; font-size: 38px; line-height: 1.45; letter-spacing: .04em; margin: 10px 0 14px; max-width: 800px; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.kv .meta { font-family: var(--sans); font-size: 12px; color: #cfcbc2; margin: 0; letter-spacing: .04em; }
.kv-site { font-size: 60px !important; letter-spacing: .22em !important; margin: 6px 0 8px !important; }
.kv-tag { font-family: var(--mincho); font-size: 18px; letter-spacing: .12em; margin: 0; color: #e7e4dd; }
.kv + .progress + .mtoc + .wrap .main, .kv + .wrap1 { padding-top: 8px; }

/* トップ・カテゴリー・about */
.wrap1 { max-width: 1000px; margin: 0 auto; padding: 8px 16px 40px; }
.page-h { font-family: var(--mincho); font-weight: 800; font-size: 34px; letter-spacing: .08em; margin: 18px 0 22px; padding: 14px 0 12px; border-top: 3px double var(--sumi); border-bottom: 1px solid var(--sumi); }
.page-h span { display: block; font-family: var(--sans); font-weight: 400; font-size: 11px; letter-spacing: .35em; color: var(--mute); margin-top: 4px; }
.sec-note { font-family: var(--sans); font-size: 13px; color: var(--mute); margin: -8px 0 18px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.card { display: block; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.card:hover { border-color: var(--sumi); }
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.card-b { display: block; padding: 14px 16px 16px; }
.card-k { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; color: var(--mute); }
.card-t { display: block; font-family: var(--mincho); font-weight: 800; font-size: 19px; line-height: 1.5; margin: 6px 0 8px; }
.card-d { display: block; font-family: var(--sans); font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.soon-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 18px; font-family: var(--mincho); font-weight: 700; color: var(--mute); }
.cat-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0; border-top: 1px solid var(--sumi); border-inline-start: 1px solid var(--line); }
.cat-list a { display: block; padding: 16px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); }
.cat-list b { font-family: var(--mincho); font-size: 20px; letter-spacing: .2em; }
.cat-list span { display: block; font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; color: var(--mute); }
.empty { font-family: var(--sans); font-size: 14px; color: var(--ink2); background: var(--card); border: 1px solid var(--line); padding: 18px; }
.prose { max-width: 760px; }
.prose ul { padding-inline-start: 1.3em; }
.op { margin-top: 8px; }
.op th { width: 11em; }

@media (max-width: 640px) {
  .kv-in { min-height: 300px; padding-bottom: 24px; }
  .kv h1 { font-size: 26px; }
  .kv-site { font-size: 32px !important; letter-spacing: .1em !important; white-space: nowrap; } /* 「サムライジャーナル」9文字を390px幅で1行に */
  .kv-tag { font-size: 15px; }
  .page-h { font-size: 26px; }
}
.kv .crumb { text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }

/* ===== 多言語（2026-10-25）===== */
/* 書体の組（site.js の fonts と同じ。CSP で inline の style を使えないのでここで切り替える） */
html[data-font="latin"] { --mincho: "Noto Serif", serif; --serif: "Noto Serif", serif; }
html[data-font="sc"] { --mincho: "Noto Serif SC", serif; --serif: "Noto Serif SC", serif; }
html[data-font="tc"] { --mincho: "Noto Serif TC", serif; --serif: "Noto Serif TC", serif; }
html[data-font="kr"] { --mincho: "Noto Serif KR", serif; --serif: "Noto Serif KR", serif; }
html[data-font="deva"] { --mincho: "Noto Serif Devanagari", "Noto Serif", serif; --serif: "Noto Serif Devanagari", "Noto Serif", serif; }
html[data-font="arab"] { --mincho: "Noto Naskh Arabic", "Noto Serif", serif; --serif: "Noto Naskh Arabic", "Noto Serif", serif; }
html:not([lang="ja"]) .logo-j { font-family: "Shippori Mincho B1", var(--mincho); letter-spacing: .12em; }
html:not([lang="ja"]) body { letter-spacing: 0; }
html[data-font="latin"] body, html[data-font="deva"] body, html[data-font="arab"] body { line-height: 1.8; }
html[data-font="arab"] body { font-size: 18px; }

/* 章番号：縦書きは漢字圏だけ。ほかは見出しの上に小さく横書き */
html:not([data-cjk]) .ch h2 { display: block; }
html:not([data-cjk]) .ch-no { display: block; writing-mode: horizontal-tb; border: 0; padding: 0; margin-bottom: 6px; font-family: var(--sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
/* 考察の印「考」は日本語だけ。ほかは文字の札 */
html:not([lang="ja"]) .analysis::before { display: none; }
html:not([lang="ja"]) .analysis { padding-inline: 20px; }
html:not([lang="ja"]) .analysis-tag { display: block; color: var(--ink2); margin-bottom: 4px; }
html[dir="rtl"] .timeline li { grid-template-columns: 64px 1fr; }
html[dir="rtl"] .rel svg { direction: ltr; }

/* 言語の切り替え */
.hd-r { display: flex; align-items: center; gap: 18px; }
.langs { position: relative; font-family: var(--sans); font-size: 13px; }
.langs summary { list-style: none; cursor: pointer; padding: 4px 10px; border: 1px solid var(--line2); color: var(--ink2); white-space: nowrap; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: " ▾"; }
.langs ul { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 30; list-style: none; margin: 0; padding: 6px 0; min-width: 190px; max-height: 70vh; overflow: auto; background: var(--card); border: 1px solid var(--sumi); }
.langs a { display: block; padding: 6px 14px; color: var(--ink); text-decoration: none; }
.langs a:hover, .langs a[aria-current] { background: var(--usuzumi); }
.tr-note { font-family: var(--sans); font-size: 12.5px; color: var(--mute); border: 1px solid var(--line); background: var(--card); padding: 8px 12px; margin: 0 0 18px; }
.lang-list { list-style: none; padding: 0; margin: 24px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; border-top: 1px solid var(--sumi); border-inline-start: 1px solid var(--line); }
.lang-list a { display: block; padding: 14px 16px; border-inline-end: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--card); text-decoration: none; color: var(--ink); }
.lang-list b { display: block; font-size: 18px; }
.lang-list span { display: block; font-family: var(--sans); font-size: 12px; color: var(--mute); margin-top: 4px; }

/* 広告と CTA の枠（site.js の monetize でオンにしたときだけ出る） */
.ad { margin: 32px 0; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ad-tag { margin: 0 0 6px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; color: var(--mute); }
.cta { margin: 32px 0; padding: 18px 20px; background: var(--card); border: 1px solid var(--sumi); }
.cta-t { margin: 0 0 6px; font-family: var(--mincho); font-weight: 800; font-size: 19px; }
.cta-d { margin: 0 0 12px; font-family: var(--sans); font-size: 14px; color: var(--ink2); }
.cta-b { display: inline-block; padding: 10px 18px; background: var(--sumi); color: #f4f2ec; text-decoration: none; font-family: var(--sans); font-size: 14px; }

@media (max-width: 640px) {
  .hd-r { gap: 10px; }
  .langs summary { padding: 3px 8px; font-size: 12px; }
}

/* つながって書く文字（デーヴァナーガリー・アラビア文字）は字間を空けると字が崩れる。字間の指定を全部外す */
html[data-font="deva"] *, html[data-font="arab"] * { letter-spacing: 0 !important; }
/* ロゴの英字（日本語以外）はスマホで1行に収める */
.logo-j { white-space: nowrap; }
@media (max-width: 640px) {
  html:not([lang="ja"]) .logo-j { font-size: 15px; letter-spacing: .06em; }
  .logo { gap: 8px; }
}