@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
/* いつつ — ドキュメント系ページ共通スタイル（warm neutral monochrome） */
:root{
  --paper:#F4F2EE; --surface:#ECE9E3; --ink:#242321; --muted:#77736B;
  --body-muted:#5f5b54; --hair:#D8D4CC; --ghost:#BEB9B0; --control:#F8F7F4;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Zen Maru Gothic',-apple-system,BlinkMacSystemFont,"Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;
  line-height:1.82; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
}
.wrap{max-width:640px; margin:0 auto; padding:0 22px}

/* header（全ページ枠線なしで統一） */
header{padding:22px 0; position:sticky; top:0; background:rgba(244,242,238,.86); backdrop-filter:blur(10px); z-index:10}
.nav{display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:11px; font-weight:700; letter-spacing:.04em; color:var(--ink); text-decoration:none}
.logo{display:flex; gap:5px; align-items:center}
.logo i{border-radius:50%; background:var(--ink); display:block}
.logo i:nth-child(1),.logo i:nth-child(5){width:5px; height:5px}
.logo i:nth-child(2),.logo i:nth-child(4){width:9px; height:9px}
.logo i:nth-child(3){width:13px; height:13px}
.nav nav a{color:var(--muted); text-decoration:none; font-size:14px; margin-left:18px}
.nav nav a:hover{color:var(--ink)}
.lang-toggle{appearance:none; -webkit-appearance:none; background:none; border:1px solid var(--hair);
  color:var(--muted); font-family:inherit; font-size:12.5px; letter-spacing:.04em; line-height:1;
  padding:6px 12px; border-radius:999px; cursor:pointer; margin-left:18px}
.lang-toggle:hover{color:var(--ink); border-color:var(--ghost)}

/* JP/EN 切替：非表示側だけ display:none にし、表示側は各要素本来の display に任せる */
html:not(.lang-en) .en{display:none}
html.lang-en .jp{display:none}

/* article：本文は左揃え。タイトルとリードだけ中央（ブロックは .wrap で中央寄せ） */
main{padding:48px 0 88px; text-align:left}
h1{font-size:30px; font-weight:700; letter-spacing:.01em; margin-bottom:6px; line-height:1.3; text-align:center}
.lead{color:var(--muted); font-size:14px; margin:-2px 0 36px; text-align:center}
h2{font-size:18px; font-weight:700; margin:36px 0 10px}
h3{font-size:16px; font-weight:700; margin:22px 0 2px}
p,li{font-size:15.5px}
p{margin:12px 0}
ul,ol{padding-left:1.25em; margin:12px 0; list-style:disc; text-align:left}
li{margin:5px 0}
.q{font-weight:700; margin:20px 0 0}
.note{background:var(--surface); border-radius:14px; padding:16px 18px; margin:20px 0; font-size:14.5px; color:var(--body-muted)}
strong{font-weight:700}
a{color:var(--ink)}
hr{border:none; border-top:1px solid var(--hair); margin:36px 0}

/* 操作の図解（PCは横並び・左揃え／モバイルは縦積み中央） */
.ui-row{display:flex; flex-direction:row; align-items:center; text-align:left; gap:14px; margin:14px 0; padding:14px 18px; background:var(--surface); border-radius:14px}
.ui-row .g{flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:var(--paper); border:1px solid var(--hair); display:flex; align-items:center; justify-content:center}
.ui-row .g svg{width:22px; height:22px; stroke:var(--ink); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.ui-row .g .dots{display:flex; gap:5px}
.ui-row .g .dots span{width:6px;height:6px;border-radius:50%;background:var(--ink)}
.ui-row .g .dots span:nth-child(n+3){background:var(--ghost)}
.ui-row .t b{font-weight:700}
.ui-row .t small{color:var(--body-muted); font-size:13.5px}

/* timeline（更新履歴・左の罫線で時系列を示す） */
.entry{border-left:2px solid var(--hair); padding:2px 0 24px 20px; position:relative; margin-left:4px}
.entry::before{content:""; position:absolute; left:-6px; top:8px; width:10px; height:10px; border-radius:50%; background:var(--ink)}
.entry .date{color:var(--muted); font-size:13px; letter-spacing:.05em}
.entry h3{margin:2px 0 4px}
.entry.up::before{background:var(--ghost)}

/* footer（全ページ中央縦積みで統一） */
footer{border-top:1px solid var(--hair); padding:40px 0; color:var(--muted); font-size:13.5px}
.fnav{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:16px}
footer a{color:var(--muted); text-decoration:none; white-space:nowrap}
footer a:hover{color:var(--ink)}

@media(max-width:600px){
  h1{font-size:26px}
  .nav nav a{margin-left:14px}
  .ui-row{flex-direction:column; text-align:center}
}

.budoux-target{word-break:keep-all; overflow-wrap:anywhere}
.budoux-target a,.budoux-target code,.budoux-target time{white-space:nowrap}