@charset "UTF-8";
/* ===========================================================
   AiBou - English guides stylesheet
   Deploy to: https://aibou365.jp/en/guides/article.css
   Shares the design tokens used by /en/index.html.
   =========================================================== */

:root{
  --ink:#1A1815;
  --ink-2:#2A2724;
  --ink-60:#6B6862;
  --ink-35:#A5A19A;
  --panel:#F4F0EC;
  --rule:#E3DFD9;
  --rule-dark:#3A3633;
  --orange:#F48121;
  --white:#FFFFFF;
  --wrap:1080px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.num{font-family:"M PLUS 1 Code",ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:500;font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ---------- header (identical to /en/index.html) ---------- */
.site-head{background:var(--ink);color:var(--white);position:relative;z-index:30}
.head-in{display:flex;align-items:center;gap:28px;height:72px}
.head-logo{display:flex;align-items:center;flex:0 0 auto}
.head-logo img{height:26px;width:auto}
.head-nav{order:2;margin-left:auto;display:flex;align-items:center;gap:26px}
.head-nav a{
  color:rgba(255,255,255,.78);text-decoration:none;font-size:.9375rem;
  padding:6px 0;border-bottom:1px solid transparent;transition:color .15s,border-color .15s;
}
.head-nav a:hover{color:var(--white);border-bottom-color:var(--orange)}
.head-cta{
  order:3;background:var(--orange);color:var(--ink);text-decoration:none;font-weight:600;
  font-size:.9375rem;padding:9px 18px;border-radius:2px;white-space:nowrap;
}
.head-cta:hover{background:#ff8f2e}
.head-toggle{order:4;display:none}
.cta-min{display:none}

/* ---------- article shell ---------- */
.article{padding:clamp(40px,6vw,72px) 0 clamp(56px,8vw,96px)}
.crumb{font-size:.875rem;color:var(--ink-35);margin-bottom:26px}
.crumb a{color:var(--ink-60);text-decoration:none}
.crumb a:hover{color:var(--orange)}
.crumb span{color:var(--ink-35)}

.article h1{
  margin:0;font-weight:600;letter-spacing:-0.03em;line-height:1.08;
  font-size:clamp(2rem,4.6vw,3.25rem);max-width:20ch;
}
.article-meta{
  color:var(--ink-35);font-size:.875rem;margin:18px 0 0;
  padding-bottom:26px;border-bottom:1px solid var(--rule);
}
.article-lede{
  font-size:1.125rem;color:var(--ink-60);max-width:64ch;margin:26px 0 0;
}

/* ---------- table of contents ---------- */
.toc{
  margin:36px 0 0;padding:22px 26px;background:var(--panel);
  border-left:2px solid var(--orange);border-radius:2px;max-width:64ch;
}
.toc h2{font-size:.9375rem;margin:0 0 12px;font-weight:600;letter-spacing:0}
.toc ol{margin:0;padding-left:20px}
.toc li{font-size:.9375rem;line-height:1.5;padding:3px 0}
.toc a{color:var(--ink-60);text-decoration:none}
.toc a:hover{color:var(--orange)}

/* ---------- body ---------- */
.article-body{max-width:68ch;margin-top:clamp(40px,5vw,60px)}

.article-body h2{
  font-size:clamp(1.5rem,2.7vw,2.05rem);font-weight:600;letter-spacing:-0.022em;
  line-height:1.2;margin:clamp(48px,6vw,72px) 0 1rem;
  padding-top:26px;border-top:1px solid var(--rule);
}
.article-body h2:first-child{margin-top:0;padding-top:0;border-top:0}

.article-body h3{
  font-size:1.1875rem;font-weight:600;letter-spacing:-0.012em;line-height:1.35;
  margin:2.2rem 0 .7rem;
}

.article-body p{margin:0 0 1.15em;color:var(--ink-2)}

/* the direct answer that opens each H2: the AI-extractable sentence */
.article-body h2 + p{
  font-size:1.0938rem;color:var(--ink);font-weight:500;
  border-left:2px solid var(--orange);padding-left:18px;margin-left:-20px;
}

.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:22px}
.article-body li{margin-bottom:.5em;color:var(--ink-2);line-height:1.6}
.article-body li::marker{color:var(--orange)}

.article-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:3px;text-decoration-thickness:1.5px}
.article-body a:hover{color:var(--orange)}

.article-body strong{font-weight:600;color:var(--ink)}

.article-body blockquote{
  margin:1.8em 0;padding:18px 24px;background:var(--panel);
  border-radius:2px;color:var(--ink-60);font-size:.9688rem;
}
.article-body blockquote p:last-child{margin-bottom:0}

.article-body table{
  width:100%;border-collapse:collapse;margin:1.8em 0;font-size:.9375rem;
}
.article-body th,.article-body td{
  text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top;
}
.article-body th{
  font-weight:600;color:var(--ink);border-bottom:1px solid var(--ink);
  font-size:.875rem;
}
.article-body td{color:var(--ink-60)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---------- mid-article CTA ---------- */
.article-cta{
  margin:clamp(48px,6vw,72px) 0;padding:30px 32px;
  background:var(--ink);color:var(--white);border-radius:2px;
}
.article-cta p{color:rgba(255,255,255,.78);margin:0 0 18px;font-size:1rem}
.article-cta a{
  display:inline-block;background:var(--orange);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:.9375rem;padding:13px 24px;border-radius:2px;
}
.article-cta a:hover{background:#ff8f2e}

/* ---------- FAQ ---------- */
.article-body h2#faq + p{border-left:0;padding-left:0;margin-left:0;font-weight:400;font-size:1.0625rem;color:var(--ink-2)}
.article-body h2#faq ~ h3{
  font-size:1.0625rem;font-weight:600;color:var(--ink);
  margin:1.9rem 0 .55rem;letter-spacing:-0.01em;line-height:1.4;
}
.article-body h2#faq ~ p{margin-bottom:0}

/* ---------- related ---------- */
.related{border-top:1px solid var(--rule);margin-top:clamp(56px,7vw,84px);padding-top:34px;max-width:68ch}
.related h2{font-size:1.25rem;margin:0 0 18px;font-weight:600}
.related ul{list-style:none;margin:0;padding:0}
.related li{padding:14px 0;border-bottom:1px solid var(--rule)}
.related li:last-child{border-bottom:0}
.related a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1rem;line-height:1.4}
.related a:hover{color:var(--orange)}
.related p{margin:4px 0 0;color:var(--ink-60);font-size:.9375rem}

/* ---------- closing CTA ---------- */
.closing{background:var(--panel);padding:clamp(52px,7vw,84px) 0;margin-top:clamp(56px,7vw,84px)}
.closing h2{font-size:clamp(1.6rem,3vw,2.25rem);font-weight:600;letter-spacing:-0.022em;margin:0 0 1rem;max-width:22ch;line-height:1.15}
.closing p{color:var(--ink-60);max-width:60ch;margin:0 0 26px}
.closing a{
  display:inline-block;background:var(--orange);color:var(--ink);text-decoration:none;
  font-weight:600;font-size:1rem;padding:15px 28px;border-radius:2px;
}
.closing a:hover{background:#ff8f2e}

/* ---------- guides index ---------- */
.index-head{padding:clamp(48px,7vw,88px) 0 clamp(32px,4vw,48px)}
.index-head h1{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:600;letter-spacing:-0.03em;line-height:1.05;margin:0;max-width:18ch}
.index-head p{color:var(--ink-60);max-width:62ch;margin:1.4rem 0 0;font-size:1.0625rem}
.cat{border-top:1px solid var(--rule);padding:34px 0 8px}
.cat h2{font-size:1.35rem;font-weight:600;letter-spacing:-0.015em;margin:0 0 4px}
.cat > p{color:var(--ink-60);font-size:.9375rem;margin:0 0 20px;max-width:62ch}
.cat ul{list-style:none;margin:0;padding:0}
.cat li{padding:16px 0;border-bottom:1px solid var(--rule)}
.cat li:last-child{border-bottom:0}
.cat li a{color:var(--ink);text-decoration:none;font-weight:600;font-size:1.0625rem;line-height:1.4}
.cat li a:hover{color:var(--orange)}
.cat li p{margin:5px 0 0;color:var(--ink-60);font-size:.9375rem}
.cat li time{display:block;margin-top:6px;color:var(--ink-35);font-size:.8125rem}
.index-empty{color:var(--ink-35);font-size:.9375rem;padding:20px 0}

/* ---------- footer (identical to /en/index.html) ---------- */
.site-foot{background:var(--ink);color:rgba(255,255,255,.6);border-top:1px solid var(--rule-dark);padding:44px 0 40px;font-size:.9375rem}
.foot-in{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start}
.foot-logo img{height:24px;margin-bottom:14px}
.foot-links{display:flex;gap:44px;flex-wrap:wrap}
.foot-col h4{color:rgba(255,255,255,.9);font-size:.875rem;margin-bottom:12px}
.foot-col a{display:block;color:rgba(255,255,255,.6);text-decoration:none;padding:4px 0;font-size:.9375rem}
.foot-col a:hover{color:var(--orange)}
.copy{color:var(--ink-35);font-size:.8125rem;margin-top:34px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .head-in{gap:12px}
  .head-nav{
    display:none;position:absolute;top:72px;left:0;right:0;background:var(--ink);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 22px;
    border-top:1px solid var(--rule-dark);
  }
  .head-nav.on{display:flex}
  .head-nav a{padding:13px 0;border-bottom:1px solid var(--rule-dark)}
  .head-cta{margin-left:auto;padding:8px 14px;font-size:.875rem}
  .head-toggle{
    display:block;background:none;border:0;color:var(--white);
    font-size:1.5rem;line-height:1;cursor:pointer;padding:8px;font-family:inherit;
  }
}
@media (max-width:640px){
  body{font-size:16px}
  .article-body h2 + p{margin-left:0;padding-left:14px}
  .article-cta{padding:24px 22px}
  .toc{padding:18px 20px}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .head-logo img{height:21px}
  .head-in{gap:10px}
  .cta-min{display:inline}
  .head-cta{padding:8px 12px}
}
@media (max-width:520px){
  .cta-full{display:none}
}

@media print{
  .site-head,.site-foot,.article-cta,.closing,.related{display:none}
  .article-body{max-width:none}
}