@font-face{font-family:"Jost";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/jost-100-900.5970e31e.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/zen-kaku-gothic-new-400.b9543ce9.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/zen-kaku-gothic-new-500.50d0bea3.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/zen-kaku-gothic-new-700.8c4dedce.woff2) format("woff2")}
@font-face{font-family:"Zen Kaku Gothic New";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/zen-kaku-gothic-new-900.fab56ce1.woff2) format("woff2")}
@font-face{font-family:"Jost Fallback";font-weight:400 500;src:local("Arial"),local("ArialMT"),local("Helvetica Neue"),local("Helvetica");size-adjust:93.42%;ascent-override:114.5%;descent-override:40.1%;line-gap-override:0%}
@font-face{font-family:"Jost Fallback";font-weight:600 800;src:local("Arial Bold"),local("Arial-BoldMT"),local("Helvetica Neue Bold"),local("Helvetica Bold");size-adjust:93.42%;ascent-override:114.5%;descent-override:40.1%;line-gap-override:0%}
@font-face{font-family:"Zen Kaku Gothic New Fallback";font-weight:300 500;src:local("Hiragino Sans W3"),local("HiraginoSans-W3"),local("Hiragino Kaku Gothic ProN W3"),local("YuGothic-Regular"),local("Yu Gothic Regular"),local("Meiryo"),local("Noto Sans CJK JP Regular"),local("NotoSansCJKjp-Regular");size-adjust:100%;ascent-override:116%;descent-override:28.8%;line-gap-override:0%}
@font-face{font-family:"Zen Kaku Gothic New Fallback";font-weight:600 900;src:local("Hiragino Sans W6"),local("HiraginoSans-W6"),local("Hiragino Kaku Gothic ProN W6"),local("YuGothic-Bold"),local("Yu Gothic Bold"),local("Meiryo Bold"),local("Noto Sans CJK JP Bold"),local("NotoSansCJKjp-Bold");size-adjust:100%;ascent-override:116%;descent-override:28.8%;line-gap-override:0%}
/* 記事（ArticleBody / TableOfContents / ArticleCTA / NextRead）。案Q: 白い地に墨。読む画面の明暗の切り替えと文字の大きさの切り替え（ReadingTools）は、デザインシステム版 2 で取り下げられた */
.ac-post{padding-block:var(--space-5) clamp(56px,8vw,96px)}
.ac-reading{padding:0}
.ac-art{min-width:0}
.ac-post-grid{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:clamp(24px,4vw,56px);align-items:start}
.ac-ptop .ac-crumb{min-width:0}
.ac-art-head{margin:var(--space-5) 0 var(--space-5)}
.ac-art-head h1{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:var(--ac-w-bold);line-height:1.5;margin:.3em 0 0;text-wrap:wrap;text-wrap:pretty}
.ac-art-meta{display:flex;flex-wrap:wrap;gap:0 1.2em;align-items:baseline;margin:0;font-size:.82rem;color:var(--mk-muted);font-variant-numeric:tabular-nums}
.ac-art-cat{color:var(--mk-accent-text);font-weight:700;text-decoration:none;letter-spacing:.04em}
.ac-art-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:var(--space-3) 0 0;padding:0}
.ac-art-tags li{padding:.1em .8em;border:1px solid var(--mk-line-control);border-radius:var(--radius-sm);font-size:.8rem;color:var(--mk-ink-2)}
/* 目次: 本文内（番号つき）と、追従（PC のみ） */
.ac-toc-inline{border-block:1px solid var(--mk-line);padding:18px 0 10px;margin-bottom:var(--space-5)}
.ac-toc-inline b,.ac-toc-side b{display:block;font-size:.8rem;font-weight:500;letter-spacing:.08em;color:var(--mk-muted);margin-bottom:10px}
.ac-toc-inline ol{list-style:none;margin:0;padding:0;counter-reset:t}.ac-toc-inline li{counter-increment:t}
.ac-toc-inline a{position:relative;display:block;padding:.6em 0 .6em 2.4em;font-size:.98rem;color:inherit;text-decoration:none}
.ac-toc-inline a::before{content:"0" counter(t);position:absolute;left:0;color:var(--mk-accent-text);font-size:.9em}.ac-toc-inline a:hover{color:var(--mk-accent-text)}
.ac-toc-side{position:sticky;top:84px}
.ac-toc-side nav{display:grid}
.ac-toc-side a{display:block;border-left:1px solid var(--mk-line);padding:.55em 0 .55em var(--space-4);font-size:.92rem;color:inherit;text-decoration:none;transition:color .2s,border-color .2s,padding .3s var(--ease-out)}
.ac-toc-side a[data-depth="3"]{padding-left:30px;font-size:.86rem;color:var(--mk-muted)}
.ac-toc-side a.cur[data-depth="3"]{padding-left:36px;color:var(--mk-accent-text)}
.ac-toc-side a.cur{border-left-color:var(--mk-accent);color:var(--mk-accent-text);padding-left:22px;font-weight:500}
/* 本文 */
.ac-prose{font-size:1rem;line-height:2.05;letter-spacing:.035em}
.ac-prose>*+*{margin-top:1.7em}
.ac-prose h2{font-size:1.5rem;font-weight:var(--ac-w-bold);text-wrap:wrap;text-wrap:pretty;line-height:1.5;margin:2.2em 0 0;padding-top:1.4em;border-top:1px solid var(--mk-line)}
.ac-prose h3{font-weight:var(--ac-w-bold);font-size:1.12em;margin-top:2.6em;text-wrap:wrap;text-wrap:pretty}
.ac-prose a{color:var(--mk-accent-text);text-decoration-thickness:1px;text-underline-offset:.3em}
.ac-prose strong{font-weight:var(--ac-w-bold);background:var(--mk-tint);padding:.05em .2em;border-radius:var(--radius-sm)}
.ac-prose ul,.ac-prose ol{padding-left:1.4em}.ac-prose li+li{margin-top:.4em}
.ac-prose blockquote{margin-inline:0;padding:0 0 0 clamp(18px,3vw,34px);border-left:2px solid var(--mk-accent);color:var(--mk-ink-2)}
.ac-prose img{border-radius:var(--radius-sm);height:auto}
.ac-prose hr{border:0;border-top:1px solid var(--mk-line)}
.ac-prose table{border-collapse:collapse;width:100%;font-size:.94em}.ac-prose th,.ac-prose td{border:1px solid var(--mk-line-strong);padding:.5em .8em;text-align:left;vertical-align:top}.ac-prose th{background:var(--mk-box)}
.ac-prose :not(pre)>code{font-family:var(--font-mono);font-size:.88em;padding:.1em .4em;border-radius:var(--radius-sm);background:var(--mk-code-inline)}
.ac-prose pre{overflow-x:auto;padding:1.1em 1.3em;border:1px solid var(--mk-line);border-radius:var(--radius);background:var(--mk-code-bg);color:var(--mk-ink);font-size:.88rem;line-height:1.8;letter-spacing:0}
.ac-prose pre code{font-family:var(--font-mono)}
/* 記事ブロック（:::conclusion / point / caution / steps）。結論は answer、ほかは note の見た目。囲みは mk-box */
.vb{border:1px solid var(--mk-line-strong);border-radius:var(--radius);background:var(--mk-box);padding:1.2em 1.4em;font-size:.96em;line-height:1.9;letter-spacing:.02em}
.vb>*+*{margin-top:.7em}.vb>:last-child{margin-bottom:0}
.vb-label{margin:0;font-size:.84em;font-weight:700;letter-spacing:.08em;color:var(--mk-accent-text)}
.vb-conclusion{border-color:var(--mk-accent);background:var(--mk-tint)}.vb-conclusion .vb-label{color:var(--mk-ink)}
.vb-caution .vb-label{color:var(--mk-warn)}.vb-caution{border-color:var(--mk-warn)}
.vb-steps ol{padding-left:1.3em;margin:.4em 0 0}
/* コードの配色（白い地。mk-code-bg の上で 4.5:1 以上） */
.hljs-comment,.hljs-quote{color:#5b6b7b;font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-doctag{color:#7a1fd6}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-meta .hljs-string{color:#0a6b3a}
.hljs-number,.hljs-built_in,.hljs-type,.hljs-attr,.hljs-attribute{color:#8a4b00}
.hljs-title,.hljs-section,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:#0a56b8}
.hljs-variable,.hljs-template-variable,.hljs-symbol,.hljs-bullet{color:#a02a6a}
.hljs-deletion{color:var(--mk-code-err)}.hljs-meta,.hljs-punctuation{color:#4a5663}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
/* CTA */
.ac-cta{border-radius:var(--radius);padding:28px 28px 30px;margin:var(--space-5) 0 var(--space-4)}
.ac-cta b{display:block;font-size:1.3rem;line-height:1.5;font-weight:var(--ac-w-bold);text-wrap:wrap;text-wrap:pretty}
.ac-cta p{font-size:.94rem;line-height:1.85;margin:.4em 0 1.2em;letter-spacing:0}
.ac-cta-btn{display:inline-flex;align-items:center;min-height:48px;padding:0 1.6em;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem;text-decoration:none}
.ac-cta-mid{background:var(--mk-box);border:1px solid var(--mk-line-strong)}.ac-cta-mid p{color:var(--mk-ink-2)}.ac-cta-mid .ac-cta-btn{background:var(--mk-accent);color:var(--mk-on-accent)}.ac-cta-mid .ac-cta-btn:hover{background:var(--mk-accent-hover)}
.ac-cta-end{background:var(--mk-cta-bg);color:var(--mk-cta-ink)}.ac-cta-end .ac-cta-btn{background:var(--mk-cta-ink);color:var(--mk-cta-bg)}
/* NextRead: 罫線だけ */
.ac-next{display:grid;gap:var(--space-2);padding:28px 0;margin-top:var(--space-5);border-block:1px solid var(--mk-ink);color:inherit;text-decoration:none}
.ac-next:hover b{color:var(--mk-accent-text)}
.ac-next small{font-size:.8rem;letter-spacing:.1em;color:var(--mk-accent-text)}.ac-next b{font-weight:var(--ac-w-bold);font-size:1.6rem;line-height:1.45;text-wrap:wrap;text-wrap:pretty;transition:color .2s}.ac-next span{color:var(--mk-ink-2);font-size:.94rem;line-height:1.85}.ac-next em{font-style:normal;font-size:.84rem;color:var(--mk-muted)}
.ac-pnwrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-top:var(--space-4)}
.ac-pn{border-top:1px solid var(--mk-line-strong);padding:var(--space-4) 0;color:inherit;text-decoration:none}.ac-pn:hover b{color:var(--mk-accent-text)}
.ac-pn span{display:block;font-size:.74rem;letter-spacing:.08em;color:var(--mk-muted)}.ac-pn b{font-weight:500;line-height:1.6;transition:color .2s}.ac-pn-next{text-align:right}
.ac-rel{margin-top:var(--space-7)}.ac-rel h2{font-size:1.3rem;font-weight:var(--ac-w-bold);margin:0 0 var(--space-3)}
@media (max-width:900px){.ac-post-grid{grid-template-columns:minmax(0,1fr)}.ac-toc-side{display:none}.ac-pnwrap{grid-template-columns:1fr}.ac-pn-next{text-align:left}}

/* 土台。値はデザインシステムのトークン（tokens.css）だけを参照する。直書きしない。 */
/* 見出し・題・強調の太さ。Zen Kaku Gothic New が持つのは 400・500・700・900。ここを変えると、サイト全体の見出しの太さが変わる（トップの大見出しを含む。ボタン・小さなラベルは 700 のまま） */
:root{--ac-w-bold:500}
*,*::before,*::after{box-sizing:border-box}
b,strong,th,dt{font-weight:var(--ac-w-bold)}
html{color-scheme:light;scroll-padding-top:calc(var(--mk-header) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--mk-bg);color:var(--mk-ink);font-family:var(--font-marketing);font-size:16px;line-height:1.8;font-feature-settings:"palt" 0}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--mk-focus);outline-offset:3px}
/* Zen Kaku Gothic New の太さは 400・500・700・900 の4つだけ。600 は 500 か 700、800 は 900 に寄るので、使うのはこの4つ（test/content.test.mjs が検査する）。
   見出しは短いもの（カード・節）は balance。長くなりうる題・本文の見出しは、各所で `text-wrap:wrap; text-wrap:pretty;` にする（balance は長い題を短い2行に割ってしまう。pretty に未対応の Firefox では、先の wrap が効いて balance が外れる） */
h1,h2,h3{text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
.ac-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ac-skip{position:fixed;left:12px;top:-80px;z-index:var(--z-modal);padding:.6em 1.1em;border-radius:var(--radius-sm);background:var(--mk-accent);color:var(--mk-on-accent);font-weight:500;text-decoration:none}
.ac-skip:focus{top:12px}
.ac-wrap{width:min(100% - 40px,var(--mk-wrap));margin-inline:auto}
.ac-sec{padding-block:clamp(48px,7vw,96px)}
.ac-h2{font-size:clamp(1.45rem,1.2rem + 1.3vw,2.1rem);font-weight:var(--ac-w-bold);line-height:1.5;margin:0 0 20px}
.ac-lead{color:var(--mk-ink-2);line-height:2;max-width:34em;margin:0 0 var(--space-5)}
.ac-page-h{font-size:clamp(1.6rem,1.2rem + 1.6vw,2.4rem);font-weight:var(--ac-w-bold);line-height:1.4;margin:0 0 var(--space-5);text-wrap:wrap;text-wrap:pretty}
.ac-ghost{display:inline-flex;align-items:center;gap:.6em;padding:.5em 0;color:var(--mk-ink);text-decoration:none;border-bottom:1px solid var(--mk-line-control);transition:border-color .25s,gap .3s var(--ease-out)}
.ac-ghost:hover{border-color:var(--mk-accent);gap:1em}
.ac-more{margin:var(--space-5) 0 0}
/* MarketingButton */
.ac-btn{display:inline-flex;align-items:center;gap:.7em;min-height:var(--mk-cta);padding:0 1.7em;border-radius:var(--radius-sm);background:var(--mk-accent);color:var(--mk-on-accent);font-weight:500;text-decoration:none;transition:gap .3s var(--ease-out),background .2s,border-color .2s}
.ac-btn:hover{gap:1.1em;background:var(--mk-accent-hover)}
.ac-btn[data-kind=ghost]{background:transparent;color:var(--mk-ink);border:1px solid var(--mk-line-control)}
.ac-btn[data-kind=ghost]:hover{border-color:var(--mk-ink);background:var(--mk-hover)}
.ac-btn[data-size=sm]{min-height:46px;padding:0 1.3em;font-size:.92rem}
/* 動き: 見えたら 1 回だけ。JS が、画面の下にある要素にだけ data-pending を付ける（JS なし・上にある要素は最初から見える） */
[data-reveal]{transition:opacity .9s var(--ease-out),translate .9s var(--ease-out)}
[data-pending]:not(.is-in){opacity:0;translate:0 44px}
@keyframes ac-rise{from{opacity:0;translate:0 44px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}[data-pending]:not(.is-in){opacity:1;translate:none}html{scroll-behavior:auto}}
/* EmptyState */
.ac-empty{padding:var(--space-6) 0;border-block:1px solid var(--mk-line)}
.ac-empty p{margin:0 0 var(--space-3);color:var(--mk-muted)}
.ac-empty strong{color:var(--mk-ink)}
/* 一覧の行（ArticleRow） */
.ac-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--mk-ink)}
.ac-row{display:grid;grid-template-columns:104px 1fr 150px 52px;gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--mk-line);color:inherit;text-decoration:none;transition:padding .3s var(--ease-out)}
.ac-row:hover{padding-left:10px}
.ac-row time,.ac-row-cat,.ac-row-min{font-size:.8rem;color:var(--mk-muted);font-variant-numeric:tabular-nums}
.ac-row-title{display:block;font-size:1.08rem;font-weight:var(--ac-w-bold);line-height:1.6;transition:color .2s}
.ac-row:hover .ac-row-title{color:var(--mk-accent-text)}
.ac-row-ex{display:block;font-size:.88rem;color:var(--mk-ink-2);line-height:1.8;margin-top:.2em}
.ac-row-min{text-align:right}
@media (max-width:900px){.ac-row{grid-template-columns:1fr auto;gap:4px 16px}.ac-row-main{grid-column:1/-1;grid-row:2}.ac-row-cat{grid-column:1/-1;grid-row:3}}
/* パンくず・ページ送り・絞り込み */
.ac-crumb ol{display:flex;flex-wrap:wrap;gap:0 var(--space-2);list-style:none;margin:0 0 var(--space-4);padding:0;font-size:.82rem;color:var(--mk-muted)}
.ac-crumb li+li::before{content:"/";margin-right:var(--space-2)}
.ac-crumb a{color:inherit;text-decoration:none}.ac-crumb a:hover{color:var(--mk-ink)}
.ac-crumb [aria-current]{color:var(--mk-ink);font-weight:700}
.ac-filters{display:grid;gap:var(--space-3);margin-bottom:var(--space-5)}
.ac-chips,.ac-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}
.ac-chip,.ac-tag{display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:0 1em;border:1px solid var(--mk-line-control);border-radius:var(--radius-sm);color:var(--mk-ink);text-decoration:none;font-size:.86rem;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.ac-chip:hover,.ac-tag:hover{border-color:var(--mk-ink);background:var(--mk-hover)}
.ac-chip[aria-current=page]{background:var(--mk-ink);color:var(--mk-bg);border-color:var(--mk-ink)}
.ac-tag{min-height:36px;font-size:.88rem}.ac-tag i{font-style:normal;font-size:.72rem;color:var(--mk-muted)}
.ac-tag[aria-current=page]{background:var(--mk-tint);border-color:var(--mk-accent);color:var(--mk-ink)}.ac-tag[aria-current=page] i{color:var(--mk-ink-2)}
.ac-pager{display:flex;justify-content:center;gap:var(--space-4);margin:var(--space-6) 0 0;font-variant-numeric:tabular-nums}
.ac-pager a,.ac-pager span{padding:.4em .9em;border:1px solid transparent;border-radius:var(--radius-sm);text-decoration:none}
.ac-pager a:hover{border-color:var(--mk-line-control)}.ac-pager [aria-disabled]{opacity:.45}.ac-pager-now{border-color:var(--mk-ink)!important;font-weight:700}
.ac-blog-in{padding-block:var(--space-6) clamp(56px,8vw,96px)}
.ac-nf{padding-block:clamp(56px,10vw,140px)}

/* ヘッダー（MarketingHeader）・検索（SearchField / SearchSuggest）・フッター・モバイルバー（MobileBar）。案Q: 白い帯と罫線。面・影・丸は使わない（影は、検索候補のように浮く面だけ） */
.ac-header{position:fixed;inset:0 0 auto 0;z-index:var(--z-fixed);background:var(--mk-bg);border-bottom:1px solid var(--mk-line);transition:translate .32s var(--ease-out)}
.ac-header[data-hidden]{translate:0 -100%}
.ac-header-in{display:flex;align-items:center;gap:6px;height:var(--mk-header)}
body > main{padding-top:var(--mk-header);min-height:70vh}
.ac-logo{display:flex;align-items:center;margin-right:auto;padding:6px 16px 6px 0}
.ac-logo img{display:block;height:30px;width:auto}.ac-logo .ac-lg-mark{display:none;height:22px}
.ac-nav{display:flex;gap:2px;font-size:.9rem}
.ac-nav a{padding:.55em .95em;border-radius:var(--radius-sm);color:var(--mk-ink-2);text-decoration:none;transition:color .2s,background .2s}
.ac-nav a:hover{color:var(--mk-ink);background:var(--mk-hover)}.ac-nav a[aria-current]{color:var(--mk-ink);font-weight:500}
.ac-talk{display:inline-flex;align-items:center;height:40px;margin-left:8px;padding:0 1.15em;border-radius:var(--radius-sm);background:var(--mk-accent);color:var(--mk-on-accent);font-weight:500;font-size:.88rem;text-decoration:none;white-space:nowrap;transition:background .2s}
.ac-talk:hover{background:var(--mk-accent-hover)}
/* 検索欄: 白い地に、操作部品の枠（mk-line-control、3:1）。フォーカスで青の枠 */
.ac-search{position:relative;display:flex;align-items:center;width:200px;height:40px;margin-left:8px;padding:0 14px 0 40px;border:1px solid var(--mk-line-control);border-radius:var(--radius-sm);background:var(--mk-bg);color:var(--mk-ink);transition:width .3s var(--ease-out),border-color .2s}
.ac-search:focus-within{width:min(320px,34vw);border-color:var(--mk-accent);box-shadow:0 0 0 1px var(--mk-accent)}
.ac-search-icon{position:absolute;left:14px;top:50%;translate:0 -50%;display:flex;pointer-events:none;color:var(--mk-ink-2)}
.ac-search-input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:.88rem;color:inherit}
.ac-search-input::placeholder{color:var(--mk-muted)}
.ac-search-open{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;border-radius:var(--radius-sm);background:none;color:var(--mk-ink);cursor:pointer}
.ac-search-open:hover{background:var(--mk-hover)}
.ac-suggest{position:fixed;inset:auto;margin:0;margin-block:8px;position-anchor:--vc;position-area:bottom span-right;position-try-fallbacks:flip-block;width:max(anchor-size(width),min(360px,92vw));max-height:min(60vh,420px);overflow:auto;padding:6px;list-style:none;border:1px solid var(--mk-line-strong);border-radius:var(--radius);background:var(--mk-bg);color:var(--mk-ink);box-shadow:var(--shadow-float)}
.v-combobox{anchor-scope:--vc}.v-combobox [role=combobox]{anchor-name:--vc}
.ac-suggest [role=option]{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);min-height:44px;padding:11px 14px;border-radius:var(--radius-sm);font-size:.96rem;line-height:1.5;cursor:pointer}
.ac-suggest [role=option] small{font-size:.74rem;color:var(--mk-muted);white-space:nowrap}
.ac-suggest [role=option][data-active]{background:var(--mk-tint);color:var(--mk-ink);box-shadow:inset 2px 0 var(--mk-accent)}
.ac-suggest [role=option][data-active] small{color:var(--mk-ink-2)}
.ac-suggest [role=option][hidden]{display:none}
.ac-suggest .v-listbox-empty{padding:var(--space-4) 14px;color:var(--mk-ink-2);font-size:.92rem}.ac-suggest .v-listbox-empty[hidden]{display:none}
/* 検索パネル（dialog。900px 以下は全画面）。背景クリックで閉じるため、.ac-panel-body が内側を全面覆う */
.ac-panel{width:min(680px,100%);max-width:100%;padding:0;border:1px solid var(--mk-line-strong);border-radius:var(--radius);background:var(--mk-bg);color:var(--mk-ink);margin-top:12vh}
.ac-panel::backdrop{background:#121a23b3}
.ac-panel-body{padding:20px;display:grid;gap:var(--space-3)}
.ac-panel .ac-search{width:100%;height:50px}
.ac-panel .ac-search:focus-within{width:100%}
.ac-panel-foot{display:flex;gap:var(--space-4);margin:0;font-size:.76rem;color:var(--mk-muted)}
.ac-panel kbd{font-family:var(--font-mono);font-size:.7rem;border:1px solid var(--mk-line-control);border-radius:var(--radius-sm);padding:.15em .5em}
.ac-panel-close{justify-self:end;min-height:44px;padding:0 1.2em;border:1px solid var(--mk-line-control);border-radius:var(--radius-sm);background:none;color:inherit;font:inherit;font-size:.9rem;cursor:pointer}
.ac-panel-close:hover{border-color:var(--mk-ink);background:var(--mk-hover)}
@media (max-width:900px){.ac-panel{width:100%;height:100%;max-height:100%;margin:0;border-radius:0;border:0}}
/* フッター */
.ac-footer{background:var(--mk-bg);color:var(--mk-muted);font-size:.8rem;padding:22px 0;border-top:1px solid var(--mk-line)}
.ac-footer-in{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;width:min(100% - 40px,var(--mk-wrap));margin:0 auto}
.ac-footer a{color:inherit;text-decoration:none;margin-left:var(--space-4)}.ac-footer a:hover{color:var(--mk-ink)}
/* モバイルバー（900px 以下）。右端は常に「相談する」 */
.ac-mbar{display:none}
@media (max-width:600px){.ac-logo .ac-lg-full{display:none}.ac-logo .ac-lg-mark{display:block}}
@media (max-width:900px){
  .ac-nav,.ac-search{display:none}.ac-search-open{display:inline-flex}
  .ac-panel .ac-search{display:flex}
  .ac-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .ac-mbar{position:fixed;inset:auto 0 0 0;z-index:var(--z-fixed);display:grid;grid-template-columns:repeat(4,1fr);background:var(--mk-bg);border-top:1px solid var(--mk-line);padding-bottom:env(safe-area-inset-bottom)}
  .ac-mbar a{display:flex;align-items:center;justify-content:center;min-height:48px;padding:15px 0;font-size:.76rem;color:var(--mk-ink-2);text-decoration:none}
  .ac-mbar a[aria-current]{color:var(--mk-ink);font-weight:700;box-shadow:inset 0 2px var(--mk-accent)}
  .ac-mbar .ac-mbar-go{background:var(--mk-accent);color:var(--mk-on-accent);font-weight:500}
}

/* トップ（MarketingHero / AskList / ServicePanel / ProcessSteps / ProofColumns / ProfileBlock / Faq）。案Q: 白と墨、罫線で区切る。面・影・グラデーション・丸は使わない */
.ac-hero{padding:clamp(32px,6vw,80px) 0 clamp(48px,7vw,88px);border-bottom:1px solid var(--mk-ink)}
.ac-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:end}
.ac-hero-h{font-size:clamp(1.55rem,1rem + 1.9vw,2.5rem);line-height:1.6;letter-spacing:.01em;font-weight:var(--ac-w-bold);margin:0;text-wrap:balance;word-break:auto-phrase;overflow-wrap:anywhere}
.ac-hero-sub{margin:1.4em 0 0;max-width:34em;color:var(--mk-ink-2);line-height:2}
.ac-hero-note{margin:.9em 0 0;max-width:36em;font-size:.86rem;line-height:1.9;color:var(--mk-muted)}
.ac-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:2em 0 0}
/* 新着記事（右の列）。日付と題だけの短い一覧 */
.ac-latest h2{font-size:.84rem;font-weight:var(--ac-w-bold);color:var(--mk-muted);margin:0;padding-bottom:10px;border-bottom:1px solid var(--mk-ink)}
.ac-lt-empty{margin:0;padding:14px 0;border-bottom:1px solid var(--mk-line);font-size:.94rem;color:var(--mk-ink-2)}
.ac-lt{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--mk-line);color:inherit;text-decoration:none}
.ac-lt time{font-size:.84rem;color:var(--mk-muted);font-variant-numeric:tabular-nums}
.ac-lt b{font-size:.98rem;font-weight:500;line-height:1.65;transition:color .2s}
.ac-lt:hover b{color:var(--mk-accent-text)}
.ac-tlink{display:inline-flex;align-items:center;gap:.4em;margin-top:14px;color:var(--mk-accent-text);font-weight:500;font-size:.94rem;text-decoration:none}
.ac-tlink:hover{text-decoration:underline;text-underline-offset:.3em}
@media (max-width:900px){.ac-hero-grid{grid-template-columns:1fr;align-items:start}}
/* 冒頭の演出: ロゴの A・O が英単語に開く（デザインシステム MarketingHero）。ロゴの画像は変形せず、文字で組む。
   組と組のあいだは、文字が消えながら幅が次の語へ動く。止める操作（.aom-pause）あり。画面外・裏のタブでは JS が時間を止め、動きを減らす設定では最初の組で止める */
