/** Shopify CDN: Minification failed

Line 460:4 Unexpected "}"

**/
    /* ==========================================
      全体のスタイル（ネストで一括管理）
    ========================================== */
    .article-page {
      display: flex;
      flex-direction: column;
      padding: var(--space-8rem) var(--space-4rem);
      align-items: center;
      color: var(--color-text-main);

      h1, h2, h3, h4, h5, h6, p, li, span, a, time, button, input, select, textarea {
        font-family: "Noto Sans JP", sans-serif;
      }

      @media (max-width: 1200px) {
        padding: var(--space-4rem);
      }

      /* 共通のインナー幅 */
      .inner {
        display: flex;
        gap: var(--space-5rem);
        max-width: 1400px;
        width: 100%;

        /* 1200px以下で綺麗に1カラム化（一覧側と同期） */
        @media (max-width: 1200px) {
          flex-direction: column;
        }
      }

      /* -------------------------------------------
         1. ページヘッダー
      ------------------------------------------- */
      header {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: .625rem;
        padding-bottom: var(--space-3rem);
        border-bottom: 2px solid var(--color-border);

        h1 {
          color: var(--color-text-dark);
          font-size: var(--space-2rem);
          font-weight: 700;
          line-height: 140%;
        }

        time {
          color: var(--color-text-muted);
          font-size: calc(var(--base-size) * 1);
          font-style: normal;
          font-weight: 400;
          line-height: 150%;
        }
      }

      /* -------------------------------------------
         2. 左側：メイン記事エリア
      ------------------------------------------- */
      article {
        max-width: 920px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--space-2rem);
      }

      /* 記事本文の装飾ルール */
      .post-body {
        &>*:not(:first-child) {
          margin-top: 1em;
        }

        p {
          color: var(--color-text-dark);
          font-size: calc(var(--base-size) * 1);
          line-height: 180%;
          white-space: normal;
        }

        /* ==========================================================================
          見出し（h1 - h6）共通スタイル
          ========================================================================== */
        h1, h2, h3, h4, h5, h6 {
          font-weight: 700;
          line-height: 140%;
        }

        /* ==========================================================================
          各見出しの個別スタイル
          ========================================================================== */
        h1 {
          font-size: calc(var(--base-size) * 2);
          color: var(--color-primary);
          width: fit-content;
          margin: .5em 0; /* 上下の余白 */
          padding: 0 0 0 1em; /* 左だけにパディング */
          border-left: .25em solid var(--color-primary);
        }

        h2 {
          font-size: calc(var(--base-size) * 1.75);
          width: 100%;
          display: flex;
          margin-bottom: 1rem;
          padding: .5em .9em;
          background: #ECFBFE;
          border-radius: .375em;
        }

        h3 {
          font-size: calc(var(--base-size) * 1.5);
          width: fit-content;
          margin-bottom: 1rem;
          padding: 0 0 .2em .75em; /* 下と左にパディング */
          border-left: .2em solid var(--color-primary);
        }

        h4 {
          font-size: calc(var(--base-size) * 1.25);
          width: fit-content;
          margin-bottom: 1rem;
          padding-bottom: .2em;
          border-bottom: .1em solid var(--color-border);
        }

        h5 {
          font-size: calc(var(--base-size) * 1.125);
          width: fit-content;
          margin-bottom: 1rem;
          padding-bottom: .2em;
        }

        h6 {
          font-size: calc(var(--base-size) + .0625rem);
          width: fit-content;
          margin-bottom: 1rem;
          padding-bottom: .2em;
        }

        ul,
        ol {
        font-size: calc(var(--base-size) * 1);
        padding: 1.125em;
        padding-left: 2.75em;
        background: #f9f9f9;
        line-height: 160%;

        li {
            display: list-item;
        }

        li:has(input[type="checkbox"]) {
            list-style-type: none;
        }

        &:has(input[type="checkbox"]) {
            padding-left: 1.5em;
        }

        ul,
        ol {
            padding: 0 1.125em 0 1.375em;
            background: transparent;
        }
        }

        ul {
          list-style-type: disc;
        }

        ol {
          list-style-type: decimal;
        }

        code {
            color: var(--color-white);
            background: #111111;
            padding: 0.2em 0.4em;
            margin: 0 .2em;
            border-radius: 4px;
            font-size: 0.875em;
            font-weight: 700;
        }

        pre {
        padding: 1em;
        background: #555;
        color: var(--color-white);
        overflow-x: auto;

            code {
                color: inherit;
                background: none;
                padding: 0;
                margin: 0;
                border-radius: 0;
                font-size: inherit;
                font-weight: inherit;
            }
        }

        table {
          width: 100%;
          border-collapse: collapse;
          line-height: 1.4;
          font-size: calc(var(--base-size) * 0.875);

          /* 重複していた不要なth指定をマージして綺麗に */
          th {
            padding: 1.5em 1em;
            background: var(--color-primary);
            color: var(--color-white);
            font-weight: 700;
            text-align: left;
          }

          th,
          td {
            border: 1px solid var(--color-border);
          }

          td {
            padding: 1em;
            color: var(--color-text-main);
            background: var(--color-white);
          }

          /* 【バグ修正】スマホ時の横スクロールをtable単体に正しく適用 */
          @media (max-width: 768px) {
            display: block;
            overflow-x: auto;
            white-space: nowrap;
          }
        }

        strong,
        b {
          font-weight: 700;
          color: var(--color-text-dark);
        }

        a {
          color: var(--color-primary);
          text-decoration: underline;
          transition: opacity 0.3s;

          &:hover {
            opacity: 0.7;
            text-decoration: none;
          }
        }

        blockquote {
          border-left: .25em solid var(--color-primary);
          background: #ECFBFE;
          padding: 1.125em;
          margin-left: 0;
          margin-bottom: var(--space-1_5rem);
          font-style: italic;
          color: #666;
        }
      }

      /* -------------------------------------------
         3. 右側：サイドバー（1つ目と完全同期）
      ------------------------------------------- */
        aside {
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        flex: 1;
        gap: var(--space-4rem);
        padding-bottom: var(--space-4rem);

        @media (max-width: 1200px) {
          width: 100%;
        }

        h2 {
          width: fit-content;
          padding-bottom: .25em;
          border-bottom: .125em solid var(--color-primary);
          color: var(--color-primary);
          font-size: var(--space-1_5rem);
          font-weight: 700;
          line-height: 140%;
          margin: 0;
        }

        .card {
          display: flex;
          flex-direction: row;
          gap: 1.25em;
          padding: 1.25em 0;
          border-bottom: 1px solid var(--color-border);

          &:first-of-type {
            padding-top: calc(var(--base-size) * 2);
          }

          &:last-child {
            padding-bottom: 0;
            border-bottom: 0;
          }

          &:hover {
            opacity: 0.7;
            transition: opacity 0.4s ease;
          }

          .thumbnail {
            width: calc(var(--base-size) * 10);
            flex-shrink: 0;

            img,
            svg {
              width: 100%;
              height: auto;
              display: block;
            }

            @media (max-width: 1400px) {
              display: none;
            }

            @media (max-width: 1200px) {
              display: block;
            }

            @media (max-width: 600px) {
              display: none;
            }
          }

          .body {
            display: flex;
            flex-direction: column;

            h3 {
              color: var(--color-text-main);
              font-size: calc(var(--base-size) * 1);
              font-weight: 700;
              line-height: 140%;
              margin: 0;

              @media (max-width: 1200px) {
                font-size: calc(var(--base-size) * 1.25);
              }
            }

            time {
              color: var(--color-text-muted);
              font-size: calc(var(--base-size) * 0.875);
              margin-top: 0.5em;
            }
          }
        }
      }

      /* -------------------------------------------
         4. タグエリア
      ------------------------------------------- */
      .tags {
        display: flex;
        flex-direction: column;
        gap: var(--space-1_5rem);

        h2 {
          color: var(--color-primary);
          font-size: var(--space-1_5rem);
          font-weight: 700;
          line-height: 140%;
        }

        ul {
          display: flex;
          align-items: center;
          gap: 0.625rem;
          flex-wrap: wrap;
          margin: 0;
          padding: 0;
        }

        li {
          display: flex;
          padding: .5em 1em;
          justify-content: center;
          align-items: center;
          border-radius: .5em;
          border: 1px solid var(--color-primary);
          color: var(--color-primary);
          font-size: calc(var(--base-size) * 0.875);
          font-weight: 700;
          line-height: 140%;
          cursor: pointer;
        }
      }

      /* -------------------------------------------
         5. フッター（記事ナビ・ボタン）
      ------------------------------------------- */
      footer {
        display: flex;
        flex-direction: column;
        gap: var(--space-3rem);
        width: 100%;

        .nav {
          display: flex;
          margin-top: var(--space-4rem);
          justify-content: space-between;
          border-bottom: 2px solid var(--color-border);

          .prev,
          .next {
            display: flex;
            padding: 1em;
            justify-content: flex-end;
            align-items: center;
            gap: 1em;
            font-size: calc(var(--base-size) * 1.125);
          }

          a {
            color: var(--color-text-main);
            white-space: nowrap;
          }
        }
         .back {
            align-self: center;
            display: flex;
            padding: .5em 2em;
            font-size: calc(var(--base-size) * 1.25);
            font-weight: 700;
            border-radius: 1.25em;
            background: var(--color-primary);
            color: var(--color-white);
          }
        .back-top {
            align-self: center;
            text-align: center;
            display: flex;
            padding: .8em 2em;
            font-size: calc(var(--base-size) * 1.25);
            font-weight: 700;
            border-radius: 4em;
            background: #fe9322;
            color: var(--color-white);
          }
        }
      }
    }