/* =====================================================
   ブログ記事の共有スタイル（2026-08-14 共有化）
   それまで3記事が同じスタイルを各ページに複製しており、1本だけ差分が育っていた。
   このファイルが唯一の正本。記事側の <style> は使わず、これを <link> で読む。
   カード（ウィジェット）は .vg-widget 配下に自前のスタイルを持つので、ここでは触らない。
   ===================================================== */
:root{
    --blue:#1a6fe8; --blue-d:#0f4fa8; --ink:#1a1d22; --sub:#5b6472;
    --line:#e3e8f0; --bg:#fff; --soft:#f5f7fb; --warm:#e8503a; --mute:#8b94a3;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{
    background:var(--bg); color:var(--ink);
    font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,"Noto Sans JP",sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.9; font-size:17px;
  }
  a{color:var(--blue)}
  .wrap{max-width:760px;margin:0 auto;padding:0 22px}

  header.site{border-bottom:1px solid var(--line);padding:18px 0}
  header.site .wrap{display:flex;align-items:center;justify-content:space-between}
  .brand{display:block;line-height:0}
  .brand img{height:26px;width:auto;display:block}
  .navlink{font-size:14px;color:var(--sub);text-decoration:none;font-weight:600}

  .hero{padding:56px 0 8px}
  h1{font-size:35px;line-height:1.45;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
  .lede{font-size:18px;color:var(--sub);margin-top:20px;line-height:1.85}
  .meta{font-size:14px;color:var(--mute);margin-top:24px;padding-bottom:28px;border-bottom:1px solid var(--line)}

  article{padding:36px 0 0}
  h2{font-size:27px;font-weight:800;line-height:1.5;margin:64px 0 20px;letter-spacing:-.01em;text-wrap:balance;line-break:strict}
  h2 .nb{display:inline-block}
  h3{font-size:20px;font-weight:800;line-height:1.6;margin:44px 0 14px}
  p{margin:0 0 20px}
  strong{font-weight:800}
  .em{color:var(--blue);font-weight:800}
  ul,ol{margin:0 0 22px 1.4em}
  li{margin-bottom:9px}
  code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.93em;background:var(--soft);padding:2px 6px;border-radius:4px}

  figure{margin:34px 0}
  figure img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px}
  figcaption{font-size:13.5px;color:var(--mute);margin-top:10px;line-height:1.7}

  blockquote{
    margin:26px 0;padding:20px 24px;background:var(--soft);
    border-left:4px solid var(--blue);border-radius:0 6px 6px 0;
    font-size:17px;line-height:1.85;
  }
  blockquote p:last-child{margin-bottom:0}
  blockquote cite{display:block;font-size:13.5px;color:var(--mute);font-style:normal;margin-top:10px}

  .callout{
    margin:30px 0;padding:24px 26px;border:1px solid var(--line);
    border-radius:8px;background:#fbfcfe;
  }
  .callout p:last-child{margin-bottom:0}
  .callout .k{font-size:13px;font-weight:800;color:var(--blue);letter-spacing:.06em;display:block;margin-bottom:10px}

  .note{font-size:15px;color:var(--sub);line-height:1.8}

  .en-sample{
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
    font-size:30px;font-weight:600;text-align:center;
    padding:26px 16px;background:var(--soft);border-radius:8px;margin:26px 0;
    letter-spacing:-.01em;line-height:1.4;
  }
  .en-sample code{background:none;padding:0;font-size:inherit}
  .ja-sample{
    font-size:36px;font-weight:800;text-align:center;color:var(--blue);
    margin:26px 0;letter-spacing:.02em;line-height:1.4;
  }
  @media (max-width:640px){
    .en-sample{font-size:21px;padding:20px 12px}
    .ja-sample{font-size:26px}
  }

  .summary{background:var(--soft);border-radius:10px;padding:30px 32px;margin:48px 0}
  .summary h2{margin:0 0 18px;font-size:22px}
  .summary ul{margin-bottom:0}
  .summary li{margin-bottom:12px}

  .cta{border:1px solid var(--line);border-radius:10px;padding:30px 32px;margin:52px 0 0}
  .cta h3{margin:0 0 12px;font-size:19px}
  .cta p{font-size:16px;color:var(--sub);margin-bottom:16px}
  .btn{
    display:inline-block;background:var(--blue);color:#fff;text-decoration:none;
    font-weight:700;font-size:15.5px;padding:12px 24px;border-radius:7px;
  }

  .rel{border-top:1px solid var(--line);padding-top:36px;margin:56px 0 0}
  .rel .k{font-size:13px;font-weight:800;color:var(--sub);letter-spacing:.06em;display:block;margin-bottom:18px}
  .rel a.card{display:block;text-decoration:none;color:inherit;padding:20px 22px;border:1px solid var(--line);border-radius:8px;margin-bottom:12px;transition:border-color .15s}
  .rel a.card:hover{border-color:var(--blue)}
  .rel a.card strong{display:block;font-size:17px;line-height:1.6;font-weight:800;margin-bottom:6px}
  .rel a.card:hover strong{color:var(--blue)}
  .rel a.card span{display:block;font-size:14.5px;color:var(--sub);line-height:1.75}
  .rel a.all{display:inline-block;font-size:14.5px;font-weight:700;text-decoration:none;margin-top:8px}

  .refs{margin:56px 0 0;padding-top:32px;border-top:1px solid var(--line)}
  .refs h2{font-size:19px;margin:0 0 16px}
  .refs ol{font-size:14px;color:var(--sub);line-height:1.85;margin-left:1.3em}
  .refs li{margin-bottom:7px}

  footer.site{margin-top:64px;padding:32px 0 56px;border-top:1px solid var(--line);font-size:14px;color:var(--mute)}
  footer.site a{color:var(--sub);text-decoration:none;margin-right:18px}

  @media (max-width:640px){
    body{font-size:16px;line-height:1.85}
    h1{font-size:27px}
    h2{font-size:22px;margin:48px 0 16px}
    h3{font-size:18px}
    .hero{padding:36px 0 8px}
    .summary,.cta,.callout,.rel{padding:22px 20px}
  }

  /* 言語切替（LPヘッダーの lp-langsel と同型。配色だけ白ヘッダーに合わせる 2026-08-15） */
  .langsw{position:relative}
  .langsw-btn{background:var(--soft);color:var(--sub);border:1px solid var(--line);border-radius:999px;
    padding:5px 12px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
  .langsw-btn:hover{background:#eef2f9}
  .langsw-menu{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:#fff;border-radius:10px;
    box-shadow:0 12px 32px rgba(15,23,42,.28);overflow:hidden;z-index:60;min-width:130px}
  .langsw-menu a{display:block;text-align:start;padding:10px 14px;font-size:13px;color:#1e293b;text-decoration:none;white-space:nowrap}
  .langsw-menu a:hover{background:#f1f5f9}
  .langsw-menu a.on{font-weight:800;color:#3d5a80}