.aom{--io:var(--ease-io);padding-bottom:clamp(16px,2.6vw,28px);margin-bottom:clamp(24px,3.6vw,40px);border-bottom:1px solid var(--mk-line)}
.aom-words{position:relative;display:flex;align-items:baseline;white-space:nowrap;font-family:var(--font-sans);font-weight:500;font-size:clamp(1.6rem,6.4vw,5.4rem);line-height:1.12;letter-spacing:-.03em;color:var(--mk-ink)}
.aom-s{display:inline-flex;overflow:hidden;width:0;transition:width 1.05s var(--io)}
.aom-gap{display:inline-flex;justify-content:center;align-self:center;overflow:hidden;width:.42em;transition:width 1.05s var(--io)}
.aom-x{display:inline-block;font-style:normal;font-weight:300;font-size:.5em;line-height:1;color:var(--mk-quiet);opacity:0;transform:scale(.4) rotate(-90deg);transition:opacity .4s ease,transform .7s var(--io)}
.aom.x-on .aom-x{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .9s var(--ease-out) .2s}
.aom-o{display:inline-grid;align-items:baseline;justify-items:start;transition:width 1.05s var(--io),margin-left 1.05s var(--io)}
.aom-o>b{grid-area:1/1;font-weight:inherit;transform-origin:0 80%;transition:opacity .55s ease,transform 1.05s var(--io)}
.aom-o .lo{opacity:0;transform:scale(1.45)}
.aom.brand .aom-o b:first-child{opacity:0;transform:scale(.69)}
.aom.brand .aom-o .lo{opacity:1;transform:none}
.aom-t{flex:none;display:inline-flex;color:var(--mk-quiet);transition:color .9s ease}
.aom.brand .aom-t{color:var(--mk-ink)}
.aom-t i,.aom-meas i{display:inline-block;font-style:normal}
.aom-t i{opacity:0;transform:translateY(.18em);filter:blur(5px);transition:opacity .3s ease,transform .35s ease,filter .3s ease}
.aom-t.show i{opacity:1;transform:none;filter:blur(0);transition:opacity .55s ease,transform .7s var(--ease-out),filter .55s ease;transition-delay:calc(120ms + var(--i) * 28ms)}
.aom-dot{display:inline-block;flex:none;width:.23em;height:.23em;border-radius:50%;background:var(--mk-accent);margin-left:.05em}
.aom-meas{position:absolute;left:0;top:0;display:inline-flex;visibility:hidden;pointer-events:none;white-space:pre}.aom-plain{display:inline}
.aom-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:.9em}
.aom-ja{font-size:clamp(.88rem,.84rem + .3vw,1.05rem);letter-spacing:.06em;line-height:1.6;color:var(--mk-muted);min-height:1.6em;opacity:0;transform:translateY(4px);transition:opacity .3s ease,transform .4s ease}
.aom-ja.show{opacity:1;transform:none;transition:opacity .7s ease .3s,transform .8s var(--ease-out) .3s}
.aom-pause{flex:none;display:inline-flex;align-items:center;gap:.4em;min-height:36px;padding:0 .85em;border:1px solid var(--mk-line-control);border-radius:var(--radius-sm);background:none;color:var(--mk-ink-2);font-size:.78rem;font-family:inherit;cursor:pointer;transition:color .2s,border-color .2s}
.aom-pause:hover{color:var(--mk-ink);border-color:var(--mk-ink)}
.aom-pause[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.aom-x,.aom-s,.aom-gap,.aom-o,.aom-o>b,.aom-t,.aom-t i,.aom-ja{transition:none!important}}
.ac-sec+.ac-sec{border-top:1px solid var(--mk-line)}
/* AskList */
.ac-asks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,4vw,56px);border-top:1px solid var(--mk-line)}
.ac-asks li{display:flex;gap:.8em;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--mk-line);line-height:1.7}
.ac-asks svg{flex:none;color:var(--mk-accent);translate:0 .15em}
/* ServicePanel: 枠なし。縦の罫線で区切る */
.ac-panels{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.ac-svc{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:4px clamp(16px,2.4vw,32px) 8px;border-left:1px solid var(--mk-line)}
.ac-svc:first-child{border-left:0;padding-left:0}
.ac-svc small{font-size:.8rem;letter-spacing:.04em;color:var(--mk-muted)}
.ac-svc h3{font-size:1.4rem;font-weight:var(--ac-w-bold);line-height:1.35;margin:0}
.ac-svc>p{font-size:.94rem;line-height:1.9;margin:0;color:var(--mk-ink-2)}
.ac-svc dl{margin:0 0 6px;width:100%;display:grid;grid-template-columns:5.2em 1fr;font-size:.88rem;border-top:1px solid var(--mk-line)}
.ac-svc dt,.ac-svc dd{margin:0;padding:10px 0;border-bottom:1px solid var(--mk-line);line-height:1.7}.ac-svc dt{color:var(--mk-muted)}
.ac-svc .ac-btn{margin-top:auto}
/* ProcessSteps */
.ac-steps{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.ac-steps li{counter-increment:s;border-top:1px solid var(--mk-ink);padding-top:14px}
.ac-steps li::before{content:counter(s);display:block;font-size:.84rem;color:var(--mk-accent-text);font-weight:700;margin-bottom:6px;font-variant-numeric:tabular-nums}
.ac-steps b{font-size:1.08rem}.ac-steps p{margin:.4em 0 0;color:var(--mk-ink-2);font-size:.92rem;line-height:1.85}
.ac-fee{margin:var(--space-6) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;color:var(--mk-ink-2)}
/* ProofColumns */
.ac-proofs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,3vw,40px);margin-top:var(--space-5)}
.ac-proofs>div{border-top:1px solid var(--mk-ink);padding-top:var(--space-4)}
.ac-proofs h3{font-size:1.06rem;font-weight:var(--ac-w-bold);margin:0}.ac-proofs p{margin:.5em 0 0;color:var(--mk-ink-2);font-size:.93rem;line-height:1.9}
/* ProfileBlock */
.ac-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,88px)}
.ac-who{display:flex;gap:var(--space-4);align-items:center;margin-top:20px}
.ac-photo{flex:none;width:76px;height:76px;border-radius:var(--radius);background:var(--mk-box);border:1px solid var(--mk-line-strong);display:grid;place-items:center;font-size:.74rem;color:var(--mk-ink-2)}
.ac-who b{display:block;font-size:1.15rem}.ac-who span{font-size:.86rem;color:var(--mk-ink-2)}
.ac-bio{margin-top:var(--space-4);line-height:2;color:var(--mk-ink-2);font-size:.96rem}
.ac-co-name{margin:20px 0 0;font-family:var(--font-sans);font-weight:500;font-size:1.25rem;letter-spacing:.01em;padding-bottom:12px}
.ac-co{margin:0;display:grid;grid-template-columns:6em 1fr;font-size:.94rem;border-top:1px solid var(--mk-line)}
.ac-co dt,.ac-co dd{margin:0;padding:13px 0;border-bottom:1px solid var(--mk-line);line-height:1.8}.ac-co dt{color:var(--mk-muted)}
/* Faq */
.ac-faq{max-width:820px;border-top:1px solid var(--mk-line)}
.ac-faq details{border-bottom:1px solid var(--mk-line);padding:18px 0}
.ac-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;font-weight:var(--ac-w-bold);line-height:1.7}
.ac-faq summary::-webkit-details-marker{display:none}
.ac-faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--mk-accent);border-bottom:2px solid var(--mk-accent);rotate:45deg;margin-top:.45em;transition:rotate .3s var(--ease-out)}
.ac-faq details[open] summary::after{rotate:225deg}
.ac-faq p{margin:.8em 0 0;color:var(--mk-ink-2);line-height:2;max-width:40em}
/* お問い合わせ */
.ac-closing{padding-block:clamp(64px,10vw,140px);border-top:1px solid var(--mk-ink)}
.ac-mailline{color:var(--mk-ink-2);margin:var(--space-3) 0 0}
@media (max-width:900px){.ac-asks,.ac-proofs,.ac-two{grid-template-columns:1fr}.ac-panels{grid-template-columns:1fr}.ac-svc{border-left:0;padding:20px 0;border-top:1px solid var(--mk-line)}.ac-svc:first-child{border-top:0;padding-top:0}.ac-steps{grid-template-columns:1fr}}