/* IPE Media Gutenberg article CSS
   Scope: .ipe-blog / .ipe-blog--gutenberg
   Prototype page-shell styles intentionally remain in the HTML file. */

/* ==========================================================
   01. Gutenberg article CSS
   - 本文デザインは .ipe-blog の内側だけに閉じ込める
   - 既存テーマの本文CSS・投稿本文inline styleには依存しない
   ========================================================== */
      .ipe-blog {
        --ipe-brand: #2aa0d0;
        --ipe-blue: #007bad;
        --ipe-cta: #00648f;
        --ipe-dark: #263746;
        --ipe-blue-soft: #f1f8fb;
        --ipe-border: #d6e5ec;
        --ipe-text: #333b42;
        --ipe-muted: #66737d;
        color: var(--ipe-text);
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP",
          "Yu Gothic", sans-serif;
        line-height: 1.8;
      }
      .ipe-blog,
      .ipe-blog * {
        box-sizing: border-box;
      }
.ipe-blog img {
        max-width: 100%;
        height: auto;
      }
      .ipe-blog a {
        color: var(--ipe-blue);
      }
      /* ==========================================================
   02. Article body / header area
   - 記事タイトル、カテゴリ、日付、メイン画像
   - .ipe-blog 配下が今回の本文デザインレビュー対象
   ========================================================== */
      .ipe-blog .article-meta {
        display: flex;
        gap: 10px 16px;
        flex-wrap: wrap;
        margin-bottom: 14px;
        color: var(--ipe-muted);
        font-size: 13px;
      }
      .ipe-blog .article-tag {
        padding: 3px 10px;
        border-radius: 999px;
        background: var(--ipe-blue-soft);
        color: var(--ipe-blue);
        font-weight: 700;
      }
      .ipe-blog h1 {
        margin: 0 0 24px;
        font-size: 34px;
        line-height: 1.45;
        color: #20282e;
      }
      .ipe-blog .article-hero {
        margin: 0 0 26px;
      }
      .ipe-blog p {
        margin: 0 0 20px;
      }
      .ipe-blog ul,
      .ipe-blog ol {
        margin-top: 0;
        margin-bottom: 20px;
      }

      /* --- 記事上部：監修者プロフィール --- */
      .ipe-blog .supervisor-profile {
        margin: 26px 0;
        padding: 18px;
        border: 1px solid var(--ipe-border);
        background: #fff;
      }
      .ipe-blog .supervisor-profile__eyebrow,
      .ipe-blog .supervisor-detail__heading {
        margin: 0 0 12px !important;
        padding-left: 10px;
        border-left: 4px solid var(--ipe-brand);
        color: var(--ipe-blue);
        font-size: 14px;
        line-height: 1.5;
        font-weight: 700;
      }
      .ipe-blog .supervisor-profile__body {
        display: flex;
        align-items: flex-start;
        gap: 16px;
      }
      .ipe-blog .supervisor-profile__image,
      .ipe-blog .supervisor-detail__image {
        border: 2px solid var(--ipe-border);
        border-radius: 50%;
        object-fit: cover;
      }
      .ipe-blog .supervisor-profile__image {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
      }
      .ipe-blog .supervisor-profile__name,
      .ipe-blog .supervisor-detail__name {
        margin: 0 0 4px !important;
        color: var(--ipe-dark);
        font-size: 20px;
        line-height: 1.45;
        font-weight: 700;
      }
      .ipe-blog .supervisor-profile__name span {
        display: block;
        color: var(--ipe-muted);
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;
      }
      .ipe-blog .supervisor-profile__text,
      .ipe-blog .supervisor-detail__body {
        margin: 0 !important;
        color: var(--ipe-text);
        font-size: 14px;
        line-height: 1.8;
      }

      /* --- 記事末：監修者詳細プロフィール --- */
      .ipe-blog .supervisor-detail {
        margin: 44px 0;
        padding: 26px;
        border: 1px solid var(--ipe-border);
        border-radius: 12px;
        background: #fff;
      }
      .ipe-blog .supervisor-detail__heading {
        margin-bottom: 20px !important;
      }
      .ipe-blog .supervisor-detail__card {
        padding: 0;
      }
      .ipe-blog .supervisor-detail__profile {
        display: flex;
        align-items: flex-start;
        gap: 20px;
      }
      .ipe-blog .supervisor-detail__image {
        flex: 0 0 104px;
        width: 104px;
        height: 104px;
      }
      .ipe-blog .supervisor-detail__meta {
        min-width: 0;
        flex: 1;
      }
      .ipe-blog .supervisor-detail__name {
        margin-bottom: 4px !important;
      }
      .ipe-blog .supervisor-detail__name span {
        margin-left: 8px;
        color: var(--ipe-muted);
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.04em;
      }
      .ipe-blog .supervisor-detail__position {
        margin: 0;
        color: var(--ipe-muted);
        font-size: 14px;
        line-height: 1.6;
        font-weight: 500;
      }
      .ipe-blog .supervisor-detail__social {
        display: flex;
        align-items: center;
        margin-top: 10px;
      }
      .ipe-blog .supervisor-detail__social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        color: var(--ipe-dark);
      }
      .ipe-blog .supervisor-detail__social-link:hover {
        color: var(--ipe-blue);
      }
      .ipe-blog .supervisor-detail__social-link svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
      }
      .ipe-blog .supervisor-detail__body {
        margin: 16px 0 0 !important;
      }
      .ipe-blog .supervisor-detail__link {
        display: inline-flex;
        align-items: center;
        margin-top: 16px;
        color: var(--ipe-blue);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
      }
      .ipe-blog .supervisor-detail__link::after {
        margin-left: 8px;
        content: "→";
      }
      .ipe-blog .supervisor-detail__link:hover {
        text-decoration: underline;
      }

      /* --- 記事本文：H2 / H3 / 画像 --- */
      .ipe-blog h2 {
        scroll-margin-top: 90px;
        margin: 48px 0 20px;
        padding: 12px 15px 12px 18px;
        border-left: 6px solid var(--ipe-brand);
        background: #ffffff;
        font-size: 22px;
        line-height: 1.5;
        color: #30373d;
      }
      .ipe-blog h3 {
        scroll-margin-top: 90px;
        margin: 32px 0 14px;
        padding-left: 12px;
        border-left: 4px solid var(--ipe-brand);
        font-size: 17px;
        line-height: 1.55;
        color: #30373d;
      }
      .ipe-blog .article-image {
        margin: 28px 0;
        text-align: center;
      }
      .ipe-blog .article-image img {
        display: block;
        margin: auto;
      }
      .ipe-blog .article-body > figure,
      .ipe-blog .article-body > p > img,
      .ipe-blog .article-body .wp-block-image {
        display: block;
        margin-top: 32px;
        margin-bottom: 32px;
      }
      .ipe-blog .article-body > p:has(> img) {
        margin-bottom: 0;
      }

      /* --- 追加パーツ：見出し＋テキストBOX --- */
      .ipe-blog .info-box {
        margin: 28px 0;
        padding: 24px 26px;
        border: 3px solid var(--ipe-blue);
        border-radius: 0;
        background: #fff;
      }
      .ipe-blog .info-box--knowledge {
        border-width: 1px;
        border-color: var(--ipe-brand);
        border-radius: 4px;
      }
      .ipe-blog .info-box--knowledge .info-box__title {
        color: var(--ipe-brand);
      }
      .ipe-blog .info-box__title {
        margin: 0 0 14px !important;
        padding: 0;
        color: var(--ipe-cta);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
      }
      .ipe-blog .info-box__body {
        padding: 0;
        color: var(--ipe-dark);
        line-height: 1.8;
      }
      .ipe-blog .info-box__body p {
        margin: 0 0 10px;
      }
      .ipe-blog .info-box__body ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .ipe-blog .info-box__body li {
        position: relative;
        padding-left: 2em;
        font-weight: 500;
        line-height: 1.8;
      }
      .ipe-blog .info-box__body li + li {
        margin-top: 8px;
      }
      .ipe-blog .info-box__body li::before {
        content: "";
        position: absolute;
        top: 0.9em;
        left: 0.5em;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--ipe-blue);
        transform: translateY(-50%);
      }
      .ipe-blog .info-box__body > :last-child {
        margin-bottom: 0;
      }

      /* --- 追加パーツ：目次 --- */
      .ipe-blog .toc {
        margin: 30px 0;
        padding: 22px 26px;
        border: 1px solid var(--ipe-border);
        border-radius: 8px;
        background: #fafcfd;
      }
      .ipe-blog .toc__title {
        margin: 0 0 12px !important;
        font-weight: 700;
        font-size: 18px;
        color: var(--ipe-dark);
      }
      .ipe-blog .toc ol {
        margin: 0;
        padding: 0;
        margin-bottom: 0;
        list-style: none;
      }
      .ipe-blog .toc li {
        padding: 6px 4px;
        border-bottom: 1px solid var(--ipe-border);
        font-size: 15px;
      }
      .ipe-blog .toc li:last-child {
        border-bottom: 0;
      }
      .ipe-blog .toc a {
        color: var(--ipe-blue);
        text-decoration: none;
      }
      .ipe-blog .toc a:hover {
        text-decoration: underline;
      }

      /* --- 追加パーツ：H2配下のH3ジャンプBOX --- */
      .ipe-blog .jump-box {
        margin: 22px 0 28px;
        padding: 18px 22px;
        border: 1px solid var(--ipe-border);
        border-radius: 8px;
        background: #f7fafc;
      }
      .ipe-blog .jump-box ul {
        margin-top: 0;
        margin-bottom: 0;
      }

      /* --- 記事本文：標準テーブル / 事例表 --- */
      .ipe-blog .data-table {
        width: 100%;
        margin: 24px 0 28px;
        border-collapse: collapse;
        font-size: 14px;
        background: #ffffff;
      }
      .ipe-blog .data-table th,
      .ipe-blog .data-table td {
        padding: 11px 12px;
        border: 1px solid var(--ipe-border);
        text-align: left;
        vertical-align: top;
      }
      .ipe-blog .data-table th,
      .ipe-blog .data-table thead td {
        background: var(--ipe-blue-soft);
        font-weight: 700;
      }

      /* --- 追加パーツ：事例紹介 --- */
      .ipe-blog .case-study {
        margin: 32px 0 40px;
        padding: 24px;
        position: relative;
        border-right: 4px solid #dfe5e8;
        border-bottom: 4px solid #dfe5e8;
        border-left: 4px solid #dfe5e8;
        background: #fff;
      }
      .ipe-blog .case-study::before {
        position: absolute;
        top: -5px;
        right: -4px;
        left: -4px;
        height: 8px;
        background: var(--ipe-blue);
        content: "";
      }
      .ipe-blog .case-study__title {
        margin: 0 0 18px !important;
        padding-left: 0;
        color: var(--ipe-dark);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.55;
      }
      .ipe-blog .case-study__title::before {
        display: block;
        margin-bottom: 5px;
        color: var(--ipe-blue);
        content: "CASE STUDY";
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.08em;
        line-height: 1.3;
      }
      .ipe-blog .case-study__image {
        margin: 0 0 22px !important;
        text-align: center;
      }
      .ipe-blog .case-study__image img {
        display: block;
        width: 100%;
        margin: 0 auto;
      }
      .ipe-blog .case-study__table {
        margin: 0 0 22px;
      }
      .ipe-blog .case-study__table td {
        padding: 13px 14px;
      }
      .ipe-blog .case-study__table td:first-child {
        width: 28%;
        background: var(--ipe-blue);
        color: #fff;
        font-weight: 700;
      }
      .ipe-blog .case-study__description {
        margin: 0 0 16px !important;
      }
      .ipe-blog .case-study__link {
        margin: 0 !important;
        text-align: center;
      }
      .ipe-blog .case-study__link a {
        display: inline-block;
        padding: 9px 22px;
        border: 2px solid var(--ipe-blue);
        border-radius: 4px;
        background: #fff;
        color: var(--ipe-blue);
        font-weight: 700;
        text-decoration: none;
      }
      .ipe-blog .case-study__link a::after {
        margin-left: 8px;
        content: "→";
      }
      .ipe-blog .case-study__link a:hover {
        background: var(--ipe-blue);
        color: #fff;
      }

      /* --- 追加パーツ：自社サービス紹介 --- */
      .ipe-blog .service-card-wrap {
        margin: 32px 0 40px;
        padding: 0;
        border: 0;
        background: transparent;
      }
      .ipe-blog .service-card {
        display: grid;
        grid-template-columns: minmax(0, 56fr) minmax(0, 44fr);
        column-gap: 28px;
        align-items: start;
        margin: 0;
        padding: 28px;
        overflow: hidden;
        border: 1px solid var(--ipe-border);
        border-radius: 8px;
        background: #fff;
      }
      .ipe-blog .service-card__header {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 20px;
        padding: 0 0 14px;
        border: 0;
        border-bottom: 1px solid var(--ipe-border);
        background: transparent;
      }
      .ipe-blog .service-card__label {
        margin: 0 0 4px !important;
        color: var(--ipe-blue);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        line-height: 1.4;
      }
      .ipe-blog .service-card__title {
        margin: 0;
        color: var(--ipe-dark);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.55;
      }
      .ipe-blog .service-card__title::after {
        display: block;
        width: 32px;
        height: 3px;
        margin-top: 10px;
        background: var(--ipe-brand);
        content: "";
      }
      .ipe-blog .service-card__image {
        grid-column: 1;
        grid-row: 2 / span 2;
        margin: 0 !important;
        padding: 0;
      }
      .ipe-blog .service-card__image img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0 auto;
      }
      .ipe-blog .service-card__body {
        display: contents;
      }
      .ipe-blog .service-card__description {
        grid-column: 2;
        grid-row: 2;
        margin: 0 0 18px;
        color: var(--ipe-text);
        line-height: 1.8;
      }
      .ipe-blog .service-card__features {
        display: grid;
        grid-column: 2;
        grid-row: 3;
        grid-template-columns: 1fr;
        gap: 10px;
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: service-feature;
      }
      .ipe-blog .service-card__features li {
        display: grid;
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 8px;
        padding: 0 0 10px;
        border-bottom: 1px solid #e2e7ea;
        color: var(--ipe-text);
        font-size: 14px;
        line-height: 1.7;
        counter-increment: service-feature;
      }
      .ipe-blog .service-card__features li::before {
        color: var(--ipe-blue);
        content: counter(service-feature, decimal-leading-zero);
        font-weight: 700;
      }
      .ipe-blog .service-card__actions {
        display: grid;
        grid-column: 1 / -1;
        grid-row: 4;
        grid-template-columns: repeat(2, auto);
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 26px;
      }
      .ipe-blog .service-card__action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 42px;
        padding: 9px 18px;
        border: 1px solid var(--ipe-blue);
        border-radius: 4px;
        color: var(--ipe-blue);
        font-size: 14px;
        font-weight: 700;
        text-decoration: none;
        transition: 0.2s ease;
      }
      .ipe-blog .service-card__action:hover {
        background: var(--ipe-blue-soft);
        color: var(--ipe-cta);
      }
      .ipe-blog .service-card__action--primary {
        min-width: 220px;
        max-width: 100%;
        background: var(--ipe-blue);
        color: #fff;
      }
      .ipe-blog .service-card__action--primary:hover {
        background: var(--ipe-cta);
        color: #fff;
      }
      .ipe-blog .service-card__action:not(.service-card__action--primary) {
        border-color: var(--ipe-blue);
        background: #fff;
        color: var(--ipe-blue);
        text-decoration: none;
      }
      .ipe-blog .service-card__action:not(.service-card__action--primary):hover {
        border-color: var(--ipe-blue);
        background: var(--ipe-blue);
        color: #fff;
      }
      .ipe-blog .service-card__action:not(.service-card__action--primary)::after {
        margin-left: 6px;
        content: "→";
      }

      /* --- 追加パーツ：本文中CTAボタン --- */
      .ipe-blog .inline-cta {
        margin: 28px 0;
        text-align: center;
      }
      .ipe-blog .inline-cta__button {
        display: inline-block;
        padding: 11px 26px;
        background: var(--ipe-cta);
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 100, 143, 0.18);
        transition: 0.2s ease;
      }
      .ipe-blog .inline-cta__button:hover {
        background: var(--ipe-blue);
        color: #fff;
        transform: translateY(-1px);
      }

      /* --- 追加パーツ：FAQ --- */
      .ipe-blog .faq-section {
        margin: 48px 0 0;
      }
      .ipe-blog .faq-section__title {
        margin: 0 0 20px;
        padding: 12px 15px;
        border: 0;
        border-bottom: 3px solid var(--ipe-blue);
        border-radius: 0;
        background: #fff;
        color: var(--ipe-dark);
        font-size: 21px;
        font-weight: 700;
        line-height: 1.5;
      }
      .ipe-blog .faq-section__title::before {
        display: block;
        margin-bottom: 4px;
        color: var(--ipe-blue);
        content: "FAQ";
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        line-height: 1.3;
      }
      .ipe-blog .faq-item {
        margin: 28px 0 32px;
        border: 1px solid var(--ipe-border);
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
      }
      .ipe-blog .faq-item__question {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin: 0;
        padding: 18px 20px;
        border: 0;
        border-bottom: 1px solid #dcebf1;
        background: var(--ipe-blue-soft);
        color: var(--ipe-dark);
        font-size: 18px;
        font-weight: 700;
        line-height: 1.65;
      }
      .ipe-blog .faq-item__answer {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 18px 20px 20px;
        color: var(--ipe-text);
        line-height: 1.85;
      }
      .ipe-blog .faq-item__answer p {
        margin: 0 !important;
      }
      .ipe-blog .faq-item__mark {
        display: inline-flex;
        flex: 0 0 28px;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        margin-top: 0.2em;
        border-radius: 50%;
        background: var(--ipe-blue);
        color: #fff;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
      }
      .ipe-blog .faq-item__answer .faq-item__mark {
        background: #58717f;
      }

      /* --- 追加パーツ：チェックリスト --- */
      .ipe-blog .checklist {
        margin: 24px 0 30px;
        border: 3px solid var(--ipe-blue);
        border-radius: 0;
        overflow: hidden;
        background: #fff;
      }
      .ipe-blog .checklist__title {
        margin: 0 !important;
        padding: 14px 20px;
        background: var(--ipe-blue);
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.55;
      }
      .ipe-blog .checklist ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .ipe-blog .checklist li {
        position: relative;
        padding: 0;
        border-top: 1px solid #d9e4e9;
        background: #fff;
        color: var(--ipe-dark);
        font-weight: 600;
        line-height: 1.7;
      }
      .ipe-blog .checklist input[type="checkbox"] {
        position: absolute;
        left: 23px;
        top: 50%;
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: var(--ipe-blue);
        transform: translateY(-50%);
      }
      .ipe-blog .checklist label {
        display: block;
        padding: 17px 20px 17px 56px;
        cursor: pointer;
      }
      .ipe-blog .checklist input[type="checkbox"]:focus-visible {
        outline: 2px solid var(--ipe-brand);
        outline-offset: 2px;
      }

      /* --- 追加パーツ：監修者コメント --- */
      .ipe-blog .supervisor-comment {
        margin: 24px 0;
        padding: 18px 20px 28px;
        position: relative;
        overflow: hidden;
        border: 1px solid var(--ipe-border);
        border-left: 4px solid var(--ipe-brand);
        border-radius: 8px;
        background: var(--ipe-blue-soft);
      }
      .ipe-blog .supervisor-comment::after {
        position: absolute;
        right: 14px;
        bottom: -24px;
        color: rgba(42, 160, 208, 0.16);
        content: "❞";
        font-family: Georgia, serif;
        font-size: 76px;
        line-height: 1;
        pointer-events: none;
        z-index: 0;
      }
      .ipe-blog .supervisor-comment__head {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 10px;
      }
      .ipe-blog .supervisor-comment__avatar {
        width: 42px;
        height: 42px;
        object-fit: cover;
        border-radius: 50%;
        border: 2px solid var(--ipe-brand);
      }
      .ipe-blog .supervisor-comment__label {
        position: relative;
        display: inline-block;
        padding: 4px 9px;
        border-radius: 5px;
        background: var(--ipe-blue);
        color: #fff;
        font-weight: 700;
      }
      .ipe-blog .supervisor-comment__label::before {
        position: absolute;
        top: 50%;
        left: -10px;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-right-color: var(--ipe-blue);
        content: "";
        transform: translateY(-50%);
      }
      .ipe-blog .supervisor-comment p {
        position: relative;
        z-index: 1;
        margin: 0;
        color: var(--ipe-dark);
        line-height: 1.8;
      }

      /* --- 追加パーツ：本文内の関連記事カード --- */
      .ipe-blog .related-card {
        display: grid;
        grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
        column-gap: 24px;
        align-items: center;
        margin: 34px 0;
        padding: 22px;
        border: 1px solid var(--ipe-border);
        border-radius: 8px;
        color: inherit;
        text-decoration: none;
        background: #fff;
        transition: 0.2s ease;
      }
      .ipe-blog .related-card:hover {
        border-color: var(--ipe-brand);
        box-shadow: 0 4px 14px rgba(42, 160, 208, 0.1);
      }
      .ipe-blog .related-card__body {
        padding: 0;
      }
      .ipe-blog .related-card__label {
        display: block;
        margin-bottom: 8px;
        color: var(--ipe-blue);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
      }
      .ipe-blog .related-card__title {
        display: block;
        color: var(--ipe-dark);
        font-size: 17px;
        font-weight: 700;
        line-height: 1.6;
      }
      .ipe-blog .related-card__excerpt {
        display: block;
        margin-top: 10px;
        color: var(--ipe-muted);
        font-size: 13px;
      }
      .ipe-blog .related-card__media {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px;
        background: var(--ipe-blue-soft);
      }
      .ipe-blog .related-card__thumb {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        max-width: 100%;
        margin: 0 auto;
      }

      /* --- 本文内：資料DLフォーム（テスト実装） --- */
      .ipe-blog .download-form-block {
        display: grid;
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        column-gap: 32px;
        row-gap: 20px;
        margin: 32px 0 40px;
        padding: 24px;
        border: 1px solid var(--ipe-border);
        border-top: 4px solid var(--ipe-brand);
        background: #fff;
      }
      .ipe-blog .download-form-block__intro {
        min-width: 0;
      }
      .ipe-blog .download-form-block__title {
        grid-column: 1 / -1;
        margin: 0;
        padding: 0;
        border: 0;
        color: var(--ipe-dark);
        font-size: 20px;
        line-height: 1.5;
      }
      .ipe-blog .download-form-block__description {
        margin: 0 0 14px;
        color: var(--ipe-text);
        font-size: 14px;
        line-height: 1.8;
      }
      .ipe-blog .download-form-gallery__main {
        border: 1px solid var(--ipe-border);
        background: #fff;
      }
      .ipe-blog .download-form-gallery__main img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
      }
      .ipe-blog .download-form-gallery__thumbs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 9px;
        margin-top: 10px;
      }
      .ipe-blog .download-form-gallery__thumb {
        min-width: 0;
        padding: 0;
        border: 1px solid var(--ipe-border);
        background: #fff;
        cursor: pointer;
      }
      .ipe-blog .download-form-gallery__thumb.is-active {
        border-color: var(--ipe-brand);
      }
      .ipe-blog .download-form-gallery__thumb img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
      }
      .ipe-blog .download-form-gallery {
        margin-bottom: 20px;
      }
      .ipe-blog .download-form-block__recommend {
        margin-top: 20px;
        padding: 16px 18px;
        border: 1px solid var(--ipe-border);
        background: var(--ipe-blue-soft);
      }
      .ipe-blog .download-form-block__recommend-title {
        margin: 0 0 10px;
        color: var(--ipe-dark);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
      }
      .ipe-blog .download-form-block__recommend-list {
        margin: 0;
        padding-left: 1.3em;
        font-size: 14px;
        line-height: 1.7;
      }
      .ipe-blog .download-form-block__recommend-list li {
        line-height: 1.7;
      }
      .ipe-blog .download-form-block__recommend-list li + li {
        margin-top: 6px;
      }
      .ipe-blog .download-form-block__form {
        min-width: 0;
        width: 100%;
      }
      .ipe-blog #hubspot-form-test {
        max-width: 100%;
      }

      /* --- レビュー用：記事末CTAサンプル --- */
      .ipe-blog .review-footer {
        margin-top: 44px;
        padding: 0;
        border: 3px solid #007bad;
        border-radius: 4px;
        background: #fff;
        overflow: hidden;
        text-align: center;
      }
      .ipe-blog .review-footer__head {
        padding: 18px 24px;
        background: #007bad;
      }
      .ipe-blog .review-footer__title {
        margin: 0;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.5;
      }
      .ipe-blog .review-footer__body {
        padding: 28px 32px 32px;
        background: #fff;
      }
      .ipe-blog .review-footer__text {
        margin: 0 0 20px;
        color: var(--ipe-dark);
        line-height: 1.8;
      }
      .ipe-blog .review-footer__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 28px;
        border-radius: 4px;
        background: #007bad;
        color: #fff;
        font-weight: 700;
        text-decoration: none;
        transition: 0.2s ease;
      }
      .ipe-blog .review-footer__button::before {
        width: 30px;
        height: 30px;
        margin-right: 8px;
        background-image: url(https://ipeinc.jp/wp-content/themes/twentysixteen-seo/img/blog/header-mail-icon.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        content: "";
        flex: 0 0 auto;
      }
      .ipe-blog .review-footer__button:hover {
        background: #00648f;
        color: #fff;
        transform: translateY(-1px);
      }

      /* --- Gutenberg core block interoperability ---
         フロントで生成される標準ブロックのclassを想定する。
         独自コンポーネントの見た目は上記class群が担う。 */
      .ipe-blog h4 {
        scroll-margin-top: 90px;
        margin: 28px 0 12px;
        color: #30373d;
        font-size: 16px;
        line-height: 1.55;
      }
      .ipe-blog figure {
        margin-right: 0;
        margin-left: 0;
      }
      .ipe-blog figcaption {
        margin-top: 8px;
        color: var(--ipe-muted);
        font-size: 13px;
        line-height: 1.6;
        text-align: center;
      }
      .ipe-blog .wp-block-image {
        margin: 28px 0;
        text-align: center;
      }
      .ipe-blog .wp-block-image img {
        display: block;
        height: auto;
        margin: 0 auto;
      }
      .ipe-blog .article-hero {
        margin: 0 0 26px;
      }
      .ipe-blog .wp-block-table {
        width: 100%;
        margin: 24px 0 28px;
        overflow-x: auto;
      }
      .ipe-blog .wp-block-table table {
        width: 100%;
        margin: 0;
      }
      .ipe-blog .wp-block-list {
        margin-top: 0;
        margin-bottom: 20px;
      }
      .ipe-blog .wp-block-buttons {
        margin: 28px 0;
      }
      .ipe-blog .wp-block-button__link {
        font: inherit;
      }
      .ipe-blog .wp-block-quote {
        margin: 28px 0;
        padding: 18px 22px;
        border-left: 4px solid var(--ipe-brand);
        background: var(--ipe-blue-soft);
        color: var(--ipe-dark);
      }
      .ipe-blog .wp-block-quote > :last-child {
        margin-bottom: 0;
      }

      /* --- 記事本文パーツ：SP調整 --- */
      @media (max-width: 720px) {
        .ipe-blog h1 {
          font-size: 27px;
        }
        .ipe-blog h2 {
          font-size: 20px;
        }
        .ipe-blog h3 {
          font-size: 17px;
        }
        .ipe-blog .toc li {
          font-size: 14px;
        }
        .ipe-blog .review-footer__head {
          padding: 16px 18px;
        }
        .ipe-blog .review-footer__title {
          font-size: 18px;
        }
        .ipe-blog .review-footer__body {
          padding: 22px 18px 24px;
        }
        .ipe-blog .review-footer__text {
          margin-bottom: 18px;
        }
        .ipe-blog .faq-section {
          margin-top: 40px;
        }
        .ipe-blog .faq-section__title {
          margin-bottom: 16px;
          padding: 0 0 9px;
          border-radius: 0;
          font-size: 19px;
        }
        .ipe-blog .faq-item {
          margin: 24px 0 28px;
          border-radius: 8px;
        }
        .ipe-blog .faq-item__question {
          gap: 10px;
          padding: 16px;
          font-size: 16px;
        }
        .ipe-blog .faq-item__answer {
          gap: 10px;
          padding: 16px;
          line-height: 1.8;
        }
        .ipe-blog .faq-item__mark {
          flex-basis: 26px;
          width: 26px;
          height: 26px;
          font-size: 13px;
        }
        .ipe-blog .info-box {
          padding: 20px 18px;
        }
        .ipe-blog .info-box__title {
          margin-bottom: 12px !important;
          font-size: 18px;
        }
        .ipe-blog .case-study {
          margin: 28px 0 34px;
          padding: 18px;
        }
        .ipe-blog .case-study__title {
          margin-bottom: 16px !important;
          font-size: 18px;
        }
        .ipe-blog .case-study__image {
          margin-bottom: 18px !important;
        }
        .ipe-blog .case-study__table td {
          padding: 11px 12px;
        }
        .ipe-blog .case-study__table td:first-child {
          width: 110px;
        }
        .ipe-blog .service-card-wrap {
          margin: 28px 0 34px;
          padding: 0;
        }
        .ipe-blog .service-card__header {
          margin-bottom: 18px;
          padding: 0 0 12px;
        }
        .ipe-blog .service-card__title {
          font-size: 18px;
        }
        .ipe-blog .service-card__image {
          margin: 0 0 18px !important;
          padding: 0;
        }
        .ipe-blog .service-card__image img {
          width: 100%;
        }
        .ipe-blog .service-card__body {
          display: block;
        }
        .ipe-blog .service-card__features {
          grid-template-columns: 1fr;
          gap: 8px;
        }
        .ipe-blog .service-card__actions {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .ipe-blog .service-card__action {
          width: auto;
        }
        .ipe-blog .service-card {
          display: block;
          padding: 22px 18px;
        }
        .ipe-blog .checklist__title {
          padding: 13px 16px;
          font-size: 16px;
        }
        .ipe-blog .checklist li {
          padding: 0;
        }
        .ipe-blog .checklist input[type="checkbox"] {
          left: 16px;
        }
        .ipe-blog .checklist label {
          padding: 15px 16px 15px 48px;
        }
        .ipe-blog .supervisor-comment {
          padding: 16px 16px 26px;
        }
        .ipe-blog .supervisor-comment__head {
          gap: 8px;
        }
        .ipe-blog .supervisor-comment__avatar {
          width: 38px;
          height: 38px;
        }
        .ipe-blog .supervisor-comment__label {
          padding: 4px 8px;
          font-size: 14px;
        }
        .ipe-blog .supervisor-comment::after {
          right: 10px;
          font-size: 64px;
        }
        .ipe-blog .supervisor-profile__body {
          display: block;
        }
        .ipe-blog .supervisor-profile__image {
          margin-bottom: 10px;
        }
        .ipe-blog .supervisor-detail {
          margin: 36px 0;
          padding: 20px 18px;
        }
        .ipe-blog .supervisor-detail__profile {
          display: block;
        }
        .ipe-blog .supervisor-detail__image {
          width: 88px;
          height: 88px;
          margin-bottom: 12px;
        }
        .ipe-blog .supervisor-detail__name {
          font-size: 19px;
        }
        .ipe-blog .supervisor-detail__name span {
          display: block;
          margin: 2px 0 0;
        }
        .ipe-blog .supervisor-detail__body {
          margin-top: 16px !important;
        }
        .ipe-blog .related-card {
          grid-template-columns: 1fr;
          row-gap: 18px;
          padding: 18px;
        }
        .ipe-blog .related-card__media {
          order: 0;
          padding: 8px;
        }
        .ipe-blog .related-card__thumb {
          width: 100%;
          height: auto;
          max-height: none;
        }
        .ipe-blog .download-form-block {
          display: block;
          padding: 20px 18px;
        }
        .ipe-blog .download-form-block__title {
          margin-bottom: 16px;
        }
        .ipe-blog .download-form-block__intro {
          margin-bottom: 24px;
        }
        .ipe-blog .data-table {
          display: block;
          overflow-x: auto;
        }
      }